@ariakit/react-core 0.1.6 → 0.1.8

package/esm/__chunks/{E3LZDF77.js → EMZ4NQG4.js}

@@ -1,33 +1,30 @@
 import {
   DialogBackdrop
-} from "./4U6AOLE4.js";
+} from "./ZFMAA4DD.js";
+import {
+  disableTreeOutside
+} from "./4H6H5RRM.js";
+import {
+  disableAccessibilityTreeOutside
+} from "./7A3SODQV.js";
 import {
   usePreventBodyScroll
-} from "./GWYHKM6Q.js";
+} from "./RBUEJWRA.js";
 import {
   useNestedDialogs
-} from "./IIX2NU6T.js";
+} from "./T3WBUAHU.js";
 import {
   useHideOnInteractOutside
-} from "./ARIIJA3Z.js";
-import {
-  useChampionDialog
-} from "./FD7UP2TJ.js";
+} from "./KUXENZYT.js";
 import {
   prependHiddenDismiss
-} from "./PU22SOKH.js";
+} from "./62DFK33R.js";
 import {
-  disableTreeOutside
-} from "./X3J57OQT.js";
-import {
-  disableAccessibilityTreeOutside
-} from "./NV7HSBKK.js";
+  markTreeOutside
+} from "./BH4YAZB2.js";
 import {
   useFocusableContainer
-} from "./D6AEGMVG.js";
-import {
-  useFocusTrapRegion
-} from "./2SVAPVVI.js";
+} from "./6WVG5KFF.js";
 import {
   HeadingLevel
 } from "./6OMX4H3W.js";
@@ -38,27 +35,32 @@ import {
 } from "./LNHZLQEK.js";
 import {
   useFocusable
-} from "./HBXYECGK.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";
@@ -82,24 +84,13 @@ import { chain } from "@ariakit/core/utils/misc";
 import { isSafari } from "@ariakit/core/utils/platform";
 import { jsx } from "react/jsx-runtime";
 var isSafariBrowser = isSafari();
-function isBackdrop(dialog, element) {
-  const id = dialog.id;
-  if (!id)
-    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;
   if (contains(dialog, activeElement))
     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;
@@ -116,22 +107,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,
@@ -141,11 +148,15 @@ 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");
-    useEffect(() => {
+    usePreventBodyScroll(store, mounted && preventBodyScroll);
+    useHideOnInteractOutside(store, hideOnInteractOutside);
+    const { wrapElement, nestedDialogs } = useNestedDialogs(store);
+    props = useWrapElement(props, wrapElement, [wrapElement]);
+    useSafeLayoutEffect(() => {
       if (!open)
         return;
       const dialog = ref.current;
@@ -158,52 +169,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;
@@ -211,20 +184,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;
@@ -240,23 +219,40 @@ 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);
@@ -267,34 +263,30 @@ 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;
-      if (!autoFocusOnShowProp(element))
+      getFirstTabbableIn(contentElement, true, portal && preserveTabOrder) || // Finally, we fallback to the dialog element itself.
+      contentElement;
+      const isElementFocusable = isFocusable(element);
+      if (!autoFocusOnShowProp(isElementFocusable ? element : null))
         return;
       setAutoFocusEnabled(true);
       element.focus();
     }, [
-      contentElement,
       open,
       mayAutoFocusOnShow,
       domReady,
+      contentElement,
       initialFocus,
       portal,
       preserveTabOrder,
@@ -314,38 +306,43 @@ 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 == null ? void 0 : 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 (element && !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))
-            return;
-          element.focus();
         }
+        const isElementFocusable = element && isFocusable(element);
+        if (!isElementFocusable && retry) {
+          requestAnimationFrame(() => focusOnHide(false));
+          return;
+        }
+        if (!autoFocusOnHideProp(isElementFocusable ? element : null))
+          return;
+        if (!isElementFocusable)
+          return;
+        element == null ? void 0 : element.focus();
       };
       if (!open) {
         return focusOnHide();
@@ -359,48 +356,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,
@@ -412,8 +403,6 @@ var useDialog = createHook(
               store,
               backdrop,
               backdropProps,
-              hideOnInteractOutside,
-              hideOnEscape,
               hidden: hiddenProp,
               children: element
             }
@@ -421,14 +410,7 @@ var useDialog = createHook(
         }
         return element;
       },
-      [
-        store,
-        backdrop,
-        backdropProps,
-        hideOnInteractOutside,
-        hideOnEscape,
-        hiddenProp
-      ]
+      [store, backdrop, backdropProps, hiddenProp]
     );
     const [headingId, setHeadingId] = useState();
     const [descriptionId, setDescriptionId] = useState();
