@base-ui/react 1.1.0 → 1.3.0

package/esm/combobox/root/AriaCombobox.js

@@ -29,7 +29,7 @@ import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
 import { useValueChanged } from "../../utils/useValueChanged.js";
 import { NOOP } from "../../utils/noop.js";
 import { stringifyAsLabel, stringifyAsValue, isGroupedItems } from "../../utils/resolveValueLabel.js";
-import { defaultItemEquality, findItemIndex, itemIncludes, removeItem } from "../../utils/itemEquality.js";
+import { compareItemEquality, defaultItemEquality, findItemIndex, removeItem, selectedValueIncludes } from "../../utils/itemEquality.js";
 import { INITIAL_LAST_HIGHLIGHT, NO_ACTIVE_VALUE } from "./utils/constants.js";
 
 /**
@@ -70,6 +70,7 @@ export function AriaCombobox(props) {
     modal = false,
     limit = -1,
     autoComplete = 'list',
+    formAutoComplete,
     locale,
     submitOnItemClick = false
   } = props;
@@ -100,6 +101,8 @@ export function AriaCombobox(props) {
   const labelsRef = React.useRef([]);
   const popupRef = React.useRef(null);
   const inputRef = React.useRef(null);
+  const startDismissRef = React.useRef(null);
+  const endDismissRef = React.useRef(null);
   const emptyRef = React.useRef(null);
   const keyboardActiveRef = React.useRef(true);
   const hadInputClearRef = React.useRef(false);
@@ -252,6 +255,7 @@ export function AriaCombobox(props) {
   }, [filteredItems, isGrouped]);
   const store = useRefWithInit(() => new Store({
     id,
+    labelId: undefined,
     selectedValue,
     open,
     filter,
@@ -263,6 +267,8 @@ export function AriaCombobox(props) {
     popupRef,
     emptyRef,
     inputRef,
+    startDismissRef,
+    endDismissRef,
     keyboardActiveRef,
     chipsContainerRef,
     clearRef,
@@ -296,6 +302,7 @@ export function AriaCombobox(props) {
     listElement: null,
     triggerElement: null,
     inputElement: null,
+    inputGroupElement: null,
     popupSide: null,
     openMethod: null,
     inputInsidePopup: true,
@@ -329,6 +336,7 @@ export function AriaCombobox(props) {
   const listElement = useStore(store, selectors.listElement);
   const triggerElement = useStore(store, selectors.triggerElement);
   const inputElement = useStore(store, selectors.inputElement);
+  const inputGroupElement = useStore(store, selectors.inputGroupElement);
   const inline = useStore(store, selectors.inline);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const triggerRef = useValueAsRef(triggerElement);
@@ -339,8 +347,7 @@ export function AriaCombobox(props) {
   } = useTransitionStatus(open);
   const {
     openMethod,
-    triggerProps,
-    reset: resetOpenInteractionType
+    triggerProps
   } = useOpenInteractionType(open);
   useField({
     id,
@@ -399,17 +406,24 @@ export function AriaCombobox(props) {
     // If user is typing, ensure we don't auto-highlight on open due to a race
     // with the post-open effect that sets this flag.
     if (eventDetails.reason === REASONS.inputChange) {
-      const hasQuery = next.trim() !== '';
-      if (hasQuery) {
-        setQueryChangedAfterOpen(true);
-      }
-      // Defer index updates until after the filtered items have been derived to ensure
-      // `onItemHighlighted` receives the latest item.
-      pendingQueryHighlightRef.current = {
-        hasQuery
-      };
-      if (hasQuery && autoHighlightMode && store.state.activeIndex == null) {
-        store.set('activeIndex', 0);
+      const event = eventDetails.event;
+      const inputType = event.inputType;
+      // Treat composition commits as typed input; autofill may omit `inputType` or
+      // report `insertReplacementText`.
+      const isTypedInput = event.type === 'compositionend' || inputType != null && inputType !== '' && inputType !== 'insertReplacementText';
+      if (isTypedInput) {
+        const hasQuery = next.trim() !== '';
+        if (hasQuery) {
+          setQueryChangedAfterOpen(true);
+        }
+        // Defer index updates until after the filtered items have been derived to ensure
+        // `onItemHighlighted` receives the latest item.
+        pendingQueryHighlightRef.current = {
+          hasQuery
+        };
+        if (hasQuery && autoHighlightMode && store.state.activeIndex == null) {
+          store.set('activeIndex', 0);
+        }
       }
     }
     setInputValueUnwrapped(next);
@@ -431,7 +445,9 @@ export function AriaCombobox(props) {
     }
     if (!nextOpen && queryChangedAfterOpen) {
       if (single) {
-        setCloseQuery(query);
+        if (!inline) {
+          setCloseQuery(query);
+        }
         // Avoid a flicker when closing the popup with an empty query.
         if (query === '') {
           setQueryChangedAfterOpen(false);
@@ -472,17 +488,17 @@ export function AriaCombobox(props) {
     if (shouldFillInput) {
       setInputValue(stringifyAsLabel(nextValue, itemToStringLabel), createChangeEventDetails(eventDetails.reason, eventDetails.event));
     }
-    if (single && nextValue != null && eventDetails.reason !== REASONS.inputChange && queryChangedAfterOpen) {
+    if (single && nextValue != null && eventDetails.reason !== REASONS.inputChange && queryChangedAfterOpen && !inline) {
       setCloseQuery(query);
     }
   });
   const handleSelection = useStableCallback((event, passedValue) => {
-    let value = passedValue;
-    if (value === undefined) {
+    let itemValue = passedValue;
+    if (itemValue === undefined) {
       if (activeIndex === null) {
         return;
       }
-      value = valuesRef.current[activeIndex];
+      itemValue = valuesRef.current[activeIndex];
     }
     const targetEl = getTarget(event);
     const overrideEvent = selectionEventRef.current ?? event;
@@ -499,8 +515,8 @@ export function AriaCombobox(props) {
     }
     if (multiple) {
       const currentSelectedValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const isCurrentlySelected = itemIncludes(currentSelectedValue, value, store.state.isItemEqualToValue);
-      const nextValue = isCurrentlySelected ? removeItem(currentSelectedValue, value, store.state.isItemEqualToValue) : [...currentSelectedValue, value];
+      const isCurrentlySelected = selectedValueIncludes(currentSelectedValue, itemValue, store.state.isItemEqualToValue);
+      const nextValue = isCurrentlySelected ? removeItem(currentSelectedValue, itemValue, store.state.isItemEqualToValue) : [...currentSelectedValue, itemValue];
       setSelectedValue(nextValue, eventDetails);
       const wasFiltering = inputRef.current ? inputRef.current.value.trim() !== '' : false;
       if (!wasFiltering) {
@@ -512,7 +528,7 @@ export function AriaCombobox(props) {
         setOpen(false, eventDetails);
       }
     } else {
-      setSelectedValue(value, eventDetails);
+      setSelectedValue(itemValue, eventDetails);
       setOpen(false, eventDetails);
     }
   });
@@ -529,7 +545,6 @@ export function AriaCombobox(props) {
     setMounted(false);
     onOpenChangeComplete?.(false);
     setQueryChangedAfterOpen(false);
-    resetOpenInteractionType();
     setCloseQuery(null);
     if (selectionMode === 'none') {
       setIndices({
@@ -659,46 +674,19 @@ export function AriaCombobox(props) {
       store.set('activeIndex', null);
       return;
     }
-    const nextActiveValue = candidateItems[storeActiveIndex];
-    const lastHighlightedValue = lastHighlightRef.current.value;
-    const isSameItem = lastHighlightedValue !== NO_ACTIVE_VALUE && store.state.isItemEqualToValue(nextActiveValue, lastHighlightedValue);
+    const itemValue = candidateItems[storeActiveIndex];
+    const previouslyHighlightedItemValue = lastHighlightRef.current.value;
+    const isSameItem = previouslyHighlightedItemValue !== NO_ACTIVE_VALUE && compareItemEquality(itemValue, previouslyHighlightedItemValue, store.state.isItemEqualToValue);
     if (lastHighlightRef.current.index !== storeActiveIndex || !isSameItem) {
       lastHighlightRef.current = {
-        value: nextActiveValue,
+        value: itemValue,
         index: storeActiveIndex
       };
-      store.state.onItemHighlighted(nextActiveValue, createGenericEventDetails(REASONS.none, undefined, {
+      store.state.onItemHighlighted(itemValue, createGenericEventDetails(REASONS.none, undefined, {
         index: storeActiveIndex
       }));
     }
   }, [activeIndex, autoHighlightMode, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store]);
-
-  // When the available items change, ensure the selected value(s) remain valid.
-  // - Single: if current selection is removed, fall back to defaultSelectedValue if it exists in the list; else null.
-  // - Multiple: drop any removed selections.
-  useIsoLayoutEffect(() => {
-    if (!items || selectionMode === 'none') {
-      return;
-    }
-    const registry = flatItems;
-    if (multiple) {
-      const current = Array.isArray(selectedValue) ? selectedValue : EMPTY_ARRAY;
-      const next = current.filter(v => itemIncludes(registry, v, store.state.isItemEqualToValue));
-      if (next.length !== current.length) {
-        setSelectedValue(next, createChangeEventDetails(REASONS.none));
-      }
-      return;
-    }
-    const isStillPresent = selectedValue == null || itemIncludes(registry, selectedValue, store.state.isItemEqualToValue);
-    if (isStillPresent) {
-      return;
-    }
-    let fallback = null;
-    if (defaultSelectedValue != null && itemIncludes(registry, defaultSelectedValue, store.state.isItemEqualToValue)) {
-      fallback = defaultSelectedValue;
-    }
-    setSelectedValue(fallback, createChangeEventDetails(REASONS.none));
-  }, [items, flatItems, multiple, selectionMode, selectedValue, defaultSelectedValue, store, setSelectedValue]);
   useIsoLayoutEffect(() => {
     if (selectionMode === 'none') {
       setFilled(String(inputValue) !== '');
@@ -733,12 +721,6 @@ export function AriaCombobox(props) {
     } else {
       validation.commit(selectedValue, true);
     }
-    if (multiple && store.state.selectedIndex !== null && (!Array.isArray(selectedValue) || selectedValue.length === 0)) {
-      setIndices({
-        activeIndex: null,
-        selectedIndex: null
-      });
-    }
     if (single && !hasInputValue && !inputInsidePopup) {
       const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
       if (inputValue !== nextInputValue) {
@@ -783,8 +765,11 @@ export function AriaCombobox(props) {
   }
   const role = React.useMemo(() => {
     const isPlainInput = inputElement?.tagName === 'INPUT';
-    const shouldApplyAria = isPlainInput || open;
-    const reference = isPlainInput ? {
+    // During SSR and initial hydration, the input ref is not available yet.
+    // Assume an input-like control so combobox ARIA attributes are present.
+    const shouldTreatAsInput = inputElement == null || isPlainInput;
+    const shouldApplyAria = shouldTreatAsInput || open;
+    const reference = shouldTreatAsInput ? {
       autoComplete: 'off',
       spellCheck: 'false',
       autoCorrect: 'off',
@@ -810,7 +795,8 @@ export function AriaCombobox(props) {
     toggle: false,
     // Apply a small delay for touch to let iOS viewport centering settle.
     // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
-    touchOpenDelay: inputInsidePopup ? 0 : 50
+    touchOpenDelay: inputInsidePopup ? 0 : 50,
+    reason: REASONS.inputPress
   });
   const dismiss = useDismiss(floatingRootContext, {
     enabled: !readOnly && !disabled && !inline,
@@ -825,7 +811,7 @@ export function AriaCombobox(props) {
     bubbles: inline ? true : undefined,
     outsidePress(event) {
       const target = getTarget(event);
-      return !contains(triggerElement, target) && !contains(clearRef.current, target) && !contains(chipsContainerRef.current, target);
+      return !contains(triggerElement, target) && !contains(clearRef.current, target) && !contains(chipsContainerRef.current, target) && !contains(inputGroupElement, target);
     }
   });
   const listNavigation = useListNavigation(floatingRootContext, {
@@ -922,9 +908,10 @@ export function AriaCombobox(props) {
   const hiddenInputRef = useMergedRefs(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
+    hasItems,
     filteredItems,
     flatFilteredItems
-  }), [query, filteredItems, flatFilteredItems]);
+  }), [query, hasItems, filteredItems, flatFilteredItems]);
   const serializedValue = React.useMemo(() => {
     if (Array.isArray(fieldRawValue)) {
       return '';
@@ -932,6 +919,7 @@ export function AriaCombobox(props) {
     return stringifyAsValue(fieldRawValue, itemToStringValue);
   }, [fieldRawValue, itemToStringValue]);
   const hasMultipleSelection = multiple && Array.isArray(selectedValue) && selectedValue.length > 0;
+  const hiddenInputName = multiple || selectionMode === 'none' ? undefined : name;
   const hiddenInputs = React.useMemo(() => {
     if (!multiple || !Array.isArray(selectedValue) || !name) {
       return null;
@@ -963,7 +951,7 @@ export function AriaCombobox(props) {
             return;
           }
           const nextValue = event.target.value;
-          const details = createChangeEventDetails(REASONS.inputChange, event.nativeEvent);
+          const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
           function handleChange() {
             // Browser autofill only writes a single scalar value.
             if (multiple) {
@@ -1000,13 +988,15 @@ export function AriaCombobox(props) {
           }
         }
       }),
-      name: multiple || selectionMode === 'none' ? undefined : name,
+      id: id && hiddenInputName == null ? `${id}-hidden-input` : undefined,
+      name: hiddenInputName,
+      autoComplete: formAutoComplete,
       disabled: disabled,
       required: required && !hasMultipleSelection,
       readOnly: readOnly,
       value: serializedValue,
       ref: hiddenInputRef,
-      style: name ? visuallyHiddenInput : visuallyHidden,
+      style: hiddenInputName ? visuallyHiddenInput : visuallyHidden,
       tabIndex: -1,
       "aria-hidden": true
     }), hiddenInputs]

package/esm/combobox/root/ComboboxRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AriaCombobox } from "./AriaCombobox.js";
+import { AriaCombobox, type AriaComboboxState } from "./AriaCombobox.js";
 /**
  * Groups all parts of the combobox.
  * Doesn't render its own HTML element.
@@ -9,59 +9,64 @@ import { AriaCombobox } from "./AriaCombobox.js";
 export declare function ComboboxRoot<Value, Multiple extends boolean | undefined = false>(props: ComboboxRoot.Props<Value, Multiple>): React.JSX.Element;
 type ModeFromMultiple<Multiple extends boolean | undefined> = Multiple extends true ? 'multiple' : 'single';
 type ComboboxValueType<Value, Multiple extends boolean | undefined> = Multiple extends true ? Value[] : Value;
-export type ComboboxRootProps<Value, Multiple extends boolean | undefined = false> = Omit<AriaCombobox.Props<Value, ModeFromMultiple<Multiple>>, 'fillInputOnItemPress' | 'autoComplete' | 'submitOnItemClick' | 'autoHighlight' | 'keepHighlight' | 'highlightItemOnHover' | 'itemToStringLabel' | 'itemToStringValue' | 'isItemEqualToValue' | 'selectionMode' | 'defaultSelectedValue' | 'selectedValue' | 'onSelectedValueChange' | 'actionsRef' | 'onOpenChange' | 'onInputValueChange' | 'onItemHighlighted'> & {
+export type ComboboxRootProps<Value, Multiple extends boolean | undefined = false> = Omit<AriaCombobox.Props<Value, ModeFromMultiple<Multiple>>, 'fillInputOnItemPress' | 'autoComplete' | 'formAutoComplete' | 'submitOnItemClick' | 'autoHighlight' | 'keepHighlight' | 'highlightItemOnHover' | 'itemToStringLabel' | 'itemToStringValue' | 'isItemEqualToValue' | 'selectionMode' | 'defaultSelectedValue' | 'selectedValue' | 'onSelectedValueChange' | 'actionsRef' | 'onOpenChange' | 'onInputValueChange' | 'onItemHighlighted'> & {
   /**
    * Whether multiple items can be selected.
    * @default false
    */
