@ariakit/react-core 0.3.1 → 0.3.3

package/esm/__chunks/{7AFOF5E7.js → R6PKH666.js}

@@ -1,6 +1,6 @@
 import {
   useButton
-} from "./QPWEKAWF.js";
+} from "./D2BRO4YW.js";
 import {
   useDisclosureProviderContext
 } from "./56KWVYDN.js";

package/esm/__chunks/{MXSIXS3C.js → SUD3LBWB.js}

@@ -1,6 +1,6 @@
 import {
   useDialogDisclosure
-} from "./TQ2YQL6O.js";
+} from "./3HY5ZQT3.js";
 import {
   usePopoverAnchor
 } from "./4FNI7F6H.js";

package/esm/__chunks/{4JNX5L5C.js → T5VBGHBO.js}

@@ -1,6 +1,6 @@
 import {
   useDialogDismiss
-} from "./HMYMEP6U.js";
+} from "./W5ZMSHVN.js";
 import {
   usePopoverScopedContext
 } from "./547DFODS.js";

package/esm/__chunks/{RJEKIG5Y.js → TWMREEKC.js}

@@ -1,6 +1,6 @@
 import {
   useCompositeItem
-} from "./72OJKUSZ.js";
+} from "./54J7EHCU.js";
 import {
   useToolbarContext
 } from "./IPFII6JW.js";

package/esm/__chunks/VRCYQ6JX.js

@@ -0,0 +1,79 @@
+import {
+  setProperty
+} from "./FW6QFGFT.js";
+
+// src/dialog/utils/walk-tree-outside.ts
+import { contains, getDocument } from "@ariakit/core/utils/dom";
+import { chain } from "@ariakit/core/utils/misc";
+var ignoreTags = ["SCRIPT", "STYLE"];
+function getSnapshotPropertyName(id) {
+  return `__ariakit-dialog-snapshot-${id}`;
+}
+function inSnapshot(id, element) {
+  const doc = getDocument(element);
+  const propertyName = getSnapshotPropertyName(id);
+  if (!doc.body[propertyName])
+    return true;
+  do {
+    if (element === doc.body)
+      return false;
+    if (!!element[propertyName])
+      return true;
+    if (!element.parentElement)
+      return false;
+    element = element.parentElement;
+  } while (true);
+}
+function isValidElement(id, element, ignoredElements) {
+  if (ignoreTags.includes(element.tagName))
+    return false;
+  if (!inSnapshot(id, element))
+    return false;
+  return !ignoredElements.some(
+    (enabledElement) => enabledElement && contains(element, enabledElement)
+  );
+}
+function walkTreeOutside(id, elements, callback, ancestorCallback) {
+  for (let element of elements) {
+    if (!(element == null ? void 0 : element.isConnected))
+      continue;
+    const hasAncestorAlready = elements.some((maybeAncestor) => {
+      if (!maybeAncestor)
+        return false;
+      if (maybeAncestor === element)
+        return false;
+      return maybeAncestor.contains(element);
+    });
+    const doc = getDocument(element);
+    const originalElement = element;
+    while (element.parentElement && element !== doc.body) {
+      ancestorCallback == null ? void 0 : ancestorCallback(element.parentElement, originalElement);
+      if (!hasAncestorAlready) {
+        for (const child of element.parentElement.children) {
+          if (isValidElement(id, child, elements)) {
+            callback(child, originalElement);
+          }
+        }
+      }
+      element = element.parentElement;
+    }
+  }
+}
+function createWalkTreeSnapshot(id, elements) {
+  const { body } = getDocument(elements[0]);
+  const cleanups = [];
+  const markElement = (element) => {
+    cleanups.push(setProperty(element, getSnapshotPropertyName(id), true));
+  };
+  walkTreeOutside(id, elements, markElement);
+  return chain(
+    setProperty(body, getSnapshotPropertyName(id), true),
+    () => cleanups.forEach((fn) => fn())
+  );
+}
+
+export {
+  isValidElement,
+  walkTreeOutside,
+  createWalkTreeSnapshot
+};

