@ariakit/react-core 0.3.14 → 0.4.1

package/cjs/combobox/combobox.cjs

@@ -1,26 +1,26 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _3QW6ELTGcjs = require('../__chunks/3QW6ELTG.cjs');
+var _O45NLQRZcjs = require('../__chunks/O45NLQRZ.cjs');
 
 
-var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
+var _OBT2YMBCcjs = require('../__chunks/OBT2YMBC.cjs');
 
 
-var _H6OLBVHAcjs = require('../__chunks/H6OLBVHA.cjs');
+var _T5YJMXLPcjs = require('../__chunks/T5YJMXLP.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
-require('../__chunks/UZNYSPKP.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/UVBBMANL.cjs');
-require('../__chunks/F2A2ZQDB.cjs');
-require('../__chunks/S6UU7NA4.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/4XFLDG56.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/FNVFJ5AF.cjs');
+require('../__chunks/OLPMMKKO.cjs');
+require('../__chunks/XRJBC7H7.cjs');
+require('../__chunks/XRZ2L7EA.cjs');
 require('../__chunks/75KXQZJX.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 
 
 
@@ -56,6 +56,7 @@ var _focus = require('@ariakit/core/utils/focus');
 
 var _misc = require('@ariakit/core/utils/misc');
 var _reactdom = require('react-dom');
+var TagName = "input";
 function isFirstItemAutoSelected(items, activeValue, autoSelect) {
   if (!autoSelect)
     return false;
@@ -76,8 +77,8 @@ function isInputEvent(event) {
 function isAriaAutoCompleteValue(value) {
   return value === "inline" || value === "list" || value === "both" || value === "none";
 }
-var useCombobox = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
+var useCombobox = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useCombobox2(_a) {
     var _b = _a, {
       store,
       focusable = true,
@@ -86,8 +87,11 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       showOnChange = true,
       setValueOnChange = true,
       showOnMouseDown = true,
+      showOnClick = showOnMouseDown,
+      blurActiveItemOnClick,
       setValueOnClick = true,
       showOnKeyDown = true,
+      showOnKeyPress = showOnKeyDown,
       moveOnKeyPress = true,
       autoComplete = "list"
     } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
@@ -98,12 +102,15 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       "showOnChange",
       "setValueOnChange",
       "showOnMouseDown",
+      "showOnClick",
+      "blurActiveItemOnClick",
       "setValueOnClick",
       "showOnKeyDown",
+      "showOnKeyPress",
       "moveOnKeyPress",
       "autoComplete"
     ]);
-    const context = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
+    const context = _OBT2YMBCcjs.useComboboxProviderContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -114,7 +121,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
     const canAutoSelectRef = _react.useRef.call(void 0, false);
     const composingRef = _react.useRef.call(void 0, false);
     const autoSelect = store.useState(
-      (state) => !!autoSelectProp && state.virtualFocus
+      (state) => state.virtualFocus && autoSelectProp
     );
     const inline = autoComplete === "inline" || autoComplete === "both";
     const [canInline, setCanInline] = _react.useState.call(void 0, inline);
@@ -233,16 +240,18 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       canAutoSelectRef.current = true;
     }, [storeValue]);
     _EO6LS72Hcjs.useSafeLayoutEffect.call(void 0, () => {
-      if (open)
+      if (autoSelect !== "always" && open)
         return;
-      canAutoSelectRef.current = false;
-    }, [open]);
+      canAutoSelectRef.current = open;
+    }, [autoSelect, open]);
     const resetValueOnSelect = store.useState("resetValueOnSelect");
     _EO6LS72Hcjs.useUpdateEffect.call(void 0, () => {
       var _a2;
       const canAutoSelect = canAutoSelectRef.current;
       if (!store)
         return;
+      if (!open)
+        return;
       if ((!autoSelect || !canAutoSelect) && !resetValueOnSelect)
         return;
       const { baseElement, contentElement: contentElement2, activeId } = store.getState();
@@ -267,6 +276,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       return;
     }, [
       store,
+      open,
       valueUpdated,
       storeValue,
       autoSelect,
@@ -332,21 +342,22 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       }
     });
     const onCompositionEndProp = props.onCompositionEnd;
