@ariakit/react-core 0.1.5 → 0.1.7

package/esm/combobox/combobox.d.ts

@@ -44,35 +44,48 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * Whether the first item will be automatically selected when the combobox
      * input value changes. When it's set to `true`, the exact behavior will
      * depend on the value of `autoComplete` prop:
-     *   - If `autoComplete` is `both` or `inline`, the first item is
-     *     automatically focused when the popup opens, and the input value
-     *     changes to reflect this. The inline completion string will be
-     *     highlighted and will have a selected state.
-     *   - If `autoComplete` is `list` or `none`, the first item is
-     *     automatically focused when the popup opens, but the input value
-     *     doesn't change.
+     * - If `autoComplete` is `both` or `inline`, the first item is automatically
+     *   focused when the popup opens, and the input value changes to reflect
+     *   this. The inline completion string will be highlighted and will have a
+     *   selected state.
+     * - If `autoComplete` is `list` or `none`, the first item is automatically
+     *   focused when the popup opens, but the input value doesn't change.
+     *
+     * Live examples:
+     * - [ComboboxCancel](https://ariakit.org/examples/combobox-cancel)
+     * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
+     * - [Combobox with links](https://ariakit.org/examples/combobox-links)
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
      * @default false
      */
     autoSelect?: boolean;
     /**
      * Whether the items will be filtered based on `value` and whether the input
-     * value will temporarily change based on the active item. If `defaultList`
-     * or `list` are provided, this will be set to `list` by default, otherwise
-     * it'll default to `none`.
-     *   - `both`: the items will be filtered based on `value` and the input
-     *     value will temporarily change based on the active item.
-     *   - `list`: the items will be filtered based on `value` and the input
-     *     value will NOT change based on the active item.
-     *   - `inline`: the items are static, that is, they won't be filtered based
-     *     on `value`, but the input value will temporarily change based on the
-     *     active item.
-     *   - `none`: the items are static and the input value will NOT change
-     *     based on the active item.
+     * value will temporarily change based on the active item. If `defaultList` or
+     * `list` are provided, this will be set to `list` by default, otherwise it'll
+     * default to `none`.
+     * - `both`: the items will be filtered based on `value` and the input value
+     *   will temporarily change based on the active item.
+     * - `list`: the items will be filtered based on `value` and the input value
+     *   will NOT change based on the active item.
+     * - `inline`: the items are static, that is, they won't be filtered based on
+     *   `value`, but the input value will temporarily change based on the active
+     *   item.
+     * - `none`: the items are static and the input value will NOT change based on
+     *   the active item.
+     *
+     * Live examples:
+     * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
      */
     autoComplete?: "both" | "inline" | "list" | "none";
     /**
      * Whether the combobox list/popover should be shown when the input value is
      * changed.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
      * @default true
      * @example
      * ```jsx
@@ -84,12 +97,20 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * Whether the combobox store value will be updated when the input value
      * changes. This is useful if you want to customize how the store value is
      * updated based on the input value.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
      * @default true
      */
     setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
     /**
      * Whether the combobox list/popover should be shown when the input is
      * clicked.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
      * @default true
      * @example
      * ```jsx
@@ -102,6 +123,10 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
     /**
      * Whether the combobox list/popover should be shown when the user presses
      * the arrow up or down keys while focusing on the combobox input element.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
      * @default true
      * @example
      * ```jsx

package/esm/combobox/combobox.js

@@ -1,17 +1,18 @@
 import {
   usePopoverAnchor
-} from "../__chunks/RNWB46DZ.js";
+} from "../__chunks/D6NPK2DL.js";
 import {
   useComposite
-} from "../__chunks/FXC76SFN.js";
-import "../__chunks/STKLF26R.js";
-import "../__chunks/5TGAWEHD.js";
+} from "../__chunks/OY5YT7OV.js";
+import "../__chunks/OXPV2NBK.js";
+import "../__chunks/AGWM73EZ.js";
+import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/Z3X3QN6P.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "../__chunks/JE5NWDDX.js";
+} from "../__chunks/5ETIGB6O.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -21,8 +22,13 @@ import {
   useSafeLayoutEffect,
   useUpdateEffect,
   useUpdateLayoutEffect
-} from "../__chunks/B7MIN7YT.js";
+} from "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/combobox/combobox.ts
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -36,7 +42,7 @@ function isFirstItemAutoSelected(items, activeValue, autoSelect) {
   if (!autoSelect)
     return false;
   const firstItem = items.find((item) => !item.disabled && item.value);
-  return firstItem?.value === activeValue;
+  return (firstItem == null ? void 0 : firstItem.value) === activeValue;
 }
 function hasCompletionString(value, activeValue) {
   if (!activeValue)
@@ -50,19 +56,30 @@ function isInputEvent(event) {
   return event.type === "input";
 }
 var useCombobox = createHook(
-  ({
-    store,
-    focusable = true,
-    autoSelect: autoSelectProp = false,
-    showOnChange = true,
-    setValueOnChange = true,
-    showOnMouseDown = true,
-    setValueOnClick = true,
-    showOnKeyDown = true,
-    moveOnKeyPress = true,
-    autoComplete = "list",
-    ...props
-  }) => {
+  (_a) => {
+    var _b = _a, {
+      store,
+      focusable = true,
+      autoSelect: autoSelectProp = false,
+      showOnChange = true,
+      setValueOnChange = true,
+      showOnMouseDown = true,
+      setValueOnClick = true,
+      showOnKeyDown = true,
+      moveOnKeyPress = true,
+      autoComplete = "list"
+    } = _b, props = __objRest(_b, [
+      "store",
+      "focusable",
+      "autoSelect",
+      "showOnChange",
+      "setValueOnChange",
+      "showOnMouseDown",
+      "setValueOnClick",
+      "showOnKeyDown",
+      "moveOnKeyPress",
+      "autoComplete"
+    ]);
     const ref = useRef(null);
     const [valueUpdated, forceValueUpdate] = useForceUpdate();
     const valueChangedRef = useRef(false);
@@ -95,7 +112,7 @@ var useCombobox = createHook(
       );
       if (firstItemAutoSelected) {
         if (hasCompletionString(storeValue, activeValue)) {
-          const slice = activeValue?.slice(storeValue.length) || "";
+          const slice = (activeValue == null ? void 0 : activeValue.slice(storeValue.length)) || "";
           return storeValue + slice;
         }
         return storeValue;
@@ -156,11 +173,12 @@ var useCombobox = createHook(
       valueChangedRef.current = false;
     }, [open]);
     useUpdateEffect(() => {
+      var _a2;
       if (!autoSelect)
         return;
       if (!valueChangedRef.current)
         return;
-      store.move(store.first() ?? null);
+      store.move((_a2 = store.first()) != null ? _a2 : null);
     }, [store, valueUpdated, storeValue, autoSelect, items]);
     useSafeLayoutEffect(() => {
       if (autoSelect)
@@ -180,16 +198,16 @@ var useCombobox = createHook(
           store.setValue(value);
         }
       };
-      elements.forEach((el) => el?.addEventListener("focusout", onBlur2));
+      elements.forEach((el) => el == null ? void 0 : el.addEventListener("focusout", onBlur2));
       return () => {
-        elements.forEach((el) => el?.removeEventListener("focusout", onBlur2));
+        elements.forEach((el) => el == null ? void 0 : el.removeEventListener("focusout", onBlur2));
       };
     }, [inline, contentElement, store, value]);
     const onChangeProp = props.onChange;
     const showOnChangeProp = useBooleanEvent(showOnChange);
     const setValueOnChangeProp = useBooleanEvent(setValueOnChange);
     const onChange = useEvent((event) => {
-      onChangeProp?.(event);
+      onChangeProp == null ? void 0 : onChangeProp(event);
       if (event.defaultPrevented)
         return;
       const { target } = event;
@@ -222,7 +240,7 @@ var useCombobox = createHook(
     const onCompositionEndProp = props.onCompositionEnd;
     const onCompositionEnd = useEvent(
       (event) => {
-        onCompositionEndProp?.(event);
+        onCompositionEndProp == null ? void 0 : onCompositionEndProp(event);
         if (event.defaultPrevented)
           return;
         valueChangedRef.current = true;
@@ -236,7 +254,7 @@ var useCombobox = createHook(
     const setValueOnClickProp = useBooleanEvent(setValueOnClick);
     const showOnMouseDownProp = useBooleanEvent(showOnMouseDown);
     const onMouseDown = useEvent((event) => {
-      onMouseDownProp?.(event);
+      onMouseDownProp == null ? void 0 : onMouseDownProp(event);
       if (event.defaultPrevented)
         return;
       if (event.button)
@@ -255,7 +273,7 @@ var useCombobox = createHook(
     const showOnKeyDownProp = useBooleanEvent(showOnKeyDown);
     const onKeyDown = useEvent(
       (event) => {
-        onKeyDownProp?.(event);
+        onKeyDownProp == null ? void 0 : onKeyDownProp(event);
         if (event.defaultPrevented)
           return;
         valueChangedRef.current = false;
@@ -282,33 +300,33 @@ var useCombobox = createHook(
     );
     const onBlurProp = props.onBlur;
     const onBlur = useEvent((event) => {
-      onBlurProp?.(event);
+      onBlurProp == null ? void 0 : onBlurProp(event);
       if (event.defaultPrevented)
         return;
       valueChangedRef.current = false;
     });
     const id = useId(props.id);
-    props = {
+    props = __spreadProps(__spreadValues({
       id,
       role: "combobox",
       "aria-autocomplete": autoComplete,
       "aria-haspopup": getPopupRole(contentElement, "listbox"),
       "aria-expanded": open,
-      "aria-controls": contentElement?.id,
-      value,
-      ...props,
+      "aria-controls": contentElement == null ? void 0 : contentElement.id,
+      value
+    }, props), {
       ref: useForkRef(ref, props.ref),
       onChange,
       onCompositionEnd,
       onMouseDown,
       onKeyDown,
       onBlur
-    };
+    });
     const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
-    props = useComposite({
+    props = useComposite(__spreadProps(__spreadValues({
       store,
-      focusable,
-      ...props,
+      focusable
+    }, props), {
       // Enable inline autocomplete when the user moves from the combobox input
       // to an item.
       moveOnKeyPress: (event) => {
@@ -318,9 +336,9 @@ var useCombobox = createHook(
           setCanInline(true);
         return true;
       }
-    });
-    props = usePopoverAnchor({ store, ...props });
-    return { autoComplete: "off", ...props };
+    }));
+    props = usePopoverAnchor(__spreadValues({ store }, props));
+    return __spreadValues({ autoComplete: "off" }, props);
   }
 );
 var Combobox = createComponent((props) => {

package/esm/command/command.js

@@ -1,11 +1,13 @@
 import {
   Command,
   useCommand
-} from "../__chunks/SAVDGYCC.js";
-import "../__chunks/5TGAWEHD.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+} from "../__chunks/4QNHBDVS.js";
+import "../__chunks/AGWM73EZ.js";
+import "../__chunks/BMLNRUFQ.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   Command,
   useCommand

package/esm/composite/composite-container.js

@@ -1,13 +1,14 @@
 import {
   CompositeContainer,
   useCompositeContainer
-} from "../__chunks/7VB6U7Y2.js";
-import "../__chunks/STKLF26R.js";
+} from "../__chunks/5LA7CLO3.js";
+import "../__chunks/OXPV2NBK.js";
 import "../__chunks/Z3X3QN6P.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/LTH56VDS.js";
-import "../__chunks/B7MIN7YT.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/AV5WE37O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   CompositeContainer,
   useCompositeContainer

package/esm/composite/composite-context.js

@@ -3,6 +3,7 @@ import {
   CompositeItemContext,
   CompositeRowContext
 } from "../__chunks/Z3X3QN6P.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   CompositeContext,
   CompositeItemContext,

package/esm/composite/composite-group-label.js

@@ -1,12 +1,13 @@
 import {
   CompositeGroupLabel,
   useCompositeGroupLabel
-} from "../__chunks/NYJYNUSY.js";
-import "../__chunks/SE7IFIBU.js";
+} from "../__chunks/HWXCBMWZ.js";
+import "../__chunks/JNCKMFIN.js";
 import "../__chunks/F5VAC7MB.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   CompositeGroupLabel,
   useCompositeGroupLabel

package/esm/composite/composite-group.js

@@ -1,12 +1,13 @@
 import {
   CompositeGroup,
   useCompositeGroup
-} from "../__chunks/TCSUGBIK.js";
-import "../__chunks/SG5D3YRB.js";
+} from "../__chunks/E6PO3W4O.js";
+import "../__chunks/ECY3BFPU.js";
 import "../__chunks/F5VAC7MB.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   CompositeGroup,
   useCompositeGroup

package/esm/composite/composite-hover.d.ts

@@ -40,6 +40,10 @@ export interface CompositeHoverOptions<T extends As = "div"> extends Options<T>
     store?: CompositeStore;
     /**
      * Whether to focus the composite item on hover.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
      * @default true
      */
     focusOnHover?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;

package/esm/composite/composite-hover.js

@@ -1,11 +1,12 @@
 import {
   CompositeHover,
   useCompositeHover
-} from "../__chunks/DRSUYUM5.js";
+} from "../__chunks/UGXJ5IN7.js";
 import "../__chunks/Z3X3QN6P.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   CompositeHover,
   useCompositeHover

package/esm/composite/composite-input.js

@@ -1,11 +1,12 @@
 import {
   CompositeInput,
   useCompositeInput
-} from "../__chunks/VDIWPJGE.js";
-import "../__chunks/STKLF26R.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+} from "../__chunks/HXGZWZML.js";
+import "../__chunks/OXPV2NBK.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   CompositeInput,
   useCompositeInput

package/esm/composite/composite-item.js

@@ -1,17 +1,19 @@
 import {
   CompositeItem,
   useCompositeItem
-} from "../__chunks/JOV72LYK.js";
-import "../__chunks/SAVDGYCC.js";
-import "../__chunks/ON2AV7GH.js";
+} from "../__chunks/M32DI6TL.js";
+import "../__chunks/4QNHBDVS.js";
+import "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
-import "../__chunks/STKLF26R.js";
-import "../__chunks/5TGAWEHD.js";
+import "../__chunks/OXPV2NBK.js";
+import "../__chunks/AGWM73EZ.js";
+import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/Z3X3QN6P.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/LTH56VDS.js";
-import "../__chunks/B7MIN7YT.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/AV5WE37O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   CompositeItem,
   useCompositeItem

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

