@ariakit/react-core 0.1.3 → 0.1.5

package/esm/__chunks/{RFLPDFU5.js → CDHQAO3X.js}

@@ -3,7 +3,7 @@ import {
 } from "./P3I4MECH.js";
 import {
   useCollectionItem
-} from "./OJNRBQKS.js";
+} from "./ON2AV7GH.js";
 import {
   createElement,
   createHook,
@@ -24,15 +24,13 @@ function getNamedElement(ref, name) {
   const element = ref.current;
   if (!element)
     return null;
-  if (element.name !== name) {
-    if (element.form) {
-      return element.form.elements.namedItem(name);
-    } else {
-      const document = getDocument(element);
-      return document.getElementsByName(name)[0];
-    }
+  if (element.name === name)
+    return element;
+  if (element.form) {
+    return element.form.elements.namedItem(name);
   }
-  return element;
+  const document = getDocument(element);
+  return document.getElementsByName(name)[0];
 }
 function useItem(store, name, type) {
   return store.useState(

package/esm/__chunks/{ZVCQYVEV.js → FD7UP2TJ.js}

@@ -1,10 +1,9 @@
 import {
-  useForceUpdate,
-  useSafeLayoutEffect
+  useForceUpdate
 } from "./B7MIN7YT.js";
 
 // src/dialog/utils/use-champion-dialog.ts
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { getDocument } from "@ariakit/core/utils/dom";
 import { flushSync } from "react-dom";
 function useChampionDialog(attribute, store, enabled) {
@@ -19,7 +18,7 @@ function useChampionDialog(attribute, store, enabled) {
     const id = body.getAttribute(attribute);
     return !id || id === dialog.id;
   }, [updated, store, enabled, attribute]);
-  useSafeLayoutEffect(() => {
+  useEffect(() => {
     const dialog = store.getState().contentElement;
     if (!dialog)
       return;

package/esm/__chunks/{QCGEDLZG.js → GLAECEAR.js}

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

package/esm/__chunks/{4RNONDN5.js → GM2BWWHD.js}

@@ -11,7 +11,7 @@ import {
 } from "./JE5NWDDX.js";
 import {
   useStoreState
-} from "./6DAEYZ43.js";
+} from "./LTH56VDS.js";
 import {
   useEvent,
   useForkRef,

package/esm/__chunks/{LFCJQX2O.js → GWYHKM6Q.js}

@@ -1,6 +1,6 @@
 import {
   useChampionDialog
-} from "./ZVCQYVEV.js";
+} from "./FD7UP2TJ.js";
 import {
   useSafeLayoutEffect
 } from "./B7MIN7YT.js";

package/esm/__chunks/{EJZ6BVXG.js → IIX2NU6T.js}

@@ -18,8 +18,6 @@ function useNestedDialogs(store, modal) {
   const context = useContext(NestedDialogsContext);
   const [openModals, setOpenModals] = useState([]);
   const [nestedDialogs, setNestedDialogs] = useState([]);
-  const open = store.useState("open");
-  const contentElement = store.useState("contentElement");
   const addDialog = useCallback(
     (dialog) => {
       return chain(
@@ -34,7 +32,7 @@ function useNestedDialogs(store, modal) {
         })()
       );
     },
-    [context.addDialog]
+    [context]
   );
   const showModal = useCallback(
     (dialog) => {
@@ -50,22 +48,32 @@ function useNestedDialogs(store, modal) {
         })()
       );
     },
-    [context.showModal]
+    [context]
   );
   useSafeLayoutEffect(() => {
-    if (!contentElement)
-      return;
-    return context.addDialog?.(contentElement);
-  }, [contentElement, context.addDialog]);
+    return store.sync(
+      (state) => {
+        if (!state.contentElement)
+          return;
+        return context.addDialog?.(state.contentElement);
+      },
+      ["contentElement"]
+    );
+  }, [store, context]);
   useSafeLayoutEffect(() => {
     if (!modal)
       return;
-    if (!open)
-      return;
-    if (!contentElement)
-      return;
-    return context.showModal?.(contentElement);
-  }, [modal, open, contentElement, context.showModal]);
+    return store.sync(
+      (state) => {
+        if (!state.open)
+          return;
+        if (!state.contentElement)
+          return;
+        return context.showModal?.(state.contentElement);
+      },
+      ["open", "contentElement"]
+    );
+  }, [store, modal, context]);
   useEffect(() => {
     return context.store?.syncBatch(
       (state) => {

package/esm/__chunks/{47TE2UD5.js → JCOAGXR2.js}

@@ -1,10 +1,10 @@
 import {
   usePopoverStoreOptions,
   usePopoverStoreProps
-} from "./RSJJ72ZD.js";
+} from "./M6QENKOT.js";
 import {
   useStore
-} from "./6DAEYZ43.js";
+} from "./LTH56VDS.js";
 
 // src/hovercard/hovercard-store.ts
 import * as Core from "@ariakit/core/hovercard/hovercard-store";

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

@@ -3,16 +3,13 @@ import {
 } from "./4U6AOLE4.js";
 import {
   useHideOnInteractOutside
-} from "./HLAXMBLL.js";
-import {
-  useFocusOnChildUnmount
-} from "./WO2RXMKK.js";
+} from "./ARIIJA3Z.js";
 import {
   prependHiddenDismiss
 } from "./PU22SOKH.js";
 import {
-  disablePointerEventsOutside
-} from "./547F7FFZ.js";
+  disableTreeOutside
+} from "./X3J57OQT.js";
 import {
   disableAccessibilityTreeOutside
 } from "./NV7HSBKK.js";
@@ -21,13 +18,13 @@ import {
 } from "./2SVAPVVI.js";
 import {
   usePreventBodyScroll
-} from "./LFCJQX2O.js";
+} from "./GWYHKM6Q.js";
 import {
   useChampionDialog
-} from "./ZVCQYVEV.js";
+} from "./FD7UP2TJ.js";
 import {
   useNestedDialogs
-} from "./EJZ6BVXG.js";
+} from "./IIX2NU6T.js";
 import {
   HeadingLevel
 } from "./6OMX4H3W.js";
