@ariakit/react-core 0.4.4 → 0.4.5

package/cjs/combobox/combobox-item.d.ts

@@ -93,6 +93,20 @@ export interface ComboboxItemOptions<T extends ElementType = TagName> extends Co
      * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      */
     hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    /**
+     * Whether to set the combobox
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) state
+     * using this item's
+     * [`value`](https://ariakit.org/reference/combobox-item#value) when the item
+     * is clicked. The default is `true`, unless the combobox is
+     * [multi-selectable](https://ariakit.org/examples/combobox-multiple).
+     *
+     * Live examples:
+     * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
+     * - [Submenu with
+     *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
+     */
+    setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * Whether to set the
      * [`selectedValue`](https://ariakit.org/reference/combobox-provider#selectedvalue)
@@ -108,19 +122,15 @@ export interface ComboboxItemOptions<T extends ElementType = TagName> extends Co
      */
     selectValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
-     * Whether to set the combobox
-     * [`value`](https://ariakit.org/reference/combobox-provider#value) state
-     * using this item's
-     * [`value`](https://ariakit.org/reference/combobox-item#value) when the item
-     * is clicked. The default is `true`, unless the combobox is
-     * [multi-selectable](https://ariakit.org/examples/combobox-multiple).
-     *
-     * Live examples:
-     * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
-     * - [Submenu with
-     *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
+     * Whether to reset the the combobox input value when this item is selected or
+     * unselected by click. This prop is set to `true` by default if
+     * the combobox supports multiple selections. In other words, if the
+     * [`selectedValue`](https://ariakit.org/reference/combobox-provider#selectedvalue)
+     * or
+     * [`defaultSelectedValue`](https://ariakit.org/reference/combobox-provider#defaultselectedvalue)
+     * props are arrays.
      */
-    setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    resetValueOnSelect?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * @default false
      */

package/cjs/combobox/combobox-popover.cjs

@@ -9,32 +9,32 @@ require('../__chunks/VPI3EKVY.cjs');
 require('../__chunks/NEK2UEJN.cjs');
 
 
-var _COWKMNMZcjs = require('../__chunks/COWKMNMZ.cjs');
+var _N43E53E6cjs = require('../__chunks/N43E53E6.cjs');
 
 
-var _ZTAE5B6Wcjs = require('../__chunks/ZTAE5B6W.cjs');
-require('../__chunks/TSEXNK3K.cjs');
-require('../__chunks/JF225FQ5.cjs');
-require('../__chunks/37BRXQN7.cjs');
-require('../__chunks/MU7F4QWJ.cjs');
-require('../__chunks/PVYTX5U5.cjs');
-require('../__chunks/DLIQLPX4.cjs');
+var _QJDA4LG6cjs = require('../__chunks/QJDA4LG6.cjs');
+require('../__chunks/VR6GCLOV.cjs');
 require('../__chunks/UUJ5Q6IA.cjs');
 require('../__chunks/4H7FYXWQ.cjs');
+require('../__chunks/JF225FQ5.cjs');
 require('../__chunks/JKERATCG.cjs');
+require('../__chunks/BX2QEIBH.cjs');
+require('../__chunks/MU7F4QWJ.cjs');
+require('../__chunks/6IUEXB4L.cjs');
 require('../__chunks/7YLCVXZ7.cjs');
 require('../__chunks/CXZMA435.cjs');
 require('../__chunks/7TN63K2T.cjs');
+require('../__chunks/SL55T4ZB.cjs');
 require('../__chunks/3ND7K6FF.cjs');
-require('../__chunks/6IUEXB4L.cjs');
+require('../__chunks/DLIQLPX4.cjs');
 require('../__chunks/AFPGTIIH.cjs');
 require('../__chunks/J3OG6T3B.cjs');
+require('../__chunks/2BIO7R5N.cjs');
 require('../__chunks/PE3KUHN6.cjs');
 require('../__chunks/AXNMZ6L6.cjs');
 require('../__chunks/CVD2AZE2.cjs');
-require('../__chunks/2BIO7R5N.cjs');
-require('../__chunks/R6M66EKZ.cjs');
 require('../__chunks/7CYY7U2A.cjs');
+require('../__chunks/R6M66EKZ.cjs');
 require('../__chunks/77BAEZ2Z.cjs');
 require('../__chunks/GDEDCFNU.cjs');
 require('../__chunks/NTNMOEWE.cjs');
@@ -48,7 +48,9 @@ require('../__chunks/LLMPAMXI.cjs');
 var _NGD3IQDBcjs = require('../__chunks/NGD3IQDB.cjs');
 require('../__chunks/V3ZO7ICA.cjs');
 require('../__chunks/N6YOHUBI.cjs');
-require('../__chunks/GXMZA6DT.cjs');
+
+
+var _GXMZA6DTcjs = require('../__chunks/GXMZA6DT.cjs');
 require('../__chunks/TW3SFX4C.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 
@@ -98,15 +100,20 @@ var useComboboxPopover = _NGD3IQDBcjs.createHook.call(void 0,
     );
     const baseElement = store.useState("baseElement");
     const hiddenByClickOutsideRef = _react.useRef.call(void 0, false);
+    const treeSnapshotKey = _GXMZA6DTcjs.useStoreState.call(void 0, 
+      store.tag,
+      (state) => state == null ? void 0 : state.renderedItems.length
+    );
     props = _Q6MAE3CVcjs.useComboboxList.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, alwaysVisible }, props));
-    props = _COWKMNMZcjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _N43E53E6cjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       modal,
       alwaysVisible,
       backdrop: false,
       autoFocusOnShow: false,
       finalFocus: baseElement,
-      preserveTabOrderAnchor: null
+      preserveTabOrderAnchor: null,
+      unstable_treeSnapshotKey: treeSnapshotKey
     }, props), {
       // When the combobox popover is modal, we make sure to include the
       // combobox input and all the combobox controls (cancel, disclosure) in
@@ -169,7 +176,7 @@ var useComboboxPopover = _NGD3IQDBcjs.createHook.call(void 0,
     return props;
   }
 );
-var ComboboxPopover = _ZTAE5B6Wcjs.createDialogComponent.call(void 0, 
+var ComboboxPopover = _QJDA4LG6cjs.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-provider.cjs

@@ -1,10 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _NDVZ37O3cjs = require('../__chunks/NDVZ37O3.cjs');
+var _RG6U7KAScjs = require('../__chunks/RG6U7KAS.cjs');
 
 
 var _2IJSEADJcjs = require('../__chunks/2IJSEADJ.cjs');
+require('../__chunks/PVLZGFP6.cjs');
 require('../__chunks/4H5ZMMOI.cjs');
 require('../__chunks/Q7DU7FP7.cjs');
 require('../__chunks/VPI3EKVY.cjs');
@@ -24,7 +25,7 @@ require('../__chunks/AV6KTKLE.cjs');
 // src/combobox/combobox-provider.tsx
 var _jsxruntime = require('react/jsx-runtime');
 function ComboboxProvider(props = {}) {
-  const store = _NDVZ37O3cjs.useComboboxStore.call(void 0, props);
+  const store = _RG6U7KAScjs.useComboboxStore.call(void 0, props);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _2IJSEADJcjs.ComboboxContextProvider, { value: store, children: props.children });
 }
 

package/cjs/combobox/combobox-store.cjs

@@ -2,9 +2,13 @@
 
 
 
-var _NDVZ37O3cjs = require('../__chunks/NDVZ37O3.cjs');
+var _RG6U7KAScjs = require('../__chunks/RG6U7KAS.cjs');
+require('../__chunks/PVLZGFP6.cjs');
 require('../__chunks/4H5ZMMOI.cjs');
 require('../__chunks/Q7DU7FP7.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/NGD3IQDB.cjs');
 require('../__chunks/6RJSKW2C.cjs');
 require('../__chunks/V3ZO7ICA.cjs');
 require('../__chunks/N6YOHUBI.cjs');
@@ -15,4 +19,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.useComboboxStore = _NDVZ37O3cjs.useComboboxStore; exports.useComboboxStoreProps = _NDVZ37O3cjs.useComboboxStoreProps;
+exports.useComboboxStore = _RG6U7KAScjs.useComboboxStore; exports.useComboboxStoreProps = _RG6U7KAScjs.useComboboxStoreProps;

package/cjs/combobox/combobox-store.d.cts

@@ -2,9 +2,12 @@ import * as Core from "@ariakit/core/combobox/combobox-store";
 import type { PickRequired } from "@ariakit/core/utils/types";
 import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
 import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
+import type { TagStore } from "../tag/tag-store.js";
 import type { Store } from "../utils/store.js";
 export declare function useComboboxStoreProps<T extends Core.ComboboxStore>(store: T, update: () => void, props: ComboboxStoreProps): T & {
     disclosure: import("../disclosure/disclosure-store.js").DisclosureStore | null | undefined;
+} & {
+    tag: TagStore | null | undefined;
 };
 /**
  * Creates a combobox store to control the state of
@@ -31,9 +34,9 @@ export interface ComboboxStoreItem extends Core.ComboboxStoreItem {
 }
 export interface ComboboxStoreState<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Core.ComboboxStoreState<T>, CompositeStoreState<ComboboxStoreItem>, PopoverStoreState {
 }
-export interface ComboboxStoreFunctions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Omit<Core.ComboboxStoreFunctions<T>, "disclosure">, CompositeStoreFunctions<ComboboxStoreItem>, PopoverStoreFunctions {
+export interface ComboboxStoreFunctions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Pick<ComboboxStoreOptions<T>, "tag">, Omit<Core.ComboboxStoreFunctions<T>, "tag" | "disclosure">, CompositeStoreFunctions<ComboboxStoreItem>, PopoverStoreFunctions {
 }
-export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Omit<Core.ComboboxStoreOptions<T>, "disclosure">, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
+export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Omit<Core.ComboboxStoreOptions<T>, "tag" | "disclosure">, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
     /**
      * A callback that gets called when the
      * [`value`](https://ariakit.org/reference/combobox-provider#value) state
@@ -61,8 +64,13 @@ export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = Com
      *   Combobox](https://ariakit.org/examples/combobox-multiple)
      */
     setSelectedValue?: (value: ComboboxStoreState<T>["selectedValue"]) => void;
+    /**
+     * A reference to a [tag store](https://ariakit.org/apis/use-tag-store). It's
+     * automatically set when rendering a combobox within a tag list.
+     */
+    tag?: TagStore | null;
 }
-export interface ComboboxStoreProps<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends ComboboxStoreOptions<T>, Omit<Core.ComboboxStoreProps<T>, "disclosure"> {
+export interface ComboboxStoreProps<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends ComboboxStoreOptions<T>, Omit<Core.ComboboxStoreProps<T>, "tag" | "disclosure"> {
 }
-export interface ComboboxStore<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends ComboboxStoreFunctions<T>, Omit<Store<Core.ComboboxStore<T>>, "disclosure"> {
+export interface ComboboxStore<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends ComboboxStoreFunctions<T>, Omit<Store<Core.ComboboxStore<T>>, "tag" | "disclosure"> {
 }

package/cjs/combobox/combobox-store.d.ts

@@ -2,9 +2,12 @@ import * as Core from "@ariakit/core/combobox/combobox-store";
 import type { PickRequired } from "@ariakit/core/utils/types";
 import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
 import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
+import type { TagStore } from "../tag/tag-store.js";
 import type { Store } from "../utils/store.js";
 export declare function useComboboxStoreProps<T extends Core.ComboboxStore>(store: T, update: () => void, props: ComboboxStoreProps): T & {
     disclosure: import("../disclosure/disclosure-store.js").DisclosureStore | null | undefined;
+} & {
+    tag: TagStore | null | undefined;
 };
 /**
  * Creates a combobox store to control the state of
@@ -31,9 +34,9 @@ export interface ComboboxStoreItem extends Core.ComboboxStoreItem {
 }
 export interface ComboboxStoreState<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Core.ComboboxStoreState<T>, CompositeStoreState<ComboboxStoreItem>, PopoverStoreState {
 }
-export interface ComboboxStoreFunctions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Omit<Core.ComboboxStoreFunctions<T>, "disclosure">, CompositeStoreFunctions<ComboboxStoreItem>, PopoverStoreFunctions {
+export interface ComboboxStoreFunctions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Pick<ComboboxStoreOptions<T>, "tag">, Omit<Core.ComboboxStoreFunctions<T>, "tag" | "disclosure">, CompositeStoreFunctions<ComboboxStoreItem>, PopoverStoreFunctions {
 }
-export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Omit<Core.ComboboxStoreOptions<T>, "disclosure">, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
+export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Omit<Core.ComboboxStoreOptions<T>, "tag" | "disclosure">, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
     /**
      * A callback that gets called when the
      * [`value`](https://ariakit.org/reference/combobox-provider#value) state
@@ -61,8 +64,13 @@ export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = Com
      *   Combobox](https://ariakit.org/examples/combobox-multiple)
      */
     setSelectedValue?: (value: ComboboxStoreState<T>["selectedValue"]) => void;
+    /**
+     * A reference to a [tag store](https://ariakit.org/apis/use-tag-store). It's
+     * automatically set when rendering a combobox within a tag list.
+     */
+    tag?: TagStore | null;
 }
-export interface ComboboxStoreProps<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends ComboboxStoreOptions<T>, Omit<Core.ComboboxStoreProps<T>, "disclosure"> {
+export interface ComboboxStoreProps<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends ComboboxStoreOptions<T>, Omit<Core.ComboboxStoreProps<T>, "tag" | "disclosure"> {
 }
-export interface ComboboxStore<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends ComboboxStoreFunctions<T>, Omit<Store<Core.ComboboxStore<T>>, "disclosure"> {
+export interface ComboboxStore<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends ComboboxStoreFunctions<T>, Omit<Store<Core.ComboboxStore<T>>, "tag" | "disclosure"> {
 }

package/cjs/combobox/combobox-value.cjs

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _2IJSEADJcjs = require('../__chunks/2IJSEADJ.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/77BAEZ2Z.cjs');
+require('../__chunks/GDEDCFNU.cjs');
+require('../__chunks/NTNMOEWE.cjs');
+require('../__chunks/NGD3IQDB.cjs');
+require('../__chunks/TW3SFX4C.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
+
+// src/combobox/combobox-value.tsx
+var _misc = require('@ariakit/core/utils/misc');
+function ComboboxValue({ store, children } = {}) {
+  const context = _2IJSEADJcjs.useComboboxContext.call(void 0, );
+  store = store || context;
+  _misc.invariant.call(void 0, 
+    store,
+    process.env.NODE_ENV !== "production" && "ComboboxValue must receive a `store` prop or be wrapped in a ComboboxProvider component."
+  );
+  const value = store.useState("value");
+  if (children) {
+    return children(value);
+  }
+  return value;
+}
+
+
+exports.ComboboxValue = ComboboxValue;

package/cjs/combobox/combobox-value.d.cts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.js";
+/**
+ * Renders the current
+ * [`value`](https://ariakit.org/reference/use-combobox-store#value) state in
+ * the [combobox store](https://ariakit.org/reference/use-combobox-store).
+ *
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props.
+ *
+ * It takes a
+ * [`children`](https://ariakit.org/reference/combobox-value#children) function
+ * that gets called with the current value as an argument. This can be used as
+ * an uncontrolled API to render the combobox value in a custom way.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx {3-5}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxValue>
+ *     {(value) => `Current value: ${value}`}
+ *   </ComboboxValue>
+ * </ComboboxProvider>
+ * ```
+ */
+export declare function ComboboxValue({ store, children }?: ComboboxValueProps): ReactNode;
+export interface ComboboxValueProps {
+    /**
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the closest
+     * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
+     * component's context will be used.
+     */
+    store?: ComboboxStore;
+    /**
+     * A function that gets called with the current value as an argument. It can
+     * be used to render the combobox value in a custom way.
+     */
+    children?: (value: ComboboxStoreState["value"]) => ReactNode;
+}

package/cjs/combobox/combobox-value.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.js";
+/**
+ * Renders the current
+ * [`value`](https://ariakit.org/reference/use-combobox-store#value) state in
+ * the [combobox store](https://ariakit.org/reference/use-combobox-store).
+ *
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props.
+ *
+ * It takes a
+ * [`children`](https://ariakit.org/reference/combobox-value#children) function
+ * that gets called with the current value as an argument. This can be used as
+ * an uncontrolled API to render the combobox value in a custom way.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx {3-5}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxValue>
+ *     {(value) => `Current value: ${value}`}
+ *   </ComboboxValue>
+ * </ComboboxProvider>
+ * ```
+ */
+export declare function ComboboxValue({ store, children }?: ComboboxValueProps): ReactNode;
+export interface ComboboxValueProps {
+    /**
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the closest
+     * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
+     * component's context will be used.
+     */
+    store?: ComboboxStore;
+    /**
+     * A function that gets called with the current value as an argument. It can
+     * be used to render the combobox value in a custom way.
+     */
+    children?: (value: ComboboxStoreState["value"]) => ReactNode;
+}

package/cjs/combobox/combobox.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _YH42XRHRcjs = require('../__chunks/YH42XRHR.cjs');
+var _2IJSEADJcjs = require('../__chunks/2IJSEADJ.cjs');
 
 
-var _2IJSEADJcjs = require('../__chunks/2IJSEADJ.cjs');
+var _YH42XRHRcjs = require('../__chunks/YH42XRHR.cjs');
 
 
 var _EKW5CERCcjs = require('../__chunks/EKW5CERC.cjs');
@@ -44,6 +44,7 @@ var _react = require('react');
 
 
 
+
 var _dom = require('@ariakit/core/utils/dom');
 
 
@@ -54,8 +55,9 @@ var _focus = require('@ariakit/core/utils/focus');
 
 
 
+
 var _misc = require('@ariakit/core/utils/misc');
-var _reactdom = require('react-dom');
+var _store = require('@ariakit/core/utils/store');
 var TagName = "input";
 function isFirstItemAutoSelected(items, activeValue, autoSelect) {
   if (!autoSelect)
@@ -93,7 +95,7 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       focusable = true,
       autoSelect: autoSelectProp = false,
       getAutoSelectId,
-      setValueOnChange = true,
+      setValueOnChange,
       showMinLength = 0,
       showOnChange,
       showOnMouseDown,
@@ -142,9 +144,26 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       setCanInline(true);
     }, [inline]);
     const storeValue = store.useState("value");
-    const activeValue = store.useState(
-      (state) => inline && canInline ? state.activeValue : void 0
-    );
+    const prevSelectedValueRef = _react.useRef.call(void 0, );
+    _react.useEffect.call(void 0, () => {
+      return _store.sync.call(void 0, store, ["selectedValue", "activeId"], (_, prev) => {
+        prevSelectedValueRef.current = prev.selectedValue;
+      });
+    }, []);
+    const inlineActiveValue = store.useState((state) => {
+      var _a2;
+      if (!inline)
+        return;
+      if (!canInline)
+        return;
+      if (state.activeValue && Array.isArray(state.selectedValue)) {
+        if (state.selectedValue.includes(state.activeValue))
+          return;
+        if ((_a2 = prevSelectedValueRef.current) == null ? void 0 : _a2.includes(state.activeValue))
+          return;
+      }
+      return state.activeValue;
+    });
     const items = store.useState("renderedItems");
     const open = store.useState("open");
     const contentElement = store.useState("contentElement");
@@ -155,18 +174,18 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
         return storeValue;
       const firstItemAutoSelected = isFirstItemAutoSelected(
         items,
-        activeValue,
+        inlineActiveValue,
         autoSelect
       );
       if (firstItemAutoSelected) {
-        if (hasCompletionString(storeValue, activeValue)) {
-          const slice = (activeValue == null ? void 0 : activeValue.slice(storeValue.length)) || "";
+        if (hasCompletionString(storeValue, inlineActiveValue)) {
+          const slice = (inlineActiveValue == null ? void 0 : inlineActiveValue.slice(storeValue.length)) || "";
           return storeValue + slice;
         }
         return storeValue;
       }
-      return activeValue || storeValue;
-    }, [inline, canInline, items, activeValue, autoSelect, storeValue]);
+      return inlineActiveValue || storeValue;
+    }, [inline, canInline, items, inlineActiveValue, autoSelect, storeValue]);
     _react.useEffect.call(void 0, () => {
       const element = ref.current;
       if (!element)
@@ -182,28 +201,43 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
         return;
       if (!canInline)
         return;
-      if (!activeValue)
+      if (!inlineActiveValue)
         return;
       const firstItemAutoSelected = isFirstItemAutoSelected(
         items,
-        activeValue,
+        inlineActiveValue,
         autoSelect
       );
       if (!firstItemAutoSelected)
         return;
-      if (!hasCompletionString(storeValue, activeValue))
+      if (!hasCompletionString(storeValue, inlineActiveValue))
         return;
+      let cleanup = _misc.noop;
       queueMicrotask(() => {
         const element = ref.current;
         if (!element)
           return;
-        _dom.setSelectionRange.call(void 0, element, storeValue.length, activeValue.length);
+        const { start: prevStart, end: prevEnd } = _dom.getTextboxSelection.call(void 0, element);
+        const nextStart = storeValue.length;
+        const nextEnd = inlineActiveValue.length;
+        _dom.setSelectionRange.call(void 0, element, nextStart, nextEnd);
+        cleanup = () => {
+          if (!_focus.hasFocus.call(void 0, element))
+            return;
+          const { start, end } = _dom.getTextboxSelection.call(void 0, element);
+          if (start !== nextStart)
+            return;
+          if (end !== nextEnd)
+            return;
+          _dom.setSelectionRange.call(void 0, element, prevStart, prevEnd);
+        };
       });
+      return () => cleanup();
     }, [
       valueUpdated,
       inline,
       canInline,
-      activeValue,
+      inlineActiveValue,
       items,
       autoSelect,
       storeValue
@@ -314,17 +348,25 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
         elements.forEach((el) => el.removeEventListener("focusout", onBlur2));
       };
     }, [inline, contentElement, store, value]);
-    const canShow = value.length >= showMinLength;
+    const canShow = (event) => {
+      const currentTarget = event.currentTarget;
+      return currentTarget.value.length >= showMinLength;
+    };
     const onChangeProp = props.onChange;
     const showOnChangeProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, showOnChange != null ? showOnChange : canShow);