-  multiple?: Multiple;
+  multiple?: Multiple | undefined;
+  /**
+   * Provides a hint to the browser for autofill.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
+   */
+  autoComplete?: string | undefined;
   /**
    * Whether the first matching item is highlighted automatically while filtering.
    * @default false
    */
-  autoHighlight?: boolean;
+  autoHighlight?: boolean | undefined;
   /**
    * Whether moving the pointer over items should highlight them.
    * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
    * @default true
    */
-  highlightItemOnHover?: boolean;
+  highlightItemOnHover?: boolean | undefined;
   /**
    * When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
    */
-  itemToStringLabel?: (itemValue: Value) => string;
+  itemToStringLabel?: ((itemValue: Value) => string) | undefined;
   /**
    * When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission.
    * If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.
    */
-  itemToStringValue?: (itemValue: Value) => string;
+  itemToStringValue?: ((itemValue: Value) => string) | undefined;
   /**
    * Custom comparison logic used to determine if a combobox item value matches the current selected value. Useful when item values are objects without matching referentially.
    * Defaults to `Object.is` comparison.
    */
-  isItemEqualToValue?: (itemValue: Value, selectedValue: Value) => boolean;
+  isItemEqualToValue?: ((itemValue: Value, value: Value) => boolean) | undefined;
   /**
    * The uncontrolled selected value of the combobox when it's initially rendered.
    *
    * To render a controlled combobox, use the `value` prop instead.
    */
