@base-ui/react 1.0.0 → 1.1.0

package/esm/select/popup/SelectPopup.js

@@ -25,6 +25,8 @@ import { REASONS } from "../../utils/reasons.js";
 import { useToolbarRootContext } from "../../toolbar/root/ToolbarRootContext.js";
 import { COMPOSITE_KEYS } from "../../composite/composite.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
+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 stateAttributesMapping = {
   ...popupStateMapping,
@@ -53,7 +55,8 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     keyboardActiveRef,
     multiple,
     handleScrollArrowVisibility,
-    scrollHandlerRef
+    scrollHandlerRef,
+    highlightItemOnHover
   } = useSelectRootContext();
   const {
     side,
@@ -65,6 +68,10 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
   } = useSelectPositionerContext();
   const insideToolbar = useToolbarRootContext(true) != null;
   const floatingRootContext = useSelectFloatingContext();
+  const {
+    nonce,
+    disableStyleElements
+  } = useCSPContext();
   const highlightTimeout = useTimeout();
   const id = useStore(store, selectors.id);
   const open = useStore(store, selectors.open);
@@ -95,12 +102,13 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     const positionerStyles = getComputedStyle(positionerElement);
     const marginTop = parseFloat(positionerStyles.marginTop);
     const marginBottom = parseFloat(positionerStyles.marginBottom);
+    const maxPopupHeight = getMaxPopupHeight(getComputedStyle(popupRef.current));
     const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
     const scrollTop = scroller.scrollTop;
     const scrollHeight = scroller.scrollHeight;
     const clientHeight = scroller.clientHeight;
     const maxScrollTop = scrollHeight - clientHeight;
-    let nextPositionerHeight = null;
+    let nextPositionerHeight = 0;
     let nextScrollTop = null;
     let setReachedMax = false;
     if (isTopPositioned) {
@@ -128,13 +136,13 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
         }
       }
     }
