@ariakit/react-core 0.4.5 → 0.4.7

package/esm/__chunks/{LQ2L5ZRT.js → MIE7UGQE.js}

@@ -4,16 +4,16 @@ import {
 } from "./QFL5V2DO.js";
 import {
   usePopoverContext
-} from "./5B3U64HV.js";
+} from "./URSEQETI.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GUCZNEAD.js";
+} from "./YIF72NQG.js";
 import {
   useMergeRefs,
   useSafeLayoutEffect
-} from "./WOWUAP42.js";
+} from "./OPTPHWV7.js";
 import {
   __objRest,
   __spreadProps,
@@ -21,9 +21,9 @@ import {
 } from "./4R3V3JGP.js";
 
 // src/popover/popover-arrow.tsx
-import { useMemo, useState } from "react";
 import { getWindow } from "@ariakit/core/utils/dom";
 import { invariant, removeUndefinedValues } from "@ariakit/core/utils/misc";
+import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var TagName = "div";
 var defaultSize = 30;
@@ -62,7 +62,7 @@ var usePopoverArrow = createHook(
     const fill = (style == null ? void 0 : style.getPropertyValue("background-color")) || "none";
     const stroke = (style == null ? void 0 : style.getPropertyValue(`border-${dir}-color`)) || "none";
     const borderWidth = (style == null ? void 0 : style.getPropertyValue(`border-${dir}-width`)) || "0px";
-    const strokeWidth = parseInt(borderWidth) * 2 * (defaultSize / size);
+    const strokeWidth = Number.parseInt(borderWidth) * 2 * (defaultSize / size);
     const transform = rotateMap[dir];
     const children = useMemo(
       () => /* @__PURE__ */ jsx("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ jsxs("g", { transform, children: [

package/esm/__chunks/{CKAOM5LG.js → MYBFWPQK.js}

@@ -1,24 +1,24 @@
 "use client";
 import {
   useCommand
-} from "./PJ7ERAIM.js";
+} from "./5EKYTDKF.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GUCZNEAD.js";
+} from "./YIF72NQG.js";
 import {
   useMergeRefs,
   useTagName
-} from "./WOWUAP42.js";
+} from "./OPTPHWV7.js";
 import {
   __spreadProps,
   __spreadValues
 } from "./4R3V3JGP.js";
 
-// src/button/button.ts
-import { useEffect, useRef, useState } from "react";
+// src/button/button.tsx
 import { isButton } from "@ariakit/core/utils/dom";
+import { useEffect, useRef, useState } from "react";
 var TagName = "button";
 var useButton = createHook(
   function useButton2(props) {

package/esm/__chunks/{H5N72W37.js → NETDJWDX.js}

@@ -1,21 +1,21 @@
 "use client";
 import {
   usePopoverDismiss
-} from "./44PDY2W5.js";
+} from "./Y2HD42YR.js";
 import {
   useHovercardScopedContext
-} from "./5YBNH7BL.js";
+} from "./ZPKRQJBS.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GUCZNEAD.js";
+} from "./YIF72NQG.js";
 import {
   __objRest,
   __spreadValues
 } from "./4R3V3JGP.js";
 
-// src/hovercard/hovercard-dismiss.ts
+// src/hovercard/hovercard-dismiss.tsx
 var TagName = "button";
 var useHovercardDismiss = createHook(
   function useHovercardDismiss2(_a) {

package/esm/__chunks/{RSEU2ZAG.js → NXZX7GS5.js}

@@ -1,23 +1,23 @@
 "use client";
 import {
   useDialogDisclosure
-} from "./LTYBQEWX.js";
+} from "./QT5BCKOY.js";
 import {
   usePopoverAnchor
-} from "./DYQUE3V3.js";
+} from "./IH5KTPNA.js";
 import {
   PopoverScopedContextProvider,
   usePopoverProviderContext
-} from "./5B3U64HV.js";
+} from "./URSEQETI.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GUCZNEAD.js";
+} from "./YIF72NQG.js";
 import {
   useEvent,
   useWrapElement
-} from "./WOWUAP42.js";
+} from "./OPTPHWV7.js";
 import {
   __objRest,
   __spreadProps,

package/esm/__chunks/{QRAMDWD7.js → O7HGX5PA.js}

@@ -4,23 +4,22 @@ import {
 } from "./3IEDWLST.js";
 import {
   useCompositeContext
-} from "./QFI3MCMR.js";
+} from "./53KINMNA.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GUCZNEAD.js";
+} from "./YIF72NQG.js";
 import {
   useEvent
-} from "./WOWUAP42.js";
+} from "./OPTPHWV7.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
 } from "./4R3V3JGP.js";
 
