@base-ui/react 1.1.0 → 1.3.0

package/esm/select/label/SelectLabel.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { FieldRoot } from "../../field/root/FieldRoot.js";
+/**
+ * An accessible label that is automatically associated with the select trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SelectLabelState = FieldRoot.State;
+export interface SelectLabelProps extends Omit<BaseUIComponentProps<'div', SelectLabel.State>, 'id'> {}
+export declare namespace SelectLabel {
+  type State = SelectLabelState;
+  type Props = SelectLabelProps;
+}

package/esm/select/label/SelectLabel.js

@@ -0,0 +1,49 @@
+'use client';
+
+import * as React from 'react';
+import { useStore } from '@base-ui/utils/store';
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { fieldValidityMapping } from "../../field/utils/constants.js";
+import { useLabel } from "../../labelable-provider/useLabel.js";
+import { getDefaultLabelId } from "../../utils/resolveAriaLabelledBy.js";
+import { useSelectRootContext } from "../root/SelectRootContext.js";
+import { selectors } from "../store.js";
+
+/**
+ * An accessible label that is automatically associated with the select trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+export const SelectLabel = /*#__PURE__*/React.forwardRef(function SelectLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
+  const elementPropsWithoutId = elementProps;
+  delete elementPropsWithoutId.id;
+  const fieldRootContext = useFieldRootContext();
+  const {
+    store
+  } = useSelectRootContext();
+  const triggerElement = useStore(store, selectors.triggerElement);
+  const rootId = useStore(store, selectors.id);
+  const defaultLabelId = getDefaultLabelId(rootId);
+  const labelProps = useLabel({
+    id: defaultLabelId,
+    fallbackControlId: triggerElement?.id ?? rootId,
+    setLabelId(nextLabelId) {
+      store.set('labelId', nextLabelId);
+    }
+  });
+  return useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: fieldValidityMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectLabel.displayName = "SelectLabel";

package/esm/select/list/SelectList.d.ts

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

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";
@@ -9,13 +10,35 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 export declare const SelectPopup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopup.State> {
+export interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopupState> {
   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 {
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side | 'none';
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace SelectPopup {

package/esm/select/popup/SelectPopup.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { rectToClientRect } from '@floating-ui/utils';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { isWebKit } from '@base-ui/utils/detectBrowser';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
@@ -10,7 +11,7 @@ import { isMouseWithinBounds } from '@base-ui/utils/isMouseWithinBounds';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStore } from '@base-ui/utils/store';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
-import { FloatingFocusManager } from "../../floating-ui-react/index.js";
+import { FloatingFocusManager, platform as floatingPlatform } from "../../floating-ui-react/index.js";
 import { useSelectFloatingContext, useSelectRootContext } from "../root/SelectRootContext.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
@@ -28,6 +29,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 +45,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
   const {
     render,
     className,
+    finalFocus,
     ...elementProps
   } = componentProps;
   const {
@@ -103,31 +106,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 +161,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 +190,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;
@@ -212,8 +245,9 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
         const popupStyles = getComputedStyle(popupElement);
         const doc = ownerDocument(triggerElement);
         const win = ownerWindow(positionerElement);
-        const triggerRect = triggerElement.getBoundingClientRect();
-        const positionerRect = positionerElement.getBoundingClientRect();
+        const scale = getScale(triggerElement);
+        const triggerRect = normalizeRect(triggerElement.getBoundingClientRect(), scale);
+        const positionerRect = normalizeRect(positionerElement.getBoundingClientRect(), scale);
         const triggerX = triggerRect.left;
         const triggerHeight = triggerRect.height;
         const scroller = listElement || popupElement;
@@ -235,8 +269,8 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
         let offsetX = 0;
         let offsetY = 0;
         if (textElement && valueElement) {
-          const valueRect = valueElement.getBoundingClientRect();
-          textRect = textElement.getBoundingClientRect();
+          const valueRect = normalizeRect(valueElement.getBoundingClientRect(), scale);
+          textRect = normalizeRect(textElement.getBoundingClientRect(), scale);
           const valueLeftFromTriggerLeft = valueRect.left - triggerX;
           const textLeftFromPositionerLeft = textRect.left - positionerRect.left;
           const valueCenterFromPositionerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
@@ -257,15 +291,15 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
         positionerElement.style.marginTop = `${marginTop}px`;
         positionerElement.style.marginBottom = `${marginBottom}px`;
         popupElement.style.height = '100%';
-        const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
-        const isTopPositioned = scrollTop >= maxScrollTop;
+        const maxScrollTop = getMaxScrollTop(scroller);
+        const isTopPositioned = scrollTop >= maxScrollTop - SCROLL_EPS_PX;
         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);
+        const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || Math.ceil(height) + SCROLL_EPS_PX < Math.min(scrollHeight, minHeight);
 
         // Safari doesn't position the popup correctly when pinch-zoomed.
         const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && isWebKit;
@@ -279,7 +313,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
           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;
+          scroller.scrollTop = getMaxScrollTop(scroller);
           initialHeightRef.current = Math.max(minHeight, height);
         } else {
           positionerElement.style.bottom = '0';
@@ -355,7 +389,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 +410,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
       context: floatingRootContext,
       modal: false,
       disabled: !mounted,
+      returnFocus: finalFocus,
       restoreFocus: true,
       children: element
     })]
@@ -386,31 +421,39 @@ 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);
+}
+function getScale(element) {
+  // The platform API is async-capable, but the DOM platform returns a plain scale object.
+  return floatingPlatform.getScale(element);
 }
+function normalizeRect(rect, scale) {
+  return rectToClientRect({
+    x: rect.x / scale.x,
+    y: rect.y / scale.y,
+    width: rect.width / scale.x,
+    height: rect.height / scale.y
+  });
+}
+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/SelectPortal.d.ts

@@ -8,10 +8,9 @@ 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<Omit<SelectPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SelectPortalState {}
+export interface SelectPortalProps extends FloatingPortal.Props<SelectPortalState> {}
 export declare namespace SelectPortal {
-  interface State {}
-}
-export interface SelectPortalProps extends FloatingPortal.Props<SelectPortal.State> {}
-export declare namespace SelectPortal {
+  type State = SelectPortalState;
   type Props = SelectPortalProps;
 }

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import { useAnchorPositioning, type Align, type Side } from "../../utils/useAnchorPositioning.js";
+import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 /**
  * Positions the select popup.
  * Renders a `<div>` element.
@@ -9,17 +9,29 @@ import { useAnchorPositioning, type Align, type Side } from "../../utils/useAnch
  */
 export declare const SelectPositioner: React.ForwardRefExoticComponent<Omit<SelectPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectPositionerState {
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side | 'none';
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
 }
-export interface SelectPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', SelectPositioner.State> {
+export interface SelectPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', SelectPositionerState> {
   /**
    * 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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type Side, useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
-export interface SelectPositionerContext extends Omit<useAnchorPositioning.ReturnValue, 'side'> {
+import type { Side, UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+export interface SelectPositionerContext extends Omit<UseAnchorPositioningReturnValue, 'side'> {
   side: 'none' | Side;
   alignItemWithTriggerActive: boolean;
   setControlledAlignItemWithTrigger: React.Dispatch<React.SetStateAction<boolean>>;

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;
 }({});