-    const onCompositionEnd = _EO6LS72Hcjs.useEvent.call(void 0, 
-      (event) => {
-        canAutoSelectRef.current = true;
-        composingRef.current = false;
-        onCompositionEndProp == null ? void 0 : onCompositionEndProp(event);
-        if (event.defaultPrevented)
-          return;
-        if (!autoSelect)
-          return;
-        forceValueUpdate();
-      }
-    );
+    const onCompositionEnd = _EO6LS72Hcjs.useEvent.call(void 0, (event) => {
+      canAutoSelectRef.current = true;
+      composingRef.current = false;
+      onCompositionEndProp == null ? void 0 : onCompositionEndProp(event);
+      if (event.defaultPrevented)
+        return;
+      if (!autoSelect)
+        return;
+      forceValueUpdate();
+    });
     const onMouseDownProp = props.onMouseDown;
+    const blurActiveItemOnClickProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, 
+      blurActiveItemOnClick != null ? blurActiveItemOnClick : () => !!(store == null ? void 0 : store.getState().includesBaseElement)
+    );
     const setValueOnClickProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, setValueOnClick);
-    const showOnMouseDownProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, showOnMouseDown);
+    const showOnClickProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, showOnClick);
     const onMouseDown = _EO6LS72Hcjs.useEvent.call(void 0, (event) => {
       onMouseDownProp == null ? void 0 : onMouseDownProp(event);
       if (event.defaultPrevented)
@@ -357,47 +368,47 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
         return;
       if (!store)
         return;
-      store.setActiveId(null);
+      if (blurActiveItemOnClickProp(event)) {
+        store.setActiveId(null);
+      }
       if (setValueOnClickProp(event)) {
         store.setValue(value);
       }
-      if (showOnMouseDownProp(event)) {
+      if (showOnClickProp(event)) {
         _events.queueBeforeEvent.call(void 0, event.currentTarget, "mouseup", store.show);
       }
     });
     const onKeyDownProp = props.onKeyDown;
-    const showOnKeyDownProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, showOnKeyDown);
-    const onKeyDown = _EO6LS72Hcjs.useEvent.call(void 0, 
-      (event) => {
-        onKeyDownProp == null ? void 0 : onKeyDownProp(event);
-        if (!event.repeat) {
-          canAutoSelectRef.current = false;
-        }
-        if (event.defaultPrevented)
-          return;
-        if (event.ctrlKey)
-          return;
-        if (event.altKey)
-          return;
-        if (event.shiftKey)
-          return;
-        if (event.metaKey)
-          return;
-        if (!store)
-          return;
-        const { open: open2, activeId } = store.getState();
-        if (open2)
-          return;
-        if (activeId !== null)
-          return;
-        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-          if (showOnKeyDownProp(event)) {
-            event.preventDefault();
-            store.show();
-          }
+    const showOnKeyPressProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, showOnKeyPress);
+    const onKeyDown = _EO6LS72Hcjs.useEvent.call(void 0, (event) => {
+      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+      if (!event.repeat) {
+        canAutoSelectRef.current = false;
+      }
+      if (event.defaultPrevented)
+        return;
+      if (event.ctrlKey)
+        return;
+      if (event.altKey)
+        return;
+      if (event.shiftKey)
+        return;
+      if (event.metaKey)
+        return;
+      if (!store)
+        return;
+      const { open: open2, activeId } = store.getState();
+      if (open2)
+        return;
+      if (activeId !== null)
+        return;
+      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        if (showOnKeyPressProp(event)) {
+          event.preventDefault();
+          store.show();
         }
       }
-    );
+    });
     const onBlurProp = props.onBlur;
     const onBlur = _EO6LS72Hcjs.useEvent.call(void 0, (event) => {
       canAutoSelectRef.current = false;
@@ -425,7 +436,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       onKeyDown,
       onBlur
     });
-    props = _H6OLBVHAcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _T5YJMXLPcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       focusable
     }, props), {
@@ -439,17 +450,14 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
         return true;
       }
     }));
-    props = _3QW6ELTGcjs.usePopoverAnchor.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+    props = _O45NLQRZcjs.usePopoverAnchor.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
     return _AV6KTKLEcjs.__spreadValues.call(void 0, { autoComplete: "off" }, props);
   }
 );
