@ariakit/react-core 0.2.11 → 0.2.13

package/esm/__chunks/{GMWLPVWD.js → 3QWF4P62.js}

@@ -1,7 +1,7 @@
 import {
   useStore,
   useStoreProps
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 
 // src/checkbox/checkbox-store.ts
 import * as Core from "@ariakit/core/checkbox/checkbox-store";

package/esm/__chunks/{YUYDGNXZ.js → 4L6ILOIA.js}

@@ -11,7 +11,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   useEvent,
   useMergeRefs

package/esm/__chunks/{FHQZ2KRN.js → 563SOJCA.js}

@@ -11,6 +11,7 @@ import {
 // src/utils/store.tsx
 import { useCallback, useMemo } from "react";
 import { hasOwnProperty, identity } from "@ariakit/core/utils/misc";
+import { flushSync } from "react-dom";
 import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 var noopSubscribe = () => () => {
 };
@@ -51,7 +52,7 @@ function useStoreProps(store, props, key, setKey) {
           return;
         if (state[key] === value2)
           return;
-        setValue(state[key]);
+        flushSync(() => setValue(state[key]));
       },
       [key]
     );

package/esm/__chunks/{DTAO6DRL.js → 5UGSKFCK.js}

@@ -1,6 +1,6 @@
 import {
   DialogBackdrop
-} from "./53MSBYTF.js";
+} from "./TM5MM3ME.js";
 import {
   disableTreeOutside
 } from "./AR6DTI3S.js";

package/esm/__chunks/{6DS7ZDWX.js → BFJZP2NO.js}

@@ -1,7 +1,7 @@
 import {
   useStore,
   useStoreProps
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   __spreadValues
 } from "./PNRLI7OV.js";

package/esm/__chunks/{7DE4HW22.js → CTQHL4DC.js}

@@ -3,7 +3,7 @@ import {
 } from "./6I2PARRP.js";
 import {
   useCompositeItem
-} from "./LKA5SFXV.js";
+} from "./LNROWH6D.js";
 import {
   createElement,
   createHook,
@@ -11,7 +11,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   useEvent,
   useId,

package/esm/__chunks/{JFHRFFJJ.js → DP7YKWXP.js}

@@ -1,11 +1,11 @@
 import {
   usePopoverStoreOptions,
   usePopoverStoreProps
-} from "./5QJYOWLQ.js";
+} from "./FAKCYHFK.js";
 import {
   useStore,
   useStoreProps
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   __spreadValues
 } from "./PNRLI7OV.js";

package/esm/__chunks/{5QJYOWLQ.js → FAKCYHFK.js}

@@ -1,11 +1,11 @@
 import {
   useDialogStoreOptions,
   useDialogStoreProps
-} from "./TALTYI5G.js";
+} from "./LYXIRVKB.js";
 import {
   useStore,
   useStoreProps
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   __spreadValues
 } from "./PNRLI7OV.js";

package/esm/__chunks/{SAES3ZFU.js → J2DK7IKI.js}

@@ -1,6 +1,6 @@
 import {
   useDialog
-} from "./DTAO6DRL.js";
+} from "./5UGSKFCK.js";
 import {
   PopoverContext
 } from "./6GS36SYX.js";

package/esm/__chunks/{OK4RCQBZ.js → JQEMLKF6.js}

@@ -1,11 +1,11 @@
 import {
   useCollectionStoreOptions,
   useCollectionStoreProps
-} from "./6DS7ZDWX.js";
+} from "./BFJZP2NO.js";
 import {
   useStore,
   useStoreProps
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   __spreadValues
 } from "./PNRLI7OV.js";

package/esm/__chunks/{LKA5SFXV.js → LNROWH6D.js}

@@ -21,7 +21,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -160,6 +160,7 @@ var useCompositeItem = createHook(
       "aria-setsize",
       "aria-posinset"
     ]);
+    var _a2;
     const context = useContext(CompositeContext);
     store = store || context;
     const id = useId(props.id);
