@ariakit/react-core 0.3.5 → 0.3.7

package/esm/__chunks/BTTOLUHC.js

@@ -0,0 +1,82 @@
+"use client";
+import {
+  MenubarScopedContextProvider,
+  useMenubarProviderContext
+} from "./KA4GX64Z.js";
+import {
+  useMenubarStore
+} from "./LNLZDJD4.js";
+import {
+  useComposite
+} from "./FHDXHZLB.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./3ORBWXWF.js";
+import {
+  useWrapElement
+} from "./6O5OEQGF.js";
+import {
+  __objRest,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/menubar/menubar.tsx
+import { jsx } from "react/jsx-runtime";
+var useMenubar = createHook(
+  (_a) => {
+    var _b = _a, {
+      store: storeProp,
+      composite = true,
+      orientation: orientationProp,
+      virtualFocus,
+      focusLoop,
+      rtl
+    } = _b, props = __objRest(_b, [
+      "store",
+      "composite",
+      "orientation",
+      "virtualFocus",
+      "focusLoop",
+      "rtl"
+    ]);
+    const context = useMenubarProviderContext();
+    storeProp = storeProp || context;
+    const store = useMenubarStore({
+      store: storeProp,
+      orientation: orientationProp,
+      virtualFocus,
+      focusLoop,
+      rtl
+    });
+    const orientation = store.useState(
+      (state) => !composite || state.orientation === "both" ? void 0 : state.orientation
+    );
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(MenubarScopedContextProvider, { value: store, children: element }),
+      [store]
+    );
+    if (composite) {
+      props = __spreadValues({
+        role: "menubar",
+        "aria-orientation": orientation
+      }, props);
+    }
+    props = useComposite(__spreadValues({ store, composite }, props));
+    return props;
+  }
+);
+var Menubar = createComponent((props) => {
+  const htmlProps = useMenubar(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Menubar.displayName = "Menubar";
+}
+
+export {
+  useMenubar,
+  Menubar
+};

package/esm/__chunks/{OKQLSXJX.js → CDFXNOHN.js}

@@ -1,14 +1,14 @@
 "use client";
 import {
   useCollectionContext
-} from "./KSMDNUGB.js";
+} from "./4UUKJZ4V.js";
 import {
   createElement,
   forwardRef
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   useStoreState
-} from "./2ID5JPOO.js";
+} from "./XF5ITC6P.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -16,12 +16,12 @@ import {
   useId,
   useMergeRefs,
   useWrapElement
-} from "./6WEF4WY5.js";
+} from "./6O5OEQGF.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/collection/collection-renderer.tsx
 import {

package/esm/__chunks/{LH4OUJXP.js → CHKJ74UC.js}

@@ -1,16 +1,16 @@
 "use client";
 import {
   useVisuallyHidden
-} from "./B6ZZAB7E.js";
+} from "./BG6HZDS7.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   __spreadProps,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/focus-trap/focus-trap.ts
 var useFocusTrap = createHook((props) => {

package/esm/__chunks/{37XXBWT2.js → CRADASSQ.js}

@@ -2,25 +2,25 @@
 import {
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "./OKQLSXJX.js";
+} from "./CDFXNOHN.js";
 import {
   useCompositeContext
-} from "./X3ATWMYX.js";
+} from "./IB7YUKH5.js";
 import {
   createElement,
   forwardRef
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   useStoreState
-} from "./2ID5JPOO.js";
+} from "./XF5ITC6P.js";
 import {
   useId
-} from "./6WEF4WY5.js";
+} from "./6O5OEQGF.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/composite/composite-renderer.tsx
 import { useMemo } from "react";

package/esm/__chunks/{3I4EOZD7.js → CS347UVZ.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useForceUpdate
-} from "./6WEF4WY5.js";
+} from "./6O5OEQGF.js";
 
 // src/dialog/utils/use-root-dialog.ts
 import { useCallback, useEffect } from "react";

package/esm/__chunks/{4ORPOXHX.js → CVWFS4PP.js}