@@ -1,35 +1,42 @@
 import {
   usePopoverDisclosure
-} from "../__chunks/JKSMOXA4.js";
-import "../__chunks/NRA7DRSD.js";
-import "../__chunks/57UTLR6J.js";
-import "../__chunks/I4MLEPTM.js";
+} from "../__chunks/6O3TZMB4.js";
+import "../__chunks/LSTZ5Q72.js";
+import "../__chunks/24P2K6AU.js";
+import "../__chunks/OQUXG6FE.js";
 import "../__chunks/6GS36SYX.js";
-import "../__chunks/RNWB46DZ.js";
+import "../__chunks/D6NPK2DL.js";
 import {
   useCompositeItem
-} from "../__chunks/JOV72LYK.js";
-import "../__chunks/SAVDGYCC.js";
-import "../__chunks/ON2AV7GH.js";
+} from "../__chunks/M32DI6TL.js";
+import "../__chunks/4QNHBDVS.js";
+import "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
-import "../__chunks/STKLF26R.js";
-import "../__chunks/5TGAWEHD.js";
+import "../__chunks/OXPV2NBK.js";
+import "../__chunks/AGWM73EZ.js";
+import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/Z3X3QN6P.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "../__chunks/JE5NWDDX.js";
-import "../__chunks/LTH56VDS.js";
+} from "../__chunks/5ETIGB6O.js";
+import "../__chunks/AV5WE37O.js";
 import {
   useEvent,
   useForkRef
-} from "../__chunks/B7MIN7YT.js";
+} from "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/composite/composite-overflow-disclosure.ts
 import { useEffect, useRef, useState } from "react";
