@ariakit/react-core 0.4.23 → 0.4.25

package/esm/__chunks/{U6HHPQDW.js → GR523XJ6.js}

@@ -6,28 +6,22 @@ import {
   createElement,
   createHook,
   forwardRef
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 import {
   useEvent,
   useMergeRefs,
+  useMetadataProps,
   useTagName
-} from "./KPHZR4MB.js";
+} from "./CEM7J6TT.js";
 
 // src/focusable/focusable.tsx
-import { isButton } from "@ariakit/core/utils/dom";
 import {
   addGlobalEventListener,
   isFocusEventOutside,
-  isPortalEvent,
   isSelfTarget,
   queueBeforeEvent
 } from "@ariakit/core/utils/events";
-import {
-  focusIfNeeded,
-  getClosestFocusable,
-  hasFocus,
-  isFocusable
-} from "@ariakit/core/utils/focus";
+import { hasFocus, isFocusable } from "@ariakit/core/utils/focus";
 import {
   disabledFromProps,
   removeUndefinedValues
@@ -35,6 +29,7 @@ import {
 import { isSafari } from "@ariakit/core/utils/platform";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 var TagName = "div";
+var accessibleWhenDisabledSymbol = /* @__PURE__ */ Symbol("accessibleWhenDisabled");
 var isSafariBrowser = isSafari();
 var alwaysFocusVisibleInputTypes = [
   "text",
@@ -51,15 +46,6 @@ var alwaysFocusVisibleInputTypes = [
   "datetime",
   "datetime-local"
 ];
-var safariFocusAncestorSymbol = Symbol("safariFocusAncestor");
-function isSafariFocusAncestor(element) {
-  if (!element) return false;
-  return !!element[safariFocusAncestorSymbol];
-}
-function markSafariFocusAncestor(element, value) {
-  if (!element) return;
-  element[safariFocusAncestorSymbol] = value;
-}
 function isAlwaysFocusVisible(element) {
   const { tagName, readOnly, type } = element;
   if (tagName === "TEXTAREA" && !readOnly) return true;
@@ -74,19 +60,6 @@ function isAlwaysFocusVisible(element) {
   }
   return false;
 }
-function getLabels(element) {
-  if ("labels" in element) {
-    return element.labels;
-  }
-  return null;
-}
-function isNativeCheckboxOrRadio(element) {
-  const tagName = element.tagName.toLowerCase();
-  if (tagName === "input" && element.type) {
-    return element.type === "radio" || element.type === "checkbox";
-  }
-  return false;
-}
 function isNativeTabbable(tagName) {
   if (!tagName) return true;
   return tagName === "button" || tagName === "summary" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a";
@@ -95,10 +68,31 @@ function supportsDisabledAttribute(tagName) {
   if (!tagName) return true;
   return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea";
 }
-function getTabIndex(focusable, trulyDisabled, nativeTabbable, supportsDisabled, tabIndexProp) {
-  if (!focusable) {
-    return tabIndexProp;
+var buttonInputTypes = [
+  "button",
+  "color",
+  "file",
+  "image",
+  "reset",
+  "submit"
+];
+function needsSafariTabIndex(tagName, inputType) {
+  if (tagName === "button") return true;
+  if (tagName === "input" && inputType) {
+    if (inputType === "checkbox" || inputType === "radio") return true;
+    return buttonInputTypes.includes(inputType);
   }
+  return false;
+}
+function getTabIndex({
+  focusable,
+  trulyDisabled,
+  nativeTabbable,
+  supportsDisabled,
+  safariTabIndex,
+  tabIndexProp
+}) {
+  if (!focusable) return tabIndexProp;
   if (trulyDisabled) {
     if (nativeTabbable && !supportsDisabled) {
       return -1;
@@ -106,9 +100,12 @@ function getTabIndex(focusable, trulyDisabled, nativeTabbable, supportsDisabled,
     return;
   }
   if (nativeTabbable) {
+    if (safariTabIndex && tabIndexProp == null) {
+      return 0;
+    }
     return tabIndexProp;
   }
-  return tabIndexProp || 0;
+  return tabIndexProp != null ? tabIndexProp : 0;
 }
 function useDisableEvent(onEvent, disabled) {
   return useEvent((event) => {
@@ -145,6 +142,12 @@ var useFocusable = createHook(
     ...props
   }) {
     const ref = useRef(null);
+    const [parentAccessibleWhenDisabled, metadataProps] = useMetadataProps(
+      props,
+      accessibleWhenDisabledSymbol,
+      accessibleWhenDisabled
+    );
+    accessibleWhenDisabled != null ? accessibleWhenDisabled : accessibleWhenDisabled = parentAccessibleWhenDisabled;
     useEffect(() => {
       if (!focusable) return;
       if (hasInstalledGlobalEventListeners) return;
@@ -152,25 +155,6 @@ var useFocusable = createHook(
       addGlobalEventListener("keydown", onGlobalKeyDown, true);
       hasInstalledGlobalEventListeners = true;
     }, [focusable]);
-    if (isSafariBrowser) {
-      useEffect(() => {
-        if (!focusable) return;
-        const element = ref.current;
-        if (!element) return;
-        if (!isNativeCheckboxOrRadio(element)) return;
-        const labels = getLabels(element);
-        if (!labels) return;
-        const onMouseUp = () => queueMicrotask(() => element.focus());
-        for (const label of labels) {
-          label.addEventListener("mouseup", onMouseUp);
-        }
-        return () => {
-          for (const label of labels) {
-            label.removeEventListener("mouseup", onMouseUp);
-          }
-        };
-      }, [focusable]);
-    }
     const disabled = focusable && disabledFromProps(props);
     const trulyDisabled = !!disabled && !accessibleWhenDisabled;
     const [focusVisible, setFocusVisible] = useState(false);
@@ -203,30 +187,6 @@ var useFocusable = createHook(
       disabled
     );
     const onClickCapture = useDisableEvent(props.onClickCapture, disabled);
-    const onMouseDownProp = props.onMouseDown;
-    const onMouseDown = useEvent((event) => {
-      onMouseDownProp == null ? void 0 : onMouseDownProp(event);
-      if (event.defaultPrevented) return;
-      if (!focusable) return;
-      const element = event.currentTarget;
-      if (!isSafariBrowser) return;
-      if (isPortalEvent(event)) return;
-      if (!isButton(element) && !isNativeCheckboxOrRadio(element)) return;
-      let receivedFocus = false;
-      const onFocus = () => {
-        receivedFocus = true;
-      };
-      const options = { capture: true, once: true };
-      element.addEventListener("focusin", onFocus, options);
-      const focusableContainer = getClosestFocusable(element.parentElement);
-      markSafariFocusAncestor(focusableContainer, true);
-      queueBeforeEvent(element, "mouseup", () => {
-        element.removeEventListener("focusin", onFocus, true);
-        markSafariFocusAncestor(focusableContainer, false);
-        if (receivedFocus) return;
-        focusIfNeeded(element);
-      });
-    });
     const handleFocusVisible = (event, currentTarget) => {
       if (currentTarget) {
         event.currentTarget = currentTarget;
@@ -294,6 +254,17 @@ var useFocusable = createHook(
     const tagName = useTagName(ref);
     const nativeTabbable = focusable && isNativeTabbable(tagName);
     const supportsDisabled = focusable && supportsDisabledAttribute(tagName);
+    const [safariTabIndex, setSafariTabIndex] = useState(false);
+    if (isSafariBrowser) {
+      useEffect(() => {
+        if (!focusable) return;
+        const element = ref.current;
+        if (!element) return;
+        const tag = element.tagName.toLowerCase();
+        const type = element.type;
+        setSafariTabIndex(needsSafariTabIndex(tag, type));
+      }, [focusable]);
+    }
     const styleProp = props.style;
     const style = useMemo(() => {
       if (trulyDisabled) {
@@ -306,22 +277,23 @@ var useFocusable = createHook(
       "data-autofocus": autoFocus || void 0,
       "aria-disabled": disabled || void 0,
       ...props,
+      ...metadataProps,
       ref: useMergeRefs(ref, autoFocusRef, props.ref),
       style,
-      tabIndex: getTabIndex(
+      tabIndex: getTabIndex({
         focusable,
         trulyDisabled,
         nativeTabbable,
         supportsDisabled,
-        props.tabIndex
-      ),
+        safariTabIndex,
+        tabIndexProp: props.tabIndex
+      }),
       disabled: supportsDisabled && trulyDisabled ? true : void 0,
       // TODO: Test Focusable contentEditable.
       contentEditable: disabled ? void 0 : props.contentEditable,
       onKeyPressCapture,
       onClickCapture,
       onMouseDownCapture,
-      onMouseDown,
       onKeyDownCapture,
       onFocusCapture,
       onBlur
@@ -335,7 +307,6 @@ var Focusable = forwardRef(function Focusable2(props) {
 });
 
 export {
-  isSafariFocusAncestor,
   useFocusable,
   Focusable
 };

package/esm/__chunks/{CVCFNOHX.js → H55QERR5.js}

@@ -2,14 +2,14 @@
 import {
   PopoverContextProvider,
   PopoverScopedContextProvider
-} from "./JMU4N4M5.js";
+} from "./E4DZA6YM.js";
 import {
   CompositeContextProvider,
   CompositeScopedContextProvider
-} from "./AVVXDJMZ.js";
+} from "./55FNNNML.js";
 import {
   createStoreContext
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 
 // src/combobox/combobox-context.tsx
 import { createContext } from "react";

package/esm/__chunks/{FORDJ4GP.js → HOV66IHV.js}

@@ -1,18 +1,18 @@
 "use client";
 import {
   flipItems
-} from "./5VQZOHHZ.js";
+} from "./7NJRHOSP.js";
 import {
   useCompositeContext
-} from "./AVVXDJMZ.js";
+} from "./55FNNNML.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 import {
   useEvent
-} from "./KPHZR4MB.js";
+} from "./CEM7J6TT.js";
 
 // src/composite/composite-typeahead.tsx
 import {

package/esm/__chunks/{RFRKSHIZ.js → HPFXM3JB.js}

@@ -1,23 +1,23 @@
 "use client";
 import {
   usePopoverAnchor
-} from "./4POTBZ2J.js";
+} from "./BLCLYOQG.js";
 import {
   useDialogDisclosure
-} from "./APVORPDK.js";
+} from "./TXH4Y74N.js";
 import {
   PopoverScopedContextProvider,
   usePopoverProviderContext
-} from "./JMU4N4M5.js";
+} from "./E4DZA6YM.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 import {
   useEvent,
   useWrapElement
-} from "./KPHZR4MB.js";
+} from "./CEM7J6TT.js";
 
 // src/popover/popover-disclosure.tsx
 import { invariant } from "@ariakit/core/utils/misc";

package/esm/__chunks/{YBRT277Q.js → I5KTQKBD.js}

@@ -1,15 +1,18 @@
 "use client";
 import {
   useSeparator
-} from "./P7VC6T3R.js";
+} from "./KQPI347I.js";
 import {
   useCompositeContext
-} from "./AVVXDJMZ.js";
+} from "./55FNNNML.js";
+import {
+  useStoreState
+} from "./YAS7X7HB.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 
 // src/composite/composite-separator.tsx
 import { invariant } from "@ariakit/core/utils/misc";
@@ -21,7 +24,8 @@ var useCompositeSeparator = createHook(function useCompositeSeparator2({ store,
     store,
     process.env.NODE_ENV !== "production" && "CompositeSeparator must be wrapped in a Composite component."
   );
-  const orientation = store.useState(
+  const orientation = useStoreState(
+    store,
     (state) => state.orientation === "horizontal" ? "vertical" : "horizontal"
   );
   props = useSeparator({ ...props, orientation });

package/esm/__chunks/{Z2O3VLAQ.js → IKWLDXMV.js}

@@ -1,16 +1,16 @@
 "use client";
 import {
   useCollectionContext
-} from "./SMPCIMZM.js";
+} from "./FQHJBBMI.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 import {
   useId,
   useMergeRefs
-} from "./KPHZR4MB.js";
+} from "./CEM7J6TT.js";
 
 // src/collection/collection-item.tsx
 import { identity, removeUndefinedValues } from "@ariakit/core/utils/misc";

package/esm/__chunks/{ALZMXNL4.js → IO2WX73N.js}

@@ -2,10 +2,10 @@
 import {
   useStore,
   useStoreProps
-} from "./Q5W46E73.js";
+} from "./YAS7X7HB.js";
 import {
   useUpdateEffect
-} from "./KPHZR4MB.js";
+} from "./CEM7J6TT.js";
 
 // src/checkbox/checkbox-store.ts
 import * as Core from "@ariakit/core/checkbox/checkbox-store";

package/esm/__chunks/{N4AHYM2D.js → ITP6SX6R.js}

@@ -1,22 +1,22 @@
 "use client";
 import {
   selectTextField
-} from "./5VQZOHHZ.js";
+} from "./7NJRHOSP.js";
 import {
   useCompositeContext
-} from "./AVVXDJMZ.js";
+} from "./55FNNNML.js";
 import {
   useStoreState
-} from "./Q5W46E73.js";
+} from "./YAS7X7HB.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 import {
   useEvent,
   useMergeRefs
-} from "./KPHZR4MB.js";
+} from "./CEM7J6TT.js";
 
 // src/composite/composite-container.tsx
 import { isButton, isTextField } from "@ariakit/core/utils/dom";

package/esm/__chunks/{62CEUOYM.js → J3UXHN5K.js}

@@ -1,26 +1,26 @@
 "use client";
 import {
   useMenuContext
-} from "./Z4X7TRJU.js";
+} from "./KTCTUSE6.js";
 import {
   useMenubarContext
-} from "./2DUOQURA.js";
+} from "./B7YOUFP2.js";
 import {
   useHovercardStoreProps
-} from "./ECBEZ4YM.js";
+} from "./NV5OUTYH.js";
 import {
   useCompositeStoreProps
-} from "./IQYAUKXT.js";
+} from "./ZJG6VNPS.js";
 import {
   useComboboxProviderContext
-} from "./CVCFNOHX.js";
+} from "./H55QERR5.js";
 import {
   useStore,
   useStoreProps
-} from "./Q5W46E73.js";
+} from "./YAS7X7HB.js";
 import {
   useUpdateEffect
-} from "./KPHZR4MB.js";
+} from "./CEM7J6TT.js";
 
 // src/menu/menu-store.ts
 import * as Core from "@ariakit/core/menu/menu-store";