-// src/composite/composite-typeahead.ts
-import { useRef } from "react";
+// src/composite/composite-typeahead.tsx
 import { isTextField } from "@ariakit/core/utils/dom";
 import { isSelfTarget } from "@ariakit/core/utils/events";
 import {
@@ -28,6 +27,7 @@ import {
   normalizeString,
   removeUndefinedValues
 } from "@ariakit/core/utils/misc";
+import { useRef } from "react";
 var TagName = "div";
 var chars = "";
 function clearChars() {

package/esm/__chunks/{IFMAUEA7.js → OEBCGVCG.js}

@@ -1,25 +1,25 @@
 "use client";
 import {
   useCollectionContext
-} from "./6LTHW2TQ.js";
+} from "./FU7RTSEI.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GUCZNEAD.js";
+} from "./YIF72NQG.js";
 import {
   useId,
   useMergeRefs
-} from "./WOWUAP42.js";
+} from "./OPTPHWV7.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
 } from "./4R3V3JGP.js";
 
-// src/collection/collection-item.ts
-import { useEffect, useRef } from "react";
+// src/collection/collection-item.tsx
 import { identity, removeUndefinedValues } from "@ariakit/core/utils/misc";
+import { useEffect, useRef } from "react";
 var TagName = "div";
 var useCollectionItem = createHook(
   function useCollectionItem2(_a) {

package/esm/__chunks/{KVETIING.js → OIFL4DQB.js}

@@ -1,25 +1,25 @@
 "use client";
 import {
   useHeading
-} from "./MFIISXWL.js";
+} from "./R3QDAIOX.js";
 import {
   DialogHeadingContext
-} from "./IWHI6Y45.js";
+} from "./J7UNXP2A.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GUCZNEAD.js";
+} from "./YIF72NQG.js";
 import {
   useId,
   useSafeLayoutEffect
-} from "./WOWUAP42.js";
+} from "./OPTPHWV7.js";
 import {
   __objRest,
   __spreadValues
 } from "./4R3V3JGP.js";
 
-// src/dialog/dialog-heading.ts
+// src/dialog/dialog-heading.tsx
 import { useContext } from "react";
 var TagName = "h1";
 var useDialogHeading = createHook(

package/esm/__chunks/{RTMHTBK3.js → OJBHU3NX.js}

@@ -1,30 +1,32 @@
 "use client";
 import {
   useCompositeTypeahead
-} from "./QRAMDWD7.js";
+} from "./O7HGX5PA.js";
 import {
+  SelectHeadingContext,
   SelectScopedContextProvider,
-  useSelectProviderContext
-} from "./SYZHUNAU.js";
+  useSelectContext
+} from "./FXF6FFAU.js";
 import {
   useComposite
-} from "./CDZXDIC7.js";
+} from "./QMBMAMY2.js";
 import {
   isHidden
-} from "./KCMTTTFR.js";
+} from "./TNHM3SUC.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GUCZNEAD.js";
+} from "./YIF72NQG.js";
 import {
   useAttribute,
   useBooleanEvent,
   useEvent,
   useId,
   useMergeRefs,
+  useTransactionState,
   useWrapElement
-} from "./WOWUAP42.js";
+} from "./OPTPHWV7.js";
 import {
   __objRest,
   __spreadProps,
@@ -32,11 +34,12 @@ import {
 } from "./4R3V3JGP.js";
 
 // src/select/select-list.tsx
-import { useEffect, useRef, useState } from "react";
 import { isSelfTarget } from "@ariakit/core/utils/events";
 import { invariant } from "@ariakit/core/utils/misc";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var TagName = "div";
+var SelectListContext = createContext(null);
 var useSelectList = createHook(
   function useSelectList2(_a) {
     var _b = _a, {
@@ -54,13 +57,12 @@ var useSelectList = createHook(
       "composite",
       "alwaysVisible"
     ]);
-    const context = useSelectProviderContext();
+    const context = useSelectContext();
     store = store || context;
     invariant(
       store,
       process.env.NODE_ENV !== "production" && "SelectList must receive a `store` prop or be wrapped in a SelectProvider component."
     );
-    const ref = useRef(null);
     const id = useId(props.id);
     const value = store.useState("value");
     const multiSelectable = Array.isArray(value);
@@ -89,32 +91,54 @@ var useSelectList = createHook(
         }
       }
     });
+    const headingContext = useContext(SelectHeadingContext);
+    const headingState = useState();
+    const [headingId, setHeadingId] = headingContext || headingState;
+    const headingContextValue = useMemo(
+      () => [headingId, setHeadingId],
+      [headingId]
+    );
+    const [childStore, setChildStore] = useState(null);
+    const setStore = useContext(SelectListContext);
+    useEffect(() => {
+      if (!setStore)
+        return;
+      setStore(store);
+      return () => setStore(null);
+    }, [setStore, store]);
     props = useWrapElement(
       props,
-      (element) => /* @__PURE__ */ jsx(SelectScopedContextProvider, { value: store, children: element }),
-      [store]
+      (element2) => /* @__PURE__ */ jsx(SelectScopedContextProvider, { value: store, children: /* @__PURE__ */ jsx(SelectListContext.Provider, { value: setChildStore, children: /* @__PURE__ */ jsx(SelectHeadingContext.Provider, { value: headingContextValue, children: element2 }) }) }),
+      [store, headingContextValue]
     );
