@ariakit/react-core 0.4.13 → 0.4.15

package/esm/__chunks/YF2ICFG4.js

@@ -0,0 +1,176 @@
+"use client";
+import {
+  useCompositeHover
+} from "./UQQRIHDV.js";
+import {
+  SelectItemCheckedContext,
+  useSelectScopedContext
+} from "./KPEX55MY.js";
+import {
+  useCompositeItem
+} from "./P2CTZE2T.js";
+import {
+  createElement,
+  createHook,
+  forwardRef,
+  memo
+} from "./LMDWO4NN.js";
+import {
+  useStoreStateObject
+} from "./YV4JVR4I.js";
+import {
+  useBooleanEvent,
+  useEvent,
+  useId,
+  useWrapElement
+} from "./ABQUS43J.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./3YLGPPWQ.js";
+
+// src/select/select-item.tsx
+import { getPopupItemRole } from "@ariakit/core/utils/dom";
+import { isDownloading, isOpeningInNewTab } from "@ariakit/core/utils/events";
+import { disabledFromProps, invariant } from "@ariakit/core/utils/misc";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var TagName = "div";
+function isSelected(storeValue, itemValue) {
+  if (itemValue == null) return;
+  if (storeValue == null) return false;
+  if (Array.isArray(storeValue)) {
+    return storeValue.includes(itemValue);
+  }
+  return storeValue === itemValue;
+}
+var useSelectItem = createHook(
+  function useSelectItem2(_a) {
+    var _b = _a, {
+      store,
+      value,
+      getItem: getItemProp,
+      hideOnClick,
+      setValueOnClick = value != null,
+      preventScrollOnKeyDown = true,
+      focusOnHover = true
+    } = _b, props = __objRest(_b, [
+      "store",
+      "value",
+      "getItem",
+      "hideOnClick",
+      "setValueOnClick",
+      "preventScrollOnKeyDown",
+      "focusOnHover"
+    ]);
+    var _a2;
+    const context = useSelectScopedContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "SelectItem must be wrapped in a SelectList or SelectPopover component."
+    );
+    const id = useId(props.id);
+    const disabled = disabledFromProps(props);
+    const { listElement, multiSelectable, selected, autoFocus } = useStoreStateObject(store, {
+      listElement: "listElement",
+      multiSelectable(state) {
+        return Array.isArray(state.value);
+      },
+      selected(state) {
+        return isSelected(state.value, value);
+      },
+      autoFocus(state) {
+        if (value == null) return false;
+        if (state.value == null) return false;
+        if (state.activeId !== id && (store == null ? void 0 : store.item(state.activeId))) {
+          return false;
+        }
+        if (Array.isArray(state.value)) {
+          return state.value[state.value.length - 1] === value;
+        }
+        return state.value === value;
+      }
+    });
+    const getItem = useCallback(
+      (item) => {
+        const nextItem = __spreadProps(__spreadValues({}, item), {
+          value: disabled ? void 0 : value,
+          children: value
+        });
+        if (getItemProp) {
+          return getItemProp(nextItem);
+        }
+        return nextItem;
+      },
+      [disabled, value, getItemProp]
+    );
+    hideOnClick = hideOnClick != null ? hideOnClick : value != null && !multiSelectable;
+    const onClickProp = props.onClick;
+    const setValueOnClickProp = useBooleanEvent(setValueOnClick);
+    const hideOnClickProp = useBooleanEvent(hideOnClick);
+    const onClick = useEvent((event) => {
+      onClickProp == null ? void 0 : onClickProp(event);
+      if (event.defaultPrevented) return;
+      if (isDownloading(event)) return;
+      if (isOpeningInNewTab(event)) return;
+      if (setValueOnClickProp(event) && value != null) {
+        store == null ? void 0 : store.setValue((prevValue) => {
+          if (!Array.isArray(prevValue)) return value;
+          if (prevValue.includes(value)) {
+            return prevValue.filter((v) => v !== value);
+          }
+          return [...prevValue, value];
+        });
+      }
+      if (hideOnClickProp(event)) {
+        store == null ? void 0 : store.hide();
+      }
+    });
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(SelectItemCheckedContext.Provider, { value: selected != null ? selected : false, children: element }),
+      [selected]
+    );
+    props = __spreadProps(__spreadValues({
+      id,
+      role: getPopupItemRole(listElement),
+      "aria-selected": selected,
+      children: value
+    }, props), {
+      autoFocus: (_a2 = props.autoFocus) != null ? _a2 : autoFocus,
+      onClick
+    });
+    props = useCompositeItem(__spreadValues({
+      store,
+      getItem,
+      preventScrollOnKeyDown
+    }, props));
+    const focusOnHoverProp = useBooleanEvent(focusOnHover);
+    props = useCompositeHover(__spreadProps(__spreadValues({
+      store
+    }, props), {
+      // We have to disable focusOnHover when the popup is closed, otherwise
+      // the active item will change to null (the container) when the popup is
+      // closed by clicking on an item.
+      focusOnHover(event) {
+        if (!focusOnHoverProp(event)) return false;
+        const state = store == null ? void 0 : store.getState();
+        return !!(state == null ? void 0 : state.open);
+      }
+    }));
+    return props;
+  }
+);
+var SelectItem = memo(
+  forwardRef(function SelectItem2(props) {
+    const htmlProps = useSelectItem(props);
+    return createElement(TagName, htmlProps);
+  })
+);
+
+export {
+  useSelectItem,
+  SelectItem
+};