package/esm/__chunks/{HMYMEP6U.js → W5ZMSHVN.js}

@@ -1,6 +1,6 @@
 import {
   useButton
-} from "./QPWEKAWF.js";
+} from "./D2BRO4YW.js";
 import {
   useDialogScopedContext
 } from "./5YYGDU4E.js";

package/esm/__chunks/{RA2AAYOC.js → X6F6ND2A.js}

@@ -3,14 +3,14 @@ import {
 } from "./QP4RN5UY.js";
 import {
   useCompositeStoreProps
-} from "./WGAKICTY.js";
+} from "./EZ23JQKA.js";
 import {
   usePopoverStoreProps
-} from "./XEZV3AK4.js";
+} from "./DO6GQUCF.js";
 import {
   useStore,
   useStoreProps
-} from "./XXO3VVQU.js";
+} from "./4LP74VAP.js";
 import {
   useUpdateEffect
 } from "./J7Q2EO23.js";
@@ -26,6 +26,7 @@ function useSelectStoreProps(store, update, props) {
   store = useCompositeStoreProps(store, update, props);
   store = usePopoverStoreProps(store, update, props);
   useStoreProps(store, props, "value", "setValue");
+  useStoreProps(store, props, "setValueOnMove");
   return Object.assign(store, { combobox: props.combobox });
 }
 function useSelectStore(props = {}) {

package/esm/__chunks/{LND6SMHN.js → XBIFFFUN.js}

@@ -1,6 +1,6 @@
 import {
   useFocusable
-} from "./M4OAD5XF.js";
+} from "./YTHH33BK.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{4WK6LN27.js → XQCQJGZ3.js}

@@ -1,10 +1,10 @@
 import {
   useCompositeStoreProps
-} from "./WGAKICTY.js";
+} from "./EZ23JQKA.js";
 import {
   useStore,
   useStoreProps
-} from "./XXO3VVQU.js";
+} from "./4LP74VAP.js";
 
 // src/radio/radio-store.ts
 import * as Core from "@ariakit/core/radio/radio-store";

package/esm/__chunks/{CJPLAYFB.js → YGEFENKI.js}

@@ -1,25 +1,29 @@
 import {
   DialogBackdrop
-} from "./NRLOAE2I.js";
+} from "./IAA7Y45N.js";
 import {
   useNestedDialogs
-} from "./PLOINBVB.js";
+} from "./HWJ7DGMR.js";
 import {
   useHideOnInteractOutside
-} from "./HAVCR65N.js";
+} from "./7LB47D2O.js";
 import {
   prependHiddenDismiss
 } from "./62DFK33R.js";
 import {
   isElementMarked,
   markTreeOutside
-} from "./KGDYSCOM.js";
+} from "./FRKOFFMT.js";
 import {
+  disableTree,
   disableTreeOutside
-} from "./XASENZA4.js";
+} from "./EGOOWJGN.js";
 import {
   disableAccessibilityTreeOutside
-} from "./X5VV5CBA.js";
+} from "./7VWXICM7.js";
+import {
+  createWalkTreeSnapshot
+} from "./VRCYQ6JX.js";
 import {
   usePreventBodyScroll
 } from "./3LGVTTHD.js";
@@ -44,7 +48,7 @@ import {
 } from "./5YYGDU4E.js";
 import {
   useFocusable
-} from "./M4OAD5XF.js";
+} from "./YTHH33BK.js";
 import {
   createComponent,
   createElement,
@@ -240,14 +244,36 @@ var useDialog = createHook(
         return;
       return prependHiddenDismiss(dialog, store.hide);
     }, [store, mounted, domReady, shouldDisableAccessibilityTree]);
