@ariakit/react-core 0.3.2 → 0.3.4

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

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

package/esm/__chunks/{72OJKUSZ.js → IQXVWBXC.js}

@@ -1,6 +1,6 @@
 import {
   useCommand
-} from "./LND6SMHN.js";
+} from "./CAIAWNDV.js";
 import {
   useCollectionItem
 } from "./XIA3HAXM.js";
@@ -21,7 +21,7 @@ import {
 } from "./CFEUKV6C.js";
 import {
   useStoreState
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/__chunks/{UY3UQ4QI.js → IZFXPXHG.js}

@@ -1,9 +1,9 @@
 import {
   useDisclosureStoreProps
-} from "./A2ONBKVT.js";
+} from "./OD3JT64N.js";
 import {
   useStore
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 
 // src/dialog/dialog-store.ts
 import * as Core from "@ariakit/core/dialog/dialog-store";

package/esm/__chunks/{HGW6FZYU.js → J2AZPLFF.js}

@@ -6,7 +6,7 @@ import {
 } from "./M5KYRTQG.js";
 import {
   useCommand
-} from "./LND6SMHN.js";
+} from "./CAIAWNDV.js";
 import {
   createComponent,
   createElement,
@@ -14,7 +14,7 @@ import {
 } from "./CFEUKV6C.js";
 import {
   useStoreState
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useEvent,
   useMergeRefs,

package/esm/__chunks/{EKIHOHWR.js → JRZOTPWS.js}

@@ -10,7 +10,7 @@ import {
 } from "./XCH4OEEE.js";
 import {
   useCompositeItem
-} from "./72OJKUSZ.js";
+} from "./IQXVWBXC.js";
 import {
   createElement,
   createHook,
@@ -18,7 +18,7 @@ import {
 } from "./CFEUKV6C.js";
 import {
   useStoreState
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useBooleanEvent,
   useEvent

package/esm/__chunks/{3D7ZB3CS.js → KK6NPMOP.js}

@@ -9,6 +9,9 @@ import {
   createElement,
   createHook
 } from "./CFEUKV6C.js";
+import {
+  useStoreState
+} from "./WHAB4XD6.js";
 import {
   useId,
   useMergeRefs,
@@ -121,12 +124,26 @@ var useDisclosureContent = createHook(
     return props;
   }
 );
-var DisclosureContent = createComponent(
+var DisclosureContentImpl = createComponent(
   (props) => {
     const htmlProps = useDisclosureContent(props);
     return createElement("div", htmlProps);
   }
 );
+var DisclosureContent = createComponent(
+  (_a) => {
+    var _b = _a, { unmountOnHide } = _b, props = __objRest(_b, ["unmountOnHide"]);
+    const context = useDisclosureProviderContext();
+    const store = props.store || context;
+    const mounted = useStoreState(
+      store,
+      (state) => !unmountOnHide || (state == null ? void 0 : state.mounted)
+    );
+    if (mounted === false)
+      return null;
+    return /* @__PURE__ */ jsx(DisclosureContentImpl, __spreadValues({}, props));
+  }
+);
 if (process.env.NODE_ENV !== "production") {
   DisclosureContent.displayName = "DisclosureContent";
 }

package/esm/__chunks/{54DCICBS.js → KXTLHNBI.js}

@@ -3,7 +3,7 @@ import {
 } from "./5DA3HK6G.js";
 import {
   useFocusable
-} from "./M4OAD5XF.js";
+} from "./YTHH33BK.js";
 import {
   createComponent,
   createElement,

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

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

package/esm/__chunks/{HZPJPDJY.js → LFLKMTFW.js}

@@ -1,10 +1,10 @@
 import {
   useHovercardStoreProps
-} from "./UQFOL5I6.js";
+} from "./6W46XYWY.js";
 import {
   useStore,
   useStoreProps
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 
 // src/tooltip/tooltip-store.ts
 import * as Core from "@ariakit/core/tooltip/tooltip-store";

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

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

package/esm/__chunks/{W575AF63.js → NXB7YL3C.js}

@@ -1,15 +1,15 @@
 import {
   markAncestor
-} from "./KGDYSCOM.js";
+} from "./FRKOFFMT.js";
 import {
   Role
 } from "./PGK6S5NC.js";
 import {
   useDisclosureContent
-} from "./3D7ZB3CS.js";
+} from "./KK6NPMOP.js";
 import {
   useDisclosureStore
-} from "./A2ONBKVT.js";
+} from "./OD3JT64N.js";
 import {
   useMergeRefs,
   useSafeLayoutEffect

package/esm/__chunks/{35WVCYXU.js → OAQFZVKH.js}

@@ -1,10 +1,10 @@
 import {
   useCompositeStoreProps
-} from "./WGAKICTY.js";
+} from "./WRZGD4DH.js";
 import {
   useStore,
   useStoreProps
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   __spreadProps,
   __spreadValues

package/esm/__chunks/{A2ONBKVT.js → OD3JT64N.js}

@@ -1,7 +1,7 @@
 import {
   useStore,
   useStoreProps
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useUpdateEffect
 } from "./J7Q2EO23.js";

package/esm/__chunks/{AYWP3ZW6.js → OQUFN5QO.js}

@@ -1,6 +1,6 @@
 import {
   usePopoverDismiss
-} from "./4JNX5L5C.js";
+} from "./WNHMGHG5.js";
 import {
   useHovercardScopedContext
 } from "./5DA3HK6G.js";

package/esm/__chunks/{H2BG4QDT.js → QTZ67ALK.js}

@@ -1,10 +1,10 @@
 import {
   useDialogStoreProps
-} from "./UY3UQ4QI.js";
+} from "./IZFXPXHG.js";
 import {
   useStore,
   useStoreProps
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useUpdateEffect
 } from "./J7Q2EO23.js";