-    if (nextPositionerHeight != null) {
+    if (nextPositionerHeight !== 0) {
       positionerElement.style.height = `${nextPositionerHeight}px`;
     }
     if (nextScrollTop != null) {
       scroller.scrollTop = nextScrollTop;
     }
-    if (setReachedMax) {
+    if (setReachedMax || nextPositionerHeight >= maxPopupHeight) {
       reachedMaxHeightRef.current = true;
     }
     handleScrollArrowVisibility();
@@ -172,7 +180,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     };
   }, [popupRef, positionerElement]);
   useIsoLayoutEffect(() => {
-    if (mounted || alignItemWithTriggerActive) {
+    if (open || alignItemWithTriggerActive) {
       return;
     }
     initialPlacedRef.current = false;
@@ -180,109 +188,128 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     initialHeightRef.current = 0;
     maxHeightRef.current = 0;
     clearStyles(positionerElement, originalPositionerStylesRef.current);
-  }, [mounted, alignItemWithTriggerActive, positionerElement, popupRef]);
+  }, [open, alignItemWithTriggerActive, positionerElement, popupRef]);
   useIsoLayoutEffect(() => {
     const popupElement = popupRef.current;
-    if (!mounted || !triggerElement || !positionerElement || !popupElement) {
+    if (!open || !triggerElement || !positionerElement || !popupElement || store.state.transitionStatus === 'ending') {
       return;
     }
     if (!alignItemWithTriggerActive) {
       initialPlacedRef.current = true;
       scrollArrowFrame.request(handleScrollArrowVisibility);
+      popupElement.style.removeProperty('--transform-origin');
       return;
     }
 
     // Wait for `selectedItemTextRef.current` to be set.
     queueMicrotask(() => {
-      const positionerStyles = getComputedStyle(positionerElement);
-      const popupStyles = getComputedStyle(popupElement);
-      const doc = ownerDocument(triggerElement);
-      const win = ownerWindow(positionerElement);
-      const triggerRect = triggerElement.getBoundingClientRect();
-      const positionerRect = positionerElement.getBoundingClientRect();
-      const triggerX = triggerRect.left;
-      const triggerHeight = triggerRect.height;
-      const scroller = listElement || popupElement;
-      const scrollHeight = scroller.scrollHeight;
-      const borderBottom = parseFloat(popupStyles.borderBottomWidth);
-      const marginTop = parseFloat(positionerStyles.marginTop) || 10;
-      const marginBottom = parseFloat(positionerStyles.marginBottom) || 10;
-      const minHeight = parseFloat(positionerStyles.minHeight) || 100;
-      const paddingLeft = 5;
-      const paddingRight = 5;
-      const triggerCollisionThreshold = 20;
-      const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
-      const viewportWidth = doc.documentElement.clientWidth;
-      const availableSpaceBeneathTrigger = viewportHeight - triggerRect.bottom + triggerHeight;
-      const textElement = selectedItemTextRef.current;
-      const valueElement = valueRef.current;
-      let offsetX = 0;
-      let offsetY = 0;
-      if (textElement && valueElement) {
-        const valueRect = valueElement.getBoundingClientRect();
-        const textRect = textElement.getBoundingClientRect();
-        const valueLeftFromTriggerLeft = valueRect.left - triggerX;
-        const textLeftFromPositionerLeft = textRect.left - positionerRect.left;
-        const valueCenterFromPositionerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
-        const textCenterFromTriggerTop = textRect.top - positionerRect.top + textRect.height / 2;
-        offsetX = valueLeftFromTriggerLeft - textLeftFromPositionerLeft;
-        offsetY = textCenterFromTriggerTop - valueCenterFromPositionerTop;
-      }
-      const idealHeight = availableSpaceBeneathTrigger + offsetY + marginBottom + borderBottom;
-      let height = Math.min(viewportHeight, idealHeight);
-      const maxHeight = viewportHeight - marginTop - marginBottom;
-      const scrollTop = idealHeight - height;
-      const left = Math.max(paddingLeft, triggerX + offsetX);
-      const maxRight = viewportWidth - paddingRight;
-      const rightOverflow = Math.max(0, left + positionerRect.width - maxRight);
-      positionerElement.style.left = `${left - rightOverflow}px`;
-      positionerElement.style.height = `${height}px`;
-      positionerElement.style.maxHeight = 'auto';
-      positionerElement.style.marginTop = `${marginTop}px`;
-      positionerElement.style.marginBottom = `${marginBottom}px`;
-      popupElement.style.height = '100%';
-      const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
-      const isTopPositioned = scrollTop >= maxScrollTop;
-      if (isTopPositioned) {
-        height = Math.min(viewportHeight, positionerRect.height) - (scrollTop - maxScrollTop);
-      }
+      // Ensure we remove any transforms that can affect the location of the popup
+      // and therefore the calculations.
+      const restoreTransformStyles = unsetTransformStyles(popupElement);
+      popupElement.style.removeProperty('--transform-origin');
+      try {
+        const positionerStyles = getComputedStyle(positionerElement);
+        const popupStyles = getComputedStyle(popupElement);
+        const doc = ownerDocument(triggerElement);
+        const win = ownerWindow(positionerElement);
+        const triggerRect = triggerElement.getBoundingClientRect();
+        const positionerRect = positionerElement.getBoundingClientRect();
+        const triggerX = triggerRect.left;
+        const triggerHeight = triggerRect.height;
+        const scroller = listElement || popupElement;
+        const scrollHeight = scroller.scrollHeight;
+        const borderBottom = parseFloat(popupStyles.borderBottomWidth);
+        const marginTop = parseFloat(positionerStyles.marginTop) || 10;
+        const marginBottom = parseFloat(positionerStyles.marginBottom) || 10;
+        const minHeight = parseFloat(positionerStyles.minHeight) || 100;
+        const maxPopupHeight = getMaxPopupHeight(popupStyles);
+        const paddingLeft = 5;
+        const paddingRight = 5;
+        const triggerCollisionThreshold = 20;
+        const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
+        const viewportWidth = doc.documentElement.clientWidth;
+        const availableSpaceBeneathTrigger = viewportHeight - triggerRect.bottom + triggerHeight;
+        const textElement = selectedItemTextRef.current;
+        const valueElement = valueRef.current;
+        let textRect;
+        let offsetX = 0;
+        let offsetY = 0;
+        if (textElement && valueElement) {
+          const valueRect = valueElement.getBoundingClientRect();
+          textRect = textElement.getBoundingClientRect();
+          const valueLeftFromTriggerLeft = valueRect.left - triggerX;
+          const textLeftFromPositionerLeft = textRect.left - positionerRect.left;
+          const valueCenterFromPositionerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
+          const textCenterFromTriggerTop = textRect.top - positionerRect.top + textRect.height / 2;
+          offsetX = valueLeftFromTriggerLeft - textLeftFromPositionerLeft;
+          offsetY = textCenterFromTriggerTop - valueCenterFromPositionerTop;
+        }
+        const idealHeight = availableSpaceBeneathTrigger + offsetY + marginBottom + borderBottom;
+        let height = Math.min(viewportHeight, idealHeight);
+        const maxHeight = viewportHeight - marginTop - marginBottom;
+        const scrollTop = idealHeight - height;
+        const left = Math.max(paddingLeft, triggerX + offsetX);
+        const maxRight = viewportWidth - paddingRight;
+        const rightOverflow = Math.max(0, left + positionerRect.width - maxRight);
+        positionerElement.style.left = `${left - rightOverflow}px`;
+        positionerElement.style.height = `${height}px`;
+        positionerElement.style.maxHeight = 'auto';
+        positionerElement.style.marginTop = `${marginTop}px`;
+        positionerElement.style.marginBottom = `${marginBottom}px`;
+        popupElement.style.height = '100%';
+        const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
+        const isTopPositioned = scrollTop >= maxScrollTop;
+        if (isTopPositioned) {
+          height = Math.min(viewportHeight, positionerRect.height) - (scrollTop - maxScrollTop);
+        }
 
-      // When the trigger is too close to the top or bottom of the viewport, or the minHeight is
-      // reached, we fallback to aligning the popup to the trigger as the UX is poor otherwise.
-      const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || height < Math.min(scrollHeight, minHeight);
+        // When the trigger is too close to the top or bottom of the viewport, or the minHeight is
+        // reached, we fallback to aligning the popup to the trigger as the UX is poor otherwise.
+        const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || height < Math.min(scrollHeight, minHeight);
 
-      // Safari doesn't position the popup correctly when pinch-zoomed.
-      const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && isWebKit;
-      if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
-        initialPlacedRef.current = true;
-        clearStyles(positionerElement, originalPositionerStylesRef.current);
-        ReactDOM.flushSync(() => setControlledAlignItemWithTrigger(false));
-        return;
-      }
-      if (isTopPositioned) {
-        const topOffset = Math.max(0, viewportHeight - idealHeight);
-        positionerElement.style.top = positionerRect.height >= maxHeight ? '0' : `${topOffset}px`;
-        positionerElement.style.height = `${height}px`;
-        scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
-        initialHeightRef.current = Math.max(minHeight, height);
-      } else {
-        positionerElement.style.bottom = '0';
-        initialHeightRef.current = Math.max(minHeight, height);
-        scroller.scrollTop = scrollTop;
-      }
-      if (initialHeightRef.current === viewportHeight) {
-        reachedMaxHeightRef.current = true;
-      }
-      handleScrollArrowVisibility();
+        // Safari doesn't position the popup correctly when pinch-zoomed.
+        const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && isWebKit;
+        if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
+          initialPlacedRef.current = true;
+          clearStyles(positionerElement, originalPositionerStylesRef.current);
+          ReactDOM.flushSync(() => setControlledAlignItemWithTrigger(false));
+          return;
+        }
+        if (isTopPositioned) {
+          const topOffset = Math.max(0, viewportHeight - idealHeight);
+          positionerElement.style.top = positionerRect.height >= maxHeight ? '0' : `${topOffset}px`;
+          positionerElement.style.height = `${height}px`;
+          scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
+          initialHeightRef.current = Math.max(minHeight, height);
+        } else {
+          positionerElement.style.bottom = '0';
+          initialHeightRef.current = Math.max(minHeight, height);
+          scroller.scrollTop = scrollTop;
+        }
+        if (textRect) {
+          const popupTop = positionerRect.top;
+          const popupHeight = positionerRect.height;
+          const textCenterY = textRect.top + textRect.height / 2;
+          const transformOriginY = popupHeight > 0 ? (textCenterY - popupTop) / popupHeight * 100 : 50;
+          const clampedY = clamp(transformOriginY, 0, 100);
+          popupElement.style.setProperty('--transform-origin', `50% ${clampedY}%`);
+        }
+        if (initialHeightRef.current === viewportHeight || height >= maxPopupHeight) {
+          reachedMaxHeightRef.current = true;
+        }
+        handleScrollArrowVisibility();
 
-      // Avoid the `onScroll` event logic from triggering before the popup is placed.
-      setTimeout(() => {
-        initialPlacedRef.current = true;
-      });
+        // Avoid the `onScroll` event logic from triggering before the popup is placed.
+        setTimeout(() => {
+          initialPlacedRef.current = true;
+        });
+      } finally {
+        restoreTransformStyles();
+      }
     });
-  }, [store, mounted, positionerElement, triggerElement, valueRef, selectedItemTextRef, popupRef, handleScrollArrowVisibility, alignItemWithTriggerActive, setControlledAlignItemWithTrigger, scrollArrowFrame, scrollDownArrowRef, scrollUpArrowRef, listElement]);
+  }, [store, open, positionerElement, triggerElement, valueRef, selectedItemTextRef, popupRef, handleScrollArrowVisibility, alignItemWithTriggerActive, setControlledAlignItemWithTrigger, scrollArrowFrame, scrollDownArrowRef, scrollUpArrowRef, listElement]);
   React.useEffect(() => {
-    if (!alignItemWithTriggerActive || !positionerElement || !mounted) {
+    if (!alignItemWithTriggerActive || !positionerElement || !open) {
       return undefined;
     }
     const win = ownerWindow(positionerElement);
@@ -293,7 +320,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     return () => {
       win.removeEventListener('resize', handleResize);
     };
-  }, [setOpen, alignItemWithTriggerActive, positionerElement, mounted]);
+  }, [setOpen, alignItemWithTriggerActive, positionerElement, open]);
   const defaultProps = {
     ...(listElement ? {
       role: 'presentation',
@@ -313,7 +340,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
       keyboardActiveRef.current = false;
     },
     onPointerLeave(event) {
-      if (isMouseWithinBounds(event) || event.pointerType === 'touch') {
+      if (!highlightItemOnHover || isMouseWithinBounds(event) || event.pointerType === 'touch') {
         return;
       }
       const popup = event.currentTarget;
@@ -345,7 +372,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     }, elementProps]
   });
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [styleDisableScrollbar.element, /*#__PURE__*/_jsx(FloatingFocusManager, {
+    children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), /*#__PURE__*/_jsx(FloatingFocusManager, {
       context: floatingRootContext,
       modal: false,
       disabled: !mounted,
@@ -354,4 +381,36 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     })]
   });
 });