-    const getPersistentElementsProp = useEvent(getPersistentElements);
     useSafeLayoutEffect(() => {
-      if (!store)
+      if (open)
+        return;
+      if (!mounted)
+        return;
+      if (!domReady)
+        return;
+      const dialog = ref.current;
+      if (!dialog)
+        return;
+      return disableTree(dialog);
+    }, [open, mounted, domReady]);
+    useSafeLayoutEffect(() => {
+      if (!id)
+        return;
+      if (!open)
         return;
       if (!domReady)
         return;
+      const dialog = ref.current;
+      return createWalkTreeSnapshot(id, [dialog]);
+    }, [id, open, domReady]);
+    const getPersistentElementsProp = useEvent(getPersistentElements);
+    useSafeLayoutEffect(() => {
       if (!id)
         return;
+      if (!store)
+        return;
+      if (!domReady)
+        return;
       if (!open)
         return;
       const { disclosureElement } = store.getState();
@@ -259,22 +285,22 @@ var useDialog = createHook(
         ...nestedDialogs.map((dialog2) => dialog2.getState().contentElement)
       ];
       if (!shouldDisableAccessibilityTree) {
-        return markTreeOutside(id, disclosureElement, ...allElements);
+        return markTreeOutside(id, [disclosureElement, ...allElements]);
       }
       if (modal) {
         return chain(
-          markTreeOutside(id, ...allElements),
-          disableTreeOutside(...allElements)
+          markTreeOutside(id, allElements),
+          disableTreeOutside(id, allElements)
         );
       }
       return chain(
-        markTreeOutside(id, disclosureElement, ...allElements),
-        disableAccessibilityTreeOutside(...allElements)
+        markTreeOutside(id, [disclosureElement, ...allElements]),
+        disableAccessibilityTreeOutside(id, allElements)
       );
     }, [
+      id,
       store,
       domReady,
-      id,
       open,
       getPersistentElementsProp,
       nestedDialogs,
@@ -422,7 +448,7 @@ var useDialog = createHook(
           if (contains(dialog, target))
             return true;
           if (!disclosureElement)
-            return false;
+            return true;
           if (contains(disclosureElement, target))
             return true;
           return false;
@@ -433,8 +459,8 @@ var useDialog = createHook(
           return;
         store.hide();
       };
-      return addGlobalEventListener("keydown", onKeyDown);
-    }, [store, mounted, domReady, hideOnEscapeProp]);
+      return addGlobalEventListener("keydown", onKeyDown, true);
+    }, [store, domReady, mounted, hideOnEscapeProp]);
     props = useWrapElement(
       props,
       (element) => /* @__PURE__ */ jsx(HeadingLevel, { level: modal ? 1 : void 0, children: element }),

package/esm/__chunks/{K6BB6DTS.js → YI522MHJ.js}

@@ -1,9 +1,9 @@
 import {
   useCompositeStoreProps
-} from "./WGAKICTY.js";
+} from "./EZ23JQKA.js";
 import {
   useStore
-} from "./XXO3VVQU.js";
+} from "./4LP74VAP.js";
 
 // src/menu/menu-bar-store.ts
 import * as Core from "@ariakit/core/menu/menu-bar-store";

package/esm/button/button.js

@@ -1,9 +1,9 @@
 import {
   Button,
   useButton
-} from "../__chunks/QPWEKAWF.js";
-import "../__chunks/LND6SMHN.js";
-import "../__chunks/M4OAD5XF.js";
+} from "../__chunks/D2BRO4YW.js";
+import "../__chunks/XBIFFFUN.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";

package/esm/checkbox/checkbox-provider.js

@@ -1,11 +1,11 @@
 import {
   useCheckboxStore
-} from "../__chunks/KZMKUBQH.js";
+} from "../__chunks/D6CHFQY5.js";
 import {
   CheckboxContextProvider
 } from "../__chunks/ICL2YIES.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/checkbox/checkbox-store.js