-    const labelId = store.useState((state) => {
-      var _a2;
-      return (_a2 = state.labelElement) == null ? void 0 : _a2.id;
-    });
     const hasCombobox = !!store.combobox;
-    composite = composite != null ? composite : !hasCombobox;
-    if (composite) {
-      props = __spreadValues({ role: "listbox" }, props);
-    }
-    const role = useAttribute(ref, "role", props.role);
+    composite = composite != null ? composite : !hasCombobox && childStore !== store;
+    const [element, setElement] = useTransactionState(
+      composite ? store.setListElement : null
+    );
+    const role = useAttribute(element, "role", props.role);
     const isCompositeRole = role === "listbox" || role === "menu" || role === "tree" || role === "grid";
     const ariaMultiSelectable = composite || isCompositeRole ? multiSelectable || void 0 : void 0;
     const hidden = isHidden(mounted, props.hidden, alwaysVisible);
     const style = hidden ? __spreadProps(__spreadValues({}, props.style), { display: "none" }) : props.style;
+    if (composite) {
+      props = __spreadValues({
+        role: "listbox",
+        "aria-multiselectable": ariaMultiSelectable
+      }, props);
+    }
+    const labelId = store.useState(
+      (state) => {
+        var _a2;
+        return headingId || ((_a2 = state.labelElement) == null ? void 0 : _a2.id);
+      }
+    );
     props = __spreadProps(__spreadValues({
       id,
       "aria-labelledby": labelId,
-      "aria-multiselectable": ariaMultiSelectable,
       hidden
     }, props), {
-      ref: useMergeRefs(id ? store.setContentElement : null, ref, props.ref),
+      ref: useMergeRefs(setElement, props.ref),
       style,
       onKeyDown
     });

package/esm/__chunks/{WOWUAP42.js → OPTPHWV7.js}

@@ -1,13 +1,16 @@
 "use client";
 import {
   setRef
-} from "./XM66DUTO.js";
+} from "./4ROCFRIN.js";
 import {
   __spreadProps,
   __spreadValues
 } from "./4R3V3JGP.js";
 
 // src/utils/hooks.ts
+import { canUseDOM } from "@ariakit/core/utils/dom";
+import { addGlobalEventListener } from "@ariakit/core/utils/events";
+import { applyState } from "@ariakit/core/utils/misc";
 import {
   useCallback,
   useEffect,
@@ -18,9 +21,6 @@ import {
   useState
 } from "react";
 import * as React from "react";
-import { canUseDOM } from "@ariakit/core/utils/dom";
-import { addGlobalEventListener } from "@ariakit/core/utils/events";
-import { applyState } from "@ariakit/core/utils/misc";
 var _React = __spreadValues({}, React);
 var useReactId = _React.useId;
 var useReactDeferredValue = _React.useDeferredValue;
@@ -67,12 +67,32 @@ function useEvent(callback) {
     return (_a = ref.current) == null ? void 0 : _a.call(ref, ...args);
   }, []);
 }
+function useTransactionState(callback) {
+  const [state, setState] = useState(null);
+  useSafeLayoutEffect(() => {
+    if (state == null)
+      return;
+    if (!callback)
+      return;
+    let prevState = null;
+    callback((prev) => {
+      prevState = prev;
+      return state;
+    });
+    return () => {
+      callback(prevState);
+    };
+  }, [state, callback]);
+  return [state, setState];
+}
 function useMergeRefs(...refs) {
   return useMemo(() => {
     if (!refs.some(Boolean))
       return;
     return (value) => {
-      refs.forEach((ref) => setRef(ref, value));
+      for (const ref of refs) {
+        setRef(ref, value);
+      }
     };
   }, refs);
 }
@@ -277,6 +297,7 @@ export {
   useLiveRef,
   usePreviousValue,
   useEvent,
+  useTransactionState,
   useMergeRefs,
   useRefId,
   useId,

package/esm/__chunks/{H2NVVTJB.js → OTPVYNVT.js}

@@ -1,23 +1,23 @@
 "use client";
-import {
-  isElementMarked
-} from "./YNKDLCEK.js";
 import {
   usePreviousMouseDownRef
-} from "./OOBDFMJL.js";
+} from "./HLTQOHKZ.js";
+import {
+  isElementMarked
+} from "./3M4W2SZ7.js";
 import {
   useEvent,
   useSafeLayoutEffect
-} from "./WOWUAP42.js";
+} from "./OPTPHWV7.js";
 import {
   __spreadProps,
   __spreadValues
 } from "./4R3V3JGP.js";
 
 // src/dialog/utils/use-hide-on-interact-outside.ts
