@base-ui/react 1.0.0 → 1.2.0

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

@@ -31,7 +31,10 @@ 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 SCROLL_EPS_PX = 1;
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._stateAttributesMapping.transitionStatusMapping
@@ -47,6 +50,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    finalFocus,
     ...elementProps
   } = componentProps;
   const {
@@ -59,7 +63,8 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     keyboardActiveRef,
     multiple,
     handleScrollArrowVisibility,
-    scrollHandlerRef
+    scrollHandlerRef,
+    highlightItemOnHover
   } = (0, _SelectRootContext.useSelectRootContext)();
   const {
     side,
@@ -71,6 +76,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,31 +110,54 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     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 = (0, _clamp.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;
@@ -134,13 +166,21 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
         }
       }
     }
-    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 : (0, _clamp.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();
@@ -155,12 +195,12 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus,
     side,
     align
-  }), [open, transitionStatus, side, align]);
+  };
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!positionerElement || !popupRef.current || Object.keys(originalPositionerStylesRef.current).length) {
       return;
@@ -178,7 +218,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 +226,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 +358,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 +378,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;
@@ -334,7 +393,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
       if (listElement) {
         return;
       }
-      scrollHandlerRef.current?.(event.currentTarget);
+      handleScroll(event.currentTarget);
     },
     ...(alignItemWithTriggerActive && {
       style: listElement ? {
@@ -351,13 +410,42 @@ 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,
+      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/select/popup/SelectPopupDataAttributes.js

@@ -26,11 +26,11 @@ let SelectPopupDataAttributes = exports.SelectPopupDataAttributes = function (Se
    * 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"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  SelectPopupDataAttributes["align"] = "data-align";
+  SelectPopupDataAttributes[SelectPopupDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   return SelectPopupDataAttributes;
 }({});

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/portal/SelectPortalContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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';
@@ -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/select/positioner/SelectPositioner.js

@@ -20,6 +20,7 @@ var _SelectPositionerContext = require("./SelectPositionerContext");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _constants = require("../../utils/constants");
+var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
 var _utils = require("../popup/utils");
 var _store2 = require("../store");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -75,6 +76,7 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const isItemEqualToValue = (0, _store.useStore)(store, _store2.selectors.isItemEqualToValue);
+  const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
   const scrollUpArrowRef = React.useRef(null);
   const scrollDownArrowRef = React.useRef(null);
   const [controlledAlignItemWithTrigger, setControlledAlignItemWithTrigger] = React.useState(alignItemWithTrigger);
@@ -127,12 +129,12 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
       }
     };
   }, [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 = (0, _useStableCallback.useStableCallback)(element => {
     store.set('positionerElement', element);
   });
@@ -140,7 +142,7 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
     ref: [forwardedRef, setPositionerElement],
     state,
     stateAttributesMapping: _popupStateMapping.popupStateMapping,
-    props: [defaultProps, elementProps]
+    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps]
   });
   const prevMapSizeRef = React.useRef(0);
   const onMapChange = (0, _useStableCallback.useStableCallback)(map => {
@@ -157,11 +159,11 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
     }
     const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none);
     if (prevSize !== 0 && !store.state.multiple && value !== null) {
-      const valueIndex = (0, _itemEquality.findItemIndex)(valuesRef.current, value, isItemEqualToValue);
-      if (valueIndex === -1) {
-        const initial = initialValueRef.current;
-        const hasInitial = initial != null && (0, _itemEquality.itemIncludes)(valuesRef.current, initial, isItemEqualToValue);
-        const nextValue = hasInitial ? initial : null;
+      const selectedValueIndex = (0, _itemEquality.findItemIndex)(valuesRef.current, value, isItemEqualToValue);
+      if (selectedValueIndex === -1) {
+        const initialSelectedValue = initialValueRef.current;
+        const hasInitial = initialSelectedValue != null && (0, _itemEquality.findItemIndex)(valuesRef.current, initialSelectedValue, isItemEqualToValue) !== -1;
+        const nextValue = hasInitial ? initialSelectedValue : null;
         setValue(nextValue, eventDetails);
         if (nextValue === null) {
           store.set('selectedIndex', null);
@@ -170,8 +172,9 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
       }
     }
     if (prevSize !== 0 && store.state.multiple && Array.isArray(value)) {
-      const nextValue = value.filter(v => (0, _itemEquality.itemIncludes)(valuesRef.current, v, isItemEqualToValue));
-      if (nextValue.length !== value.length || nextValue.some(v => !(0, _itemEquality.itemIncludes)(value, v, isItemEqualToValue))) {
+      const hasVisibleItem = selectedItemValue => (0, _itemEquality.findItemIndex)(valuesRef.current, selectedItemValue, isItemEqualToValue) !== -1;
+      const nextValue = value.filter(selectedItemValue => hasVisibleItem(selectedItemValue));
+      if (nextValue.length !== value.length || nextValue.some(selectedItemValue => !(0, _itemEquality.selectedValueIncludes)(value, selectedItemValue, isItemEqualToValue))) {
         setValue(nextValue, eventDetails);
         if (nextValue.length === 0) {
           store.set('selectedIndex', null);

package/select/positioner/SelectPositionerContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/select/positioner/SelectPositionerDataAttributes.js

@@ -22,11 +22,11 @@ let SelectPositionerDataAttributes = exports.SelectPositionerDataAttributes = fu
    * 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"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  SelectPositionerDataAttributes["align"] = "data-align";
+  SelectPositionerDataAttributes[SelectPositionerDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   return SelectPositionerDataAttributes;
 }({});