@base-ui/react 1.0.0 → 1.2.0

package/esm/combobox/root/AriaCombobox.js

@@ -6,7 +6,7 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
-import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { Store, useStore } from '@base-ui/utils/store';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
@@ -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";
 
 /**
@@ -60,6 +60,7 @@ export function AriaCombobox(props) {
     autoHighlight = false,
     keepHighlight = false,
     highlightItemOnHover = true,
+    loopFocus = true,
     itemToStringLabel,
     itemToStringValue,
     isItemEqualToValue = defaultItemEquality,
@@ -69,6 +70,7 @@ export function AriaCombobox(props) {
     modal = false,
     limit = -1,
     autoComplete = 'list',
+    formAutoComplete,
     locale,
     submitOnItemClick = false
   } = props;
@@ -82,6 +84,9 @@ export function AriaCombobox(props) {
     setFilled,
     name: fieldName,
     disabled: fieldDisabled,
+    setTouched,
+    setFocused,
+    validationMode,
     validation
   } = useFieldRootContext();
   const id = useLabelableId({
@@ -395,17 +400,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);
@@ -427,7 +439,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);
@@ -447,6 +461,14 @@ export function AriaCombobox(props) {
       }
     }
     setOpenUnwrapped(nextOpen);
+    if (!nextOpen && inputInsidePopup && (eventDetails.reason === REASONS.focusOut || eventDetails.reason === REASONS.outsidePress)) {
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === 'onBlur') {
+        const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
+        validation.commit(valueToValidate);
+      }
+    }
   });
   const setSelectedValue = useStableCallback((nextValue, eventDetails) => {
     // Cast to `any` due to conditional value type (single vs. multiple).
@@ -460,17 +482,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;
@@ -487,8 +509,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) {
@@ -500,7 +522,7 @@ export function AriaCombobox(props) {
         setOpen(false, eventDetails);
       }
     } else {
-      setSelectedValue(value, eventDetails);
+      setSelectedValue(itemValue, eventDetails);
       setOpen(false, eventDetails);
     }
   });
@@ -647,54 +669,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) {
-        setSelectedValueUnwrapped(next);
-      }
-      return;
-    }
-    const isStillPresent = selectedValue == null ? true : itemIncludes(registry, selectedValue, store.state.isItemEqualToValue);
-    if (isStillPresent) {
-      return;
-    }
-    let fallback = null;
-    if (defaultSelectedValue != null && itemIncludes(registry, defaultSelectedValue, store.state.isItemEqualToValue)) {
-      fallback = defaultSelectedValue;
-    }
-    setSelectedValueUnwrapped(fallback);
-
-    // Keep the input text in sync when the input is rendered outside the popup.
-    if (!store.state.inputInsidePopup) {
-      const stringVal = stringifyAsLabel(fallback, itemToStringLabel);
-      if (inputRef.current && inputRef.current.value !== stringVal) {
-        setInputValue(stringVal, createChangeEventDetails(REASONS.none));
-      }
-    }
-  }, [items, flatItems, multiple, selectionMode, selectedValue, defaultSelectedValue, setSelectedValueUnwrapped, itemToStringLabel, store, setInputValue]);
   useIsoLayoutEffect(() => {
     if (selectionMode === 'none') {
       setFilled(String(inputValue) !== '');
@@ -729,12 +716,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) {
@@ -806,7 +787,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,
@@ -831,8 +813,8 @@ export function AriaCombobox(props) {
     activeIndex,
     selectedIndex,
     virtual: true,
-    loopFocus: true,
-    allowEscape: !autoHighlightMode,
+    loopFocus,
+    allowEscape: loopFocus && !autoHighlightMode,
     focusItemOnOpen: queryChangedAfterOpen || selectionMode === 'none' && !autoHighlightMode ? false : 'auto',
     focusItemOnHover: highlightItemOnHover,
     resetOnPointerLeave: !keepHighlight,
@@ -918,9 +900,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 '';
@@ -928,6 +911,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;
@@ -959,7 +943,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) {
@@ -996,14 +980,15 @@ export function AriaCombobox(props) {
           }
         }
       }),
-      id: id,
-      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: visuallyHidden,
+      style: hiddenInputName ? visuallyHiddenInput : visuallyHidden,
       tabIndex: -1,
       "aria-hidden": true
     }), hiddenInputs]

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

@@ -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>;
+  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,15 +75,15 @@ 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 type ComboboxRootActions = AriaCombobox.Actions;

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

@@ -5,7 +5,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Enable `grid` on the root component to turn the listbox into a grid.
  * Renders a `<div>` element.
  */
