@ariakit/react-core 0.3.10 → 0.3.11

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @ariakit/react-core
 
+## 0.3.11
+
+### Modal Combobox
+
+The [Combobox](https://ariakit.org/component/combobox) components now support the [`modal`](https://ariakit.org/reference/combobox-popover#modal) prop on [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover).
+
+When a modal combobox is expanded, users can interact with and tab through all the combobox controls, including [`Combobox`](https://ariakit.org/reference/combobox), [`ComboboxDisclosure`](https://ariakit.org/reference/combobox-disclosure), and [`ComboboxCancel`](https://ariakit.org/reference/combobox-cancel), even if they're rendered outside the popover. The rest of the page will be inert.
+
+### Controlling the auto-select functionality of Combobox
+
+The [`Combobox`](https://ariakit.org/reference/combobox) component now includes a new [`getAutoSelectId`](https://ariakit.org/reference/combobox#getautoselectid) prop. This allows you to specify the [`ComboboxItem`](https://ariakit.org/reference/combobox-item) that should be auto-selected if the [`autoSelect`](https://ariakit.org/reference/combobox#autoselect) prop is `true`.
+
+By default, the first _enabled_ item is auto-selected. Now you can customize this behavior by returning the id of another item from [`getAutoSelectId`](https://ariakit.org/reference/combobox#getautoselectid):
+
+```jsx
+<Combobox
+  autoSelect
+  getAutoSelectId={(items) => {
+    // Auto select the first enabled item with a value
+    const item = items.find((item) => {
+      if (item.disabled) return false;
+      if (!item.value) return false;
+      return true;
+    });
+    return item?.id;
+  }}
+/>
+```
+
+### Styling Combobox without an active descendant
+
+The [`Combobox`](https://ariakit.org/reference/combobox) component now includes a [`data-active-item`](https://ariakit.org/guide/styling#data-active-item) attribute when it's the only active item in the composite widget. In other words, when no [`ComboboxItem`](https://ariakit.org/reference/combobox-item) is active and the focus is solely on the combobox input.
+
+You can use this as a CSS selector to style the combobox differently, providing additional affordance to users who pressed <kbd>↑</kbd> on the first item or <kbd>↓</kbd> on the last item. This action would place both virtual and actual DOM focus on the combobox input.
+
+```css
+.combobox[data-active-item] {
+  outline-width: 2px;
+}
+```
+
+### Other updates
+
+- Fixed [`useTabStore`](https://ariakit.org/reference/use-tab-store) return value not updating its own reference.
+- Fixed keyboard navigation on [Combobox](https://ariakit.org/components/combobox) when the content element is a grid.
+- Fixed [`ComboboxDisclosure`](https://ariakit.org/reference/combobox-disclosure) to update its `aria-expanded` attribute when the combobox expands.
+- Fixed `Maximum update depth exceeded` warning when rendering multiple collection items on the page.
+- Improved JSDocs.
+- Updated dependencies: `@ariakit/core@0.3.9`
+
 ## 0.3.10
 
 ### Overwriting `aria-selected` value on `ComboboxItem`

package/cjs/__chunks/{TTMCZ7ZN.cjs → 3RUODFRU.cjs}

@@ -259,18 +259,33 @@ var useCompositeItem = _RNZNGEL4cjs.createHook.call(void 0,
       const isGrid = !!(item == null ? void 0 : item.rowId);
       const isVertical = state.orientation !== "horizontal";
       const isHorizontal = state.orientation !== "vertical";
+      const canHomeEnd = () => {
+        if (isGrid)
+          return true;
+        if (isHorizontal)
+          return true;
+        if (!state.baseElement)
+          return true;
+        if (!_dom.isTextField.call(void 0, state.baseElement))
+          return true;
+        return false;
+      };
       const keyMap = {
         ArrowUp: (isGrid || isVertical) && store.up,
         ArrowRight: (isGrid || isHorizontal) && store.next,
         ArrowDown: (isGrid || isVertical) && store.down,
         ArrowLeft: (isGrid || isHorizontal) && store.previous,
         Home: () => {
+          if (!canHomeEnd())
+            return;
           if (!isGrid || event.ctrlKey) {
             return store == null ? void 0 : store.first();
           }
           return store == null ? void 0 : store.previous(-1);
         },
         End: () => {
+          if (!canHomeEnd())
+            return;
           if (!isGrid || event.ctrlKey) {
             return store == null ? void 0 : store.last();
           }

package/cjs/__chunks/{UBME4GBY.cjs → 63WKH5OP.cjs}

@@ -8,7 +8,7 @@ var _NGEKJJDHcjs = require('./NGEKJJDH.cjs');
 var _FQZOOWMHcjs = require('./FQZOOWMH.cjs');
 
 
-var _CZOBQEIOcjs = require('./CZOBQEIO.cjs');
+var _RM2WCNSUcjs = require('./RM2WCNSU.cjs');
 
 
 var _TD5MOASJcjs = require('./TD5MOASJ.cjs');
@@ -159,7 +159,7 @@ var useMenuList = _RNZNGEL4cjs.createHook.call(void 0,
         "aria-orientation": orientation
       }, props);
     }
-    props = _CZOBQEIOcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, composite }, props));
+    props = _RM2WCNSUcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, composite }, props));
     props = _FQZOOWMHcjs.useCompositeTypeahead.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, typeahead: !hasCombobox }, props));
     return props;
   }