-  defaultValue?: ComboboxValueType<Value, Multiple> | null;
+  defaultValue?: ComboboxValueType<Value, Multiple> | null | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the combobox will not be unmounted when closed.
    * Instead, the `unmount` function must be called to unmount the combobox manually.
    * Useful when the combobox's animation is controlled by an external library.
    */
-  actionsRef?: React.RefObject<ComboboxRoot.Actions | null>;
+  actionsRef?: React.RefObject<ComboboxRoot.Actions | null> | undefined;
   /**
    * Event handler called when the popup is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: ComboboxRoot.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: ComboboxRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Event handler called when the input value changes.
    */
-  onInputValueChange?: (inputValue: string, eventDetails: ComboboxRoot.ChangeEventDetails) => void;
+  onInputValueChange?: ((inputValue: string, eventDetails: ComboboxRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Callback fired when an item is highlighted or unhighlighted.
    * Receives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed.
@@ -70,17 +75,17 @@ export type ComboboxRootProps<Value, Multiple extends boolean | undefined = fals
    * - `'pointer'`: the highlight changed due to pointer hovering.
    * - `'none'`: the highlight changed programmatically.
    */
-  onItemHighlighted?: (highlightedValue: Value | undefined, eventDetails: ComboboxRoot.HighlightEventDetails) => void;
+  onItemHighlighted?: ((highlightedValue: Value | undefined, eventDetails: ComboboxRoot.HighlightEventDetails) => void) | undefined;
   /**
    * The selected value of the combobox. Use when controlled.
    */
-  value?: ComboboxValueType<Value, Multiple> | null;
+  value?: ComboboxValueType<Value, Multiple> | null | undefined;
   /**
    * Event handler called when the selected value of the combobox changes.
    */
-  onValueChange?: (value: ComboboxValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: ComboboxRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: ComboboxValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: ComboboxRoot.ChangeEventDetails) => void) | undefined;
 };