-export declare const ComboboxRow: React.ForwardRefExoticComponent<ComboboxRowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxRow: React.ForwardRefExoticComponent<Omit<ComboboxRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxRowState {}
 export interface ComboboxRowProps extends BaseUIComponentProps<'div', ComboboxRow.State> {}
 export declare namespace ComboboxRow {

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

@@ -5,7 +5,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Useful for conveying the status of an asynchronously loaded list.
  * Renders a `<div>` element.
  */
-export declare const ComboboxStatus: React.ForwardRefExoticComponent<ComboboxStatusProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxStatus: React.ForwardRefExoticComponent<Omit<ComboboxStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxStatusState {}
 export interface ComboboxStatusProps extends BaseUIComponentProps<'div', ComboboxStatus.State> {}
 export declare namespace ComboboxStatus {

package/esm/combobox/store.d.ts

@@ -43,16 +43,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 +64,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;
@@ -77,6 +77,9 @@ export declare const selectors: {
   query: (state: State) => string;
   items: (state: State) => readonly any[] | undefined;
   selectedValue: (state: State) => any;
+  hasSelectionChips: (state: State) => boolean;
+  hasSelectedValue: (state: State) => boolean;
+  hasNullItemLabel: (state: State, enabled: boolean) => boolean;
   open: (state: State) => boolean;
   mounted: (state: State) => boolean;
   forceMounted: (state: State) => boolean;
@@ -84,14 +87,14 @@ 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;
@@ -121,7 +124,7 @@ 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";
   submitOnItemClick: (state: State) => boolean;

package/esm/combobox/store.js

@@ -1,10 +1,31 @@
 import { createSelector } from '@base-ui/utils/store';
 import { compareItemEquality } from "../utils/itemEquality.js";
+import { hasNullItemLabel } from "../utils/resolveValueLabel.js";
 export const selectors = {
   id: createSelector(state => state.id),
   query: createSelector(state => state.query),
   items: createSelector(state => state.items),
   selectedValue: createSelector(state => state.selectedValue),
+  hasSelectionChips: createSelector(state => {
+    const selectedValue = state.selectedValue;
+    return Array.isArray(selectedValue) && selectedValue.length > 0;
+  }),
+  hasSelectedValue: createSelector(state => {
+    const {
+      selectedValue,
+      selectionMode
+    } = state;
+    if (selectedValue == null) {
+      return false;
+    }
+    if (selectionMode === 'multiple' && Array.isArray(selectedValue)) {
+      return selectedValue.length > 0;
+    }
+    return true;
+  }),
+  hasNullItemLabel: createSelector((state, enabled) => {
+    return enabled ? hasNullItemLabel(state.items) : false;
+  }),
   open: createSelector(state => state.open),
   mounted: createSelector(state => state.mounted),
   forceMounted: createSelector(state => state.forceMounted),
@@ -12,13 +33,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),

package/esm/combobox/trigger/ComboboxTrigger.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
 import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
  */
-export declare const ComboboxTrigger: React.ForwardRefExoticComponent<ComboboxTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxTrigger: React.ForwardRefExoticComponent<Omit<ComboboxTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxTriggerState extends FieldRoot.State {
   /**
    * Whether the popup is open.
@@ -15,13 +16,25 @@ export interface ComboboxTriggerState extends FieldRoot.State {
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   */
+  popupSide: Side | null;
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty: boolean;
+  /**
+   * Whether the combobox doesn't have a value.
+   */
+  placeholder: boolean;
 }
 export interface ComboboxTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxTrigger.State> {
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace ComboboxTrigger {
   type State = ComboboxTriggerState;