@ariakit/react-core 0.2.14 → 0.2.16

package/esm/__chunks/{FV23EKJL.js → 5M4ITSXL.js}

@@ -20,12 +20,13 @@ function walkTreeOutside(elements, callback, ancestorCallback) {
       return maybeAncestor.contains(element);
     });
     const doc = getDocument(element);
+    const originalElement = element;
     while (element.parentElement && element !== doc.body) {
-      ancestorCallback == null ? void 0 : ancestorCallback(element.parentElement);
+      ancestorCallback == null ? void 0 : ancestorCallback(element.parentElement, originalElement);
       if (!hasAncestorAlready) {
         for (const child of element.parentElement.children) {
           if (isValidElement(child, elements)) {
-            callback(child);
+            callback(child, originalElement);
           }
         }
       }

package/esm/__chunks/{6RR2HJXR.js → 5PDNXTAR.js}

@@ -7,7 +7,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./OOWNFOTF.js";
+} from "./QPTZ2G2N.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/__chunks/{QHXLY5NM.js → 5QHNNZNE.js}

@@ -3,7 +3,7 @@ import {
 } from "./P3I4MECH.js";
 import {
   useCollectionItem
-} from "./HGFTMLQ7.js";
+} from "./VFNGSUSF.js";
 import {
   createElement,
   createHook,

package/esm/__chunks/{WEWVELT3.js → 6F6CCCKT.js}

@@ -18,7 +18,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./OOWNFOTF.js";
+} from "./QPTZ2G2N.js";
 import {
   useEvent,
   useId,

package/esm/__chunks/{DCG3EYDE.js → 7SIWUER2.js}

@@ -3,7 +3,7 @@ import {
 } from "./P4RGQGTG.js";
 import {
   useCollectionItem
-} from "./HGFTMLQ7.js";
+} from "./VFNGSUSF.js";
 import {
   focusSilently,
   getEnabledItem,
@@ -21,7 +21,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./OOWNFOTF.js";
+} from "./QPTZ2G2N.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/__chunks/{F6KX6FT7.js → CEBWVZJQ.js}

@@ -1,7 +1,7 @@
 import {
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "./6RR2HJXR.js";
+} from "./5PDNXTAR.js";
 import {
   CompositeContext
 } from "./WJ37OVG2.js";
@@ -11,7 +11,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./OOWNFOTF.js";
+} from "./QPTZ2G2N.js";
 import {
   useId
 } from "./J7Q2EO23.js";

package/esm/__chunks/{DIA4OBYO.js → CU3AKJBN.js}

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

package/esm/__chunks/{5TTSBUCW.js → CYNFBMYS.js}

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

package/esm/__chunks/{4XWTU3WN.js → E5XSMSHD.js}