-import { useEffect, useRef } from "react";
 import { contains, getDocument, isVisible } from "@ariakit/core/utils/dom";
 import { addGlobalEventListener } from "@ariakit/core/utils/events";
+import { useEffect, useRef } from "react";
 function isInDocument(target) {
   if (target.tagName === "HTML")
     return true;

package/esm/__chunks/{BC72XE6E.js → P7YNSWBG.js}

@@ -5,13 +5,13 @@ import {
 } from "./53CQGCDZ.js";
 import {
   useRootDialog
-} from "./4KKLZMKS.js";
+} from "./DDNAPH23.js";
 
 // src/dialog/utils/use-prevent-body-scroll.ts
-import { useEffect } from "react";
 import { getDocument, getWindow } from "@ariakit/core/utils/dom";
 import { chain } from "@ariakit/core/utils/misc";
 import { isApple, isMac } from "@ariakit/core/utils/platform";
+import { useEffect } from "react";
 function getPaddingProperty(documentElement) {
   const documentLeft = documentElement.getBoundingClientRect().left;
   const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft;
@@ -33,7 +33,7 @@ function usePreventBodyScroll(contentElement, contentId, enabled) {
     const win = getWindow(contentElement);
     const { documentElement, body } = doc;
     const cssScrollbarWidth = documentElement.style.getPropertyValue("--scrollbar-width");
-    const scrollbarWidth = cssScrollbarWidth ? parseInt(cssScrollbarWidth) : win.innerWidth - documentElement.clientWidth;
+    const scrollbarWidth = cssScrollbarWidth ? Number.parseInt(cssScrollbarWidth) : win.innerWidth - documentElement.clientWidth;
     const setScrollbarWidthProperty = () => setCSSProperty(
       documentElement,
       "--scrollbar-width",

package/esm/__chunks/{GYE4L7HK.js → PDTGHX74.js}

@@ -2,30 +2,30 @@
 import {
   MenuScopedContextProvider,
   useMenuProviderContext
-} from "./3HX4ZAOG.js";
+} from "./A22SDPU3.js";
 import {
   useCompositeTypeahead
-} from "./QRAMDWD7.js";
+} from "./O7HGX5PA.js";
 import {
   useComposite
-} from "./CDZXDIC7.js";
+} from "./QMBMAMY2.js";
 import {
   isHidden
-} from "./KCMTTTFR.js";
+} from "./TNHM3SUC.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GUCZNEAD.js";
+} from "./YIF72NQG.js";
 import {
   useStoreState
-} from "./PWUXK5IM.js";
+} from "./DTNGDFNU.js";
 import {
   useEvent,
   useId,
   useMergeRefs,
   useWrapElement
-} from "./WOWUAP42.js";
+} from "./OPTPHWV7.js";
 import {
   __objRest,
   __spreadProps,
@@ -33,8 +33,8 @@ import {
 } from "./4R3V3JGP.js";
 
 // src/menu/menu-list.tsx
-import { useEffect, useState } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
+import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var TagName = "div";
 function useAriaLabelledBy(_a) {

package/esm/__chunks/{SQ5LSFI6.js → PFZ7V44A.js}

@@ -1,22 +1,22 @@
 "use client";
 import {
   useCollectionStoreProps
-} from "./LGWSZOP2.js";
+} from "./X3TS2MQG.js";
 import {
   useStore,
   useStoreProps
-} from "./PWUXK5IM.js";
+} from "./DTNGDFNU.js";
 import {
   useEvent
-} from "./WOWUAP42.js";
+} from "./OPTPHWV7.js";
 import {
   __spreadProps,
   __spreadValues
 } from "./4R3V3JGP.js";
 
 // src/form/form-store.ts
-import { useCallback, useEffect, useMemo } from "react";
 import * as Core from "@ariakit/core/form/form-store";
+import { useCallback, useEffect, useMemo } from "react";
 function useFormStoreProps(store, update, props) {
   store = useCollectionStoreProps(store, update, props);
   useStoreProps(store, props, "values", "setValues");

package/esm/__chunks/{75M4HBQU.js → PGA74ZJ4.js}

@@ -1,17 +1,17 @@
 "use client";
 import {
   useGroup
-} from "./QY7ICDXC.js";
+} from "./2LDES2MP.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GUCZNEAD.js";
+} from "./YIF72NQG.js";
 import {
   __objRest
 } from "./4R3V3JGP.js";
 
-// src/composite/composite-group.ts
+// src/composite/composite-group.tsx
 var TagName = "div";
 var useCompositeGroup = createHook(
   function useCompositeGroup2(_a) {