@ariakit/react-core 0.1.5 → 0.1.6

package/esm/__chunks/BMLNRUFQ.js

@@ -0,0 +1,7 @@
+// src/focusable/focusable-context.ts
+import { createContext } from "react";
+var FocusableContext = createContext(true);
+
+export {
+  FocusableContext
+};

package/esm/__chunks/D6AEGMVG.js

@@ -0,0 +1,38 @@
+import {
+  FocusableContext
+} from "./BMLNRUFQ.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useWrapElement
+} from "./B7MIN7YT.js";
+
+// src/focusable/focusable-container.tsx
+import { jsx } from "react/jsx-runtime";
+var useFocusableContainer = createHook(
+  ({ autoFocusOnShow = true, ...props }) => {
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(FocusableContext.Provider, { value: autoFocusOnShow, children: element }),
+      [autoFocusOnShow]
+    );
+    return props;
+  }
+);
+var FocusableContainer = createComponent(
+  (props) => {
+    const htmlProps = useFocusableContainer(props);
+    return createElement("div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  FocusableContainer.displayName = "FocusableContainer";
+}
+
+export {
+  useFocusableContainer,
+  FocusableContainer
+};

package/esm/__chunks/{LZKGMRGC.js → DH2UH4YR.js}

@@ -6,7 +6,7 @@ import {
 } from "./EEVSGAZW.js";
 import {
   useComposite
-} from "./FXC76SFN.js";
+} from "./NOLA2XUH.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{LBUPFIVF.js → DQXTORDL.js}

@@ -3,7 +3,7 @@ import {
 } from "./6I2PARRP.js";
 import {
   useCompositeItem
-} from "./JOV72LYK.js";
+} from "./HAHDW4I2.js";
 import {
   createElement,
   createHook,
@@ -11,7 +11,7 @@ import {
 } from "./JE5NWDDX.js";
 import {
   useStoreState
-} from "./LTH56VDS.js";
+} from "./EUGPS2W3.js";
 import {
   useEvent,
   useForkRef,

package/esm/__chunks/{JIT55CHU.js → E3LZDF77.js}

@@ -1,9 +1,18 @@
 import {
   DialogBackdrop
 } from "./4U6AOLE4.js";
+import {
+  usePreventBodyScroll
+} from "./GWYHKM6Q.js";
+import {
+  useNestedDialogs
+} from "./IIX2NU6T.js";
 import {
   useHideOnInteractOutside
 } from "./ARIIJA3Z.js";
+import {
+  useChampionDialog
+} from "./FD7UP2TJ.js";
 import {
   prependHiddenDismiss
 } from "./PU22SOKH.js";
@@ -13,18 +22,12 @@ import {
 import {
   disableAccessibilityTreeOutside
 } from "./NV7HSBKK.js";
+import {
+  useFocusableContainer
+} from "./D6AEGMVG.js";
 import {
   useFocusTrapRegion
 } from "./2SVAPVVI.js";
-import {
-  usePreventBodyScroll
-} from "./GWYHKM6Q.js";
-import {
-  useChampionDialog
-} from "./FD7UP2TJ.js";
-import {
-  useNestedDialogs
-} from "./IIX2NU6T.js";
 import {
   HeadingLevel
 } from "./6OMX4H3W.js";
@@ -35,7 +38,7 @@ import {
 } from "./LNHZLQEK.js";
 import {
   useFocusable
-} from "./5TGAWEHD.js";
+} from "./HBXYECGK.js";
 import {
   usePortal
 } from "./MPZ7PKON.js";
@@ -256,6 +259,7 @@ var useDialog = createHook(
     }, [shouldDisableOutside, portal, portalNode, modal]);
     const mayAutoFocusOnShow = !!autoFocusOnShow;
     const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
