Merge branch 'main' into s2-treeview

Author: snowystinger

packages/@react-aria/gridlist/src/useGridList.ts

@@ -16,6 +16,7 @@ import {
   DisabledBehavior,
   DOMAttributes,
   DOMProps,
+  FocusStrategy,
   Key,
   KeyboardDelegate,
   LayoutDelegate,
@@ -30,6 +31,8 @@ import {useHasTabbableChild} from '@react-aria/focus';
 import {useSelectableList} from '@react-aria/selection';
 
 export interface GridListProps<T> extends CollectionBase<T>, MultipleSelection {
+  /** Whether to auto focus the gridlist or an option. */
+  autoFocus?: boolean | FocusStrategy,
   /**
    * Handler that is called when a user performs an action on an item. The exact user event depends on
    * the collection's `selectionBehavior` prop and the interaction modality.
@@ -113,7 +116,8 @@ export function useGridList<T>(props: AriaGridListOptions<T>, state: ListState<T
     isVirtualized,
     selectOnFocus: state.selectionManager.selectionBehavior === 'replace',
     shouldFocusWrap: props.shouldFocusWrap,
-    linkBehavior
+    linkBehavior,
+    autoFocus: props.autoFocus
   });
 
   let id = useId(props.id);

packages/@react-spectrum/s2/api-diff.md

@@ -59,7 +59,7 @@ React Spectrum v3 [style props](https://react-spectrum.adobe.com/react-spectrum/
 | Prop | Spectrum 2 | RSP v3 | Comments |
 |------|------------|--------|----------|
 | size | 🟢 `'L' \| 'M' \| 'S' \| 'XL'` | – | |
-| variant | 🟢 `'accent' \| 'blue' \| 'brown' \| 'celery' \| 'charteuse' \| 'cinnamon' \| 'cyan' \| 'fuchsia' \| 'gray' \| 'green' \| 'indigo' \| 'informative' \| 'magenta' \| 'negative' \| 'neutral' \| 'notice' \| 'orange' \| 'pink' \| 'positive' \| 'purple' \| 'red' \| 'seafoam' \| 'silver' \| 'turquoise' \| 'yellow'` | 🔴 `'fuchsia' \| 'indigo' \| 'info' \| 'magenta' \| 'negative' \| 'neutral' \| 'positive' \| 'purple' \| 'seafoam' \| 'yellow'` | |
+| variant | 🟢 `'accent' \| 'blue' \| 'brown' \| 'celery' \| 'chartreuse' \| 'cinnamon' \| 'cyan' \| 'fuchsia' \| 'gray' \| 'green' \| 'indigo' \| 'informative' \| 'magenta' \| 'negative' \| 'neutral' \| 'notice' \| 'orange' \| 'pink' \| 'positive' \| 'purple' \| 'red' \| 'seafoam' \| 'silver' \| 'turquoise' \| 'yellow'` | 🔴 `'fuchsia' \| 'indigo' \| 'info' \| 'magenta' \| 'negative' \| 'neutral' \| 'positive' \| 'purple' \| 'seafoam' \| 'yellow'` | |
 ## Button
 
 | Prop | Spectrum 2 | RSP v3 | Comments |

packages/@react-spectrum/s2/chromatic/Badge.stories.tsx

@@ -30,7 +30,7 @@ export default meta;
 let states = [
   {size: ['S', 'M', 'L', 'XL']},
   {fillStyle: ['bold', 'subtle', 'outline']},
-  {variant: ['accent', 'informative', 'neutral', 'positive', 'notice', 'negative', 'gray', 'red', 'orange', 'yellow', 'charteuse', 'celery', 'green', 'seafoam', 'cyan', 'blue', 'indigo', 'purple', 'fuchsia', 'magenta', 'pink', 'turquoise', 'brown', 'cinnamon', 'silver']}
+  {variant: ['accent', 'informative', 'neutral', 'positive', 'notice', 'negative', 'gray', 'red', 'orange', 'yellow', 'chartreuse', 'celery', 'green', 'seafoam', 'cyan', 'blue', 'indigo', 'purple', 'fuchsia', 'magenta', 'pink', 'turquoise', 'brown', 'cinnamon', 'silver']}
 ];
 
 let combinations = generatePowerset(states);

packages/@react-spectrum/s2/src/Badge.tsx

@@ -35,12 +35,17 @@ export interface BadgeStyleProps {
    *
    * @default 'neutral'
    */
-  variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',
+  variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',
   /**
    * The fill of the badge.
    * @default 'bold'
    */
-  fillStyle?: 'bold' | 'subtle' | 'outline'
+  fillStyle?: 'bold' | 'subtle' | 'outline',
+  /**
+   * Sets the text behavior for the contents.
+   * @default 'wrap'
+   */
+  overflowMode?: 'wrap' | 'truncate'
 }
 
 export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {
@@ -86,7 +91,7 @@ const badge = style<BadgeStyleProps>({
           notice: 'black',
           orange: 'black',
           yellow: 'black',
-          charteuse: 'black',
+          chartreuse: 'black',
           celery: 'black'
         }
       },
@@ -108,7 +113,7 @@ const badge = style<BadgeStyleProps>({
           red: 'red',
           orange: 'orange',
           yellow: 'yellow',
-          charteuse: 'chartreuse',
+          chartreuse: 'chartreuse',
           celery: 'celery',
           green: 'green',
           seafoam: 'seafoam',
@@ -137,7 +142,7 @@ const badge = style<BadgeStyleProps>({
           red: 'red-subtle',
           orange: 'orange-subtle',
           yellow: 'yellow-subtle',
-          charteuse: 'chartreuse-subtle',
+          chartreuse: 'chartreuse-subtle',
           celery: 'celery-subtle',
           green: 'green-subtle',
           seafoam: 'seafoam-subtle',
@@ -191,6 +196,7 @@ export const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HT
     variant = 'neutral',
     size = 'S',
     fillStyle = 'bold',
+    overflowMode = 'wrap',
     ...otherProps
   } = props; // useProviderProps(props) in v3
   let domRef = useDOMRef(ref);
@@ -199,7 +205,16 @@ export const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HT
   return (
     <Provider
       values={[
-        [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
+        [TextContext, {
+          styles: style({
+            paddingY: '--labelPadding', 
+            order: 1, 
+            overflowX: 'hidden', 
+            overflowY: 'hidden', 
+            textOverflow: 'ellipsis', 
+            whiteSpace: {overflowMode: {truncate: 'nowrap', wrap: 'normal'}}
+          })({overflowMode})
+        }],
         [IconContext, {
           render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
           styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})

packages/@react-stately/tabs/src/useTabListState.ts

@@ -43,7 +43,7 @@ export function useTabListState<T extends object>(props: TabListStateOptions<T>)
   useEffect(() => {
     // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
     let selectedKey = currentSelectedKey;
-    if (selectionManager.isEmpty || selectedKey == null || !collection.getItem(selectedKey)) {
+    if (props.selectedKey == null && (selectionManager.isEmpty || selectedKey == null || !collection.getItem(selectedKey))) {
       selectedKey = findDefaultSelectedKey(collection, state.disabledKeys);
       if (selectedKey != null) {
         // directly set selection because replace/toggle selection won't consider disabled keys

packages/react-aria-components/test/GridList.test.js

@@ -128,6 +128,13 @@ describe('GridList', () => {
     expect(itemRef.current).toBeInstanceOf(HTMLElement);
   });
 
+  it('should support autoFocus', () => {
+    let {getByRole} = renderGridList({autoFocus: true});
+    let gridList = getByRole('grid');
+
+    expect(document.activeElement).toBe(gridList);
+  });
+
   it('should support hover', async () => {
     let onHoverStart = jest.fn();
     let onHoverChange = jest.fn();

packages/react-aria-components/test/ListBox.test.js

@@ -337,6 +337,12 @@ describe('ListBox', () => {
     expect(getAllByRole('option').map(o => o.textContent)).toEqual(['Hi']);
   });
 
+  it('should support autoFocus', () => {
+    let {getByRole} = renderListbox({autoFocus: true});
+    let listbox = getByRole('listbox');
+    expect(document.activeElement).toBe(listbox);
+  });
+
   it('should support hover', async () => {
     let hoverStartSpy = jest.fn();
     let hoverChangeSpy = jest.fn();

packages/react-aria-components/test/Tabs.test.js

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {Button, Collection, Tab, TabList, TabPanel, Tabs} from '../';
 import {fireEvent, pointerMap, render, waitFor, within} from '@react-spectrum/test-utils-internal';
-import React from 'react';
-import {Tab, TabList, TabPanel, Tabs} from '../';
+import React, {useState} from 'react';
 import {TabsExample} from '../stories/Tabs.stories';
 import {User} from '@react-aria/test-utils';
 import userEvent from '@testing-library/user-event';
@@ -497,4 +497,102 @@ describe('Tabs', () => {
     expect(innerTabs[0]).toHaveTextContent('One');
     expect(innerTabs[1]).toHaveTextContent('Two');
   });
+
+  it('can add tabs and keep the current selected key', async () => {
+    let onSelectionChange = jest.fn();
+    function Example(props) {
+      let [tabs, setTabs] = useState([
+        {id: 1, title: 'Tab 1', content: 'Tab body 1'},
+        {id: 2, title: 'Tab 2', content: 'Tab body 2'},
+        {id: 3, title: 'Tab 3', content: 'Tab body 3'}
+      ]);
+
+      const [selectedTabId, setSelectedTabId] = useState(tabs[0].id);
+
+      let addTab = () => {
+        const tabId = tabs.length + 1;
+
+        setTabs((prevTabs) => [
+          ...prevTabs,
+          {
+            id: tabId,
+            title: `Tab ${tabId}`,
+            content: `Tab body ${tabId}`
+          }
+        ]);
+
+        // Use functional update to ensure you're working with the most recent state
+        setSelectedTabId(tabId);
+      };
+
+      let removeTab = () => {
+        if (tabs.length > 1) {
+          setTabs((prevTabs) => {
+            const updatedTabs = prevTabs.slice(0, -1);
+            // Update selectedTabId to the last remaining tab's ID if the current selected tab is removed
+            const newSelectedTabId = updatedTabs[updatedTabs.length - 1].id;
+            setSelectedTabId(newSelectedTabId);
+            return updatedTabs;
+          });
+        }
+      };
+
+      const onSelectionChange = (value) => {
+        setSelectedTabId(value);
+        props.onSelectionChange(value);
+      };
+
+      return (
+        <Tabs selectedKey={selectedTabId} onSelectionChange={onSelectionChange}>
+          <div style={{display: 'flex'}}>
+            <TabList aria-label="Dynamic tabs" items={tabs} style={{flex: 1}}>
+              {(item) => (
+                <Tab>
+                  {({isSelected}) => (
+                    <p
+                      style={{
+                        color: isSelected ? 'red' : 'black'
+                      }}>
+                      {item.title}
+                    </p>
+                  )}
+                </Tab>
+              )}
+            </TabList>
+            <div className="button-group">
+              <Button onPress={addTab}>Add tab</Button>
+              <Button onPress={removeTab}>Remove tab</Button>
+            </div>
+          </div>
+          <Collection items={tabs}>
+            {(item) => (
+              <TabPanel
+                style={{
+                  borderTop: '2px solid black'
+                }}>
+                {item.content}
+              </TabPanel>
+            )}
+          </Collection>
+        </Tabs>
+      );
+    }
+    let {getAllByRole} = render(<Example onSelectionChange={onSelectionChange} />);
+    let tabs = getAllByRole('tab');
+    await user.tab();
+    await user.keyboard('{ArrowRight}');
+    expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
+    await user.tab();
+    onSelectionChange.mockClear();
+    await user.keyboard('{Enter}');
+    expect(onSelectionChange).not.toHaveBeenCalled();
+    tabs = getAllByRole('tab');
+    expect(tabs[3]).toHaveAttribute('aria-selected', 'true');
+
+    await user.tab();
+    await user.keyboard('{Enter}');
+    expect(onSelectionChange).not.toHaveBeenCalled();
+    tabs = getAllByRole('tab');
+    expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
+  });
 });