@@ -41,7 +38,7 @@ import {
 } from "./5TGAWEHD.js";
 import {
   usePortal
-} from "./3OSYJZM5.js";
+} from "./MPZ7PKON.js";
 import {
   useDisclosureContent
 } from "./FFRIGW5T.js";
@@ -165,13 +162,36 @@ var useDialog = createHook(
       (state) => preventBodyScroll && state.mounted
     );
     usePreventBodyScroll(store, shouldPreventBodyScroll);
-    useFocusOnChildUnmount(store);
     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(() => {
@@ -229,13 +249,11 @@ var useDialog = createHook(
       if (modal) {
         return chain(
           disableAccessibilityTreeOutside(element),
-          // When the backdrop is not visible, we also need to disable pointer
-          // events outside of the modal dialog.
-          !backdrop ? disablePointerEventsOutside(element) : null
+          disableTreeOutside(element)
         );
       }
       return disableAccessibilityTreeOutside(element);
-    }, [shouldDisableOutside, portal, portalNode, modal, backdrop]);
+    }, [shouldDisableOutside, portal, portalNode, modal]);
     const mayAutoFocusOnShow = !!autoFocusOnShow;
     const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
     useEffect(() => {
@@ -371,9 +389,12 @@ var useDialog = createHook(
       (element) => /* @__PURE__ */ jsx(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
       [modal]
     );
-    const shouldFocusTrap = store.useState(
-      (state) => modal && !openModals.length && state.open
-    );
+    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(

package/esm/__chunks/{WHN4PCW7.js → JOV72LYK.js}

@@ -3,7 +3,7 @@ import {
 } from "./SAVDGYCC.js";
 import {
   useCollectionItem
-} from "./OJNRBQKS.js";
+} from "./ON2AV7GH.js";
 import {
   focusSilently,
   getEnabledItem,
@@ -19,6 +19,9 @@ import {
   createHook,
   createMemoComponent
 } from "./JE5NWDDX.js";
+import {
+  useStoreState
+} from "./LTH56VDS.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -36,7 +39,6 @@ import {
   isTextField
 } from "@ariakit/core/utils/dom";
 import { isPortalEvent, isSelfTarget } from "@ariakit/core/utils/events";
-import { invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
 function isEditableElement(element) {
   if (element.isContentEditable)
@@ -144,14 +146,10 @@ var useCompositeItem = createHook(
   }) => {
     const context = useContext(CompositeContext);
     store = store || context;
-    invariant(
-      store,
-      process.env.NODE_ENV !== "production" && "CompositeItem must be wrapped in a Composite component"
-    );
     const id = useId(props.id);
     const ref = useRef(null);
     const row = useContext(CompositeRowContext);
-    const rowId = store.useState((state) => {
+    const rowId = useStoreState(store, (state) => {
       if (rowIdProp)
         return rowIdProp;
       if (!row?.baseElement)
@@ -274,7 +272,8 @@ var useCompositeItem = createHook(
         }
       }
     });
-    const baseElement = store.useState(
+    const baseElement = useStoreState(
+      store,
       (state) => state.baseElement || void 0
     );
     const providerValue = useMemo(
@@ -286,9 +285,9 @@ var useCompositeItem = createHook(
       (element) => /* @__PURE__ */ jsx(CompositeItemContext.Provider, { value: providerValue, children: element }),
       [providerValue]
     );
-    const isActiveItem = store.useState((state) => state.activeId === id);
+    const isActiveItem = useStoreState(store, (state) => state.activeId === id);
     const role = useRole(ref, props);
-    const virtualFocus = store.useState("virtualFocus");
+    const virtualFocus = useStoreState(store, "virtualFocus");
     let ariaSelected;
     if (isActiveItem) {
       if (requiresAriaSelected(role)) {
@@ -297,7 +296,8 @@ var useCompositeItem = createHook(
         ariaSelected = true;
       }
     }
-    const shouldTabIndex = store.useState(
+    const shouldTabIndex = useStoreState(
+      store,
       (state) => !state.virtualFocus && isActiveItem
     );
     props = {
@@ -306,7 +306,7 @@ var useCompositeItem = createHook(
       "data-active-item": isActiveItem ? "" : void 0,
       ...props,
       ref: useForkRef(ref, props.ref),
-      tabIndex: shouldTabIndex ? props.tabIndex : -1,
+      tabIndex: shouldTabIndex !== false ? props.tabIndex : -1,
       onFocus,
       onBlurCapture,
       onKeyDown

package/esm/__chunks/{YDNX3N4B.js → KTHONFWV.js}

@@ -10,7 +10,7 @@ import {
 } from "./DRSUYUM5.js";
 import {
   useCompositeItem
-} from "./WHN4PCW7.js";
+} from "./JOV72LYK.js";
 import {
   createElement,
   createHook,
@@ -18,7 +18,7 @@ import {
 } from "./JE5NWDDX.js";
 import {
   useStoreState
-} from "./6DAEYZ43.js";
+} from "./LTH56VDS.js";
 import {
   useBooleanEvent,
   useEvent
@@ -42,7 +42,7 @@ var useMenuItem = createHook(
     store = store || menuContext || menuBarContext;
     invariant(
       store,
-      process.env.NODE_ENV !== "production" && "MenuItem must be wrapped in a MenuList, MenuPopover or MenuBar component"
+      process.env.NODE_ENV !== "production" && "MenuItem must be wrapped in a MenuList, Menu or MenuBar component"
     );
     const onClickProp = props.onClick;
     const hideOnClickProp = useBooleanEvent(hideOnClick);

package/esm/__chunks/{4STD3S2Y.js → LBUPFIVF.js}

@@ -3,7 +3,7 @@ import {
 } from "./6I2PARRP.js";
 import {
   useCompositeItem
-} from "./WHN4PCW7.js";
+} from "./JOV72LYK.js";
 import {
   createElement,
   createHook,
@@ -11,7 +11,7 @@ import {
 } from "./JE5NWDDX.js";
 import {
   useStoreState
-} from "./6DAEYZ43.js";
+} from "./LTH56VDS.js";
 import {
   useEvent,
   useForkRef,

package/esm/__chunks/{6DAEYZ43.js → LTH56VDS.js}

@@ -60,12 +60,12 @@ function useStoreProps(store, props, key, setKey) {
 }
 function useStore(createStore) {
   const store = useLazyValue(createStore);
-  useSafeLayoutEffect(() => store.init(), []);
+  useSafeLayoutEffect(() => store.init(), [store]);
   const useState = useCallback(
     (keyOrSelector) => useStoreState(store, keyOrSelector),
-    []
+    [store]
   );
-  return useMemo(() => ({ ...store, useState }), []);
+  return useMemo(() => ({ ...store, useState }), [store, useState]);
 }
 
 export {

package/esm/__chunks/{RSJJ72ZD.js → M6QENKOT.js}

@@ -1,11 +1,11 @@
 import {
   useDialogStoreOptions,
   useDialogStoreProps
-} from "./OGTE6FGV.js";
+} from "./ND76WTDR.js";
 import {
   useStore,
   useStoreProps
-} from "./6DAEYZ43.js";
+} from "./LTH56VDS.js";
 import {
   useEvent
 } from "./B7MIN7YT.js";

package/esm/__chunks/{HRNQJHNJ.js → MAJ5ZZ2S.js}

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

package/esm/__chunks/{3OSYJZM5.js → MPZ7PKON.js}

@@ -122,7 +122,15 @@ var usePortal = createHook(
         if (!portal)
           return element;
         if (!portalNode) {
-          return /* @__PURE__ */ jsx("span", { ref: refProp, id: props.id, style: { position: "fixed" } });
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: refProp,
+              id: props.id,
+              style: { position: "fixed" },
+              hidden: true
+            }
+          );
         }
         element = /* @__PURE__ */ jsxs(Fragment, { children: [
           preserveTabOrder && portalNode && /* @__PURE__ */ jsx(

package/esm/__chunks/{OGTE6FGV.js → ND76WTDR.js}

@@ -1,10 +1,10 @@
 import {
   useDisclosureStoreOptions,
   useDisclosureStoreProps
-} from "./OXIHLN45.js";
+} from "./YHRHKO5B.js";
 import {
   useStore
-} from "./6DAEYZ43.js";
+} from "./LTH56VDS.js";
 
 // src/dialog/dialog-store.ts
 import * as Core from "@ariakit/core/dialog/dialog-store";

package/esm/__chunks/{XQPXGTBO.js → NY7SYLNQ.js}

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

package/esm/__chunks/{OJNRBQKS.js → ON2AV7GH.js}

@@ -13,15 +13,11 @@ import {
 
 // src/collection/collection-item.ts
 import { useCallback, useContext, useRef } from "react";
-import { identity, invariant } from "@ariakit/core/utils/misc";
+import { identity } from "@ariakit/core/utils/misc";
 var useCollectionItem = createHook(
   ({ store, shouldRegisterItem = true, getItem = identity, ...props }) => {
     const context = useContext(CollectionContext);
     store = store || context;
-    invariant(
-      store,
-      process.env.NODE_ENV !== "production" && "CollectionItem must be wrapped in a Collection component"
-    );
     const id = useId(props.id);
     const unrenderItem = useRef();
     const ref = useCallback(

package/esm/__chunks/{CWHDUB4A.js → P4W76ES3.js}

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

package/esm/__chunks/X3J57OQT.js

@@ -0,0 +1,44 @@
+import {
+  walkTreeOutside
+} from "./HVXLVRRR.js";
+
+// src/dialog/utils/disable-tree-outside.ts
+import { chain, noop } from "@ariakit/core/utils/misc";
+function assignStyle(element, style) {
+  if (!element)
+    return () => {
+    };
+  const previousStyle = element.style.cssText;
+  Object.assign(element.style, style);
+  return () => {
+    element.style.cssText = previousStyle;
+  };
+}
+function disableElement(element) {
+  if (!("style" in element))
+    return noop;
+  const previousInert = element.inert;
+  element.inert = true;
+  return chain(
+    assignStyle(element, {
+      pointerEvents: "none",
+      userSelect: "none",
+      cursor: "default"
+    }),
+    () => element.inert = previousInert
+  );
+}
+function disableTreeOutside(...elements) {
+  const cleanups = [];
+  walkTreeOutside(elements, (element) => {
+    cleanups.unshift(disableElement(element));
+  });
+  const restorePointerEvents = () => {
+    cleanups.forEach((fn) => fn());
+  };
+  return restorePointerEvents;
+}
+
+export {
+  disableTreeOutside
+};

package/esm/__chunks/{OXIHLN45.js → YHRHKO5B.js}

@@ -1,7 +1,7 @@
 import {
   useStore,
   useStoreProps
-} from "./6DAEYZ43.js";
+} from "./LTH56VDS.js";
 
 // src/disclosure/disclosure-store.ts
 import * as Core from "@ariakit/core/disclosure/disclosure-store";

package/esm/__chunks/{2EP53RLR.js → ZCEPUYV7.js}

@@ -1,11 +1,11 @@
 import {
   useCollectionStoreOptions,
   useCollectionStoreProps
-} from "./56XURSTF.js";
+} from "./36HCAR3M.js";
 import {
   useStore,
   useStoreProps
-} from "./6DAEYZ43.js";
+} from "./LTH56VDS.js";
 
 // src/composite/composite-store.ts
 import * as Core from "@ariakit/core/composite/composite-store";

package/esm/checkbox/checkbox-store.js

@@ -2,8 +2,8 @@ import {
   useCheckboxStore,
   useCheckboxStoreOptions,
   useCheckboxStoreProps
-} from "../__chunks/HRNQJHNJ.js";
-import "../__chunks/6DAEYZ43.js";
+} from "../__chunks/MAJ5ZZ2S.js";
+import "../__chunks/LTH56VDS.js";
 import "../__chunks/B7MIN7YT.js";
 import "../__chunks/SXC6BPOF.js";
 export {

package/esm/checkbox/checkbox.js

@@ -1,12 +1,12 @@
 import {
   Checkbox,
   useCheckbox
-} from "../__chunks/4RNONDN5.js";
+} from "../__chunks/GM2BWWHD.js";
 import "../__chunks/M5KYRTQG.js";
 import "../__chunks/SAVDGYCC.js";
 import "../__chunks/5TGAWEHD.js";
 import "../__chunks/JE5NWDDX.js";
-import "../__chunks/6DAEYZ43.js";
+import "../__chunks/LTH56VDS.js";
 import "../__chunks/B7MIN7YT.js";
 import "../__chunks/SXC6BPOF.js";
 export {

package/esm/collection/collection-item.js

@@ -1,7 +1,7 @@
 import {
   CollectionItem,
   useCollectionItem
-} from "../__chunks/OJNRBQKS.js";
+} from "../__chunks/ON2AV7GH.js";
 import "../__chunks/T3DJZG63.js";
 import "../__chunks/JE5NWDDX.js";
 import "../__chunks/B7MIN7YT.js";

package/esm/collection/collection-store.js

@@ -2,8 +2,8 @@ import {
   useCollectionStore,
   useCollectionStoreOptions,
   useCollectionStoreProps
-} from "../__chunks/56XURSTF.js";
-import "../__chunks/6DAEYZ43.js";
+} from "../__chunks/36HCAR3M.js";
+import "../__chunks/LTH56VDS.js";
 import "../__chunks/B7MIN7YT.js";
 import "../__chunks/SXC6BPOF.js";
 export {

package/esm/combobox/combobox-item.js

@@ -7,9 +7,9 @@ import {
 } from "../__chunks/DRSUYUM5.js";
 import {
   useCompositeItem
-} from "../__chunks/WHN4PCW7.js";
+} from "../__chunks/JOV72LYK.js";
 import "../__chunks/SAVDGYCC.js";
-import "../__chunks/OJNRBQKS.js";
+import "../__chunks/ON2AV7GH.js";
 import "../__chunks/T3DJZG63.js";
 import "../__chunks/STKLF26R.js";
 import "../__chunks/5TGAWEHD.js";
@@ -19,6 +19,7 @@ import {
   createHook,
   createMemoComponent
 } from "../__chunks/JE5NWDDX.js";
+import "../__chunks/LTH56VDS.js";
 import {
   useBooleanEvent,
   useEvent,