-if (process.env.NODE_ENV !== "production") SelectPopup.displayName = "SelectPopup";
+if (process.env.NODE_ENV !== "production") SelectPopup.displayName = "SelectPopup";
+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 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]);
+  }
+  return () => {
+    for (const prop of props) {
+      restoreInlineStyleProperty(style, prop, originalStyles[prop]);
+    }
+  };
+}

package/esm/select/portal/SelectPortal.d.ts

@@ -7,7 +7,7 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectPortal: React.ForwardRefExoticComponent<SelectPortalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectPortal: React.ForwardRefExoticComponent<Omit<SelectPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace SelectPortal {
   interface State {}
 }

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

@@ -7,7 +7,7 @@ import { useAnchorPositioning, type Align, type Side } from "../../utils/useAnch
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectPositioner: React.ForwardRefExoticComponent<SelectPositionerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectPositioner: React.ForwardRefExoticComponent<Omit<SelectPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectPositionerState {
   open: boolean;
   side: Side | 'none';

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

@@ -70,7 +70,7 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
   open?: boolean;
   /**
    * Determines if the select enters a modal state when open.
-   * - `true`: user interaction is limited to the select: document page scroll is locked and and pointer interactions on outside elements are disabled.
+   * - `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
    */
@@ -81,7 +81,7 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    * 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>;
+  actionsRef?: React.RefObject<SelectRootActions | null>;
   /**
    * 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.

package/esm/select/root/SelectRoot.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
@@ -13,7 +13,6 @@ import { useStore, Store } from '@base-ui/utils/store';
 import { useClick, useDismiss, useFloatingRootContext, useInteractions, useListNavigation, useTypeahead } from "../../floating-ui-react/index.js";
 import { SelectRootContext, SelectFloatingContext } from "./SelectRootContext.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
 import { selectors } from "../store.js";
@@ -23,7 +22,7 @@ import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { useFormContext } from "../../form/FormContext.js";
 import { useField } from "../../field/useField.js";
 import { stringifyAsValue } from "../../utils/resolveValueLabel.js";
-import { EMPTY_ARRAY } from "../../utils/constants.js";
+import { EMPTY_ARRAY, EMPTY_OBJECT } from "../../utils/constants.js";
 import { defaultItemEquality, findItemIndex } from "../../utils/itemEquality.js";
 import { useValueChanged } from "../../utils/useValueChanged.js";
 import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
@@ -66,16 +65,16 @@ export function SelectRoot(props) {
   } = useFormContext();
   const {
     setDirty,
+    setTouched,
+    setFocused,
     shouldValidateOnChange,
     validityData,
     setFilled,
     name: fieldName,
     disabled: fieldDisabled,
-    validation
+    validation,
+    validationMode
   } = useFieldRootContext();
-  const {
-    controlId
-  } = useLabelableContext();
   const generatedId = useLabelableId({
     id
   });
@@ -176,8 +175,8 @@ export function SelectRoot(props) {
     }
   }, [store, value]);
   useIsoLayoutEffect(() => {
-    setFilled(value !== null);
-  }, [value, setFilled]);
+    setFilled(multiple ? Array.isArray(value) && value.length > 0 : value != null);
+  }, [multiple, value, setFilled]);
   useIsoLayoutEffect(function syncSelectedIndex() {
     if (open) {
       return;
@@ -212,6 +211,13 @@ export function SelectRoot(props) {
       return;
     }
     setOpenUnwrapped(nextOpen);
+    if (!nextOpen && (eventDetails.reason === REASONS.focusOut || eventDetails.reason === REASONS.outsidePress)) {
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === 'onBlur') {
+        validation.commit(value);
+      }
+    }
 
     // The active index will sync to the last selected index on the next open.
     // Workaround `enableFocusInside` in Floating UI setting `tabindex=0` of a non-highlighted
@@ -324,7 +330,11 @@ export function SelectRoot(props) {
     getFloatingProps,
     getItemProps
   } = useInteractions([click, dismiss, listNavigation, typeahead]);
-  const mergedTriggerProps = React.useMemo(() => mergeProps(getReferenceProps(), interactionTypeProps), [getReferenceProps, interactionTypeProps]);
+  const mergedTriggerProps = React.useMemo(() => {
+    return mergeProps(getReferenceProps(), interactionTypeProps, generatedId ? {
+      id: generatedId
+    } : EMPTY_OBJECT);
+  }, [getReferenceProps, interactionTypeProps, generatedId]);
   useOnFirstRender(() => {
     store.update({
       popupProps: getFloatingProps(),
@@ -403,7 +413,11 @@ export function SelectRoot(props) {
         ...validation.getInputValidationProps({
           onFocus() {
             // Move focus to the trigger element when the hidden input is focused.
-            store.state.triggerElement?.focus();
+            store.state.triggerElement?.focus({
+              // Supported in Chrome from 144 (January 2026)
+              // @ts-expect-error - focusVisible is not yet in the lib.dom.d.ts
+              focusVisible: true
+            });
           },
           // Handle browser autofill.
           onChange(event) {
@@ -439,14 +453,13 @@ export function SelectRoot(props) {
             queueMicrotask(handleChange);
           }
         }),
-        id: id || controlId || undefined,
         name: multiple ? undefined : name,
         value: serializedValue,
         disabled: disabled,
         required: required && !hasMultipleSelection,
         readOnly: readOnly,
         ref: ref,
-        style: visuallyHidden,
+        style: name ? visuallyHiddenInput : visuallyHidden,
         tabIndex: -1,
         "aria-hidden": true
       }), hiddenInputs]

package/esm/select/scroll-arrow/SelectScrollArrow.d.ts

@@ -5,7 +5,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * @internal
  */
-export declare const SelectScrollArrow: React.ForwardRefExoticComponent<SelectScrollArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollArrow: React.ForwardRefExoticComponent<Omit<SelectScrollArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollArrowState {
   direction: 'up' | 'down';
   visible: boolean;

package/esm/select/scroll-down-arrow/SelectScrollDownArrow.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectScrollDownArrow: React.ForwardRefExoticComponent<SelectScrollDownArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollDownArrow: React.ForwardRefExoticComponent<Omit<SelectScrollDownArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollDownArrowState {}
 export interface SelectScrollDownArrowProps extends BaseUIComponentProps<'div', SelectScrollDownArrow.State> {
   /**

package/esm/select/scroll-up-arrow/SelectScrollUpArrow.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectScrollUpArrow: React.ForwardRefExoticComponent<SelectScrollUpArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollUpArrow: React.ForwardRefExoticComponent<Omit<SelectScrollUpArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollUpArrowState {}
 export interface SelectScrollUpArrowProps extends BaseUIComponentProps<'div', SelectScrollUpArrow.State> {
   /**

package/esm/select/store.d.ts

@@ -43,6 +43,8 @@ export declare const selectors: {
   itemToStringValue: (state: State) => ((item: any) => string) | undefined;
   isItemEqualToValue: (state: State) => (item: any, value: any) => boolean;
   value: (state: State) => any;
+  hasSelectedValue: (state: State) => boolean;
+  hasNullItemLabel: (state: State, enabled: boolean) => boolean;
   open: (state: State) => boolean;
   mounted: (state: State) => boolean;
   forceMount: (state: State) => boolean;
@@ -61,5 +63,4 @@ export declare const selectors: {
   scrollUpArrowVisible: (state: State) => boolean;
   scrollDownArrowVisible: (state: State) => boolean;
   hasScrollArrows: (state: State) => boolean;
-  serializedValue: (state: State) => string;
 };

package/esm/select/store.js

@@ -1,6 +1,6 @@
 import { createSelector } from '@base-ui/utils/store';
 import { compareItemEquality } from "../utils/itemEquality.js";
-import { stringifyAsValue } from "../utils/resolveValueLabel.js";
+import { hasNullItemLabel, stringifyAsValue } from "../utils/resolveValueLabel.js";
 export const selectors = {
   id: createSelector(state => state.id),
   modal: createSelector(state => state.modal),
@@ -10,6 +10,23 @@ export const selectors = {
   itemToStringValue: createSelector(state => state.itemToStringValue),
   isItemEqualToValue: createSelector(state => state.isItemEqualToValue),
   value: createSelector(state => state.value),
+  hasSelectedValue: createSelector(state => {
+    const {
+      value,
+      multiple,
+      itemToStringValue
+    } = state;
+    if (value == null) {
+      return false;
+    }
+    if (multiple && Array.isArray(value)) {
+      return value.length > 0;
+    }
+    return stringifyAsValue(value, itemToStringValue) !== '';
+  }),
+  hasNullItemLabel: createSelector((state, enabled) => {
+    return enabled ? hasNullItemLabel(state.items) : false;
+  }),
   open: createSelector(state => state.open),
   mounted: createSelector(state => state.mounted),
   forceMount: createSelector(state => state.forceMount),
@@ -42,16 +59,5 @@ export const selectors = {
   listElement: createSelector(state => state.listElement),
   scrollUpArrowVisible: createSelector(state => state.scrollUpArrowVisible),
   scrollDownArrowVisible: createSelector(state => state.scrollDownArrowVisible),
-  hasScrollArrows: createSelector(state => state.hasScrollArrows),
-  serializedValue: createSelector(state => {
-    const {
-      multiple,
-      value,
-      itemToStringValue
-    } = state;
-    if (multiple && Array.isArray(value) && value.length === 0) {
-      return '';
-    }
-    return stringifyAsValue(value, itemToStringValue);
-  })
+  hasScrollArrows: createSelector(state => state.hasScrollArrows)
 };

package/esm/select/trigger/SelectTrigger.d.ts

@@ -7,14 +7,24 @@ import type { FieldRoot } from "../../field/root/FieldRoot.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface SelectTriggerState extends FieldRoot.State {
-  /** Whether the select popup is currently open. */
+  /**
+   * Whether the select popup is currently open.
+   */
   open: boolean;
-  /** Whether the select popup is readonly. */
+  /**
+   * Whether the select popup is readonly.
+   */
   readOnly: boolean;
-  /** The value of the currently selected item. */
+  /**
+   * The value of the currently selected item.
+   */
   value: any;
+  /**
+   * Whether the select doesn't have a value.
+   */
+  placeholder: boolean;
 }
 export interface SelectTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', SelectTrigger.State> {
   children?: React.ReactNode;