[pull] main from adobe:main

packages/@adobe/spectrum-css-temp/components/tray/index.css

@@ -70,7 +70,7 @@
   border-radius: var(--spectrum-tray-full-width-border-radius) var(--spectrum-tray-full-width-border-radius) var(--spectrum-tray-border-radius) var(--spectrum-tray-border-radius);
 
   /* Start offset by the animation distance */
-  transform: translateY(100%);
+  transform: translateY(calc(100% - 100vh));
 
   /* Exit animations */
   transition: opacity var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay),

packages/@react-aria/combobox/src/useComboBox.ts

@@ -139,19 +139,22 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
         }
 
         // If the focused item is a link, trigger opening it. Items that are links are not selectable.
-        if (state.isOpen && listBoxRef.current && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
-          let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
-          if (e.key === 'Enter' && item instanceof HTMLAnchorElement) {
-            let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
-            if (collectionItem) {
+        if (state.isOpen && listBoxRef.current && state.selectionManager.focusedKey != null) {
+          let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
+          if (collectionItem?.props.href) {
+            let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
+            if (e.key === 'Enter' && item instanceof HTMLAnchorElement) {
               router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions as RouterOptions);
             }
+            state.close();
+            break;
+          } else if (collectionItem?.props.onAction) {
+            collectionItem.props.onAction();
+            state.close();
+            break;
           }
-
-          state.close();
-        } else {
-          state.commit();
         }
+        state.commit();
         break;
       case 'Escape':
         if (

packages/@react-spectrum/overlays/src/Underlay.tsx

@@ -25,7 +25,7 @@ export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps):
       data-testid="underlay"
       {...otherProps}
       // Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
-      style={{height: isOpen && typeof document !== 'undefined' ? document.body.clientHeight : undefined}}
+      style={{height: typeof document !== 'undefined' ? document.body.getBoundingClientRect().height : undefined}}
       className={classNames(underlayStyles, 'spectrum-Underlay', {
         'is-open': isOpen,
         'spectrum-Underlay--transparent': isTransparent

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

@@ -399,7 +399,7 @@ export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {
                   }
                 }]
               ]}>
-              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
+              {!isLink && !props.onAction && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
               {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
             </Provider>
           </>

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

@@ -110,6 +110,7 @@ const slider = style<{isDisabled: boolean}>({
       isDisabled: 'GrayText'
     }
   },
+  top: 0,
   left: 0,
   width: 'full',
   height: 'full',

packages/@react-spectrum/s2/stories/ComboBox.stories.tsx

@@ -16,7 +16,7 @@ import {ComboBoxProps} from 'react-aria-components';
 import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
 import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
-import {ReactElement} from 'react';
+import {ReactElement, useState} from 'react';
 import {style} from '../style' with {type: 'macro'};
 import {useAsyncList} from 'react-stately';
 
@@ -307,3 +307,26 @@ export const EmptyCombobox: Story = {
     }
   }
 };
+
+export function WithCreateOption() {
+  let [inputValue, setInputValue] = useState('');
+
+  return (
+    <ComboBox
+      label="Favorite Animal"
+      inputValue={inputValue}
+      onInputChange={setInputValue}>
+      {inputValue.length > 0 && (
+        <ComboBoxItem onAction={() => alert('hi')}>
+          {`Create "${inputValue}"`}
+        </ComboBoxItem>
+      )}
+      <ComboBoxItem>Aardvark</ComboBoxItem>
+      <ComboBoxItem>Cat</ComboBoxItem>
+      <ComboBoxItem>Dog</ComboBoxItem>
+      <ComboBoxItem>Kangaroo</ComboBoxItem>
+      <ComboBoxItem>Panda</ComboBoxItem>
+      <ComboBoxItem>Snake</ComboBoxItem>
+    </ComboBox>
+  );
+}

packages/dev/docs/pages/react-aria/home/ExampleApp.tsx

@@ -510,30 +510,30 @@ function PlantModal(props: ModalOverlayProps) {
       ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
     `}>
       {({isEntering, isExiting}) => (<>
-        {!isResized &&
-          <div
-            data-react-aria-top-layer="true"
-            className={`fixed top-0 left-0 w-full h-(--visual-viewport-height) z-30 hidden sm:flex items-center justify-center pointer-events-none [filter:drop-shadow(0_0_3px_white)] dark:filter-none
-              ${isEntering ? 'animate-in zoom-in-105 ease-out duration-200' : ''}
-              ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
-            `}>
-            <svg viewBox="0 0 700 620" width={700} height={620}>
-              <Arrow textX={52} x1={88} x2={130} y={50} href="Dialog.html">Dialog</Arrow>
-              <Arrow textX={34} x1={88} x2={150} y={150} href="DropZone.html">DropZone</Arrow>
-              <Arrow textX={54} x1={88} x2={150} y={272} href="Select.html">Select</Arrow>
-              <Arrow textX={32} x1={88} x2={150} y={492} href="DatePicker.html">DatePicker</Arrow>
-              <Arrow textX={616} x1={550} x2={612} y={126} marker="markerStart" href="ComboBox.html">ComboBox</Arrow>
-              <Arrow textX={616} x1={550} x2={612} y={198} marker="markerStart" href="TextField.html">TextField</Arrow>
-              <Arrow points="560,90 590,90 590,338 612,338 590,338 590,585 560,585" textX={616} y={338} marker="none" href="Form.html">Form</Arrow>
-            </svg>
-          </div>
-        }
         {/* Inner position: sticky div sized to the visual viewport
             height so the modal appears in view.
             Note that position: fixed will not work here because this
             is positioned relative to the containing block, which is
             the ModalOverlay in this case due to backdrop-blur. */}
         <div className="sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-center justify-center p-4 text-center">
+          {!isResized &&
+            <div
+              data-react-aria-top-layer="true"
+              className={`absolute top-0 left-0 w-full h-(--visual-viewport-height) z-30 hidden sm:flex items-center justify-center pointer-events-none [filter:drop-shadow(0_0_3px_white)] dark:filter-none
+                ${isEntering ? 'animate-in zoom-in-105 ease-out duration-200' : ''}
+                ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
+              `}>
+              <svg viewBox="0 0 700 620" width={700} height={620}>
+                <Arrow textX={52} x1={88} x2={130} y={50} href="Dialog.html">Dialog</Arrow>
+                <Arrow textX={34} x1={88} x2={150} y={150} href="DropZone.html">DropZone</Arrow>
+                <Arrow textX={54} x1={88} x2={150} y={272} href="Select.html">Select</Arrow>
+                <Arrow textX={32} x1={88} x2={150} y={492} href="DatePicker.html">DatePicker</Arrow>
+                <Arrow textX={616} x1={550} x2={612} y={126} marker="markerStart" href="ComboBox.html">ComboBox</Arrow>
+                <Arrow textX={616} x1={550} x2={612} y={198} marker="markerStart" href="TextField.html">TextField</Arrow>
+                <Arrow points="560,90 590,90 590,338 612,338 590,338 590,585 560,585" textX={616} y={338} marker="none" href="Form.html">Form</Arrow>
+              </svg>
+            </div>
+          }
           <RACModal
             {...props}
             ref={ref}

packages/dev/s2-docs/pages/react-aria/ComboBox.mdx

@@ -232,6 +232,42 @@ function ControlledComboBox() {
 }
 ```
 
+## Item actions
+
+Use the `onAction` prop on a `<ListBoxItem>` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value.
+
+```tsx render
+"use client";
+import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
+import {useState} from 'react';
+
+function Example() {
+  let [inputValue, setInputValue] = useState('');
+
+  return (
+    <ComboBox
+      label="Favorite Animal"
+      allowsEmptyCollection
+      inputValue={inputValue}
+      onInputChange={setInputValue}>
+      {/*- begin highlight -*/}
+      {inputValue.length > 0 && (
+        <ComboBoxItem onAction={() => alert('Creating ' + inputValue)}>
+          {`Create "${inputValue}"`}
+        </ComboBoxItem>
+      )}
+      {/*- end highlight -*/}
+      <ComboBoxItem>Aardvark</ComboBoxItem>
+      <ComboBoxItem>Cat</ComboBoxItem>
+      <ComboBoxItem>Dog</ComboBoxItem>
+      <ComboBoxItem>Kangaroo</ComboBoxItem>
+      <ComboBoxItem>Panda</ComboBoxItem>
+      <ComboBoxItem>Snake</ComboBoxItem>
+    </ComboBox>
+  );
+}
+```
+
 ## Forms
 
 Use the `name` prop to submit the `id` of the selected item to the server. Set the `isRequired` prop to validate that the user selects a value, or implement custom client or server-side validation. See the Forms guide to learn more.

packages/dev/s2-docs/pages/s2/ComboBox.mdx

@@ -164,6 +164,41 @@ function Example() {
 }
 ```
 
+### Actions
+
+Use the `onAction` prop on a `<ComboBoxItem>` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value.
+
+```tsx render
+"use client";
+import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';
+import {useState} from 'react';
+
+function Example() {
+  let [inputValue, setInputValue] = useState('');
+
+  return (
+    <ComboBox
+      label="Favorite Animal"
+      inputValue={inputValue}
+      onInputChange={setInputValue}>
+      {/*- begin highlight -*/}
+      {inputValue.length > 0 && (
+        <ComboBoxItem onAction={() => alert('Creating ' + inputValue)}>
+          {`Create "${inputValue}"`}
+        </ComboBoxItem>
+      )}
+      {/*- end highlight -*/}
+      <ComboBoxItem>Aardvark</ComboBoxItem>
+      <ComboBoxItem>Cat</ComboBoxItem>
+      <ComboBoxItem>Dog</ComboBoxItem>
+      <ComboBoxItem>Kangaroo</ComboBoxItem>
+      <ComboBoxItem>Panda</ComboBoxItem>
+      <ComboBoxItem>Snake</ComboBoxItem>
+    </ComboBox>
+  );
+}
+```
+
 ### Links
 
 Use the `href` prop on a `<ComboBoxItem>` to create a link. See the **client side routing guide** to learn how to integrate with your framework. Link items in a `ComboBox` are not selectable.

packages/react-aria-components/docs/Disclosure.mdx

@@ -86,7 +86,7 @@ import {ChevronRight} from 'lucide-react';
   }
 
   .react-aria-Heading {
-    margin-bottom: 0;
+    margin: 0;
   }
 
   &[data-expanded] .react-aria-Button[slot=trigger] svg {
@@ -211,7 +211,7 @@ In some use cases, you may want to add an interactive element, like a button, ad
 
 ```tsx example
 <Disclosure>
-  <div style={{display: 'flex', alignItems: 'center'}}>
+  <div style={{display: 'flex', alignItems: 'center', gap: 16}}>
     <Heading>
       <Button slot="trigger">
         <ChevronRight size={18} />

packages/react-aria-components/src/Modal.tsx

@@ -174,7 +174,7 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   let style = {
     ...renderProps.style,
     '--visual-viewport-height': viewport.height + 'px',
-    '--page-height': typeof document !== 'undefined' ? document.body.clientHeight + 'px' : undefined
+    '--page-height': typeof document !== 'undefined' ? document.body.getBoundingClientRect().height + 'px' : undefined
   };
 
   return (

packages/react-aria-components/stories/ComboBox.stories.tsx

@@ -331,3 +331,39 @@ const MyListBoxLoaderIndicator = (props) => {
     </ListBoxLoadMoreItem>
   );
 };
+
+export function WithCreateOption() {
+  let [inputValue, setInputValue] = useState('');
+
+  return (
+    <ComboBox
+      allowsEmptyCollection
+      inputValue={inputValue}
+      onInputChange={setInputValue}>
+      <Label style={{display: 'block'}}>Favorite Animal</Label>
+      <div style={{display: 'flex'}}>
+        <Input />
+        <Button>
+          <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+        </Button>
+      </div>
+      <Popover placement="bottom end">
+        <ListBox
+          data-testid="combo-box-list-box"
+          className={styles.menu}>
+          {inputValue.length > 0 && (
+            <MyListBoxItem onAction={() => alert('hi')}>
+              {`Create "${inputValue}"`}
+            </MyListBoxItem>
+          )}
+          <MyListBoxItem>Aardvark</MyListBoxItem>
+          <MyListBoxItem>Cat</MyListBoxItem>
+          <MyListBoxItem>Dog</MyListBoxItem>
+          <MyListBoxItem>Kangaroo</MyListBoxItem>
+          <MyListBoxItem>Panda</MyListBoxItem>
+          <MyListBoxItem>Snake</MyListBoxItem>
+        </ListBox>
+      </Popover>
+    </ComboBox>
+  );
+}

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

@@ -13,7 +13,7 @@
 import {act} from '@testing-library/react';
 import {Button, ComboBox, ComboBoxContext, FieldError, Header, Input, Label, ListBox, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection, ListLayout, Popover, Text, Virtualizer} from '../';
 import {fireEvent, pointerMap, render, within} from '@react-spectrum/test-utils-internal';
-import React from 'react';
+import React, {useState} from 'react';
 import {User} from '@react-aria/test-utils';
 import userEvent from '@testing-library/user-event';
 
@@ -408,4 +408,57 @@ describe('ComboBox', () => {
     expect(comboboxTester.listbox).toBeTruthy();
     expect(options[0]).toHaveTextContent('No results');
   });
+
+  it('should support onAction', async () => {
+    let onAction = jest.fn();
+    function WithCreateOption() {
+      let [inputValue, setInputValue] = useState('');
+
+      return (
+        <ComboBox
+          allowsEmptyCollection
+          inputValue={inputValue}
+          onInputChange={setInputValue}>
+          <Label style={{display: 'block'}}>Favorite Animal</Label>
+          <div style={{display: 'flex'}}>
+            <Input />
+            <Button>
+              <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+            </Button>
+          </div>
+          <Popover placement="bottom end">
+            <ListBox>
+              {inputValue.length > 0 && (
+                <ListBoxItem onAction={onAction}>
+                  {`Create "${inputValue}"`}
+                </ListBoxItem>
+              )}
+              <ListBoxItem>Aardvark</ListBoxItem>
+              <ListBoxItem>Cat</ListBoxItem>
+              <ListBoxItem>Dog</ListBoxItem>
+              <ListBoxItem>Kangaroo</ListBoxItem>
+              <ListBoxItem>Panda</ListBoxItem>
+              <ListBoxItem>Snake</ListBoxItem>
+            </ListBox>
+          </Popover>
+        </ComboBox>
+      );
+    }
+
+    let tree = render(<WithCreateOption />);
+    let comboboxTester = testUtilUser.createTester('ComboBox', {root: tree.container});
+    act(() => {
+      comboboxTester.combobox.focus();
+    });
+
+    await user.keyboard('L');
+
+    let options = comboboxTester.options();
+    expect(options).toHaveLength(1);
+    expect(options[0]).toHaveTextContent('Create "L"');
+
+    await user.keyboard('{ArrowDown}{Enter}');
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(comboboxTester.combobox).toHaveValue('');
+  });
 });