@ariakit/react-core 0.3.9 → 0.3.11

package/cjs/tooltip/tooltip.cjs

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _WK7AZPHScjs = require('../__chunks/WK7AZPHS.cjs');
+var _2GETDAIQcjs = require('../__chunks/2GETDAIQ.cjs');
 require('../__chunks/KXQOQQ5B.cjs');
-require('../__chunks/WABPFCL3.cjs');
+require('../__chunks/NVHGMKAE.cjs');
 
 
-var _OT6DC3MLcjs = require('../__chunks/OT6DC3ML.cjs');
+var _36QK2QLEcjs = require('../__chunks/36QK2QLE.cjs');
 require('../__chunks/RTT4XR27.cjs');
 require('../__chunks/NKR65BKC.cjs');
 require('../__chunks/PZL34OVO.cjs');
@@ -23,7 +23,7 @@ require('../__chunks/5GTNIPQ6.cjs');
 require('../__chunks/V24PR4PW.cjs');
 require('../__chunks/7566TIRW.cjs');
 require('../__chunks/J3OG6T3B.cjs');
-require('../__chunks/S6WUBPBB.cjs');
+require('../__chunks/65LGW5LY.cjs');
 require('../__chunks/XB3G2EO2.cjs');
 require('../__chunks/CVD2AZE2.cjs');
 require('../__chunks/2BIO7R5N.cjs');
@@ -94,7 +94,7 @@ var useTooltip = _RNZNGEL4cjs.createHook.call(void 0,
       (state) => state.type === "description" ? "tooltip" : "none"
     );
     props = _AV6KTKLEcjs.__spreadValues.call(void 0, { role }, props);
-    props = _WK7AZPHScjs.useHovercard.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
+    props = _2GETDAIQcjs.useHovercard.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
       store,
       portal,
       gutter,
@@ -123,7 +123,7 @@ var useTooltip = _RNZNGEL4cjs.createHook.call(void 0,
     return props;
   }
 );