@@ -2,10 +2,10 @@
 import {
   useStore,
   useStoreProps
-} from "./2ID5JPOO.js";
+} from "./XF5ITC6P.js";
 import {
   useUpdateEffect
-} from "./6WEF4WY5.js";
+} from "./6O5OEQGF.js";
 
 // src/disclosure/disclosure-store.ts
 import * as Core from "@ariakit/core/disclosure/disclosure-store";

package/esm/__chunks/{FNSZIWLG.js → D42GAV4S.js}

@@ -1,33 +1,33 @@
 "use client";
 import {
   useCheckboxContext
-} from "./RVUABR2G.js";
+} from "./VPR2WHQV.js";
 import {
   CheckboxCheckedContext
 } from "./6XBVQI3K.js";
 import {
   useCommand
-} from "./XVQ3TNPZ.js";
+} from "./NWCBQ4CV.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   useStoreState
-} from "./2ID5JPOO.js";
+} from "./XF5ITC6P.js";
 import {
   useEvent,
   useForceUpdate,
   useMergeRefs,
   useTagName,
   useWrapElement
-} from "./6WEF4WY5.js";
+} from "./6O5OEQGF.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/checkbox/checkbox.tsx
 import { useEffect, useRef, useState } from "react";

package/esm/__chunks/{2VASUNFX.js → DIP7XAI7.js}

@@ -1,20 +1,20 @@
 "use client";
 import {
   DialogDescriptionContext
-} from "./SNQAYGW2.js";
+} from "./G6BJYYBK.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   useId,
   useSafeLayoutEffect
-} from "./6WEF4WY5.js";
+} from "./6O5OEQGF.js";
 import {
   __objRest,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/dialog/dialog-description.ts
 import { useContext } from "react";

package/esm/__chunks/{5TQMQMFE.js → E3XM3D67.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   FocusTrap
-} from "./LH4OUJXP.js";
+} from "./CHKJ74UC.js";
 import {
   PortalContext
 } from "./7452U3HH.js";
@@ -9,20 +9,20 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   useMergeRefs,
   useSafeLayoutEffect,
   useWrapElement
-} from "./6WEF4WY5.js";
+} from "./6O5OEQGF.js";
 import {
   setRef
-} from "./OZVWZODE.js";
+} from "./XM66DUTO.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/portal/portal.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -58,11 +58,24 @@ function queueFocus(element) {
 }
 var usePortal = createHook(
   (_a) => {
-    var _b = _a, { preserveTabOrder, portalElement, portalRef, portal = true } = _b, props = __objRest(_b, ["preserveTabOrder", "portalElement", "portalRef", "portal"]);
+    var _b = _a, {
+      preserveTabOrder,
+      preserveTabOrderAnchor,
+      portalElement,
+      portalRef,
+      portal = true
+    } = _b, props = __objRest(_b, [
+      "preserveTabOrder",
+      "preserveTabOrderAnchor",
+      "portalElement",
+      "portalRef",
+      "portal"
+    ]);
     const ref = useRef(null);
     const refProp = useMergeRefs(ref, props.ref);
     const context = useContext(PortalContext);
     const [portalNode, setPortalNode] = useState(null);
+    const [anchorPortalNode, setAnchorPortalNode] = useState(null);
     const outerBeforeRef = useRef(null);
     const innerBeforeRef = useRef(null);
     const innerAfterRef = useRef(null);
@@ -95,6 +108,21 @@ var usePortal = createHook(
         setRef(portalRef, null);
       };
     }, [portal, portalElement, context, portalRef]);
