@ariakit/react-core 0.1.5 → 0.1.7

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

@@ -1,30 +1,30 @@
 import {
   DialogBackdrop
-} from "./4U6AOLE4.js";
+} from "./JXNLCNWG.js";
+import {
+  usePreventBodyScroll
+} from "./RBUEJWRA.js";
+import {
+  useNestedDialogs
+} from "./T3WBUAHU.js";
 import {
   useHideOnInteractOutside
-} from "./ARIIJA3Z.js";
+} from "./KUXENZYT.js";
 import {
   prependHiddenDismiss
-} from "./PU22SOKH.js";
+} from "./62DFK33R.js";
+import {
+  markTreeOutside
+} from "./BH4YAZB2.js";
 import {
   disableTreeOutside
-} from "./X3J57OQT.js";
+} from "./4H6H5RRM.js";
 import {
   disableAccessibilityTreeOutside
-} from "./NV7HSBKK.js";
+} from "./7A3SODQV.js";
 import {
-  useFocusTrapRegion
-} from "./2SVAPVVI.js";
-import {
-  usePreventBodyScroll
-} from "./GWYHKM6Q.js";
-import {
-  useChampionDialog
-} from "./FD7UP2TJ.js";
-import {
-  useNestedDialogs
-} from "./IIX2NU6T.js";
+  useFocusableContainer
+} from "./6WVG5KFF.js";
 import {
   HeadingLevel
 } from "./6OMX4H3W.js";
@@ -35,27 +35,32 @@ import {
 } from "./LNHZLQEK.js";
 import {
   useFocusable
-} from "./5TGAWEHD.js";
+} from "./AGWM73EZ.js";
 import {
   usePortal
-} from "./MPZ7PKON.js";
+} from "./USCWE5QL.js";
 import {
   useDisclosureContent
-} from "./FFRIGW5T.js";
+} from "./6AJCHLAV.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./JE5NWDDX.js";
+} from "./5ETIGB6O.js";
 import {
   useBooleanEvent,
+  useEvent,
   useForkRef,
   useId,
-  useLiveRef,
   usePortalRef,
   useSafeLayoutEffect,
   useWrapElement
-} from "./B7MIN7YT.js";
+} from "./ASYR66PQ.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4BKCJXBM.js";
 
 // src/dialog/dialog.tsx
 import { useEffect, useRef, useState } from "react";
@@ -85,10 +90,7 @@ function isBackdrop(dialog, element) {
     return;
   return element.getAttribute("data-backdrop") === id;
 }