package/esm/__chunks/{SCDU7JWG.js → YKJECYU7.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useForceUpdate
-} from "./HNHAUIIY.js";
+} from "./ABQUS43J.js";
 
 // src/dialog/utils/use-root-dialog.ts
 import { getDocument } from "@ariakit/core/utils/dom";

package/esm/__chunks/{ENWWPSY3.js → YORGHBM4.js}

@@ -1,12 +1,12 @@
 "use client";
 import {
   useGroup
-} from "./T75KQT4U.js";
+} from "./36LIF33V.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "./7FZLUSKW.js";
+} from "./LMDWO4NN.js";
 import {
   __objRest
 } from "./3YLGPPWQ.js";

package/esm/__chunks/{K3WOCAES.js → YTDK2NGG.js}

@@ -1,11 +1,11 @@
 "use client";
 import {
   useHovercardStoreProps
-} from "./JZ2NHXQS.js";
+} from "./FTXTWCCT.js";
 import {
   useStore,
   useStoreProps
-} from "./CTKPPFRS.js";
+} from "./YV4JVR4I.js";
 
 // src/tooltip/tooltip-store.ts
 import * as Core from "@ariakit/core/tooltip/tooltip-store";

package/esm/__chunks/{T5ZXM55C.js → YUOJWFSO.js}

@@ -6,11 +6,11 @@ import {
   createElement,
   createHook,
   forwardRef
-} from "./7FZLUSKW.js";
+} from "./LMDWO4NN.js";
 import {
   useId,
   useSafeLayoutEffect
-} from "./HNHAUIIY.js";
+} from "./ABQUS43J.js";
 import {
   __spreadValues
 } from "./3YLGPPWQ.js";

package/esm/__chunks/{CTKPPFRS.js → YV4JVR4I.js}

@@ -3,7 +3,7 @@ import {
   useEvent,
   useLiveRef,
   useSafeLayoutEffect
-} from "./HNHAUIIY.js";
+} from "./ABQUS43J.js";
 import {
   __spreadProps,
   __spreadValues
@@ -37,6 +37,47 @@ function useStoreState(store, keyOrSelector = identity) {
   };
   return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot);
 }