@@ -301,8 +302,8 @@ var useCompositeItem = createHook(
       [providerValue]
     );
     const isActiveItem = useStoreState(store, (state) => state.activeId === id);
-    const role = useRole(ref, props);
     const virtualFocus = useStoreState(store, "virtualFocus");
+    const role = useRole(ref, props);
     let ariaSelected;
     if (isActiveItem) {
       if (requiresAriaSelected(role)) {
@@ -311,10 +312,6 @@ var useCompositeItem = createHook(
         ariaSelected = true;
       }
     }
-    const shouldTabIndex = useStoreState(
-      store,
-      (state) => !(store == null ? void 0 : store.item(id)) || !state.virtualFocus && isActiveItem
-    );
     const ariaSetSize = useStoreState(store, (state) => {
       if (ariaSetSizeProp != null)
         return ariaSetSizeProp;
@@ -336,13 +333,18 @@ var useCompositeItem = createHook(
       );
       return row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id);
     });
+    const isTabbable = (_a2 = useStoreState(store, (state) => {
+      if (!state.renderedItems.length)
+        return true;
+      return !state.virtualFocus && state.activeId === id;
+    })) != null ? _a2 : true;
     props = __spreadProps(__spreadValues({
       id,
       "aria-selected": ariaSelected,
       "data-active-item": isActiveItem ? "" : void 0
     }, props), {
       ref: useMergeRefs(ref, props.ref),
-      tabIndex: shouldTabIndex !== false ? props.tabIndex : -1,
+      tabIndex: isTabbable ? props.tabIndex : -1,
       onFocus,
       onBlurCapture,
       onKeyDown

package/esm/__chunks/{BB7NHN6A.js → LU22MAAA.js}

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

package/esm/__chunks/{TALTYI5G.js → LYXIRVKB.js}

@@ -1,10 +1,10 @@
 import {
   useDisclosureStoreOptions,
   useDisclosureStoreProps
-} from "./54LBRJ55.js";
+} from "./LZ4RMGK5.js";
 import {
   useStore
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   __spreadValues
 } from "./PNRLI7OV.js";

package/esm/__chunks/{54LBRJ55.js → LZ4RMGK5.js}

@@ -1,7 +1,7 @@
 import {
   useStore,
   useStoreProps
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   __spreadValues
 } from "./PNRLI7OV.js";

package/esm/__chunks/M5I7AM4N.js

@@ -0,0 +1,58 @@
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./NQJBHION.js";
+
+// src/role/role.ts
+var elements = [
+  "a",
+  "button",
+  "details",
+  "dialog",
+  "div",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "header",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "section",
+  "select",
+  "span",
+  "textarea",
+  "ul",
+  "svg"
+];
+var useRole = createHook((props) => {
+  return props;
+});
+var Role = createComponent((props) => {
+  return createElement("div", props);
+});
+if (process.env.NODE_ENV !== "production") {
+  Role.displayName = "Role";
+}
+Object.assign(
+  Role,
+  elements.reduce((acc, element) => {
+    acc[element] = createComponent((props) => {
+      return createElement(element, props);
+    });
+    return acc;
+  }, {})
+);
+
+export {
+  useRole,
+  Role
+};

package/esm/__chunks/{BHLCYMUN.js → OQKUGLAX.js}

@@ -11,7 +11,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   useEvent,
   useMergeRefs,

package/esm/__chunks/{235GG2QE.js → RLFO7W2T.js}

@@ -10,7 +10,7 @@ import {
 } from "./W5P7IKOU.js";
 import {
   useCompositeItem
-} from "./LKA5SFXV.js";
+} from "./LNROWH6D.js";
 import {
   createElement,
   createHook,
@@ -18,7 +18,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   useBooleanEvent,
   useEvent

package/esm/__chunks/{53MSBYTF.js → TM5MM3ME.js}

@@ -3,13 +3,13 @@ import {
 } from "./HCZMY53N.js";
 import {
   Role
-} from "./4PKIGBPJ.js";
+} from "./M5I7AM4N.js";
 import {
   useDisclosureContent
 } from "./WHEEIXMF.js";
 import {
   useDisclosureStore
-} from "./54LBRJ55.js";
+} from "./LZ4RMGK5.js";
 import {
   useMergeRefs,
   useSafeLayoutEffect

package/esm/__chunks/{PE45DLWW.js → VJKEASM4.js}

@@ -7,7 +7,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/__chunks/{NRNLVKYP.js → X44LESGC.js}

@@ -18,7 +18,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   useEvent,
   useId,

package/esm/__chunks/{TLXPUO3M.js → XSCTYXG5.js}

@@ -1,7 +1,7 @@
 import {
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "./PE45DLWW.js";
+} from "./VJKEASM4.js";
 import {
   CompositeContext
 } from "./WJ37OVG2.js";
@@ -11,7 +11,7 @@ import {
 } from "./NQJBHION.js";
 import {
   useStoreState
-} from "./FHQZ2KRN.js";
+} from "./563SOJCA.js";
 import {
   useId
 } from "./J7Q2EO23.js";

