@ariakit/react-core 0.3.10 → 0.3.12

package/esm/__chunks/{NYD53BDE.js → XJXP7ZSQ.js}

@@ -10,14 +10,14 @@ import {
 } from "./W76OTZCC.js";
 import {
   useCompositeStoreProps
-} from "./A6ER4BO6.js";
+} from "./7GBW5FLS.js";
 import {
   useHovercardStoreProps
-} from "./A3PM2ZVJ.js";
+} from "./ZU7LQC5V.js";
 import {
   useStore,
   useStoreProps
-} from "./4OZYHFMH.js";
+} from "./EKQEJRUF.js";
 import {
   useUpdateEffect
 } from "./6O5OEQGF.js";

package/esm/__chunks/{QEPSYGAQ.js → Y6467XPW.js}

@@ -10,7 +10,7 @@ import {
 } from "./G6ONQ5EH.js";
 import {
   useCompositeItem
-} from "./P6VCQ6Q3.js";
+} from "./QZLXIDNP.js";
 import {
   createElement,
   createHook,
@@ -18,7 +18,7 @@ import {
 } from "./3ORBWXWF.js";
 import {
   useStoreState
-} from "./4OZYHFMH.js";
+} from "./EKQEJRUF.js";
 import {
   useBooleanEvent,
   useEvent

package/esm/__chunks/{HDMIVTNE.js → Y6GYTNQ2.js}

@@ -2,7 +2,7 @@
 import {
   useStore,
   useStoreProps
-} from "./4OZYHFMH.js";
+} from "./EKQEJRUF.js";
 import {
   useUpdateEffect
 } from "./6O5OEQGF.js";

package/esm/__chunks/{DKALGMO6.js → ZEXNX5JH.js}

@@ -5,7 +5,7 @@ import {
 } from "./W76OTZCC.js";
 import {
   isHidden
-} from "./KOKHD3Z3.js";
+} from "./CLE7NTOY.js";
 import {
   useFocusable
 } from "./KK7H3W2B.js";

package/esm/__chunks/{EZTAZGGV.js → ZKJ2WLF7.js}

@@ -1,14 +1,14 @@
 "use client";
 import {
   useCompositeStoreProps
-} from "./A6ER4BO6.js";
+} from "./7GBW5FLS.js";
 import {
   usePopoverStoreProps
-} from "./EENTNM7A.js";
+} from "./MG4P3223.js";
 import {
   useStore,
   useStoreProps
-} from "./4OZYHFMH.js";
+} from "./EKQEJRUF.js";
 
 // src/combobox/combobox-store.ts
 import * as Core from "@ariakit/core/combobox/combobox-store";

package/esm/__chunks/{6SB7F42L.js → ZSELSBRM.js}

@@ -1,10 +1,10 @@
 "use client";
 import {
   useDisclosureStoreProps
-} from "./SMM5JVLC.js";
+} from "./SFCBA2JZ.js";
 import {
   useStore
-} from "./4OZYHFMH.js";
+} from "./EKQEJRUF.js";
 
 // src/dialog/dialog-store.ts
 import * as Core from "@ariakit/core/dialog/dialog-store";

package/esm/__chunks/{A3PM2ZVJ.js → ZU7LQC5V.js}

@@ -1,11 +1,11 @@
 "use client";
 import {
   usePopoverStoreProps
-} from "./EENTNM7A.js";
+} from "./MG4P3223.js";
 import {
   useStore,
   useStoreProps
-} from "./4OZYHFMH.js";
+} from "./EKQEJRUF.js";
 
 // src/hovercard/hovercard-store.ts
 import * as Core from "@ariakit/core/hovercard/hovercard-store";

package/esm/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/esm/checkbox/checkbox-provider.js

@@ -4,9 +4,9 @@ import {
 } from "../__chunks/VPR2WHQV.js";
 import {
   useCheckboxStore
-} from "../__chunks/IIVLUKKG.js";
+} from "../__chunks/JIZ5C2JK.js";
 import "../__chunks/3ORBWXWF.js";
-import "../__chunks/4OZYHFMH.js";
+import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/checkbox/checkbox-store.js

@@ -2,8 +2,8 @@
 import {
   useCheckboxStore,
   useCheckboxStoreProps
-} from "../__chunks/IIVLUKKG.js";
-import "../__chunks/4OZYHFMH.js";
+} from "../__chunks/JIZ5C2JK.js";
+import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/checkbox/checkbox.js

@@ -2,14 +2,14 @@
 import {
   Checkbox,
   useCheckbox
-} from "../__chunks/6H3EJNCE.js";
+} from "../__chunks/3AHQ6JCP.js";
 import "../__chunks/VPR2WHQV.js";
 import "../__chunks/6XBVQI3K.js";
 import "../__chunks/NWCBQ4CV.js";
 import "../__chunks/KK7H3W2B.js";
 import "../__chunks/SHA3WOPI.js";
 import "../__chunks/3ORBWXWF.js";
-import "../__chunks/4OZYHFMH.js";
+import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/collection/collection-item.d.ts

