@ariakit/react-core 0.4.3 → 0.4.4

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @ariakit/react-core
 
+## 0.4.4
+
+### Combobox `autoFocusOnHide` behavior
+
+Previously, the [`autoFocusOnHide`](https://ariakit.org/reference/combobox-popover#autofocusonhide) feature on [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover) was turned off by default. Most of the time, this didn't have any practical impact because the combobox input element was already focused when the popover was hidden.
+
+Now, this feature is enabled by default and should work consistently even when [`virtualFocus`](https://ariakit.org/reference/combobox-provider#virtualfocus) is set to `false`.
+
+### Better SVG strokes
+
+The `strokeWidth` property on SVG elements rendered by [`CheckboxCheck`](https://ariakit.org/reference/checkbox-check), [`ComboboxCancel`](https://ariakit.org/reference/combobox-cancel), [`ComboboxDisclosure`](https://ariakit.org/reference/combobox-disclosure), [`DialogDismiss`](https://ariakit.org/reference/dialog-dismiss), [`HovercardDisclosure`](https://ariakit.org/reference/hovercard-disclosure), [`PopoverDisclosureArrow`](https://ariakit.org/reference/popover-disclosure-arrow), and all components that use any of these now defaults to `1.5px` instead of `1.5pt`. This should make the strokes slightly thinner.
+
+Remember, you can always override the SVG element rendered by these components by rendering custom `children`.
+
+### Minimum value length to show combobox options
+
+A new [`showMinLength`](https://ariakit.org/reference/combobox#showminlength) prop has been added to the [`Combobox`](https://ariakit.org/reference/combobox) component. This prop lets you set the minimum length of the value before the combobox options appear. The default value is `0`.
+
+```jsx
+<Combobox showMinLength={2} />
+```
+
+Previously, achieving this behavior required combining three separate props: [`showOnChange`](https://ariakit.org/reference/combobox#showonchange), [`showOnClick`](https://ariakit.org/reference/combobox#showonclick), and [`showOnKeyPress`](https://ariakit.org/reference/combobox#showonkeypress). We've added this prop to simplify this common task.
+
+These props continue to work as expected as they can be used to customize the behavior for each distinct event.
+
+### Rendering composite items as input elements
+
+We've added the ability to render [`CompositeItem`](https://ariakit.org/reference/composite-item) as an input element using the [`render`](https://ariakit.org/reference/composite-item#render) prop:
+
+```jsx
+<CompositeItem render={<input />} />
+```
+
+Before, you could only do this with the experimental `CompositeInput` component. Now, this functionality is integrated directly into the [`CompositeItem`](https://ariakit.org/reference/composite-item) component.
+
+### Other updates
+
+- Fixed [`Dialog`](https://ariakit.org/reference/dialog) calling [`autoFocusOnHide`](https://ariakit.org/reference/dialog#autofocusonhide) twice.
+- Improved JSDocs.
+- Updated dependencies: `@ariakit/core@0.4.4`
+
 ## 0.4.3
 
 - Fixed TypeScript types for `ref`.

package/cjs/__chunks/{GYHP7IYG.cjs → 4XVTH6OR.cjs}

@@ -10,7 +10,7 @@ var _MNMEDFSMcjs = require('./MNMEDFSM.cjs');
 var _Q6QJEXBKcjs = require('./Q6QJEXBK.cjs');
 
 
-var _7DQ2LBH2cjs = require('./7DQ2LBH2.cjs');
+var _QUHFOHHTcjs = require('./QUHFOHHT.cjs');
 
 
 
@@ -112,7 +112,7 @@ var useMenuItem = _NGD3IQDBcjs.createHook.call(void 0,
     }, props), {
       onClick
     });
-    props = _7DQ2LBH2cjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _QUHFOHHTcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       preventScrollOnKeyDown
     }, props));

package/cjs/__chunks/{IHFGURUM.cjs → 54YZYOPA.cjs}

@@ -4,7 +4,7 @@
 var _OHXBMXTNcjs = require('./OHXBMXTN.cjs');
 
 
-var _7DQ2LBH2cjs = require('./7DQ2LBH2.cjs');
+var _QUHFOHHTcjs = require('./QUHFOHHT.cjs');
 
 
 
@@ -147,7 +147,7 @@ var useRadio = _NGD3IQDBcjs.createHook.call(void 0, function useRadio2(_a) {
     onClick,
     onFocus
   });
-  props = _7DQ2LBH2cjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+  props = _QUHFOHHTcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
     store,
     clickOnEnter: !nativeRadio
   }, props));

