Merge branch 'main' into avatar-in-combobox-and-picker

yihuiliao · web-flow · commit 894e49da6a93 · 2025-09-30T10:19:52.000-07:00
diff --git a/.storybook-s2/docs/Migrating.jsx b/.storybook-s2/docs/Migrating.jsx
@@ -300,6 +300,7 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
           <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>PickerItem</Code></li>
           <li className={style({font: 'body', marginY: 8})}>Change <Code>isLoading</Code> to <Code>loadingState</Code> and provide the appropriate loading state.</li>
+          <li className={style({font: 'body', marginY: 8})}><Code>defaultSelectedKey</Code> and <Code>selectedKey</Code> have been deprecated in favor of <Code>defaultValue</Code> and <Code>value</Code> respectively. See the <Link href="?path=/docs/picker--docs">props table</Link> for the new accepted types.</li>
         </ul>
 
         <H3>ProgressBar</H3>
diff --git a/packages/@adobe/spectrum-css-temp/components/tray/index.css b/packages/@adobe/spectrum-css-temp/components/tray/index.css
@@ -55,7 +55,7 @@
   /* Add padding at the bottom to account for the rest of the viewport height behind the keyboard.
    * This is necessary so that there isn't a visible gap that appears while the keyboard is animating
    * in and out. Fall back to the safe area inset to account for things like iOS home indicator.
-     We also add an additional 100vh of padding (offset by the bottom position below) so the tray 
+     We also add an additional 100vh of padding (offset by the bottom position below) so the tray
      extends behind Safari's address bar and keyboard in iOS 26. */
   padding-bottom: calc(max(calc(100dvh - var(--spectrum-visual-viewport-height)), env(safe-area-inset-bottom)) + 100vh);
   position: absolute;
@@ -75,6 +75,8 @@
   /* Exit animations */
   transition: opacity var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay),
     transform var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay);
+
+  box-sizing: content-box;
 }
 
 .is-open {
diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts
@@ -16,7 +16,7 @@ import {AriaComboBoxProps} from '@react-types/combobox';
 import {ariaHideOutside} from '@react-aria/overlays';
 import {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox';
 import {BaseEvent, DOMAttributes, KeyboardDelegate, LayoutDelegate, PressEvent, RefObject, RouterOptions, ValidationResult} from '@react-types/shared';
-import {chain, getActiveElement, getOwnerDocument, isAppleDevice, mergeProps, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils';
+import {chain, getActiveElement, getOwnerDocument, isAppleDevice, mergeProps, useEvent, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils';
 import {ComboBoxState} from '@react-stately/combobox';
 import {dispatchVirtualFocus} from '@react-aria/focus';
 import {FocusEvent, InputHTMLAttributes, KeyboardEvent, TouchEvent, useEffect, useMemo, useRef} from 'react';
@@ -354,6 +354,10 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     }
   }, [focusedItem]);
 
+  useEvent(listBoxRef, 'react-aria-item-action', state.isOpen ? () => {
+    state.close();
+  } : undefined);
+
   return {
     labelProps,
     buttonProps: {
@@ -383,7 +387,8 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
       shouldUseVirtualFocus: true,
       shouldSelectOnPressUp: true,
       shouldFocusOnHover: true,
-      linkBehavior: 'selection' as const
+      linkBehavior: 'selection' as const,
+      ['UNSTABLE_itemBehavior']: 'action'
     }),
     descriptionProps,
     errorMessageProps,
diff --git a/packages/@react-aria/listbox/src/useListBox.ts b/packages/@react-aria/listbox/src/useListBox.ts
@@ -100,7 +100,9 @@ export function useListBox<T>(props: AriaListBoxOptions<T>, state: ListState<T>,
     shouldFocusOnHover: props.shouldFocusOnHover,
     isVirtualized: props.isVirtualized,
     onAction: props.onAction,
-    linkBehavior
+    linkBehavior,
+    // @ts-ignore
+    UNSTABLE_itemBehavior: props['UNSTABLE_itemBehavior']
   });
 
   let {labelProps, fieldProps} = useLabel({
diff --git a/packages/@react-aria/listbox/src/useOption.ts b/packages/@react-aria/listbox/src/useOption.ts
@@ -137,6 +137,8 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
     isDisabled,
     onAction: onAction || item?.props?.onAction ? chain(item?.props?.onAction, onAction) : undefined,
     linkBehavior: data?.linkBehavior,
+    // @ts-ignore
+    UNSTABLE_itemBehavior: data?.['UNSTABLE_itemBehavior'],
     id
   });
 
