@ariakit/react-core 0.2.8 → 0.2.9

package/esm/__chunks/{ZAKCZSVG.js → 7MJF27QJ.js}

@@ -10,7 +10,7 @@ import {
 } from "./Z3X3QN6P.js";
 import {
   useFocusable
-} from "./OMYYUT2M.js";
+} from "./YNUPNUID.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{265D6T7T.js → CYJJUQU3.js}

@@ -1,6 +1,9 @@
+import {
+  isBackdrop
+} from "./IXXFVVA2.js";
 import {
   setAttribute
-} from "./T6V23Y6E.js";
+} from "./FW6QFGFT.js";
 import {
   walkTreeOutside
 } from "./FV23EKJL.js";
@@ -11,7 +14,10 @@ function hideElementFromAccessibilityTree(element) {
 }
 function disableAccessibilityTreeOutside(...elements) {
   const cleanups = [];
+  const ids = elements.map((el) => el == null ? void 0 : el.id);
   walkTreeOutside(elements, (element) => {
+    if (isBackdrop(element, ...ids))
+      return;
     cleanups.unshift(hideElementFromAccessibilityTree(element));
   });
   const restoreAccessibilityTree = () => {

package/esm/__chunks/{WANT555J.js → EUD77B6Z.js}

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

package/esm/__chunks/{T6V23Y6E.js → FW6QFGFT.js}

@@ -1,10 +1,10 @@
 // src/dialog/utils/orchestrate.ts
-var cleanups = Symbol();
+var cleanups = /* @__PURE__ */ new WeakMap();
 function orchestrate(element, key, setup) {
-  if (!element[cleanups]) {
-    element[cleanups] = /* @__PURE__ */ new Map();
+  if (!cleanups.has(element)) {
+    cleanups.set(element, /* @__PURE__ */ new Map());
   }
-  const elementCleanups = element[cleanups];
+  const elementCleanups = cleanups.get(element);
   const prevCleanup = elementCleanups.get(key);
   if (!prevCleanup) {
     elementCleanups.set(key, setup());
@@ -22,7 +22,8 @@ function orchestrate(element, key, setup) {
   };
   elementCleanups.set(key, nextCleanup);
   return () => {
-    if (elementCleanups.get(key) !== nextCleanup)
+    const isCurrent = elementCleanups.get(key) === nextCleanup;
+    if (!isCurrent)
       return;
     cleanup();
     elementCleanups.set(key, prevCleanup);

package/esm/__chunks/{ITSGLTHL.js → FYZCYWPI.js}

@@ -3,7 +3,7 @@ import {
 } from "./M5KYRTQG.js";
 import {
   useCommand
-} from "./6R5NAG5K.js";
+} from "./WQIYBPAY.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{6P5ZHMMU.js → GMDF663U.js}

@@ -7,7 +7,7 @@ import {
 } from "./ZSRI7KJ2.js";
 import {
   useComposite
-} from "./ZAKCZSVG.js";
+} from "./7MJF27QJ.js";
 import {
   isHidden
 } from "./WFPVIVLA.js";

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

@@ -1,6 +1,9 @@
+import {
+  isBackdrop
+} from "./IXXFVVA2.js";
 import {
   setProperty
-} from "./T6V23Y6E.js";
+} from "./FW6QFGFT.js";
 import {
   walkTreeOutside
 } from "./FV23EKJL.js";
@@ -37,9 +40,14 @@ function isElementMarked(element, id) {
 }
 function markTreeOutside(dialogId, ...elements) {
   const cleanups = [];
+  const ids = elements.map((el) => el == null ? void 0 : el.id);
   walkTreeOutside(
     elements,
-    (element) => cleanups.unshift(markElement(element, dialogId)),
+    (element) => {
+      if (isBackdrop(element, ...ids))
+        return;
+      cleanups.unshift(markElement(element, dialogId));
+    },
     (ancestor) => cleanups.unshift(markAncestor(ancestor, dialogId))
   );
   const restoreAccessibilityTree = () => {

package/esm/__chunks/{VC2N3HOU.js → HNO7M6GL.js}

@@ -10,7 +10,7 @@ import {
 } from "./VTOOL4S4.js";
 import {
   useCompositeItem
-} from "./WKNIYKJV.js";
+} from "./OUTTLNN7.js";
 import {
   createElement,
   createHook,

package/esm/__chunks/IXXFVVA2.js

@@ -0,0 +1,19 @@
+// src/dialog/utils/is-backdrop.ts
+function isBackdrop(element, ...ids) {
+  if (!element)
+    return false;
+  const backdrop = element.getAttribute("data-backdrop");
+  if (backdrop == null)
+    return false;
+  if (backdrop === "")
+    return true;
+  if (backdrop === "true")
+    return true;
+  if (!ids.length)
+    return true;
+  return ids.some((id) => backdrop === id);
+}
+
+export {
+  isBackdrop
+};

package/esm/__chunks/{YKJNQJWA.js → KF3PP2P3.js}

@@ -1,6 +1,6 @@
 import {
   useDisclosure
-} from "./THTPXSX5.js";
+} from "./OTMCQXXR.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{QTOJ32BQ.js → LIFXUQPU.js}

@@ -1,12 +1,15 @@
 import {
   markAncestor
-} from "./TJKNVC7W.js";
+} from "./HCZMY53N.js";
 import {
   Role
 } from "./TZIIKRHF.js";
 import {
   useDisclosureContent
 } from "./WFPVIVLA.js";
+import {
+  useDisclosureStore
+} from "./2XOPWNSQ.js";
 import {
   useMergeRefs,
   useSafeLayoutEffect
@@ -17,8 +20,7 @@ import {
 } from "./4BKCJXBM.js";
 
 // src/dialog/dialog-backdrop.tsx
-import { isValidElement, useMemo, useRef } from "react";
-import { noop } from "@ariakit/core/utils/misc";
+import { isValidElement, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 function DialogBackdrop({
   store,
@@ -28,14 +30,7 @@ function DialogBackdrop({
   hidden
 }) {
   const ref = useRef(null);
-  store = useMemo(
-    () => __spreadProps(__spreadValues({}, store), {
-      // Override the setContentElement method to prevent the backdrop from
-      // overwriting the dialog's content element. TODO: Refactor this.
-      setContentElement: noop
-    }),
-    [store]
-  );
+  const disclosure = useDisclosureStore({ disclosure: store });
   const contentElement = store.useState("contentElement");
   useSafeLayoutEffect(() => {
     const backdrop2 = ref.current;
@@ -59,8 +54,7 @@ function DialogBackdrop({
     backdropProps = __spreadProps(__spreadValues({}, backdropProps), { hidden });
   }
   const props = useDisclosureContent(__spreadProps(__spreadValues({
-    store,
-    id: void 0,
+    store: disclosure,
     role: "presentation",
     "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "",
     alwaysVisible

package/esm/__chunks/{DCSOYJXT.js → MO5Q5FB7.js}

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

package/esm/__chunks/{JTITB4L3.js → N36XUJ4I.js}

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

package/esm/__chunks/{THTPXSX5.js → OTMCQXXR.js}

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

package/esm/__chunks/{WKNIYKJV.js → OUTTLNN7.js}

@@ -1,6 +1,6 @@
 import {
   useCommand
-} from "./6R5NAG5K.js";
+} from "./WQIYBPAY.js";
 import {
   useCollectionItem
 } from "./EJLZ2L22.js";

package/esm/__chunks/PYB45PRS.js

@@ -0,0 +1,46 @@
+import {
+  useForceUpdate
+} from "./SN2N5P2D.js";
+
+// src/dialog/utils/use-root-dialog.ts
+import { useCallback, useEffect } from "react";
+import { getDocument } from "@ariakit/core/utils/dom";
+import { flushSync } from "react-dom";
+function useRootDialog({
+  attribute,
+  contentId,
+  contentElement,
+  enabled
+}) {
+  const [updated, retry] = useForceUpdate();
+  const isRootDialog = useCallback(() => {
+    if (!enabled)
+      return false;
+    if (!contentElement)
+      return false;
+    const { body } = getDocument(contentElement);
+    const id = body.getAttribute(attribute);
+    return !id || id === contentId;
+  }, [updated, enabled, contentElement, attribute, contentId]);
+  useEffect(() => {
+    if (!enabled)
+      return;
+    if (!contentId)
+      return;
+    if (!contentElement)
+      return;
+    const { body } = getDocument(contentElement);
+    if (isRootDialog()) {
+      body.setAttribute(attribute, contentId);
+      return () => body.removeAttribute(attribute);
+    }
+    const observer = new MutationObserver(() => flushSync(retry));
+    observer.observe(body, { attributeFilter: [attribute] });
+    return () => observer.disconnect();
+  }, [updated, enabled, contentId, contentElement, isRootDialog, attribute]);
+  return isRootDialog;
+}
+
+export {
+  useRootDialog
+};

package/esm/__chunks/{FB4T6LXQ.js → Q6CBZJ7X.js}

@@ -1,6 +1,6 @@
 import {
   useCompositeItem
-} from "./WKNIYKJV.js";
+} from "./OUTTLNN7.js";
 import {
   createElement,
   createHook,

package/esm/__chunks/{CKSO3V6B.js → QLHUIPVK.js}

@@ -1,14 +1,17 @@
 import {
   hideElementFromAccessibilityTree
-} from "./265D6T7T.js";
+} from "./CYJJUQU3.js";
 import {
   supportsInert
 } from "./KOVUJERF.js";
+import {
+  isBackdrop
+} from "./IXXFVVA2.js";
 import {
   assignStyle,
   setAttribute,
   setProperty
-} from "./T6V23Y6E.js";
+} from "./FW6QFGFT.js";
 import {
   walkTreeOutside
 } from "./FV23EKJL.js";
@@ -34,6 +37,7 @@ function disableElement(element) {
 }
 function disableTreeOutside(...elements) {
   const cleanups = [];
+  const ids = elements.map((el) => el == null ? void 0 : el.id);
   if (!supportsInert()) {
     getAllTabbable().forEach((element) => {
       if (elements.some((el) => el && contains(el, element)))
@@ -42,6 +46,8 @@ function disableTreeOutside(...elements) {
     });
   }
   walkTreeOutside(elements, (element) => {
+    if (isBackdrop(element, ...ids))
+      return;
     cleanups.unshift(disableElement(element));
   });
   const restoreTreeOutside = () => {

package/esm/__chunks/{5EHZOHU4.js → QTPMBYCP.js}

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

package/esm/__chunks/{MCW3SATG.js → RU5SBKR3.js}

@@ -1,12 +1,13 @@
 import {
   assignStyle,
   setCSSProperty
-} from "./T6V23Y6E.js";
+} from "./FW6QFGFT.js";
 import {
-  useSafeLayoutEffect
-} from "./SN2N5P2D.js";
+  useRootDialog
+} from "./PYB45PRS.js";
 
 // src/dialog/utils/use-prevent-body-scroll.ts
+import { useEffect } from "react";
 import { getDocument, getWindow } from "@ariakit/core/utils/dom";
 import { chain } from "@ariakit/core/utils/misc";
 import { isApple, isMac } from "@ariakit/core/utils/platform";
@@ -15,11 +16,18 @@ function getPaddingProperty(documentElement) {
   const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft;
   return scrollbarX ? "paddingLeft" : "paddingRight";
 }
-function usePreventBodyScroll(store, enabled) {
-  useSafeLayoutEffect(() => {
-    if (!enabled)
+function usePreventBodyScroll(contentElement, contentId, enabled) {
+  const isRootDialog = useRootDialog({
+    attribute: "data-dialog-prevent-body-scroll",
+    contentElement,
+    contentId,
+    enabled
+  });
+  useEffect(() => {
+    if (!isRootDialog())
+      return;
+    if (!contentElement)
       return;
-    const { contentElement } = store.getState();
     const doc = getDocument(contentElement);
     const win = getWindow(contentElement);
     const { documentElement, body } = doc;
@@ -60,7 +68,7 @@ function usePreventBodyScroll(store, enabled) {
       setScrollbarWidthProperty(),
       isIOS ? setIOSStyle() : setStyle()
     );
-  }, [enabled]);
+  }, [isRootDialog, contentElement]);
 }
 
 export {

package/esm/__chunks/{B4DAIM7E.js → TQ2K6WFI.js}

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

package/esm/__chunks/{MQRO7CTY.js → UYTR2SZP.js}

@@ -6,7 +6,7 @@ import {
 } from "./EEVSGAZW.js";
 import {
   useComposite
-} from "./ZAKCZSVG.js";
+} from "./7MJF27QJ.js";
 import {
   isHidden
 } from "./WFPVIVLA.js";

package/esm/__chunks/{RJWQJQSA.js → VSM5JGQO.js}

@@ -1,6 +1,6 @@
 import {
   usePopoverDismiss
-} from "./DCSOYJXT.js";
+} from "./MO5Q5FB7.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{PZMNV3SF.js → VV72RDTD.js}

@@ -1,9 +1,9 @@
-import {
-  isElementMarked
-} from "./TJKNVC7W.js";
 import {
   usePreviousMouseDownRef
 } from "./7JNF6I52.js";
+import {
+  isElementMarked
+} from "./HCZMY53N.js";
 import {
   useEvent
 } from "./SN2N5P2D.js";

package/esm/__chunks/{6R5NAG5K.js → WQIYBPAY.js}

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

package/esm/__chunks/{4E4RWZ6B.js → XECTFJQS.js}

@@ -1,28 +1,28 @@
 import {
   DialogBackdrop
-} from "./QTOJ32BQ.js";
+} from "./LIFXUQPU.js";
 import {
   disableTreeOutside
-} from "./CKSO3V6B.js";
+} from "./QLHUIPVK.js";
 import {
   disableAccessibilityTreeOutside
-} from "./265D6T7T.js";
+} from "./CYJJUQU3.js";
 import {
   usePreventBodyScroll
-} from "./MCW3SATG.js";
+} from "./RU5SBKR3.js";
 import {
   useNestedDialogs
 } from "./J4BKICPJ.js";
 import {
   useHideOnInteractOutside
-} from "./PZMNV3SF.js";
+} from "./VV72RDTD.js";
 import {
   prependHiddenDismiss
 } from "./62DFK33R.js";
 import {
   isElementMarked,
   markTreeOutside
-} from "./TJKNVC7W.js";
+} from "./HCZMY53N.js";
 import {
   useFocusableContainer
 } from "./GKH7N3JM.js";
@@ -43,7 +43,7 @@ import {
 } from "./WFPVIVLA.js";
 import {
   useFocusable
-} from "./OMYYUT2M.js";
+} from "./YNUPNUID.js";
 import {
   createComponent,
   createElement,
@@ -140,10 +140,7 @@ var useDialog = createHook(
       "finalFocus"
     ]);
     const ref = useRef(null);
-    const { portalRef, portalNode, domReady } = usePortalRef(
-      portal,
-      props.portalRef
-    );
+    const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
     const preserveTabOrderProp = props.preserveTabOrder;
     const preserveTabOrder = store.useState(
       (state) => preserveTabOrderProp && !modal && state.mounted
@@ -153,7 +150,7 @@ var useDialog = createHook(
     const mounted = store.useState("mounted");
     const contentElement = store.useState("contentElement");
     const hidden = isHidden(mounted, props.hidden, props.alwaysVisible);
-    usePreventBodyScroll(store, preventBodyScroll && !hidden);
+    usePreventBodyScroll(contentElement, id, preventBodyScroll && !hidden);
     useHideOnInteractOutside(store, hideOnInteractOutside);
     const { wrapElement, nestedDialogs } = useNestedDialogs(store);
     props = useWrapElement(props, wrapElement, [wrapElement]);
@@ -222,6 +219,8 @@ var useDialog = createHook(
     }, [mounted, domReady, shouldDisableAccessibilityTree]);
     const getPersistentElementsProp = useEvent(getPersistentElements);
     useSafeLayoutEffect(() => {
+      if (!domReady)
+        return;
       if (!id)
         return;
       if (!open)
@@ -230,14 +229,8 @@ var useDialog = createHook(
       const dialog = ref.current;
       const persistentElements = getPersistentElementsProp() || [];
       const allElements = [
-        // In addition to the dialog element, we also include the portal node
-        // here so nested dialogs are considered as well.
         dialog,
-        portalNode,
         ...persistentElements,
-        // We still need to include nested dialogs here because they may be
-        // outside the portal node or the parent dialog may not be using a
-        // portal.
         ...nestedDialogs.map((dialog2) => dialog2.getState().contentElement)
       ];
       if (!shouldDisableAccessibilityTree) {
@@ -254,13 +247,12 @@ var useDialog = createHook(
         disableAccessibilityTreeOutside(...allElements)
       );
     }, [
+      domReady,
       id,
       open,
       store,
-      portal,
-      portalNode,
-      nestedDialogs,
       getPersistentElementsProp,
+      nestedDialogs,
       shouldDisableAccessibilityTree,
       modal
     ]);
@@ -407,22 +399,21 @@ var useDialog = createHook(
     props = useWrapElement(
       props,
       (element) => {
-        if (backdrop) {
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            backdrop && /* @__PURE__ */ jsx(
-              DialogBackdrop,
-              {
-                store,
-                backdrop,
-                backdropProps,
-                hidden: hiddenProp,
-                alwaysVisible
-              }
-            ),
-            element
-          ] });
-        }
-        return element;
+        if (!backdrop)
+          return element;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            DialogBackdrop,
+            {
+              store,
+              backdrop,
+              backdropProps,
+              hidden: hiddenProp,
+              alwaysVisible
+            }
+          ),
+          element
+        ] });
       },
       [store, backdrop, backdropProps, hiddenProp, alwaysVisible]
     );

package/esm/__chunks/{ZNCBVBWF.js → XJM2RD5W.js}

@@ -1,6 +1,6 @@
 import {
   useDialog
-} from "./4E4RWZ6B.js";
+} from "./XECTFJQS.js";
 import {
   PopoverContext
 } from "./6GS36SYX.js";

package/esm/__chunks/{OMYYUT2M.js → YNUPNUID.js}

@@ -232,7 +232,7 @@ var useFocusable = createHook(
         receivedFocus = true;
       };
       const options = { capture: true, once: true };
-      document.body.addEventListener("focusin", onFocus, options);
+      element.addEventListener("focusin", onFocus, options);
       queueBeforeEvent(element, "mouseup", () => {
         element.removeEventListener("focusin", onFocus, true);
         if (receivedFocus)

package/esm/button/button.js

@@ -1,9 +1,9 @@
 import {
   Button,
   useButton
-} from "../__chunks/WANT555J.js";
-import "../__chunks/6R5NAG5K.js";
-import "../__chunks/OMYYUT2M.js";
+} from "../__chunks/EUD77B6Z.js";
+import "../__chunks/WQIYBPAY.js";
+import "../__chunks/YNUPNUID.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/7GCARSHZ.js";
 import "../__chunks/SN2N5P2D.js";

package/esm/checkbox/checkbox.js

@@ -1,10 +1,10 @@
 import {
   Checkbox,
   useCheckbox
-} from "../__chunks/ITSGLTHL.js";
+} from "../__chunks/FYZCYWPI.js";
 import "../__chunks/M5KYRTQG.js";
-import "../__chunks/6R5NAG5K.js";
-import "../__chunks/OMYYUT2M.js";
+import "../__chunks/WQIYBPAY.js";
+import "../__chunks/YNUPNUID.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/7GCARSHZ.js";
 import "../__chunks/USB5JBON.js";

package/esm/combobox/combobox-cancel.js

@@ -1,8 +1,8 @@
 import {
   useButton
-} from "../__chunks/WANT555J.js";
-import "../__chunks/6R5NAG5K.js";
-import "../__chunks/OMYYUT2M.js";
+} from "../__chunks/EUD77B6Z.js";
+import "../__chunks/WQIYBPAY.js";
+import "../__chunks/YNUPNUID.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createComponent,

package/esm/combobox/combobox-disclosure.js

@@ -1,10 +1,10 @@
 import {
   useDialogDisclosure
-} from "../__chunks/YKJNQJWA.js";
-import "../__chunks/THTPXSX5.js";
-import "../__chunks/WANT555J.js";
-import "../__chunks/6R5NAG5K.js";
-import "../__chunks/OMYYUT2M.js";
+} from "../__chunks/KF3PP2P3.js";
+import "../__chunks/OTMCQXXR.js";
+import "../__chunks/EUD77B6Z.js";
+import "../__chunks/WQIYBPAY.js";
+import "../__chunks/YNUPNUID.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createComponent,