+    const [autoFocusEnabled, setAutoFocusEnabled] = useState(false);
     useEffect(() => {
       if (!open)
         return;
@@ -284,6 +288,7 @@ var useDialog = createHook(
       getFirstTabbableIn(dialog, true, portal && preserveTabOrder) || dialog;
       if (!autoFocusOnShowProp(element))
         return;
+      setAutoFocusEnabled(true);
       element.focus();
     }, [
       contentElement,
@@ -442,6 +447,10 @@ var useDialog = createHook(
       ...props,
       ref: useForkRef(ref, props.ref)
     };
+    props = useFocusableContainer({
+      ...props,
+      autoFocusOnShow: autoFocusEnabled
+    });
     props = useDisclosureContent({ store, ...props });
     props = useFocusable({ ...props, focusable });
     props = usePortal({ portal, ...props, portalRef, preserveTabOrder });

package/esm/__chunks/{LTH56VDS.js → EUGPS2W3.js}

@@ -42,16 +42,25 @@ function useStoreProps(store, props, key, setKey) {
     return store.sync(
       (state, prev) => {
         const { value: value2, setValue } = propsRef.current;
-        if (value2 !== void 0) {
-          store.setState(key, value2);
-        }
-        if (setValue && state[key] !== prev[key] && state[key] !== value2) {
-          setValue(state[key]);
-        }
+        if (!setValue)
+          return;
+        if (state[key] === prev[key])
+          return;
+        if (state[key] === value2)
+          return;
+        setValue(state[key]);
       },
       [key]
     );
   }, [store, key]);
+  useSafeLayoutEffect(() => {
+    return store.sync(() => {
+      const { value: value2 } = propsRef.current;
+      if (value2 === void 0)
+        return;
+      store.setState(key, value2);
+    }, [key]);
+  }, [store, key]);
   useUpdateLayoutEffect(() => {
     if (value === void 0)
       return;

package/esm/__chunks/{NY7SYLNQ.js → EX5SMLJA.js}

@@ -5,7 +5,7 @@ import {
 } from "./X7FKJQME.js";
 import {
   usePopover
-} from "./GLAECEAR.js";
+} from "./LUPFVLDA.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{2WA5HZXQ.js → FVED2REU.js}

@@ -1,6 +1,6 @@
 import {
   useFocusable
-} from "./5TGAWEHD.js";
+} from "./HBXYECGK.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{I4MLEPTM.js → GEZPJZJE.js}

@@ -1,6 +1,6 @@
 import {
   useCommand
-} from "./SAVDGYCC.js";
+} from "./SMBMF2TX.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{JOV72LYK.js → HAHDW4I2.js}

@@ -1,6 +1,6 @@
 import {
   useCommand
-} from "./SAVDGYCC.js";
+} from "./SMBMF2TX.js";
 import {
   useCollectionItem
 } from "./ON2AV7GH.js";
@@ -21,7 +21,7 @@ import {
 } from "./JE5NWDDX.js";
 import {
   useStoreState
-} from "./LTH56VDS.js";
+} from "./EUGPS2W3.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/__chunks/{5TGAWEHD.js → HBXYECGK.js}

@@ -1,3 +1,6 @@
+import {
+  FocusableContext
+} from "./BMLNRUFQ.js";
 import {
   createComponent,
   createElement,
@@ -10,7 +13,7 @@ import {
 } from "./B7MIN7YT.js";
 
 // src/focusable/focusable.ts
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { isButton } from "@ariakit/core/utils/dom";
 import {
   addGlobalEventListener,
@@ -293,6 +296,7 @@ var useFocusable = createHook(
         setFocusVisible(false);
       }
     });
+    const autoFocusOnShow = useContext(FocusableContext);
     const autoFocusRef = useEvent((element) => {
       if (!focusable)
         return;
@@ -300,6 +304,8 @@ var useFocusable = createHook(
         return;
       if (!element)
         return;
+      if (!autoFocusOnShow)
+        return;
       queueMicrotask(() => {
         if (hasFocus(element))
           return;

package/esm/__chunks/{GM2BWWHD.js → LMKEQY3H.js}

@@ -3,7 +3,7 @@ import {
 } from "./M5KYRTQG.js";
 import {
   useCommand
-} from "./SAVDGYCC.js";
+} from "./SMBMF2TX.js";
 import {
   createComponent,
   createElement,
@@ -11,7 +11,7 @@ import {
 } from "./JE5NWDDX.js";
 import {
   useStoreState
-} from "./LTH56VDS.js";
+} from "./EUGPS2W3.js";
 import {
   useEvent,
   useForkRef,

package/esm/__chunks/{GLAECEAR.js → LUPFVLDA.js}

@@ -1,6 +1,6 @@
 import {
   useDialog
-} from "./JIT55CHU.js";
+} from "./E3LZDF77.js";
 import {
   PopoverContext
 } from "./6GS36SYX.js";

package/esm/__chunks/{ND76WTDR.js → LWUHIEZR.js}

@@ -1,10 +1,10 @@
 import {
   useDisclosureStoreOptions,
   useDisclosureStoreProps
-} from "./YHRHKO5B.js";
+} from "./NL6KEDBG.js";
 import {
   useStore
-} from "./LTH56VDS.js";
+} from "./EUGPS2W3.js";
 
 // src/dialog/dialog-store.ts
 import * as Core from "@ariakit/core/dialog/dialog-store";

package/esm/__chunks/{JKSMOXA4.js → MMKQPA5B.js}

@@ -1,6 +1,6 @@
 import {
   useDialogDisclosure
-} from "./NRA7DRSD.js";
+} from "./OOPJDYET.js";
 import {
   PopoverContext
 } from "./6GS36SYX.js";

package/esm/__chunks/{YHRHKO5B.js → NL6KEDBG.js}

@@ -1,7 +1,7 @@
 import {
   useStore,
   useStoreProps
-} from "./LTH56VDS.js";
+} from "./EUGPS2W3.js";
 
 // src/disclosure/disclosure-store.ts
 import * as Core from "@ariakit/core/disclosure/disclosure-store";

