@ariakit/react-core 0.1.4 → 0.1.6

package/esm/__chunks/BMLNRUFQ.js

@@ -0,0 +1,7 @@
+// src/focusable/focusable-context.ts
+import { createContext } from "react";
+var FocusableContext = createContext(true);
+
+export {
+  FocusableContext
+};

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/D6AEGMVG.js

@@ -0,0 +1,38 @@
+import {
+  FocusableContext
+} from "./BMLNRUFQ.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useWrapElement
+} from "./B7MIN7YT.js";
+
+// src/focusable/focusable-container.tsx
+import { jsx } from "react/jsx-runtime";
+var useFocusableContainer = createHook(
+  ({ autoFocusOnShow = true, ...props }) => {
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(FocusableContext.Provider, { value: autoFocusOnShow, children: element }),
+      [autoFocusOnShow]
+    );
+    return props;
+  }
+);
+var FocusableContainer = createComponent(
+  (props) => {
+    const htmlProps = useFocusableContainer(props);
+    return createElement("div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  FocusableContainer.displayName = "FocusableContainer";
+}
+
+export {
+  useFocusableContainer,
+  FocusableContainer
+};

package/esm/__chunks/{LZKGMRGC.js → DH2UH4YR.js}

@@ -6,7 +6,7 @@ import {
 } from "./EEVSGAZW.js";
 import {
   useComposite
-} from "./FXC76SFN.js";
+} from "./NOLA2XUH.js";
 import {
   createComponent,
   createElement,

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

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

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

@@ -1,9 +1,18 @@
 import {
   DialogBackdrop
 } from "./4U6AOLE4.js";
+import {
+  usePreventBodyScroll
+} from "./GWYHKM6Q.js";
+import {
+  useNestedDialogs
+} from "./IIX2NU6T.js";
 import {
   useHideOnInteractOutside
 } from "./ARIIJA3Z.js";
+import {
+  useChampionDialog
+} from "./FD7UP2TJ.js";
 import {
   prependHiddenDismiss
 } from "./PU22SOKH.js";
@@ -13,18 +22,12 @@ import {
 import {
   disableAccessibilityTreeOutside
 } from "./NV7HSBKK.js";
+import {
+  useFocusableContainer
+} from "./D6AEGMVG.js";
 import {
   useFocusTrapRegion
 } from "./2SVAPVVI.js";
-import {
-  usePreventBodyScroll
-} from "./GWYHKM6Q.js";
-import {
-  useChampionDialog
-} from "./FD7UP2TJ.js";
-import {
-  useNestedDialogs
-} from "./EJZ6BVXG.js";
 import {
   HeadingLevel
 } from "./6OMX4H3W.js";
@@ -35,10 +38,10 @@ import {
 } from "./LNHZLQEK.js";
 import {
   useFocusable
-} from "./5TGAWEHD.js";
+} from "./HBXYECGK.js";
 import {
   usePortal
-} from "./3OSYJZM5.js";
+} from "./MPZ7PKON.js";
 import {
   useDisclosureContent
 } from "./FFRIGW5T.js";
@@ -256,6 +259,7 @@ var useDialog = createHook(
     }, [shouldDisableOutside, portal, portalNode, modal]);
     const mayAutoFocusOnShow = !!autoFocusOnShow;
     const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