+    useSafeLayoutEffect(() => {
+      if (!preserveTabOrder)
+        return;
+      if (!preserveTabOrderAnchor)
+        return;
+      const doc = getDocument(preserveTabOrderAnchor);
+      const element = doc.createElement("span");
+      element.style.position = "fixed";
+      preserveTabOrderAnchor.insertAdjacentElement("afterend", element);
+      setAnchorPortalNode(element);
+      return () => {
+        element.remove();
+        setAnchorPortalNode(null);
+      };
+    }, [preserveTabOrder, preserveTabOrderAnchor]);
     useEffect(() => {
       if (!portalNode)
         return;
@@ -173,7 +201,7 @@ var usePortal = createHook(
         if (portalNode) {
           element = createPortal(element, portalNode);
         }
-        element = /* @__PURE__ */ jsxs(Fragment, { children: [
+        let preserveTabOrderElement = /* @__PURE__ */ jsxs(Fragment, { children: [
           preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
             FocusTrap,
             {
@@ -192,7 +220,6 @@ var usePortal = createHook(
           preserveTabOrder && // We're using position: fixed here so that the browser doesn't
           // add margin to the element when setting gap on a parent element.
           /* @__PURE__ */ jsx("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }),
-          element,
           preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
             FocusTrap,
             {
@@ -216,9 +243,25 @@ var usePortal = createHook(
             }
           )
         ] });
-        return element;
+        if (anchorPortalNode && preserveTabOrder) {
+          preserveTabOrderElement = createPortal(
+            preserveTabOrderElement,
+            anchorPortalNode
+          );
+        }
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          preserveTabOrderElement,
+          element
+        ] });
       },
-      [portalNode, context, portal, props.id, preserveTabOrder]
+      [
+        portalNode,
+        context,
+        portal,
+        props.id,
+        preserveTabOrder,
+        anchorPortalNode
+      ]
     );
     props = __spreadProps(__spreadValues({}, props), {
       ref: refProp

package/esm/__chunks/{VUP7S67H.js → ELWRSPQ7.js}

@@ -1,11 +1,11 @@
 "use client";
 import {
   useCollectionStoreProps
-} from "./7GWB36ES.js";
+} from "./5A2VZUUV.js";
 import {
   useStore,
   useStoreProps
-} from "./2ID5JPOO.js";
+} from "./XF5ITC6P.js";
 
 // src/composite/composite-store.ts
 import * as Core from "@ariakit/core/composite/composite-store";

package/esm/__chunks/{PLOKN2PQ.js → ENRQQ6LK.js}

@@ -1,20 +1,20 @@
 "use client";
 import {
   useSeparator
-} from "./C3N6W3CQ.js";
+} from "./YZEJGRDQ.js";
 import {
   useCompositeContext
-} from "./X3ATWMYX.js";
+} from "./IB7YUKH5.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/composite/composite-separator.ts
 import { invariant } from "@ariakit/core/utils/misc";

package/esm/__chunks/{LAO6LEBC.js → F6PRXTDU.js}

@@ -1,19 +1,19 @@
 "use client";
 import {
   useDialogDismiss
-} from "./O6OMRIAN.js";
+} from "./NKXUN25E.js";
 import {
   usePopoverScopedContext
-} from "./7CRP5UGO.js";
+} from "./7H5KSHHF.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   __objRest,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/popover/popover-dismiss.ts
 var usePopoverDismiss = createHook(

package/esm/__chunks/{2J2XF6WW.js → FGMA3QUS.js}

@@ -1,19 +1,19 @@
 "use client";
 import {
   usePopoverDismiss
-} from "./LAO6LEBC.js";
+} from "./F6PRXTDU.js";
 import {
   useHovercardScopedContext
-} from "./B4BLW6E7.js";
+} from "./TI7CMBHW.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   __objRest,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/hovercard/hovercard-dismiss.ts
 var useHovercardDismiss = createHook(

package/esm/__chunks/{7PHIY4AC.js → FHDXHZLB.js}

@@ -9,27 +9,27 @@ import {
 import {
   CompositeContextProvider,
   useCompositeProviderContext
-} from "./X3ATWMYX.js";
+} from "./IB7YUKH5.js";
 import {
   useFocusable
-} from "./HJIEYVEO.js";
+} from "./KK7H3W2B.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   useBooleanEvent,
   useEvent,
   useMergeRefs,
   useSafeLayoutEffect,
   useWrapElement
-} from "./6WEF4WY5.js";
+} from "./6O5OEQGF.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/composite/composite.tsx
 import { useCallback, useEffect, useRef, useState } from "react";

package/esm/__chunks/{ZF6AA2GH.js → FS2EVEJO.js}

@@ -1,26 +1,26 @@
 "use client";
 import {
   useFormContext
-} from "./DPO6VSJT.js";
+} from "./V4ZFXDFK.js";
 import {
   useCollectionItem
-} from "./BY5KOAGY.js";
+} from "./UH3I23HL.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   useBooleanEvent,
   useEvent,
   useId,
   useMergeRefs