package/esm/__chunks/{FXC76SFN.js → NOLA2XUH.js}

@@ -7,7 +7,7 @@ import {
 } from "./STKLF26R.js";
 import {
   useFocusable
-} from "./5TGAWEHD.js";
+} from "./HBXYECGK.js";
 import {
   CompositeContext
 } from "./Z3X3QN6P.js";

package/esm/__chunks/{6THLPTJO.js → NZB3NDFQ.js}

@@ -1,6 +1,6 @@
 import {
   useButton
-} from "./I4MLEPTM.js";
+} from "./GEZPJZJE.js";
 import {
   DialogContext
 } from "./LNHZLQEK.js";

package/esm/__chunks/{NRA7DRSD.js → OOPJDYET.js}

@@ -1,6 +1,6 @@
 import {
   useDisclosure
-} from "./57UTLR6J.js";
+} from "./UBWZV2LZ.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{B3AF63GK.js → QLGPSTUO.js}

@@ -1,6 +1,6 @@
 import {
   useDialogDismiss
-} from "./6THLPTJO.js";
+} from "./NZB3NDFQ.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{SAVDGYCC.js → SMBMF2TX.js}

@@ -1,6 +1,6 @@
 import {
   useFocusable
-} from "./5TGAWEHD.js";
+} from "./HBXYECGK.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{KTHONFWV.js → TQC4ZBYZ.js}

@@ -10,7 +10,7 @@ import {
 } from "./DRSUYUM5.js";
 import {
   useCompositeItem
-} from "./JOV72LYK.js";
+} from "./HAHDW4I2.js";
 import {
   createElement,
   createHook,
@@ -18,7 +18,7 @@ import {
 } from "./JE5NWDDX.js";
 import {
   useStoreState
-} from "./LTH56VDS.js";
+} from "./EUGPS2W3.js";
 import {
   useBooleanEvent,
   useEvent

package/esm/__chunks/{57UTLR6J.js → UBWZV2LZ.js}

@@ -1,6 +1,6 @@
 import {
   useButton
-} from "./I4MLEPTM.js";
+} from "./GEZPJZJE.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{2EEVGFEH.js → V3PAD47N.js}

@@ -7,7 +7,7 @@ import {
 } from "./6OCAIYRY.js";
 import {
   useComposite
-} from "./FXC76SFN.js";
+} from "./NOLA2XUH.js";
 import {
   createComponent,
   createElement,
@@ -15,7 +15,7 @@ import {
 } from "./JE5NWDDX.js";
 import {
   useStoreState
-} from "./LTH56VDS.js";
+} from "./EUGPS2W3.js";
 import {
   useEvent,
   useForkRef,
@@ -122,7 +122,7 @@ var useMenuList = createHook(
     );
     const ariaLabelledBy = useAriaLabelledBy({ store, ...props });
     const mounted = store.useState("mounted");
-    const style = mounted ? props.style : { ...props.style, display: "none" };
+    const style = mounted && props.hidden !== true || props.hidden === false ? props.style : { ...props.style, display: "none" };
     props = {
       id,
       "aria-labelledby": ariaLabelledBy,

package/esm/__chunks/{36HCAR3M.js → WKCZETSE.js}

@@ -1,7 +1,7 @@
 import {
   useStore,
   useStoreProps
-} from "./LTH56VDS.js";
+} from "./EUGPS2W3.js";
 
 // src/collection/collection-store.ts
 import * as Core from "@ariakit/core/collection/collection-store";

package/esm/__chunks/{M6QENKOT.js → YTUXLB4R.js}

@@ -1,11 +1,11 @@
 import {
   useDialogStoreOptions,
   useDialogStoreProps
-} from "./ND76WTDR.js";
+} from "./LWUHIEZR.js";
 import {
   useStore,
   useStoreProps
-} from "./LTH56VDS.js";
+} from "./EUGPS2W3.js";
 import {
   useEvent
 } from "./B7MIN7YT.js";