-var Tooltip = _OT6DC3MLcjs.createDialogComponent.call(void 0, 
+var Tooltip = _36QK2QLEcjs.createDialogComponent.call(void 0, 
   _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
     const htmlProps = useTooltip(props);
     return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);

package/esm/__chunks/{FHDXHZLB.js → 57KNUQTI.js}

@@ -48,43 +48,32 @@ function isGrid(items) {
   return items.some((item) => !!item.rowId);
 }
 function isPrintableKey(event) {
+  const target = event.target;
+  if (target && !isTextField(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 (!isSelfTarget(event))
-    return false;
-  if (isModifierKey(event))
-    return false;
-  const target = event.target;
-  if (!target)
-    return true;
-  if (isTextField(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 useEvent((event) => {
     var _a;
     onKeyboardEvent == null ? void 0 : onKeyboardEvent(event);
     if (event.defaultPrevented)
       return;
+    if (event.isPropagationStopped())
+      return;
+    if (!isSelfTarget(event))
+      return;
+    if (isModifierKey(event))
+      return;
+    if (isPrintableKey(event))
+      return;
     const state = store.getState();
     const activeElement = (_a = getEnabledItem(store, state.activeId)) == null ? void 0 : _a.element;
     if (!activeElement)
       return;
-    if (!canProxyKeyboardEvent(event, state))
-      return;
     const _b = event, { view } = _b, eventInit = __objRest(_b, ["view"]);
     const previousElement = previousElementRef == null ? void 0 : previousElementRef.current;
     if (activeElement !== previousElement) {
@@ -269,6 +258,8 @@ var useComposite = createHook(
           }
         } else if (activeElement) {
           fireBlurEvent(activeElement, event);
+        } else if (previousElement) {
+          fireBlurEvent(previousElement, event);
         }
         event.stopPropagation();
       } else {
@@ -296,6 +287,9 @@ var useComposite = createHook(
       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 && isTextField(event.currentTarget))
+        return;
       const up = () => {
         if (grid) {
           const item = items && findFirstEnabledItemInTheLastRow(items);

package/esm/__chunks/{UV2O3GRQ.js → 7D63S66W.js}

@@ -8,7 +8,7 @@ import {
 } from "./5HVNGX6D.js";
 import {
   useComposite
-} from "./FHDXHZLB.js";
+} from "./57KNUQTI.js";
 import {
   isHidden
 } from "./KOKHD3Z3.js";

package/esm/__chunks/{TZJDOU75.js → 7R5VX7DV.js}

@@ -8,7 +8,7 @@ import {
 } from "./FWQLUQ4T.js";
 import {
   useComposite
-} from "./FHDXHZLB.js";
+} from "./57KNUQTI.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{6HKEBMMA.js → 7SHHFY4P.js}

@@ -4,7 +4,7 @@ import {
 } from "./XEV62JUQ.js";
 import {
   useCompositeItem
-} from "./YGCD7HIZ.js";
+} from "./R2WNOXYG.js";
 import {
   createElement,
   createHook,

package/esm/__chunks/{BJR5BFSV.js → CVFC2LN3.js}

@@ -10,7 +10,7 @@ import {
 } from "./G6ONQ5EH.js";
 import {
   useCompositeItem
-} from "./YGCD7HIZ.js";
+} from "./R2WNOXYG.js";
 import {
   createElement,
   createHook,

package/esm/__chunks/{DHHIMTTV.js → DENCHBDS.js}

@@ -8,7 +8,7 @@ import {
 } from "./HBGJOTTX.js";
 import {
   useComposite
-} from "./FHDXHZLB.js";
+} from "./57KNUQTI.js";
 import {
   isHidden
 } from "./KOKHD3Z3.js";

package/esm/__chunks/{E3XM3D67.js → JPXNJYSO.js}

@@ -133,9 +133,10 @@ var usePortal = createHook(
         if (!isFocusEventOutside(event))
           return;
         const focusing = event.type === "focusin";
-        if (focusing)
-          return restoreFocusIn(portalNode);
         cancelAnimationFrame(raf);
+        if (focusing) {
+          return restoreFocusIn(portalNode);
+        }
         raf = requestAnimationFrame(() => {
           disableFocusIn(portalNode, true);
         });
@@ -143,6 +144,7 @@ var usePortal = createHook(
       portalNode.addEventListener("focusin", onFocus, true);
       portalNode.addEventListener("focusout", onFocus, true);
       return () => {
+        cancelAnimationFrame(raf);
         portalNode.removeEventListener("focusin", onFocus, true);
         portalNode.removeEventListener("focusout", onFocus, true);
       };

package/esm/__chunks/{K5VQ2XTM.js → LZUSNDXA.js}

@@ -6,6 +6,9 @@ import {
   useStore,
   useStoreProps
 } from "./4OZYHFMH.js";
+import {
+  useUpdateEffect
+} from "./6O5OEQGF.js";
 import {
   __spreadProps,
   __spreadValues
@@ -18,8 +21,9 @@ function useTabStoreProps(store, update, props) {
   store = useCompositeStoreProps(store, update, props);
   useStoreProps(store, props, "selectedId", "setSelectedId");
   useStoreProps(store, props, "selectOnMove");
-  const [panels] = useStore(() => store.panels, {});
-  return useMemo(() => __spreadProps(__spreadValues({}, store), { panels }), []);
+  const [panels, updatePanels] = useStore(() => store.panels, {});
+  useUpdateEffect(updatePanels, [store, updatePanels]);
+  return useMemo(() => __spreadProps(__spreadValues({}, store), { panels }), [store, panels]);
 }
 function useTabStore(props = {}) {
   const [store, update] = useStore(Core.createTabStore, props);

package/esm/__chunks/{PFM7J2TR.js → PDVJHECS.js}

@@ -33,7 +33,7 @@ import {
 } from "./UYRJLDVS.js";
 import {
   usePortal
-} from "./E3XM3D67.js";
+} from "./JPXNJYSO.js";
 import {
   isHidden,
   useDisclosureContent

package/esm/__chunks/{YGCD7HIZ.js → R2WNOXYG.js}

@@ -220,7 +220,7 @@ var useCompositeItem = createHook(
         return;
       if (isEditableElement(event.currentTarget))
         return;
-      if (!baseElement2)
+      if (!(baseElement2 == null ? void 0 : baseElement2.isConnected))
         return;
       hasFocusedComposite.current = true;
       const fromComposite = event.relatedTarget === baseElement2 || isItem(store, event.relatedTarget);
@@ -259,18 +259,33 @@ var useCompositeItem = createHook(
       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 (!isTextField(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/esm/__chunks/{2WETNHXU.js → SXPADS2D.js}

@@ -2,7 +2,7 @@
 import {
   createDialogComponent,
   useDialog
-} from "./PFM7J2TR.js";
+} from "./PDVJHECS.js";
 import {
   PopoverScopedContextProvider,
   usePopoverProviderContext
@@ -32,6 +32,7 @@ import {
   autoUpdate,
   computePosition,
   flip,
+  limitShift,
   offset,
   shift,
   size
@@ -112,7 +113,8 @@ function getShiftMiddleware(props) {
   return shift({
     mainAxis: props.slide,
     crossAxis: props.overlap,
-    padding: props.overflowPadding
+    padding: props.overflowPadding,
+    limiter: limitShift()
   });
 }
 function getSizeMiddleware(props) {
@@ -227,7 +229,7 @@ var usePopover = createHook(
         const middleware = [
           getOffsetMiddleware(arrowElement, { gutter, shift: shift2 }),
           getFlipMiddleware({ flip: flip2, overflowPadding }),
-          getShiftMiddleware({ slide, overlap, overflowPadding }),
+          getShiftMiddleware({ slide, shift: shift2, overlap, overflowPadding }),
           getArrowMiddleware(arrowElement, { arrowPadding }),
           getSizeMiddleware({
             sameWidth,

package/esm/__chunks/{2ECHI3ER.js → W2TTCKOE.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useCompositeItem
-} from "./YGCD7HIZ.js";
+} from "./R2WNOXYG.js";
 import {
   useToolbarContext
 } from "./SOK7T35T.js";

package/esm/__chunks/{HQ7YVNMA.js → WEU2EOWJ.js}

@@ -6,10 +6,10 @@ import {
 } from "./YMV43K4F.js";
 import {
   usePopover
-} from "./2WETNHXU.js";
+} from "./SXPADS2D.js";
 import {
   createDialogComponent
-} from "./PFM7J2TR.js";
+} from "./PDVJHECS.js";
 import {
   HovercardScopedContextProvider,
   useHovercardProviderContext

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/collection/collection-renderer.d.ts

@@ -62,7 +62,6 @@ export declare function useCollectionRenderer<T extends Item = any>({ store, ite
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
-    placeholder?: string | undefined;
     slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     style?: CSSProperties | undefined;

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,7 +9,7 @@ import {
 } from "../__chunks/W76OTZCC.js";
 import {
   useCompositeItem
-} from "../__chunks/YGCD7HIZ.js";
+} from "../__chunks/R2WNOXYG.js";
 import "../__chunks/NWCBQ4CV.js";
 import "../__chunks/UH3I23HL.js";
 import "../__chunks/6QXBPV75.js";
@@ -151,7 +151,9 @@ var useComboboxItem = createHook(
       (state) => isSelected(state.selectedValue, value)
     );
     if (multiSelectable && selected != null) {
-      props["aria-selected"] = selected;
+      props = __spreadValues({
+        "aria-selected": selected
+      }, props);
     }
     props = useWrapElement(
       props,

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

@@ -9,10 +9,10 @@ import "../__chunks/IB7YUKH5.js";
 import "../__chunks/4UUKJZ4V.js";
 import {
   usePopover
-} from "../__chunks/2WETNHXU.js";
+} from "../__chunks/SXPADS2D.js";
 import {
   createDialogComponent
-} from "../__chunks/PFM7J2TR.js";
+} from "../__chunks/PDVJHECS.js";
 import "../__chunks/57VLL43X.js";
 import "../__chunks/CLF4PQ7T.js";
 import "../__chunks/BULCTPRV.js";
@@ -29,7 +29,7 @@ import "../__chunks/72E5EPFF.js";
 import "../__chunks/X6WIMZJE.js";
 import "../__chunks/HPP6CWMY.js";
 import "../__chunks/UYRJLDVS.js";
-import "../__chunks/E3XM3D67.js";
+import "../__chunks/JPXNJYSO.js";
 import "../__chunks/CHKJ74UC.js";
 import "../__chunks/7452U3HH.js";
 import "../__chunks/XPF5GU3Q.js";
@@ -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.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,31 @@ 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.
+     * @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