@base-ui/react 1.0.0 → 1.2.0

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 {
@@ -68,11 +69,11 @@ const ComboboxClear = exports.ComboboxClear = /*#__PURE__*/React.forwardRef(func
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(visible);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     open,
     transitionStatus
-  }), [disabled, open, transitionStatus]);
+  };
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open: visible,
     ref: store.state.clearRef,
@@ -88,8 +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) {
         event.preventDefault();

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,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/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/combobox/group/ComboboxGroupContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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

package/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/combobox/index.parts.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "useFilter", {
     return _useFilter.useComboboxFilter;
   }
 });
+Object.defineProperty(exports, "useFilteredItems", {
+  enumerable: true,
+  get: function () {
+    return _useFilteredItems.useFilteredItems;
+  }
+});
 var _ComboboxRoot = require("./root/ComboboxRoot");
 var _ComboboxValue = require("./value/ComboboxValue");
 var _ComboboxInput = require("./input/ComboboxInput");
@@ -177,4 +183,5 @@ var _ComboboxCollection = require("./collection/ComboboxCollection");
 var _ComboboxEmpty = require("./empty/ComboboxEmpty");
 var _ComboboxClear = require("./clear/ComboboxClear");
 var _separator = require("../separator");
-var _useFilter = require("./root/utils/useFilter");
+var _useFilter = require("./root/utils/useFilter");
+var _useFilteredItems = require("./root/utils/useFilteredItems");

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.
@@ -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/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,8 +56,8 @@ 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 direction = (0, _DirectionContext.useDirection)();
+  const required = (0, _store.useStore)(store, _store2.selectors.required);
   const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const name = (0, _store.useStore)(store, _store2.selectors.name);
@@ -82,30 +70,36 @@ 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 lastActiveIndexRef = React.useRef(null);
+  const shouldRestoreActiveIndexRef = 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(() => ({
+  const state = {
     ...fieldState,
     open,
     disabled,
     readOnly,
     popupSide,
     listEmpty
-  }), [fieldState, open, disabled, readOnly, popupSide, listEmpty]);
+  };
   function handleKeyDown(event) {
     if (!comboboxChipsContext) {
       return undefined;
@@ -166,19 +160,42 @@ 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
       }),
       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);
@@ -198,6 +215,12 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         store.state.setInputValue(next, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.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
@@ -212,8 +235,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           }
           const trimmed = nextVal.trim();
           const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
-          if (!readOnly && !disabled) {
-            if (trimmed !== '') {
+          if (!readOnly && !disabled && trimmed) {
+            if (shouldOpenOnInput) {
               store.state.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
               if (!autoHighlightEnabled) {
                 store.state.setIndices({
@@ -245,8 +268,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           }
         }
         const trimmed = event.currentTarget.value.trim();
-        if (!readOnly && !disabled) {
-          if (trimmed !== '') {
+        if (!readOnly && !disabled && trimmed) {
+          if (shouldOpenOnInput) {
             store.state.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
             // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
             if (!autoHighlightEnabled) {
@@ -319,11 +342,12 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           store.state.setSelectedValue(newValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.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();
         }
 
@@ -355,7 +379,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.
@@ -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/combobox/item/ComboboxItem.js

@@ -27,7 +27,7 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const {
     render,
     className,
-    value = null,
+    value: itemValue = null,
     index: indexProp,
     disabled = false,
     nativeButton = false,
@@ -43,7 +43,8 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
   const isRow = (0, _ComboboxRowContext.useComboboxRowContext)();
   const {
-    flatFilteredItems
+    flatFilteredItems,
+    hasItems
   } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
@@ -51,12 +52,11 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const virtualized = (0, _store.useStore)(store, _store2.selectors.virtualized);
   const isItemEqualToValue = (0, _store.useStore)(store, _store2.selectors.isItemEqualToValue);
   const selectable = selectionMode !== 'none';
-  const index = indexProp ?? (virtualized ? (0, _itemEquality.findItemIndex)(flatFilteredItems, value, isItemEqualToValue) : listItem.index);
+  const index = indexProp ?? (virtualized ? (0, _itemEquality.findItemIndex)(flatFilteredItems, itemValue, isItemEqualToValue) : listItem.index);
   const hasRegistered = listItem.index !== -1;
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
   const highlighted = (0, _store.useStore)(store, _store2.selectors.isActive, index);
-  const matchesSelectedValue = (0, _store.useStore)(store, _store2.selectors.isSelected, value);
-  const items = (0, _store.useStore)(store, _store2.selectors.items);
+  const matchesSelectedValue = (0, _store.useStore)(store, _store2.selectors.isSelected, itemValue);
   const getItemProps = (0, _store.useStore)(store, _store2.selectors.getItemProps);
   const itemRef = React.useRef(null);
   const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
@@ -73,41 +73,41 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
     };
   }, [hasRegistered, virtualized, index, indexProp, store]);
   (0, _useIsoLayoutEffect.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]);
   (0, _useIsoLayoutEffect.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 ((0, _itemEquality.compareItemEquality)(lastSelectedValue, value, isItemEqualToValue)) {
+    if ((0, _itemEquality.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
@@ -124,7 +124,7 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   });
   function commitSelection(nativeEvent) {
     function selectItem() {
-      store.state.handleSelection(nativeEvent, value);
+      store.state.handleSelection(nativeEvent, itemValue);
     }
     if (store.state.submitOnItemClick) {
       ReactDOM.flushSync(selectItem);
@@ -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/ComboboxItemContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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

@@ -5,14 +5,14 @@ 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;
   /**
    * Whether to keep the HTML element in the DOM when the item is not selected.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export interface ComboboxItemIndicatorState {
   selected: boolean;

package/combobox/item-indicator/ComboboxItemIndicator.js

@@ -52,10 +52,10 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(selected);
-  const state = React.useMemo(() => ({
+  const state = {
     selected,
     transitionStatus
-  }), [selected, transitionStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     ref: [forwardedRef, indicatorRef],
     state,

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/list/ComboboxList.js

@@ -65,9 +65,9 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
     }
     return children;
   }, [children]);
-  const state = React.useMemo(() => ({
+  const state = {
     empty
-  }), [empty]);
+  };
   const floatingId = floatingRootContext.useState('floatingId');
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,

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;
@@ -26,7 +26,7 @@ export interface ComboboxPopupProps extends BaseUIComponentProps<'div', Combobox
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null);
+  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
   /**
    * Determines the element to focus when the popup is closed.
    *
@@ -36,7 +36,7 @@ export interface ComboboxPopupProps extends BaseUIComponentProps<'div', Combobox
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null);
+  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
 }
 export declare namespace ComboboxPopup {
   type State = ComboboxPopupState;

package/combobox/popup/ComboboxPopup.js

@@ -58,14 +58,14 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden,
     transitionStatus,
     empty
-  }), [open, positioning.side, positioning.align, positioning.anchorHidden, transitionStatus, empty]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, store.state.popupRef],

package/combobox/popup/ComboboxPopupDataAttributes.js

@@ -26,12 +26,12 @@ let ComboboxPopupDataAttributes = exports.ComboboxPopupDataAttributes = function
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ComboboxPopupDataAttributes["side"] = "data-side";
+  ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ComboboxPopupDataAttributes["align"] = "data-align";
+  ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
    * @type {'click' | 'dismiss'}

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 {}
 }
@@ -14,7 +14,7 @@ export interface ComboboxPortalProps extends FloatingPortal.Props<ComboboxPortal
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace ComboboxPortal {
   type Props = ComboboxPortalProps;

package/combobox/portal/ComboboxPortalContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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.