@base-ui/react 1.6.0 → 1.7.0

package/select/popup/SelectPopup.js

@@ -29,7 +29,7 @@ var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetail
 var _reasons = require("../../internals/reasons");
 var _ToolbarRootContext = require("../../toolbar/root/ToolbarRootContext");
 var _composite = require("../../internals/composite/composite");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _getDisabledMountTransitionStyles = require("../../internals/getDisabledMountTransitionStyles");
 var _clamp = require("../../internals/clamp");
 var _scrollEdges = require("../../utils/scrollEdges");
 var _CSPContext = require("../../internals/csp-context/CSPContext");
@@ -66,7 +66,8 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     handleScrollArrowVisibility,
     scrollHandlerRef,
     listRef,
-    highlightItemOnHover
+    highlightItemOnHover,
+    floatingContext: floatingRootContext
   } = (0, _SelectRootContext.useSelectRootContext)();
   const {
     side,
@@ -76,7 +77,6 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     setControlledAlignItemWithTrigger
   } = (0, _SelectPositionerContext.useSelectPositionerContext)();
   const insideToolbar = (0, _ToolbarRootContext.useToolbarRootContext)(true) != null;
-  const floatingRootContext = (0, _SelectRootContext.useSelectFloatingContext)();
   const direction = (0, _DirectionContext.useDirection)();
   const {
     nonce,
@@ -99,14 +99,10 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     if (!positionerElement || !popupRef.current || !initialPlacedRef.current) {
       return;
     }
-    if (reachedMaxHeightRef.current || !alignItemWithTriggerActive) {
-      handleScrollArrowVisibility();
-      return;
-    }
     const isTopPositioned = positionerElement.style.top === '0px';
     const isBottomPositioned = positionerElement.style.bottom === '0px';
-    if (!isTopPositioned && !isBottomPositioned) {
-      handleScrollArrowVisibility();
+    if (reachedMaxHeightRef.current || !alignItemWithTriggerActive || !isTopPositioned && !isBottomPositioned) {
+      handleScrollArrowVisibility(scroller);
       return;
     }
     const scale = getScale(positionerElement);
@@ -120,63 +116,50 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     const maxAvailableHeight = Math.min(doc.documentElement.clientHeight - marginTop - marginBottom, maxPopupHeight);
     const scrollTop = scroller.scrollTop;
     const maxScrollTop = getMaxScrollTop(scroller);
-    let nextPositionerHeight = 0;
+
+    // `Infinity` requests a scroll to the recomputed maximum offset.
     let nextScrollTop = null;
-    let setReachedMax = false;
-    let scrollToMax = false;
     const setHeight = height => {
       positionerElement.style.height = `${height}px`;
     };
-    const handleSmallDiff = (diff, targetScrollTop) => {
+    const diff = isTopPositioned ? maxScrollTop - scrollTop : scrollTop;
+    const nextHeight = Math.min(currentHeight + diff, maxAvailableHeight);
+    if (diff <= _scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
       const heightDelta = (0, _clamp.clamp)(diff, 0, maxAvailableHeight - currentHeight);
       if (heightDelta > 0) {
         // Consume the remaining scroll in height.
         setHeight(currentHeight + heightDelta);
       }
-      scroller.scrollTop = targetScrollTop;
+      scroller.scrollTop = isTopPositioned ? maxScrollTop : 0;
       if (maxAvailableHeight - (currentHeight + heightDelta) <= _scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
         reachedMaxHeightRef.current = true;
       }
-      handleScrollArrowVisibility();
-    };
-    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);
+      handleScrollArrowVisibility(scroller);
       return;
     }
     if (maxAvailableHeight - nextHeight > _scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
-      if (isTopPositioned) {
-        scrollToMax = true;
-      } else {
-        nextScrollTop = 0;
-      }
-    } else {
-      setReachedMax = true;
-      if (isBottomPositioned && scrollTop < maxScrollTop) {
-        const overshoot = currentHeight + diff - maxAvailableHeight;
-        nextScrollTop = scrollTop - (diff - overshoot);
-      }
+      nextScrollTop = isTopPositioned ? Infinity : 0;
+    } else if (isBottomPositioned && scrollTop < maxScrollTop) {
+      const overshoot = currentHeight + diff - maxAvailableHeight;
+      nextScrollTop = scrollTop - (diff - overshoot);
     }
-    nextPositionerHeight = Math.ceil(nextPositionerHeight);
+    const nextPositionerHeight = Math.ceil(nextHeight);
     if (nextPositionerHeight !== 0) {
       setHeight(nextPositionerHeight);
     }
-    if (scrollToMax || nextScrollTop != null) {
+    if (nextScrollTop != null) {
       // Recompute bounds after resizing (clientHeight likely changed).
-      const nextMaxScrollTop = getMaxScrollTop(scroller);
-      const target = scrollToMax ? nextMaxScrollTop : (0, _clamp.clamp)(nextScrollTop, 0, nextMaxScrollTop);
+      const target = (0, _clamp.clamp)(nextScrollTop, 0, getMaxScrollTop(scroller));
 
       // Avoid adjustments that re-trigger scroll events forever.
       if (Math.abs(scroller.scrollTop - target) > _scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
         scroller.scrollTop = target;
       }
     }
-    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - _scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
+    if (nextPositionerHeight >= maxAvailableHeight - _scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
       reachedMaxHeightRef.current = true;
     }
-    handleScrollArrowVisibility();
+    handleScrollArrowVisibility(scroller);
   });
   React.useImperativeHandle(scrollHandlerRef, () => handleScroll, [handleScroll]);
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
@@ -227,17 +210,18 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     if (!open || !triggerElement || !positionerElement || !popupElement || alignItemWithTriggerActive && !isPositioned || store.state.transitionStatus === 'ending') {
       return;
     }