-    const setValueOnChangeProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, setValueOnChange);
+    const setValueOnChangeProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, 
+      // If the combobox is combined with tags, the value will be set by the tag
+      // input component.
+      setValueOnChange != null ? setValueOnChange : !store.tag
+    );
     const onChange = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
       onChangeProp == null ? void 0 : onChangeProp(event);
       if (event.defaultPrevented)
         return;
       if (!store)
         return;
-      const { value: value2, selectionStart, selectionEnd } = event.target;
+      const currentTarget = event.currentTarget;
+      const { value: value2, selectionStart, selectionEnd } = currentTarget;
       const nativeEvent = event.nativeEvent;
       canAutoSelectRef.current = true;
       if (isInputEvent(nativeEvent)) {
@@ -340,8 +382,10 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       }
       if (setValueOnChangeProp(event)) {
         const isSameValue = value2 === store.getState().value;
-        _reactdom.flushSync.call(void 0, () => store == null ? void 0 : store.setValue(value2));
-        _dom.setSelectionRange.call(void 0, event.currentTarget, selectionStart, selectionEnd);
+        store.setValue(value2);
+        queueMicrotask(() => {
+          _dom.setSelectionRange.call(void 0, currentTarget, selectionStart, selectionEnd);
+        });
         if (inline && autoSelect && isSameValue) {
           forceValueUpdate();
         }

package/cjs/composite/composite-item.cjs

@@ -2,9 +2,9 @@
 
 
 
-var _QUHFOHHTcjs = require('../__chunks/QUHFOHHT.cjs');
-require('../__chunks/U4NXCMZ3.cjs');
+var _3HMQOCLFcjs = require('../__chunks/3HMQOCLF.cjs');
 require('../__chunks/HD5AHCRI.cjs');
+require('../__chunks/U4NXCMZ3.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
 require('../__chunks/VPI3EKVY.cjs');
 require('../__chunks/NEK2UEJN.cjs');
@@ -18,4 +18,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.CompositeItem = _QUHFOHHTcjs.CompositeItem; exports.useCompositeItem = _QUHFOHHTcjs.useCompositeItem;
+exports.CompositeItem = _3HMQOCLFcjs.CompositeItem; exports.useCompositeItem = _3HMQOCLFcjs.useCompositeItem;

package/cjs/composite/composite-overflow-disclosure.cjs

@@ -8,9 +8,9 @@ require('../__chunks/YH42XRHR.cjs');
 require('../__chunks/IXJIFLOA.cjs');
 
 
-var _QUHFOHHTcjs = require('../__chunks/QUHFOHHT.cjs');
-require('../__chunks/U4NXCMZ3.cjs');
+var _3HMQOCLFcjs = require('../__chunks/3HMQOCLF.cjs');
 require('../__chunks/HD5AHCRI.cjs');
+require('../__chunks/U4NXCMZ3.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
 require('../__chunks/VPI3EKVY.cjs');
 require('../__chunks/NEK2UEJN.cjs');
@@ -70,7 +70,7 @@ var useCompositeOverflowDisclosure = _NGD3IQDBcjs.createHook.call(void 0, functi
     onFocus,
     onBlur
   });
-  props = _QUHFOHHTcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { shouldRegisterItem }));
+  props = _3HMQOCLFcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { shouldRegisterItem }));
   props = _K6TBX2ZBcjs.usePopoverDisclosure.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
   return props;
 });