package/cjs/__chunks/{SANV4XBF.cjs → 7EEAHTIW.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _TTMCZ7ZNcjs = require('./TTMCZ7ZN.cjs');
+var _3RUODFRUcjs = require('./3RUODFRU.cjs');
 
 
 var _LYIGAIJFcjs = require('./LYIGAIJF.cjs');
@@ -21,7 +21,7 @@ var useToolbarItem = _RNZNGEL4cjs.createHook.call(void 0,
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
     const context = _LYIGAIJFcjs.useToolbarContext.call(void 0, );
     store = store || context;
-    props = _TTMCZ7ZNcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+    props = _3RUODFRUcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
     return props;
   }
 );

package/cjs/__chunks/{3KZQJDTV.cjs → APFV5PTX.cjs}

@@ -8,7 +8,7 @@ var _7LBZXSLYcjs = require('./7LBZXSLY.cjs');
 var _7KFYPSJOcjs = require('./7KFYPSJO.cjs');
 
 
-var _CZOBQEIOcjs = require('./CZOBQEIO.cjs');
+var _RM2WCNSUcjs = require('./RM2WCNSU.cjs');
 
 
 
@@ -64,7 +64,7 @@ var useMenubar = _RNZNGEL4cjs.createHook.call(void 0,
         "aria-orientation": orientation
       }, props);
     }
-    props = _CZOBQEIOcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, composite }, props));
+    props = _RM2WCNSUcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, composite }, props));
     return props;
   }
 );

package/cjs/__chunks/{DHSZ2ZFJ.cjs → BKU5STIE.cjs}

@@ -10,7 +10,7 @@ var _7LBZXSLYcjs = require('./7LBZXSLY.cjs');
 var _IPYAEPOTcjs = require('./IPYAEPOT.cjs');
 
 
-var _TTMCZ7ZNcjs = require('./TTMCZ7ZN.cjs');
+var _3RUODFRUcjs = require('./3RUODFRU.cjs');
 
 
 
@@ -110,7 +110,7 @@ var useMenuItem = _RNZNGEL4cjs.createHook.call(void 0,
     }, props), {
       onClick
     });
-    props = _TTMCZ7ZNcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, preventScrollOnKeyDown }, props));
+    props = _3RUODFRUcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, preventScrollOnKeyDown }, props));
     props = _IPYAEPOTcjs.useCompositeHover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store
     }, props), {

package/cjs/__chunks/{PHZJAGWK.cjs → IAYTETYN.cjs}

@@ -4,7 +4,7 @@
 var _HEEQY4DZcjs = require('./HEEQY4DZ.cjs');
 
 
-var _TTMCZ7ZNcjs = require('./TTMCZ7ZN.cjs');
+var _3RUODFRUcjs = require('./3RUODFRU.cjs');
 
 
 
@@ -133,7 +133,7 @@ var useRadio = _RNZNGEL4cjs.createHook.call(void 0,
       onClick,
       onFocus
     });