+function useStoreStateObject(store, object) {
+  const objRef = React.useRef(
+    {}
+  );
+  const storeSubscribe = React.useCallback(
+    (callback) => {
+      if (!store) return noopSubscribe();
+      return subscribe(store, null, callback);
+    },
+    [store]
+  );
+  const getSnapshot = () => {
+    const state = store == null ? void 0 : store.getState();
+    let updated = false;
+    const obj = objRef.current;
+    for (const prop in object) {
+      const keyOrSelector = object[prop];
+      if (typeof keyOrSelector === "function") {
+        const value = keyOrSelector(state);
+        if (value !== obj[prop]) {
+          obj[prop] = value;
+          updated = true;
+        }
+      }
+      if (typeof keyOrSelector === "string") {
+        if (!state) continue;
+        if (!hasOwnProperty(state, keyOrSelector)) continue;
+        const value = state[keyOrSelector];
+        if (value !== obj[prop]) {
+          obj[prop] = value;
+          updated = true;
+        }
+      }
+    }
+    if (updated) {
+      objRef.current = __spreadValues({}, obj);
+    }
+    return objRef.current;
+  };
+  return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot);
+}
 function useStoreProps(store, props, key, setKey) {
   const value = hasOwnProperty(props, key) ? props[key] : void 0;
   const setValue = setKey ? props[setKey] : void 0;
@@ -78,6 +119,7 @@ function useStore(createStore, props) {
 
 export {
   useStoreState,
+  useStoreStateObject,
   useStoreProps,
   useStore
 };

package/esm/__chunks/{2AC4JPCN.js → ZOBNYESQ.js}

@@ -2,20 +2,20 @@
 import {
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "./WTPLYM5X.js";
+} from "./WTCO46W5.js";
 import {
   useCompositeContext
-} from "./APGXEJ2Q.js";
+} from "./P7GR5CS5.js";
 import {
   createElement,
   forwardRef
-} from "./7FZLUSKW.js";
+} from "./LMDWO4NN.js";
 import {
   useStoreState
-} from "./CTKPPFRS.js";
+} from "./YV4JVR4I.js";
 import {
   useId
-} from "./HNHAUIIY.js";
+} from "./ABQUS43J.js";
 import {
   __objRest,
   __spreadProps,

package/esm/__chunks/ZTDSJLD6.js

@@ -0,0 +1,207 @@
+"use client";
+import {
+  useCompositeHover
+} from "./UQQRIHDV.js";
+import {
+  ComboboxItemCheckedContext,
+  ComboboxItemValueContext,
+  ComboboxListRoleContext,
+  useComboboxScopedContext
+} from "./VEVQD5MH.js";
+import {
+  useCompositeItem
+} from "./P2CTZE2T.js";
+import {
+  createElement,
+  createHook,
+  forwardRef,
+  memo
+} from "./LMDWO4NN.js";
+import {
+  useStoreStateObject
+} from "./YV4JVR4I.js";
+import {
+  useBooleanEvent,
+  useEvent,
+  useWrapElement
+} from "./ABQUS43J.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./3YLGPPWQ.js";
+
+// src/combobox/combobox-item.tsx
+import { isTextField } from "@ariakit/core/utils/dom";
+import { isDownloading, isOpeningInNewTab } from "@ariakit/core/utils/events";
+import { hasFocus } from "@ariakit/core/utils/focus";
+import { invariant } from "@ariakit/core/utils/misc";
+import { useCallback, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var TagName = "div";
+function isSelected(storeValue, itemValue) {
+  if (itemValue == null) return;
+  if (storeValue == null) return false;
+  if (Array.isArray(storeValue)) {
+    return storeValue.includes(itemValue);
+  }
+  return storeValue === itemValue;
+}
+function getItemRole(popupRole) {
+  var _a;
+  const itemRoleByPopupRole = {
+    menu: "menuitem",
+    listbox: "option",
+    tree: "treeitem"
+  };
+  const key = popupRole;
+  return (_a = itemRoleByPopupRole[key]) != null ? _a : "option";
+}
+var useComboboxItem = createHook(
+  function useComboboxItem2(_a) {
+    var _b = _a, {
+      store,
+      value,
+      hideOnClick,
+      setValueOnClick,
+      selectValueOnClick = true,
+      resetValueOnSelect,
+      focusOnHover = false,
+      moveOnKeyPress = true,
+      getItem: getItemProp
+    } = _b, props = __objRest(_b, [
+      "store",
+      "value",
+      "hideOnClick",
+      "setValueOnClick",
+      "selectValueOnClick",
+      "resetValueOnSelect",
+      "focusOnHover",
+      "moveOnKeyPress",
+      "getItem"
+    ]);
+    var _a2;
+    const context = useComboboxScopedContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "ComboboxItem must be wrapped in a ComboboxList or ComboboxPopover component."
+    );
+    const { resetValueOnSelectState, multiSelectable, selected } = useStoreStateObject(store, {
+      resetValueOnSelectState: "resetValueOnSelect",
+      multiSelectable(state) {
+        return Array.isArray(state.selectedValue);
+      },
+      selected(state) {
+        return isSelected(state.selectedValue, value);
+      }
+    });
+    const getItem = useCallback(
+      (item) => {
+        const nextItem = __spreadProps(__spreadValues({}, item), { value });
+        if (getItemProp) {
+          return getItemProp(nextItem);
+        }
+        return nextItem;
+      },
+      [value, getItemProp]
+    );
+    setValueOnClick = setValueOnClick != null ? setValueOnClick : !multiSelectable;
+    hideOnClick = hideOnClick != null ? hideOnClick : value != null && !multiSelectable;
+    const onClickProp = props.onClick;
+    const setValueOnClickProp = useBooleanEvent(setValueOnClick);
+    const selectValueOnClickProp = useBooleanEvent(selectValueOnClick);
+    const resetValueOnSelectProp = useBooleanEvent(
+      (_a2 = resetValueOnSelect != null ? resetValueOnSelect : resetValueOnSelectState) != null ? _a2 : multiSelectable
+    );
+    const hideOnClickProp = useBooleanEvent(hideOnClick);
+    const onClick = useEvent((event) => {
+      onClickProp == null ? void 0 : onClickProp(event);
+      if (event.defaultPrevented) return;
+      if (isDownloading(event)) return;
+      if (isOpeningInNewTab(event)) return;
+      if (value != null) {
+        if (selectValueOnClickProp(event)) {
+          if (resetValueOnSelectProp(event)) {
+            store == null ? void 0 : store.resetValue();
+          }
+          store == null ? void 0 : store.setSelectedValue((prevValue) => {
+            if (!Array.isArray(prevValue)) return value;
+            if (prevValue.includes(value)) {
+              return prevValue.filter((v) => v !== value);
+            }
+            return [...prevValue, value];
+          });
+        }
+        if (setValueOnClickProp(event)) {
+          store == null ? void 0 : store.setValue(value);
+        }
+      }
+      if (hideOnClickProp(event)) {
+        store == null ? void 0 : store.hide();
+      }
+    });
+    const onKeyDownProp = props.onKeyDown;
+    const onKeyDown = useEvent((event) => {
+      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+      if (event.defaultPrevented) return;
+      const baseElement = store == null ? void 0 : store.getState().baseElement;
+      if (!baseElement) return;
+      if (hasFocus(baseElement)) return;
+      const printable = event.key.length === 1;
+      if (printable || event.key === "Backspace" || event.key === "Delete") {
+        queueMicrotask(() => baseElement.focus());
+        if (isTextField(baseElement)) {
+          store == null ? void 0 : store.setValue(baseElement.value);
+        }
+      }
+    });
+    if (multiSelectable && selected != null) {
+      props = __spreadValues({
+        "aria-selected": selected
+      }, props);
+    }
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(ComboboxItemValueContext.Provider, { value, children: /* @__PURE__ */ jsx(ComboboxItemCheckedContext.Provider, { value: selected != null ? selected : false, children: element }) }),
+      [value, selected]
+    );
+    const popupRole = useContext(ComboboxListRoleContext);
+    props = __spreadProps(__spreadValues({
+      role: getItemRole(popupRole),
+      children: value
+    }, props), {
+      onClick,
+      onKeyDown
+    });
+    const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
+    props = useCompositeItem(__spreadProps(__spreadValues({
+      store
+    }, props), {
+      getItem,
+      // Dispatch a custom event on the combobox input when moving to an item
+      // with the keyboard so the Combobox component can enable inline
+      // autocompletion.
+      moveOnKeyPress: (event) => {
+        if (!moveOnKeyPressProp(event)) return false;
+        const moveEvent = new Event("combobox-item-move");
+        const baseElement = store == null ? void 0 : store.getState().baseElement;
+        baseElement == null ? void 0 : baseElement.dispatchEvent(moveEvent);
+        return true;
+      }
+    }));
+    props = useCompositeHover(__spreadValues({ store, focusOnHover }, props));
+    return props;
+  }
+);
+var ComboboxItem = memo(
+  forwardRef(function ComboboxItem2(props) {
+    const htmlProps = useComboboxItem(props);
+    return createElement(TagName, htmlProps);
+  })
+);
+
+export {
+  useComboboxItem,
+  ComboboxItem
+};