@@ -31,12 +31,19 @@ export declare const useCollectionItem: import("../utils/types.js").Hook<Collect
 export declare const CollectionItem: import("../utils/types.js").Component<CollectionItemOptions<"div">>;
 export interface CollectionItemOptions<T extends As = "div"> extends Options<T> {
     /**
-     * Object returned by the `useCollectionStore` hook. If not provided, the
-     * parent `Collection` component's context will be used.
+     * Object returned by the
+     * [`useCollectionStore`](https://ariakit.org/reference/use-collection-store)
+     * hook. If not provided, the parent
+     * [`Collection`](https://ariakit.org/reference/collection) or
+     * [`CollectionProvider`](https://ariakit.org/reference/collection-provider)
+     * components' context will be used.
      */
     store?: CollectionStore;
     /**
      * Whether the item should be registered to the store.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @default true
      */
     shouldRegisterItem?: boolean;

package/esm/collection/collection-provider.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   useCollectionStore
-} from "../__chunks/HDMIVTNE.js";
+} from "../__chunks/Y6GYTNQ2.js";
 import {
   CollectionContextProvider
 } from "../__chunks/4UUKJZ4V.js";
 import "../__chunks/3ORBWXWF.js";
-import "../__chunks/4OZYHFMH.js";
+import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/collection/collection-renderer.js

@@ -4,10 +4,10 @@ import {
   getCollectionRendererItem,
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "../__chunks/GD2VG2KJ.js";
+} from "../__chunks/4HD64GHO.js";
 import "../__chunks/4UUKJZ4V.js";
 import "../__chunks/3ORBWXWF.js";
-import "../__chunks/4OZYHFMH.js";
+import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/collection/collection-store.js

@@ -2,8 +2,8 @@
 import {
   useCollectionStore,
   useCollectionStoreProps
-} from "../__chunks/HDMIVTNE.js";
-import "../__chunks/4OZYHFMH.js";
+} from "../__chunks/Y6GYTNQ2.js";
+import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/combobox/combobox-disclosure.js

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

package/esm/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/esm/combobox/combobox-item.js

@@ -9,10 +9,10 @@ import {
 } from "../__chunks/W76OTZCC.js";
 import {
   useCompositeItem
-} from "../__chunks/P6VCQ6Q3.js";
+} from "../__chunks/QZLXIDNP.js";
 import "../__chunks/NWCBQ4CV.js";
 import "../__chunks/UH3I23HL.js";
-import "../__chunks/6QXBPV75.js";
+import "../__chunks/3IEDWLST.js";
 import "../__chunks/IB7YUKH5.js";
 import "../__chunks/4UUKJZ4V.js";
 import "../__chunks/7H5KSHHF.js";
@@ -25,7 +25,7 @@ import {
   createHook,
   createMemoComponent
 } from "../__chunks/3ORBWXWF.js";
-import "../__chunks/4OZYHFMH.js";
+import "../__chunks/EKQEJRUF.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/combobox/combobox-list.js

@@ -2,18 +2,18 @@
 import {
   ComboboxList,
   useComboboxList
-} from "../__chunks/DKALGMO6.js";
+} from "../__chunks/ZEXNX5JH.js";
 import "../__chunks/W76OTZCC.js";
 import "../__chunks/IB7YUKH5.js";
 import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/KOKHD3Z3.js";
+import "../__chunks/CLE7NTOY.js";
 import "../__chunks/7H5KSHHF.js";
 import "../__chunks/G6BJYYBK.js";
 import "../__chunks/OAYFXAQ2.js";
 import "../__chunks/KK7H3W2B.js";
 import "../__chunks/SHA3WOPI.js";
 import "../__chunks/3ORBWXWF.js";
-import "../__chunks/4OZYHFMH.js";
+import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/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/esm/combobox/combobox-popover.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useComboboxList
-} from "../__chunks/DKALGMO6.js";
+} from "../__chunks/ZEXNX5JH.js";
 import {
   useComboboxProviderContext
 } from "../__chunks/W76OTZCC.js";
@@ -9,11 +9,11 @@ import "../__chunks/IB7YUKH5.js";
 import "../__chunks/4UUKJZ4V.js";
 import {
   usePopover
-} from "../__chunks/SXPADS2D.js";
+} from "../__chunks/A6XC27R5.js";
 import {
   createDialogComponent
-} from "../__chunks/PDVJHECS.js";
-import "../__chunks/57VLL43X.js";
+} from "../__chunks/PGAEII2Q.js";
+import "../__chunks/LWHPHW7Q.js";
 import "../__chunks/CLF4PQ7T.js";
 import "../__chunks/BULCTPRV.js";
 import "../__chunks/6BJGLK2C.js";
@@ -34,7 +34,7 @@ import "../__chunks/CHKJ74UC.js";
 import "../__chunks/7452U3HH.js";
 import "../__chunks/XPF5GU3Q.js";
 import "../__chunks/FSFPRQFR.js";