-function isInDialog(element) {
-  return (dialog) => dialog && contains(dialog, element);
-}
-function isAlreadyFocusingAnotherElement(dialog, nestedDialogs) {
+function isAlreadyFocusingAnotherElement(dialog) {
   const activeElement = getActiveElement();
   if (!activeElement)
     return false;
@@ -96,7 +98,7 @@ function isAlreadyFocusingAnotherElement(dialog, nestedDialogs) {
     return false;
   if (isBackdrop(dialog, activeElement))
     return false;
-  if (nestedDialogs?.some(isInDialog(activeElement)))
+  if (activeElement.hasAttribute("data-dialog"))
     return false;
   if (isFocusable(activeElement))
     return true;
@@ -113,22 +115,38 @@ function getElementFromProp(prop, focusable = false) {
   return element;
 }
 var useDialog = createHook(
-  ({
-    store,
-    focusable = true,
-    modal = true,
-    portal = !!modal,
-    backdrop = !!modal,
-    backdropProps,
-    hideOnEscape = true,
-    hideOnInteractOutside = true,
-    preventBodyScroll = !!modal,
-    autoFocusOnShow = true,
-    autoFocusOnHide = true,
-    initialFocus,
-    finalFocus,
-    ...props
-  }) => {
+  (_a) => {
+    var _b = _a, {
+      store,
+      focusable = true,
+      modal = true,
+      portal = !!modal,
+      backdrop = !!modal,
+      backdropProps,
+      hideOnEscape = true,
+      hideOnInteractOutside = true,
+      getPersistentElements,
+      preventBodyScroll = !!modal,
+      autoFocusOnShow = true,
+      autoFocusOnHide = true,
+      initialFocus,
+      finalFocus
+    } = _b, props = __objRest(_b, [
+      "store",
+      "focusable",
+      "modal",
+      "portal",
+      "backdrop",
+      "backdropProps",
+      "hideOnEscape",
+      "hideOnInteractOutside",
+      "getPersistentElements",
+      "preventBodyScroll",
+      "autoFocusOnShow",
+      "autoFocusOnHide",
+      "initialFocus",
+      "finalFocus"
+    ]);
     const ref = useRef(null);
     const { portalRef, portalNode, domReady } = usePortalRef(
       portal,
@@ -138,10 +156,14 @@ var useDialog = createHook(
     const preserveTabOrder = store.useState(
       (state) => preserveTabOrderProp && !modal && state.mounted
     );
-    const open = store.useState("open");
-    const shouldDisableAccessibilityTree = modal || portal && preserveTabOrder && isSafari();
     const id = useId(props.id);
+    const open = store.useState("open");
+    const mounted = store.useState("mounted");
     const contentElement = store.useState("contentElement");
+    usePreventBodyScroll(store, mounted && preventBodyScroll);
+    useHideOnInteractOutside(store, hideOnInteractOutside);
+    const { wrapElement, nestedDialogs } = useNestedDialogs(store);
+    props = useWrapElement(props, wrapElement, [wrapElement]);
     useEffect(() => {
       if (!open)
         return;
@@ -155,52 +177,14 @@ var useDialog = createHook(
         return;
       store.setDisclosureElement(activeElement);
     }, [open]);
-    const nested = useNestedDialogs(store, modal);
-    const { nestedDialogs, openModals, wrapElement } = nested;
-    const nestedDialogsRef = useLiveRef(nestedDialogs);
-    const shouldPreventBodyScroll = store.useState(
-      (state) => preventBodyScroll && state.mounted
-    );
-    usePreventBodyScroll(store, shouldPreventBodyScroll);
-    useHideOnInteractOutside({
-      store,
-      modal,
-      hideOnInteractOutside,
-      nestedDialogs
-    });
-    const shouldRestoreLostFocus = useChampionDialog(
-      "data-dialog-restore-lost-focus",
-      store,
-      open && modal && !openModals.length
-    );
-    useEffect(() => {
-      if (!shouldRestoreLostFocus())
-        return;
-      let raf = 0;
-      const restoreLostFocus = () => {
-        const dialog = ref.current;
-        raf = requestAnimationFrame(restoreLostFocus);
-        if (!dialog)
-          return;
-        const doc = getDocument(dialog);
-        if (!doc.hasFocus())
-          return;
-        if (doc.activeElement !== doc.body)
-          return;
-        dialog.focus();
-      };
-      restoreLostFocus();
-      return () => cancelAnimationFrame(raf);
-    }, [shouldRestoreLostFocus]);
-    const mounted = store.useState("mounted");
     if (isSafariBrowser) {
       useEffect(() => {
         if (!mounted)
           return;
-        const disclosure = store.getState().disclosureElement;
-        if (!disclosure)
+        const { disclosureElement } = store.getState();
+        if (!disclosureElement)
           return;
-        if (!isButton(disclosure))
+        if (!isButton(disclosureElement))
           return;
         const onMouseDown = () => {
           let receivedFocus = false;
@@ -208,20 +192,26 @@ var useDialog = createHook(
             receivedFocus = true;
           };
           const options = { capture: true, once: true };
-          disclosure.addEventListener("focusin", onFocus, options);
-          queueBeforeEvent(disclosure, "mouseup", () => {
-            disclosure.removeEventListener("focusin", onFocus, true);
+          disclosureElement.addEventListener("focusin", onFocus, options);
+          queueBeforeEvent(disclosureElement, "mouseup", () => {
+            disclosureElement.removeEventListener("focusin", onFocus, true);
             if (receivedFocus)
               return;
-            focusIfNeeded(disclosure);
+            focusIfNeeded(disclosureElement);
           });
         };
-        disclosure.addEventListener("mousedown", onMouseDown);
+        disclosureElement.addEventListener("mousedown", onMouseDown);
         return () => {
-          disclosure.removeEventListener("mousedown", onMouseDown);
+          disclosureElement.removeEventListener("mousedown", onMouseDown);
         };
       }, [mounted]);
     }
+    const shouldDisableAccessibilityTree = modal || // Usually, we only want to disable the accessibility tree outside if the
+    // dialog is a modal. But the Portal component can't preserve the tab
+    // order on Safari/VoiceOver. By allowing only the dialog/portal to be
+    // accessible, we provide a similar tab order flow. We don't need to
+    // disable pointer events because it's just for screen readers.
+    portal && preserveTabOrder && isSafari();
     useEffect(() => {
       if (!mounted)
         return;
@@ -237,25 +227,43 @@ var useDialog = createHook(
         return;
       return prependHiddenDismiss(dialog, store.hide);
     }, [mounted, domReady, shouldDisableAccessibilityTree]);
-    const shouldDisableOutside = useChampionDialog(
-      "data-dialog-disable-outside",
-      store,
-      open && !openModals.length && shouldDisableAccessibilityTree
-    );
+    const getPersistentElementsProp = useEvent(getPersistentElements);
     useSafeLayoutEffect(() => {
-      if (!shouldDisableOutside())
+      if (!id)
+        return;
+      if (!open)
         return;
+      const { disclosureElement } = store.getState();
       const element = portal ? portalNode : ref.current;
+      const persistentElements = getPersistentElementsProp() || [];
+      const allElements = [element, ...nestedDialogs, ...persistentElements];
+      if (!shouldDisableAccessibilityTree) {
+        return markTreeOutside(id, disclosureElement, ...allElements);
+      }
       if (modal) {
         return chain(
-          disableAccessibilityTreeOutside(element),
-          disableTreeOutside(element)
+          markTreeOutside(id, ...allElements),
+          disableTreeOutside(...allElements)
         );
       }
-      return disableAccessibilityTreeOutside(element);
-    }, [shouldDisableOutside, portal, portalNode, modal]);
+      return chain(
+        markTreeOutside(id, disclosureElement, ...allElements),
+        disableAccessibilityTreeOutside(...allElements)
+      );
+    }, [
+      id,
+      open,
+      store,
+      portal,
+      portalNode,
+      nestedDialogs,
+      getPersistentElementsProp,
+      shouldDisableAccessibilityTree,
+      modal
+    ]);
     const mayAutoFocusOnShow = !!autoFocusOnShow;
     const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
+    const [autoFocusEnabled, setAutoFocusEnabled] = useState(false);
     useEffect(() => {
       if (!open)
         return;
@@ -263,33 +271,29 @@ var useDialog = createHook(
         return;
       if (!domReady)
         return;
-      const hasNestedOpenDialog = nestedDialogsRef.current?.some(
-        (dialog2) => !dialog2.hidden
-      );
-      if (hasNestedOpenDialog)
-        return;
-      const dialog = contentElement;
-      if (!dialog?.isConnected)
+      if (!(contentElement == null ? void 0 : contentElement.isConnected))
         return;
       const element = getElementFromProp(initialFocus, true) || // If no initial focus is specified, we try to focus the first element
-      // with the `autofocus` attribute. If it's an Ariakit component, the
-      // `Focusable` component will consume the `autoFocus` prop and add the
-      // `data-autofocus` attribute to the element instead.
-      dialog.querySelector(
+      // with the autofocus attribute. If it's an Ariakit component, the
+      // Focusable component will consume the autoFocus prop and add the
+      // data-autofocus attribute to the element instead.
+      contentElement.querySelector(
         "[data-autofocus=true],[autofocus]"
       ) || // We have to fallback to the first focusable element otherwise portaled
       // dialogs with preserveTabOrder set to true will not receive focus
       // properly because the elements aren't tabbable until the dialog
       // receives focus.
-      getFirstTabbableIn(dialog, true, portal && preserveTabOrder) || dialog;
+      getFirstTabbableIn(contentElement, true, portal && preserveTabOrder) || // Finally, we fallback to the dialog element itself.
+      contentElement;
       if (!autoFocusOnShowProp(element))
         return;
+      setAutoFocusEnabled(true);
       element.focus();
     }, [
-      contentElement,
       open,
       mayAutoFocusOnShow,
       domReady,
+      contentElement,
       initialFocus,
       portal,
       preserveTabOrder,
@@ -309,38 +313,44 @@ var useDialog = createHook(
         return;
       if (!mayAutoFocusOnHide)
         return;
-      const focusOnHide = () => {
-        const dialog = ref.current;
+      const dialog = ref.current;
+      const focusOnHide = (retry = true) => {
         if (!dialog)
           return;
-        const dialogs = nestedDialogsRef.current;
-        if (isAlreadyFocusingAnotherElement(dialog, dialogs))
+        if (isAlreadyFocusingAnotherElement(dialog))
           return;
-        let element = getElementFromProp(finalFocus) || store.getState().disclosureElement;
-        if (element) {
-          if (element.id) {
-            const doc = getDocument(element);
-            const selector = `[aria-activedescendant="${element.id}"]`;
-            const composite = doc.querySelector(selector);
-            if (composite) {
-              element = composite;
-            }
+        const { disclosureElement } = store.getState();
+        let element = getElementFromProp(finalFocus) || disclosureElement;
+        if (!element)
+          return;
+        if (element.id) {
+          const doc = getDocument(element);
+          const selector = `[aria-activedescendant="${element.id}"]`;
+          const composite = doc.querySelector(selector);
+          if (composite) {
+            element = composite;
           }
-          if (!isFocusable(element)) {
-            const parentDialog = closest(element, "[data-dialog]");
-            if (parentDialog && parentDialog.id) {
-              const doc = getDocument(parentDialog);
-              const selector = `[aria-controls~="${parentDialog.id}"]`;
-              const control = doc.querySelector(selector);
-              if (control) {
-                element = control;
-              }
+        }
+        if (!isFocusable(element)) {
+          const maybeParentDialog = closest(element, "[data-dialog]");
+          if (maybeParentDialog && maybeParentDialog.id) {
+            const doc = getDocument(maybeParentDialog);
+            const selector = `[aria-controls~="${maybeParentDialog.id}"]`;
+            const control = doc.querySelector(selector);
+            if (control) {
+              element = control;
             }
           }
-          if (!autoFocusOnHideProp(element))
+        }
+        if (!isFocusable(element)) {
+          if (!retry)
             return;
-          element.focus();
+          requestAnimationFrame(() => focusOnHide(false));
+          return;
         }
+        if (!autoFocusOnHideProp(element))
+          return;
+        element.focus();
       };
       if (!open) {
         return focusOnHide();
@@ -354,48 +364,42 @@ var useDialog = createHook(
       if (!mounted)
         return;
       const onKeyDown = (event) => {
-        const dialog = ref.current;
-        if (!dialog)
-          return;
-        const target = event.target;
-        const disclosure = store.getState().disclosureElement;
         if (event.key !== "Escape")
           return;
         if (event.defaultPrevented)
           return;
+        const dialog = ref.current;
+        if (!dialog)
+          return;
+        const target = event.target;
         if (!target)
           return;
+        const { disclosureElement } = store.getState();
         const isValidTarget = () => {
-          if (contains(dialog, target)) {
-            const dialogs = nestedDialogsRef.current;
-            const inNestedDialog = dialogs.some(isInDialog(target));
-            if (inNestedDialog)
-              return false;
+          if (target.tagName === "BODY")
             return true;
-          }
-          if (disclosure && contains(disclosure, target))
+          if (contains(dialog, target))
+            return true;
+          if (!disclosureElement)
+            return false;
+          if (contains(disclosureElement, target))
             return true;
           return false;
         };
-        if (isValidTarget() && hideOnEscapeProp(event)) {
-          store.hide();
-        }
+        if (!isValidTarget())
+          return;
+        if (!hideOnEscapeProp(event))
+          return;
+        event.stopImmediatePropagation();
+        store.hide();
       };
       return addGlobalEventListener("keydown", onKeyDown);
     }, [mounted, domReady, hideOnEscapeProp]);
-    props = useWrapElement(props, wrapElement, [wrapElement]);
     props = useWrapElement(
       props,
       (element) => /* @__PURE__ */ jsx(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
       [modal]
     );
-    const [shouldFocusTrap, setShouldFocusTrap] = useState(false);
-    const hasOpenModals = !!openModals.length;
-    useSafeLayoutEffect(() => {
-      const value = open && modal && !hasOpenModals && !("inert" in HTMLElement.prototype);
-      setShouldFocusTrap(value);
-    }, [modal, open, hasOpenModals]);
-    props = useFocusTrapRegion({ ...props, enabled: shouldFocusTrap });
     const hiddenProp = props.hidden;
     props = useWrapElement(
       props,
@@ -432,19 +436,22 @@ var useDialog = createHook(
       (element) => /* @__PURE__ */ jsx(DialogContext.Provider, { value: store, children: /* @__PURE__ */ jsx(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ jsx(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
       [store]
     );
-    props = {
+    props = __spreadProps(__spreadValues({
       id,
       "data-dialog": "",
       role: "dialog",
       tabIndex: focusable ? -1 : void 0,
       "aria-labelledby": headingId,
-      "aria-describedby": descriptionId,
-      ...props,
+      "aria-describedby": descriptionId
+    }, props), {
       ref: useForkRef(ref, props.ref)
-    };
-    props = useDisclosureContent({ store, ...props });
-    props = useFocusable({ ...props, focusable });
-    props = usePortal({ portal, ...props, portalRef, preserveTabOrder });
+    });
+    props = useFocusableContainer(__spreadProps(__spreadValues({}, props), {
+      autoFocusOnShow: autoFocusEnabled
+    }));
+    props = useDisclosureContent(__spreadValues({ store }, props));
+    props = useFocusable(__spreadProps(__spreadValues({}, props), { focusable }));
+    props = usePortal(__spreadProps(__spreadValues({ portal }, props), { portalRef, preserveTabOrder }));
     return props;
   }
 );

package/esm/__chunks/{KHFKAEA6.js → TFLZHAF5.js}

@@ -5,7 +5,12 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./JE5NWDDX.js";
+} from "./5ETIGB6O.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4BKCJXBM.js";
 
 // src/popover/popover-disclosure-arrow.tsx
 import { useContext, useMemo } from "react";
@@ -18,7 +23,8 @@ var pointsMap = {
   left: "10,4 6,8 10,12"
 };
 var usePopoverDisclosureArrow = createHook(
-  ({ store, placement, ...props }) => {
+  (_a) => {
+    var _b = _a, { store, placement } = _b, props = __objRest(_b, ["store", "placement"]);
     const context = useContext(PopoverContext);
     store = store || context;
     invariant(
@@ -46,17 +52,16 @@ var usePopoverDisclosureArrow = createHook(
       ),
       [points]
     );
-    props = {
+    props = __spreadProps(__spreadValues({
       children,
-      "aria-hidden": true,
-      ...props,
-      style: {
+      "aria-hidden": true
+    }, props), {
+      style: __spreadValues({
         width: "1em",
         height: "1em",
-        pointerEvents: "none",
-        ...props.style
-      }
-    };
+        pointerEvents: "none"
+      }, props.style)
+    });
     return props;
   }
 );

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

@@ -1,6 +1,6 @@
 import {
   useButton
-} from "./I4MLEPTM.js";
+} from "./OQUXG6FE.js";
 import {
   DialogContext
 } from "./LNHZLQEK.js";
@@ -8,24 +8,30 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./JE5NWDDX.js";
+} from "./5ETIGB6O.js";
 import {
   useEvent
-} from "./B7MIN7YT.js";
+} from "./ASYR66PQ.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4BKCJXBM.js";
 
 // src/dialog/dialog-dismiss.tsx
 import { useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var useDialogDismiss = createHook(
-  ({ store, ...props }) => {
+  (_a) => {
+    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useContext(DialogContext);
     store = store || context;
     const onClickProp = props.onClick;
     const onClick = useEvent((event) => {
-      onClickProp?.(event);
+      onClickProp == null ? void 0 : onClickProp(event);
       if (event.defaultPrevented)
         return;
-      store?.hide();
+      store == null ? void 0 : store.hide();
     });
     const children = useMemo(
       () => /* @__PURE__ */ jsxs(
@@ -49,12 +55,12 @@ var useDialogDismiss = createHook(
       ),
       []
     );
-    props = {
+    props = __spreadProps(__spreadValues({
       "data-dialog-dismiss": "",
-      children,
-      ...props,
+      children
+    }, props), {
       onClick
-    };
+    });
     props = useButton(props);
     return props;
   }