+    initialPlacedRef.current = true;
+    popupElement.style.removeProperty('--transform-origin');
     if (!alignItemWithTriggerActive) {
-      initialPlacedRef.current = true;
-      scrollArrowFrame.request(handleScrollArrowVisibility);
-      popupElement.style.removeProperty('--transform-origin');
+      // The wrapper supplies the scroller: the list owns scrolling once it has mounted, and
+      // this effect re-runs (cancelling the stale frame) when that happens.
+      scrollArrowFrame.request(() => handleScrollArrowVisibility(listElement || popupElement));
       return;
     }
 
     // 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 {
       let textElement = selectedItemTextRef.current;
       if (!textElement?.isConnected) {
@@ -306,7 +290,6 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
       // Safari doesn't position the popup correctly when pinch-zoomed.
       const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && _platform.platform.engine.webkit;
       if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
-        initialPlacedRef.current = true;
         (0, _utils2.clearStyles)(positionerElement, originalPositionerStylesRef.current);
         setControlledAlignItemWithTrigger(false);
         return;
@@ -325,18 +308,16 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
         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);
+        const clampedY = (0, _clamp.clamp)(popupHeight > 0 ? (textCenterY - popupTop) / popupHeight * 100 : 50, 0, 100);
         popupElement.style.setProperty('--transform-origin', `50% ${clampedY}%`);
       }
       if (initialHeight === viewportHeight || height >= maxPopupHeight) {
         reachedMaxHeightRef.current = true;
       }
-      handleScrollArrowVisibility();
+      handleScrollArrowVisibility(scroller);
       if (highlightItemOnHover && store.state.selectedIndex === null && store.state.activeIndex === null && listRef.current[0] != null) {
         store.set('activeIndex', 0);
       }
-      initialPlacedRef.current = true;
     } finally {
       restoreTransformStyles();
     }
@@ -375,15 +356,14 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
       style: listElement ? {
         height: '100%'
       } : _utils2.LIST_FUNCTIONAL_STYLES
-    })
+    }),
+    className: !listElement && alignItemWithTriggerActive ? _styles.styleDisableScrollbar.className : undefined
   };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, popupRef],
     state,
     stateAttributesMapping,
