@base-ui/react 1.1.0 → 1.2.0

package/esm/select/item/SelectItem.js

@@ -27,7 +27,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   const {
     render,
     className,
-    value = null,
+    value: itemValue = null,
     label,
     disabled = false,
     nativeButton = false,
@@ -53,7 +53,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   } = useSelectRootContext();
   const highlightTimeout = useTimeout();
   const highlighted = useStore(store, selectors.isActive, listItem.index);
-  const selected = useStore(store, selectors.isSelected, listItem.index, value);
+  const selected = useStore(store, selectors.isSelected, listItem.index, itemValue);
   const selectedByFocus = useStore(store, selectors.isSelectedByFocus, listItem.index);
   const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
   const index = listItem.index;
@@ -65,30 +65,30 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       return undefined;
     }
     const values = valuesRef.current;
-    values[index] = value;
+    values[index] = itemValue;
     return () => {
       delete values[index];
     };
-  }, [hasRegistered, index, value, valuesRef]);
+  }, [hasRegistered, index, itemValue, valuesRef]);
   useIsoLayoutEffect(() => {
     if (!hasRegistered) {
       return undefined;
     }
     const selectedValue = store.state.value;
-    let candidate = selectedValue;
+    let selectedCandidate = selectedValue;
     if (multiple && Array.isArray(selectedValue) && selectedValue.length > 0) {
-      candidate = selectedValue[selectedValue.length - 1];
+      selectedCandidate = selectedValue[selectedValue.length - 1];
     }
-    if (candidate !== undefined && compareItemEquality(candidate, value, isItemEqualToValue)) {
+    if (selectedCandidate !== undefined && compareItemEquality(itemValue, selectedCandidate, isItemEqualToValue)) {
       store.set('selectedIndex', index);
     }
     return undefined;
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, value]);
-  const state = React.useMemo(() => ({
+  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue]);
+  const state = {
     disabled,
     selected,
     highlighted
-  }), [disabled, selected, highlighted]);
+  };
   const rootProps = getItemProps({
     active: highlighted,
     selected
@@ -112,10 +112,10 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     const selectedValue = store.state.value;
     if (multiple) {
       const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const nextValue = selected ? removeItem(currentValue, value, isItemEqualToValue) : [...currentValue, value];
+      const nextValue = selected ? removeItem(currentValue, itemValue, isItemEqualToValue) : [...currentValue, itemValue];
       setValue(nextValue, createChangeEventDetails(REASONS.itemPress, event));
     } else {
-      setValue(value, createChangeEventDetails(REASONS.itemPress, event));
+      setValue(itemValue, createChangeEventDetails(REASONS.itemPress, event));
       setOpen(false, createChangeEventDetails(REASONS.itemPress, event));
     }
   }
@@ -127,7 +127,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       store.set('activeIndex', index);
     },
     onMouseEnter() {
-      if (!keyboardActiveRef.current && store.state.selectedIndex === null) {
+      if (!keyboardActiveRef.current && store.state.selectedIndex === null && highlightItemOnHover) {
         store.set('activeIndex', index);
       }
     },

package/esm/select/item/SelectItemContext.js

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

package/esm/select/item-indicator/SelectItemIndicator.d.ts

@@ -15,7 +15,7 @@ export interface SelectItemIndicatorState {
 export interface SelectItemIndicatorProps extends BaseUIComponentProps<'span', SelectItemIndicator.State> {
   children?: React.ReactNode;
   /** Whether to keep the HTML element in the DOM when the item is not selected. */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectItemIndicator {
   type State = SelectItemIndicatorState;

package/esm/select/item-indicator/SelectItemIndicator.js

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

package/esm/select/popup/SelectPopup.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
@@ -11,6 +12,16 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 export declare const SelectPopup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopup.State> {
   children?: React.ReactNode;
+  /**
+   * Determines the element to focus when the select popup is closed.
+   *
+   * - `false`: Do not move focus.
+   * - `true`: Move focus based on the default behavior (trigger or previously focused element).
+   * - `RefObject`: Move focus to the ref element.
+   * - `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) => boolean | HTMLElement | null | void)) | undefined;
 }
 export interface SelectPopupState {
   side: Side | 'none';

package/esm/select/popup/SelectPopup.js

@@ -28,6 +28,7 @@ import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTr
 import { clamp } from "../../utils/clamp.js";
 import { useCSPContext } from "../../csp-provider/CSPContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SCROLL_EPS_PX = 1;
 const stateAttributesMapping = {
   ...popupStateMapping,
   ...transitionStatusMapping
@@ -43,6 +44,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
   const {
     render,
     className,
+    finalFocus,
     ...elementProps
   } = componentProps;
   const {
@@ -103,31 +105,53 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     const marginTop = parseFloat(positionerStyles.marginTop);
     const marginBottom = parseFloat(positionerStyles.marginBottom);
     const maxPopupHeight = getMaxPopupHeight(getComputedStyle(popupRef.current));
-    const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
+    const maxAvailableHeight = Math.min(doc.documentElement.clientHeight - marginTop - marginBottom, maxPopupHeight);
     const scrollTop = scroller.scrollTop;
-    const scrollHeight = scroller.scrollHeight;
-    const clientHeight = scroller.clientHeight;
-    const maxScrollTop = scrollHeight - clientHeight;
+    const maxScrollTop = getMaxScrollTop(scroller);
     let nextPositionerHeight = 0;
     let nextScrollTop = null;
     let setReachedMax = false;
+    let scrollToMax = false;
+    const setHeight = height => {
+      positionerElement.style.height = `${height}px`;
+    };
+    const handleSmallDiff = (diff, targetScrollTop) => {
+      const heightDelta = clamp(diff, 0, maxAvailableHeight - currentHeight);
+      if (heightDelta > 0) {
+        // Consume the remaining scroll in height.
+        setHeight(currentHeight + heightDelta);
+      }
+      scroller.scrollTop = targetScrollTop;
+      if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EPS_PX) {
+        reachedMaxHeightRef.current = true;
+      }
+      handleScrollArrowVisibility();
+    };
     if (isTopPositioned) {
       const diff = maxScrollTop - scrollTop;
       const idealHeight = currentHeight + diff;
-      const nextHeight = Math.min(idealHeight, viewportHeight);
+      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
       nextPositionerHeight = nextHeight;
-      if (nextHeight !== viewportHeight) {
-        nextScrollTop = maxScrollTop;
+      if (diff <= SCROLL_EPS_PX) {
+        handleSmallDiff(diff, maxScrollTop);
+        return;
+      }
+      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
+        scrollToMax = true;
       } else {
         setReachedMax = true;
       }
     } else if (isBottomPositioned) {
-      const diff = scrollTop - 0;
+      const diff = scrollTop;
       const idealHeight = currentHeight + diff;
-      const nextHeight = Math.min(idealHeight, viewportHeight);
-      const overshoot = idealHeight - viewportHeight;
+      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
+      const overshoot = idealHeight - maxAvailableHeight;
       nextPositionerHeight = nextHeight;
-      if (nextHeight !== viewportHeight) {
+      if (diff <= SCROLL_EPS_PX) {
+        handleSmallDiff(diff, 0);
+        return;
+      }
+      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
         nextScrollTop = 0;
       } else {
         setReachedMax = true;
@@ -136,13 +160,21 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
         }
       }
     }
+    nextPositionerHeight = Math.ceil(nextPositionerHeight);
     if (nextPositionerHeight !== 0) {
-      positionerElement.style.height = `${nextPositionerHeight}px`;
+      setHeight(nextPositionerHeight);
     }
-    if (nextScrollTop != null) {
-      scroller.scrollTop = nextScrollTop;
+    if (scrollToMax || nextScrollTop != null) {
+      // Recompute bounds after resizing (clientHeight likely changed).
+      const nextMaxScrollTop = getMaxScrollTop(scroller);
+      const target = scrollToMax ? nextMaxScrollTop : clamp(nextScrollTop, 0, nextMaxScrollTop);
+
+      // Avoid adjustments that re-trigger scroll events forever.
+      if (Math.abs(scroller.scrollTop - target) > SCROLL_EPS_PX) {
+        scroller.scrollTop = target;
+      }
     }
-    if (setReachedMax || nextPositionerHeight >= maxPopupHeight) {
+    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EPS_PX) {
       reachedMaxHeightRef.current = true;
     }
     handleScrollArrowVisibility();
@@ -157,12 +189,12 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus,
     side,
     align
-  }), [open, transitionStatus, side, align]);
+  };
   useIsoLayoutEffect(() => {
     if (!positionerElement || !popupRef.current || Object.keys(originalPositionerStylesRef.current).length) {
       return;
@@ -355,7 +387,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
       if (listElement) {
         return;
       }
-      scrollHandlerRef.current?.(event.currentTarget);
+      handleScroll(event.currentTarget);
     },
     ...(alignItemWithTriggerActive && {
       style: listElement ? {
@@ -376,6 +408,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
       context: floatingRootContext,
       modal: false,
       disabled: !mounted,
+      returnFocus: finalFocus,
       restoreFocus: true,
       children: element
     })]
@@ -386,31 +419,27 @@ function getMaxPopupHeight(popupStyles) {
   const maxHeightStyle = popupStyles.maxHeight || '';
   return maxHeightStyle.endsWith('px') ? parseFloat(maxHeightStyle) || Infinity : Infinity;
 }
-const UNSET_TRANSFORM_STYLES = {
-  transform: 'none',
-  scale: '1',
-  translate: '0 0'
-};
-function restoreInlineStyleProperty(style, property, value) {
-  if (value) {
-    style.setProperty(property, value);
-  } else {
-    style.removeProperty(property);
-  }
+function getMaxScrollTop(scroller) {
+  return Math.max(0, scroller.scrollHeight - scroller.clientHeight);
 }
+const TRANSFORM_STYLE_RESETS = [['transform', 'none'], ['scale', '1'], ['translate', '0 0']];
 function unsetTransformStyles(popupElement) {
   const {
     style
   } = popupElement;
   const originalStyles = {};
-  const props = Object.keys(UNSET_TRANSFORM_STYLES);
-  for (const prop of props) {
-    originalStyles[prop] = style.getPropertyValue(prop);
-    style.setProperty(prop, UNSET_TRANSFORM_STYLES[prop]);
+  for (const [property, value] of TRANSFORM_STYLE_RESETS) {
+    originalStyles[property] = style.getPropertyValue(property);
+    style.setProperty(property, value, 'important');
   }
   return () => {
-    for (const prop of props) {
-      restoreInlineStyleProperty(style, prop, originalStyles[prop]);
+    for (const [property] of TRANSFORM_STYLE_RESETS) {
+      const originalValue = originalStyles[property];
+      if (originalValue) {
+        style.setProperty(property, originalValue);
+      } else {
+        style.removeProperty(property);
+      }
     }
   };
 }

package/esm/select/popup/SelectPopupDataAttributes.js

@@ -20,11 +20,11 @@ export let SelectPopupDataAttributes = function (SelectPopupDataAttributes) {
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectPopupDataAttributes["side"] = "data-side";
+  SelectPopupDataAttributes[SelectPopupDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  SelectPopupDataAttributes["align"] = "data-align";
+  SelectPopupDataAttributes[SelectPopupDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   return SelectPopupDataAttributes;
 }({});

package/esm/select/portal/SelectPortalContext.js

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

package/esm/select/positioner/SelectPositioner.d.ts

@@ -19,7 +19,7 @@ export interface SelectPositionerProps extends useAnchorPositioning.SharedParame
    * Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space.
    * @default true
    */
-  alignItemWithTrigger?: boolean;
+  alignItemWithTrigger?: boolean | undefined;
 }
 export declare namespace SelectPositioner {
   type State = SelectPositionerState;

package/esm/select/positioner/SelectPositioner.js

@@ -14,11 +14,12 @@ import { SelectPositionerContext } from "./SelectPositionerContext.js";
 import { InternalBackdrop } from "../../utils/InternalBackdrop.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { DROPDOWN_COLLISION_AVOIDANCE } from "../../utils/constants.js";
+import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { clearStyles } from "../popup/utils.js";
 import { selectors } from "../store.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
-import { findItemIndex, itemIncludes } from "../../utils/itemEquality.js";
+import { findItemIndex, selectedValueIncludes } from "../../utils/itemEquality.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FIXED = {
   position: 'fixed'
@@ -69,6 +70,7 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
   const positionerElement = useStore(store, selectors.positionerElement);
   const triggerElement = useStore(store, selectors.triggerElement);
   const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
+  const transitionStatus = useStore(store, selectors.transitionStatus);
   const scrollUpArrowRef = React.useRef(null);
   const scrollDownArrowRef = React.useRef(null);
   const [controlledAlignItemWithTrigger, setControlledAlignItemWithTrigger] = React.useState(alignItemWithTrigger);
@@ -121,12 +123,12 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
       }
     };
   }, [open, mounted, positionerStyles]);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: renderedSide,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden
-  }), [open, renderedSide, positioning.align, positioning.anchorHidden]);
+  };
   const setPositionerElement = useStableCallback(element => {
     store.set('positionerElement', element);
   });
