@ariakit/react-core 0.4.2 → 0.4.4

package/cjs/toolbar/toolbar-input.d.ts

@@ -1,5 +1,4 @@
 import type { ElementType } from "react";
-import type { CompositeInputOptions } from "../composite/composite-input.js";
 import type { Props } from "../utils/types.js";
 import type { ToolbarItemOptions } from "./toolbar-item.js";
 declare const TagName = "input";
@@ -7,6 +6,7 @@ type TagName = typeof TagName;
 /**
  * Returns props to create a `ToolbarInput` component.
  * @see https://ariakit.org/components/toolbar
+ * @deprecated Use `useToolbarItem` instead.
  * @example
  * ```jsx
  * const store = useToolbarStore();
@@ -21,6 +21,7 @@ export declare const useToolbarInput: import("../utils/types.js").Hook<"input",
  * Renders a text input as a toolbar item, maintaining arrow key navigation on
  * the toolbar.
  * @see https://ariakit.org/components/toolbar
+ * @deprecated Use `<ToolbarItem render={<input />}>` instead.
  * @example
  * ```jsx {2}
  * <Toolbar>
@@ -29,7 +30,7 @@ export declare const useToolbarInput: import("../utils/types.js").Hook<"input",
  * ```
  */
 export declare const ToolbarInput: (props: ToolbarInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export interface ToolbarInputOptions<T extends ElementType = TagName> extends ToolbarItemOptions<T>, Omit<CompositeInputOptions<T>, "store"> {
+export interface ToolbarInputOptions<T extends ElementType = TagName> extends ToolbarItemOptions<T> {
 }
 export type ToolbarInputProps<T extends ElementType = TagName> = Props<T, ToolbarInputOptions<T>>;
 export {};

package/cjs/toolbar/toolbar-item.cjs

@@ -2,8 +2,8 @@
 
 
 
-var _OGH323OWcjs = require('../__chunks/OGH323OW.cjs');
-require('../__chunks/LEU3BIGC.cjs');
+var _YO7LLGVAcjs = require('../__chunks/YO7LLGVA.cjs');
+require('../__chunks/QUHFOHHT.cjs');
 require('../__chunks/U4NXCMZ3.cjs');
 require('../__chunks/HD5AHCRI.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
@@ -20,4 +20,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.ToolbarItem = _OGH323OWcjs.ToolbarItem; exports.useToolbarItem = _OGH323OWcjs.useToolbarItem;
+exports.ToolbarItem = _YO7LLGVAcjs.ToolbarItem; exports.useToolbarItem = _YO7LLGVAcjs.useToolbarItem;

package/cjs/tooltip/tooltip.cjs

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _3MKOUH5Mcjs = require('../__chunks/3MKOUH5M.cjs');
+var _HPNCFYQJcjs = require('../__chunks/HPNCFYQJ.cjs');
 require('../__chunks/KXQOQQ5B.cjs');
-require('../__chunks/DCTXNU2X.cjs');
+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');
@@ -95,7 +95,7 @@ var useTooltip = _NGD3IQDBcjs.createHook.call(void 0,
       (state) => state.type === "description" ? "tooltip" : "none"
     );
     props = _AV6KTKLEcjs.__spreadValues.call(void 0, { role }, props);
-    props = _3MKOUH5Mcjs.useHovercard.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
+    props = _HPNCFYQJcjs.useHovercard.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
       store,
       portal,
       gutter,
@@ -124,7 +124,7 @@ var useTooltip = _NGD3IQDBcjs.createHook.call(void 0,
     return props;
   }
 );
-var Tooltip = _CWS5RZSUcjs.createDialogComponent.call(void 0, 
+var Tooltip = _ZTAE5B6Wcjs.createDialogComponent.call(void 0, 
   _NGD3IQDBcjs.forwardRef.call(void 0, function Tooltip2(props) {
     const htmlProps = useTooltip(props);
     return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);

package/cjs/utils/misc.d.cts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, MutableRefObject, ReactElement, RefAttributes, RefCallback } from "react";
+import type { HTMLAttributes, MutableRefObject, ReactElement, Ref, RefCallback } from "react";
 /**
  * Sets both a function and object React ref.
  */
@@ -6,11 +6,13 @@ export declare function setRef<T>(ref: RefCallback<T> | MutableRefObject<T> | nu
 /**
  * Checks if an element is a valid React element with a ref.
  */
-export declare function isValidElementWithRef<P>(element: unknown): element is ReactElement<P> & RefAttributes<any>;
+export declare function isValidElementWithRef<P>(element: unknown): element is ReactElement<P> & {
+    ref?: Ref<any>;
+};
 /**
  * Gets the ref property from a React element.
  */
-export declare function getRefProperty(element: unknown): import("react").Ref<any> | undefined;
+export declare function getRefProperty(element: unknown): Ref<any> | undefined;
 /**
  * Merges two sets of props.
  */

package/cjs/utils/misc.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, MutableRefObject, ReactElement, RefAttributes, RefCallback } from "react";
+import type { HTMLAttributes, MutableRefObject, ReactElement, Ref, RefCallback } from "react";
 /**
  * Sets both a function and object React ref.
  */
@@ -6,11 +6,13 @@ export declare function setRef<T>(ref: RefCallback<T> | MutableRefObject<T> | nu
 /**
  * Checks if an element is a valid React element with a ref.
  */
-export declare function isValidElementWithRef<P>(element: unknown): element is ReactElement<P> & RefAttributes<any>;
+export declare function isValidElementWithRef<P>(element: unknown): element is ReactElement<P> & {
+    ref?: Ref<any>;
+};
 /**
  * Gets the ref property from a React element.
  */
-export declare function getRefProperty(element: unknown): import("react").Ref<any> | undefined;
+export declare function getRefProperty(element: unknown): Ref<any> | undefined;
 /**
  * Merges two sets of props.
  */

package/cjs/utils/types.d.cts

@@ -6,7 +6,9 @@ import type { AnyObject, EmptyObject } from "@ariakit/core/utils/types";
  * @example
  * const children: RenderProp = (props) => <div {...props} />;
  */
-export type RenderProp<P = React.HTMLAttributes<any> & React.RefAttributes<any>> = (props: P) => React.ReactNode;
+export type RenderProp<P = React.HTMLAttributes<any> & {
+    ref?: React.Ref<any>;
+}> = (props: P) => React.ReactNode;
 /**
  * The `wrapElement` prop.
  */

package/cjs/utils/types.d.ts

@@ -6,7 +6,9 @@ import type { AnyObject, EmptyObject } from "@ariakit/core/utils/types";
  * @example
  * const children: RenderProp = (props) => <div {...props} />;
  */
-export type RenderProp<P = React.HTMLAttributes<any> & React.RefAttributes<any>> = (props: P) => React.ReactNode;
+export type RenderProp<P = React.HTMLAttributes<any> & {
+    ref?: React.Ref<any>;
+}> = (props: P) => React.ReactNode;
 /**
  * The `wrapElement` prop.
  */

package/esm/__chunks/{LABIXQLW.js → 44PDY2W5.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useDialogDismiss
-} from "./JCOBPKEI.js";
+} from "./BY6P32UK.js";
 import {
   usePopoverScopedContext
 } from "./5B3U64HV.js";

package/esm/__chunks/{FYNSL2D5.js → 5H3YXAUC.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   usePopoverDisclosureArrow
-} from "./NN4HLGKS.js";
+} from "./F2RFUFO2.js";
 import {
   useSelectContext
 } from "./SYZHUNAU.js";

package/esm/__chunks/{DGR3GYOB.js → APFOINTZ.js}

@@ -1,10 +1,13 @@
 "use client";
+import {
+  useComboboxContext
+} from "./N4X7J4OQ.js";
+import {
+  useSelectContext
+} from "./SYZHUNAU.js";
 import {
   useCompositeStoreProps
 } from "./ZR5N62ZV.js";
-import {
-  useCompositeContext
-} from "./QFI3MCMR.js";
 import {
   useStore,
   useStoreProps
@@ -21,7 +24,7 @@ import {
 import { useMemo } from "react";
 import * as Core from "@ariakit/core/tab/tab-store";
 function useTabStoreProps(store, update, props) {
-  useUpdateEffect(update, [props.composite]);
+  useUpdateEffect(update, [props.composite, props.combobox]);
   store = useCompositeStoreProps(store, update, props);
   useStoreProps(store, props, "selectedId", "setSelectedId");
   useStoreProps(store, props, "selectOnMove");
@@ -29,13 +32,15 @@ function useTabStoreProps(store, update, props) {
   useUpdateEffect(updatePanels, [store, updatePanels]);
   return Object.assign(
     useMemo(() => __spreadProps(__spreadValues({}, store), { panels }), [store, panels]),
-    { composite: props.composite }
+    { composite: props.composite, combobox: props.combobox }
   );
 }
 function useTabStore(props = {}) {
-  const composite = useCompositeContext();
+  const combobox = useComboboxContext();
+  const composite = useSelectContext() || combobox;
   props = __spreadProps(__spreadValues({}, props), {
-    composite: props.composite !== void 0 ? props.composite : composite
+    composite: props.composite !== void 0 ? props.composite : composite,
+    combobox: props.combobox !== void 0 ? props.combobox : combobox
   });
   const [store, update] = useStore(Core.createTabStore, props);
   return useTabStoreProps(store, update, props);

package/esm/__chunks/{JCOBPKEI.js → BY6P32UK.js}

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

package/esm/__chunks/{QDVOJENT.js → DSUHLHLE.js}

@@ -4,7 +4,7 @@ import {
 } from "./MIIHBIKN.js";
 import {
   useCompositeItem
-} from "./VGL3CETR.js";
+} from "./R33ISPJY.js";
 import {
   createElement,
   createHook,

package/esm/__chunks/{NN4HLGKS.js → F2RFUFO2.js}

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

package/esm/__chunks/{2VWKZYYT.js → H5N72W37.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   usePopoverDismiss
-} from "./LABIXQLW.js";
+} from "./44PDY2W5.js";
 import {
   useHovercardScopedContext
 } from "./5YBNH7BL.js";

package/esm/__chunks/{NQ4PTILT.js → IOUGWXY5.js}

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

package/esm/__chunks/{X3V2DT2U.js → LTYEFENI.js}

@@ -2,7 +2,7 @@
 import {
   createDialogComponent,
   useDialog
-} from "./NQ4PTILT.js";
+} from "./IOUGWXY5.js";
 import {
   PopoverScopedContextProvider,
   usePopoverProviderContext

package/esm/__chunks/{H4YBNKTY.js → NFPDVAAW.js}

@@ -10,7 +10,7 @@ import {
 } from "./VXKKJNIF.js";
 import {
   useCompositeItem
-} from "./VGL3CETR.js";
+} from "./R33ISPJY.js";
 import {
   createElement,
   createHook,

package/esm/__chunks/{DCFMDHRW.js → NHVUMSP7.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useCompositeItem
-} from "./VGL3CETR.js";
+} from "./R33ISPJY.js";
 import {
   useToolbarContext
 } from "./766APSLG.js";

package/esm/__chunks/{RAKW656I.js → Q4PZFBSW.js}

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

package/esm/__chunks/{VGL3CETR.js → R33ISPJY.js}

@@ -8,7 +8,8 @@ import {
 import {
   focusSilently,
   getEnabledItem,
-  isItem
+  isItem,
+  selectTextField
 } from "./3IEDWLST.js";
 import {
   CompositeItemContext,
@@ -41,7 +42,9 @@ import {
 // src/composite/composite-item.tsx
 import { useCallback, useContext, useMemo, useRef, useState } from "react";
 import {
+  getDocument,
   getScrollingElement,
+  getTextboxSelection,
   isButton,
   isTextField
 } from "@ariakit/core/utils/dom";
@@ -52,6 +55,9 @@ import {
 } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
 var TagName = "button";
+function isTextbox(element) {
+  return element.isContentEditable || isTextField(element);
+}
 function isEditableElement(element) {
   if (element.isContentEditable)
     return true;
@@ -59,6 +65,16 @@ function isEditableElement(element) {
     return true;
   return element.tagName === "INPUT" && !isButton(element);
 }
+function getValueLength(element) {
+  if (isTextField(element)) {
+    return element.value.length;
+  } else if (element.isContentEditable) {
+    const range = getDocument(element).createRange();
+    range.selectNodeContents(element);
+    return range.toString().length;
+  }
+  return 0;
+}
 function getNextPageOffset(scrollingElement, pageUp = false) {
   const height = scrollingElement.clientHeight;
   const { top } = scrollingElement.getBoundingClientRect();
@@ -213,11 +229,12 @@ var useCompositeItem = createHook(
         return;
       if (!store)
         return;
-      const { activeId, virtualFocus: virtualFocus2, baseElement: baseElement2 } = store.getState();
       if (targetIsAnotherItem(event, store))
         return;
-      if (activeId !== id) {
-        store.setActiveId(id);
+      const { virtualFocus: virtualFocus2, baseElement: baseElement2 } = store.getState();
+      store.setActiveId(id);
+      if (isTextbox(event.currentTarget)) {
+        selectTextField(event.currentTarget);
       }
       if (!virtualFocus2)
         return;
@@ -305,6 +322,22 @@ var useCompositeItem = createHook(
       };
       const action = keyMap[event.key];
       if (action) {
+        if (isTextbox(currentTarget)) {
+          const selection = getTextboxSelection(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/esm/__chunks/{6VDNHSLX.js → XEJ23EM6.js}

@@ -6,10 +6,10 @@ import {
 } from "./YMV43K4F.js";
 import {
   usePopover
-} from "./X3V2DT2U.js";
+} from "./LTYEFENI.js";
 import {
   createDialogComponent
-} from "./NQ4PTILT.js";
+} from "./IOUGWXY5.js";
 import {
   HovercardScopedContextProvider,
   useHovercardProviderContext

package/esm/checkbox/checkbox-check.js

@@ -2,7 +2,7 @@
 import {
   CheckboxCheck,
   useCheckboxCheck
-} from "../__chunks/RAKW656I.js";
+} from "../__chunks/Q4PZFBSW.js";
 import "../__chunks/6XBVQI3K.js";
 import "../__chunks/GUCZNEAD.js";
 import "../__chunks/WOWUAP42.js";

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

@@ -49,7 +49,9 @@ declare function getItem<T extends Item = any>(items: Items<T>, index: number):
 export declare function useCollectionRenderer<T extends Item = any>({ store, items: itemsProp, initialItems, gap, itemSize, estimatedItemSize, overscan: overscanProp, orientation: orientationProp, padding, paddingStart, paddingEnd, persistentIndices, renderOnScroll, renderOnResize, children: renderItem, ...props }: CollectionRendererProps<T>): {
     children: ReactNode[];
     wrapElement?: import("../utils/types.js").WrapElement | undefined;
-    render?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("../utils/types.js").RenderProp<import("react").HTMLAttributes<any> & import("react").RefAttributes<any>> | undefined;
+    render?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("../utils/types.js").RenderProp<import("react").HTMLAttributes<any> & {
+        ref?: import("react").Ref<any> | undefined;
+    }> | undefined;
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -294,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/esm/combobox/combobox-cancel.js

@@ -2,10 +2,10 @@
 import {
   useButton
 } from "../__chunks/CKAOM5LG.js";
+import "../__chunks/PJ7ERAIM.js";
 import {
   useComboboxProviderContext
 } from "../__chunks/N4X7J4OQ.js";
-import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/QFI3MCMR.js";
 import "../__chunks/6LTHW2TQ.js";
 import "../__chunks/5B3U64HV.js";
@@ -44,7 +44,7 @@ var children = /* @__PURE__ */ jsxs(
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "1pt",
+    strokeWidth: 1.5,
     width: "1em",
     height: "1em",
     pointerEvents: "none",

package/esm/combobox/combobox-disclosure.js

@@ -4,10 +4,10 @@ import {
 } from "../__chunks/LTYBQEWX.js";
 import "../__chunks/R6SM2O47.js";
 import "../__chunks/CKAOM5LG.js";
+import "../__chunks/PJ7ERAIM.js";
 import {
   useComboboxProviderContext
 } from "../__chunks/N4X7J4OQ.js";
-import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/QFI3MCMR.js";
 import "../__chunks/6LTHW2TQ.js";
 import "../__chunks/5B3U64HV.js";
@@ -43,7 +43,7 @@ var children = /* @__PURE__ */ jsx(
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "1.5pt",
+    strokeWidth: 1.5,
     viewBox: "0 0 16 16",
     height: "1em",
     width: "1em",

package/esm/combobox/combobox-item-check.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useCheckboxCheck
-} from "../__chunks/RAKW656I.js";
+} from "../__chunks/Q4PZFBSW.js";
 import "../__chunks/6XBVQI3K.js";
 import {
   ComboboxItemCheckedContext

package/esm/combobox/combobox-item.js

@@ -2,16 +2,16 @@
 import {
   useCompositeHover
 } from "../__chunks/VXKKJNIF.js";
+import {
+  useCompositeItem
+} from "../__chunks/R33ISPJY.js";
+import "../__chunks/PJ7ERAIM.js";
 import {
   ComboboxItemCheckedContext,
   ComboboxItemValueContext,
   ComboboxListRoleContext,
   useComboboxScopedContext
 } from "../__chunks/N4X7J4OQ.js";
-import {
-  useCompositeItem
-} from "../__chunks/VGL3CETR.js";
-import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";
 import "../__chunks/QFI3MCMR.js";

package/esm/combobox/combobox-popover.js

@@ -9,10 +9,10 @@ import "../__chunks/QFI3MCMR.js";
 import "../__chunks/6LTHW2TQ.js";
 import {
   usePopover
-} from "../__chunks/X3V2DT2U.js";
+} from "../__chunks/LTYEFENI.js";
 import {
   createDialogComponent
-} from "../__chunks/NQ4PTILT.js";
+} from "../__chunks/IOUGWXY5.js";
 import "../__chunks/GOXKZAQI.js";
 import "../__chunks/6GXEOXGT.js";
 import "../__chunks/PTPUIM7N.js";
@@ -58,8 +58,9 @@ import {
 } from "../__chunks/4R3V3JGP.js";
 
 // src/combobox/combobox-popover.tsx
+import { useRef } from "react";
 import { getDocument, matches } from "@ariakit/core/utils/dom";
-import { invariant } from "@ariakit/core/utils/misc";
+import { invariant, isFalsyBooleanCallback } from "@ariakit/core/utils/misc";
 var TagName = "div";
 function isController(target, ...ids) {
   if (!target)
@@ -79,12 +80,14 @@ var useComboboxPopover = createHook(
       modal,
       tabIndex,
       alwaysVisible,
+      autoFocusOnHide = true,
       hideOnInteractOutside = true
     } = _b, props = __objRest(_b, [
       "store",
       "modal",
       "tabIndex",
       "alwaysVisible",
+      "autoFocusOnHide",
       "hideOnInteractOutside"
     ]);
     const context = useComboboxProviderContext();
@@ -94,6 +97,7 @@ var useComboboxPopover = createHook(
       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 = useRef(false);
     props = useComboboxList(__spreadValues({ store, alwaysVisible }, props));
     props = usePopover(__spreadProps(__spreadValues({
       store,
@@ -101,7 +105,6 @@ var useComboboxPopover = createHook(
       alwaysVisible,
       backdrop: false,
       autoFocusOnShow: false,
-      autoFocusOnHide: false,
       finalFocus: baseElement,
       preserveTabOrderAnchor: null
     }, props), {
@@ -133,6 +136,18 @@ var useComboboxPopover = createHook(
         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 (isFalsyBooleanCallback(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,6 +160,9 @@ var useComboboxPopover = createHook(
         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;
       }
     }));

package/esm/combobox/combobox-row.js

@@ -1,10 +1,10 @@
 "use client";
-import {
-  useComboboxScopedContext
-} from "../__chunks/N4X7J4OQ.js";
 import {
   useCompositeRow
 } from "../__chunks/TZ7AP4RP.js";
+import {
+  useComboboxScopedContext
+} from "../__chunks/N4X7J4OQ.js";
 import "../__chunks/QFI3MCMR.js";
 import "../__chunks/6LTHW2TQ.js";
 import "../__chunks/5B3U64HV.js";