-    props = _TTMCZ7ZNcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, clickOnEnter: !nativeRadio }, props));
+    props = _3RUODFRUcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, clickOnEnter: !nativeRadio }, props));
     return _AV6KTKLEcjs.__spreadValues.call(void 0, {
       name: nativeRadio ? name : void 0,
       value: nativeRadio ? value : void 0,

package/cjs/__chunks/{CZOBQEIO.cjs → RM2WCNSU.cjs}

@@ -48,43 +48,32 @@ function isGrid(items) {
   return items.some((item) => !!item.rowId);
 }
 function isPrintableKey(event) {
+  const target = event.target;
+  if (target && !_dom.isTextField.call(void 0, target))
+    return false;
   return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
 }
 function isModifierKey(event) {
   return event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta";
 }
-function canProxyKeyboardEvent(event, state) {
-  if (!_events.isSelfTarget.call(void 0, event))
-    return false;
-  if (isModifierKey(event))
-    return false;
-  const target = event.target;
-  if (!target)
-    return true;
-  if (_dom.isTextField.call(void 0, target)) {
-    if (isPrintableKey(event))
-      return false;
-    const grid = isGrid(state.renderedItems);
-    const focusingInputOnly = state.activeId === null;
-    const allowHorizontalNavigationOnItems = grid && !focusingInputOnly;
-    const isHomeOrEnd = event.key === "Home" || event.key === "End";
-    if (!allowHorizontalNavigationOnItems && isHomeOrEnd)
-      return false;
-  }
-  return !event.isPropagationStopped();
-}
 function useKeyboardEventProxy(store, onKeyboardEvent, previousElementRef) {
   return _EO6LS72Hcjs.useEvent.call(void 0, (event) => {
     var _a;
     onKeyboardEvent == null ? void 0 : onKeyboardEvent(event);
     if (event.defaultPrevented)
       return;
+    if (event.isPropagationStopped())
+      return;
+    if (!_events.isSelfTarget.call(void 0, event))
+      return;
+    if (isModifierKey(event))
+      return;
+    if (isPrintableKey(event))
+      return;
     const state = store.getState();
     const activeElement = (_a = _RV3PHHWMcjs.getEnabledItem.call(void 0, store, state.activeId)) == null ? void 0 : _a.element;
     if (!activeElement)
       return;
-    if (!canProxyKeyboardEvent(event, state))
-      return;
     const _b = event, { view } = _b, eventInit = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["view"]);
     const previousElement = previousElementRef == null ? void 0 : previousElementRef.current;
     if (activeElement !== previousElement) {
@@ -269,6 +258,8 @@ var useComposite = _RNZNGEL4cjs.createHook.call(void 0,
           }
         } else if (activeElement) {
           _events.fireBlurEvent.call(void 0, activeElement, event);
+        } else if (previousElement) {
+          _events.fireBlurEvent.call(void 0, previousElement, event);
         }
         event.stopPropagation();
       } else {
@@ -296,6 +287,9 @@ var useComposite = _RNZNGEL4cjs.createHook.call(void 0,
       const isVertical = orientation !== "horizontal";
       const isHorizontal = orientation !== "vertical";
       const grid = isGrid(renderedItems);
+      const isHorizontalKey = event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End";
+      if (isHorizontalKey && _dom.isTextField.call(void 0, event.currentTarget))
+        return;
       const up = () => {
         if (grid) {
           const item = items && findFirstEnabledItemInTheLastRow(items);

package/cjs/__chunks/{GF6NWLKX.cjs → WWU35JDJ.cjs}

@@ -8,6 +8,9 @@ var _N6CR2VNNcjs = require('./N6CR2VNN.cjs');
 var _B233QVZEcjs = require('./B233QVZE.cjs');
 
 
+var _EO6LS72Hcjs = require('./EO6LS72H.cjs');
+
+
 
 var _AV6KTKLEcjs = require('./AV6KTKLE.cjs');
 
@@ -18,8 +21,9 @@ function useTabStoreProps(store, update, props) {
   store = _N6CR2VNNcjs.useCompositeStoreProps.call(void 0, store, update, props);
   _B233QVZEcjs.useStoreProps.call(void 0, store, props, "selectedId", "setSelectedId");
   _B233QVZEcjs.useStoreProps.call(void 0, store, props, "selectOnMove");
-  const [panels] = _B233QVZEcjs.useStore.call(void 0, () => store.panels, {});
-  return _react.useMemo.call(void 0, () => _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, store), { panels }), []);
+  const [panels, updatePanels] = _B233QVZEcjs.useStore.call(void 0, () => store.panels, {});
+  _EO6LS72Hcjs.useUpdateEffect.call(void 0, updatePanels, [store, updatePanels]);
+  return _react.useMemo.call(void 0, () => _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, store), { panels }), [store, panels]);
 }
 function useTabStore(props = {}) {
   const [store, update] = _B233QVZEcjs.useStore.call(void 0, Core.createTabStore, props);

package/cjs/__chunks/{UUTXBBHD.cjs → XAYQLYTN.cjs}

@@ -8,7 +8,7 @@ var _FQZOOWMHcjs = require('./FQZOOWMH.cjs');
 var _2WCJJQSKcjs = require('./2WCJJQSK.cjs');
 
 
-var _CZOBQEIOcjs = require('./CZOBQEIO.cjs');
+var _RM2WCNSUcjs = require('./RM2WCNSU.cjs');
 
 
 var _TD5MOASJcjs = require('./TD5MOASJ.cjs');
@@ -117,7 +117,7 @@ var useSelectList = _RNZNGEL4cjs.createHook.call(void 0,
       style,
       onKeyDown
     });
-    props = _CZOBQEIOcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props), { composite }));
+    props = _RM2WCNSUcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props), { composite }));
     props = _FQZOOWMHcjs.useCompositeTypeahead.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, typeahead: !hasCombobox }, props));
     return props;
   }