package/cjs/__chunks/{DCTXNU2X.cjs → COWKMNMZ.cjs}

@@ -2,7 +2,7 @@
 
 
 
-var _CWS5RZSUcjs = require('./CWS5RZSU.cjs');
+var _ZTAE5B6Wcjs = require('./ZTAE5B6W.cjs');
 
 
 
@@ -355,7 +355,7 @@ var usePopover = _NGD3IQDBcjs.createHook.call(void 0,
         position: "relative"
       }, props.style)
     });
-    props = _CWS5RZSUcjs.useDialog.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _ZTAE5B6Wcjs.useDialog.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       modal,
       portal,
@@ -368,7 +368,7 @@ var usePopover = _NGD3IQDBcjs.createHook.call(void 0,
     return props;
   }
 );
-var Popover = _CWS5RZSUcjs.createDialogComponent.call(void 0, 
+var Popover = _ZTAE5B6Wcjs.createDialogComponent.call(void 0, 
   _NGD3IQDBcjs.forwardRef.call(void 0, function Popover2(props) {
     const htmlProps = usePopover(props);
     return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);

package/cjs/__chunks/{HFNM6QV4.cjs → DAOFDKV2.cjs}

@@ -45,7 +45,7 @@ var useDialogDismiss = _NGD3IQDBcjs.createHook.call(void 0,
           stroke: "currentColor",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          strokeWidth: "1.5pt",
+          strokeWidth: 1.5,
           viewBox: "0 0 16 16",
           height: "1em",
           width: "1em",

package/cjs/__chunks/{3C4RFBCG.cjs → EYZZO5IT.cjs}

@@ -44,7 +44,7 @@ var usePopoverDisclosureArrow = _NGD3IQDBcjs.createHook.call(void 0, function us
         stroke: "currentColor",
         strokeLinecap: "round",
         strokeLinejoin: "round",
-        strokeWidth: "1.5pt",
+        strokeWidth: 1.5,
         viewBox: "0 0 16 16",
         height: "1em",
         width: "1em",

package/cjs/__chunks/{3MKOUH5M.cjs → HPNCFYQJ.cjs}

@@ -6,10 +6,10 @@
 var _KXQOQQ5Bcjs = require('./KXQOQQ5B.cjs');
 
 
-var _DCTXNU2Xcjs = require('./DCTXNU2X.cjs');
+var _COWKMNMZcjs = require('./COWKMNMZ.cjs');
 
 
-var _CWS5RZSUcjs = require('./CWS5RZSU.cjs');
+var _ZTAE5B6Wcjs = require('./ZTAE5B6W.cjs');
 
 
 
@@ -284,7 +284,7 @@ var useHovercard = _NGD3IQDBcjs.createHook.call(void 0,
     const autoFocusOnShow = store.useState(
       (state) => modal || state.autoFocusOnShow
     );
-    props = _DCTXNU2Xcjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _COWKMNMZcjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       modal,
       portal,
@@ -305,7 +305,7 @@ var useHovercard = _NGD3IQDBcjs.createHook.call(void 0,
     return props;
   }
 );
-var Hovercard = _CWS5RZSUcjs.createDialogComponent.call(void 0, 
+var Hovercard = _ZTAE5B6Wcjs.createDialogComponent.call(void 0, 
   _NGD3IQDBcjs.forwardRef.call(void 0, function Hovercard2(props) {
     const htmlProps = useHovercard(props);
     return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);

package/cjs/__chunks/{A356CGND.cjs → JDCTLYQ4.cjs}

@@ -26,7 +26,7 @@ var checkmark = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "1.5pt",
+    strokeWidth: 1.5,
     viewBox: "0 0 16 16",
     height: "1em",
     width: "1em",

package/cjs/__chunks/{T5BWR4CB.cjs → KDTFHBKU.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _3XXW4Y4Dcjs = require('./3XXW4Y4D.cjs');
+var _Z2VL7JHXcjs = require('./Z2VL7JHX.cjs');
 
 
 var _XRPBWSUIcjs = require('./XRPBWSUI.cjs');
@@ -22,7 +22,7 @@ var useHovercardDismiss = _NGD3IQDBcjs.createHook.call(void 0,
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
     const context = _XRPBWSUIcjs.useHovercardScopedContext.call(void 0, );
     store = store || context;
-    props = _3XXW4Y4Dcjs.usePopoverDismiss.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+    props = _Z2VL7JHXcjs.usePopoverDismiss.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
     return props;
   }
 );

package/cjs/__chunks/{NZSB7HSZ.cjs → LY4LCJM6.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _3C4RFBCGcjs = require('./3C4RFBCG.cjs');
+var _EYZZO5ITcjs = require('./EYZZO5IT.cjs');
 
 
 var _HZDOLHROcjs = require('./HZDOLHRO.cjs');
@@ -22,7 +22,7 @@ var useSelectArrow = _NGD3IQDBcjs.createHook.call(void 0,
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
     const context = _HZDOLHROcjs.useSelectContext.call(void 0, );
     store = store || context;
-    props = _3C4RFBCGcjs.usePopoverDisclosureArrow.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+    props = _EYZZO5ITcjs.usePopoverDisclosureArrow.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
     return props;
   }
 );

package/cjs/__chunks/{7DQ2LBH2.cjs → QUHFOHHT.cjs}

@@ -9,6 +9,7 @@ var _HD5AHCRIcjs = require('./HD5AHCRI.cjs');
 
 
 
+
 var _6ZZYUFPWcjs = require('./6ZZYUFPW.cjs');
 
 
@@ -44,6 +45,8 @@ var _react = require('react');
 
 
 
+
+
 var _dom = require('@ariakit/core/utils/dom');
 var _events = require('@ariakit/core/utils/events');
 
@@ -52,6 +55,9 @@ var _events = require('@ariakit/core/utils/events');
 var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
 var TagName = "button";
+function isTextbox(element) {
+  return element.isContentEditable || _dom.isTextField.call(void 0, element);
+}
 function isEditableElement(element) {
   if (element.isContentEditable)
     return true;
@@ -59,6 +65,16 @@ function isEditableElement(element) {
     return true;
   return element.tagName === "INPUT" && !_dom.isButton.call(void 0, element);
 }
+function getValueLength(element) {
+  if (_dom.isTextField.call(void 0, element)) {
+    return element.value.length;
+  } else if (element.isContentEditable) {
+    const range = _dom.getDocument.call(void 0, element).createRange();
+    range.selectNodeContents(element);
+    return range.toString().length;
+  }
+  return 0;
+}
 function getNextPageOffset(scrollingElement, pageUp = false) {
   const height = scrollingElement.clientHeight;
   const { top } = scrollingElement.getBoundingClientRect();
@@ -217,6 +233,9 @@ var useCompositeItem = _NGD3IQDBcjs.createHook.call(void 0,
         return;
       const { virtualFocus: virtualFocus2, baseElement: baseElement2 } = store.getState();
       store.setActiveId(id);
+      if (isTextbox(event.currentTarget)) {
+        _6ZZYUFPWcjs.selectTextField.call(void 0, event.currentTarget);
+      }
       if (!virtualFocus2)
         return;
       if (!_events.isSelfTarget.call(void 0, event))
@@ -303,6 +322,22 @@ var useCompositeItem = _NGD3IQDBcjs.createHook.call(void 0,
       };
       const action = keyMap[event.key];
       if (action) {
+        if (isTextbox(currentTarget)) {
+          const selection = _dom.getTextboxSelection.call(void 0, currentTarget);
+          const isLeft = isHorizontal && event.key === "ArrowLeft";
+          const isRight = isHorizontal && event.key === "ArrowRight";
+          const isUp = isVertical && event.key === "ArrowUp";
+          const isDown = isVertical && event.key === "ArrowDown";
+          if (isRight || isDown) {
+            if (selection.end !== getValueLength(currentTarget)) {
+              return;
+            }
+          } else if (isLeft || isUp) {
+            if (selection.start !== 0) {
+              return;
+            }
+          }
+        }
         const nextId = action();
         if (preventScrollOnKeyDownProp(event) || nextId !== void 0) {
           if (!moveOnKeyPressProp(event))

package/cjs/__chunks/{AJF5DT5A.cjs → YO7LLGVA.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _7DQ2LBH2cjs = require('./7DQ2LBH2.cjs');
+var _QUHFOHHTcjs = require('./QUHFOHHT.cjs');
 
 
 var _MVDQWSSVcjs = require('./MVDQWSSV.cjs');
@@ -23,7 +23,7 @@ var useToolbarItem = _NGD3IQDBcjs.createHook.call(void 0,
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
     const context = _MVDQWSSVcjs.useToolbarContext.call(void 0, );
     store = store || context;
-    props = _7DQ2LBH2cjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+    props = _QUHFOHHTcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
     return props;
   }
 );

package/cjs/__chunks/{3XXW4Y4D.cjs → Z2VL7JHX.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _HFNM6QV4cjs = require('./HFNM6QV4.cjs');
+var _DAOFDKV2cjs = require('./DAOFDKV2.cjs');
 
 
 var _77BAEZ2Zcjs = require('./77BAEZ2Z.cjs');
@@ -22,7 +22,7 @@ var usePopoverDismiss = _NGD3IQDBcjs.createHook.call(void 0,
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
     const context = _77BAEZ2Zcjs.usePopoverScopedContext.call(void 0, );
     store = store || context;
-    props = _HFNM6QV4cjs.useDialogDismiss.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+    props = _DAOFDKV2cjs.useDialogDismiss.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
     return props;
   }
 );

package/cjs/__chunks/{CWS5RZSU.cjs → ZTAE5B6W.cjs}

@@ -390,6 +390,7 @@ var useDialog = _NGD3IQDBcjs.createHook.call(void 0, function useDialog2(_a) {
     },
     [store, finalFocus, autoFocusOnHideProp]
   );
+  const focusedOnHideRef = _react.useRef.call(void 0, false);
   _TW3SFX4Ccjs.useSafeLayoutEffect.call(void 0, () => {
     if (open)
       return;
@@ -398,6 +399,7 @@ var useDialog = _NGD3IQDBcjs.createHook.call(void 0, function useDialog2(_a) {
     if (!mayAutoFocusOnHide)
       return;
     const dialog = ref.current;
+    focusedOnHideRef.current = true;
     focusOnHide(dialog);
   }, [open, hasOpened, domReady, mayAutoFocusOnHide, focusOnHide]);
   _react.useEffect.call(void 0, () => {
@@ -406,7 +408,13 @@ var useDialog = _NGD3IQDBcjs.createHook.call(void 0, function useDialog2(_a) {
     if (!mayAutoFocusOnHide)
       return;
     const dialog = ref.current;
-    return () => focusOnHide(dialog);
+    return () => {
+      if (focusedOnHideRef.current) {
+        focusedOnHideRef.current = false;
+        return;
+      }
+      focusOnHide(dialog);
+    };
   }, [hasOpened, mayAutoFocusOnHide, focusOnHide]);
   const hideOnEscapeProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, hideOnEscape);
   _react.useEffect.call(void 0, () => {

package/cjs/checkbox/checkbox-check.cjs

@@ -2,7 +2,7 @@
 
 
 
-var _A356CGNDcjs = require('../__chunks/A356CGND.cjs');
+var _JDCTLYQ4cjs = require('../__chunks/JDCTLYQ4.cjs');
 require('../__chunks/ERFHNHON.cjs');
 require('../__chunks/NGD3IQDB.cjs');
 require('../__chunks/TW3SFX4C.cjs');
@@ -11,4 +11,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.CheckboxCheck = _A356CGNDcjs.CheckboxCheck; exports.useCheckboxCheck = _A356CGNDcjs.useCheckboxCheck;
+exports.CheckboxCheck = _JDCTLYQ4cjs.CheckboxCheck; exports.useCheckboxCheck = _JDCTLYQ4cjs.useCheckboxCheck;

package/cjs/collection/collection-renderer.d.cts

@@ -296,9 +296,7 @@ export declare function useCollectionRenderer<T extends Item = any>({ store, ite
     onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;

package/cjs/collection/collection-renderer.d.ts

@@ -296,9 +296,7 @@ export declare function useCollectionRenderer<T extends Item = any>({ store, ite
     onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;

package/cjs/combobox/combobox-cancel.cjs

@@ -44,7 +44,7 @@ var children = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "1pt",
+    strokeWidth: 1.5,
     width: "1em",
     height: "1em",
     pointerEvents: "none",

package/cjs/combobox/combobox-disclosure.cjs

@@ -43,7 +43,7 @@ var children = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "1.5pt",
+    strokeWidth: 1.5,
     viewBox: "0 0 16 16",
     height: "1em",
     width: "1em",

package/cjs/combobox/combobox-item-check.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _A356CGNDcjs = require('../__chunks/A356CGND.cjs');
+var _JDCTLYQ4cjs = require('../__chunks/JDCTLYQ4.cjs');
 require('../__chunks/ERFHNHON.cjs');
 
 
@@ -31,7 +31,7 @@ var useComboboxItemCheck = _NGD3IQDBcjs.createHook.call(void 0, function useComb
   var _b = _a, { store, checked } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "checked"]);
   const context = _react.useContext.call(void 0, _2IJSEADJcjs.ComboboxItemCheckedContext);
   checked = checked != null ? checked : context;
-  props = _A356CGNDcjs.useCheckboxCheck.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { checked }));
+  props = _JDCTLYQ4cjs.useCheckboxCheck.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { checked }));
   return props;
 });
 var ComboboxItemCheck = _NGD3IQDBcjs.forwardRef.call(void 0, function ComboboxItemCheck2(props) {

package/cjs/combobox/combobox-item.cjs

@@ -4,7 +4,7 @@
 var _Q6QJEXBKcjs = require('../__chunks/Q6QJEXBK.cjs');
 
 
-var _7DQ2LBH2cjs = require('../__chunks/7DQ2LBH2.cjs');
+var _QUHFOHHTcjs = require('../__chunks/QUHFOHHT.cjs');
 require('../__chunks/U4NXCMZ3.cjs');
 
 
@@ -181,7 +181,7 @@ var useComboboxItem = _NGD3IQDBcjs.createHook.call(void 0,
       onKeyDown
     });
     const moveOnKeyPressProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, moveOnKeyPress);
-    props = _7DQ2LBH2cjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _QUHFOHHTcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store
     }, props), {
       getItem,

package/cjs/combobox/combobox-popover.cjs

@@ -9,10 +9,10 @@ require('../__chunks/VPI3EKVY.cjs');
 require('../__chunks/NEK2UEJN.cjs');
 
 
-var _DCTXNU2Xcjs = require('../__chunks/DCTXNU2X.cjs');
+var _COWKMNMZcjs = require('../__chunks/COWKMNMZ.cjs');
 
 
-var _CWS5RZSUcjs = require('../__chunks/CWS5RZSU.cjs');
+var _ZTAE5B6Wcjs = require('../__chunks/ZTAE5B6W.cjs');
 require('../__chunks/TSEXNK3K.cjs');
 require('../__chunks/JF225FQ5.cjs');
 require('../__chunks/37BRXQN7.cjs');
@@ -58,6 +58,7 @@ require('../__chunks/CJDHQUBR.cjs');
 var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/combobox/combobox-popover.tsx
+var _react = require('react');
 var _dom = require('@ariakit/core/utils/dom');
 var _misc = require('@ariakit/core/utils/misc');
 var TagName = "div";
@@ -79,12 +80,14 @@ var useComboboxPopover = _NGD3IQDBcjs.createHook.call(void 0,
       modal,
       tabIndex,
       alwaysVisible,
+      autoFocusOnHide = true,
       hideOnInteractOutside = true
     } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
       "store",
       "modal",
       "tabIndex",
       "alwaysVisible",
+      "autoFocusOnHide",
       "hideOnInteractOutside"
     ]);
     const context = _2IJSEADJcjs.useComboboxProviderContext.call(void 0, );
@@ -94,14 +97,14 @@ var useComboboxPopover = _NGD3IQDBcjs.createHook.call(void 0,
       process.env.NODE_ENV !== "production" && "ComboboxPopover must receive a `store` prop or be wrapped in a ComboboxProvider component."
     );
     const baseElement = store.useState("baseElement");
+    const hiddenByClickOutsideRef = _react.useRef.call(void 0, false);
     props = _Q6MAE3CVcjs.useComboboxList.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, alwaysVisible }, props));
-    props = _DCTXNU2Xcjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _COWKMNMZcjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       modal,
       alwaysVisible,
       backdrop: false,
       autoFocusOnShow: false,
-      autoFocusOnHide: false,
       finalFocus: baseElement,
       preserveTabOrderAnchor: null
     }, props), {
@@ -133,6 +136,18 @@ var useComboboxPopover = _NGD3IQDBcjs.createHook.call(void 0,
         const controlElements = doc.querySelectorAll(selector);
         return [...elements, ...controlElements];
       },
+      // The combobox popover should focus on the combobox input when it hides,
+      // unless the event was triggered by a click outside the popover, in which
+      // case the input shouldn't be re-focused.
+      autoFocusOnHide(element) {
+        if (_misc.isFalsyBooleanCallback.call(void 0, autoFocusOnHide, element))
+          return false;
+        if (hiddenByClickOutsideRef.current) {
+          hiddenByClickOutsideRef.current = false;
+          return false;
+        }
+        return true;
+      },
       // 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
@@ -145,13 +160,16 @@ var useComboboxPopover = _NGD3IQDBcjs.createHook.call(void 0,
         if (isController(event.target, contentId, baseId))
           return false;
         const result = typeof hideOnInteractOutside === "function" ? hideOnInteractOutside(event) : hideOnInteractOutside;
+        if (result) {
+          hiddenByClickOutsideRef.current = event.type === "click";
+        }
         return result;
       }
     }));
     return props;
   }
 );
-var ComboboxPopover = _CWS5RZSUcjs.createDialogComponent.call(void 0, 
+var ComboboxPopover = _ZTAE5B6Wcjs.createDialogComponent.call(void 0, 
   _NGD3IQDBcjs.forwardRef.call(void 0, function ComboboxPopover2(props) {
     const htmlProps = useComboboxPopover(props);
     return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);

package/cjs/combobox/combobox.cjs

@@ -38,7 +38,7 @@ require('../__chunks/CJDHQUBR.cjs');
 
 var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
-// src/combobox/combobox.ts
+// src/combobox/combobox.tsx
 var _react = require('react');
 
 
@@ -93,14 +93,15 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       focusable = true,
       autoSelect: autoSelectProp = false,
       getAutoSelectId,
-      showOnChange = true,
       setValueOnChange = true,
-      showOnMouseDown = true,
+      showMinLength = 0,
+      showOnChange,
+      showOnMouseDown,
       showOnClick = showOnMouseDown,
+      showOnKeyDown,
+      showOnKeyPress = showOnKeyDown,
       blurActiveItemOnClick,
       setValueOnClick = true,
-      showOnKeyDown = true,
-      showOnKeyPress = showOnKeyDown,
       moveOnKeyPress = true,
       autoComplete = "list"
     } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
@@ -108,14 +109,15 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       "focusable",
       "autoSelect",
       "getAutoSelectId",
-      "showOnChange",
       "setValueOnChange",
+      "showMinLength",
+      "showOnChange",
       "showOnMouseDown",
       "showOnClick",
-      "blurActiveItemOnClick",
-      "setValueOnClick",
       "showOnKeyDown",
       "showOnKeyPress",
+      "blurActiveItemOnClick",
+      "setValueOnClick",
       "moveOnKeyPress",
       "autoComplete"
     ]);
@@ -312,8 +314,9 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
         elements.forEach((el) => el.removeEventListener("focusout", onBlur2));
       };
     }, [inline, contentElement, store, value]);