package/esm/__chunks/{EEZBAPUW.js → JLUH2Q3W.js}

@@ -2,20 +2,20 @@
 import {
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "./WZTAEGYN.js";
+} from "./YVLKMAG2.js";
 import {
   useCompositeContext
-} from "./AVVXDJMZ.js";
+} from "./55FNNNML.js";
 import {
   useStoreState
-} from "./Q5W46E73.js";
+} from "./YAS7X7HB.js";
 import {
   createElement,
   forwardRef
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 import {
   useId
-} from "./KPHZR4MB.js";
+} from "./CEM7J6TT.js";
 
 // src/composite/composite-renderer.tsx
 import { useMemo } from "react";
@@ -138,11 +138,10 @@ function useCompositeRenderer({
     ...props,
     children: (item) => {
       var _a;
-      const nextItem = {
-        ...item,
+      const nextItem = Object.assign({}, item, {
         "aria-setsize": setSize,
         "aria-posinset": ariaPosInSet + ((_a = itemsCount[item.index - 1]) != null ? _a : 0)
-      };
+      });
       return renderItem == null ? void 0 : renderItem(nextItem);
     }
   });

package/esm/__chunks/{I7KWAPMF.js → JQAYMPOA.js}

@@ -1,28 +1,28 @@
 "use client";
 import {
   useCommand
-} from "./PZ3OL7I2.js";
+} from "./GHQLK2M5.js";
 import {
   CheckboxCheckedContext
 } from "./EYKMH5G5.js";
 import {
   useCheckboxContext
-} from "./ZVXT4QFT.js";
+} from "./GOWR535L.js";
 import {
   useStoreState
-} from "./Q5W46E73.js";
+} from "./YAS7X7HB.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 import {
   useEvent,
   useForceUpdate,
   useMergeRefs,
   useTagName,
   useWrapElement
