@base-ui/react 1.0.0 → 1.2.0

package/esm/combobox/chip/ComboboxChipContext.js

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

package/esm/combobox/chip-remove/ComboboxChipRemove.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
  * A button to remove a chip.
  * Renders a `<button>` element.
  */
-export declare const ComboboxChipRemove: React.ForwardRefExoticComponent<ComboboxChipRemoveProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxChipRemove: React.ForwardRefExoticComponent<Omit<ComboboxChipRemoveProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxChipRemoveState {
   /**
    * Whether the component should ignore user interaction.

package/esm/combobox/chip-remove/ComboboxChipRemove.js

@@ -20,6 +20,7 @@ export const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function Combobo
   const {
     render,
     className,
+    disabled: disabledProp = false,
     nativeButton = true,
     ...elementProps
   } = componentProps;
@@ -27,10 +28,11 @@ export const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function Combobo
   const {
     index
   } = useComboboxChipContext();
-  const disabled = useStore(store, selectors.disabled);
+  const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const selectedValue = useStore(store, selectors.selectedValue);
   const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
+  const disabled = comboboxDisabled || disabledProp;
   const {
     buttonRef,
     getButtonProps
@@ -39,62 +41,56 @@ export const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function Combobo
     disabled: disabled || readOnly,
     focusableWhenDisabled: true
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
+  function clearActiveIndexForRemovedItem(removedItem) {
+    const activeIndex = store.state.activeIndex;
+    if (activeIndex == null) {
+      return;
+    }
+
+    // Try current visible list first; if not found, it's filtered out.
+    // No need to clear highlight in that case since it can't equal activeIndex.
+    const removedIndex = findItemIndex(store.state.valuesRef.current, removedItem, isItemEqualToValue);
+    if (removedIndex !== -1 && activeIndex === removedIndex) {
+      store.state.setIndices({
+        activeIndex: null,
+        type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
+      });
+    }
+  }
+  function removeChip(event) {
+    const eventDetails = createChangeEventDetails(REASONS.chipRemovePress, event.nativeEvent);
+    const removedItem = selectedValue[index];
+    clearActiveIndexForRemovedItem(removedItem);
+    store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
+    store.state.inputRef.current?.focus();
+    return eventDetails;
+  }
   const element = useRenderElement('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,
     props: [{
       tabIndex: -1,
-      disabled,
-      'aria-readonly': readOnly || undefined,
       onClick(event) {
         if (disabled || readOnly) {
           return;
         }
-        const eventDetails = createChangeEventDetails(REASONS.chipRemovePress, event.nativeEvent);
-
-        // If the removed chip was the active item, clear highlight
-        const activeIndex = store.state.activeIndex;
-        const removedItem = selectedValue[index];
-
-        // Try current visible list first; if not found, it's filtered out. No need
-        // to clear highlight in that case since it can't equal activeIndex.
-        const removedIndex = findItemIndex(store.state.valuesRef.current, removedItem, isItemEqualToValue);
-        if (removedIndex !== -1 && activeIndex === removedIndex) {
-          store.state.setIndices({
-            activeIndex: null,
-            type: store.state.keyboardActiveRef.current ? 'pointer' : 'keyboard'
-          });
-        }
-        store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
+        const eventDetails = removeChip(event);
         if (!eventDetails.isPropagationAllowed) {
           event.stopPropagation();
         }
-        store.state.inputRef.current?.focus();
       },
       onKeyDown(event) {
         if (disabled || readOnly) {
           return;
         }
-        const eventDetails = createChangeEventDetails(REASONS.chipRemovePress, event.nativeEvent);
         if (event.key === 'Enter' || event.key === ' ') {
-          // If the removed chip was the active item, clear highlight
-          const activeIndex = store.state.activeIndex;
-          const removedItem = selectedValue[index];
-          const removedIndex = findItemIndex(store.state.valuesRef.current, removedItem, isItemEqualToValue);
-          if (removedIndex !== -1 && activeIndex === removedIndex) {
-            store.state.setIndices({
-              activeIndex: null,
-              type: store.state.keyboardActiveRef.current ? 'pointer' : 'keyboard'
-            });
-          }
-          store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
+          const eventDetails = removeChip(event);
           if (!eventDetails.isPropagationAllowed) {
             stopEvent(event);
           }
-          store.state.inputRef.current?.focus();
         }
       }
     }, elementProps, getButtonProps]

package/esm/combobox/chips/ComboboxChips.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * A container for the chips in a multiselectable input.
  * Renders a `<div>` element.
  */
-export declare const ComboboxChips: React.ForwardRefExoticComponent<ComboboxChipsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxChips: React.ForwardRefExoticComponent<Omit<ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxChipsState {}
 export interface ComboboxChipsProps extends BaseUIComponentProps<'div', ComboboxChips.State> {}
 export declare namespace ComboboxChips {

package/esm/combobox/chips/ComboboxChips.js

@@ -7,6 +7,7 @@ import { ComboboxChipsContext } from "./ComboboxChipsContext.js";
 import { CompositeList } from "../../composite/list/CompositeList.js";
 import { useComboboxRootContext } from "../root/ComboboxRootContext.js";
 import { selectors } from "../store.js";
+import { EMPTY_OBJECT } from "../../utils/constants.js";
 
 /**
  * A container for the chips in a multiselectable input.
@@ -21,6 +22,7 @@ export const ComboboxChips = /*#__PURE__*/React.forwardRef(function ComboboxChip
   } = componentProps;
   const store = useComboboxRootContext();
   const open = useStore(store, selectors.open);
+  const hasSelectionChips = useStore(store, selectors.hasSelectionChips);
   const [highlightedChipIndex, setHighlightedChipIndex] = React.useState(undefined);
   if (open && highlightedChipIndex !== undefined) {
     setHighlightedChipIndex(undefined);
@@ -28,7 +30,11 @@ export const ComboboxChips = /*#__PURE__*/React.forwardRef(function ComboboxChip
   const chipsRef = React.useRef([]);
   const element = 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'
+    } : EMPTY_OBJECT, elementProps]
   });
   const contextValue = React.useMemo(() => ({
     highlightedChipIndex,

package/esm/combobox/chips/ComboboxChipsContext.js

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

package/esm/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.
@@ -22,12 +22,12 @@ export interface ComboboxClearProps extends NativeButtonProps, BaseUIComponentPr
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the component should remain mounted in the DOM when not visible.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace ComboboxClear {
   type State = ComboboxClearState;

package/esm/combobox/clear/ComboboxClear.js

@@ -40,6 +40,7 @@ export const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClea
   const readOnly = useStore(store, selectors.readOnly);
   const open = useStore(store, selectors.open);
   const selectedValue = useStore(store, selectors.selectedValue);
+  const hasSelectionChips = useStore(store, selectors.hasSelectionChips);
   const inputValue = useComboboxInputValueContext();
   let visible = false;
   if (selectionMode === 'none') {
@@ -47,7 +48,7 @@ export const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClea
   } else if (selectionMode === 'single') {
     visible = selectedValue != null;
   } else {
-    visible = Array.isArray(selectedValue) && selectedValue.length > 0;
+    visible = hasSelectionChips;
   }
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
   const {
@@ -62,11 +63,11 @@ export const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClea
     transitionStatus,
     setMounted
   } = useTransitionStatus(visible);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     open,
     transitionStatus
-  }), [disabled, open, transitionStatus]);
+  };
   useOpenChangeComplete({
     open: visible,
     ref: store.state.clearRef,
@@ -82,8 +83,6 @@ export const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClea
     props: [{
       tabIndex: -1,
       children: 'x',
-      disabled,
-      'aria-readonly': readOnly || undefined,
       // Avoid stealing focus from the input.
       onMouseDown(event) {
         event.preventDefault();

package/esm/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/esm/combobox/group/ComboboxGroup.d.ts

@@ -4,14 +4,14 @@ 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> {
   /**
    * Items to be rendered within this group.
    * When provided, child `Collection` components will use these items.
    */
-  items?: readonly any[];
+  items?: readonly any[] | undefined;
 }
 export declare namespace ComboboxGroup {
   type State = ComboboxGroupState;

package/esm/combobox/group/ComboboxGroupContext.d.ts

@@ -6,7 +6,7 @@ export interface ComboboxGroupContext {
    * Optional list of items that belong to this group. Used by nested
    * collections to render group-specific items.
    */
-  items?: readonly any[];
+  items?: readonly any[] | undefined;
 }
 export declare const ComboboxGroupContext: React.Context<ComboboxGroupContext | undefined>;
 export declare function useComboboxGroupContext(): ComboboxGroupContext;

package/esm/combobox/group/ComboboxGroupContext.js

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

package/esm/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/esm/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<HTMLSpanElement>>;
 export interface ComboboxIconState {}
 export interface ComboboxIconProps extends BaseUIComponentProps<'span', ComboboxIcon.State> {}
 export declare namespace ComboboxIcon {

package/esm/combobox/index.parts.d.ts

@@ -22,4 +22,5 @@ export { ComboboxCollection as Collection } from "./collection/ComboboxCollectio
 export { ComboboxEmpty as Empty } from "./empty/ComboboxEmpty.js";
 export { ComboboxClear as Clear } from "./clear/ComboboxClear.js";
 export { Separator } from "../separator/index.js";
-export { useComboboxFilter as useFilter } from "./root/utils/useFilter.js";
+export { useComboboxFilter as useFilter } from "./root/utils/useFilter.js";
+export { useFilteredItems } from "./root/utils/useFilteredItems.js";

package/esm/combobox/index.parts.js

@@ -22,4 +22,5 @@ export { ComboboxCollection as Collection } from "./collection/ComboboxCollectio
 export { ComboboxEmpty as Empty } from "./empty/ComboboxEmpty.js";
 export { ComboboxClear as Clear } from "./clear/ComboboxClear.js";
 export { Separator } from "../separator/index.js";
-export { useComboboxFilter as useFilter } from "./root/utils/useFilter.js";
+export { useComboboxFilter as useFilter } from "./root/utils/useFilter.js";
+export { useFilteredItems } from "./root/utils/useFilteredItems.js";

package/esm/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.
@@ -30,7 +30,7 @@ export interface ComboboxInputProps extends BaseUIComponentProps<'input', Combob
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace ComboboxInput {
   type State = ComboboxInputState;

package/esm/combobox/input/ComboboxInput.js

@@ -7,10 +7,9 @@ import { isAndroid, isFirefox } from '@base-ui/utils/detectBrowser';
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useComboboxDerivedItemsContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
+import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.js";
 import { selectors } from "../store.js";
-import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { fieldValidityMapping } from "../../field/utils/constants.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
 import { useComboboxChipsContext } from "../chips/ComboboxChipsContext.js";
 import { stopEvent } from "../../floating-ui-react/utils.js";
@@ -18,16 +17,6 @@ import { useComboboxPositionerContext } from "../positioner/ComboboxPositionerCo
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { useDirection } from "../../direction-provider/DirectionContext.js";
-const stateAttributesMapping = {
-  ...pressableTriggerOpenStateMapping,
-  ...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.
@@ -62,8 +51,8 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   // `inputValue` can't be placed in the store.
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = useComboboxInputValueContext();
-  const id = useBaseUiId(idProp);
   const direction = useDirection();
+  const required = useStore(store, selectors.required);
   const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const name = useStore(store, selectors.name);
@@ -76,30 +65,36 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   const selectedValue = useStore(store, selectors.selectedValue);
   const popupSideValue = useStore(store, selectors.popupSide);
   const positionerElement = useStore(store, selectors.positionerElement);
+  const rootId = useStore(store, selectors.id);
+  const inline = useStore(store, 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 = useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
   const [composingValue, setComposingValue] = React.useState(null);
   const isComposingRef = React.useRef(false);
+  const lastActiveIndexRef = React.useRef(null);
+  const shouldRestoreActiveIndexRef = React.useRef(false);
   const setInputElement = 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('', createChangeEventDetails(REASONS.none));
     }
     store.update({
       inputElement: element,
-      inputInsidePopup: isInsidePopup
+      inputInsidePopup: nextIsInsidePopup
     });
   });
-  const state = React.useMemo(() => ({
+  const state = {
     ...fieldState,
     open,
     disabled,
     readOnly,
     popupSide,
     listEmpty
-  }), [fieldState, open, disabled, readOnly, popupSide, listEmpty]);
+  };
   function handleKeyDown(event) {
     if (!comboboxChipsContext) {
       return undefined;
@@ -160,19 +155,42 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
       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
       }),
       id,
       onFocus() {
         setFocused(true);
+        if (!inline || !shouldRestoreActiveIndexRef.current) {
+          return;
+        }
+        shouldRestoreActiveIndexRef.current = false;
+        const nextActiveIndex = lastActiveIndexRef.current;
+        if (nextActiveIndex == null ||
+        // `valuesRef` can be sparse, so guard against restoring a removed slot.
+        !Object.hasOwn(store.state.valuesRef.current, nextActiveIndex)) {
+          return;
+        }
+        store.state.setIndices({
+          activeIndex: nextActiveIndex
+        });
       },
       onBlur() {
         setTouched(true);
         setFocused(false);
+        const activeIndex = store.state.activeIndex;
+        if (inline && activeIndex !== null && autoHighlightMode !== 'always') {
+          lastActiveIndexRef.current = activeIndex;
+          shouldRestoreActiveIndexRef.current = true;
+          store.state.setIndices({
+            activeIndex: null
+          });
+        }
         if (validationMode === 'onBlur') {
           const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
           validation.commit(valueToValidate);
@@ -192,6 +210,12 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
         store.state.setInputValue(next, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
       },
       onChange(event) {
+        // Autofill may not provide `inputType` (Chrome) or may report
+        // `insertReplacementText` (Firefox).
+        const inputType = event.nativeEvent.inputType;
+        const autofillLikeInput = !inputType || inputType === 'insertReplacementText';
+        const shouldOpenOnInput = isComposingRef.current || !autofillLikeInput;
+
         // During IME composition, avoid propagating controlled updates to prevent
         // filtering the options prematurely so `Empty` won't show incorrectly.
         // We can't rely on this check for Android due to how it handles composition
@@ -206,8 +230,8 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
           }
           const trimmed = nextVal.trim();
           const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
-          if (!readOnly && !disabled) {
-            if (trimmed !== '') {
+          if (!readOnly && !disabled && trimmed) {
+            if (shouldOpenOnInput) {
               store.state.setOpen(true, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
               if (!autoHighlightEnabled) {
                 store.state.setIndices({
@@ -239,8 +263,8 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
           }
         }
         const trimmed = event.currentTarget.value.trim();
-        if (!readOnly && !disabled) {
-          if (trimmed !== '') {
+        if (!readOnly && !disabled && trimmed) {
+          if (shouldOpenOnInput) {
             store.state.setOpen(true, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
             // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
             if (!autoHighlightEnabled) {
@@ -313,11 +337,12 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
           store.state.setSelectedValue(newValue, createChangeEventDetails(REASONS.none, event.nativeEvent));
           return;
         }
+        const hadHighlightedChip = comboboxChipsContext?.highlightedChipIndex !== undefined;
         const nextIndex = handleKeyDown(event);
         comboboxChipsContext?.setHighlightedChipIndex(nextIndex);
         if (nextIndex !== undefined) {
           comboboxChipsContext?.chipsRef.current[nextIndex]?.focus();
-        } else {
+        } else if (hadHighlightedChip) {
           store.state.inputRef.current?.focus();
         }
 
@@ -349,7 +374,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
         store.state.keyboardActiveRef.current = false;
       }
     }, validation ? validation.getValidationProps(elementProps) : elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: triggerStateAttributesMapping
   });
   return element;
 });

package/esm/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.
@@ -25,11 +25,11 @@ export interface ComboboxItemProps extends NonNativeButtonProps, Omit<BaseUIComp
    * An optional click handler for the item when selected.
    * It fires when clicking the item with the pointer, as well as when pressing `Enter` with the keyboard if the item is highlighted when the `Input` or `List` element has focus.
    */
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: BaseUIComponentProps<'div', ComboboxItemState>['onClick'] | undefined;
   /**
    * The index of the item in the list. Improves performance when specified by avoiding the need to calculate the index automatically from the DOM.
    */
-  index?: number;
+  index?: number | undefined;
   /**
    * A unique value that identifies this item.
    * @default null
@@ -39,7 +39,7 @@ export interface ComboboxItemProps extends NonNativeButtonProps, Omit<BaseUIComp
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace ComboboxItem {
   type State = ComboboxItemState;

package/esm/combobox/item/ComboboxItem.js

@@ -22,7 +22,7 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
   const {
     render,
     className,
-    value = null,
+    value: itemValue = null,
     index: indexProp,
     disabled = false,
     nativeButton = false,
@@ -38,7 +38,8 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
   const store = useComboboxRootContext();
   const isRow = useComboboxRowContext();
   const {
-    flatFilteredItems
+    flatFilteredItems,
+    hasItems
   } = useComboboxDerivedItemsContext();
   const open = useStore(store, selectors.open);
   const selectionMode = useStore(store, selectors.selectionMode);
@@ -46,12 +47,11 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
   const virtualized = useStore(store, selectors.virtualized);
   const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
   const selectable = selectionMode !== 'none';
-  const index = indexProp ?? (virtualized ? findItemIndex(flatFilteredItems, value, isItemEqualToValue) : listItem.index);
+  const index = indexProp ?? (virtualized ? findItemIndex(flatFilteredItems, itemValue, isItemEqualToValue) : listItem.index);
   const hasRegistered = listItem.index !== -1;
   const rootId = useStore(store, selectors.id);
   const highlighted = useStore(store, selectors.isActive, index);
-  const matchesSelectedValue = useStore(store, selectors.isSelected, value);
-  const items = useStore(store, selectors.items);
+  const matchesSelectedValue = useStore(store, selectors.isSelected, itemValue);
   const getItemProps = useStore(store, selectors.getItemProps);
   const itemRef = React.useRef(null);
   const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
@@ -68,41 +68,41 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
     };
   }, [hasRegistered, virtualized, index, indexProp, store]);
   useIsoLayoutEffect(() => {
-    if (!hasRegistered || items) {
+    if (!hasRegistered || hasItems) {
       return undefined;
     }
     const visibleMap = store.state.valuesRef.current;
-    visibleMap[index] = value;
+    visibleMap[index] = itemValue;
 
     // Stable registry that doesn't depend on filtering. Assume that no
     // filtering had occurred at this point; otherwise, an `items` prop is
     // required.
     if (selectionMode !== 'none') {
-      store.state.allValuesRef.current.push(value);
+      store.state.allValuesRef.current.push(itemValue);
     }
     return () => {
       delete visibleMap[index];
     };
-  }, [hasRegistered, items, index, value, store, selectionMode]);
+  }, [hasRegistered, hasItems, index, itemValue, store, selectionMode]);
   useIsoLayoutEffect(() => {
     if (!open) {
       didPointerDownRef.current = false;
       return;
     }
-    if (!hasRegistered || items) {
+    if (!hasRegistered || hasItems) {
       return;
     }
     const selectedValue = store.state.selectedValue;
     const lastSelectedValue = Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue;
-    if (compareItemEquality(lastSelectedValue, value, isItemEqualToValue)) {
+    if (compareItemEquality(itemValue, lastSelectedValue, isItemEqualToValue)) {
       store.set('selectedIndex', index);
     }
-  }, [hasRegistered, items, open, store, index, value, isItemEqualToValue]);
-  const state = React.useMemo(() => ({
+  }, [hasRegistered, hasItems, open, store, index, itemValue, isItemEqualToValue]);
+  const state = {
     disabled,
     selected,
     highlighted
-  }), [disabled, selected, highlighted]);
+  };
   const rootProps = getItemProps({
     active: highlighted,
     selected
@@ -119,7 +119,7 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
   });
   function commitSelection(nativeEvent) {
     function selectItem() {
-      store.state.handleSelection(nativeEvent, value);
+      store.state.handleSelection(nativeEvent, itemValue);
     }
     if (store.state.submitOnItemClick) {
       ReactDOM.flushSync(selectItem);
@@ -131,7 +131,6 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
   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>`,