-    props: [popupProps, defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), {
-      className: !listElement && alignItemWithTriggerActive ? _styles.styleDisableScrollbar.className : undefined
-    }, elementProps]
+    props: [popupProps, defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [!disableStyleElements && _styles.styleDisableScrollbar.getElement(nonce), /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {
@@ -399,7 +379,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
 });
 if (process.env.NODE_ENV !== "production") SelectPopup.displayName = "SelectPopup";
 function getMaxPopupHeight(popupStyles) {
-  const maxHeightStyle = popupStyles.maxHeight || '';
+  const maxHeightStyle = popupStyles.maxHeight;
   return maxHeightStyle.endsWith('px') ? parseFloat(maxHeightStyle) || Infinity : Infinity;
 }
 function getMaxScrollTop(scroller) {

package/select/popup/SelectPopup.mjs

@@ -10,7 +10,7 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStore } from '@base-ui/utils/store';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { FloatingFocusManager, platform as floatingPlatform } from "../../floating-ui-react/index.mjs";
-import { useSelectFloatingContext, useSelectRootContext } from "../root/SelectRootContext.mjs";
+import { useSelectRootContext } from "../root/SelectRootContext.mjs";
 import { popupStateMapping } from "../../utils/popupStateMapping.mjs";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.mjs";
 import { styleDisableScrollbar } from "../../utils/styles.mjs";
@@ -23,7 +23,7 @@ import { createChangeEventDetails } from "../../internals/createBaseUIEventDetai
 import { REASONS } from "../../internals/reasons.mjs";
 import { useToolbarRootContext } from "../../toolbar/root/ToolbarRootContext.mjs";
 import { COMPOSITE_KEYS } from "../../internals/composite/composite.mjs";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.mjs";
+import { getDisabledMountTransitionStyles } from "../../internals/getDisabledMountTransitionStyles.mjs";
 import { clamp } from "../../internals/clamp.mjs";
 import { getMaxScrollOffset, SCROLL_EDGE_TOLERANCE_PX } from "../../utils/scrollEdges.mjs";
 import { useCSPContext } from "../../internals/csp-context/CSPContext.mjs";
@@ -60,7 +60,8 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     handleScrollArrowVisibility,
     scrollHandlerRef,
     listRef,
-    highlightItemOnHover
+    highlightItemOnHover,
+    floatingContext: floatingRootContext
   } = useSelectRootContext();
   const {
     side,
@@ -70,7 +71,6 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     setControlledAlignItemWithTrigger
   } = useSelectPositionerContext();
   const insideToolbar = useToolbarRootContext(true) != null;
-  const floatingRootContext = useSelectFloatingContext();
   const direction = useDirection();
   const {
     nonce,
@@ -93,14 +93,10 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     if (!positionerElement || !popupRef.current || !initialPlacedRef.current) {
       return;
     }
-    if (reachedMaxHeightRef.current || !alignItemWithTriggerActive) {
-      handleScrollArrowVisibility();
-      return;
-    }
     const isTopPositioned = positionerElement.style.top === '0px';
     const isBottomPositioned = positionerElement.style.bottom === '0px';
-    if (!isTopPositioned && !isBottomPositioned) {
-      handleScrollArrowVisibility();
+    if (reachedMaxHeightRef.current || !alignItemWithTriggerActive || !isTopPositioned && !isBottomPositioned) {
+      handleScrollArrowVisibility(scroller);
       return;
     }
     const scale = getScale(positionerElement);
@@ -114,63 +110,50 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     const maxAvailableHeight = Math.min(doc.documentElement.clientHeight - marginTop - marginBottom, maxPopupHeight);
     const scrollTop = scroller.scrollTop;
     const maxScrollTop = getMaxScrollTop(scroller);
-    let nextPositionerHeight = 0;
+
+    // `Infinity` requests a scroll to the recomputed maximum offset.
     let nextScrollTop = null;
-    let setReachedMax = false;
-    let scrollToMax = false;
     const setHeight = height => {
       positionerElement.style.height = `${height}px`;
     };
-    const handleSmallDiff = (diff, targetScrollTop) => {
+    const diff = isTopPositioned ? maxScrollTop - scrollTop : scrollTop;
+    const nextHeight = Math.min(currentHeight + diff, maxAvailableHeight);
+    if (diff <= SCROLL_EDGE_TOLERANCE_PX) {
       const heightDelta = clamp(diff, 0, maxAvailableHeight - currentHeight);
       if (heightDelta > 0) {
         // Consume the remaining scroll in height.
         setHeight(currentHeight + heightDelta);
       }
-      scroller.scrollTop = targetScrollTop;
+      scroller.scrollTop = isTopPositioned ? maxScrollTop : 0;
       if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EDGE_TOLERANCE_PX) {
         reachedMaxHeightRef.current = true;
       }
-      handleScrollArrowVisibility();
-    };
-    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);
+      handleScrollArrowVisibility(scroller);
       return;
     }
     if (maxAvailableHeight - nextHeight > SCROLL_EDGE_TOLERANCE_PX) {
-      if (isTopPositioned) {
-        scrollToMax = true;
-      } else {
-        nextScrollTop = 0;
-      }
-    } else {
-      setReachedMax = true;
-      if (isBottomPositioned && scrollTop < maxScrollTop) {
-        const overshoot = currentHeight + diff - maxAvailableHeight;
-        nextScrollTop = scrollTop - (diff - overshoot);
-      }
+      nextScrollTop = isTopPositioned ? Infinity : 0;
+    } else if (isBottomPositioned && scrollTop < maxScrollTop) {
+      const overshoot = currentHeight + diff - maxAvailableHeight;
+      nextScrollTop = scrollTop - (diff - overshoot);
     }
