@base-ui/react 1.0.0 → 1.1.0

package/select/popup/SelectPopup.js

@@ -31,6 +31,8 @@ var _reasons = require("../../utils/reasons");
 var _ToolbarRootContext = require("../../toolbar/root/ToolbarRootContext");
 var _composite = require("../../composite/composite");
 var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _clamp = require("../../utils/clamp");
+var _CSPContext = require("../../csp-provider/CSPContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -59,7 +61,8 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     keyboardActiveRef,
     multiple,
     handleScrollArrowVisibility,
-    scrollHandlerRef
+    scrollHandlerRef,
+    highlightItemOnHover
   } = (0, _SelectRootContext.useSelectRootContext)();
   const {
     side,
@@ -71,6 +74,10 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
   } = (0, _SelectPositionerContext.useSelectPositionerContext)();
   const insideToolbar = (0, _ToolbarRootContext.useToolbarRootContext)(true) != null;
   const floatingRootContext = (0, _SelectRootContext.useSelectFloatingContext)();
+  const {
+    nonce,
+    disableStyleElements
+  } = (0, _CSPContext.useCSPContext)();
   const highlightTimeout = (0, _useTimeout.useTimeout)();
   const id = (0, _store.useStore)(store, _store2.selectors.id);
   const open = (0, _store.useStore)(store, _store2.selectors.open);
@@ -101,12 +108,13 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     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) {
@@ -134,13 +142,13 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
         }
       }
     }
-    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();
@@ -178,7 +186,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     };
   }, [popupRef, positionerElement]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (mounted || alignItemWithTriggerActive) {
+    if (open || alignItemWithTriggerActive) {
       return;
     }
     initialPlacedRef.current = false;
@@ -186,109 +194,128 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     initialHeightRef.current = 0;
     maxHeightRef.current = 0;
     (0, _utils.clearStyles)(positionerElement, originalPositionerStylesRef.current);
-  }, [mounted, alignItemWithTriggerActive, positionerElement, popupRef]);
+  }, [open, alignItemWithTriggerActive, positionerElement, popupRef]);
   (0, _useIsoLayoutEffect.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 = (0, _owner.ownerDocument)(triggerElement);
-      const win = (0, _owner.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 = (0, _owner.ownerDocument)(triggerElement);
+        const win = (0, _owner.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 && _detectBrowser.isWebKit;
-      if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
-        initialPlacedRef.current = true;
-        (0, _utils.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 && _detectBrowser.isWebKit;
+        if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
+          initialPlacedRef.current = true;
+          (0, _utils.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 = (0, _clamp.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 = (0, _owner.ownerWindow)(positionerElement);
@@ -299,7 +326,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     return () => {
       win.removeEventListener('resize', handleResize);
     };
-  }, [setOpen, alignItemWithTriggerActive, positionerElement, mounted]);
+  }, [setOpen, alignItemWithTriggerActive, positionerElement, open]);
   const defaultProps = {
     ...(listElement ? {
       role: 'presentation',
@@ -319,7 +346,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
       keyboardActiveRef.current = false;
     },
     onPointerLeave(event) {
-      if ((0, _isMouseWithinBounds.isMouseWithinBounds)(event) || event.pointerType === 'touch') {
+      if (!highlightItemOnHover || (0, _isMouseWithinBounds.isMouseWithinBounds)(event) || event.pointerType === 'touch') {
         return;
       }
       const popup = event.currentTarget;
@@ -351,7 +378,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     }, elementProps]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [_styles.styleDisableScrollbar.element, /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {
+    children: [!disableStyleElements && _styles.styleDisableScrollbar.getElement(nonce), /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {
       context: floatingRootContext,
       modal: false,
       disabled: !mounted,
@@ -360,4 +387,36 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     })]
   });
 });
-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/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/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/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/select/root/SelectRoot.js

@@ -19,7 +19,6 @@ var _store = require("@base-ui/utils/store");
 var _floatingUiReact = require("../../floating-ui-react");
 var _SelectRootContext = require("./SelectRootContext");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _store2 = require("../store");
@@ -71,16 +70,16 @@ function SelectRoot(props) {
   } = (0, _FormContext.useFormContext)();
   const {
     setDirty,
+    setTouched,
+    setFocused,
     shouldValidateOnChange,
     validityData,
     setFilled,
     name: fieldName,
     disabled: fieldDisabled,
-    validation
+    validation,
+    validationMode
   } = (0, _FieldRootContext.useFieldRootContext)();
-  const {
-    controlId
-  } = (0, _LabelableContext.useLabelableContext)();
   const generatedId = (0, _useLabelableId.useLabelableId)({
     id
   });
@@ -181,8 +180,8 @@ function SelectRoot(props) {
     }
   }, [store, value]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    setFilled(value !== null);