package/esm/__chunks/{EGBLFVR2.js → ZWYATQFU.js}

@@ -6,10 +6,10 @@ import {
   createElement,
   createHook,
   forwardRef
-} from "./7FZLUSKW.js";
+} from "./LMDWO4NN.js";
 import {
   useWrapElement
-} from "./HNHAUIIY.js";
+} from "./ABQUS43J.js";
 import {
   __objRest
 } from "./3YLGPPWQ.js";

package/esm/button/button.js

@@ -2,12 +2,12 @@
 import {
   Button,
   useButton
-} from "../__chunks/JOBHIYEN.js";
-import "../__chunks/ZHUQ44XA.js";
-import "../__chunks/Z4WWVOIF.js";
+} from "../__chunks/X5NMLKT6.js";
+import "../__chunks/KUU7WJ55.js";
+import "../__chunks/LVA2YJMS.js";
 import "../__chunks/SWN3JYXT.js";
-import "../__chunks/7FZLUSKW.js";
-import "../__chunks/HNHAUIIY.js";
+import "../__chunks/LMDWO4NN.js";
+import "../__chunks/ABQUS43J.js";
 import "../__chunks/SK3NAZA3.js";
 import "../__chunks/3YLGPPWQ.js";
 export {

package/esm/checkbox/checkbox-check.js

@@ -2,10 +2,10 @@
 import {
   CheckboxCheck,
   useCheckboxCheck
-} from "../__chunks/AJFF2SUZ.js";
+} from "../__chunks/5JCRYSSV.js";
 import "../__chunks/EYKMH5G5.js";