-export type ComboboxRootState = AriaCombobox.State;
+export interface ComboboxRootState extends AriaComboboxState {}
 export type ComboboxRootActions = AriaCombobox.Actions;
 export type ComboboxRootChangeEventReason = AriaCombobox.ChangeEventReason;
 export type ComboboxRootChangeEventDetails = AriaCombobox.ChangeEventDetails;

package/esm/combobox/root/ComboboxRoot.js

@@ -16,6 +16,7 @@ export function ComboboxRoot(props) {
     defaultValue,
     value,
     onValueChange,
+    autoComplete,
     ...other
   } = props;
   return /*#__PURE__*/_jsx(AriaCombobox, {
@@ -23,6 +24,7 @@ export function ComboboxRoot(props) {
     selectionMode: multiple ? 'multiple' : 'single',
     selectedValue: value,
     defaultSelectedValue: defaultValue,
-    onSelectedValueChange: onValueChange
+    onSelectedValueChange: onValueChange,
+    formAutoComplete: autoComplete
   });
 }

package/esm/combobox/root/ComboboxRootContext.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ComboboxStore } from "../store.js";
 export interface ComboboxDerivedItemsContext {
   query: string;
+  hasItems: boolean;
   filteredItems: any[];
   flatFilteredItems: any[];
 }

