@base-ui/react 1.0.0 → 1.2.0

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";
@@ -8,9 +9,19 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectPopup: React.ForwardRefExoticComponent<SelectPopupProps & React.RefAttributes<Element>>;
+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

@@ -25,7 +25,10 @@ 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 SCROLL_EPS_PX = 1;
 const stateAttributesMapping = {
   ...popupStateMapping,
   ...transitionStatusMapping
@@ -41,6 +44,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
   const {
     render,
     className,
+    finalFocus,
     ...elementProps
   } = componentProps;
   const {
@@ -53,7 +57,8 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     keyboardActiveRef,
     multiple,
     handleScrollArrowVisibility,
-    scrollHandlerRef
+    scrollHandlerRef,
+    highlightItemOnHover
   } = useSelectRootContext();
   const {
     side,
@@ -65,6 +70,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,31 +104,54 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     const positionerStyles = getComputedStyle(positionerElement);
     const marginTop = parseFloat(positionerStyles.marginTop);
     const marginBottom = parseFloat(positionerStyles.marginBottom);
-    const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
+    const maxPopupHeight = getMaxPopupHeight(getComputedStyle(popupRef.current));
+    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;
-    let nextPositionerHeight = null;
+    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;
@@ -128,13 +160,21 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
         }
       }
     }
-    if (nextPositionerHeight != null) {
-      positionerElement.style.height = `${nextPositionerHeight}px`;
+    nextPositionerHeight = Math.ceil(nextPositionerHeight);
+    if (nextPositionerHeight !== 0) {
+      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) {
+    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EPS_PX) {
       reachedMaxHeightRef.current = true;
     }
     handleScrollArrowVisibility();
@@ -149,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;
@@ -172,7 +212,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 +220,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 +352,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 +372,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;
@@ -328,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 ? {
@@ -345,13 +404,42 @@ 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,
+      returnFocus: finalFocus,
       restoreFocus: true,
       children: element
     })]
   });
 });
-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;
+}
+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 = {};
+  for (const [property, value] of TRANSFORM_STYLE_RESETS) {
+    originalStyles[property] = style.getPropertyValue(property);
+    style.setProperty(property, value, 'important');
+  }
+  return () => {
+    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

@@ -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/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

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