-import "../__chunks/7FZLUSKW.js";
-import "../__chunks/HNHAUIIY.js";
+import "../__chunks/LMDWO4NN.js";
+import "../__chunks/ABQUS43J.js";
 import "../__chunks/SK3NAZA3.js";
 import "../__chunks/3YLGPPWQ.js";
 export {

package/esm/checkbox/checkbox-context.js

@@ -5,9 +5,9 @@ import {
   useCheckboxContext,
   useCheckboxProviderContext,
   useCheckboxScopedContext
-} from "../__chunks/3YZMJGQP.js";
-import "../__chunks/7FZLUSKW.js";
-import "../__chunks/HNHAUIIY.js";
+} from "../__chunks/RNCDFVMF.js";
+import "../__chunks/LMDWO4NN.js";
+import "../__chunks/ABQUS43J.js";
 import "../__chunks/SK3NAZA3.js";
 import "../__chunks/3YLGPPWQ.js";
 export {

package/esm/checkbox/checkbox-provider.js

@@ -1,13 +1,13 @@
 "use client";
 import {
   useCheckboxStore
-} from "../__chunks/ISFXQ47C.js";
+} from "../__chunks/HAVBGUA3.js";
 import {
   CheckboxContextProvider
-} from "../__chunks/3YZMJGQP.js";
-import "../__chunks/7FZLUSKW.js";
-import "../__chunks/CTKPPFRS.js";
-import "../__chunks/HNHAUIIY.js";
+} from "../__chunks/RNCDFVMF.js";
+import "../__chunks/LMDWO4NN.js";
+import "../__chunks/YV4JVR4I.js";
+import "../__chunks/ABQUS43J.js";
 import "../__chunks/SK3NAZA3.js";
 import "../__chunks/3YLGPPWQ.js";
 