@@ -1,8 +1,8 @@
 import {
   useCheckboxStore,
   useCheckboxStoreProps
-} from "../__chunks/KZMKUBQH.js";
-import "../__chunks/XXO3VVQU.js";
+} from "../__chunks/D6CHFQY5.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/checkbox/checkbox.d.ts

@@ -27,12 +27,15 @@ export declare const useCheckbox: import("../utils/types.js").Hook<CheckboxOptio
 export declare const Checkbox: import("../utils/types.js").Component<CheckboxOptions<"input">>;
 export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<T> {
     /**
-     * Object returned by the `useCheckboxStore` hook. If not provided, the
-     * internal store will be used.
+     * Object returned by the
+     * [`useCheckboxStore`](https://ariakit.org/reference/use-checkbox-store)
+     * hook. If not provided, the closest
+     * [`CheckboxProvider`](https://ariakit.org/reference/checkbox-provider)
+     * component's context will be used. Otherwise, the component will fall back
+     * to an internal store.
      *
      * Live examples:
      * - [Checkbox as button](https://ariakit.org/examples/checkbox-as-button)
-     * - [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)
      */
     store?: CheckboxStore;
     /**
@@ -42,14 +45,14 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
      *
      * Live examples:
      * - [Checkbox group](https://ariakit.org/examples/checkbox-group)
+     * - [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox)
      * @example
      * ```jsx
-     * const checkbox = useCheckboxStore({
-     *   defaultValue: ["Apple", "Orange"],
-     * });
-     * <Checkbox store={checkbox} value="Apple" />
-     * <Checkbox store={checkbox} value="Orange" />
-     * <Checkbox store={checkbox} value="Watermelon" />
+     * <CheckboxProvider defaultValue={["Apple", "Orange"]}>
+     *   <Checkbox value="Apple" />
+     *   <Checkbox value="Orange" />
+     *   <Checkbox value="Watermelon" />
+     * </CheckboxProvider>
      * ```
      */
     value?: InputHTMLAttributes<HTMLInputElement>["value"];

package/esm/checkbox/checkbox.js

@@ -1,14 +1,14 @@
 import {
   Checkbox,
   useCheckbox
-} from "../__chunks/HGW6FZYU.js";
+} from "../__chunks/G4QRTAYK.js";
 import "../__chunks/ICL2YIES.js";
 import "../__chunks/M5KYRTQG.js";
-import "../__chunks/LND6SMHN.js";
-import "../__chunks/M4OAD5XF.js";
+import "../__chunks/XBIFFFUN.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/collection/collection-provider.js

@@ -1,11 +1,11 @@
 import {
   useCollectionStore
-} from "../__chunks/NWDF5QDV.js";
+} from "../__chunks/C6MBVGZ2.js";
 import {
   CollectionContextProvider
 } from "../__chunks/74KKBFVP.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/collection/collection-renderer.js

@@ -3,10 +3,10 @@ import {
   getCollectionRendererItem,
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "../__chunks/3HFOFZP4.js";
+} from "../__chunks/2EIZAZYB.js";
 import "../__chunks/74KKBFVP.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/collection/collection-store.js

@@ -1,8 +1,8 @@
 import {
   useCollectionStore,
   useCollectionStoreProps
-} from "../__chunks/NWDF5QDV.js";
-import "../__chunks/XXO3VVQU.js";
+} from "../__chunks/C6MBVGZ2.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/collection/collection.d.ts

@@ -35,7 +35,11 @@ export declare const useCollection: import("../utils/types.js").Hook<CollectionO
 export declare const Collection: import("../utils/types.js").Component<CollectionOptions<"div">>;
 export interface CollectionOptions<T extends As = "div"> extends Options<T> {
     /**
-     * Object returned by the `useCollectionStore` hook.
+     * Object returned by the
+     * [`useCollectionStore`](https://ariakit.org/reference/use-collection-store)
+     * hook. If not provided, the closest
+     * [`CollectionProvider`](https://ariakit.org/reference/collection-provider)
+     * component's context will be used.
      */
     store?: CollectionStore;
 }