+    const [autoFocusEnabled, setAutoFocusEnabled] = useState(false);
     useEffect(() => {
       if (!open)
         return;
@@ -284,6 +288,7 @@ var useDialog = createHook(
       getFirstTabbableIn(dialog, true, portal && preserveTabOrder) || dialog;
       if (!autoFocusOnShowProp(element))
         return;
+      setAutoFocusEnabled(true);
       element.focus();
     }, [
       contentElement,
@@ -442,6 +447,10 @@ var useDialog = createHook(
       ...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 });

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

@@ -42,16 +42,25 @@ function useStoreProps(store, props, key, setKey) {
     return store.sync(
       (state, prev) => {
         const { value: value2, setValue } = propsRef.current;
-        if (value2 !== void 0) {
-          store.setState(key, value2);
-        }
-        if (setValue && state[key] !== prev[key] && state[key] !== value2) {
-          setValue(state[key]);
-        }
+        if (!setValue)
+          return;
+        if (state[key] === prev[key])
+          return;
+        if (state[key] === value2)
+          return;
+        setValue(state[key]);
       },
       [key]
     );
   }, [store, key]);
+  useSafeLayoutEffect(() => {
+    return store.sync(() => {
+      const { value: value2 } = propsRef.current;
+      if (value2 === void 0)
+        return;
+      store.setState(key, value2);
+    }, [key]);
+  }, [store, key]);
   useUpdateLayoutEffect(() => {
     if (value === void 0)
       return;
@@ -60,12 +69,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/{IW7LFTQE.js → EX5SMLJA.js}

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

package/esm/__chunks/{2WA5HZXQ.js → FVED2REU.js}

@@ -1,6 +1,6 @@
 import {
   useFocusable
-} from "./5TGAWEHD.js";
+} from "./HBXYECGK.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{I4MLEPTM.js → GEZPJZJE.js}

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

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

@@ -1,9 +1,9 @@
 import {
   useCommand
-} from "./SAVDGYCC.js";
+} from "./SMBMF2TX.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 "./EUGPS2W3.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/{5TGAWEHD.js → HBXYECGK.js}

@@ -1,3 +1,6 @@
+import {
+  FocusableContext
+} from "./BMLNRUFQ.js";
 import {
   createComponent,
   createElement,
@@ -10,7 +13,7 @@ import {
 } from "./B7MIN7YT.js";
 
 // src/focusable/focusable.ts
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { isButton } from "@ariakit/core/utils/dom";
 import {
   addGlobalEventListener,
@@ -293,6 +296,7 @@ var useFocusable = createHook(
         setFocusVisible(false);
       }
     });
+    const autoFocusOnShow = useContext(FocusableContext);
     const autoFocusRef = useEvent((element) => {
       if (!focusable)
         return;
@@ -300,6 +304,8 @@ var useFocusable = createHook(
         return;
       if (!element)
         return;
+      if (!autoFocusOnShow)
+        return;
       queueMicrotask(() => {
         if (hasFocus(element))
           return;

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/{4RNONDN5.js → LMKEQY3H.js}

@@ -3,7 +3,7 @@ import {
 } from "./M5KYRTQG.js";
 import {
   useCommand
-} from "./SAVDGYCC.js";
+} from "./SMBMF2TX.js";
 import {
   createComponent,
   createElement,
@@ -11,7 +11,7 @@ import {
 } from "./JE5NWDDX.js";
 import {
   useStoreState
-} from "./6DAEYZ43.js";
+} from "./EUGPS2W3.js";
 import {
   useEvent,
   useForkRef,

package/esm/__chunks/{GEOALYS4.js → LUPFVLDA.js}

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

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

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

package/esm/__chunks/{JKSMOXA4.js → MMKQPA5B.js}

@@ -1,6 +1,6 @@
 import {
   useDialogDisclosure
-} from "./NRA7DRSD.js";
+} from "./OOPJDYET.js";
 import {
   PopoverContext
 } from "./6GS36SYX.js";

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/{OXIHLN45.js → NL6KEDBG.js}

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

package/esm/__chunks/{FXC76SFN.js → NOLA2XUH.js}

@@ -7,7 +7,7 @@ import {
 } from "./STKLF26R.js";
 import {
   useFocusable
-} from "./5TGAWEHD.js";
+} from "./HBXYECGK.js";
 import {
   CompositeContext
 } from "./Z3X3QN6P.js";

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

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

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/{NRA7DRSD.js → OOPJDYET.js}

@@ -1,6 +1,6 @@
 import {
   useDisclosure
-} from "./57UTLR6J.js";
+} from "./UBWZV2LZ.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{B3AF63GK.js → QLGPSTUO.js}

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

package/esm/__chunks/{SAVDGYCC.js → SMBMF2TX.js}

@@ -1,6 +1,6 @@
 import {
   useFocusable
-} from "./5TGAWEHD.js";
+} from "./HBXYECGK.js";
 import {
   createComponent,
   createElement,

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

@@ -10,7 +10,7 @@ import {
 } from "./DRSUYUM5.js";
 import {
   useCompositeItem
-} from "./WHN4PCW7.js";
+} from "./HAHDW4I2.js";
 import {
   createElement,
   createHook,
@@ -18,7 +18,7 @@ import {
 } from "./JE5NWDDX.js";
 import {
   useStoreState
-} from "./6DAEYZ43.js";
+} from "./EUGPS2W3.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/{57UTLR6J.js → UBWZV2LZ.js}

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

package/esm/__chunks/{WOX4XCVH.js → V3PAD47N.js}

@@ -7,7 +7,7 @@ import {
 } from "./6OCAIYRY.js";
 import {
   useComposite
-} from "./FXC76SFN.js";
+} from "./NOLA2XUH.js";
 import {
   createComponent,
   createElement,
@@ -15,7 +15,7 @@ import {
 } from "./JE5NWDDX.js";
 import {
   useStoreState
-} from "./6DAEYZ43.js";
+} from "./EUGPS2W3.js";
 import {
   useEvent,
   useForkRef,
@@ -122,7 +122,7 @@ var useMenuList = createHook(
     );
     const ariaLabelledBy = useAriaLabelledBy({ store, ...props });
     const mounted = store.useState("mounted");
-    const style = mounted ? props.style : { ...props.style, display: "none" };
+    const style = mounted && props.hidden !== true || props.hidden === false ? props.style : { ...props.style, display: "none" };
     props = {
       id,
       "aria-labelledby": ariaLabelledBy,

package/esm/__chunks/{56XURSTF.js → WKCZETSE.js}

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

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

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