-    nextPositionerHeight = Math.ceil(nextPositionerHeight);
+    const nextPositionerHeight = Math.ceil(nextHeight);
     if (nextPositionerHeight !== 0) {
       setHeight(nextPositionerHeight);
     }
-    if (scrollToMax || nextScrollTop != null) {
+    if (nextScrollTop != null) {
       // Recompute bounds after resizing (clientHeight likely changed).
-      const nextMaxScrollTop = getMaxScrollTop(scroller);
-      const target = scrollToMax ? nextMaxScrollTop : clamp(nextScrollTop, 0, nextMaxScrollTop);
+      const target = clamp(nextScrollTop, 0, getMaxScrollTop(scroller));
 
       // Avoid adjustments that re-trigger scroll events forever.
       if (Math.abs(scroller.scrollTop - target) > SCROLL_EDGE_TOLERANCE_PX) {
         scroller.scrollTop = target;
       }
     }
-    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EDGE_TOLERANCE_PX) {
+    if (nextPositionerHeight >= maxAvailableHeight - SCROLL_EDGE_TOLERANCE_PX) {
       reachedMaxHeightRef.current = true;
     }
-    handleScrollArrowVisibility();
+    handleScrollArrowVisibility(scroller);
   });
   React.useImperativeHandle(scrollHandlerRef, () => handleScroll, [handleScroll]);
   useOpenChangeComplete({
@@ -221,17 +204,18 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     if (!open || !triggerElement || !positionerElement || !popupElement || alignItemWithTriggerActive && !isPositioned || store.state.transitionStatus === 'ending') {
       return;
     }
+    initialPlacedRef.current = true;
+    popupElement.style.removeProperty('--transform-origin');
     if (!alignItemWithTriggerActive) {
-      initialPlacedRef.current = true;
-      scrollArrowFrame.request(handleScrollArrowVisibility);
-      popupElement.style.removeProperty('--transform-origin');
+      // The wrapper supplies the scroller: the list owns scrolling once it has mounted, and
+      // this effect re-runs (cancelling the stale frame) when that happens.
+      scrollArrowFrame.request(() => handleScrollArrowVisibility(listElement || popupElement));
       return;
     }
 
     // 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 {
       let textElement = selectedItemTextRef.current;
       if (!textElement?.isConnected) {
@@ -300,7 +284,6 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
       // Safari doesn't position the popup correctly when pinch-zoomed.
       const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && platform.engine.webkit;
       if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
-        initialPlacedRef.current = true;
         clearStyles(positionerElement, originalPositionerStylesRef.current);
         setControlledAlignItemWithTrigger(false);
         return;
@@ -319,18 +302,16 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
         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);
+        const clampedY = clamp(popupHeight > 0 ? (textCenterY - popupTop) / popupHeight * 100 : 50, 0, 100);
         popupElement.style.setProperty('--transform-origin', `50% ${clampedY}%`);
       }
       if (initialHeight === viewportHeight || height >= maxPopupHeight) {
         reachedMaxHeightRef.current = true;
       }
-      handleScrollArrowVisibility();
+      handleScrollArrowVisibility(scroller);
       if (highlightItemOnHover && store.state.selectedIndex === null && store.state.activeIndex === null && listRef.current[0] != null) {
         store.set('activeIndex', 0);
       }
-      initialPlacedRef.current = true;
     } finally {
       restoreTransformStyles();
     }
@@ -369,15 +350,14 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
       style: listElement ? {
         height: '100%'
       } : LIST_FUNCTIONAL_STYLES
-    })
+    }),
+    className: !listElement && alignItemWithTriggerActive ? styleDisableScrollbar.className : undefined
   };
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, popupRef],
     state,
     stateAttributesMapping,
