@base-ui/react 1.0.0-rc.2 → 1.1.0

package/combobox/chips/ComboboxChips.js

@@ -13,6 +13,7 @@ var _ComboboxChipsContext = require("./ComboboxChipsContext");
 var _CompositeList = require("../../composite/list/CompositeList");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _store2 = require("../store");
+var _constants = require("../../utils/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A container for the chips in a multiselectable input.
@@ -26,6 +27,7 @@ const ComboboxChips = exports.ComboboxChips = /*#__PURE__*/React.forwardRef(func
   } = componentProps;
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
   const open = (0, _store.useStore)(store, _store2.selectors.open);
+  const hasSelectionChips = (0, _store.useStore)(store, _store2.selectors.hasSelectionChips);
   const [highlightedChipIndex, setHighlightedChipIndex] = React.useState(undefined);
   if (open && highlightedChipIndex !== undefined) {
     setHighlightedChipIndex(undefined);
@@ -33,7 +35,11 @@ const ComboboxChips = exports.ComboboxChips = /*#__PURE__*/React.forwardRef(func
   const chipsRef = React.useRef([]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, store.state.chipsContainerRef],
-    props: elementProps
+    // NVDA enters browse mode instead of staying in focus mode when navigating with
+    // arrow keys inside a container unless it has a toolbar role.
+    props: [hasSelectionChips ? {
+      role: 'toolbar'
+    } : _constants.EMPTY_OBJECT, elementProps]
   });
   const contextValue = React.useMemo(() => ({
     highlightedChipIndex,

package/combobox/clear/ComboboxClear.d.ts

@@ -5,7 +5,7 @@ import { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Clears the value when clicked.
  * Renders a `<button>` element.
  */
-export declare const ComboboxClear: React.ForwardRefExoticComponent<ComboboxClearProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxClear: React.ForwardRefExoticComponent<Omit<ComboboxClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxClearState {
   /**
    * Whether the popup is open.

package/combobox/clear/ComboboxClear.js

@@ -46,6 +46,7 @@ const ComboboxClear = exports.ComboboxClear = /*#__PURE__*/React.forwardRef(func
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const selectedValue = (0, _store.useStore)(store, _store2.selectors.selectedValue);
+  const hasSelectionChips = (0, _store.useStore)(store, _store2.selectors.hasSelectionChips);
   const inputValue = (0, _ComboboxRootContext.useComboboxInputValueContext)();
   let visible = false;
   if (selectionMode === 'none') {
@@ -53,7 +54,7 @@ const ComboboxClear = exports.ComboboxClear = /*#__PURE__*/React.forwardRef(func
   } else if (selectionMode === 'single') {
     visible = selectedValue != null;
   } else {
-    visible = Array.isArray(selectedValue) && selectedValue.length > 0;
+    visible = hasSelectionChips;
   }
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
   const {
@@ -88,7 +89,6 @@ const ComboboxClear = exports.ComboboxClear = /*#__PURE__*/React.forwardRef(func
     props: [{
       tabIndex: -1,
       children: 'x',
-      disabled,
       'aria-readonly': readOnly || undefined,
       // Avoid stealing focus from the input.
       onMouseDown(event) {

package/combobox/empty/ComboboxEmpty.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Announces changes politely to screen readers.
  * Renders a `<div>` element.
  */
-export declare const ComboboxEmpty: React.ForwardRefExoticComponent<ComboboxEmptyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxEmpty: React.ForwardRefExoticComponent<Omit<ComboboxEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxEmptyState {}
 export interface ComboboxEmptyProps extends BaseUIComponentProps<'div', ComboboxEmpty.State> {}
 export declare namespace ComboboxEmpty {

package/combobox/group/ComboboxGroup.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Groups related items with the corresponding label.
  * Renders a `<div>` element.
  */
-export declare const ComboboxGroup: React.ForwardRefExoticComponent<ComboboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxGroup: React.ForwardRefExoticComponent<Omit<ComboboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxGroupState {}
 export interface ComboboxGroupProps extends BaseUIComponentProps<'div', ComboboxGroup.State> {
   /**

package/combobox/group-label/ComboboxGroupLabel.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * An accessible label that is automatically associated with its parent group.
  * Renders a `<div>` element.
  */
-export declare const ComboboxGroupLabel: React.ForwardRefExoticComponent<ComboboxGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxGroupLabel: React.ForwardRefExoticComponent<Omit<ComboboxGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxGroupLabelState {}
 export interface ComboboxGroupLabelProps extends BaseUIComponentProps<'div', ComboboxGroupLabel.State> {}
 export declare namespace ComboboxGroupLabel {

package/combobox/icon/ComboboxIcon.d.ts

@@ -4,7 +4,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * An icon that indicates that the trigger button opens the popup.
  * Renders a `<span>` element.
  */
-export declare const ComboboxIcon: React.ForwardRefExoticComponent<ComboboxIconProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxIcon: React.ForwardRefExoticComponent<Omit<ComboboxIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxIconState {}
 export interface ComboboxIconProps extends BaseUIComponentProps<'span', ComboboxIcon.State> {}
 export declare namespace ComboboxIcon {

package/combobox/input/ComboboxInput.d.ts

@@ -6,7 +6,7 @@ import type { Side } from "../../utils/useAnchorPositioning.js";
  * A text input to search for items in the list.
  * Renders an `<input>` element.
  */
-export declare const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export interface ComboboxInputState extends FieldRoot.State {
   /**
    * Whether the corresponding popup is open.

package/combobox/input/ComboboxInput.js

@@ -13,10 +13,9 @@ var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
+var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _store2 = require("../store");
-var _popupStateMapping = require("../../utils/popupStateMapping");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _constants = require("../../field/utils/constants");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _ComboboxChipsContext = require("../chips/ComboboxChipsContext");
 var _utils = require("../../floating-ui-react/utils");
@@ -24,17 +23,6 @@ var _ComboboxPositionerContext = require("../positioner/ComboboxPositionerContex
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _DirectionContext = require("../../direction-provider/DirectionContext");
-const stateAttributesMapping = {
-  ..._popupStateMapping.pressableTriggerOpenStateMapping,
-  ..._constants.fieldValidityMapping,
-  popupSide: side => side ? {
-    'data-popup-side': side
-  } : null,
-  listEmpty: empty => empty ? {
-    'data-list-empty': ''
-  } : null
-};
-
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
@@ -68,7 +56,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   // `inputValue` can't be placed in the store.
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = (0, _ComboboxRootContext.useComboboxInputValueContext)();
-  const id = (0, _useBaseUiId.useBaseUiId)(idProp);
+  const required = (0, _store.useStore)(store, _store2.selectors.required);
   const direction = (0, _DirectionContext.useDirection)();
   const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
@@ -82,20 +70,24 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   const selectedValue = (0, _store.useStore)(store, _store2.selectors.selectedValue);
   const popupSideValue = (0, _store.useStore)(store, _store2.selectors.popupSide);
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
+  const rootId = (0, _store.useStore)(store, _store2.selectors.id);
+  const inline = (0, _store.useStore)(store, _store2.selectors.inline);
   const autoHighlightEnabled = Boolean(autoHighlightMode);
   const popupSide = mounted && positionerElement ? popupSideValue : null;
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
   const listEmpty = filteredItems.length === 0;
+  const isInsidePopup = hasPositionerParent || inline;
+  const id = (0, _useBaseUiId.useBaseUiId)(idProp ?? (!isInsidePopup ? rootId : undefined));
   const [composingValue, setComposingValue] = React.useState(null);
   const isComposingRef = React.useRef(false);
   const setInputElement = (0, _useStableCallback.useStableCallback)(element => {
-    const isInsidePopup = hasPositionerParent || store.state.inline;
-    if (isInsidePopup && !store.state.hasInputValue) {
+    const nextIsInsidePopup = hasPositionerParent || store.state.inline;
+    if (nextIsInsidePopup && !store.state.hasInputValue) {
       store.state.setInputValue('', (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none));
     }
     store.update({
       inputElement: element,
-      inputInsidePopup: isInsidePopup
+      inputInsidePopup: nextIsInsidePopup
     });
   });
   const state = React.useMemo(() => ({
@@ -166,9 +158,11 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       type: 'text',
       value: componentProps.value ?? composingValue ?? inputValue,
       'aria-readonly': readOnly || undefined,
+      'aria-required': required || undefined,
       'aria-labelledby': labelId,
       disabled,
       readOnly,
+      required: selectionMode === 'none' ? required : undefined,
       ...(selectionMode === 'none' && name && {
         name
       }),
@@ -355,7 +349,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         store.state.keyboardActiveRef.current = false;
       }
     }, validation ? validation.getValidationProps(elementProps) : elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping
   });
   return element;
 });

package/combobox/item/ComboboxItem.d.ts

@@ -4,7 +4,7 @@ import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/typ
  * An individual item in the list.
  * Renders a `<div>` element.
  */
-export declare const ComboboxItem: React.NamedExoticComponent<ComboboxItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxItem: React.NamedExoticComponent<Omit<ComboboxItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxItemState {
   /**
    * Whether the item should ignore user interaction.

package/combobox/item/ComboboxItem.js

@@ -136,7 +136,6 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const defaultProps = {
     id,
     role: isRow ? 'gridcell' : 'option',
-    'aria-disabled': disabled || undefined,
     'aria-selected': selectable ? selected : undefined,
     // Focusable items steal focus from the input upon mouseup.
     // Warn if the user renders a natively focusable element like `<button>`,

package/combobox/item-indicator/ComboboxItemIndicator.d.ts

@@ -5,7 +5,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Indicates whether the item is selected.
  * Renders a `<span>` element.
  */
-export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<ComboboxItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<Omit<ComboboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span', ComboboxItemIndicator.State> {
   children?: React.ReactNode;
   /**

package/combobox/list/ComboboxList.d.ts

@@ -4,7 +4,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * A list container for the items.
  * Renders a `<div>` element.
  */
-export declare const ComboboxList: React.ForwardRefExoticComponent<ComboboxListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxList: React.ForwardRefExoticComponent<Omit<ComboboxListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxListState {
   /**
    * Whether the list is empty.

package/combobox/popup/ComboboxPopup.d.ts

@@ -7,7 +7,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * A container for the list.
  * Renders a `<div>` element.
  */
-export declare const ComboboxPopup: React.ForwardRefExoticComponent<ComboboxPopupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPopup: React.ForwardRefExoticComponent<Omit<ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPopupState {
   open: boolean;
   side: Side;

package/combobox/popup/ComboboxPopup.js

@@ -48,6 +48,7 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
   const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
   const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
+  const modal = (0, _store.useStore)(store, _store2.selectors.modal);
   const empty = filteredItems.length === 0;
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open,
@@ -96,7 +97,7 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {
     context: floatingRootContext,
     disabled: !mounted,
-    modal: !inputInsidePopup,
+    modal: inputInsidePopup ? modal : false,
     openInteractionType: openMethod,
     initialFocus: resolvedInitialFocus,
     returnFocus: resolvedFinalFocus,

package/combobox/portal/ComboboxPortal.d.ts

@@ -5,7 +5,7 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * By default, the portal element is appended to `<body>`.
  * Renders a `<div>` element.
  */
-export declare const ComboboxPortal: React.ForwardRefExoticComponent<ComboboxPortalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPortal: React.ForwardRefExoticComponent<Omit<ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace ComboboxPortal {
   interface State {}
 }

package/combobox/positioner/ComboboxPositioner.d.ts

@@ -5,7 +5,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Positions the popup against the trigger.
  * Renders a `<div>` element.
  */
-export declare const ComboboxPositioner: React.ForwardRefExoticComponent<ComboboxPositionerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPositioner: React.ForwardRefExoticComponent<Omit<ComboboxPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPositionerState {
   /**
    * Whether the popup is currently open.

package/combobox/root/AriaCombobox.d.ts

@@ -81,6 +81,13 @@ interface ComboboxRootProps<ItemValue> {
    * @default true
    */
   highlightItemOnHover?: boolean;
+  /**
+   * Whether to loop keyboard focus back to the input when the end of the list is reached while using the arrow keys. The first item can then be reached by pressing <kbd>ArrowDown</kbd> again from the input, or the last item can be reached by pressing <kbd>ArrowUp</kbd> from the input.
+   * The input is always included in the focus loop per [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+   * When disabled, focus does not move when on the last element and the user presses <kbd>ArrowDown</kbd>, or when on the first element and the user presses <kbd>ArrowUp</kbd>.
+   * @default true
+   */
+  loopFocus?: boolean;
   /**
    * The input value of the combobox. Use when controlled.
    */
@@ -101,7 +108,7 @@ interface ComboboxRootProps<ItemValue> {
    * 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<AriaCombobox.Actions>;
+  actionsRef?: React.RefObject<AriaCombobox.Actions | null>;
   /**
    * 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.

package/combobox/root/AriaCombobox.js

@@ -66,6 +66,7 @@ function AriaCombobox(props) {
     autoHighlight = false,
     keepHighlight = false,
     highlightItemOnHover = true,
+    loopFocus = true,
     itemToStringLabel,
     itemToStringValue,
     isItemEqualToValue = _itemEquality.defaultItemEquality,
@@ -88,6 +89,9 @@ function AriaCombobox(props) {
     setFilled,
     name: fieldName,
     disabled: fieldDisabled,
+    setTouched,
+    setFocused,
+    validationMode,
     validation
   } = (0, _FieldRootContext.useFieldRootContext)();
   const id = (0, _useLabelableId.useLabelableId)({
@@ -453,6 +457,14 @@ function AriaCombobox(props) {
       }
     }
     setOpenUnwrapped(nextOpen);
+    if (!nextOpen && inputInsidePopup && (eventDetails.reason === _reasons.REASONS.focusOut || eventDetails.reason === _reasons.REASONS.outsidePress)) {
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === 'onBlur') {
+        const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
+        validation.commit(valueToValidate);
+      }
+    }
   });
   const setSelectedValue = (0, _useStableCallback.useStableCallback)((nextValue, eventDetails) => {
     // Cast to `any` due to conditional value type (single vs. multiple).
@@ -679,11 +691,11 @@ function AriaCombobox(props) {
       const current = Array.isArray(selectedValue) ? selectedValue : _constants.EMPTY_ARRAY;
       const next = current.filter(v => (0, _itemEquality.itemIncludes)(registry, v, store.state.isItemEqualToValue));
       if (next.length !== current.length) {
-        setSelectedValueUnwrapped(next);
+        setSelectedValue(next, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none));
       }
       return;
     }
-    const isStillPresent = selectedValue == null ? true : (0, _itemEquality.itemIncludes)(registry, selectedValue, store.state.isItemEqualToValue);
+    const isStillPresent = selectedValue == null || (0, _itemEquality.itemIncludes)(registry, selectedValue, store.state.isItemEqualToValue);
     if (isStillPresent) {
       return;
     }
@@ -691,16 +703,8 @@ function AriaCombobox(props) {
     if (defaultSelectedValue != null && (0, _itemEquality.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 = (0, _resolveValueLabel.stringifyAsLabel)(fallback, itemToStringLabel);
-      if (inputRef.current && inputRef.current.value !== stringVal) {
-        setInputValue(stringVal, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none));
-      }
-    }
-  }, [items, flatItems, multiple, selectionMode, selectedValue, defaultSelectedValue, setSelectedValueUnwrapped, itemToStringLabel, store, setInputValue]);
+    setSelectedValue(fallback, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none));
+  }, [items, flatItems, multiple, selectionMode, selectedValue, defaultSelectedValue, store, setSelectedValue]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (selectionMode === 'none') {
       setFilled(String(inputValue) !== '');
@@ -837,8 +841,8 @@ 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,
@@ -1002,14 +1006,13 @@ function AriaCombobox(props) {
           }
         }
       }),
-      id: id,
       name: multiple || selectionMode === 'none' ? undefined : name,
       disabled: disabled,
       required: required && !hasMultipleSelection,
       readOnly: readOnly,
       value: serializedValue,
       ref: hiddenInputRef,
-      style: _visuallyHidden.visuallyHidden,
+      style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
       tabIndex: -1,
       "aria-hidden": true
     }), hiddenInputs]

package/combobox/root/ComboboxRoot.d.ts

@@ -53,7 +53,7 @@ export type ComboboxRootProps<Value, Multiple extends boolean | undefined = fals
    * 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>;
   /**
    * Event handler called when the popup is opened or closed.
    */

package/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/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/combobox/store.d.ts

@@ -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;

package/combobox/store.js

@@ -6,11 +6,32 @@ Object.defineProperty(exports, "__esModule", {
 exports.selectors = void 0;
 var _store = require("@base-ui/utils/store");
 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),
   items: (0, _store.createSelector)(state => state.items),
   selectedValue: (0, _store.createSelector)(state => state.selectedValue),
+  hasSelectionChips: (0, _store.createSelector)(state => {
+    const selectedValue = state.selectedValue;
+    return Array.isArray(selectedValue) && selectedValue.length > 0;
+  }),
+  hasSelectedValue: (0, _store.createSelector)(state => {
+    const {
+      selectedValue,
+      selectionMode
+    } = state;
+    if (selectedValue == null) {
+      return false;
+    }
+    if (selectionMode === 'multiple' && Array.isArray(selectedValue)) {
+      return selectedValue.length > 0;
+    }
+    return true;
+  }),
+  hasNullItemLabel: (0, _store.createSelector)((state, enabled) => {
+    return enabled ? (0, _resolveValueLabel.hasNullItemLabel)(state.items) : false;
+  }),
   open: (0, _store.createSelector)(state => state.open),
   mounted: (0, _store.createSelector)(state => state.mounted),
   forceMounted: (0, _store.createSelector)(state => state.forceMounted),

package/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,6 +16,18 @@ 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> {
   /**

package/combobox/trigger/ComboboxTrigger.js

@@ -14,21 +14,17 @@ var _owner = require("@base-ui/utils/owner");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useButton = require("../../use-button");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
+var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _store2 = require("../store");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
-var _popupStateMapping = require("../../utils/popupStateMapping");
 var _utils = require("../../floating-ui-react/utils");
 var _getPseudoElementBounds = require("../../utils/getPseudoElementBounds");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
-var _constants = require("../../field/utils/constants");
 var _floatingUiReact = require("../../floating-ui-react");
+var _useLabelableId = require("../../labelable-provider/useLabelableId");
 const BOUNDARY_OFFSET = 2;
-const stateAttributesMapping = {
-  ..._popupStateMapping.pressableTriggerOpenStateMapping,
-  ..._constants.fieldValidityMapping
-};
 
 /**
  * A button that opens the popup.
@@ -40,6 +36,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     className,
     nativeButton = true,
     disabled: disabledProp = false,
+    id: idProp,
     ...elementProps
   } = componentProps;
   const {
@@ -54,21 +51,36 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     labelId
   } = (0, _LabelableContext.useLabelableContext)();
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
+  const {
+    filteredItems
+  } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
   const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
+  const required = (0, _store.useStore)(store, _store2.selectors.required);
+  const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
+  const popupSideValue = (0, _store.useStore)(store, _store2.selectors.popupSide);
+  const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const listElement = (0, _store.useStore)(store, _store2.selectors.listElement);
   const triggerProps = (0, _store.useStore)(store, _store2.selectors.triggerProps);
   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 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);
   const selectedIndex = (0, _store.useStore)(store, _store2.selectors.selectedIndex);
+  const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
   const floatingRootContext = (0, _ComboboxRootContext.useComboboxFloatingContext)();
   const inputValue = (0, _ComboboxRootContext.useComboboxInputValueContext)();
   const focusTimeout = (0, _useTimeout.useTimeout)();
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
+  const listEmpty = filteredItems.length === 0;
+  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  (0, _useLabelableId.useLabelableId)({
+    id: inputInsidePopup ? idProp : undefined
+  });
+  const id = inputInsidePopup ? idProp ?? rootId : idProp;
   const currentPointerTypeRef = React.useRef('');
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
@@ -115,8 +127,11 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
   const state = React.useMemo(() => ({
     ...fieldState,
     open,
-    disabled
-  }), [fieldState, open, disabled]);
+    disabled,
+    popupSide,
+    listEmpty,
+    placeholder: !hasSelectedValue
+  }), [fieldState, open, disabled, popupSide, listEmpty, hasSelectedValue]);
   const setTriggerElement = (0, _useStableCallback.useStableCallback)(element => {
     store.set('triggerElement', element);
   });
@@ -124,13 +139,14 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     ref: [forwardedRef, buttonRef, setTriggerElement],
     state,
     props: [triggerProps, triggerClickProps, triggerTypeaheadProps, {
+      id,
       tabIndex: inputInsidePopup ? 0 : -1,
-      disabled,
       role: inputInsidePopup ? 'combobox' : undefined,
       'aria-expanded': open ? 'true' : 'false',
       'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
       'aria-controls': open ? listElement?.id : undefined,
       'aria-readonly': readOnly || undefined,
+      'aria-required': inputInsidePopup ? required || undefined : undefined,
       'aria-labelledby': labelId,
       onPointerDown: trackPointerType,
       onPointerEnter: trackPointerType,
@@ -141,7 +157,11 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
         }
         focusTimeout.start(0, store.state.forceMount);
       },
-      onBlur() {
+      onBlur(event) {
+        // If focus is moving into the popup, don't count it as a blur.
+        if ((0, _utils.contains)(positionerElement, event.relatedTarget)) {
+          return;
+        }
         setTouched(true);
         setFocused(false);
         if (validationMode === 'onBlur') {
@@ -204,7 +224,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
         }
       }
     }, validation ? validation.getValidationProps(elementProps) : elementProps, getButtonProps],
-    stateAttributesMapping
+    stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping
   });
   return element;
 });