package/esm/__chunks/{ZCEPUYV7.js → ZNVJPG2U.js}

@@ -1,11 +1,11 @@
 import {
   useCollectionStoreOptions,
   useCollectionStoreProps
-} from "./36HCAR3M.js";
+} from "./WKCZETSE.js";
 import {
   useStore,
   useStoreProps
-} from "./LTH56VDS.js";
+} from "./EUGPS2W3.js";
 
 // src/composite/composite-store.ts
 import * as Core from "@ariakit/core/composite/composite-store";

package/esm/button/button.js

@@ -1,9 +1,10 @@
 import {
   Button,
   useButton
-} from "../__chunks/I4MLEPTM.js";
-import "../__chunks/SAVDGYCC.js";
-import "../__chunks/5TGAWEHD.js";
+} from "../__chunks/GEZPJZJE.js";
+import "../__chunks/SMBMF2TX.js";
+import "../__chunks/HBXYECGK.js";
+import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/JE5NWDDX.js";
 import "../__chunks/B7MIN7YT.js";
 import "../__chunks/SXC6BPOF.js";

package/esm/checkbox/checkbox-store.js

@@ -2,8 +2,8 @@ import {
   useCheckboxStore,
   useCheckboxStoreOptions,
   useCheckboxStoreProps
-} from "../__chunks/MAJ5ZZ2S.js";
-import "../__chunks/LTH56VDS.js";
+} from "../__chunks/3QLNHI3O.js";
+import "../__chunks/EUGPS2W3.js";
 import "../__chunks/B7MIN7YT.js";
 import "../__chunks/SXC6BPOF.js";
 export {

package/esm/checkbox/checkbox.d.ts

@@ -29,12 +29,19 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
     /**
      * Object returned by the `useCheckboxStore` hook. If not provided, the
      * internal store will be used.
+     *
+     * Live examples:
+     * - [Checkbox as button](https://ariakit.org/examples/checkbox-as-button)
+     * - [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)
      */
     store?: CheckboxStore;
     /**
      * The value of the checkbox. This is useful when the same checkbox store is
      * used for multiple `Checkbox` elements, in which case the value will be an
      * array of checked values.
+     *
+     * Live examples:
+     * - [Checkbox group](https://ariakit.org/examples/checkbox-group)
      * @example
      * ```jsx
      * const checkbox = useCheckboxStore({
@@ -46,19 +53,25 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
      * ```
      */
     value?: string | number;
+    /**
+     * The default `checked` state of the checkbox. This prop is ignored if the
+     * `checked` or the `store` props are provided.
+     */
+    defaultChecked?: "mixed" | boolean;
     /**
      * The `checked` state of the checkbox. This will override the value inferred
      * from `store` prop, if provided. This can be `"mixed"` to indicate that the
      * checkbox is partially checked.
+     *
+     * Live examples:
+     * - [Controlled Checkbox](https://ariakit.org/examples/checkbox-controlled)
      */
     checked?: "mixed" | boolean;
-    /**
-     * The default `checked` state of the checkbox. This prop is ignored if the
-     * `checked` or the `store` props are provided.
-     */
-    defaultChecked?: "mixed" | boolean;
     /**
      * A function that is called when the checkbox's `checked` store changes.
+     *
+     * Live examples:
+     * - [Controlled Checkbox](https://ariakit.org/examples/checkbox-controlled)
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }

package/esm/checkbox/checkbox.js

@@ -1,12 +1,13 @@
 import {
   Checkbox,
   useCheckbox
-} from "../__chunks/GM2BWWHD.js";
+} from "../__chunks/LMKEQY3H.js";
 import "../__chunks/M5KYRTQG.js";
-import "../__chunks/SAVDGYCC.js";
-import "../__chunks/5TGAWEHD.js";
+import "../__chunks/SMBMF2TX.js";
+import "../__chunks/HBXYECGK.js";
+import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/JE5NWDDX.js";
-import "../__chunks/LTH56VDS.js";
+import "../__chunks/EUGPS2W3.js";
 import "../__chunks/B7MIN7YT.js";
 import "../__chunks/SXC6BPOF.js";
 export {

package/esm/collection/collection-store.js

@@ -2,8 +2,8 @@ import {
   useCollectionStore,
   useCollectionStoreOptions,
   useCollectionStoreProps
-} from "../__chunks/36HCAR3M.js";
-import "../__chunks/LTH56VDS.js";
+} from "../__chunks/WKCZETSE.js";
+import "../__chunks/EUGPS2W3.js";
 import "../__chunks/B7MIN7YT.js";
 import "../__chunks/SXC6BPOF.js";
 export {

package/esm/combobox/combobox-cancel.js

@@ -1,8 +1,9 @@
 import {
   useButton
-} from "../__chunks/I4MLEPTM.js";
-import "../__chunks/SAVDGYCC.js";
-import "../__chunks/5TGAWEHD.js";
+} from "../__chunks/GEZPJZJE.js";
+import "../__chunks/SMBMF2TX.js";
+import "../__chunks/HBXYECGK.js";
+import "../__chunks/BMLNRUFQ.js";
 import {
   createComponent,
   createElement,

package/esm/combobox/combobox-disclosure.js

@@ -1,10 +1,11 @@
 import {
   useDialogDisclosure
-} from "../__chunks/NRA7DRSD.js";
-import "../__chunks/57UTLR6J.js";
-import "../__chunks/I4MLEPTM.js";
-import "../__chunks/SAVDGYCC.js";
-import "../__chunks/5TGAWEHD.js";
+} from "../__chunks/OOPJDYET.js";
+import "../__chunks/UBWZV2LZ.js";
+import "../__chunks/GEZPJZJE.js";
+import "../__chunks/SMBMF2TX.js";
+import "../__chunks/HBXYECGK.js";
+import "../__chunks/BMLNRUFQ.js";
 import {
   createComponent,
   createElement,

package/esm/combobox/combobox-item.js

@@ -7,19 +7,20 @@ import {
 } from "../__chunks/DRSUYUM5.js";
 import {
   useCompositeItem
-} from "../__chunks/JOV72LYK.js";
-import "../__chunks/SAVDGYCC.js";
+} from "../__chunks/HAHDW4I2.js";
+import "../__chunks/SMBMF2TX.js";
 import "../__chunks/ON2AV7GH.js";
 import "../__chunks/T3DJZG63.js";
 import "../__chunks/STKLF26R.js";
-import "../__chunks/5TGAWEHD.js";
+import "../__chunks/HBXYECGK.js";
+import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/Z3X3QN6P.js";
 import {
   createElement,
   createHook,
   createMemoComponent
 } from "../__chunks/JE5NWDDX.js";
-import "../__chunks/LTH56VDS.js";
+import "../__chunks/EUGPS2W3.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/combobox/combobox-popover.js

@@ -4,24 +4,26 @@ import {
 import "../__chunks/5VGBBGF5.js";
 import {
   usePopover
-} from "../__chunks/GLAECEAR.js";
-import "../__chunks/JIT55CHU.js";
+} from "../__chunks/LUPFVLDA.js";
+import "../__chunks/E3LZDF77.js";
 import "../__chunks/4U6AOLE4.js";
+import "../__chunks/GWYHKM6Q.js";
+import "../__chunks/IIX2NU6T.js";
 import "../__chunks/ARIIJA3Z.js";
+import "../__chunks/FD7UP2TJ.js";
 import "../__chunks/PU22SOKH.js";
 import "../__chunks/X3J57OQT.js";
 import "../__chunks/NV7HSBKK.js";
+import "../__chunks/D6AEGMVG.js";
 import "../__chunks/2SVAPVVI.js";
 import "../__chunks/HVXLVRRR.js";
 import "../__chunks/7JNF6I52.js";
-import "../__chunks/GWYHKM6Q.js";
-import "../__chunks/FD7UP2TJ.js";
-import "../__chunks/IIX2NU6T.js";
 import "../__chunks/6OMX4H3W.js";
 import "../__chunks/COQHFAEN.js";
 import "../__chunks/LNHZLQEK.js";
 import "../__chunks/6GS36SYX.js";
-import "../__chunks/5TGAWEHD.js";
+import "../__chunks/HBXYECGK.js";
+import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/MPZ7PKON.js";
 import "../__chunks/NDTB3OGK.js";
 import "../__chunks/LDDPB3PY.js";