@@ -437,23 +419,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 = useFocusableContainer({
-      ...props,
-      autoFocusOnShow: autoFocusEnabled
     });
-    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/{LMKEQY3H.js → HFDCAETG.js}

@@ -3,21 +3,26 @@ import {
 } from "./M5KYRTQG.js";
 import {
   useCommand
-} from "./SMBMF2TX.js";
+} from "./4QNHBDVS.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./JE5NWDDX.js";
+} from "./5ETIGB6O.js";
 import {
   useStoreState
-} from "./EUGPS2W3.js";
+} from "./AV5WE37O.js";
 import {
   useEvent,
   useForkRef,
   useTagName,
   useWrapElement
-} from "./B7MIN7YT.js";
+} from "./ASYR66PQ.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4BKCJXBM.js";
 
 // src/checkbox/checkbox.tsx
 import { useEffect, useRef, useState } from "react";
@@ -33,13 +38,19 @@ function isNativeCheckbox(tagName, type) {
   return tagName === "input" && (!type || type === "checkbox");
 }
 var useCheckbox = createHook(
-  ({
-    store,
-    value: valueProp,
-    checked: checkedProp,
-    defaultChecked,
-    ...props
-  }) => {
+  (_a) => {
+    var _b = _a, {
+      store,
+      value: valueProp,
+      checked: checkedProp,
+      defaultChecked
+    } = _b, props = __objRest(_b, [
+      "store",
+      "value",
+      "checked",
+      "defaultChecked"
+    ]);
+    var _a2;
     const storeChecked = useStoreState(store, (state) => {
       if (checkedProp !== void 0)
         return checkedProp;
@@ -56,8 +67,8 @@ var useCheckbox = createHook(
         return state.value;
       return false;
     });
-    const [_checked, setChecked] = useState(defaultChecked ?? false);
-    const checked = checkedProp ?? storeChecked ?? _checked;
+    const [_checked, setChecked] = useState(defaultChecked != null ? defaultChecked : false);
+    const checked = (_a2 = checkedProp != null ? checkedProp : storeChecked) != null ? _a2 : _checked;
     const ref = useRef(null);
     const tagName = useTagName(ref, props.as || "input");
     const nativeCheckbox = isNativeCheckbox(tagName, props.type);
@@ -81,12 +92,12 @@ var useCheckbox = createHook(
       if (!nativeCheckbox) {
         event.currentTarget.checked = !event.currentTarget.checked;
       }
-      onChangeProp?.(event);
+      onChangeProp == null ? void 0 : onChangeProp(event);
       if (event.defaultPrevented)
         return;
       const elementChecked = event.currentTarget.checked;
       setChecked(elementChecked);
-      store?.setValue((prevValue) => {
+      store == null ? void 0 : store.setValue((prevValue) => {
         if (!valueProp)
           return elementChecked;
         if (!Array.isArray(prevValue)) {
@@ -99,7 +110,7 @@ var useCheckbox = createHook(
     });
     const onClickProp = props.onClick;
     const onClick = useEvent((event) => {
-      onClickProp?.(event);
+      onClickProp == null ? void 0 : onClickProp(event);
       if (event.defaultPrevented)
         return;
       if (nativeCheckbox)
@@ -111,21 +122,20 @@ var useCheckbox = createHook(
       (element) => /* @__PURE__ */ jsx(CheckboxCheckedContext.Provider, { value: isChecked, children: element }),
       [isChecked]
     );
-    props = {
+    props = __spreadProps(__spreadValues({
       role: !nativeCheckbox ? "checkbox" : void 0,
       type: nativeCheckbox ? "checkbox" : void 0,
-      "aria-checked": checked,
-      ...props,
+      "aria-checked": checked
+    }, props), {
       ref: useForkRef(ref, props.ref),
       onChange,
       onClick
-    };
-    props = useCommand({ clickOnEnter: !nativeCheckbox, ...props });
-    return {
+    });
+    props = useCommand(__spreadValues({ clickOnEnter: !nativeCheckbox }, props));
+    return __spreadValues({
       value: nativeCheckbox ? valueProp : void 0,
-      checked: isChecked,
-      ...props
-    };
+      checked: isChecked
+    }, props);
   }
 );
 var Checkbox = createComponent((props) => {