package/esm/combobox/combobox-cancel.d.ts

@@ -19,20 +19,25 @@ export declare const useComboboxCancel: import("../utils/types.js").Hook<Combobo
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxCancel store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxItem value="Item 1" />
- *   <ComboboxItem value="Item 2" />
- *   <ComboboxItem value="Item 3" />
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxCancel />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxCancel: import("../utils/types.js").Component<ComboboxCancelOptions<"button">>;
 export interface ComboboxCancelOptions<T extends As = "button"> extends ButtonOptions<T> {
     /**
-     * Object returned by the `useComboboxStore` hook.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the closest
+     * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
+     * component's context will be used.
      */
     store?: ComboboxStore;
 }

package/esm/combobox/combobox-cancel.js

@@ -1,16 +1,16 @@
 import {
   useButton
-} from "../__chunks/QPWEKAWF.js";
+} from "../__chunks/D2BRO4YW.js";
 import {
   useComboboxProviderContext
 } from "../__chunks/QP4RN5UY.js";
-import "../__chunks/LND6SMHN.js";
+import "../__chunks/XBIFFFUN.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
 import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
-import "../__chunks/M4OAD5XF.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createComponent,

package/esm/combobox/combobox-disclosure.d.ts

@@ -25,20 +25,25 @@ export declare const useComboboxDisclosure: import("../utils/types.js").Hook<Com
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxDisclosure store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxItem value="Item 1" />
- *   <ComboboxItem value="Item 2" />
- *   <ComboboxItem value="Item 3" />
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxDisclosure />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxDisclosure: import("../utils/types.js").Component<ComboboxDisclosureOptions<"button">>;
 export interface ComboboxDisclosureOptions<T extends As = "button"> extends DialogDisclosureOptions<T> {
     /**
-     * Object returned by the `useComboboxStore` hook.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the closest
+     * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
+     * component's context will be used.
      */
     store?: ComboboxStore;
 }

package/esm/combobox/combobox-disclosure.js

@@ -1,18 +1,18 @@
 import {
   useDialogDisclosure
-} from "../__chunks/TQ2YQL6O.js";
-import "../__chunks/7AFOF5E7.js";
-import "../__chunks/QPWEKAWF.js";
+} from "../__chunks/3HY5ZQT3.js";
+import "../__chunks/R6PKH666.js";
+import "../__chunks/D2BRO4YW.js";
 import {
   useComboboxProviderContext
 } from "../__chunks/QP4RN5UY.js";
-import "../__chunks/LND6SMHN.js";
+import "../__chunks/XBIFFFUN.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
 import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
-import "../__chunks/M4OAD5XF.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createComponent,

package/esm/combobox/combobox-group-label.d.ts

@@ -21,22 +21,27 @@ export declare const useComboboxGroupLabel: import("../utils/types.js").Hook<Com
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxGroup>
- *     <ComboboxGroupLabel>Label</ComboboxGroupLabel>
- *     <ComboboxItem value="Item 1" />
- *     <ComboboxItem value="Item 2" />
- *   </ComboboxGroup>
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxGroup>
+ *       <ComboboxGroupLabel>Fruits</ComboboxGroupLabel>
+ *       <ComboboxItem value="Apple" />
+ *       <ComboboxItem value="Banana" />
+ *     </ComboboxGroup>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxGroupLabel: import("../utils/types.js").Component<ComboboxGroupLabelOptions<"div">>;
 export interface ComboboxGroupLabelOptions<T extends As = "div"> extends CompositeGroupLabelOptions<T> {
     /**
-     * Object returned by the `useComboboxStore` hook. If not provided, the parent
-     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
      */
     store?: ComboboxStore;
 }