-} from "./6WEF4WY5.js";
+} from "./6O5OEQGF.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/form/form-field.ts
 import { useCallback, useRef } from "react";

package/esm/__chunks/{EAY52LAK.js → FSFPRQFR.js}

@@ -3,7 +3,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 
 // src/role/role.ts
 var elements = [

package/esm/__chunks/{SNQAYGW2.js → G6BJYYBK.js}

@@ -2,10 +2,10 @@
 import {
   DisclosureContextProvider,
   DisclosureScopedContextProvider
-} from "./P3UIANB7.js";
+} from "./OAYFXAQ2.js";
 import {
   createStoreContext
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 
 // src/dialog/dialog-context.tsx
 import { createContext } from "react";

package/esm/__chunks/{NDBJZBXZ.js → G6ONQ5EH.js}

@@ -1,27 +1,29 @@
 "use client";
 import {
   useCompositeContext
-} from "./X3ATWMYX.js";
+} from "./IB7YUKH5.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "./LFJDOMBA.js";
+} from "./3ORBWXWF.js";
 import {
   useBooleanEvent,
   useEvent,
-  useIsMouseMoving
-} from "./6WEF4WY5.js";
+  useIsMouseMoving,
+  useMergeRefs
+} from "./6O5OEQGF.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./2SMRF6AD.js";
+} from "./4R3V3JGP.js";
 
 // src/composite/composite-hover.ts
-import { closest, contains } from "@ariakit/core/utils/dom";
+import { useCallback } from "react";
+import { contains } from "@ariakit/core/utils/dom";
 import { hasFocus, hasFocusWithin } from "@ariakit/core/utils/focus";
-import { invariant } from "@ariakit/core/utils/misc";
+import { hasOwnProperty, invariant } from "@ariakit/core/utils/misc";
 function getMouseDestination(event) {
   const relatedTarget = event.relatedTarget;
   if ((relatedTarget == null ? void 0 : relatedTarget.nodeType) === Node.ELEMENT_NODE) {
@@ -35,16 +37,29 @@ function hoveringInside(event) {
     return false;
   return contains(event.currentTarget, nextElement);
 }
+var symbol = Symbol("composite-hover");
 function movingToAnotherItem(event) {
-  const dest = getMouseDestination(event);
+  let dest = getMouseDestination(event);
   if (!dest)
     return false;
-  const item = closest(dest, "[data-composite-hover]");
-  return !!item;
+  do {
+    if (hasOwnProperty(dest, symbol) && dest[symbol])
+      return true;
+    dest = dest.parentElement;
+  } while (dest);
+  return false;
 }
 var useCompositeHover = createHook(
   (_a) => {
-    var _b = _a, { store, focusOnHover = true } = _b, props = __objRest(_b, ["store", "focusOnHover"]);
+    var _b = _a, {
+      store,
+      focusOnHover = true,
+      blurOnHoverEnd = !!focusOnHover
+    } = _b, props = __objRest(_b, [
+      "store",
+      "focusOnHover",
+      "blurOnHoverEnd"
+    ]);
     const context = useCompositeContext();
     store = store || context;
     invariant(
@@ -71,6 +86,7 @@ var useCompositeHover = createHook(
       store == null ? void 0 : store.setActiveId(event.currentTarget.id);
     });
     const onMouseLeaveProp = props.onMouseLeave;
+    const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd);
     const onMouseLeave = useEvent((event) => {
       var _a2;
       onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
@@ -84,12 +100,18 @@ var useCompositeHover = createHook(
         return;
       if (!focusOnHoverProp(event))
         return;
+      if (!blurOnHoverEndProp(event))
+        return;
       store == null ? void 0 : store.setActiveId(null);
       (_a2 = store == null ? void 0 : store.getState().baseElement) == null ? void 0 : _a2.focus();
     });
-    props = __spreadProps(__spreadValues({
-      "data-composite-hover": ""
-    }, props), {
+    const ref = useCallback((element) => {
+      if (!element)
+        return;
+      element[symbol] = true;
+    }, []);
+    props = __spreadProps(__spreadValues({}, props), {
+      ref: useMergeRefs(ref, props.ref),
       onMouseMove,
       onMouseLeave
     });