-    props: [popupProps, defaultProps, getDisabledMountTransitionStyles(transitionStatus), {
-      className: !listElement && alignItemWithTriggerActive ? styleDisableScrollbar.className : undefined
-    }, elementProps]
+    props: [popupProps, defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
   });
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), /*#__PURE__*/_jsx(FloatingFocusManager, {
@@ -393,7 +373,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
 });
 if (process.env.NODE_ENV !== "production") SelectPopup.displayName = "SelectPopup";
 function getMaxPopupHeight(popupStyles) {
-  const maxHeightStyle = popupStyles.maxHeight || '';
+  const maxHeightStyle = popupStyles.maxHeight;
   return maxHeightStyle.endsWith('px') ? parseFloat(maxHeightStyle) || Infinity : Infinity;
 }
 function getMaxScrollTop(scroller) {

package/select/popup/SelectPopupDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum SelectPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the select is animating in.
+   * Present when the select begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/select/popup/SelectPopupDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum SelectPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the select is animating in.
+   * Present when the select begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/select/popup/SelectPopupDataAttributes.js

@@ -15,7 +15,7 @@ let SelectPopupDataAttributes = exports.SelectPopupDataAttributes = function (Se
    */
   SelectPopupDataAttributes[SelectPopupDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the select is animating in.
+   * Present when the select begins animating in.
    */
   SelectPopupDataAttributes[SelectPopupDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/select/popup/SelectPopupDataAttributes.mjs

@@ -9,7 +9,7 @@ export let SelectPopupDataAttributes = function (SelectPopupDataAttributes) {
    */
   SelectPopupDataAttributes[SelectPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the select is animating in.
+   * Present when the select begins animating in.
    */
   SelectPopupDataAttributes[SelectPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/select/portal/SelectPortal.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FloatingPortal } from "../../floating-ui-react/index.mjs";
+import { type BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -9,7 +9,12 @@ import { FloatingPortal } from "../../floating-ui-react/index.mjs";
  */
 export declare const SelectPortal: React.ForwardRefExoticComponent<Omit<SelectPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectPortalState {}
-export interface SelectPortalProps extends FloatingPortal.Props<SelectPortalState> {}
+export interface SelectPortalProps extends BaseUIComponentProps<'div', SelectPortalState> {
+  /**
+   * A parent element to render the portal element into.
+   */
+  container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
+}
 export declare namespace SelectPortal {
   type State = SelectPortalState;
   type Props = SelectPortalProps;

package/select/portal/SelectPortal.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FloatingPortal } from "../../floating-ui-react/index.js";
+import { type BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -9,7 +9,12 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  */
 export declare const SelectPortal: React.ForwardRefExoticComponent<Omit<SelectPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectPortalState {}
-export interface SelectPortalProps extends FloatingPortal.Props<SelectPortalState> {}
+export interface SelectPortalProps extends BaseUIComponentProps<'div', SelectPortalState> {
+  /**
+   * A parent element to render the portal element into.
+   */
+  container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
+}
 export declare namespace SelectPortal {
   type State = SelectPortalState;
   type Props = SelectPortalProps;

package/select/portal/SelectPortal.js

@@ -9,7 +9,6 @@ exports.SelectPortal = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
 var _floatingUiReact = require("../../floating-ui-react");
-var _SelectPortalContext = require("./SelectPortalContext");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _store2 = require("../store");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -30,12 +29,9 @@ const SelectPortal = exports.SelectPortal = /*#__PURE__*/React.forwardRef(functi
   if (!shouldRender) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectPortalContext.SelectPortalContext.Provider, {
-    value: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingPortal, {
-      ref: forwardedRef,
-      ...portalProps
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingPortal, {
+    ref: forwardedRef,
+    ...portalProps
   });
 });
 if (process.env.NODE_ENV !== "production") SelectPortal.displayName = "SelectPortal";

package/select/portal/SelectPortal.mjs

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
 import { FloatingPortal } from "../../floating-ui-react/index.mjs";
-import { SelectPortalContext } from "./SelectPortalContext.mjs";
 import { useSelectRootContext } from "../root/SelectRootContext.mjs";
 import { selectors } from "../store.mjs";
 
@@ -25,12 +24,9 @@ export const SelectPortal = /*#__PURE__*/React.forwardRef(function SelectPortal(
   if (!shouldRender) {
     return null;
   }
-  return /*#__PURE__*/_jsx(SelectPortalContext.Provider, {
-    value: true,
-    children: /*#__PURE__*/_jsx(FloatingPortal, {
-      ref: forwardedRef,
-      ...portalProps
-    })
+  return /*#__PURE__*/_jsx(FloatingPortal, {
+    ref: forwardedRef,
+    ...portalProps
   });
 });
 if (process.env.NODE_ENV !== "production") SelectPortal.displayName = "SelectPortal";

package/select/positioner/SelectPositioner.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
-import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.mjs";
+import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../internals/useAnchorPositioning.mjs";
 /**
  * Positions the select popup.
  * Renders a `<div>` element.

package/select/positioner/SelectPositioner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.js";
-import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
+import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../internals/useAnchorPositioning.js";
 /**
  * Positions the select popup.
  * Renders a `<div>` element.