@@ -134,7 +136,7 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
     ref: [forwardedRef, setPositionerElement],
     state,
     stateAttributesMapping: popupStateMapping,
-    props: [defaultProps, elementProps]
+    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
   });
   const prevMapSizeRef = React.useRef(0);
   const onMapChange = useStableCallback(map => {
@@ -151,11 +153,11 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
     }
     const eventDetails = createChangeEventDetails(REASONS.none);
     if (prevSize !== 0 && !store.state.multiple && value !== null) {
-      const valueIndex = findItemIndex(valuesRef.current, value, isItemEqualToValue);
-      if (valueIndex === -1) {
-        const initial = initialValueRef.current;
-        const hasInitial = initial != null && itemIncludes(valuesRef.current, initial, isItemEqualToValue);
-        const nextValue = hasInitial ? initial : null;
+      const selectedValueIndex = findItemIndex(valuesRef.current, value, isItemEqualToValue);
+      if (selectedValueIndex === -1) {
+        const initialSelectedValue = initialValueRef.current;
+        const hasInitial = initialSelectedValue != null && findItemIndex(valuesRef.current, initialSelectedValue, isItemEqualToValue) !== -1;
+        const nextValue = hasInitial ? initialSelectedValue : null;
         setValue(nextValue, eventDetails);
         if (nextValue === null) {
           store.set('selectedIndex', null);
@@ -164,8 +166,9 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
       }
     }
     if (prevSize !== 0 && store.state.multiple && Array.isArray(value)) {
-      const nextValue = value.filter(v => itemIncludes(valuesRef.current, v, isItemEqualToValue));
-      if (nextValue.length !== value.length || nextValue.some(v => !itemIncludes(value, v, isItemEqualToValue))) {
+      const hasVisibleItem = selectedItemValue => findItemIndex(valuesRef.current, selectedItemValue, isItemEqualToValue) !== -1;
+      const nextValue = value.filter(selectedItemValue => hasVisibleItem(selectedItemValue));
+      if (nextValue.length !== value.length || nextValue.some(selectedItemValue => !selectedValueIncludes(value, selectedItemValue, isItemEqualToValue))) {
         setValue(nextValue, eventDetails);
         if (nextValue.length === 0) {
           store.set('selectedIndex', null);

package/esm/select/positioner/SelectPositionerContext.js

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

package/esm/select/positioner/SelectPositionerDataAttributes.js

@@ -16,11 +16,11 @@ export let SelectPositionerDataAttributes = function (SelectPositionerDataAttrib
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectPositionerDataAttributes["side"] = "data-side";
+  SelectPositionerDataAttributes[SelectPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  SelectPositionerDataAttributes["align"] = "data-align";
+  SelectPositionerDataAttributes[SelectPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   return SelectPositionerDataAttributes;
 }({});

package/esm/select/root/SelectRoot.d.ts

@@ -14,74 +14,79 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
   /**
    * A ref to access the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
+  /**
+   * Provides a hint to the browser for autofill.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
+   */
+  autoComplete?: string | undefined;
   /**
    * The id of the Select.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether the user must choose a value before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Whether the user should be unable to choose a different option from the select popup.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether multiple items can be selected.
    * @default false
    */
-  multiple?: Multiple;
+  multiple?: Multiple | undefined;
   /**
    * Whether moving the pointer over items should highlight them.
    * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
    * @default true
    */
-  highlightItemOnHover?: boolean;
+  highlightItemOnHover?: boolean | undefined;
   /**
    * Whether the select popup is initially open.
    *
    * To render a controlled select popup, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Event handler called when the select popup is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: SelectRootChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: SelectRootChangeEventDetails) => void) | undefined;
   /**
    * Event handler called after any animations complete when the select popup is opened or closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * Whether the select popup is currently open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Determines if the select enters a modal state when open.
    * - `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
    * @default true
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the select will not be unmounted when closed.
    * Instead, the `unmount` function must be called to unmount the select manually.
    * Useful when the select's animation is controlled by an external library.
    */
-  actionsRef?: React.RefObject<SelectRootActions | null>;
+  actionsRef?: React.RefObject<SelectRootActions | null> | undefined;
   /**
    * Data structure of the items rendered in the select popup.
    * When specified, `<Select.Value>` renders the label of the selected item instead of the raw value.
@@ -96,39 +101,39 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    * <Select.Root items={items} />
    * ```
    */
-  items?: Record<string, React.ReactNode> | ReadonlyArray<{
+  items?: (Record<string, React.ReactNode> | ReadonlyArray<{
     label: React.ReactNode;
     value: any;
-  }>;
+  }>) | undefined;
   /**
    * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
    */
-  itemToStringLabel?: (itemValue: Value) => string;
+  itemToStringLabel?: ((itemValue: Value) => string) | undefined;
   /**
    * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.
    * If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.
    */
-  itemToStringValue?: (itemValue: Value) => string;
+  itemToStringValue?: ((itemValue: Value) => string) | undefined;
   /**
    * Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.
    * Defaults to `Object.is` comparison.
    */
-  isItemEqualToValue?: (itemValue: Value, value: Value) => boolean;
+  isItemEqualToValue?: ((itemValue: Value, value: Value) => boolean) | undefined;
   /**
    * The uncontrolled value of the select when it’s initially rendered.
    *
    * To render a controlled select, use the `value` prop instead.
    */
-  defaultValue?: SelectValueType<Value, Multiple> | null;
+  defaultValue?: (SelectValueType<Value, Multiple> | null) | undefined;
   /**
    * The value of the select. Use when controlled.
    */
-  value?: SelectValueType<Value, Multiple> | null;
+  value?: (SelectValueType<Value, Multiple> | null) | undefined;
   /**
    * Event handler called when the value of the select changes.
    */
-  onValueChange?: (value: SelectValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void;
+  onValueChange?: ((value: SelectValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void) | undefined;
 }
 export interface SelectRootState {}
 export interface SelectRootActions {

package/esm/select/root/SelectRoot.js

@@ -45,6 +45,7 @@ export function SelectRoot(props) {
     defaultOpen = false,
     onOpenChange,
     name: nameProp,
+    autoComplete,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -454,6 +455,7 @@ export function SelectRoot(props) {
           }
         }),
         name: multiple ? undefined : name,
+        autoComplete: autoComplete,
         value: serializedValue,
         disabled: disabled,
         required: required && !hasMultipleSelection,

package/esm/select/root/SelectRootContext.d.ts

@@ -14,30 +14,30 @@ export interface SelectRootContext {
   highlightItemOnHover: boolean;
   setValue: (nextValue: any, eventDetails: SelectRoot.ChangeEventDetails) => void;
   setOpen: (open: boolean, eventDetails: SelectRoot.ChangeEventDetails) => void;
-  listRef: React.MutableRefObject<Array<HTMLElement | null>>;
-  popupRef: React.MutableRefObject<HTMLDivElement | null>;
-  scrollHandlerRef: React.MutableRefObject<((el: HTMLDivElement) => void) | null>;
+  listRef: React.RefObject<Array<HTMLElement | null>>;
+  popupRef: React.RefObject<HTMLDivElement | null>;
+  scrollHandlerRef: React.RefObject<((el: HTMLDivElement) => void) | null>;
   handleScrollArrowVisibility: () => void;
   scrollArrowsMountedCountRef: React.RefObject<number>;
   getItemProps: (props?: HTMLProps & {
-    active?: boolean;
-    selected?: boolean;
+    active?: boolean | undefined;
+    selected?: boolean | undefined;
   }) => Record<string, unknown>;
   events: FloatingEvents;
-  valueRef: React.MutableRefObject<HTMLSpanElement | null>;
-  valuesRef: React.MutableRefObject<Array<any>>;
-  labelsRef: React.MutableRefObject<Array<string | null>>;
-  typingRef: React.MutableRefObject<boolean>;
-  selectionRef: React.MutableRefObject<{
+  valueRef: React.RefObject<HTMLSpanElement | null>;
+  valuesRef: React.RefObject<Array<any>>;
+  labelsRef: React.RefObject<Array<string | null>>;
+  typingRef: React.RefObject<boolean>;
+  selectionRef: React.RefObject<{
     allowUnselectedMouseUp: boolean;
     allowSelectedMouseUp: boolean;
   }>;
-  selectedItemTextRef: React.MutableRefObject<HTMLSpanElement | null>;
+  selectedItemTextRef: React.RefObject<HTMLSpanElement | null>;
   validation: UseFieldValidationReturnValue;
-  onOpenChangeComplete?: (open: boolean) => void;
-  keyboardActiveRef: React.MutableRefObject<boolean>;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+  keyboardActiveRef: React.RefObject<boolean>;
   alignItemWithTriggerActiveRef: React.RefObject<boolean>;
-  initialValueRef: React.MutableRefObject<any>;
+  initialValueRef: React.RefObject<any>;
 }
 export declare const SelectRootContext: React.Context<SelectRootContext | null>;
 export declare const SelectFloatingContext: React.Context<import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore | null>;

package/esm/select/root/SelectRootContext.js

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