package/esm/combobox/root/ComboboxRootContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ComboboxRootContext = /*#__PURE__*/React.createContext(undefined);

package/esm/combobox/root/utils/useFilter.d.ts

@@ -3,7 +3,7 @@ export interface UseFilterOptions extends Intl.CollatorOptions {
    * The locale to use for string comparison.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
 }
 export interface Filter {
   contains: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
@@ -20,7 +20,7 @@ export interface UseComboboxFilterOptions extends UseFilterOptions {
    * Whether the combobox is in multiple selection mode.
    * @default false
    */
-  multiple?: boolean;
+  multiple?: boolean | undefined;
   /**
    * The current value of the combobox.
    */

package/esm/combobox/root/utils/useFilteredItems.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns the internally filtered items.
+ */
+export declare function useFilteredItems<T>(): T[];

package/esm/combobox/root/utils/useFilteredItems.js

@@ -0,0 +1,9 @@
+import { useComboboxDerivedItemsContext } from "../ComboboxRootContext.js";
+
+/**
+ * Returns the internally filtered items.
+ */
+export function useFilteredItems() {
+  const items = useComboboxDerivedItemsContext();
+  return items.filteredItems;
+}

package/esm/combobox/row/ComboboxRow.d.ts

@@ -7,7 +7,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxRow: React.ForwardRefExoticComponent<Omit<ComboboxRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxRowState {}
-export interface ComboboxRowProps extends BaseUIComponentProps<'div', ComboboxRow.State> {}
+export interface ComboboxRowProps extends BaseUIComponentProps<'div', ComboboxRowState> {}
 export declare namespace ComboboxRow {
   type State = ComboboxRowState;
   type Props = ComboboxRowProps;

package/esm/combobox/row/ComboboxRowContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const ComboboxRowContext = /*#__PURE__*/React.createContext(false);
 if (process.env.NODE_ENV !== "production") ComboboxRowContext.displayName = "ComboboxRowContext";

package/esm/combobox/status/ComboboxStatus.d.ts

@@ -7,7 +7,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxStatus: React.ForwardRefExoticComponent<Omit<ComboboxStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxStatusState {}
-export interface ComboboxStatusProps extends BaseUIComponentProps<'div', ComboboxStatus.State> {}
+export interface ComboboxStatusProps extends BaseUIComponentProps<'div', ComboboxStatusState> {}
 export declare namespace ComboboxStatus {
   type State = ComboboxStatusState;
   type Props = ComboboxStatusProps;

package/esm/combobox/store.d.ts

@@ -6,6 +6,7 @@ import type { Side } from "../utils/useAnchorPositioning.js";
 import type { AriaCombobox } from "./root/AriaCombobox.js";
 export type State = {
   id: string | undefined;
+  labelId: string | undefined;
   query: string;
   filter: (item: any, query: string) => boolean;
   items: readonly any[] | undefined;
@@ -24,6 +25,7 @@ export type State = {
   listElement: HTMLElement | null;
   triggerElement: HTMLElement | null;
   inputElement: HTMLInputElement | null;
+  inputGroupElement: HTMLDivElement | null;
   popupSide: Side | null;
   openMethod: InteractionType | null;
   inputInsidePopup: boolean;
@@ -33,6 +35,8 @@ export type State = {
   popupRef: React.RefObject<HTMLDivElement | null>;
   emptyRef: React.RefObject<HTMLDivElement | null>;
   inputRef: React.RefObject<HTMLInputElement | null>;
+  startDismissRef: React.RefObject<HTMLSpanElement | null>;
+  endDismissRef: React.RefObject<HTMLSpanElement | null>;
   keyboardActiveRef: React.RefObject<boolean>;
   chipsContainerRef: React.RefObject<HTMLDivElement | null>;
   clearRef: React.RefObject<HTMLButtonElement | null>;
@@ -43,16 +47,16 @@ export type State = {
   setInputValue: (value: string, eventDetails: AriaCombobox.ChangeEventDetails) => void;
   setSelectedValue: (value: any, eventDetails: AriaCombobox.ChangeEventDetails) => void;
   setIndices: (indices: {
-    activeIndex?: number | null;
-    selectedIndex?: number | null;
-    type?: 'keyboard' | 'pointer' | 'none';
+    activeIndex?: number | null | undefined;
+    selectedIndex?: number | null | undefined;
+    type?: 'keyboard' | 'pointer' | 'none' | undefined;
   }) => void;
   onItemHighlighted: (item: any, eventDetails: AriaCombobox.HighlightEventDetails) => void;
   forceMount: () => void;
   handleSelection: (event: MouseEvent | PointerEvent | KeyboardEvent, passedValue?: any) => void;
   getItemProps: (props?: HTMLProps & {
-    active?: boolean;
-    selected?: boolean;
+    active?: boolean | undefined;
+    selected?: boolean | undefined;
   }) => Record<string, unknown>;
   requestSubmit: () => void;
   name: string | undefined;
@@ -64,8 +68,8 @@ export type State = {
   virtualized: boolean;
   onOpenChangeComplete: (open: boolean) => void;
   openOnInputClick: boolean;
-  itemToStringLabel?: (item: any) => string;
-  isItemEqualToValue: (item: any, value: any) => boolean;
+  itemToStringLabel?: ((item: any) => string) | undefined;
+  isItemEqualToValue: (itemValue: any, selectedValue: any) => boolean;
   modal: boolean;
   autoHighlight: false | 'always' | 'input-change';
   submitOnItemClick: boolean;
@@ -74,6 +78,7 @@ export type State = {
 export type ComboboxStore = Store<State>;
 export declare const selectors: {
   id: (state: State) => string | undefined;
+  labelId: (state: State) => string | undefined;
   query: (state: State) => string;
   items: (state: State) => readonly any[] | undefined;
   selectedValue: (state: State) => any;
@@ -87,19 +92,20 @@ export declare const selectors: {
   activeIndex: (state: State) => number | null;
   selectedIndex: (state: State) => number | null;
   isActive: (state: State, index: number) => boolean;
-  isSelected: (state: State, candidate: any) => boolean;
+  isSelected: (state: State, itemValue: any) => boolean;
   transitionStatus: (state: State) => TransitionStatus;
   popupProps: (state: State) => HTMLProps;
   inputProps: (state: State) => HTMLProps;
   triggerProps: (state: State) => HTMLProps;
   getItemProps: (state: State) => (props?: HTMLProps & {
-    active?: boolean;
-    selected?: boolean;
+    active?: boolean | undefined;
+    selected?: boolean | undefined;
   }) => Record<string, unknown>;
   positionerElement: (state: State) => HTMLElement | null;
   listElement: (state: State) => HTMLElement | null;
   triggerElement: (state: State) => HTMLElement | null;
   inputElement: (state: State) => HTMLInputElement | null;
+  inputGroupElement: (state: State) => HTMLDivElement | null;
   popupSide: (state: State) => Side | null;
   openMethod: (state: State) => InteractionType | null;
   inputInsidePopup: (state: State) => boolean;
@@ -124,8 +130,8 @@ export declare const selectors: {
   onOpenChangeComplete: (state: State) => (open: boolean) => void;
   openOnInputClick: (state: State) => boolean;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
-  isItemEqualToValue: (state: State) => (item: any, value: any) => boolean;
+  isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   modal: (state: State) => boolean;
-  autoHighlight: (state: State) => false | "always" | "input-change";
+  autoHighlight: (state: State) => false | "input-change" | "always";
   submitOnItemClick: (state: State) => boolean;
 };

package/esm/combobox/store.js

@@ -3,6 +3,7 @@ import { compareItemEquality } from "../utils/itemEquality.js";
 import { hasNullItemLabel } from "../utils/resolveValueLabel.js";
 export const selectors = {
   id: createSelector(state => state.id),
+  labelId: createSelector(state => state.labelId),
   query: createSelector(state => state.query),
   items: createSelector(state => state.items),
   selectedValue: createSelector(state => state.selectedValue),
@@ -33,13 +34,13 @@ export const selectors = {
   activeIndex: createSelector(state => state.activeIndex),
   selectedIndex: createSelector(state => state.selectedIndex),
   isActive: createSelector((state, index) => state.activeIndex === index),
-  isSelected: createSelector((state, candidate) => {
+  isSelected: createSelector((state, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const selectedValue = state.selectedValue;
     if (Array.isArray(selectedValue)) {
-      return selectedValue.some(value => compareItemEquality(value, candidate, comparer));
+      return selectedValue.some(selectedItem => compareItemEquality(itemValue, selectedItem, comparer));
     }
-    return compareItemEquality(selectedValue, candidate, comparer);
+    return compareItemEquality(itemValue, selectedValue, comparer);
   }),
   transitionStatus: createSelector(state => state.transitionStatus),
   popupProps: createSelector(state => state.popupProps),
@@ -50,6 +51,7 @@ export const selectors = {
   listElement: createSelector(state => state.listElement),
   triggerElement: createSelector(state => state.triggerElement),
   inputElement: createSelector(state => state.inputElement),
+  inputGroupElement: createSelector(state => state.inputGroupElement),
   popupSide: createSelector(state => state.popupSide),
   openMethod: createSelector(state => state.openMethod),
   inputInsidePopup: createSelector(state => state.inputInsidePopup),