@base-ui/react 1.2.0 → 1.3.0

package/scroll-area/viewport/ScrollAreaViewport.js

@@ -27,6 +27,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Scroll Area components are mounted.
 let scrollAreaOverflowVarsRegistered = false;
+const HAS_RESIZE_OBSERVER = typeof ResizeObserver !== 'undefined';
 
 /**
  * Removes inheritance of the scroll area overflow CSS variables, which
@@ -85,6 +86,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     rootId,
     setHiddenState,
     hiddenState,
+    setHasMeasuredScrollbar,
     handleScroll,
     setHovering,
     setOverflowEdges,
@@ -95,6 +97,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
   const direction = (0, _DirectionContext.useDirection)();
   const programmaticScrollRef = React.useRef(true);
+  const lastMeasuredViewportMetricsRef = React.useRef([NaN, NaN, NaN, NaN]);
   const scrollEndTimeout = (0, _useTimeout.useTimeout)();
   const waitForAnimationsTimeout = (0, _useTimeout.useTimeout)();
   const computeThumbPosition = (0, _useStableCallback.useStableCallback)(() => {
@@ -113,11 +116,21 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     const viewportWidth = viewportEl.clientWidth;
     const scrollTop = viewportEl.scrollTop;
     const scrollLeft = viewportEl.scrollLeft;
+    const lastMeasuredViewportMetrics = lastMeasuredViewportMetricsRef.current;
+    const isFirstMeasurement = Number.isNaN(lastMeasuredViewportMetrics[0]);
+    lastMeasuredViewportMetrics[0] = viewportHeight;
+    lastMeasuredViewportMetrics[1] = scrollableContentHeight;
+    lastMeasuredViewportMetrics[2] = viewportWidth;
+    lastMeasuredViewportMetrics[3] = scrollableContentWidth;
+    if (isFirstMeasurement) {
+      setHasMeasuredScrollbar(true);
+    }
     if (scrollableContentHeight === 0 || scrollableContentWidth === 0) {
       return;
     }
-    const scrollbarYHidden = viewportHeight >= scrollableContentHeight;
-    const scrollbarXHidden = viewportWidth >= scrollableContentWidth;
+    const nextHiddenState = getHiddenState(viewportEl);
+    const scrollbarYHidden = nextHiddenState.y;
+    const scrollbarXHidden = nextHiddenState.x;
     const ratioX = viewportWidth / scrollableContentWidth;
     const ratioY = viewportHeight / scrollableContentHeight;
     const maxScrollLeft = Math.max(0, scrollableContentWidth - viewportWidth);
@@ -211,17 +224,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
         });
       }
     }
-    setHiddenState(prevState => {
-      const cornerHidden = scrollbarYHidden || scrollbarXHidden;
-      if (prevState.y === scrollbarYHidden && prevState.x === scrollbarXHidden && prevState.corner === cornerHidden) {
-        return prevState;
-      }
-      return {
-        y: scrollbarYHidden,
-        x: scrollbarXHidden,
-        corner: cornerHidden
-      };
-    });
+    setHiddenState(prevState => mergeHiddenState(prevState, nextHiddenState));
     const nextOverflowEdges = {
       xStart: !scrollbarXHidden && scrollLeftFromStart > overflowEdgeThreshold.xStart,
       xEnd: !scrollbarXHidden && scrollLeftFromEnd > overflowEdgeThreshold.xEnd,
@@ -240,17 +243,15 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       return undefined;
     }
     removeCSSVariableInheritance();
-    let hasInitialized = false;
+    if (HAS_RESIZE_OBSERVER) {
+      return undefined;
+    }
     return (0, _onVisible.onVisible)(viewportRef.current, () => {
-      if (!hasInitialized) {
-        hasInitialized = true;
-        return;
-      }
       computeThumbPosition();
     });
   }, [computeThumbPosition, viewportRef]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    // Wait for scrollbar-related refs to be set
+    // Wait for scrollbar and thumb refs after hidden-state toggles, and refresh math on direction flips.
     queueMicrotask(computeThumbPosition);
   }, [computeThumbPosition, hiddenState, direction]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
@@ -262,16 +263,20 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
   }, [viewportRef, setHovering]);
   React.useEffect(() => {
     const viewport = viewportRef.current;
-    if (typeof ResizeObserver === 'undefined' || !viewport) {
+    if (!HAS_RESIZE_OBSERVER || !viewport) {
       return undefined;
     }
     let hasInitialized = false;
     const ro = new ResizeObserver(() => {
-      // ResizeObserver fires once upon observing, so we skip the initial call
-      // to avoid double-calculating the thumb position on mount.
+      // Avoid duplicate mount-time recompute when observer data matches what the mount
+      // scheduling pass already measured. If dimensions changed before the first observer
+      // delivery, keep the recompute so overflow transitions stay in sync.
       if (!hasInitialized) {
         hasInitialized = true;
-        return;
+        const lastMeasuredViewportMetrics = lastMeasuredViewportMetricsRef.current;
+        if (lastMeasuredViewportMetrics[0] === viewport.clientHeight && lastMeasuredViewportMetrics[1] === viewport.scrollHeight && lastMeasuredViewportMetrics[2] === viewport.clientWidth && lastMeasuredViewportMetrics[3] === viewport.scrollWidth) {
+          return;
+        }
       }
       computeThumbPosition();
     });
@@ -307,9 +312,8 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       'data-id': `${rootId}-viewport`
     }),
     // https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable/
-    ...((!hiddenState.x || !hiddenState.y) && {
-      tabIndex: 0
-    }),
+    // Keep non-scrollable viewports out of tab order.
+    tabIndex: hiddenState.x && hiddenState.y ? -1 : 0,
     className: _styles.styleDisableScrollbar.className,
     style: {
       overflow: 'scroll'
@@ -366,4 +370,19 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     children: element
   });
 });
-if (process.env.NODE_ENV !== "production") ScrollAreaViewport.displayName = "ScrollAreaViewport";
+if (process.env.NODE_ENV !== "production") ScrollAreaViewport.displayName = "ScrollAreaViewport";
+function getHiddenState(viewport) {
+  const y = viewport.clientHeight >= viewport.scrollHeight;
+  const x = viewport.clientWidth >= viewport.scrollWidth;
+  return {
+    y,
+    x,
+    corner: y || x
+  };
+}
+function mergeHiddenState(prevState, nextState) {
+  if (prevState.y === nextState.y && prevState.x === nextState.x && prevState.corner === nextState.corner) {
+    return prevState;
+  }
+  return nextState;
+}

package/select/arrow/SelectArrow.d.ts

@@ -13,11 +13,20 @@ export interface SelectArrowState {
    * Whether the select popup is currently 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 arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface SelectArrowProps extends BaseUIComponentProps<'div', SelectArrow.State> {}
+export interface SelectArrowProps extends BaseUIComponentProps<'div', SelectArrowState> {}
 export declare namespace SelectArrow {
   type State = SelectArrowState;
   type Props = SelectArrowProps;

package/select/backdrop/SelectBackdrop.d.ts

@@ -9,10 +9,16 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  */
 export declare const SelectBackdrop: React.ForwardRefExoticComponent<Omit<SelectBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectBackdropState {
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface SelectBackdropProps extends BaseUIComponentProps<'div', SelectBackdrop.State> {}
+export interface SelectBackdropProps extends BaseUIComponentProps<'div', SelectBackdropState> {}
 export declare namespace SelectBackdrop {
   type State = SelectBackdropState;
   type Props = SelectBackdropProps;

package/select/group/SelectGroup.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectGroupState {}
-export interface SelectGroupProps extends BaseUIComponentProps<'div', SelectGroup.State> {}
+export interface SelectGroupProps extends BaseUIComponentProps<'div', SelectGroupState> {}
 export declare namespace SelectGroup {
   type State = SelectGroupState;
   type Props = SelectGroupProps;

package/select/group-label/SelectGroupLabel.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectGroupLabelState {}
-export interface SelectGroupLabelProps extends BaseUIComponentProps<'div', SelectGroupLabel.State> {}
+export interface SelectGroupLabelProps extends BaseUIComponentProps<'div', SelectGroupLabelState> {}
 export declare namespace SelectGroupLabel {
   type State = SelectGroupLabelState;
   type Props = SelectGroupLabelProps;

package/select/icon/SelectIcon.d.ts

@@ -13,7 +13,7 @@ export interface SelectIconState {
    */
   open: boolean;
 }
-export interface SelectIconProps extends BaseUIComponentProps<'span', SelectIcon.State> {}
+export interface SelectIconProps extends BaseUIComponentProps<'span', SelectIconState> {}
 export declare namespace SelectIcon {
   type State = SelectIconState;
   type Props = SelectIconProps;

package/select/index.d.ts

@@ -1,5 +1,6 @@
 export * as Select from "./index.parts.js";
 export type * from "./root/SelectRoot.js";
+export type * from "./label/SelectLabel.js";
 export type * from "./trigger/SelectTrigger.js";
 export type * from "./value/SelectValue.js";
 export type * from "./icon/SelectIcon.js";

package/select/index.parts.d.ts

@@ -1,4 +1,5 @@
 export { SelectRoot as Root } from "./root/SelectRoot.js";
+export { SelectLabel as Label } from "./label/SelectLabel.js";
 export { SelectTrigger as Trigger } from "./trigger/SelectTrigger.js";
 export { SelectValue as Value } from "./value/SelectValue.js";
 export { SelectIcon as Icon } from "./icon/SelectIcon.js";

package/select/index.parts.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "ItemText", {
     return _SelectItemText.SelectItemText;
   }
 });
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function () {
+    return _SelectLabel.SelectLabel;
+  }
+});
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function () {
@@ -112,6 +118,7 @@ Object.defineProperty(exports, "Value", {
   }
 });
 var _SelectRoot = require("./root/SelectRoot");
+var _SelectLabel = require("./label/SelectLabel");
 var _SelectTrigger = require("./trigger/SelectTrigger");
 var _SelectValue = require("./value/SelectValue");
 var _SelectIcon = require("./icon/SelectIcon");

package/select/item/SelectItem.d.ts

@@ -21,7 +21,7 @@ export interface SelectItemState {
    */
   highlighted: boolean;
 }
-export interface SelectItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', SelectItem.State>, 'id'> {
+export interface SelectItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', SelectItemState>, 'id'> {
   children?: React.ReactNode;
   /**
    * A unique value that identifies this select item.

package/select/item/SelectItem.js

@@ -111,7 +111,8 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   } = (0, _useButton.useButton)({
     disabled,
     focusableWhenDisabled: true,
-    native: nativeButton
+    native: nativeButton,
+    composite: true
   });
   function commitSelection(event) {
     const selectedValue = store.state.value;
@@ -160,6 +161,9 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     onKeyDown(event) {
       lastKeyRef.current = event.key;
       store.set('activeIndex', index);
+      if (event.key === ' ' && typingRef.current) {
+        event.preventDefault();
+      }
     },
     onClick(event) {
       didPointerDownRef.current = false;
@@ -168,7 +172,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       if (event.type === 'keydown' && lastKeyRef.current === null) {
         return;
       }
-      if (disabled || lastKeyRef.current === ' ' && typingRef.current || pointerTypeRef.current !== 'touch' && !highlighted) {
+      if (disabled || event.type === 'keydown' && lastKeyRef.current === ' ' && typingRef.current || pointerTypeRef.current !== 'touch' && !highlighted) {
         return;
       }
       lastKeyRef.current = null;
@@ -181,10 +185,12 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       pointerTypeRef.current = event.pointerType;
       didPointerDownRef.current = true;
     },
-    onMouseUp(event) {
+    onMouseUp() {
       if (disabled) {
         return;
       }
+
+      // Regular click (pointerdown on this element) if didPointerDownRef is set, otherwise drag-to-select
       if (didPointerDownRef.current) {
         didPointerDownRef.current = false;
         return;
@@ -194,7 +200,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       if (disallowSelectedMouseUp || disallowUnselectedMouseUp || pointerTypeRef.current !== 'touch' && !highlighted) {
         return;
       }
-      commitSelection(event.nativeEvent);
+      itemRef.current?.click();
     }
   };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {

package/select/item-indicator/SelectItemIndicator.d.ts

@@ -9,12 +9,20 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  */
 export declare const SelectItemIndicator: React.ForwardRefExoticComponent<Omit<SelectItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface SelectItemIndicatorState {
+  /**
+   * Whether the item is selected.
+   */
   selected: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface SelectItemIndicatorProps extends BaseUIComponentProps<'span', SelectItemIndicator.State> {
+export interface SelectItemIndicatorProps extends BaseUIComponentProps<'span', SelectItemIndicatorState> {
   children?: React.ReactNode;
-  /** Whether to keep the HTML element in the DOM when the item is not selected. */
+  /**
+   * Whether to keep the HTML element in the DOM when the item is not selected.
+   */
   keepMounted?: boolean | undefined;
 }
 export declare namespace SelectItemIndicator {

package/select/item-indicator/SelectItemIndicatorDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum SelectItemIndicatorDataAttributes {
+  /**
+   * Present when the indicator is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the indicator is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/select/item-indicator/SelectItemIndicatorDataAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectItemIndicatorDataAttributes = void 0;
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let SelectItemIndicatorDataAttributes = exports.SelectItemIndicatorDataAttributes = function (SelectItemIndicatorDataAttributes) {
+  /**
+   * Present when the indicator is animating in.
+   */
+  SelectItemIndicatorDataAttributes[SelectItemIndicatorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the indicator is animating out.
+   */
+  SelectItemIndicatorDataAttributes[SelectItemIndicatorDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return SelectItemIndicatorDataAttributes;
+}({});

package/select/item-text/SelectItemText.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectItemText: React.NamedExoticComponent<Omit<SelectItemTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectItemTextState {}
-export interface SelectItemTextProps extends BaseUIComponentProps<'div', SelectItemText.State> {}
+export interface SelectItemTextProps extends BaseUIComponentProps<'div', SelectItemTextState> {}
 export declare namespace SelectItemText {
   type State = SelectItemTextState;
   type Props = SelectItemTextProps;

package/select/label/SelectLabel.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { FieldRoot } from "../../field/root/FieldRoot.js";
+/**
+ * An accessible label that is automatically associated with the select trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SelectLabelState = FieldRoot.State;
+export interface SelectLabelProps extends Omit<BaseUIComponentProps<'div', SelectLabel.State>, 'id'> {}
+export declare namespace SelectLabel {
+  type State = SelectLabelState;
+  type Props = SelectLabelProps;
+}

package/select/label/SelectLabel.js

@@ -0,0 +1,54 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectLabel = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _store = require("@base-ui/utils/store");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _constants = require("../../field/utils/constants");
+var _useLabel = require("../../labelable-provider/useLabel");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
+var _SelectRootContext = require("../root/SelectRootContext");
+var _store2 = require("../store");
+/**
+ * An accessible label that is automatically associated with the select trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectLabel = exports.SelectLabel = /*#__PURE__*/React.forwardRef(function SelectLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
+  const elementPropsWithoutId = elementProps;
+  delete elementPropsWithoutId.id;
+  const fieldRootContext = (0, _FieldRootContext.useFieldRootContext)();
+  const {
+    store
+  } = (0, _SelectRootContext.useSelectRootContext)();
+  const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
+  const rootId = (0, _store.useStore)(store, _store2.selectors.id);
+  const defaultLabelId = (0, _resolveAriaLabelledBy.getDefaultLabelId)(rootId);
+  const labelProps = (0, _useLabel.useLabel)({
+    id: defaultLabelId,
+    fallbackControlId: triggerElement?.id ?? rootId,
+    setLabelId(nextLabelId) {
+      store.set('labelId', nextLabelId);
+    }
+  });
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: _constants.fieldValidityMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectLabel.displayName = "SelectLabel";

package/select/list/SelectList.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 export declare const SelectList: React.ForwardRefExoticComponent<Omit<SelectListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SelectListProps extends BaseUIComponentProps<'div', SelectList.State> {}
+export interface SelectListProps extends BaseUIComponentProps<'div', SelectListState> {}
 export interface SelectListState {}
 export declare namespace SelectList {
   type Props = SelectListProps;

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectPopup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _utils = require("@floating-ui/utils");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
@@ -25,7 +26,7 @@ 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");
@@ -225,7 +226,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     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;
@@ -250,8 +251,9 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
         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 scale = getScale(triggerElement);
+        const triggerRect = normalizeRect(triggerElement.getBoundingClientRect(), scale);
+        const positionerRect = normalizeRect(positionerElement.getBoundingClientRect(), scale);
         const triggerX = triggerRect.left;
         const triggerHeight = triggerRect.height;
         const scroller = listElement || popupElement;
@@ -273,8 +275,8 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
         let offsetX = 0;
         let offsetY = 0;
         if (textElement && valueElement) {
-          const valueRect = valueElement.getBoundingClientRect();
-          textRect = textElement.getBoundingClientRect();
+          const valueRect = normalizeRect(valueElement.getBoundingClientRect(), scale);
+          textRect = normalizeRect(textElement.getBoundingClientRect(), scale);
           const valueLeftFromTriggerLeft = valueRect.left - triggerX;
           const textLeftFromPositionerLeft = textRect.left - positionerRect.left;
           const valueCenterFromPositionerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
@@ -295,21 +297,21 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
         positionerElement.style.marginTop = `${marginTop}px`;
         positionerElement.style.marginBottom = `${marginBottom}px`;
         popupElement.style.height = '100%';
-        const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
-        const isTopPositioned = scrollTop >= maxScrollTop;
+        const maxScrollTop = getMaxScrollTop(scroller);
+        const isTopPositioned = scrollTop >= maxScrollTop - SCROLL_EPS_PX;
         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);
+        const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || Math.ceil(height) + SCROLL_EPS_PX < Math.min(scrollHeight, minHeight);
 
         // Safari doesn't position the popup correctly when pinch-zoomed.
         const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && _detectBrowser.isWebKit;
         if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
           initialPlacedRef.current = true;
-          (0, _utils.clearStyles)(positionerElement, originalPositionerStylesRef.current);
+          (0, _utils2.clearStyles)(positionerElement, originalPositionerStylesRef.current);
           ReactDOM.flushSync(() => setControlledAlignItemWithTrigger(false));
           return;
         }
@@ -317,7 +319,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
           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;
+          scroller.scrollTop = getMaxScrollTop(scroller);
           initialHeightRef.current = Math.max(minHeight, height);
         } else {
           positionerElement.style.bottom = '0';
@@ -398,7 +400,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, {
@@ -428,6 +430,18 @@ function getMaxPopupHeight(popupStyles) {
 function getMaxScrollTop(scroller) {
   return Math.max(0, 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 normalizeRect(rect, scale) {
+  return (0, _utils.rectToClientRect)({
+    x: rect.x / scale.x,
+    y: rect.y / scale.y,
+    width: rect.width / scale.x,
+    height: rect.height / scale.y
+  });
+}
 const TRANSFORM_STYLE_RESETS = [['transform', 'none'], ['scale', '1'], ['translate', '0 0']];
 function unsetTransformStyles(popupElement) {
   const {

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;
 }