package/cjs/checkbox/checkbox-check.d.cts

@@ -28,9 +28,12 @@ export interface CheckboxCheckOptions<T extends As = "span"> extends Options<T>
      */
     store?: CheckboxStore;
     /**
-     * Whether the check mark should be shown. This value is automatically
-     * inferred from the `store` prop or the parent `Checkbox` component. Manually
-     * setting this prop will override the inferred value.
+     * Determines if the check mark should be displayed. This value is
+     * automatically derived from the
+     * [`store`](https://ariakit.org/reference/checkbox-check#store) prop or the
+     * parent [`Checkbox`](https://ariakit.org/reference/checkbox) component.
+     *
+     * Manually setting this prop will supersede the derived value.
      */
     checked?: boolean;
 }

package/cjs/checkbox/checkbox-check.d.ts

@@ -28,9 +28,12 @@ export interface CheckboxCheckOptions<T extends As = "span"> extends Options<T>
      */
     store?: CheckboxStore;
     /**
-     * Whether the check mark should be shown. This value is automatically
-     * inferred from the `store` prop or the parent `Checkbox` component. Manually
-     * setting this prop will override the inferred value.
+     * Determines if the check mark should be displayed. This value is
+     * automatically derived from the
+     * [`store`](https://ariakit.org/reference/checkbox-check#store) prop or the
+     * parent [`Checkbox`](https://ariakit.org/reference/checkbox) component.
+     *
+     * Manually setting this prop will supersede the derived value.
      */
     checked?: boolean;
 }

package/cjs/combobox/combobox-disclosure.cjs

@@ -75,13 +75,12 @@ var useComboboxDisclosure = _RNZNGEL4cjs.createHook.call(void 0,
       const { baseElement } = store.getState();
       store.setDisclosureElement(baseElement);
     });
