@base-ui/react 1.2.0 → 1.4.0

package/select/list/SelectList.js

@@ -25,6 +25,7 @@ const SelectList = exports.SelectList = /*#__PURE__*/React.forwardRef(function S
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/select/popup/SelectPopup.d.ts

@@ -10,7 +10,7 @@ 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.
@@ -21,12 +21,24 @@ export interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopu
    * - `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;
+  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/select/popup/SelectPopup.js

@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SelectPopup = void 0;
 var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
-var _useTimeout = require("@base-ui/utils/useTimeout");
+var _utils = require("@floating-ui/utils");
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
-var _isMouseWithinBounds = require("@base-ui/utils/isMouseWithinBounds");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _store = require("@base-ui/utils/store");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
@@ -25,16 +24,17 @@ var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _store2 = require("../store");
-var _utils = require("./utils");
+var _utils2 = require("./utils");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 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 _scrollEdges = require("../../utils/scrollEdges");
 var _CSPContext = require("../../csp-provider/CSPContext");
+var _DirectionContext = require("../../direction-provider/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const SCROLL_EPS_PX = 1;
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._stateAttributesMapping.transitionStatusMapping
@@ -50,6 +50,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     finalFocus,
     ...elementProps
   } = componentProps;
@@ -64,23 +65,25 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     multiple,
     handleScrollArrowVisibility,
     scrollHandlerRef,
+    listRef,
     highlightItemOnHover
   } = (0, _SelectRootContext.useSelectRootContext)();
   const {
     side,
     align,
     alignItemWithTriggerActive,
+    isPositioned,
     setControlledAlignItemWithTrigger,
     scrollDownArrowRef,
     scrollUpArrowRef
   } = (0, _SelectPositionerContext.useSelectPositionerContext)();
   const insideToolbar = (0, _ToolbarRootContext.useToolbarRootContext)(true) != null;
   const floatingRootContext = (0, _SelectRootContext.useSelectFloatingContext)();
+  const direction = (0, _DirectionContext.useDirection)();
   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);
   const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
@@ -89,9 +92,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const listElement = (0, _store.useStore)(store, _store2.selectors.listElement);
-  const initialHeightRef = React.useRef(0);
   const reachedMaxHeightRef = React.useRef(false);
-  const maxHeightRef = React.useRef(0);
   const initialPlacedRef = React.useRef(false);
   const originalPositionerStylesRef = React.useRef({});
   const scrollArrowFrame = (0, _useAnimationFrame.useAnimationFrame)();
@@ -105,7 +106,12 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     }
     const isTopPositioned = positionerElement.style.top === '0px';
     const isBottomPositioned = positionerElement.style.bottom === '0px';
-    const currentHeight = positionerElement.getBoundingClientRect().height;
+    if (!isTopPositioned && !isBottomPositioned) {
+      handleScrollArrowVisibility();
+      return;
+    }
+    const scale = getScale(positionerElement);
+    const currentHeight = normalizeSize(positionerElement.getBoundingClientRect().height, 'y', scale);
     const doc = (0, _owner.ownerDocument)(positionerElement);
     const positionerStyles = getComputedStyle(positionerElement);
     const marginTop = parseFloat(positionerStyles.marginTop);
@@ -128,42 +134,29 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
         setHeight(currentHeight + heightDelta);
       }
       scroller.scrollTop = targetScrollTop;
-      if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EPS_PX) {
+      if (maxAvailableHeight - (currentHeight + heightDelta) <= _scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
         reachedMaxHeightRef.current = true;
       }
       handleScrollArrowVisibility();
     };
-    if (isTopPositioned) {
-      const diff = maxScrollTop - scrollTop;
-      const idealHeight = currentHeight + diff;
-      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
-      nextPositionerHeight = nextHeight;
-      if (diff <= SCROLL_EPS_PX) {
-        handleSmallDiff(diff, maxScrollTop);
-        return;
-      }
-      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
+    const diff = isTopPositioned ? maxScrollTop - scrollTop : scrollTop;
+    const nextHeight = Math.min(currentHeight + diff, maxAvailableHeight);
+    nextPositionerHeight = nextHeight;
+    if (diff <= _scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
+      handleSmallDiff(diff, isTopPositioned ? maxScrollTop : 0);
+      return;
+    }
+    if (maxAvailableHeight - nextHeight > _scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
+      if (isTopPositioned) {
         scrollToMax = true;
       } else {
-        setReachedMax = true;
-      }
-    } else if (isBottomPositioned) {
-      const diff = scrollTop;
-      const idealHeight = currentHeight + diff;
-      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
-      const overshoot = idealHeight - maxAvailableHeight;
-      nextPositionerHeight = nextHeight;
-      if (diff <= SCROLL_EPS_PX) {
-        handleSmallDiff(diff, 0);
-        return;
-      }
-      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
         nextScrollTop = 0;
-      } else {
-        setReachedMax = true;
-        if (scrollTop < maxScrollTop) {
-          nextScrollTop = scrollTop - (diff - overshoot);
-        }
+      }
+    } else {
+      setReachedMax = true;
+      if (isBottomPositioned && scrollTop < maxScrollTop) {
+        const overshoot = currentHeight + diff - maxAvailableHeight;
+        nextScrollTop = scrollTop - (diff - overshoot);
       }
     }
     nextPositionerHeight = Math.ceil(nextPositionerHeight);
@@ -176,11 +169,11 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
       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) {
+      if (Math.abs(scroller.scrollTop - target) > _scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
         scroller.scrollTop = target;
       }
     }
-    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EPS_PX) {
+    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - _scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
       reachedMaxHeightRef.current = true;
     }
     handleScrollArrowVisibility();
@@ -223,13 +216,15 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     }
     initialPlacedRef.current = false;
     reachedMaxHeightRef.current = false;
-    initialHeightRef.current = 0;
-    maxHeightRef.current = 0;
-    (0, _utils.clearStyles)(positionerElement, originalPositionerStylesRef.current);
+    (0, _utils2.clearStyles)(positionerElement, originalPositionerStylesRef.current);
   }, [open, alignItemWithTriggerActive, positionerElement, popupRef]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const popupElement = popupRef.current;
-    if (!open || !triggerElement || !positionerElement || !popupElement || store.state.transitionStatus === 'ending') {
+
+    // Wait for Floating UI's first positioning pass before reading DOM geometry.
+    // We replace the final coordinates for aligned selects, but still need middleware
+    // like `size()` to set CSS variables such as `--anchor-width`.
+    if (!open || !triggerElement || !positionerElement || !popupElement || alignItemWithTriggerActive && !isPositioned || store.state.transitionStatus === 'ending') {
       return;
     }
     if (!alignItemWithTriggerActive) {
@@ -239,113 +234,104 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
       return;
     }
 
-    // Wait for `selectedItemTextRef.current` to be set.
-    queueMicrotask(() => {
-      // 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);
+    // 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 textElement = selectedItemTextRef.current;
+      const valueElement = valueRef.current;
+      const positionerStyles = getComputedStyle(positionerElement);
+      const popupStyles = getComputedStyle(popupElement);
+      const doc = (0, _owner.ownerDocument)(triggerElement);
+      const win = (0, _owner.ownerWindow)(positionerElement);
+      const scale = getScale(triggerElement);
+      const triggerRect = normalizeRect(triggerElement.getBoundingClientRect(), scale);
+      const positionerRect = normalizeRect(positionerElement.getBoundingClientRect(), scale);
+      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;
+      let textRect;
+      let alignedLeft = direction === 'rtl' ? triggerRect.right - positionerRect.width : triggerRect.left;
+      let offsetY = 0;
+      if (textElement && valueElement) {
+        const valueRect = normalizeRect(valueElement.getBoundingClientRect(), scale);
+        textRect = normalizeRect(textElement.getBoundingClientRect(), scale);
+        alignedLeft = positionerRect.left + (direction === 'rtl' ? valueRect.right - textRect.right : valueRect.left - textRect.left);
+        const valueCenterFromTriggerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
+        const textCenterFromPositionerTop = textRect.top - positionerRect.top + textRect.height / 2;
+        offsetY = textCenterFromPositionerTop - valueCenterFromTriggerTop;
+      }
+      const idealHeight = availableSpaceBeneathTrigger + offsetY + marginBottom + borderBottom;
+      let height = Math.min(viewportHeight, idealHeight);
+      const maxHeight = viewportHeight - marginTop - marginBottom;
+      const scrollTop = idealHeight - height;
+      const maxRight = viewportWidth - paddingRight;
+      positionerElement.style.left = `${(0, _clamp.clamp)(alignedLeft, paddingLeft, maxRight - positionerRect.width)}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 = getMaxScrollTop(scroller);
+      const isTopPositioned = scrollTop >= maxScrollTop - _scrollEdges.SCROLL_EDGE_TOLERANCE_PX;
+      if (isTopPositioned) {
+        height = Math.min(viewportHeight, positionerRect.height) - (scrollTop - maxScrollTop);
+      }
 
-        // 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();
+      // 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 || Math.ceil(height) + _scrollEdges.SCROLL_EDGE_TOLERANCE_PX < Math.min(scrollHeight, minHeight);
 
-        // Avoid the `onScroll` event logic from triggering before the popup is placed.
-        setTimeout(() => {
-          initialPlacedRef.current = true;
-        });
-      } finally {
-        restoreTransformStyles();
+      // 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, _utils2.clearStyles)(positionerElement, originalPositionerStylesRef.current);
+        setControlledAlignItemWithTrigger(false);
+        return;
+      }
+      const initialHeight = Math.max(minHeight, height);
+      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 = getMaxScrollTop(scroller);
+      } else {
+        positionerElement.style.bottom = '0';
+        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}%`);
       }
-    });
-  }, [store, open, positionerElement, triggerElement, valueRef, selectedItemTextRef, popupRef, handleScrollArrowVisibility, alignItemWithTriggerActive, setControlledAlignItemWithTrigger, scrollArrowFrame, scrollDownArrowRef, scrollUpArrowRef, listElement]);
+      if (initialHeight === viewportHeight || height >= maxPopupHeight) {
+        reachedMaxHeightRef.current = true;
+      }
+      handleScrollArrowVisibility();
+      if (highlightItemOnHover && store.state.selectedIndex === null && store.state.activeIndex === null && listRef.current[0] != null) {
+        store.set('activeIndex', 0);
+      }
+      initialPlacedRef.current = true;
+    } finally {
+      restoreTransformStyles();
+    }
+  }, [store, open, positionerElement, triggerElement, valueRef, selectedItemTextRef, popupRef, handleScrollArrowVisibility, alignItemWithTriggerActive, setControlledAlignItemWithTrigger, scrollArrowFrame, scrollDownArrowRef, scrollUpArrowRef, listElement, listRef, highlightItemOnHover, direction, isPositioned]);
   React.useEffect(() => {
     if (!alignItemWithTriggerActive || !positionerElement || !open) {
       return undefined;
@@ -354,10 +340,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     function handleResize(event) {
       setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.windowResize, event));
     }
-    win.addEventListener('resize', handleResize);
-    return () => {
-      win.removeEventListener('resize', handleResize);
-    };
+    return (0, _addEventListener.addEventListener)(win, 'resize', handleResize);
   }, [setOpen, alignItemWithTriggerActive, positionerElement, open]);
   const defaultProps = {
     ...(listElement ? {
@@ -377,18 +360,6 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     onMouseMove() {
       keyboardActiveRef.current = false;
     },
-    onPointerLeave(event) {
-      if (!highlightItemOnHover || (0, _isMouseWithinBounds.isMouseWithinBounds)(event) || event.pointerType === 'touch') {
-        return;
-      }
-      const popup = event.currentTarget;
-      highlightTimeout.start(0, () => {
-        store.set('activeIndex', null);
-        popup.focus({
-          preventScroll: true
-        });
-      });
-    },
     onScroll(event) {
       if (listElement) {
         return;
@@ -398,7 +369,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     ...(alignItemWithTriggerActive && {
       style: listElement ? {
         height: '100%'
-      } : _utils.LIST_FUNCTIONAL_STYLES
+      } : _utils2.LIST_FUNCTIONAL_STYLES
     })
   };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
@@ -426,7 +397,22 @@ function getMaxPopupHeight(popupStyles) {
   return maxHeightStyle.endsWith('px') ? parseFloat(maxHeightStyle) || Infinity : Infinity;
 }
 function getMaxScrollTop(scroller) {
-  return Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+  return (0, _scrollEdges.getMaxScrollOffset)(scroller.scrollHeight, scroller.clientHeight);
+}
+function getScale(element) {
+  // The platform API is async-capable, but the DOM platform returns a plain scale object.
+  return _floatingUiReact.platform.getScale(element);
+}
+function normalizeSize(size, axis, scale) {
+  return size / scale[axis];
+}
+function normalizeRect(rect, scale) {
+  return (0, _utils.rectToClientRect)({
+    x: normalizeSize(rect.x, 'x', scale),
+    y: normalizeSize(rect.y, 'y', scale),
+    width: normalizeSize(rect.width, 'x', scale),
+    height: normalizeSize(rect.height, 'y', scale)
+  });
 }
 const TRANSFORM_STYLE_RESETS = [['transform', 'none'], ['scale', '1'], ['translate', '0 0']];
 function unsetTransformStyles(popupElement) {

package/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/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,12 +9,24 @@ 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

package/select/positioner/SelectPositioner.js

@@ -9,23 +9,21 @@ exports.SelectPositioner = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _inertValue = require("@base-ui/utils/inertValue");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useScrollLock = require("@base-ui/utils/useScrollLock");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _store = require("@base-ui/utils/store");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _CompositeList = require("../../composite/list/CompositeList");
-var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
 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");
 var _reasons = require("../../utils/reasons");
 var _itemEquality = require("../../utils/itemEquality");
+var _usePositioner = require("../../utils/usePositioner");
+var _useAnchoredPopupScrollLock = require("../../utils/useAnchoredPopupScrollLock");
 var _jsxRuntime = require("react/jsx-runtime");
 const FIXED = {
   position: 'fixed'
@@ -54,6 +52,7 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
     disableAnchorTracking,
     alignItemWithTrigger = true,
     collisionAvoidance = _constants.DROPDOWN_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -95,7 +94,7 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
     }
   }, [store, mounted]);
   React.useImperativeHandle(alignItemWithTriggerActiveRef, () => alignItemWithTriggerActive);
-  (0, _useScrollLock.useScrollLock)((alignItemWithTriggerActive || modal) && open && openMethod !== 'touch', triggerElement);
+  (0, _useAnchoredPopupScrollLock.useAnchoredPopupScrollLock)((alignItemWithTriggerActive || modal) && open, openMethod === 'touch', positionerElement, triggerElement);
   const positioning = (0, _useAnchorPositioning.useAnchorPositioning)({
     anchor,
     floatingRootContext,
@@ -115,20 +114,6 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
   });
   const renderedSide = alignItemWithTriggerActive ? 'none' : positioning.side;
   const positionerStyles = alignItemWithTriggerActive ? FIXED : positioning.positionerStyles;
-  const defaultProps = React.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, mounted, positionerStyles]);
   const state = {
     open,
     side: renderedSide,
@@ -138,11 +123,13 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
   const setPositionerElement = (0, _useStableCallback.useStableCallback)(element => {
     store.set('positionerElement', element);
   });
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: [forwardedRef, setPositionerElement],
-    state,
-    stateAttributesMapping: _popupStateMapping.popupStateMapping,
-    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps]
+  const element = (0, _usePositioner.usePositioner)(componentProps, state, {
+    styles: positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   const prevMapSizeRef = React.useRef(0);
   const onMapChange = (0, _useStableCallback.useStableCallback)(map => {

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