@ariakit/react-core 0.3.2 → 0.3.4

package/cjs/utils/store.cjs

@@ -2,7 +2,7 @@
 
 
 
-var _I63PYP2Ucjs = require('../__chunks/I63PYP2U.cjs');
+var _EVNF7KMTcjs = require('../__chunks/EVNF7KMT.cjs');
 require('../__chunks/5WLTMVVQ.cjs');
 require('../__chunks/7WUTS26Y.cjs');
 require('../__chunks/72I2GWXF.cjs');
@@ -10,4 +10,4 @@ require('../__chunks/72I2GWXF.cjs');
 
 
 
-exports.useStore = _I63PYP2Ucjs.useStore; exports.useStoreProps = _I63PYP2Ucjs.useStoreProps; exports.useStoreState = _I63PYP2Ucjs.useStoreState;
+exports.useStore = _EVNF7KMTcjs.useStore; exports.useStoreProps = _EVNF7KMTcjs.useStoreProps; exports.useStoreState = _EVNF7KMTcjs.useStoreState;

package/cjs/utils/system.d.ts

@@ -27,7 +27,7 @@ export declare function memo<P, T extends React.FC<P>>(Component: T, propsAreEqu
  *
  * <Component customProp render={<button />} />
  */
-export declare function createComponent<O extends Options>(render: (props: Props<O>) => React.ReactElement): Component<O>;
+export declare function createComponent<O extends Options>(render: (props: Props<O>) => React.ReactNode): Component<O>;
 /**
  * Creates a type-safe component with the `as` prop, `React.forwardRef` and
  * `React.memo`.
@@ -46,7 +46,7 @@ export declare function createComponent<O extends Options>(render: (props: Props
  *
  * <Component customProp render={<button />} />
  */
-export declare function createMemoComponent<O extends Options>(render: (props: Props<O>) => React.ReactElement): Component<O>;
+export declare function createMemoComponent<O extends Options>(render: (props: Props<O>) => React.ReactNode): Component<O>;
 /**
  * Creates a React element that supports the `render` and `wrapElement` props.
  * @example

package/dialog/utils/disable-tree/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/disable-tree",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/disable-tree.cjs",
+  "module": "../../../esm/dialog/utils/disable-tree.js",
+  "types": "../../../cjs/dialog/utils/disable-tree.d.ts"
+}

package/esm/__chunks/{VDTDCNMP.js → 2BTPJSKW.js}

@@ -7,10 +7,10 @@ import {
 } from "./YVYWIVKG.js";
 import {
   useComposite
-} from "./HYNMOU7J.js";
+} from "./56TAEBRJ.js";
 import {
   isHidden
-} from "./3D7ZB3CS.js";
+} from "./KK6NPMOP.js";
 import {
   createComponent,
   createElement,
@@ -18,7 +18,7 @@ import {
 } from "./CFEUKV6C.js";
 import {
   useStoreState
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useEvent,
   useId,

package/esm/__chunks/{3HFOFZP4.js → 2FIUKXIM.js}

@@ -7,7 +7,7 @@ import {
 } from "./CFEUKV6C.js";
 import {
   useStoreState
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/__chunks/{KZMKUBQH.js → 2Q7ASGJM.js}

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

package/esm/__chunks/{QJMIKN5O.js → 3FLPLDNL.js}

@@ -7,10 +7,10 @@ import {
 } from "./US4OMDIO.js";
 import {
   useComposite
-} from "./HYNMOU7J.js";
+} from "./56TAEBRJ.js";
 import {
   isHidden
-} from "./3D7ZB3CS.js";
+} from "./KK6NPMOP.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{HMYMEP6U.js → 3KBWC7LF.js}

@@ -1,6 +1,6 @@
 import {
   useButton
-} from "./QPWEKAWF.js";
+} from "./TONP6TZ5.js";
 import {
   useDialogScopedContext
 } from "./5YYGDU4E.js";

package/esm/__chunks/{4SB2BYFE.js → 3X3TLUHU.js}

@@ -3,14 +3,14 @@ import {
 } from "./QP4RN5UY.js";
 import {
   useCompositeStoreProps
-} from "./WGAKICTY.js";
+} from "./WRZGD4DH.js";
 import {
   usePopoverStoreProps
-} from "./H2BG4QDT.js";
+} from "./QTZ67ALK.js";
 import {
   useStore,
   useStoreProps
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useUpdateEffect
 } from "./J7Q2EO23.js";
@@ -26,6 +26,7 @@ function useSelectStoreProps(store, update, props) {
   store = useCompositeStoreProps(store, update, props);
   store = usePopoverStoreProps(store, update, props);
   useStoreProps(store, props, "value", "setValue");
+  useStoreProps(store, props, "setValueOnMove");
   return Object.assign(store, { combobox: props.combobox });
 }
 function useSelectStore(props = {}) {

package/esm/__chunks/{HYNMOU7J.js → 56TAEBRJ.js}

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

package/esm/__chunks/{TQ2YQL6O.js → 5EAW3TWZ.js}

@@ -1,6 +1,6 @@
 import {
   useDisclosure
-} from "./7AFOF5E7.js";
+} from "./LRDCOOWL.js";
 import {
   useDialogProviderContext
 } from "./5YYGDU4E.js";
@@ -15,11 +15,21 @@ import {
 } from "./PNRLI7OV.js";
 
 // src/dialog/dialog-disclosure.ts
+import { getPopupRole } from "@ariakit/core/utils/dom";
+import { invariant } from "@ariakit/core/utils/misc";
 var useDialogDisclosure = createHook(
   (_a) => {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useDialogProviderContext();
     store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "DialogDisclosure must receive a `store` prop or be wrapped in a DialogProvider component."
+    );
+    const contentElement = store.useState("contentElement");
+    props = __spreadValues({
+      "aria-haspopup": getPopupRole(contentElement, "dialog")
+    }, props);
     props = useDisclosure(__spreadValues({ store }, props));
     return props;
   }

package/esm/__chunks/{V5EW3YHP.js → 6F7MKZK2.js}

@@ -1,13 +1,13 @@
 import {
   useCompositeStoreProps
-} from "./WGAKICTY.js";
+} from "./WRZGD4DH.js";
 import {
   usePopoverStoreProps
-} from "./H2BG4QDT.js";
+} from "./QTZ67ALK.js";
 import {
   useStore,
   useStoreProps
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 
 // src/combobox/combobox-store.ts
 import * as Core from "@ariakit/core/combobox/combobox-store";

package/esm/__chunks/{UQFOL5I6.js → 6W46XYWY.js}

@@ -1,10 +1,10 @@
 import {
   usePopoverStoreProps
-} from "./H2BG4QDT.js";
+} from "./QTZ67ALK.js";
 import {
   useStore,
   useStoreProps
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 
 // src/hovercard/hovercard-store.ts
 import * as Core from "@ariakit/core/hovercard/hovercard-store";

package/esm/__chunks/{HAVCR65N.js → 7LB47D2O.js}

@@ -1,6 +1,6 @@
 import {
   isElementMarked
-} from "./KGDYSCOM.js";
+} from "./FRKOFFMT.js";
 import {
   usePreviousMouseDownRef
 } from "./7JNF6I52.js";

package/esm/__chunks/{X5VV5CBA.js → 7VWXICM7.js}

@@ -3,7 +3,7 @@ import {
 } from "./IXXFVVA2.js";
 import {
   walkTreeOutside
-} from "./5M4ITSXL.js";
+} from "./VRCYQ6JX.js";
 import {
   setAttribute
 } from "./FW6QFGFT.js";
@@ -12,10 +12,10 @@ import {
 function hideElementFromAccessibilityTree(element) {
   return setAttribute(element, "aria-hidden", "true");
 }
-function disableAccessibilityTreeOutside(...elements) {
+function disableAccessibilityTreeOutside(id, elements) {
   const cleanups = [];
   const ids = elements.map((el) => el == null ? void 0 : el.id);
-  walkTreeOutside(elements, (element) => {
+  walkTreeOutside(id, elements, (element) => {
     if (isBackdrop(element, ...ids))
       return;
     cleanups.unshift(hideElementFromAccessibilityTree(element));

package/esm/__chunks/{VPTWELSR.js → AE5ABTKC.js}

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

package/esm/__chunks/{LND6SMHN.js → CAIAWNDV.js}

@@ -1,6 +1,6 @@
 import {
   useFocusable
-} from "./M4OAD5XF.js";
+} from "./YTHH33BK.js";
 import {
   createComponent,
   createElement,
@@ -116,6 +116,7 @@ var useCommand = createHook(
       if (activeRef.current && isSpace) {
         activeRef.current = false;
         if (!isNativeClick(event)) {
+          event.preventDefault();
           setActive(false);
           const element = event.currentTarget;
           const _a2 = event, { view } = _a2, eventInit = __objRest(_a2, ["view"]);

package/esm/__chunks/{C5JX5C3O.js → DCODCZJS.js}

@@ -1,7 +1,7 @@
 import {
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "./3HFOFZP4.js";
+} from "./2FIUKXIM.js";
 import {
   useCompositeContext
 } from "./5C7J4IAS.js";
@@ -11,7 +11,7 @@ import {
 } from "./CFEUKV6C.js";
 import {
   useStoreState
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useId
 } from "./J7Q2EO23.js";
@@ -105,7 +105,7 @@ function useCompositeRenderer(_a) {
     var _a2;
     if (!state)
       return props.items;
-    if ("mounted" in state && state.mounted)
+    if ("mounted" in state && !state.mounted)
       return 0;
     return (_a2 = props.items) != null ? _a2 : state.items;
   });

package/esm/__chunks/{R4FKKQYI.js → DE62M4L2.js}

@@ -3,7 +3,7 @@ import {
 } from "./NRFPH2ON.js";
 import {
   useCompositeItem
-} from "./72OJKUSZ.js";
+} from "./IQXVWBXC.js";
 import {
   createElement,
   createHook,
@@ -11,7 +11,7 @@ import {
 } from "./CFEUKV6C.js";
 import {
   useStoreState
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useEvent,
   useId,

package/esm/__chunks/{IFNQMENS.js → DLZTS5NV.js}

@@ -7,14 +7,14 @@ import {
 } from "./QP4RN5UY.js";
 import {
   useCompositeStoreProps
-} from "./WGAKICTY.js";
+} from "./WRZGD4DH.js";
 import {
   useHovercardStoreProps
-} from "./UQFOL5I6.js";
+} from "./6W46XYWY.js";
 import {
   useStore,
   useStoreProps
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useUpdateEffect
 } from "./J7Q2EO23.js";

package/esm/__chunks/{D5TF3EQR.js → E3ZC4HKO.js}

@@ -4,10 +4,10 @@ import {
 } from "./QP4RN5UY.js";
 import {
   isHidden
-} from "./3D7ZB3CS.js";
+} from "./KK6NPMOP.js";
 import {
   useFocusable
-} from "./M4OAD5XF.js";
+} from "./YTHH33BK.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{XASENZA4.js → EGOOWJGN.js}

@@ -1,6 +1,6 @@
 import {
   hideElementFromAccessibilityTree
-} from "./X5VV5CBA.js";
+} from "./7VWXICM7.js";
 import {
   supportsInert
 } from "./KOVUJERF.js";
@@ -9,24 +9,31 @@ import {
 } from "./IXXFVVA2.js";
 import {
   walkTreeOutside
-} from "./5M4ITSXL.js";
+} from "./VRCYQ6JX.js";
 import {
   assignStyle,
   setAttribute,
   setProperty
 } from "./FW6QFGFT.js";
 
-// src/dialog/utils/disable-tree-outside.ts
+// src/dialog/utils/disable-tree.ts
 import { contains } from "@ariakit/core/utils/dom";
-import { getAllTabbable } from "@ariakit/core/utils/focus";
+import { getAllTabbableIn } from "@ariakit/core/utils/focus";
 import { chain, noop } from "@ariakit/core/utils/misc";
-function disableElement(element) {
+function disableTree(element, ignoredElements) {
   if (!("style" in element))
     return noop;
   if (supportsInert()) {
     return setProperty(element, "inert", true);
   }
+  const tabbableElements = getAllTabbableIn(element, true);
+  const enableElements = tabbableElements.map((element2) => {
+    if (ignoredElements == null ? void 0 : ignoredElements.some((el) => el && contains(el, element2)))
+      return noop;
+    return setAttribute(element2, "tabindex", "-1");
+  });
   return chain(
+    ...enableElements,
     hideElementFromAccessibilityTree(element),
     assignStyle(element, {
       pointerEvents: "none",
@@ -35,20 +42,13 @@ function disableElement(element) {
     })
   );
 }
-function disableTreeOutside(...elements) {
+function disableTreeOutside(id, elements) {
   const cleanups = [];
   const ids = elements.map((el) => el == null ? void 0 : el.id);
-  if (!supportsInert()) {
-    getAllTabbable().forEach((element) => {
-      if (elements.some((el) => el && contains(el, element)))
-        return;
-      cleanups.unshift(setAttribute(element, "tabindex", "-1"));
-    });
-  }
-  walkTreeOutside(elements, (element) => {
+  walkTreeOutside(id, elements, (element) => {
     if (isBackdrop(element, ...ids))
       return;
-    cleanups.unshift(disableElement(element));
+    cleanups.unshift(disableTree(element, elements));
   });
   const restoreTreeOutside = () => {
     cleanups.forEach((fn) => fn());
@@ -57,5 +57,6 @@ function disableTreeOutside(...elements) {
 }
 
 export {
+  disableTree,
   disableTreeOutside
 };

package/esm/__chunks/{34JEM52B.js → F7UYWUBJ.js}

@@ -5,7 +5,10 @@ import {
 } from "./X7FKJQME.js";
 import {
   usePopover
-} from "./GP4UGJIZ.js";
+} from "./H3CXUGYG.js";
+import {
+  createDialogComponent
+} from "./UXIMR4AS.js";
 import {
   HovercardScopedContextProvider,
   useHovercardProviderContext
@@ -63,33 +66,6 @@ function isMovingOnHovercard(target, card, anchor, nested) {
   }
   return false;
 }
-function useAutoFocusOnShow(_a) {
-  var _b = _a, {
-    store
-  } = _b, props = __objRest(_b, [
-    "store"
-  ]);
-  const open = store.useState("open");
-  const openRef = useLiveRef(open);
-  useEffect(() => {
-    if (!open) {
-      store.setAutoFocusOnShow(false);
-    }
-  }, [open, store]);
-  useEffect(
-    () => () => {
-      if (!openRef.current) {
-        store.setAutoFocusOnShow(false);
-      }
-    },
-    [store]
-  );
-  const modal = !!props.modal;
-  const autoFocusOnShow = store.useState(
-    (state) => modal || state.autoFocusOnShow
-  );
-  return __spreadValues({ autoFocusOnShow }, props);
-}
 function useAutoFocusOnHide(_a) {
   var _b = _a, {
     store
@@ -159,6 +135,7 @@ var useHovercard = createHook(
     const disablePointerEventsProp = useBooleanEvent(
       disablePointerEventsOnApproach
     );
+    const open = store.useState("open");
     const mounted = store.useState("mounted");
     useEffect(() => {
       if (!domReady)
@@ -248,6 +225,23 @@ var useHovercard = createHook(
         addGlobalEventListener("mouseleave", disableEvent, true)
       );
     }, [domReady, mounted, mayDisablePointerEvents, disablePointerEventsProp]);
+    useEffect(() => {
+      if (!domReady)
+        return;
+      if (open)
+        return;
+      store == null ? void 0 : store.setAutoFocusOnShow(false);
+    }, [store, domReady, open]);
+    const openRef = useLiveRef(open);
+    useEffect(() => {
+      if (!domReady)
+        return;
+      return () => {
+        if (!openRef.current) {
+          store == null ? void 0 : store.setAutoFocusOnShow(false);
+        }
+      };
+    }, [store, domReady]);
     const registerOnParent = useContext(NestedHovercardContext);
     useSafeLayoutEffect(() => {
       if (modal)
@@ -285,11 +279,14 @@ var useHovercard = createHook(
       ref: useMergeRefs(ref, props.ref)
     });
     props = useAutoFocusOnHide(__spreadValues({ store }, props));
-    props = useAutoFocusOnShow(__spreadValues({ store, modal }, props));
+    const autoFocusOnShow = store.useState(
+      (state) => modal || state.autoFocusOnShow
+    );
     props = usePopover(__spreadProps(__spreadValues({
       store,
       modal,
-      portal
+      portal,
+      autoFocusOnShow
     }, props), {
       portalRef,
       hideOnEscape(event) {
@@ -306,10 +303,13 @@ var useHovercard = createHook(
     return props;
   }
 );
-var Hovercard = createComponent((props) => {
-  const htmlProps = useHovercard(props);
-  return createElement("div", htmlProps);
-});
+var Hovercard = createDialogComponent(
+  createComponent((props) => {
+    const htmlProps = useHovercard(props);
+    return createElement("div", htmlProps);
+  }),
+  useHovercardProviderContext
+);
 if (process.env.NODE_ENV !== "production") {
   Hovercard.displayName = "Hovercard";
 }

package/esm/__chunks/{KGDYSCOM.js → FRKOFFMT.js}

@@ -3,7 +3,7 @@ import {
 } from "./IXXFVVA2.js";
 import {
   walkTreeOutside
-} from "./5M4ITSXL.js";
+} from "./VRCYQ6JX.js";
 import {
   setProperty
 } from "./FW6QFGFT.js";
@@ -15,18 +15,12 @@ function getPropertyName(id = "", ancestor = false) {
 }
 function markElement(element, id = "") {
   return chain(
-    // Debug
-    // setAttribute(element, getPropertyName(), "true"),
-    // setAttribute(element, getPropertyName(id), "true"),
     setProperty(element, getPropertyName(), true),
     setProperty(element, getPropertyName(id), true)
   );
 }
 function markAncestor(element, id = "") {
   return chain(
-    // Debug
-    // setAttribute(element, getPropertyName("", true), "true"),
-    // setAttribute(element, getPropertyName(id, true), "true"),
     setProperty(element, getPropertyName("", true), true),
     setProperty(element, getPropertyName(id, true), true)
   );
@@ -44,21 +38,22 @@ function isElementMarked(element, id) {
     element = element.parentElement;
   } while (true);
 }
-function markTreeOutside(dialogId, ...elements) {
+function markTreeOutside(id, elements) {
   const cleanups = [];
   const ids = elements.map((el) => el == null ? void 0 : el.id);
   walkTreeOutside(
+    id,
     elements,
     (element) => {
       if (isBackdrop(element, ...ids))
         return;
-      cleanups.unshift(markElement(element, dialogId));
+      cleanups.unshift(markElement(element, id));
     },
     (ancestor, element) => {
-      const isAnotherDialogAncestor = element.hasAttribute("data-dialog") && element.id !== dialogId;
+      const isAnotherDialogAncestor = element.hasAttribute("data-dialog") && element.id !== id;
       if (isAnotherDialogAncestor)
         return;
-      cleanups.unshift(markAncestor(ancestor, dialogId));
+      cleanups.unshift(markAncestor(ancestor, id));
     }
   );
   const restoreAccessibilityTree = () => {

package/esm/__chunks/{GP4UGJIZ.js → H3CXUGYG.js}

@@ -1,6 +1,7 @@
 import {
+  createDialogComponent,
   useDialog
-} from "./4RP654JS.js";
+} from "./UXIMR4AS.js";
 import {
   PopoverScopedContextProvider,
   usePopoverProviderContext
@@ -363,10 +364,13 @@ var usePopover = createHook(
     return props;
   }
 );
-var Popover = createComponent((props) => {
-  const htmlProps = usePopover(props);
-  return createElement("div", htmlProps);
-});
+var Popover = createDialogComponent(
+  createComponent((props) => {
+    const htmlProps = usePopover(props);
+    return createElement("div", htmlProps);
+  }),
+  usePopoverProviderContext
+);
 if (process.env.NODE_ENV !== "production") {
   Popover.displayName = "Popover";
 }

package/esm/__chunks/{4WK6LN27.js → HUAF5DID.js}

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

package/esm/__chunks/{PLOINBVB.js → HWJ7DGMR.js}

@@ -37,13 +37,6 @@ function useNestedDialogs(store) {
       return (_a = context.add) == null ? void 0 : _a.call(context, store);
     });
   }, [store, context]);
-  useSafeLayoutEffect(() => {
-    return sync(context.store, ["open"], (state) => {
-      if (state.open)
-        return;
-      store.hide();
-    });
-  }, [context, store]);
   const providerValue = useMemo(() => ({ store, add }), [store, add]);
   const wrapElement = useCallback(
     (element) => /* @__PURE__ */ jsx(NestedDialogsContext.Provider, { value: providerValue, children: element }),

package/esm/__chunks/{MXSIXS3C.js → HXYXHHNW.js}

@@ -1,6 +1,6 @@
 import {
   useDialogDisclosure
-} from "./TQ2YQL6O.js";
+} from "./5EAW3TWZ.js";
 import {
   usePopoverAnchor
 } from "./4FNI7F6H.js";

package/esm/__chunks/{FBTQUSIH.js → I6Y4PDFW.js}

@@ -1,10 +1,10 @@
 import {
   useCollectionStoreProps
-} from "./NWDF5QDV.js";
+} from "./YS46MLTR.js";
 import {
   useStore,
   useStoreProps
-} from "./XXO3VVQU.js";
+} from "./WHAB4XD6.js";
 import {
   useEvent
 } from "./J7Q2EO23.js";