-    const label = store.useState(
-      (state) => state.open ? "Hide popup" : "Show popup"
-    );
+    const open = store.useState("open");
     props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       children,
       tabIndex: -1,
-      "aria-label": label
+      "aria-label": open ? "Hide popup" : "Show popup",
+      "aria-expanded": open
     }, props), {
       onMouseDown,
       onClick

package/cjs/combobox/combobox-item.cjs

@@ -9,7 +9,7 @@ var _IPYAEPOTcjs = require('../__chunks/IPYAEPOT.cjs');
 var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
 
 
-var _TTMCZ7ZNcjs = require('../__chunks/TTMCZ7ZN.cjs');
+var _3RUODFRUcjs = require('../__chunks/3RUODFRU.cjs');
 require('../__chunks/DAJUUBUI.cjs');
 require('../__chunks/R5A2WTWB.cjs');
 require('../__chunks/RV3PHHWM.cjs');
@@ -169,7 +169,7 @@ var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0,
       onKeyDown
     });
     const moveOnKeyPressProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, moveOnKeyPress);
-    props = _TTMCZ7ZNcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _3RUODFRUcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store
     }, props), {
       getItem,

package/cjs/combobox/combobox-item.d.cts

@@ -56,6 +56,11 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
      *   [`setValueOnClick`](https://ariakit.org/reference/combobox-item#setvalueonclick)
      *   is set to `true`, this will be the value of the combobox input when the
      *   user clicks on this item.
+     * - If
+     *   [`selectValueOnClick`](https://ariakit.org/reference/combobox-item#selectvalueonclick)
+     *   is set to `true`, this will be the value of the
+     *   [`selectedValue`](https://ariakit.org/reference/combobox-provider#selectedvalue)
+     *   state.
      * - If the
      *   [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
      *   prop on the [`Combobox`](https://ariakit.org/reference/combobox)
@@ -88,7 +93,12 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
      * [`selectedValue`](https://ariakit.org/reference/combobox-provider#selectedvalue)
      * state using this item's
      * [`value`](https://ariakit.org/reference/combobox-item#value) when the item
-     * is clicked.
+     * is clicked. If a callback is provided, it will only be invoked if the item
+     * has a value.
+     *
+     * Live examples:
+     * - [Submenu with
+     *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
      * @default true
      */
     selectValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
@@ -102,6 +112,8 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
      *
      * Live examples:
      * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
+     * - [Submenu with
+     *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
      */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**

package/cjs/combobox/combobox-item.d.ts

@@ -56,6 +56,11 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
      *   [`setValueOnClick`](https://ariakit.org/reference/combobox-item#setvalueonclick)
      *   is set to `true`, this will be the value of the combobox input when the
      *   user clicks on this item.
+     * - If
+     *   [`selectValueOnClick`](https://ariakit.org/reference/combobox-item#selectvalueonclick)
+     *   is set to `true`, this will be the value of the
+     *   [`selectedValue`](https://ariakit.org/reference/combobox-provider#selectedvalue)
+     *   state.
      * - If the
      *   [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
      *   prop on the [`Combobox`](https://ariakit.org/reference/combobox)
@@ -88,7 +93,12 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
      * [`selectedValue`](https://ariakit.org/reference/combobox-provider#selectedvalue)
      * state using this item's
      * [`value`](https://ariakit.org/reference/combobox-item#value) when the item
-     * is clicked.
+     * is clicked. If a callback is provided, it will only be invoked if the item
+     * has a value.
+     *
+     * Live examples:
+     * - [Submenu with
+     *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
      * @default true
      */
     selectValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
@@ -102,6 +112,8 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
      *
      * Live examples:
      * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
+     * - [Submenu with
+     *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
      */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**

package/cjs/combobox/combobox-popover.cjs

@@ -64,7 +64,7 @@ function isController(target, ...ids) {
   if (!target)
     return false;
   if ("id" in target) {
-    const selector = ids.filter(Boolean).map((id) => `[aria-controls="${id}"]`).join(", ");
+    const selector = ids.filter(Boolean).map((id) => `[aria-controls~="${id}"]`).join(", ");
     if (!selector)
       return false;
     return _dom.matches.call(void 0, target, selector);
@@ -75,11 +75,13 @@ var useComboboxPopover = _RNZNGEL4cjs.createHook.call(void 0,
   (_a) => {
     var _b = _a, {
       store,
+      modal,
       tabIndex,
       alwaysVisible,
       hideOnInteractOutside = true
     } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
       "store",
+      "modal",
       "tabIndex",
       "alwaysVisible",
       "hideOnInteractOutside"
@@ -94,20 +96,47 @@ var useComboboxPopover = _RNZNGEL4cjs.createHook.call(void 0,
     props = _LO3RECODcjs.useComboboxList.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, alwaysVisible }, props));
     props = _NVHGMKAEcjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
+      modal,
       alwaysVisible,
+      backdrop: false,
       autoFocusOnShow: false,
       autoFocusOnHide: false,
       finalFocus: baseElement,
       preserveTabOrderAnchor: null
     }, props), {
-      // Combobox popovers can't be modal because the focus may be (and is by
-      // default) outside of it on the combobox input element.
-      modal: false,
+      // When the combobox popover is modal, we make sure to include the
+      // combobox input and all the combobox controls (cancel, disclosure) in
+      // the list of persistent elements so they make part of the modal context,
+      // allowing users to tab through them.
+      getPersistentElements() {
+        var _a2;
+        const elements = ((_a2 = props.getPersistentElements) == null ? void 0 : _a2.call(props)) || [];
+        if (!modal)
+          return elements;
+        if (!store)
+          return elements;
+        const { contentElement, baseElement: baseElement2 } = store.getState();
+        if (!baseElement2)
+          return elements;
+        const doc = _dom.getDocument.call(void 0, baseElement2);
+        const selectors = [];
+        if (contentElement == null ? void 0 : contentElement.id) {
+          selectors.push(`[aria-controls~="${contentElement.id}"]`);
+        }
+        if (baseElement2 == null ? void 0 : baseElement2.id) {
+          selectors.push(`[aria-controls~="${baseElement2.id}"]`);
+        }
+        if (!selectors.length)
+          return [...elements, baseElement2];
+        const selector = selectors.join(",");
+        const controlElements = doc.querySelectorAll(selector);
+        return [...elements, ...controlElements];
+      },
       // Make sure we don't hide the popover when the user interacts with the
       // combobox cancel or the combobox disclosure buttons. They will have the
       // aria-controls attribute pointing to either the combobox input or the
       // combobox popover elements.
-      hideOnInteractOutside: (event) => {
+      hideOnInteractOutside(event) {
         var _a2, _b2;
         const state = store == null ? void 0 : store.getState();
         const contentId = (_a2 = state == null ? void 0 : state.contentElement) == null ? void 0 : _a2.id;

package/cjs/combobox/combobox-popover.d.cts

@@ -35,6 +35,6 @@ export declare const useComboboxPopover: import("../utils/types.js").Hook<Combob
  * ```
  */
 export declare const ComboboxPopover: import("../utils/types.js").Component<ComboboxPopoverOptions<"div">>;
-export interface ComboboxPopoverOptions<T extends As = "div"> extends ComboboxListOptions<T>, Omit<PopoverOptions<T>, "store" | "modal"> {
+export interface ComboboxPopoverOptions<T extends As = "div"> extends ComboboxListOptions<T>, Omit<PopoverOptions<T>, "store"> {
 }
 export type ComboboxPopoverProps<T extends As = "div"> = Props<ComboboxPopoverOptions<T>>;

package/cjs/combobox/combobox-popover.d.ts

@@ -35,6 +35,6 @@ export declare const useComboboxPopover: import("../utils/types.js").Hook<Combob
  * ```
  */
 export declare const ComboboxPopover: import("../utils/types.js").Component<ComboboxPopoverOptions<"div">>;
-export interface ComboboxPopoverOptions<T extends As = "div"> extends ComboboxListOptions<T>, Omit<PopoverOptions<T>, "store" | "modal"> {
+export interface ComboboxPopoverOptions<T extends As = "div"> extends ComboboxListOptions<T>, Omit<PopoverOptions<T>, "store"> {
 }
 export type ComboboxPopoverProps<T extends As = "div"> = Props<ComboboxPopoverOptions<T>>;

package/cjs/combobox/combobox.cjs

@@ -7,7 +7,7 @@ var _3QW6ELTGcjs = require('../__chunks/3QW6ELTG.cjs');
 var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
 
 
-var _CZOBQEIOcjs = require('../__chunks/CZOBQEIO.cjs');
+var _RM2WCNSUcjs = require('../__chunks/RM2WCNSU.cjs');
 require('../__chunks/RV3PHHWM.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
@@ -82,6 +82,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       store,
       focusable = true,
       autoSelect: autoSelectProp = false,
+      getAutoSelectId,
       showOnChange = true,
       setValueOnChange = true,
       showOnMouseDown = true,
@@ -93,6 +94,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       "store",
       "focusable",
       "autoSelect",
+      "getAutoSelectId",
       "showOnChange",
       "setValueOnChange",
       "showOnMouseDown",
@@ -189,6 +191,8 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       storeValue
     ]);
     const scrollingElementRef = _react.useRef.call(void 0, null);
+    const getAutoSelectIdProp = _EO6LS72Hcjs.useEvent.call(void 0, getAutoSelectId);
+    const autoSelectIdRef = _react.useRef.call(void 0, null);
     _react.useEffect.call(void 0, () => {
       if (!open)
         return;
@@ -204,10 +208,12 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       const onScroll = () => {
         if (!store)
           return;
+        if (!canAutoSelectRef.current)
+          return;
         const { activeId } = store.getState();
         if (activeId === null)
           return;
-        if (activeId === store.first())
+        if (activeId === autoSelectIdRef.current)
           return;
         canAutoSelectRef.current = false;
       };
@@ -233,7 +239,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
     }, [open]);
     const resetValueOnSelect = store.useState("resetValueOnSelect");
     _EO6LS72Hcjs.useUpdateEffect.call(void 0, () => {
-      var _a2, _b2;
+      var _a2;
       if (!store)
         return;
       if (!autoSelect && !resetValueOnSelect)
@@ -249,9 +255,12 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
         return () => observer.disconnect();
       }
       if (autoSelect) {
-        store.move((_a2 = store.first()) != null ? _a2 : null);
+        const userAutoSelectId = getAutoSelectIdProp(items);
+        const autoSelectId = userAutoSelectId !== void 0 ? userAutoSelectId : store.first();
+        autoSelectIdRef.current = autoSelectId;
+        store.move(autoSelectId != null ? autoSelectId : null);
       } else {
-        const element = (_b2 = store.item(activeId)) == null ? void 0 : _b2.element;
+        const element = (_a2 = store.item(activeId)) == null ? void 0 : _a2.element;
         if (element && "scrollIntoView" in element) {
           element.scrollIntoView({ block: "nearest", inline: "nearest" });
         }
@@ -263,6 +272,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       storeValue,
       autoSelect,
       resetValueOnSelect,
+      getAutoSelectIdProp,
       items
     ]);
     _react.useEffect.call(void 0, () => {
@@ -395,6 +405,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
     });
     const id = _EO6LS72Hcjs.useId.call(void 0, props.id);
     const ariaAutoComplete = isAriaAutoCompleteValue(autoComplete) ? autoComplete : void 0;
+    const isActiveItem = store.useState((state) => state.activeId === null);
     props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       id,
       role: "combobox",
@@ -402,6 +413,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       "aria-haspopup": _dom.getPopupRole.call(void 0, contentElement, "listbox"),
       "aria-expanded": open,
       "aria-controls": contentElement == null ? void 0 : contentElement.id,
+      "data-active-item": isActiveItem || void 0,
       value
     }, props), {
       ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, ref, props.ref),
@@ -411,7 +423,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       onKeyDown,
       onBlur
     });
-    props = _CZOBQEIOcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _RM2WCNSUcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       focusable
     }, props), {