package/esm/__chunks/{QPWEKAWF.js → TONP6TZ5.js}

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

package/esm/__chunks/{4RP654JS.js → UXIMR4AS.js}

@@ -1,25 +1,29 @@
 import {
   DialogBackdrop
-} from "./W575AF63.js";
+} from "./NXB7YL3C.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";
@@ -35,7 +39,7 @@ import {
 import {
   isHidden,
   useDisclosureContent
-} from "./3D7ZB3CS.js";
+} from "./KK6NPMOP.js";
 import {
   DialogDescriptionContext,
   DialogHeadingContext,
@@ -44,12 +48,18 @@ import {
 } from "./5YYGDU4E.js";
 import {
   useFocusable
-} from "./M4OAD5XF.js";
+} from "./YTHH33BK.js";
 import {
   createComponent,
   createElement,
   createHook
 } from "./CFEUKV6C.js";
+import {
+  useDialogStore
+} from "./IZFXPXHG.js";
+import {
+  useStoreState
+} from "./WHAB4XD6.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -83,7 +93,7 @@ import {
   getFirstTabbableIn,
   isFocusable
 } from "@ariakit/core/utils/focus";
-import { chain, invariant } from "@ariakit/core/utils/misc";
+import { chain } from "@ariakit/core/utils/misc";
 import { isSafari } from "@ariakit/core/utils/platform";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var isSafariBrowser = isSafari();