package/esm/__chunks/{YIFTA7US.js → ZII73YFS.js}

@@ -1,6 +1,6 @@
 import {
   useCompositeItem
-} from "./LKA5SFXV.js";
+} from "./LNROWH6D.js";
 import {
   createElement,
   createHook,

package/esm/checkbox/checkbox-store.js

@@ -2,8 +2,8 @@ import {
   useCheckboxStore,
   useCheckboxStoreOptions,
   useCheckboxStoreProps
-} from "../__chunks/GMWLPVWD.js";
-import "../__chunks/FHQZ2KRN.js";
+} from "../__chunks/3QWF4P62.js";
+import "../__chunks/563SOJCA.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/checkbox/checkbox.d.ts

@@ -62,16 +62,10 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
      * The `checked` state of the checkbox. This will override the value inferred
      * from `store` prop, if provided. This can be `"mixed"` to indicate that the
      * checkbox is partially checked.
-     *
-     * Live examples:
-     * - [Controlled Checkbox](https://ariakit.org/examples/checkbox-controlled)
      */
     checked?: "mixed" | boolean;
     /**
      * A function that is called when the checkbox's `checked` store changes.
-     *
-     * Live examples:
-     * - [Controlled Checkbox](https://ariakit.org/examples/checkbox-controlled)
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }

package/esm/checkbox/checkbox.js

@@ -1,13 +1,13 @@
 import {
   Checkbox,
   useCheckbox
-} from "../__chunks/BHLCYMUN.js";
+} from "../__chunks/OQKUGLAX.js";
 import "../__chunks/M5KYRTQG.js";
 import "../__chunks/P4RGQGTG.js";
 import "../__chunks/MYID4V27.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/NQJBHION.js";
-import "../__chunks/FHQZ2KRN.js";
+import "../__chunks/563SOJCA.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/collection/collection-renderer.js

@@ -3,10 +3,10 @@ import {
   getCollectionRendererItem,
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "../__chunks/PE45DLWW.js";
+} from "../__chunks/VJKEASM4.js";
 import "../__chunks/T3DJZG63.js";
 import "../__chunks/NQJBHION.js";
-import "../__chunks/FHQZ2KRN.js";
+import "../__chunks/563SOJCA.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/collection/collection-store.js

@@ -2,8 +2,8 @@ import {
   useCollectionStore,
   useCollectionStoreOptions,
   useCollectionStoreProps
-} from "../__chunks/6DS7ZDWX.js";
-import "../__chunks/FHQZ2KRN.js";
+} from "../__chunks/BFJZP2NO.js";
+import "../__chunks/563SOJCA.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/combobox/combobox-item.js

@@ -7,7 +7,7 @@ import {
 } from "../__chunks/W5P7IKOU.js";
 import {
   useCompositeItem
-} from "../__chunks/LKA5SFXV.js";
+} from "../__chunks/LNROWH6D.js";
 import "../__chunks/P4RGQGTG.js";
 import "../__chunks/HGFTMLQ7.js";
 import "../__chunks/T3DJZG63.js";
@@ -20,7 +20,7 @@ import {
   createHook,
   createMemoComponent
 } from "../__chunks/NQJBHION.js";
-import "../__chunks/FHQZ2KRN.js";
+import "../__chunks/563SOJCA.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/combobox/combobox-popover.js

@@ -4,9 +4,9 @@ import {
 import "../__chunks/5VGBBGF5.js";
 import {
   usePopover
-} from "../__chunks/SAES3ZFU.js";
-import "../__chunks/DTAO6DRL.js";
-import "../__chunks/53MSBYTF.js";
+} from "../__chunks/J2DK7IKI.js";
+import "../__chunks/5UGSKFCK.js";
+import "../__chunks/TM5MM3ME.js";
 import "../__chunks/AR6DTI3S.js";
 import "../__chunks/CYJJUQU3.js";
 import "../__chunks/3LAWLNOX.js";
@@ -27,7 +27,7 @@ import "../__chunks/EJ3GIT5B.js";
 import "../__chunks/LDDPB3PY.js";
 import "../__chunks/COQHFAEN.js";
 import "../__chunks/LNHZLQEK.js";
-import "../__chunks/4PKIGBPJ.js";
+import "../__chunks/M5I7AM4N.js";
 import "../__chunks/WHEEIXMF.js";
 import "../__chunks/6GS36SYX.js";
 import "../__chunks/MYID4V27.js";
@@ -38,8 +38,8 @@ import {
   createElement,
   createHook
 } from "../__chunks/NQJBHION.js";
-import "../__chunks/54LBRJ55.js";
-import "../__chunks/FHQZ2KRN.js";
+import "../__chunks/LZ4RMGK5.js";
+import "../__chunks/563SOJCA.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import {
@@ -89,7 +89,7 @@ var useComboboxPopover = createHook(
       // Make sure we don't hide the popover when the user interacts with the
       // combobox cancel or the combobox disclosure buttons. They will have the
       // aria-controls attribute pointing to either the combobox input or the
-      // comboobx popover elements.
+      // combobox popover elements.
       hideOnInteractOutside: (event) => {
         const { contentElement, baseElement: baseElement2 } = store.getState();
         const contentId = contentElement == null ? void 0 : contentElement.id;

package/esm/combobox/combobox-store.js

@@ -1,18 +1,18 @@
 import {
   useCompositeStoreOptions,
   useCompositeStoreProps
-} from "../__chunks/OK4RCQBZ.js";
-import "../__chunks/6DS7ZDWX.js";
+} from "../__chunks/JQEMLKF6.js";
+import "../__chunks/BFJZP2NO.js";
 import {
   usePopoverStoreOptions,
   usePopoverStoreProps
-} from "../__chunks/5QJYOWLQ.js";
-import "../__chunks/TALTYI5G.js";
-import "../__chunks/54LBRJ55.js";
+} from "../__chunks/FAKCYHFK.js";
+import "../__chunks/LYXIRVKB.js";
+import "../__chunks/LZ4RMGK5.js";
 import {
   useStore,
   useStoreProps
-} from "../__chunks/FHQZ2KRN.js";
+} from "../__chunks/563SOJCA.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import {

package/esm/combobox/combobox.js

@@ -178,14 +178,24 @@ var useCombobox = createHook(
       if (!scrollingElement)
         return;
       scrollingElementRef.current = scrollingElement;
+      const onWheel = () => {
+        canAutoSelectRef.current = false;
+      };
       const onScroll = () => {
         const { activeId } = store.getState();
-        if (activeId === null || activeId === store.first())
+        if (activeId === null)
+          return;
+        if (activeId === store.first())
           return;
         canAutoSelectRef.current = false;
       };
-      scrollingElement.addEventListener("scroll", onScroll, { passive: true });
-      return () => scrollingElement.removeEventListener("scroll", onScroll);
+      const options = { passive: true, capture: true };
+      scrollingElement.addEventListener("wheel", onWheel, options);
+      scrollingElement.addEventListener("scroll", onScroll, options);
+      return () => {
+        scrollingElement.removeEventListener("wheel", onWheel, true);
+        scrollingElement.removeEventListener("scroll", onScroll, true);
+      };
     }, [open, contentElement, store]);
     useSafeLayoutEffect(() => {
       if (!storeValue)
@@ -247,7 +257,7 @@ var useCombobox = createHook(
       onChangeProp == null ? void 0 : onChangeProp(event);
       if (event.defaultPrevented)
         return;
-      const { target } = event;
+      const { value: value2, selectionStart } = event.target;
       const nativeEvent = event.nativeEvent;
       canAutoSelectRef.current = true;
       if (isInputEvent(nativeEvent)) {
@@ -257,7 +267,7 @@ var useCombobox = createHook(
         }
         if (inline) {
           const textInserted = nativeEvent.inputType === "insertText" || nativeEvent.inputType === "insertCompositionText";
-          const caretAtEnd = target.selectionStart === target.value.length;
+          const caretAtEnd = selectionStart === value2.length;
           setCanInline(textInserted && caretAtEnd);
         }
       }
@@ -265,8 +275,8 @@ var useCombobox = createHook(
         store.show();
       }
       if (setValueOnChangeProp(event)) {
-        const isSameValue = target.value === store.getState().value;
-        store.setValue(target.value);
+        const isSameValue = value2 === store.getState().value;
+        store.setValue(value2);
         if (inline && autoSelect && isSameValue) {
           forceValueUpdate();
         }

package/esm/composite/composite-container.js

@@ -1,11 +1,11 @@
 import {
   CompositeContainer,
   useCompositeContainer
-} from "../__chunks/YUYDGNXZ.js";
+} from "../__chunks/4L6ILOIA.js";
 import "../__chunks/OXPV2NBK.js";
 import "../__chunks/WJ37OVG2.js";
 import "../__chunks/NQJBHION.js";
-import "../__chunks/FHQZ2KRN.js";
+import "../__chunks/563SOJCA.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/composite/composite-item.js

@@ -1,7 +1,7 @@
 import {
   CompositeItem,
   useCompositeItem
-} from "../__chunks/LKA5SFXV.js";
+} from "../__chunks/LNROWH6D.js";
 import "../__chunks/P4RGQGTG.js";
 import "../__chunks/HGFTMLQ7.js";
 import "../__chunks/T3DJZG63.js";
@@ -10,7 +10,7 @@ import "../__chunks/WJ37OVG2.js";
 import "../__chunks/MYID4V27.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/NQJBHION.js";
-import "../__chunks/FHQZ2KRN.js";
+import "../__chunks/563SOJCA.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/composite/composite-overflow-disclosure.js

@@ -7,7 +7,7 @@ import "../__chunks/O6CV6VRM.js";
 import "../__chunks/7PHM3O7I.js";
 import {
   useCompositeItem
-} from "../__chunks/LKA5SFXV.js";
+} from "../__chunks/LNROWH6D.js";
 import "../__chunks/P4RGQGTG.js";
 import "../__chunks/HGFTMLQ7.js";
 import "../__chunks/T3DJZG63.js";
@@ -21,7 +21,7 @@ import {
   createElement,
   createHook
 } from "../__chunks/NQJBHION.js";
-import "../__chunks/FHQZ2KRN.js";
+import "../__chunks/563SOJCA.js";
 import {
   useEvent,
   useMergeRefs

package/esm/composite/composite-overflow-store.js

@@ -1,12 +1,12 @@
 import {
   usePopoverStoreOptions,
   usePopoverStoreProps
-} from "../__chunks/5QJYOWLQ.js";
-import "../__chunks/TALTYI5G.js";
-import "../__chunks/54LBRJ55.js";
+} from "../__chunks/FAKCYHFK.js";
+import "../__chunks/LYXIRVKB.js";
+import "../__chunks/LZ4RMGK5.js";
 import {
   useStore
-} from "../__chunks/FHQZ2KRN.js";
+} from "../__chunks/563SOJCA.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import {