-import "../__chunks/KOKHD3Z3.js";
+import "../__chunks/CLE7NTOY.js";
 import "../__chunks/7H5KSHHF.js";
 import "../__chunks/G6BJYYBK.js";
 import "../__chunks/OAYFXAQ2.js";
@@ -46,9 +46,9 @@ import {
   createElement,
   createHook
 } from "../__chunks/3ORBWXWF.js";
-import "../__chunks/6SB7F42L.js";
-import "../__chunks/SMM5JVLC.js";
-import "../__chunks/4OZYHFMH.js";
+import "../__chunks/ZSELSBRM.js";
+import "../__chunks/SFCBA2JZ.js";
+import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import {
@@ -58,13 +58,13 @@ import {
 } from "../__chunks/4R3V3JGP.js";
 
 // src/combobox/combobox-popover.tsx
-import { matches } from "@ariakit/core/utils/dom";
+import { getDocument, matches } from "@ariakit/core/utils/dom";
 import { invariant } from "@ariakit/core/utils/misc";
 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 matches(target, selector);
@@ -75,11 +75,13 @@ var useComboboxPopover = createHook(
   (_a) => {
     var _b = _a, {
       store,
+      modal,
       tabIndex,
       alwaysVisible,
       hideOnInteractOutside = true
     } = _b, props = __objRest(_b, [
       "store",
+      "modal",
       "tabIndex",
       "alwaysVisible",
       "hideOnInteractOutside"
@@ -94,20 +96,47 @@ var useComboboxPopover = createHook(
     props = useComboboxList(__spreadValues({ store, alwaysVisible }, props));
     props = usePopover(__spreadProps(__spreadValues({
       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 = getDocument(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/esm/combobox/combobox-provider.js

@@ -1,22 +1,22 @@
 "use client";
 import {
   useComboboxStore
-} from "../__chunks/EZTAZGGV.js";
+} from "../__chunks/ZKJ2WLF7.js";
 import {
   ComboboxContextProvider
 } from "../__chunks/W76OTZCC.js";
-import "../__chunks/A6ER4BO6.js";
-import "../__chunks/HDMIVTNE.js";
+import "../__chunks/7GBW5FLS.js";
+import "../__chunks/Y6GYTNQ2.js";
 import "../__chunks/IB7YUKH5.js";
 import "../__chunks/4UUKJZ4V.js";
 import "../__chunks/7H5KSHHF.js";
 import "../__chunks/G6BJYYBK.js";
 import "../__chunks/OAYFXAQ2.js";
 import "../__chunks/3ORBWXWF.js";
-import "../__chunks/EENTNM7A.js";
-import "../__chunks/6SB7F42L.js";
-import "../__chunks/SMM5JVLC.js";
-import "../__chunks/4OZYHFMH.js";
+import "../__chunks/MG4P3223.js";
+import "../__chunks/ZSELSBRM.js";
+import "../__chunks/SFCBA2JZ.js";
+import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/combobox/combobox-store.js

@@ -2,13 +2,13 @@
 import {
   useComboboxStore,
   useComboboxStoreProps
-} from "../__chunks/EZTAZGGV.js";
-import "../__chunks/A6ER4BO6.js";
-import "../__chunks/HDMIVTNE.js";
-import "../__chunks/EENTNM7A.js";
-import "../__chunks/6SB7F42L.js";
-import "../__chunks/SMM5JVLC.js";
-import "../__chunks/4OZYHFMH.js";
+} from "../__chunks/ZKJ2WLF7.js";
+import "../__chunks/7GBW5FLS.js";
+import "../__chunks/Y6GYTNQ2.js";
+import "../__chunks/MG4P3223.js";
+import "../__chunks/ZSELSBRM.js";
+import "../__chunks/SFCBA2JZ.js";
+import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/combobox/combobox.d.ts

@@ -3,7 +3,7 @@ import type { BooleanOrCallback, StringWithValue } from "@ariakit/core/utils/typ
 import type { CompositeOptions } from "../composite/composite.js";
 import type { PopoverAnchorOptions } from "../popover/popover-anchor.js";
 import type { As, Props } from "../utils/types.js";
-import type { ComboboxStore } from "./combobox-store.js";
+import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.js";
 /**
  * Returns props to create a `Combobox` component.
  * @see https://ariakit.org/components/combobox
@@ -70,6 +70,34 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * @default false
      */
     autoSelect?: boolean;
+    /**
+     * Function that takes the currently rendered items and returns the id of the
+     * item to be auto selected when the
+     * [`autoSelect`](https://ariakit.org/reference/combobox#autoselect) prop is
+     * `true`.
+     *
+     * By default, the first enabled item is auto selected. This function is handy
+     * if you prefer a different item to be auto selected.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * @example
+     * ```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;
+     *   }}
+     * />
+     * ```
+     */
+    getAutoSelectId?: (renderedItems: ComboboxStoreState["renderedItems"]) => string | null | undefined;
     /**
      * Whether the items will be filtered based on
      * [`value`](https://ariakit.org/reference/combobox-provider#value) and