@@ -110,7 +120,9 @@ function getElementFromProp(prop, focusable = false) {
 var useDialog = createHook(
   (_a) => {
     var _b = _a, {
-      store,
+      store: storeProp,
+      open: openProp,
+      onClose,
       focusable = true,
       modal = true,
       portal = !!modal,
@@ -123,9 +135,12 @@ var useDialog = createHook(
       autoFocusOnShow = true,
       autoFocusOnHide = true,
       initialFocus,
-      finalFocus
+      finalFocus,
+      unmountOnHide
     } = _b, props = __objRest(_b, [
       "store",
+      "open",
+      "onClose",
       "focusable",
       "modal",
       "portal",
@@ -138,15 +153,30 @@ var useDialog = createHook(
       "autoFocusOnShow",
       "autoFocusOnHide",
       "initialFocus",
-      "finalFocus"
+      "finalFocus",
+      "unmountOnHide"
     ]);
     const context = useDialogProviderContext();
-    store = store || context;
-    invariant(
-      store,
-      process.env.NODE_ENV !== "production" && "Dialog must receive a `store` prop or be wrapped in a DialogProvider component."
-    );
     const ref = useRef(null);
+    const store = useDialogStore({
+      store: storeProp || context,
+      open: openProp,
+      setOpen(open2) {
+        if (open2)
+          return;
+        const dialog = ref.current;
+        if (!dialog)
+          return;
+        const event = new Event("close", { bubbles: false, cancelable: true });
+        if (onClose) {
+          dialog.addEventListener("close", onClose, { once: true });
+        }
+        dialog.dispatchEvent(event);
+        if (!event.defaultPrevented)
+          return;
+        store.setOpen(true);
+      }
+    });
     const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
     const preserveTabOrderProp = props.preserveTabOrder;
     const preserveTabOrder = store.useState(
@@ -174,8 +204,6 @@ var useDialog = createHook(
     useSafeLayoutEffect(() => {
       if (!open)
         return;
-      if (!store)
-        return;
       const dialog = ref.current;
       const activeElement = getActiveElement(dialog, true);
       if (!activeElement)
@@ -188,8 +216,6 @@ var useDialog = createHook(
     }, [store, open]);
     if (isSafariBrowser) {
       useEffect(() => {
-        if (!store)
-          return;
         if (!mounted)
           return;
         const { disclosureElement } = store.getState();
@@ -224,8 +250,6 @@ var useDialog = createHook(
     // disable pointer events because it's just for screen readers.
     portal && preserveTabOrder && isSafari();
     useEffect(() => {
-      if (!store)
-        return;
       if (!mounted)
         return;
       if (!domReady)
@@ -240,15 +264,32 @@ 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]);
+    const canTakeTreeSnapshot = open && domReady;
+    useSafeLayoutEffect(() => {
       if (!id)
         return;
-      if (!open)
+      if (!canTakeTreeSnapshot)
+        return;
+      const dialog = ref.current;
+      return createWalkTreeSnapshot(id, [dialog]);
+    }, [id, canTakeTreeSnapshot]);
+    const getPersistentElementsProp = useEvent(getPersistentElements);
+    useSafeLayoutEffect(() => {
+      if (!id)
+        return;
+      if (!canTakeTreeSnapshot)
         return;
       const { disclosureElement } = store.getState();
       const dialog = ref.current;
@@ -259,23 +300,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)
       );
     }, [
-      store,
-      domReady,
       id,
-      open,
+      store,
+      canTakeTreeSnapshot,
       getPersistentElementsProp,
       nestedDialogs,
       shouldDisableAccessibilityTree,
@@ -336,11 +376,7 @@ var useDialog = createHook(
     }, [open]);
     const focusOnHide = useCallback(
       (dialog, retry = true) => {
-        if (!store)
-          return;
-        const { open: open2, disclosureElement } = store.getState();
-        if (open2)
-          return;
+        const { disclosureElement } = store.getState();
         if (isAlreadyFocusingAnotherElement(dialog))
           return;
         let element = getElementFromProp(finalFocus) || disclosureElement;
@@ -385,7 +421,7 @@ var useDialog = createHook(
         return;
       const dialog = ref.current;
       focusOnHide(dialog);
-    }, [open, hasOpened, mayAutoFocusOnHide, focusOnHide]);
+    }, [open, hasOpened, domReady, mayAutoFocusOnHide, focusOnHide]);
     useEffect(() => {
       if (!hasOpened)
         return;
@@ -405,8 +441,6 @@ var useDialog = createHook(
           return;
         if (event.defaultPrevented)
           return;
-        if (!store)
-          return;
         const dialog = ref.current;
         if (!dialog)
           return;
@@ -422,7 +456,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 +467,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 }),
@@ -445,8 +479,6 @@ var useDialog = createHook(
     props = useWrapElement(
       props,
       (element) => {
-        if (!store)
-          return element;
         if (!backdrop)
           return element;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -491,15 +523,32 @@ var useDialog = createHook(
     return props;
   }
 );
-var Dialog = createComponent((props) => {
-  const htmlProps = useDialog(props);
-  return createElement("div", htmlProps);
-});
+function createDialogComponent(Component, useProviderContext = useDialogProviderContext) {
+  return createComponent((props) => {
+    const context = useProviderContext();
+    const store = props.store || context;
+    const mounted = useStoreState(
+      store,
+      (state) => !props.unmountOnHide || (state == null ? void 0 : state.mounted) || !!props.open
+    );
+    if (!mounted)
+      return null;
+    return /* @__PURE__ */ jsx(Component, __spreadValues({}, props));
+  });
+}
+var Dialog = createDialogComponent(
+  createComponent((props) => {
+    const htmlProps = useDialog(props);
+    return createElement("div", htmlProps);
+  }),
+  useDialogProviderContext
+);
 if (process.env.NODE_ENV !== "production") {
   Dialog.displayName = "Dialog";
 }
 
 export {
   useDialog,
+  createDialogComponent,
   Dialog
 };

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
+};