-} from "./KPHZR4MB.js";
+} from "./CEM7J6TT.js";
 
 // src/checkbox/checkbox.tsx
 import {
@@ -91,7 +91,7 @@ var useCheckbox = createHook(
         element.name = name;
       }
       if (valueProp !== void 0) {
-        element.value = `${valueProp}`;
+        element.value = String(valueProp);
       }
     }, [propertyUpdated, mixed, nativeCheckbox, isChecked, name, valueProp]);
     const onChangeProp = props.onChange;

package/esm/__chunks/{KW7Z5AIL.js → JVH3F2PI.js}

@@ -2,22 +2,25 @@
 import {
   createDialogComponent,
   useDialog
-} from "./Z32PU2LQ.js";
+} from "./7WPPMYFR.js";
 import {
   PopoverScopedContextProvider,
   usePopoverProviderContext
-} from "./JMU4N4M5.js";
+} from "./E4DZA6YM.js";
+import {
+  useStoreState
+} from "./YAS7X7HB.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 import {
   useEvent,
   usePortalRef,
   useSafeLayoutEffect,
   useWrapElement
-} from "./KPHZR4MB.js";
+} from "./CEM7J6TT.js";
 
 // src/popover/popover.tsx
 import { invariant } from "@ariakit/core/utils/misc";
