@base-ui/react 1.2.0 → 1.4.0

package/combobox/root/AriaCombobox.js

@@ -12,10 +12,10 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
+var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _store = require("@base-ui/utils/store");
-var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _floatingUiReact = require("../../floating-ui-react");
 var _utils = require("../../floating-ui-react/utils");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -24,7 +24,7 @@ var _ComboboxRootContext = require("./ComboboxRootContext");
 var _store2 = require("../store");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _useField = require("../../field/useField");
+var _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
 var _FormContext = require("../../form/FormContext");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _utils2 = require("./utils");
@@ -51,9 +51,12 @@ function AriaCombobox(props) {
     onSelectedValueChange,
     defaultInputValue: defaultInputValueProp,
     inputValue: inputValueProp,
+    open: openProp,
+    defaultOpen = false,
     selectionMode = 'none',
     onItemHighlighted: onItemHighlightedProp,
     name: nameProp,
+    form,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -107,6 +110,8 @@ 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);
@@ -177,8 +182,8 @@ function AriaCombobox(props) {
     state: 'inputValue'
   });
   const [open, setOpenUnwrapped] = (0, _useControlled.useControlled)({
-    controlled: props.open,
-    default: props.defaultOpen,
+    controlled: openProp,
+    default: defaultOpen,
     name: 'Combobox',
     state: 'open'
   });
