@base-ui/react 1.2.0 → 1.4.0

package/esm/select/popup/SelectPopup.js

@@ -1,16 +1,15 @@
 'use client';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { useTimeout } from '@base-ui/utils/useTimeout';
+import { rectToClientRect } from '@floating-ui/utils';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { isWebKit } from '@base-ui/utils/detectBrowser';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
-import { isMouseWithinBounds } from '@base-ui/utils/isMouseWithinBounds';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStore } from '@base-ui/utils/store';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
-import { FloatingFocusManager } from "../../floating-ui-react/index.js";
+import { FloatingFocusManager, platform as floatingPlatform } from "../../floating-ui-react/index.js";
 import { useSelectFloatingContext, useSelectRootContext } from "../root/SelectRootContext.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
@@ -26,9 +25,10 @@ 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 { getMaxScrollOffset, SCROLL_EDGE_TOLERANCE_PX } from "../../utils/scrollEdges.js";
 import { useCSPContext } from "../../csp-provider/CSPContext.js";
+import { useDirection } from "../../direction-provider/DirectionContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SCROLL_EPS_PX = 1;
 const stateAttributesMapping = {
   ...popupStateMapping,
   ...transitionStatusMapping
@@ -44,6 +44,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
   const {
     render,
     className,
+    style,
     finalFocus,
     ...elementProps
   } = componentProps;
@@ -58,23 +59,25 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     multiple,
     handleScrollArrowVisibility,
     scrollHandlerRef,
+    listRef,
     highlightItemOnHover
   } = useSelectRootContext();
   const {
     side,
     align,
     alignItemWithTriggerActive,
+    isPositioned,
     setControlledAlignItemWithTrigger,
     scrollDownArrowRef,
     scrollUpArrowRef
   } = useSelectPositionerContext();
   const insideToolbar = useToolbarRootContext(true) != null;
   const floatingRootContext = useSelectFloatingContext();
+  const direction = useDirection();
   const {
     nonce,
     disableStyleElements
   } = useCSPContext();
-  const highlightTimeout = useTimeout();
   const id = useStore(store, selectors.id);
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
@@ -83,9 +86,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
   const triggerElement = useStore(store, selectors.triggerElement);
   const positionerElement = useStore(store, selectors.positionerElement);
   const listElement = useStore(store, 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 = useAnimationFrame();
@@ -99,7 +100,12 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     }
     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 = ownerDocument(positionerElement);
     const positionerStyles = getComputedStyle(positionerElement);
     const marginTop = parseFloat(positionerStyles.marginTop);
@@ -122,42 +128,29 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
         setHeight(currentHeight + heightDelta);
       }
       scroller.scrollTop = targetScrollTop;
-      if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EPS_PX) {
+      if (maxAvailableHeight - (currentHeight + heightDelta) <= 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 <= SCROLL_EDGE_TOLERANCE_PX) {
+      handleSmallDiff(diff, isTopPositioned ? maxScrollTop : 0);
+      return;
+    }
+    if (maxAvailableHeight - nextHeight > 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);
@@ -170,11 +163,11 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
       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) {
+      if (Math.abs(scroller.scrollTop - target) > SCROLL_EDGE_TOLERANCE_PX) {
         scroller.scrollTop = target;
       }
     }
-    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EPS_PX) {
+    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EDGE_TOLERANCE_PX) {
       reachedMaxHeightRef.current = true;
     }
     handleScrollArrowVisibility();
@@ -217,13 +210,15 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     }
     initialPlacedRef.current = false;
     reachedMaxHeightRef.current = false;
-    initialHeightRef.current = 0;
-    maxHeightRef.current = 0;
     clearStyles(positionerElement, originalPositionerStylesRef.current);
   }, [open, alignItemWithTriggerActive, positionerElement, popupRef]);
   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) {
@@ -233,113 +228,104 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
       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 = 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);