@@ -175,14 +178,14 @@ var usePopover = createHook(
       store,
       process.env.NODE_ENV !== "production" && "Popover must receive a `store` prop or be wrapped in a PopoverProvider component."
     );
-    const arrowElement = store.useState("arrowElement");
-    const anchorElement = store.useState("anchorElement");
-    const disclosureElement = store.useState("disclosureElement");
-    const popoverElement = store.useState("popoverElement");
-    const contentElement = store.useState("contentElement");
-    const placement = store.useState("placement");
-    const mounted = store.useState("mounted");
-    const rendered = store.useState("rendered");
+    const arrowElement = useStoreState(store, "arrowElement");
+    const anchorElement = useStoreState(store, "anchorElement");
+    const disclosureElement = useStoreState(store, "disclosureElement");
+    const popoverElement = useStoreState(store, "popoverElement");
+    const contentElement = useStoreState(store, "contentElement");
+    const placement = useStoreState(store, "placement");
+    const mounted = useStoreState(store, "mounted");
+    const rendered = useStoreState(store, "rendered");
     const defaultArrowElementRef = useRef(null);
     const [positioned, setPositioned] = useState(false);
     const { portalRef, domReady } = usePortalRef(portal, props.portalRef);

package/esm/__chunks/{P7VC6T3R.js → KQPI347I.js}