-  }, [value, setFilled]);
+    setFilled(multiple ? Array.isArray(value) && value.length > 0 : value != null);
+  }, [multiple, value, setFilled]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(function syncSelectedIndex() {
     if (open) {
       return;
@@ -217,6 +216,13 @@ function SelectRoot(props) {
       return;
     }
     setOpenUnwrapped(nextOpen);
+    if (!nextOpen && (eventDetails.reason === _reasons.REASONS.focusOut || eventDetails.reason === _reasons.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
@@ -329,7 +335,11 @@ function SelectRoot(props) {
     getFloatingProps,
     getItemProps
   } = (0, _floatingUiReact.useInteractions)([click, dismiss, listNavigation, typeahead]);
-  const mergedTriggerProps = React.useMemo(() => (0, _mergeProps.mergeProps)(getReferenceProps(), interactionTypeProps), [getReferenceProps, interactionTypeProps]);
+  const mergedTriggerProps = React.useMemo(() => {
+    return (0, _mergeProps.mergeProps)(getReferenceProps(), interactionTypeProps, generatedId ? {
+      id: generatedId
+    } : _constants.EMPTY_OBJECT);
+  }, [getReferenceProps, interactionTypeProps, generatedId]);
   (0, _useOnFirstRender.useOnFirstRender)(() => {
     store.update({
       popupProps: getFloatingProps(),
@@ -408,7 +418,11 @@ 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) {
@@ -444,14 +458,13 @@ 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.visuallyHidden,
+        style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
         tabIndex: -1,
         "aria-hidden": true
       }), hiddenInputs]

package/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/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/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/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/select/store.js

@@ -16,6 +16,23 @@ const selectors = exports.selectors = {
   itemToStringValue: (0, _store.createSelector)(state => state.itemToStringValue),
   isItemEqualToValue: (0, _store.createSelector)(state => state.isItemEqualToValue),
   value: (0, _store.createSelector)(state => state.value),
+  hasSelectedValue: (0, _store.createSelector)(state => {
+    const {
+      value,
+      multiple,
+      itemToStringValue
+    } = state;
+    if (value == null) {
+      return false;
+    }
+    if (multiple && Array.isArray(value)) {
+      return value.length > 0;
+    }
+    return (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue) !== '';
+  }),
+  hasNullItemLabel: (0, _store.createSelector)((state, enabled) => {
+    return enabled ? (0, _resolveValueLabel.hasNullItemLabel)(state.items) : false;
+  }),
   open: (0, _store.createSelector)(state => state.open),
   mounted: (0, _store.createSelector)(state => state.mounted),
   forceMount: (0, _store.createSelector)(state => state.forceMount),
@@ -48,16 +65,5 @@ const selectors = exports.selectors = {
   listElement: (0, _store.createSelector)(state => state.listElement),
   scrollUpArrowVisible: (0, _store.createSelector)(state => state.scrollUpArrowVisible),
   scrollDownArrowVisible: (0, _store.createSelector)(state => state.scrollDownArrowVisible),
-  hasScrollArrows: (0, _store.createSelector)(state => state.hasScrollArrows),
-  serializedValue: (0, _store.createSelector)(state => {
-    const {
-      multiple,
-      value,
-      itemToStringValue
-    } = state;
-    if (multiple && Array.isArray(value) && value.length === 0) {
-      return '';
-    }
-    return (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue);
-  })
+  hasScrollArrows: (0, _store.createSelector)(state => state.hasScrollArrows)
 };

package/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;