diff --git a/packages/@react-aria/selection/src/useSelectableItem.ts b/packages/@react-aria/selection/src/useSelectableItem.ts
@@ -205,8 +205,9 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   // With highlight selection, onAction is secondary, and occurs on double click. Single click selects the row.
   // With touch, onAction occurs on single tap, and long press enters selection mode.
   let isLinkOverride = manager.isLink(key) && linkBehavior === 'override';
+  let isActionOverride = onAction && options['UNSTABLE_itemBehavior'] === 'action';
   let hasLinkAction = manager.isLink(key) && linkBehavior !== 'selection' && linkBehavior !== 'none';
-  let allowsSelection = !isDisabled && manager.canSelectItem(key) && !isLinkOverride;
+  let allowsSelection = !isDisabled && manager.canSelectItem(key) && !isLinkOverride && !isActionOverride;
   let allowsActions = (onAction || hasLinkAction) && !isDisabled;
   let hasPrimaryAction = allowsActions && (
     manager.selectionBehavior === 'replace'
@@ -225,6 +226,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   let performAction = (e) => {
     if (onAction) {
       onAction();
+      ref.current?.dispatchEvent(new CustomEvent('react-aria-item-action', {bubbles: true}));
     }
 
     if (hasLinkAction && ref.current) {
diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -299,7 +299,10 @@ const panelStyles = style({
   font: 'body',
   height: '--disclosure-panel-height',
   overflow: 'clip',
-  transition: '[height]'
+  transition: {
+    default: '[height]',
+    '@media (prefers-reduced-motion: reduce)': 'none'
+  }
 });
 
 const panelInner = style({
diff --git a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
@@ -345,6 +345,7 @@ export function WithCreateOption() {
   return (
     <ComboBox
       label="Favorite Animal"
+      placeholder="Select an animal"
       inputValue={inputValue}
       onInputChange={setInputValue}>
       {inputValue.length > 0 && (
diff --git a/packages/@react-spectrum/s2/stories/Picker.stories.tsx b/packages/@react-spectrum/s2/stories/Picker.stories.tsx
@@ -49,7 +49,9 @@ const meta: Meta<typeof Picker<any>> = {
     description: {control: {type: 'text'}},
     errorMessage: {control: {type: 'text'}},
     children: {table: {disable: true}},
-    contextualHelp: {table: {disable: true}}
+    contextualHelp: {table: {disable: true}},
+    defaultSelectedKey: {table: {disable: true}},
+    selectedKey: {table: {disable: true}}
   },
   args: {...getActionArgs(events)},
   title: 'Picker'
diff --git a/packages/dev/s2-docs/pages/react-aria/SegmentedControl.css b/packages/dev/s2-docs/pages/react-aria/SegmentedControl.css
@@ -17,6 +17,10 @@
     border-radius: 8px;
     background: var(--gray-50);
     outline: 2px solid var(--gray-600);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   .segmented-control-item {
diff --git a/packages/react-aria-components/docs/Disclosure.mdx b/packages/react-aria-components/docs/Disclosure.mdx
@@ -99,6 +99,10 @@ import {ChevronRight} from 'lucide-react';
   height: var(--disclosure-panel-height);
   transition: height 250ms;
   overflow: clip;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 ```
 
diff --git a/packages/react-aria-components/docs/Tabs.mdx b/packages/react-aria-components/docs/Tabs.mdx
@@ -123,6 +123,10 @@ import {Tabs, TabList, Tab, TabPanel, SelectionIndicator} from 'react-aria-compo
     position: absolute;
     transition-property: translate, width, height;
     transition-duration: 200ms;
+    
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &[data-hovered],
diff --git a/packages/react-aria-components/docs/ToggleButtonGroup.mdx b/packages/react-aria-components/docs/ToggleButtonGroup.mdx
@@ -242,6 +242,10 @@ import {ToggleButtonGroup, ToggleButton, SelectionIndicator} from 'react-aria-co
     border-radius: 8px;
     background: var(--gray-50);
     outline: 2px solid var(--gray-600);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   .react-aria-ToggleButton {
diff --git a/packages/react-aria-components/test/ComboBox.test.js b/packages/react-aria-components/test/ComboBox.test.js
@@ -409,7 +409,7 @@ describe('ComboBox', () => {
     expect(options[0]).toHaveTextContent('No results');
   });
 
-  it('should support onAction', async () => {
+  it.each(['keyboard', 'mouse'])('should support onAction with %s', async (interactionType) => {
     let onAction = jest.fn();
     function WithCreateOption() {
       let [inputValue, setInputValue] = useState('');
@@ -457,8 +457,29 @@ describe('ComboBox', () => {
     expect(options).toHaveLength(1);
     expect(options[0]).toHaveTextContent('Create "L"');
 
-    await user.keyboard('{ArrowDown}{Enter}');
+    if (interactionType === 'keyboard') {
+      await user.keyboard('{ArrowDown}{Enter}');
+    } else {
+      await user.click(options[0]);
+    }
     expect(onAction).toHaveBeenCalledTimes(1);
     expect(comboboxTester.combobox).toHaveValue('');
+    
+    // Repeat with an option selected.
+    await comboboxTester.selectOption({option: 'Cat'});
+
+    await user.keyboard('s');
+
+    options = comboboxTester.options();
+    expect(options).toHaveLength(1);
+    expect(options[0]).toHaveTextContent('Create "Cats"');
+
+    if (interactionType === 'keyboard') {
+      await user.keyboard('{ArrowDown}{Enter}');
+    } else {
+      await user.click(options[0]);
+    }
+    expect(onAction).toHaveBeenCalledTimes(2);
+    expect(comboboxTester.combobox).toHaveValue('Cat');
   });
 });
diff --git a/starters/docs/src/Disclosure.css b/starters/docs/src/Disclosure.css
@@ -38,4 +38,8 @@
   height: var(--disclosure-panel-height);
   transition: height 250ms;
   overflow: clip;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
diff --git a/starters/docs/src/Tabs.css b/starters/docs/src/Tabs.css
@@ -59,6 +59,10 @@
     position: absolute;
     transition-property: translate, width, height;
     transition-duration: 200ms;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &[data-selected] {
diff --git a/starters/tailwind/src/Disclosure.tsx b/starters/tailwind/src/Disclosure.tsx
@@ -97,7 +97,7 @@ export interface DisclosurePanelProps extends AriaDisclosurePanelProps {
 
 export function DisclosurePanel({ children, ...props }: DisclosurePanelProps) {
   return (
-    <AriaDisclosurePanel {...props} className={composeTailwindRenderProps(props.className, 'h-(--disclosure-panel-height) transition-[height] overflow-clip')}>
+    <AriaDisclosurePanel {...props} className={composeTailwindRenderProps(props.className, 'h-(--disclosure-panel-height) motion-safe:transition-[height] overflow-clip')}>
       <div className="px-4 py-2">{children}</div>
     </AriaDisclosurePanel>
   );
diff --git a/starters/tailwind/src/Tabs.tsx b/starters/tailwind/src/Tabs.tsx
@@ -77,7 +77,7 @@ export function Tab(props: TabProps) {
       )}>
       {composeRenderProps(props.children, children => (<>
         {children}
-        <SelectionIndicator className="absolute top-0 left-0 w-full h-full z-10 bg-white rounded-full mix-blend-difference transition-[translate,width,height]" />
+        <SelectionIndicator className="absolute top-0 left-0 w-full h-full z-10 bg-white rounded-full mix-blend-difference motion-safe:transition-[translate,width,height] " />
       </>))}
     </RACTab>
   );