package/esm/checkbox/checkbox-store.js

@@ -2,9 +2,9 @@
 import {
   useCheckboxStore,
   useCheckboxStoreProps
-} from "../__chunks/ISFXQ47C.js";
-import "../__chunks/CTKPPFRS.js";
-import "../__chunks/HNHAUIIY.js";
+} from "../__chunks/HAVBGUA3.js";
+import "../__chunks/YV4JVR4I.js";
+import "../__chunks/ABQUS43J.js";
 import "../__chunks/SK3NAZA3.js";
 import "../__chunks/3YLGPPWQ.js";
 export {

package/esm/checkbox/checkbox.js

@@ -2,15 +2,15 @@
 import {
   Checkbox,
   useCheckbox
-} from "../__chunks/6P23IZ5Z.js";
-import "../__chunks/3YZMJGQP.js";
+} from "../__chunks/ASMQKSDT.js";
+import "../__chunks/RNCDFVMF.js";
 import "../__chunks/EYKMH5G5.js";
-import "../__chunks/ZHUQ44XA.js";
-import "../__chunks/Z4WWVOIF.js";
+import "../__chunks/KUU7WJ55.js";
+import "../__chunks/LVA2YJMS.js";
 import "../__chunks/SWN3JYXT.js";
-import "../__chunks/7FZLUSKW.js";
-import "../__chunks/CTKPPFRS.js";
-import "../__chunks/HNHAUIIY.js";
+import "../__chunks/LMDWO4NN.js";
+import "../__chunks/YV4JVR4I.js";
+import "../__chunks/ABQUS43J.js";
 import "../__chunks/SK3NAZA3.js";
 import "../__chunks/3YLGPPWQ.js";
 export {

package/esm/collection/collection-context.js

@@ -5,9 +5,9 @@ import {
   useCollectionContext,
   useCollectionProviderContext,
   useCollectionScopedContext
-} from "../__chunks/G4PVPWEW.js";
-import "../__chunks/7FZLUSKW.js";
-import "../__chunks/HNHAUIIY.js";
+} from "../__chunks/VDHZ5F7K.js";
+import "../__chunks/LMDWO4NN.js";
+import "../__chunks/ABQUS43J.js";
 import "../__chunks/SK3NAZA3.js";
 import "../__chunks/3YLGPPWQ.js";
 export {

package/esm/collection/collection-item-offscreen.d.ts

@@ -0,0 +1,19 @@
+import { type RefCallback } from "react";
+import type { ElementType, RefObject } from "react";
+import type { Props } from "../utils/types.ts";
+import * as Base from "./collection-item.tsx";
+declare const TagName = "div";
+type TagName = typeof TagName;
+export declare function useCollectionItemOffscreen<T extends ElementType, P extends CollectionItemProps<T>>({ offscreenBehavior, offscreenRoot, ...props }: P): {
+    id: string | undefined;
+    active: boolean;
+    ref: RefCallback<HTMLDivElement>;
+    "data-offscreen": true | undefined;
+};
+export declare const CollectionItem: ({ offscreenBehavior, offscreenRoot, ...props }: CollectionItemProps) => import("react/jsx-runtime").JSX.Element;
+export interface CollectionItemOptions<T extends ElementType = TagName> extends Base.CollectionItemOptions<T> {
+    offscreenBehavior?: "active" | "passive" | "lazy";
+    offscreenRoot?: HTMLElement | RefObject<HTMLElement> | ((element: HTMLElement) => HTMLElement | null) | null;
+}
+export type CollectionItemProps<T extends ElementType = TagName> = Props<T, CollectionItemOptions<T>>;
+export {};