@@ -259,6 +264,7 @@ function AriaCombobox(props) {
   }, [filteredItems, isGrouped]);
   const store = (0, _useRefWithInit.useRefWithInit)(() => new _store.Store({
     id,
+    labelId: undefined,
     selectedValue,
     open,
     filter,
@@ -270,6 +276,8 @@ function AriaCombobox(props) {
     popupRef,
     emptyRef,
     inputRef,
+    startDismissRef,
+    endDismissRef,
     keyboardActiveRef,
     chipsContainerRef,
     clearRef,
@@ -277,6 +285,7 @@ function AriaCombobox(props) {
     allValuesRef,
     selectionEventRef,
     name,
+    form,
     disabled,
     readOnly,
     required,
@@ -303,6 +312,7 @@ function AriaCombobox(props) {
     listElement: null,
     triggerElement: null,
     inputElement: null,
+    inputGroupElement: null,
     popupSide: null,
     openMethod: null,
     inputInsidePopup: true,
@@ -336,6 +346,7 @@ function AriaCombobox(props) {
   const listElement = (0, _store.useStore)(store, _store2.selectors.listElement);
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
+  const inputGroupElement = (0, _store.useStore)(store, _store2.selectors.inputGroupElement);
   const inline = (0, _store.useStore)(store, _store2.selectors.inline);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
   const triggerRef = (0, _useValueAsRef.useValueAsRef)(triggerElement);
@@ -346,16 +357,13 @@ function AriaCombobox(props) {
   } = (0, _useTransitionStatus.useTransitionStatus)(open);
   const {
     openMethod,
-    triggerProps,
-    reset: resetOpenInteractionType
+    triggerProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
-  (0, _useField.useField)({
+  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(inputInsidePopup ? triggerRef : inputRef, {
     id,
-    name,
-    commit: validation.commit,
     value: fieldRawValue,
-    controlRef: inputInsidePopup ? triggerRef : inputRef,
-    getValue: () => fieldStringValue
+    getValue: getFieldValue
   });
   const forceMount = (0, _useStableCallback.useStableCallback)(() => {
     if (items) {
@@ -536,16 +544,15 @@ function AriaCombobox(props) {
     if (!store.state.submitOnItemClick) {
       return;
     }
-    const form = store.state.inputElement?.form;
-    if (form && typeof form.requestSubmit === 'function') {
-      form.requestSubmit();
+    const formElement = validation.inputRef.current?.form ?? store.state.inputElement?.form;
+    if (formElement && typeof formElement.requestSubmit === 'function') {
+      formElement.requestSubmit();
     }
   });
   const handleUnmount = (0, _useStableCallback.useStableCallback)(() => {
     setMounted(false);
     onOpenChangeComplete?.(false);
     setQueryChangedAfterOpen(false);
-    resetOpenInteractionType();
     setCloseQuery(null);
     if (selectionMode === 'none') {
       setIndices({
@@ -766,8 +773,11 @@ 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',
@@ -791,9 +801,9 @@ function AriaCombobox(props) {
     enabled: !readOnly && !disabled && openOnInputClick,
     event: 'mousedown-only',
     toggle: false,
-    // Apply a small delay for touch to let iOS viewport centering settle.
+    // Apply a small delay for touch to let mobile viewport/keyboard positioning settle.
     // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
-    touchOpenDelay: inputInsidePopup ? 0 : 50,
+    touchOpenDelay: inputInsidePopup ? 0 : 100,
     reason: _reasons.REASONS.inputPress
   });
   const dismiss = (0, _floatingUiReact.useDismiss)(floatingRootContext, {
@@ -809,7 +819,7 @@ function AriaCombobox(props) {
     bubbles: inline ? true : undefined,
     outsidePress(event) {
       const target = (0, _utils.getTarget)(event);
-      return !(0, _utils.contains)(triggerElement, target) && !(0, _utils.contains)(clearRef.current, target) && !(0, _utils.contains)(chipsContainerRef.current, target);
+      return !(0, _utils.contains)(triggerElement, target) && !(0, _utils.contains)(clearRef.current, target) && !(0, _utils.contains)(chipsContainerRef.current, target) && !(0, _utils.contains)(inputGroupElement, target);
     }
   });
   const listNavigation = (0, _floatingUiReact.useListNavigation)(floatingRootContext, {
@@ -886,6 +896,7 @@ function AriaCombobox(props) {
       getItemProps,
       selectionMode,
       name,
+      form,
       disabled,
       readOnly,
       required,
@@ -902,7 +913,7 @@ function AriaCombobox(props) {
       hasInputValue,
       requestSubmit
     });
-  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode]);
+  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode, form]);
   const hiddenInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
@@ -926,11 +937,12 @@ function AriaCombobox(props) {
       const currentSerializedValue = (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         type: "hidden",
+        form: form,
         name: name,
         value: currentSerializedValue
       }, currentSerializedValue);
     });
-  }, [multiple, selectedValue, name, itemToStringValue]);
+  }, [multiple, selectedValue, form, name, itemToStringValue]);
   const children = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [props.children, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       ...validation.getInputValidationProps({
@@ -948,7 +960,7 @@ function AriaCombobox(props) {
           if (event.nativeEvent.defaultPrevented) {
             return;
           }
-          const nextValue = event.target.value;
+          const nextValue = event.currentTarget.value;
           const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
           function handleChange() {
             // Browser autofill only writes a single scalar value.
@@ -964,8 +976,15 @@ function AriaCombobox(props) {
               return;
             }
             const matchingValue = valuesRef.current.find(v => {
-              const candidate = (0, _resolveValueLabel.stringifyAsValue)(v, itemToStringValue);
-              if (candidate.toLowerCase() === nextValue.toLowerCase()) {
+              // Try matching by value first (e.g., "US" for country code)
+              const candidateValue = (0, _resolveValueLabel.stringifyAsValue)(v, itemToStringValue);
+              if (candidateValue.toLowerCase() === nextValue.toLowerCase()) {
+                return true;
+              }
+              // Also try matching by label for browser autofill compatibility
+              // (browsers autofill with displayed text like "United States", not the underlying value)
+              const candidateLabel = (0, _resolveValueLabel.stringifyAsLabel)(v, itemToStringLabel);
+              if (candidateLabel.toLowerCase() === nextValue.toLowerCase()) {
                 return true;
               }
               return false;
@@ -987,6 +1006,7 @@ function AriaCombobox(props) {
         }
       }),
       id: id && hiddenInputName == null ? `${id}-hidden-input` : undefined,
+      form: form,
       name: hiddenInputName,
       autoComplete: formAutoComplete,
       disabled: disabled,
@@ -996,7 +1016,8 @@ function AriaCombobox(props) {
       ref: hiddenInputRef,
       style: hiddenInputName ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
       tabIndex: -1,
-      "aria-hidden": true
+      "aria-hidden": true,
+      suppressHydrationWarning: true
     }), hiddenInputs]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxRootContext.ComboboxRootContext.Provider, {

package/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.
@@ -51,7 +51,7 @@ export type ComboboxRootProps<Value, Multiple extends boolean | undefined = fals
    *
    * To render a controlled combobox, use the `value` prop instead.
    */
-  defaultValue?: (ComboboxValueType<Value, Multiple> | null) | undefined;
+  defaultValue?: ComboboxValueType<Value, Multiple> | null | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the combobox will not be unmounted when closed.
@@ -79,13 +79,13 @@ export type ComboboxRootProps<Value, Multiple extends boolean | undefined = fals
   /**
    * The selected value of the combobox. Use when controlled.
    */
-  value?: (ComboboxValueType<Value, Multiple> | null) | undefined;
+  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) | 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/combobox/root/utils/useFilter.d.ts

@@ -6,8 +6,17 @@ export interface UseFilterOptions extends Intl.CollatorOptions {
   locale?: Intl.LocalesArgument | undefined;
 }
 export interface Filter {
+  /**
+   * Returns whether the item matches the query anywhere.
+   */
   contains: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+  /**
+   * Returns whether the item starts with the query.
+   */
   startsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+  /**
+   * Returns whether the item ends with the query.
+   */
   endsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
 }
 declare function getFilter(options?: UseFilterOptions): Filter;

package/combobox/row/ComboboxRow.d.ts

@@ -4,10 +4,12 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Displays a single row of items in a grid list.
  * Enable `grid` on the root component to turn the listbox into a grid.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 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/combobox/row/ComboboxRow.js

@@ -14,11 +14,14 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Displays a single row of items in a grid list.
  * Enable `grid` on the root component to turn the listbox into a grid.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxRow = exports.ComboboxRow = /*#__PURE__*/React.forwardRef(function ComboboxRow(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {

package/combobox/status/ComboboxStatus.d.ts

@@ -3,11 +3,17 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Displays a status message whose content changes are announced politely to screen readers.
  * Useful for conveying the status of an asynchronously loaded list.
+ * This component's root element must remain mounted in the DOM to announce
+ * changes consistently across screen readers. Avoid hiding or removing the
+ * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
+ * rendering. Prefer updating or conditionally rendering its children instead.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 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/combobox/status/ComboboxStatus.js

@@ -8,20 +8,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.ComboboxStatus = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useRenderElement = require("../../utils/useRenderElement");
+var _useInitialLiveRegionTextMutation = require("../utils/useInitialLiveRegionTextMutation");
 /**
  * Displays a status message whose content changes are announced politely to screen readers.
  * Useful for conveying the status of an asynchronously loaded list.
+ * This component's root element must remain mounted in the DOM to announce
+ * changes consistently across screen readers. Avoid hiding or removing the
+ * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
+ * rendering. Prefer updating or conditionally rendering its children instead.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxStatus = exports.ComboboxStatus = /*#__PURE__*/React.forwardRef(function ComboboxStatus(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
+    children: childrenProp,
     ...elementProps
   } = componentProps;
+  const statusRef = (0, _useInitialLiveRegionTextMutation.useInitialLiveRegionTextMutation)();
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: forwardedRef,
+    ref: [forwardedRef, statusRef],
     props: [{
+      children: childrenProp,
       role: 'status',
       'aria-live': 'polite',
       'aria-atomic': true

package/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,9 +47,9 @@ export type State = {
   setInputValue: (value: string, eventDetails: AriaCombobox.ChangeEventDetails) => void;
   setSelectedValue: (value: any, eventDetails: AriaCombobox.ChangeEventDetails) => void;
   setIndices: (indices: {
-    activeIndex?: (number | null) | undefined;
-    selectedIndex?: (number | null) | undefined;
-    type?: ('keyboard' | 'pointer' | 'none') | undefined;
+    activeIndex?: number | null | undefined;
+    selectedIndex?: number | null | undefined;
+    type?: 'keyboard' | 'pointer' | 'none' | undefined;
   }) => void;
   onItemHighlighted: (item: any, eventDetails: AriaCombobox.HighlightEventDetails) => void;
   forceMount: () => void;
@@ -56,6 +60,7 @@ export type State = {
   }) => Record<string, unknown>;
   requestSubmit: () => void;
   name: string | undefined;
+  form: string | undefined;
   disabled: boolean;
   readOnly: boolean;
   required: boolean;
@@ -74,7 +79,7 @@ export type State = {
 export type ComboboxStore = Store<State>;
 export declare const selectors: {
   id: (state: State) => string | undefined;
-  query: (state: State) => string;
+  labelId: (state: State) => string | undefined;
   items: (state: State) => readonly any[] | undefined;
   selectedValue: (state: State) => any;
   hasSelectionChips: (state: State) => boolean;
@@ -100,32 +105,21 @@ export declare const selectors: {
   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;
   selectionMode: (state: State) => "none" | "multiple" | "single";
-  listRef: (state: State) => import("react").RefObject<(HTMLElement | null)[]>;
-  labelsRef: (state: State) => import("react").RefObject<(string | null)[]>;
-  popupRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  emptyRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  inputRef: (state: State) => import("react").RefObject<HTMLInputElement | null>;
-  keyboardActiveRef: (state: State) => import("react").RefObject<boolean>;
-  chipsContainerRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  clearRef: (state: State) => import("react").RefObject<HTMLButtonElement | null>;
-  valuesRef: (state: State) => import("react").RefObject<any[]>;
-  allValuesRef: (state: State) => import("react").RefObject<any[]>;
   name: (state: State) => string | undefined;
+  form: (state: State) => string | undefined;
   disabled: (state: State) => boolean;
   readOnly: (state: State) => boolean;
   required: (state: State) => boolean;
   grid: (state: State) => boolean;
-  isGrouped: (state: State) => boolean;
   virtualized: (state: State) => boolean;
-  onOpenChangeComplete: (state: State) => (open: boolean) => void;
-  openOnInputClick: (state: State) => boolean;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
   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/combobox/store.js

@@ -9,7 +9,7 @@ var _itemEquality = require("../utils/itemEquality");
 var _resolveValueLabel = require("../utils/resolveValueLabel");
 const selectors = exports.selectors = {
   id: (0, _store.createSelector)(state => state.id),
-  query: (0, _store.createSelector)(state => state.query),
+  labelId: (0, _store.createSelector)(state => state.labelId),
   items: (0, _store.createSelector)(state => state.items),
   selectedValue: (0, _store.createSelector)(state => state.selectedValue),
   hasSelectionChips: (0, _store.createSelector)(state => {
@@ -56,29 +56,18 @@ const selectors = exports.selectors = {
   listElement: (0, _store.createSelector)(state => state.listElement),
   triggerElement: (0, _store.createSelector)(state => state.triggerElement),
   inputElement: (0, _store.createSelector)(state => state.inputElement),
+  inputGroupElement: (0, _store.createSelector)(state => state.inputGroupElement),
   popupSide: (0, _store.createSelector)(state => state.popupSide),
   openMethod: (0, _store.createSelector)(state => state.openMethod),
   inputInsidePopup: (0, _store.createSelector)(state => state.inputInsidePopup),
   selectionMode: (0, _store.createSelector)(state => state.selectionMode),
-  listRef: (0, _store.createSelector)(state => state.listRef),
-  labelsRef: (0, _store.createSelector)(state => state.labelsRef),
-  popupRef: (0, _store.createSelector)(state => state.popupRef),
-  emptyRef: (0, _store.createSelector)(state => state.emptyRef),
-  inputRef: (0, _store.createSelector)(state => state.inputRef),
-  keyboardActiveRef: (0, _store.createSelector)(state => state.keyboardActiveRef),
-  chipsContainerRef: (0, _store.createSelector)(state => state.chipsContainerRef),
-  clearRef: (0, _store.createSelector)(state => state.clearRef),
-  valuesRef: (0, _store.createSelector)(state => state.valuesRef),
-  allValuesRef: (0, _store.createSelector)(state => state.allValuesRef),
   name: (0, _store.createSelector)(state => state.name),
+  form: (0, _store.createSelector)(state => state.form),
   disabled: (0, _store.createSelector)(state => state.disabled),
   readOnly: (0, _store.createSelector)(state => state.readOnly),
   required: (0, _store.createSelector)(state => state.required),
   grid: (0, _store.createSelector)(state => state.grid),
-  isGrouped: (0, _store.createSelector)(state => state.isGrouped),
   virtualized: (0, _store.createSelector)(state => state.virtualized),
-  onOpenChangeComplete: (0, _store.createSelector)(state => state.onOpenChangeComplete),
-  openOnInputClick: (0, _store.createSelector)(state => state.openOnInputClick),
   itemToStringLabel: (0, _store.createSelector)(state => state.itemToStringLabel),
   isItemEqualToValue: (0, _store.createSelector)(state => state.isItemEqualToValue),
   modal: (0, _store.createSelector)(state => state.modal),

package/combobox/trigger/ComboboxTrigger.d.ts

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxTrigger: React.ForwardRefExoticComponent<Omit<ComboboxTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface ComboboxTriggerState extends FieldRoot.State {
+export interface ComboboxTriggerState extends FieldRootState {
   /**
    * Whether the popup is open.
    */
@@ -29,7 +31,7 @@ export interface ComboboxTriggerState extends FieldRoot.State {
    */
   placeholder: boolean;
 }
-export interface ComboboxTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxTrigger.State> {
+export interface ComboboxTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxTriggerState> {
   /**
    * Whether the component should ignore user interaction.
    * @default false

package/combobox/trigger/ComboboxTrigger.js

@@ -24,11 +24,14 @@ var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _floatingUiReact = require("../../floating-ui-react");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 const BOUNDARY_OFFSET = 2;
 
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(componentProps, forwardedRef) {
   const {
@@ -37,6 +40,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     nativeButton = true,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -48,7 +52,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     validation
   } = (0, _FieldRootContext.useFieldRootContext)();
   const {
-    labelId
+    labelId: fieldLabelId
   } = (0, _LabelableContext.useLabelableContext)();
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
   const {
@@ -66,6 +70,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
+  const comboboxLabelId = (0, _store.useStore)(store, _store2.selectors.labelId);
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const selectedValue = (0, _store.useStore)(store, _store2.selectors.selectedValue);
   const activeIndex = (0, _store.useStore)(store, _store2.selectors.activeIndex);
@@ -81,6 +86,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     id: inputInsidePopup ? idProp : undefined
   });
   const id = inputInsidePopup ? idProp ?? rootId : idProp;
+  const ariaLabelledBy = (0, _resolveAriaLabelledBy.resolveAriaLabelledBy)(fieldLabelId, comboboxLabelId);
   const currentPointerTypeRef = React.useRef('');
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
@@ -130,7 +136,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     disabled,
     popupSide,
     listEmpty,
-    placeholder: !hasSelectedValue
+    placeholder: selectionMode === 'none' ? false : !hasSelectedValue
   };
   const setTriggerElement = (0, _useStableCallback.useStableCallback)(element => {
     store.set('triggerElement', element);
@@ -146,7 +152,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
       'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
       'aria-controls': open ? listElement?.id : undefined,
       'aria-required': inputInsidePopup ? required || undefined : undefined,
-      'aria-labelledby': labelId,
+      'aria-labelledby': ariaLabelledBy,
       onPointerDown: trackPointerType,
       onPointerEnter: trackPointerType,
       onFocus() {

package/combobox/utils/ComboboxInternalDismissButton.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * @internal
+ */
+export declare const ComboboxInternalDismissButton: React.ForwardRefExoticComponent<React.RefAttributes<HTMLSpanElement>>;

package/combobox/utils/ComboboxInternalDismissButton.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxInternalDismissButton = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
+var _useButton = require("../../use-button");
+var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+var _reasons = require("../../utils/reasons");
+var _ComboboxRootContext = require("../root/ComboboxRootContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @internal
+ */
+const ComboboxInternalDismissButton = exports.ComboboxInternalDismissButton = /*#__PURE__*/React.forwardRef(function ComboboxInternalDismissButton(_, forwardedRef) {
+  const store = (0, _ComboboxRootContext.useComboboxRootContext)();
+  const {
+    buttonRef,
+    getButtonProps
+  } = (0, _useButton.useButton)({
+    native: false
+  });
+  const mergedRef = (0, _useMergedRefs.useMergedRefs)(forwardedRef, buttonRef);
+  const handleDismiss = (0, _useStableCallback.useStableCallback)(event => {
+    store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.closePress, event.nativeEvent, event.currentTarget));
+  });
+  const dismissProps = getButtonProps({
+    onClick: handleDismiss
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ref: mergedRef,
+    ...dismissProps,
+    "aria-label": "Dismiss",
+    tabIndex: undefined,
+    style: _visuallyHidden.visuallyHiddenInput
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxInternalDismissButton.displayName = "ComboboxInternalDismissButton";

package/combobox/utils/handleInputPress.d.ts

@@ -0,0 +1,5 @@
+import type * as React from 'react';
+import type { ComboboxStore } from "../store.js";
+export declare function handleInputPress(event: React.MouseEvent<HTMLElement> & {
+  baseUIHandlerPrevented?: boolean | undefined;
+}, store: ComboboxStore, disabled: boolean, readOnly: boolean, shouldIgnoreTarget?: ((target: Element | null) => boolean) | undefined): void;