@@ -3,7 +3,7 @@ import {
   createElement,
   createHook,
   forwardRef
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 
 // src/separator/separator.tsx
 var TagName = "hr";

package/esm/__chunks/{SVN33SY6.js → KQS2CH22.js}

@@ -1,21 +1,21 @@
 "use client";
 import {
   useTagContext
-} from "./XSIEPKGA.js";
+} from "./KR5NJL64.js";
 import {
   usePopoverStoreProps
-} from "./B6FLPFJM.js";
+} from "./RPKQBJCW.js";
 import {
   useCompositeStoreOptions,
   useCompositeStoreProps
-} from "./IQYAUKXT.js";
+} from "./ZJG6VNPS.js";
 import {
   useStore,
   useStoreProps
-} from "./Q5W46E73.js";
+} from "./YAS7X7HB.js";
 import {
   useUpdateEffect
-} from "./KPHZR4MB.js";
+} from "./CEM7J6TT.js";
 
 // src/combobox/combobox-store.ts
 import * as Core from "@ariakit/core/combobox/combobox-store";

package/esm/__chunks/{XSIEPKGA.js → KR5NJL64.js}

@@ -2,10 +2,10 @@
 import {
   CompositeContextProvider,
   CompositeScopedContextProvider
-} from "./AVVXDJMZ.js";
+} from "./55FNNNML.js";
 import {
   createStoreContext
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 
 // src/tag/tag-context.tsx
 import { createContext } from "react";

package/esm/__chunks/{Z4X7TRJU.js → KTCTUSE6.js}

@@ -5,18 +5,18 @@ import {
   useMenubarContext,
   useMenubarProviderContext,
   useMenubarScopedContext
-} from "./2DUOQURA.js";
+} from "./B7YOUFP2.js";
 import {
   HovercardContextProvider,
   HovercardScopedContextProvider
-} from "./PTRWAQFT.js";
+} from "./GLWQDZNX.js";
 import {
   CompositeContextProvider,
   CompositeScopedContextProvider
-} from "./AVVXDJMZ.js";
+} from "./55FNNNML.js";
 import {
   createStoreContext
-} from "./GWSL6KNJ.js";
+} from "./TVXRYIJB.js";
 
 // src/menu/menu-context.tsx
 import { createContext } from "react";