-var Combobox = _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
+var Combobox = _Q67LZMDTcjs.forwardRef.call(void 0, function Combobox2(props) {
   const htmlProps = useCombobox(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "input", htmlProps);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Combobox.displayName = "Combobox";
-}
 
 
 

package/cjs/combobox/combobox.d.cts

@@ -1,9 +1,11 @@
-import type { AriaAttributes, ChangeEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
+import type { AriaAttributes, ChangeEvent, ElementType, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
 import type { BooleanOrCallback, StringWithValue } from "@ariakit/core/utils/types";
 import type { CompositeOptions } from "../composite/composite.js";
 import type { PopoverAnchorOptions } from "../popover/popover-anchor.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Combobox` component.
  * @see https://ariakit.org/components/combobox
@@ -19,7 +21,7 @@ import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.js";
  * </ComboboxPopover>
  * ```
  */
-export declare const useCombobox: import("../utils/types.js").Hook<ComboboxOptions<"input">>;
+export declare const useCombobox: import("../utils/types.js").Hook<"input", ComboboxOptions<"input">>;
 /**
  * Renders a combobox input element that can be used to filter a list of items.
  * @see https://ariakit.org/components/combobox
@@ -35,8 +37,8 @@ export declare const useCombobox: import("../utils/types.js").Hook<ComboboxOptio
  * </ComboboxProvider>
  * ```
  */
-export declare const Combobox: import("../utils/types.js").Component<ComboboxOptions<"input">>;
-export interface ComboboxOptions<T extends As = "input"> extends CompositeOptions<T>, PopoverAnchorOptions<T> {
+export declare const Combobox: (props: ComboboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ComboboxOptions<T extends ElementType = TagName> extends CompositeOptions<T>, PopoverAnchorOptions<T> {
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
@@ -47,8 +49,8 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
     store?: ComboboxStore;
     /**
      * Whether the first enabled 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 the
+     * combobox input value changes. When it's set to `true` or `"always"`, the
+     * exact behavior will depend on the value of the
      * [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete) prop:
      * - If [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
      *   is `both` or `inline`, the first item is automatically focused when the
@@ -58,13 +60,16 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      *   is `list` or `none`, the first item is automatically focused when the
      *   popup opens, but the input value doesn't change.
      *
+     * When it's set to `"always"`, the first enabled item will be automatically
+     * highlighted when the combobox list opens.
+     *
      * To change which item is auto selected, use the
      * [`getAutoSelectId`](https://ariakit.org/reference/combobox#getautoselectid)
      * prop.
      *
+     *
      * Live examples:
-     * - [Combobox with integrated
-     *   filter](https://ariakit.org/examples/combobox-filtering-integrated)
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
      * - [Combobox with links](https://ariakit.org/examples/combobox-links)
      * - [Textarea with inline
@@ -73,7 +78,7 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
      * @default false
      */
-    autoSelect?: boolean;
+    autoSelect?: boolean | "always";
     /**
      * Function that takes the currently rendered items and returns the id of the
      * item to be auto selected when the
@@ -132,6 +137,14 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * @default "list"
      */
     autoComplete?: StringWithValue<Required<AriaAttributes>["aria-autocomplete"]>;
+    /**
+     * Determines if the highlighted item should lose focus when the user clicks
+     * on the combobox input element. By default, this prop's value is set
+     * according to the
+     * [`includesBaseElement`](https://ariakit.org/reference/combobox-provider#includesbaseelement)
+     * value.
+     */
+    blurActiveItemOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
      * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
@@ -147,6 +160,16 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * ```
      */
     showOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
+    /**
+     * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
+     * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components should be shown when the input is clicked.
+     * @deprecated Use
+     * [`showOnClick`](https://ariakit.org/reference/combobox#showonclick)
+     * instead.
+     * @default true
+     */
+    showOnMouseDown?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
      * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
@@ -158,10 +181,21 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * @default true
      * @example
      * ```jsx
-     * <Combobox showOnMouseDown={value.length > 1} />
+     * <Combobox showOnClick={value.length > 1} />
      * ```
      */
-    showOnMouseDown?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    showOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    /**
+     * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
+     * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components should be shown when the user presses the arrow up or down keys
+     * while focusing on the combobox input element.
+     * @deprecated Use
+     * [`showOnKeyPress`](https://ariakit.org/reference/combobox#showonkeypress)
+     * instead.
+     * @default true
+     */
+    showOnKeyDown?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
     /**
      * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
      * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
@@ -174,10 +208,10 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * @default true
      * @example
      * ```jsx
-     * <Combobox showOnKeyDown={value.length > 1} />
+     * <Combobox showOnKeyPress={value.length > 1} />
      * ```
      */
-    showOnKeyDown?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
+    showOnKeyPress?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
     /**
      * Whether the combobox
      * [`value`](https://ariakit.org/reference/combobox-provider#value) state
@@ -206,4 +240,5 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
 }
-export type ComboboxProps<T extends As = "input"> = Props<ComboboxOptions<T>>;
+export type ComboboxProps<T extends ElementType = TagName> = Props<T, ComboboxOptions<T>>;
+export {};

package/cjs/combobox/combobox.d.ts

@@ -1,9 +1,11 @@
-import type { AriaAttributes, ChangeEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
+import type { AriaAttributes, ChangeEvent, ElementType, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
 import type { BooleanOrCallback, StringWithValue } from "@ariakit/core/utils/types";
 import type { CompositeOptions } from "../composite/composite.js";
 import type { PopoverAnchorOptions } from "../popover/popover-anchor.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Combobox` component.
  * @see https://ariakit.org/components/combobox
@@ -19,7 +21,7 @@ import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.js";
  * </ComboboxPopover>
  * ```
  */
-export declare const useCombobox: import("../utils/types.js").Hook<ComboboxOptions<"input">>;
+export declare const useCombobox: import("../utils/types.js").Hook<"input", ComboboxOptions<"input">>;
 /**
  * Renders a combobox input element that can be used to filter a list of items.
  * @see https://ariakit.org/components/combobox
@@ -35,8 +37,8 @@ export declare const useCombobox: import("../utils/types.js").Hook<ComboboxOptio
  * </ComboboxProvider>
  * ```
  */
-export declare const Combobox: import("../utils/types.js").Component<ComboboxOptions<"input">>;
-export interface ComboboxOptions<T extends As = "input"> extends CompositeOptions<T>, PopoverAnchorOptions<T> {
+export declare const Combobox: (props: ComboboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ComboboxOptions<T extends ElementType = TagName> extends CompositeOptions<T>, PopoverAnchorOptions<T> {
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
@@ -47,8 +49,8 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
     store?: ComboboxStore;
     /**
      * Whether the first enabled 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 the
+     * combobox input value changes. When it's set to `true` or `"always"`, the
+     * exact behavior will depend on the value of the
      * [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete) prop:
      * - If [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
      *   is `both` or `inline`, the first item is automatically focused when the
@@ -58,13 +60,16 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      *   is `list` or `none`, the first item is automatically focused when the
      *   popup opens, but the input value doesn't change.
      *
+     * When it's set to `"always"`, the first enabled item will be automatically
+     * highlighted when the combobox list opens.
+     *
      * To change which item is auto selected, use the
      * [`getAutoSelectId`](https://ariakit.org/reference/combobox#getautoselectid)
      * prop.
      *
+     *
      * Live examples:
-     * - [Combobox with integrated
-     *   filter](https://ariakit.org/examples/combobox-filtering-integrated)
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
      * - [Combobox with links](https://ariakit.org/examples/combobox-links)
      * - [Textarea with inline
@@ -73,7 +78,7 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
      * @default false
      */
-    autoSelect?: boolean;
+    autoSelect?: boolean | "always";
     /**
      * Function that takes the currently rendered items and returns the id of the
      * item to be auto selected when the
@@ -132,6 +137,14 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * @default "list"
      */
     autoComplete?: StringWithValue<Required<AriaAttributes>["aria-autocomplete"]>;
+    /**
+     * Determines if the highlighted item should lose focus when the user clicks
+     * on the combobox input element. By default, this prop's value is set
+     * according to the
+     * [`includesBaseElement`](https://ariakit.org/reference/combobox-provider#includesbaseelement)
+     * value.
+     */
+    blurActiveItemOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
      * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
@@ -147,6 +160,16 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * ```
      */
     showOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
+    /**
+     * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
+     * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components should be shown when the input is clicked.
+     * @deprecated Use
+     * [`showOnClick`](https://ariakit.org/reference/combobox#showonclick)
+     * instead.
+     * @default true
+     */
+    showOnMouseDown?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
      * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
@@ -158,10 +181,21 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * @default true
      * @example
      * ```jsx
-     * <Combobox showOnMouseDown={value.length > 1} />
+     * <Combobox showOnClick={value.length > 1} />
      * ```
      */
-    showOnMouseDown?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    showOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    /**
+     * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
+     * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components should be shown when the user presses the arrow up or down keys
+     * while focusing on the combobox input element.
+     * @deprecated Use
+     * [`showOnKeyPress`](https://ariakit.org/reference/combobox#showonkeypress)
+     * instead.
+     * @default true
+     */
+    showOnKeyDown?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
     /**
      * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
      * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
@@ -174,10 +208,10 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * @default true
      * @example
      * ```jsx
-     * <Combobox showOnKeyDown={value.length > 1} />
+     * <Combobox showOnKeyPress={value.length > 1} />
      * ```
      */
-    showOnKeyDown?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
+    showOnKeyPress?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
     /**
      * Whether the combobox
      * [`value`](https://ariakit.org/reference/combobox-provider#value) state
@@ -206,4 +240,5 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
 }
-export type ComboboxProps<T extends As = "input"> = Props<ComboboxOptions<T>>;
+export type ComboboxProps<T extends ElementType = TagName> = Props<T, ComboboxOptions<T>>;
+export {};

package/cjs/command/command.cjs

@@ -2,14 +2,14 @@
 
 
 
-var _DAJUUBUIcjs = require('../__chunks/DAJUUBUI.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+var _Z7QK7V4Mcjs = require('../__chunks/Z7QK7V4M.cjs');
+require('../__chunks/XRZ2L7EA.cjs');
 require('../__chunks/75KXQZJX.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.Command = _DAJUUBUIcjs.Command; exports.useCommand = _DAJUUBUIcjs.useCommand;
+exports.Command = _Z7QK7V4Mcjs.Command; exports.useCommand = _Z7QK7V4Mcjs.useCommand;

package/cjs/command/command.d.cts

@@ -1,5 +1,8 @@
+import type { ElementType } from "react";
 import type { FocusableOptions } from "../focusable/focusable.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Command` component. If the element is not a native
  * clickable element (like a button), this hook will return additional props to
@@ -11,7 +14,7 @@ import type { As, Props } from "../utils/types.js";
  * <Role {...props}>Accessible button</Role>
  * ```
  */
-export declare const useCommand: import("../utils/types.js").Hook<CommandOptions<"button">>;
+export declare const useCommand: import("../utils/types.js").Hook<"button", CommandOptions<"button">>;
 /**
  * Renders a clickable element, which is a `button` by default, and inherits
  * features from the [`Focusable`](https://ariakit.org/reference/focusable)
@@ -29,8 +32,8 @@ export declare const useCommand: import("../utils/types.js").Hook<CommandOptions
  * <Command>Button</Command>
  * ```
  */
-export declare const Command: import("../utils/types.js").Component<CommandOptions<"button">>;
-export interface CommandOptions<T extends As = "button"> extends FocusableOptions<T> {
+export declare const Command: (props: CommandProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface CommandOptions<T extends ElementType = TagName> extends FocusableOptions<T> {
     /**
      * If set to `true`, pressing the enter key while this element is focused will
      * trigger a click on the element, regardless of whether it's a native button
@@ -48,4 +51,5 @@ export interface CommandOptions<T extends As = "button"> extends FocusableOption
      */
     clickOnSpace?: boolean;
 }
-export type CommandProps<T extends As = "button"> = Props<CommandOptions<T>>;
+export type CommandProps<T extends ElementType = TagName> = Props<T, CommandOptions<T>>;
+export {};

package/cjs/command/command.d.ts

@@ -1,5 +1,8 @@
+import type { ElementType } from "react";
 import type { FocusableOptions } from "../focusable/focusable.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Command` component. If the element is not a native
  * clickable element (like a button), this hook will return additional props to
@@ -11,7 +14,7 @@ import type { As, Props } from "../utils/types.js";
  * <Role {...props}>Accessible button</Role>
  * ```
  */
-export declare const useCommand: import("../utils/types.js").Hook<CommandOptions<"button">>;
+export declare const useCommand: import("../utils/types.js").Hook<"button", CommandOptions<"button">>;
 /**
  * Renders a clickable element, which is a `button` by default, and inherits
  * features from the [`Focusable`](https://ariakit.org/reference/focusable)
@@ -29,8 +32,8 @@ export declare const useCommand: import("../utils/types.js").Hook<CommandOptions
  * <Command>Button</Command>
  * ```
  */
-export declare const Command: import("../utils/types.js").Component<CommandOptions<"button">>;
-export interface CommandOptions<T extends As = "button"> extends FocusableOptions<T> {
+export declare const Command: (props: CommandProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface CommandOptions<T extends ElementType = TagName> extends FocusableOptions<T> {
     /**
      * If set to `true`, pressing the enter key while this element is focused will
      * trigger a click on the element, regardless of whether it's a native button
@@ -48,4 +51,5 @@ export interface CommandOptions<T extends As = "button"> extends FocusableOption
      */
     clickOnSpace?: boolean;
 }
-export type CommandProps<T extends As = "button"> = Props<CommandOptions<T>>;
+export type CommandProps<T extends ElementType = TagName> = Props<T, CommandOptions<T>>;
+export {};