-var useCompositeOverflowDisclosure = createHook(({ store, ...props }) => {
+var useCompositeOverflowDisclosure = createHook((_a) => {
+  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
   const ref = useRef(null);
   const [shouldRegisterItem, setShouldRegisterItem] = useState(false);
   useEffect(() => {
@@ -39,27 +46,27 @@ var useCompositeOverflowDisclosure = createHook(({ store, ...props }) => {
   }, [store]);
   const onFocusProp = props.onFocus;
   const onFocus = useEvent((event) => {
-    onFocusProp?.(event);
+    onFocusProp == null ? void 0 : onFocusProp(event);
     if (event.defaultPrevented)
       return;
     setShouldRegisterItem(true);
   });
   const onBlurProp = props.onBlur;
   const onBlur = useEvent((event) => {
-    onBlurProp?.(event);
+    onBlurProp == null ? void 0 : onBlurProp(event);
     if (event.defaultPrevented)
       return;
     setShouldRegisterItem(false);
   });
-  props = {
-    "aria-hidden": !shouldRegisterItem,
-    ...props,
+  props = __spreadProps(__spreadValues({
+    "aria-hidden": !shouldRegisterItem
+  }, props), {
     ref: useForkRef(props.ref, ref),
     onFocus,
     onBlur
-  };
-  props = useCompositeItem({ ...props, shouldRegisterItem });
-  props = usePopoverDisclosure({ store, ...props });
+  });
+  props = useCompositeItem(__spreadProps(__spreadValues({}, props), { shouldRegisterItem }));
+  props = usePopoverDisclosure(__spreadValues({ store }, props));
   return props;
 });
 var CompositeOverflowDisclosure = createComponent((props) => {

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

@@ -1,14 +1,17 @@
 import {
   usePopoverStoreOptions,
   usePopoverStoreProps
-} from "../__chunks/M6QENKOT.js";
-import "../__chunks/ND76WTDR.js";
-import "../__chunks/YHRHKO5B.js";
+} from "../__chunks/SHGWT5HV.js";
+import "../__chunks/OBNQHP6V.js";
+import "../__chunks/HN4VMOUI.js";
 import {
   useStore
-} from "../__chunks/LTH56VDS.js";
-import "../__chunks/B7MIN7YT.js";
+} from "../__chunks/AV5WE37O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import {
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/composite/composite-overflow-store.ts
 import * as Core from "@ariakit/core/composite/composite-overflow-store";
@@ -21,7 +24,7 @@ function useCompositeOverflowStoreProps(store, props) {
 function useCompositeOverflowStore(props = {}) {
   const options = useCompositeOverflowStoreOptions(props);
   const store = useStore(
-    () => Core.createCompositeOverflowStore({ ...props, ...options })
+    () => Core.createCompositeOverflowStore(__spreadValues(__spreadValues({}, props), options))
   );
   return useCompositeOverflowStoreProps(store, props);
 }