+    const canShow = value.length >= showMinLength;
     const onChangeProp = props.onChange;
-    const showOnChangeProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, showOnChange);
+    const showOnChangeProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, showOnChange != null ? showOnChange : canShow);
     const setValueOnChangeProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, setValueOnChange);
     const onChange = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
       onChangeProp == null ? void 0 : onChangeProp(event);
@@ -366,7 +369,7 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       blurActiveItemOnClick != null ? blurActiveItemOnClick : () => !!(store == null ? void 0 : store.getState().includesBaseElement)
     );
     const setValueOnClickProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, setValueOnClick);
-    const showOnClickProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, showOnClick);
+    const showOnClickProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, showOnClick != null ? showOnClick : canShow);
     const onMouseDown = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
       onMouseDownProp == null ? void 0 : onMouseDownProp(event);
       if (event.defaultPrevented)
@@ -388,7 +391,7 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       }
     });
     const onKeyDownProp = props.onKeyDown;
-    const showOnKeyPressProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, showOnKeyPress);
+    const showOnKeyPressProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, showOnKeyPress != null ? showOnKeyPress : canShow);
     const onKeyDown = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
       onKeyDownProp == null ? void 0 : onKeyDownProp(event);
       if (!event.repeat) {

package/cjs/combobox/combobox.d.cts

@@ -143,6 +143,26 @@ export interface ComboboxOptions<T extends ElementType = TagName> extends Compos
      * value.
      */
     blurActiveItemOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    /**
+     * Specifies the minimum character count the input value should have before
+     * the [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components are displayed.
+     *
+     * The [`showOnChange`](https://ariakit.org/reference/combobox#showonchange),
+     * [`showOnClick`](https://ariakit.org/reference/combobox#showonclick), and
+     * [`showOnKeyPress`](https://ariakit.org/reference/combobox#showonkeypress)
+     * props allow you to tailor the behavior for each unique event.
+     * @default 0
+     * @example
+     * In the following example, the combobox list will be shown when the input
+     * value has at least one character. However, if the user presses the arrow
+     * keys, the list will be shown regardless of the input value length.
+     * ```jsx
+     * <Combobox showMinLength={1} showOnKeyPress />
+     * ```
+     */
+    showMinLength?: number;
     /**
      * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
      * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)