+    // 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 = ownerDocument(triggerElement);
+      const win = 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 = `${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 - 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 && 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();
+      // 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) + 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 && isWebKit;
+      if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
+        initialPlacedRef.current = true;
+        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 = 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;
@@ -348,10 +334,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     function handleResize(event) {
       setOpen(false, createChangeEventDetails(REASONS.windowResize, event));
     }
-    win.addEventListener('resize', handleResize);
-    return () => {
-      win.removeEventListener('resize', handleResize);
-    };
+    return addEventListener(win, 'resize', handleResize);
   }, [setOpen, alignItemWithTriggerActive, positionerElement, open]);
   const defaultProps = {
     ...(listElement ? {
@@ -371,18 +354,6 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     onMouseMove() {
       keyboardActiveRef.current = false;
     },
-    onPointerLeave(event) {
-      if (!highlightItemOnHover || 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;
@@ -420,7 +391,22 @@ function getMaxPopupHeight(popupStyles) {
   return maxHeightStyle.endsWith('px') ? parseFloat(maxHeightStyle) || Infinity : Infinity;
 }
 function getMaxScrollTop(scroller) {
-  return Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+  return getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
+}
+function getScale(element) {
+  // The platform API is async-capable, but the DOM platform returns a plain scale object.
+  return floatingPlatform.getScale(element);
+}
+function normalizeSize(size, axis, scale) {
+  return size / scale[axis];
+}
+function normalizeRect(rect, scale) {
+  return 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/esm/select/portal/SelectPortal.d.ts

@@ -8,10 +8,9 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 export declare const SelectPortal: React.ForwardRefExoticComponent<Omit<SelectPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SelectPortalState {}
+export interface SelectPortalProps extends FloatingPortal.Props<SelectPortalState> {}
 export declare namespace SelectPortal {
-  interface State {}
-}
-export interface SelectPortalProps extends FloatingPortal.Props<SelectPortal.State> {}
-export declare namespace SelectPortal {
+  type State = SelectPortalState;
   type Props = SelectPortalProps;
 }

package/esm/select/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/esm/select/positioner/SelectPositioner.js

@@ -3,23 +3,21 @@
 import * as React from 'react';
 import { inertValue } from '@base-ui/utils/inertValue';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useScrollLock } from '@base-ui/utils/useScrollLock';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext, useSelectFloatingContext } from "../root/SelectRootContext.js";
 import { CompositeList } from "../../composite/list/CompositeList.js";
-import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
 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, selectedValueIncludes } from "../../utils/itemEquality.js";
+import { usePositioner } from "../../utils/usePositioner.js";
+import { useAnchoredPopupScrollLock } from "../../utils/useAnchoredPopupScrollLock.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FIXED = {
   position: 'fixed'
@@ -48,6 +46,7 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
     disableAnchorTracking,
     alignItemWithTrigger = true,
     collisionAvoidance = DROPDOWN_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -89,7 +88,7 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
     }
   }, [store, mounted]);
   React.useImperativeHandle(alignItemWithTriggerActiveRef, () => alignItemWithTriggerActive);
-  useScrollLock((alignItemWithTriggerActive || modal) && open && openMethod !== 'touch', triggerElement);
+  useAnchoredPopupScrollLock((alignItemWithTriggerActive || modal) && open, openMethod === 'touch', positionerElement, triggerElement);
   const positioning = useAnchorPositioning({
     anchor,
     floatingRootContext,
@@ -109,20 +108,6 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
   });
   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,
@@ -132,11 +117,13 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
   const setPositionerElement = useStableCallback(element => {
     store.set('positionerElement', element);
   });
-  const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, setPositionerElement],
-    state,
-    stateAttributesMapping: popupStateMapping,
-    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
+  const element = usePositioner(componentProps, state, {
+    styles: positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   const prevMapSizeRef = React.useRef(0);
   const onMapChange = useStableCallback(map => {

package/esm/select/positioner/SelectPositionerContext.d.ts

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

package/esm/select/root/SelectRoot.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
+import { type Group } from "../../utils/resolveValueLabel.js";
 /**
  * Groups all parts of the select.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
@@ -19,6 +20,11 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the hidden input.
+   * Useful when the select is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * Provides a hint to the browser for autofill.
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
@@ -101,10 +107,10 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    * <Select.Root items={items} />
    * ```
    */
-  items?: (Record<string, React.ReactNode> | ReadonlyArray<{
+  items?: Record<string, React.ReactNode> | ReadonlyArray<{
     label: React.ReactNode;
     value: any;
-  }>) | undefined;
+  }> | ReadonlyArray<Group<any>> | undefined;
   /**
    * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
@@ -121,15 +127,15 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    */
   isItemEqualToValue?: ((itemValue: Value, value: Value) => boolean) | undefined;
   /**
-   * The uncontrolled value of the select when it’s initially rendered.
+   * The uncontrolled value of the select when it's initially rendered.
    *
    * To render a controlled select, use the `value` prop instead.
    */
-  defaultValue?: (SelectValueType<Value, Multiple> | null) | undefined;
+  defaultValue?: SelectValueType<Value, Multiple> | null | undefined;
   /**
    * The value of the select. Use when controlled.
    */
-  value?: (SelectValueType<Value, Multiple> | null) | undefined;
+  value?: SelectValueType<Value, Multiple> | null | undefined;
   /**
    * Event handler called when the value of the select changes.
    */