@@ -1,11 +1,12 @@
 import {
   isElementMarked
-} from "./HCZMY53N.js";
+} from "./LEBYH5FW.js";
 import {
   usePreviousMouseDownRef
 } from "./7JNF6I52.js";
 import {
-  useEvent
+  useEvent,
+  useSafeLayoutEffect
 } from "./J7Q2EO23.js";
 import {
   __spreadProps,
@@ -13,7 +14,7 @@ import {
 } from "./PNRLI7OV.js";
 
 // src/dialog/utils/use-hide-on-interact-outside.ts
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { contains, getDocument, isVisible } from "@ariakit/core/utils/dom";
 import { addGlobalEventListener } from "@ariakit/core/utils/events";
 function isInDocument(target) {
@@ -47,10 +48,26 @@ function useEventOutside({
   store,
   type,
   listener,
-  capture
+  capture,
+  domReady
 }) {
   const callListener = useEvent(listener);
   const open = store.useState("open");
+  const focusedRef = useRef(false);
+  useSafeLayoutEffect(() => {
+    if (!open)
+      return;
+    if (!domReady)
+      return;
+    const { contentElement } = store.getState();
+    if (!contentElement)
+      return;
+    const onFocus = () => {
+      focusedRef.current = true;
+    };
+    contentElement.addEventListener("focusin", onFocus, true);
+    return () => contentElement.removeEventListener("focusin", onFocus, true);
+  }, [store, open, domReady]);
   useEffect(() => {
     if (!open)
       return;
@@ -71,7 +88,8 @@ function useEventOutside({
         return;
       if (isMouseEventOnDialog(event, contentElement))
         return;
-      if (!isElementMarked(target, contentElement.id))
+      const focused = focusedRef.current;
+      if (focused && !isElementMarked(target, contentElement.id))
         return;
       callListener(event);
     };
@@ -84,10 +102,10 @@ function shouldHideOnInteractOutside(hideOnInteractOutside, event) {
   }
   return !!hideOnInteractOutside;
 }
-function useHideOnInteractOutside(store, hideOnInteractOutside) {
+function useHideOnInteractOutside(store, hideOnInteractOutside, domReady) {
   const open = store.useState("open");
   const previousMouseDownRef = usePreviousMouseDownRef(open);
-  const props = { store, capture: true };
+  const props = { store, domReady, capture: true };
   useEventOutside(__spreadProps(__spreadValues({}, props), {
     type: "click",
     listener: (event) => {

package/esm/__chunks/{6RGH36XF.js → EICJBDBV.js}

@@ -1,11 +1,11 @@
 import {
   useDialogStoreOptions,
   useDialogStoreProps
-} from "./LUUMYNYQ.js";
+} from "./FW5SU7FV.js";
 import {
   useStore,
   useStoreProps
-} from "./OOWNFOTF.js";
+} from "./QPTZ2G2N.js";
 import {
   __spreadValues
 } from "./PNRLI7OV.js";

package/esm/__chunks/{WVP274TO.js → F6PEGR7W.js}

@@ -1,7 +1,7 @@
 import {
   useStore,
   useStoreProps
-} from "./OOWNFOTF.js";
+} from "./QPTZ2G2N.js";
 import {
   __spreadValues
 } from "./PNRLI7OV.js";

package/esm/__chunks/{WKNTOKYS.js → FSTINJD5.js}

@@ -1,7 +1,7 @@
 import {
   useStore,
   useStoreProps
-} from "./OOWNFOTF.js";
+} from "./QPTZ2G2N.js";
 import {
   __spreadValues
 } from "./PNRLI7OV.js";

package/esm/__chunks/{LUUMYNYQ.js → FW5SU7FV.js}

@@ -1,10 +1,10 @@
 import {
   useDisclosureStoreOptions,
   useDisclosureStoreProps
-} from "./WVP274TO.js";
+} from "./F6PEGR7W.js";
 import {
   useStore
-} from "./OOWNFOTF.js";
+} from "./QPTZ2G2N.js";
 import {
   __spreadValues
 } from "./PNRLI7OV.js";

package/esm/__chunks/{CYJJUQU3.js → GDORSOK6.js}

@@ -6,7 +6,7 @@ import {
 } from "./FW6QFGFT.js";
 import {
   walkTreeOutside
-} from "./FV23EKJL.js";
+} from "./5M4ITSXL.js";
 
 // src/dialog/utils/disable-accessibility-tree-outside.ts
 function hideElementFromAccessibilityTree(element) {

package/esm/__chunks/{HCTED3MY.js → JD3UVZX5.js}

@@ -1,6 +1,6 @@
 import {
   useCompositeItem
-} from "./DCG3EYDE.js";
+} from "./7SIWUER2.js";
 import {
   createElement,
   createHook,

package/esm/__chunks/{HCZMY53N.js → LEBYH5FW.js}

@@ -6,7 +6,7 @@ import {
 } from "./FW6QFGFT.js";
 import {
   walkTreeOutside
-} from "./FV23EKJL.js";
+} from "./5M4ITSXL.js";
 
 // src/dialog/utils/mark-tree-outside.ts
 import { chain } from "@ariakit/core/utils/misc";
@@ -15,12 +15,18 @@ function getPropertyName(id = "", ancestor = false) {
 }
 function markElement(element, id = "") {
   return chain(
+    // Debug
+    // setAttribute(element, getPropertyName(), "true"),
+    // setAttribute(element, getPropertyName(id), "true"),
     setProperty(element, getPropertyName(), true),
     setProperty(element, getPropertyName(id), true)
   );
 }
 function markAncestor(element, id = "") {
   return chain(
+    // Debug
+    // setAttribute(element, getPropertyName("", true), "true"),
+    // setAttribute(element, getPropertyName(id, true), "true"),
     setProperty(element, getPropertyName("", true), true),
     setProperty(element, getPropertyName(id, true), true)
   );
@@ -48,7 +54,12 @@ function markTreeOutside(dialogId, ...elements) {
         return;
       cleanups.unshift(markElement(element, dialogId));
     },
-    (ancestor) => cleanups.unshift(markAncestor(ancestor, dialogId))
+    (ancestor, element) => {
+      const isAnotherDialogAncestor = element.hasAttribute("data-dialog") && element.id !== dialogId;
+      if (isAnotherDialogAncestor)
+        return;
+      cleanups.unshift(markAncestor(ancestor, dialogId));
+    }
   );
   const restoreAccessibilityTree = () => {
     cleanups.forEach((fn) => fn());

package/esm/__chunks/{AR6DTI3S.js → NHPU54IO.js}

@@ -1,6 +1,6 @@
 import {
   hideElementFromAccessibilityTree
-} from "./CYJJUQU3.js";
+} from "./GDORSOK6.js";
 import {
   isBackdrop
 } from "./IXXFVVA2.js";
@@ -14,7 +14,7 @@ import {
 } from "./FW6QFGFT.js";
 import {
   walkTreeOutside
-} from "./FV23EKJL.js";
+} from "./5M4ITSXL.js";
 
 // src/dialog/utils/disable-tree-outside.ts
 import { contains } from "@ariakit/core/utils/dom";

package/esm/__chunks/{RH5PYIJN.js → ORZC42PG.js}

@@ -5,7 +5,7 @@ import {
 } from "./X7FKJQME.js";
 import {
   usePopover
-} from "./DIA4OBYO.js";
+} from "./CU3AKJBN.js";
 import {
   createComponent,
   createElement,
@@ -39,6 +39,7 @@ import { contains } from "@ariakit/core/utils/dom";
 import { addGlobalEventListener } from "@ariakit/core/utils/events";
 import { hasFocusWithin } from "@ariakit/core/utils/focus";
 import { chain, isFalsyBooleanCallback } from "@ariakit/core/utils/misc";
+import { sync } from "@ariakit/core/utils/store";
 import { jsx } from "react/jsx-runtime";
 function isMovingOnHovercard(target, card, anchor, nested) {
   if (hasFocusWithin(card))
@@ -95,12 +96,9 @@ function useAutoFocusOnHide(_a) {
   });
   const finalFocusRef = useRef(null);
   useEffect(() => {
-    return store.sync(
-      (state) => {
-        finalFocusRef.current = state.anchorElement;
-      },
-      ["anchorElement"]
-    );
+    return sync(store, ["anchorElement"], (state) => {
+      finalFocusRef.current = state.anchorElement;
+    });
   }, []);
   props = __spreadProps(__spreadValues({
     autoFocusOnHide,

package/esm/__chunks/{OEA63YXU.js → PLOINBVB.js}

@@ -11,6 +11,7 @@ import {
   useState
 } from "react";
 import { chain } from "@ariakit/core/utils/misc";
+import { sync } from "@ariakit/core/utils/store";
 import { jsx } from "react/jsx-runtime";
 var NestedDialogsContext = createContext({});
 function useNestedDialogs(store) {
@@ -27,28 +28,21 @@ function useNestedDialogs(store) {
     [context]
   );
   useSafeLayoutEffect(() => {
-    return store.sync(
-      (state) => {
-        var _a;
-        if (!state.open)
-          return;
-        if (!state.contentElement)
-          return;
-        return (_a = context.add) == null ? void 0 : _a.call(context, store);
-      },
-      ["open", "contentElement"]
-    );
+    return sync(store, ["open", "contentElement"], (state) => {
+      var _a;
+      if (!state.open)
+        return;
+      if (!state.contentElement)
+        return;
+      return (_a = context.add) == null ? void 0 : _a.call(context, store);
+    });
   }, [store, context]);
   useSafeLayoutEffect(() => {
-    var _a;
-    return (_a = context.store) == null ? void 0 : _a.sync(
-      (state) => {
-        if (state.open)
-          return;
-        store.hide();
-      },
-      ["open"]
-    );
+    return sync(context.store, ["open"], (state) => {
+      if (state.open)
+        return;
+      store.hide();
+    });
   }, [context, store]);
   const providerValue = useMemo(() => ({ store, add }), [store, add]);
   const wrapElement = useCallback(

package/esm/__chunks/{VKYM5S67.js → Q52PUUUL.js}

@@ -11,7 +11,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./OOWNFOTF.js";
+} from "./QPTZ2G2N.js";
 import {
   useEvent,
   useMergeRefs

package/esm/__chunks/{HWFO52CA.js → QJUX534W.js}

@@ -3,7 +3,7 @@ import {
 } from "./6I2PARRP.js";
 import {
   useCompositeItem
-} from "./DCG3EYDE.js";
+} from "./7SIWUER2.js";
 import {
   createElement,
   createHook,
@@ -11,7 +11,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./OOWNFOTF.js";
+} from "./QPTZ2G2N.js";
 import {
   useEvent,
   useId,

package/esm/__chunks/{OOWNFOTF.js → QPTZ2G2N.js}

@@ -9,13 +9,44 @@ import {
 } from "./PNRLI7OV.js";
 
 // src/utils/store.tsx
-import { useCallback, useMemo } from "react";
+import * as React from "react";
 import { hasOwnProperty, identity } from "@ariakit/core/utils/misc";
+import { batch, init, subscribe, sync } from "@ariakit/core/utils/store";
 import { flushSync } from "react-dom";
 import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 var noopSubscribe = () => () => {
 };
+var inFlushSyncContext = false;
+function safeFlushSync(fn, canFlushSync = true) {
+  if (inFlushSyncContext || !canFlushSync) {
+    fn();
+    return;
+  }
+  inFlushSyncContext = true;
+  const originalError = console.error;
+  if (process.env.NODE_ENV !== "production") {
+    console.error = (msg) => {
+      if (msg.startsWith("Warning: flushSync"))
+        return;
+      originalError(msg);
+    };
+  }
+  try {
+    flushSync(fn);
+  } finally {
+    console.error = originalError;
+    inFlushSyncContext = false;
+  }
+}
 function useStoreState(store, keyOrSelector = identity) {
+  const storeSubscribe = React.useCallback(
+    (callback) => {
+      if (!store)
+        return noopSubscribe();
+      return subscribe(store, null, callback);
+    },
+    [store]
+  );
   const getSnapshot = () => {
     if (!store)
       return;
@@ -30,11 +61,7 @@ function useStoreState(store, keyOrSelector = identity) {
       return;
     return state[key];
   };
-  return useSyncExternalStore(
-    (store == null ? void 0 : store.subscribe) || noopSubscribe,
-    getSnapshot,
-    getSnapshot
-  );
+  return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot);
 }
 function useStoreProps(store, props, key, setKey) {
   const value = hasOwnProperty(props, key) ? props[key] : void 0;
@@ -47,40 +74,36 @@ function useStoreProps(store, props, key, setKey) {
     queueMicrotask(() => {
       canFlushSync = true;
     });
-    return store.sync(
-      (state, prev) => {
-        const { value: value2, setValue } = propsRef.current;
-        if (!setValue)
-          return;
-        if (state[key] === prev[key])
-          return;
-        if (state[key] === value2)
-          return;
-        if (canFlushSync) {
-          flushSync(() => setValue(state[key]));
-        } else {
-          setValue(state[key]);
-        }
-      },
-      [key]
-    );
+    return sync(store, [key], (state, prev) => {
+      const { value: value2, setValue } = propsRef.current;
+      if (!setValue)
+        return;
+      if (state[key] === prev[key])
+        return;
+      if (state[key] === value2)
+        return;
+      safeFlushSync(() => setValue(state[key]), canFlushSync);
+    });
   }, [store, key]);
   useSafeLayoutEffect(() => {
-    return store.sync(() => {
+    return batch(store, [key], () => {
       if (value === void 0)
         return;
       store.setState(key, value);
-    }, [key]);
+    });
   }, [store, key, value]);
 }
 function useStore(createStore) {
   const store = useLazyValue(createStore);
-  useSafeLayoutEffect(() => store.init(), [store]);
-  const useState = useCallback(
+  useSafeLayoutEffect(() => init(store), [store]);
+  const useState = React.useCallback(
     (keyOrSelector) => useStoreState(store, keyOrSelector),
     [store]
   );
-  return useMemo(() => __spreadProps(__spreadValues({}, store), { useState }), [store, useState]);
+  return React.useMemo(
+    () => __spreadProps(__spreadValues({}, store), { useState }),
+    [store, useState]
+  );
 }
 
 export {

package/esm/__chunks/{NCSSU46J.js → R4VIEIUH.js}

@@ -11,7 +11,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./OOWNFOTF.js";
+} from "./QPTZ2G2N.js";
 import {
   useEvent,
   useMergeRefs,