@base-ui/react 1.1.0 → 1.2.0

package/scroll-area/scrollbar/ScrollAreaScrollbar.d.ts

@@ -21,12 +21,12 @@ export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', Sc
    * Whether the scrollbar controls vertical or horizontal scroll.
    * @default 'vertical'
    */
-  orientation?: 'vertical' | 'horizontal';
+  orientation?: ('vertical' | 'horizontal') | undefined;
   /**
    * Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace ScrollAreaScrollbar {
   type State = ScrollAreaScrollbarState;

package/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -46,7 +46,7 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
     rootId,
     thumbSize
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
-  const state = React.useMemo(() => ({
+  const state = {
     hovering,
     scrolling: {
       horizontal: scrollingX,
@@ -60,7 +60,7 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
     cornerHidden: hiddenState.corner
-  }), [hovering, scrollingX, scrollingY, orientation, hiddenState, overflowEdges]);
+  };
   const direction = (0, _DirectionContext.useDirection)();
   React.useEffect(() => {
     const viewportEl = viewportRef.current;

package/scroll-area/scrollbar/ScrollAreaScrollbarContext.js

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

package/scroll-area/scrollbar/ScrollAreaScrollbarDataAttributes.d.ts

@@ -9,7 +9,7 @@ export declare enum ScrollAreaScrollbarDataAttributes {
    */
   hovering = "data-hovering",
   /**
-   * Present when the users scrolls inside the scroll area.
+   * Present when the user scrolls inside the scroll area.
    */
   scrolling = "data-scrolling",
   /**

package/scroll-area/scrollbar/ScrollAreaScrollbarDataAttributes.js

@@ -15,7 +15,7 @@ let ScrollAreaScrollbarDataAttributes = exports.ScrollAreaScrollbarDataAttribute
    */
   ScrollAreaScrollbarDataAttributes["hovering"] = "data-hovering";
   /**
-   * Present when the users scrolls inside the scroll area.
+   * Present when the user scrolls inside the scroll area.
    */
   ScrollAreaScrollbarDataAttributes["scrolling"] = "data-scrolling";
   /**

package/scroll-area/thumb/ScrollAreaThumb.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaThumbState {
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: ('horizontal' | 'vertical') | undefined;
 }
 export interface ScrollAreaThumbProps extends BaseUIComponentProps<'div', ScrollAreaThumb.State> {}
 export declare namespace ScrollAreaThumb {

package/scroll-area/thumb/ScrollAreaThumb.js

@@ -35,9 +35,9 @@ const ScrollAreaThumb = exports.ScrollAreaThumb = /*#__PURE__*/React.forwardRef(
   const {
     orientation
   } = (0, _ScrollAreaScrollbarContext.useScrollAreaScrollbarContext)();
-  const state = React.useMemo(() => ({
+  const state = {
     orientation
-  }), [orientation]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, orientation === 'vertical' ? thumbYRef : thumbXRef],
     state,

package/scroll-area/utils/scrollEdges.d.ts

@@ -0,0 +1,2 @@
+export declare const SCROLL_EDGE_TOLERANCE_PX = 1;
+export declare function normalizeScrollOffset(value: number, max: number): number;

package/scroll-area/utils/scrollEdges.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SCROLL_EDGE_TOLERANCE_PX = void 0;
+exports.normalizeScrollOffset = normalizeScrollOffset;
+var _clamp = require("../../utils/clamp");
+const SCROLL_EDGE_TOLERANCE_PX = exports.SCROLL_EDGE_TOLERANCE_PX = 1;
+function normalizeScrollOffset(value, max) {
+  if (max <= 0) {
+    return 0;
+  }
+  const clamped = (0, _clamp.clamp)(value, 0, max);
+  const startDistance = clamped;
+  const endDistance = max - clamped;
+  const withinStartTolerance = startDistance <= SCROLL_EDGE_TOLERANCE_PX;
+  const withinEndTolerance = endDistance <= SCROLL_EDGE_TOLERANCE_PX;
+  if (withinStartTolerance && withinEndTolerance) {
+    return startDistance <= endDistance ? 0 : max;
+  }
+  if (withinStartTolerance) {
+    return 0;
+  }
+  if (withinEndTolerance) {
+    return max;
+  }
+  return clamped;
+}

package/scroll-area/viewport/ScrollAreaViewport.js

@@ -22,6 +22,7 @@ var _styles = require("../../utils/styles");
 var _onVisible = require("../utils/onVisible");
 var _stateAttributes = require("../root/stateAttributes");
 var _ScrollAreaViewportCssVars = require("./ScrollAreaViewportCssVars");
+var _scrollEdges = require("../utils/scrollEdges");
 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.
@@ -88,7 +89,9 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     setHovering,
     setOverflowEdges,
     overflowEdges,
-    overflowEdgeThreshold
+    overflowEdgeThreshold,
+    scrollingX,
+    scrollingY
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
   const direction = (0, _DirectionContext.useDirection)();
   const programmaticScrollRef = React.useRef(true);
@@ -122,14 +125,17 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     let scrollLeftFromStart = 0;
     let scrollLeftFromEnd = 0;
     if (!scrollbarXHidden) {
+      let rawScrollLeftFromStart = 0;
       if (direction === 'rtl') {
-        scrollLeftFromStart = (0, _clamp.clamp)(-scrollLeft, 0, maxScrollLeft);
+        rawScrollLeftFromStart = (0, _clamp.clamp)(-scrollLeft, 0, maxScrollLeft);
       } else {
-        scrollLeftFromStart = (0, _clamp.clamp)(scrollLeft, 0, maxScrollLeft);
+        rawScrollLeftFromStart = (0, _clamp.clamp)(scrollLeft, 0, maxScrollLeft);
       }
+      scrollLeftFromStart = (0, _scrollEdges.normalizeScrollOffset)(rawScrollLeftFromStart, maxScrollLeft);
       scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart;
     }
-    const scrollTopFromStart = !scrollbarYHidden ? (0, _clamp.clamp)(scrollTop, 0, maxScrollTop) : 0;
+    const rawScrollTopFromStart = !scrollbarYHidden ? (0, _clamp.clamp)(scrollTop, 0, maxScrollTop) : 0;
+    const scrollTopFromStart = !scrollbarYHidden ? (0, _scrollEdges.normalizeScrollOffset)(rawScrollTopFromStart, maxScrollTop) : 0;
     const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
     const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
     const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
@@ -188,11 +194,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       const thumbOffsetX = direction === 'rtl' ? (0, _clamp.clamp)(scrollRatioX * maxThumbOffsetX, -maxThumbOffsetX, 0) : (0, _clamp.clamp)(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX);
       thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`;
     }
-    const clampedScrollLeftStart = (0, _clamp.clamp)(scrollLeftFromStart, 0, maxScrollLeft);
-    const clampedScrollLeftEnd = (0, _clamp.clamp)(scrollLeftFromEnd, 0, maxScrollLeft);
-    const clampedScrollTopStart = (0, _clamp.clamp)(scrollTopFromStart, 0, maxScrollTop);
-    const clampedScrollTopEnd = (0, _clamp.clamp)(scrollTopFromEnd, 0, maxScrollTop);
-    const overflowMetricsPx = [[_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowXStart, clampedScrollLeftStart], [_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, clampedScrollLeftEnd], [_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowYStart, clampedScrollTopStart], [_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowYEnd, clampedScrollTopEnd]];
+    const overflowMetricsPx = [[_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowXStart, scrollLeftFromStart], [_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, scrollLeftFromEnd], [_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowYStart, scrollTopFromStart], [_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowYEnd, scrollTopFromEnd]];
     for (const [cssVar, value] of overflowMetricsPx) {
       viewportEl.style.setProperty(cssVar, `${value}px`);
     }
@@ -221,10 +223,10 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       };
     });
     const nextOverflowEdges = {
-      xStart: !scrollbarXHidden && clampedScrollLeftStart > overflowEdgeThreshold.xStart,
-      xEnd: !scrollbarXHidden && clampedScrollLeftEnd > overflowEdgeThreshold.xEnd,
-      yStart: !scrollbarYHidden && clampedScrollTopStart > overflowEdgeThreshold.yStart,
-      yEnd: !scrollbarYHidden && clampedScrollTopEnd > overflowEdgeThreshold.yEnd
+      xStart: !scrollbarXHidden && scrollLeftFromStart > overflowEdgeThreshold.xStart,
+      xEnd: !scrollbarXHidden && scrollLeftFromEnd > overflowEdgeThreshold.xEnd,
+      yStart: !scrollbarYHidden && scrollTopFromStart > overflowEdgeThreshold.yStart,
+      yEnd: !scrollbarYHidden && scrollTopFromEnd > overflowEdgeThreshold.yEnd
     };
     setOverflowEdges(prev => {
       if (prev.xStart === nextOverflowEdges.xStart && prev.xEnd === nextOverflowEdges.xEnd && prev.yStart === nextOverflowEdges.yStart && prev.yEnd === nextOverflowEdges.yEnd) {
@@ -289,7 +291,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       if (animations.length === 0) {
         return;
       }
-      Promise.all(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
+      Promise.allSettled(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
       ro.disconnect();
@@ -341,6 +343,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     onKeyDown: handleUserInteraction
   };
   const viewportState = React.useMemo(() => ({
+    scrolling: scrollingX || scrollingY,
     hasOverflowX: !hiddenState.x,
     hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
@@ -348,7 +351,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
     cornerHidden: hiddenState.corner
-  }), [hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
+  }), [scrollingX, scrollingY, hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, viewportRef],
     state: viewportState,

package/scroll-area/viewport/ScrollAreaViewportContext.js

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

package/scroll-area/viewport/ScrollAreaViewportDataAttributes.d.ts

@@ -1,4 +1,8 @@
 export declare enum ScrollAreaViewportDataAttributes {
+  /**
+   * Present when the user scrolls inside the scroll area.
+   */
+  scrolling = "data-scrolling",
   /**
    * Present when the scroll area content is wider than the viewport.
    */

package/scroll-area/viewport/ScrollAreaViewportDataAttributes.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ScrollAreaViewportDataAttributes = void 0;
 let ScrollAreaViewportDataAttributes = exports.ScrollAreaViewportDataAttributes = /*#__PURE__*/function (ScrollAreaViewportDataAttributes) {
+  /**
+   * Present when the user scrolls inside the scroll area.
+   */
+  ScrollAreaViewportDataAttributes["scrolling"] = "data-scrolling";
   /**
    * Present when the scroll area content is wider than the viewport.
    */

package/select/arrow/SelectArrow.js

@@ -43,12 +43,12 @@ const SelectArrow = exports.SelectArrow = /*#__PURE__*/React.forwardRef(function
     alignItemWithTriggerActive
   } = (0, _SelectPositionerContext.useSelectPositionerContext)();
   const open = (0, _store.useStore)(store, _store2.selectors.open, true);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [arrowRef, forwardedRef],

package/select/arrow/SelectArrowDataAttributes.js

@@ -18,12 +18,12 @@ let SelectArrowDataAttributes = exports.SelectArrowDataAttributes = function (Se
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectArrowDataAttributes["side"] = "data-side";
+  SelectArrowDataAttributes[SelectArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  SelectArrowDataAttributes["align"] = "data-align";
+  SelectArrowDataAttributes[SelectArrowDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the select arrow is uncentered.
    */

package/select/backdrop/SelectBackdrop.js

@@ -36,10 +36,10 @@ const SelectBackdrop = exports.SelectBackdrop = /*#__PURE__*/React.forwardRef(fu
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
   const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,

package/select/group/SelectGroupContext.js

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

package/select/icon/SelectIcon.js

@@ -28,9 +28,9 @@ const SelectIcon = exports.SelectIcon = /*#__PURE__*/React.forwardRef(function S
     store
   } = (0, _SelectRootContext.useSelectRootContext)();
   const open = (0, _store.useStore)(store, _store2.selectors.open);
-  const state = React.useMemo(() => ({
+  const state = {
     open
-  }), [open]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
     ref: forwardedRef,

package/select/item/SelectItem.d.ts

@@ -32,13 +32,13 @@ export interface SelectItemProps extends NonNativeButtonProps, Omit<BaseUICompon
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Specifies the text label to use when the item is matched during keyboard text navigation.
    *
    * Defaults to the item text content if not provided.
    */
-  label?: string;
+  label?: string | undefined;
 }
 export declare namespace SelectItem {
   type State = SelectItemState;

package/select/item/SelectItem.js

@@ -32,7 +32,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   const {
     render,
     className,
-    value = null,
+    value: itemValue = null,
     label,
     disabled = false,
     nativeButton = false,
@@ -58,7 +58,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   } = (0, _SelectRootContext.useSelectRootContext)();
   const highlightTimeout = (0, _useTimeout.useTimeout)();
   const highlighted = (0, _store.useStore)(store, _store2.selectors.isActive, listItem.index);
-  const selected = (0, _store.useStore)(store, _store2.selectors.isSelected, listItem.index, value);
+  const selected = (0, _store.useStore)(store, _store2.selectors.isSelected, listItem.index, itemValue);
   const selectedByFocus = (0, _store.useStore)(store, _store2.selectors.isSelectedByFocus, listItem.index);
   const isItemEqualToValue = (0, _store.useStore)(store, _store2.selectors.isItemEqualToValue);
   const index = listItem.index;
@@ -70,30 +70,30 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       return undefined;
     }
     const values = valuesRef.current;
-    values[index] = value;
+    values[index] = itemValue;
     return () => {
       delete values[index];
     };
-  }, [hasRegistered, index, value, valuesRef]);
+  }, [hasRegistered, index, itemValue, valuesRef]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!hasRegistered) {
       return undefined;
     }
     const selectedValue = store.state.value;
-    let candidate = selectedValue;
+    let selectedCandidate = selectedValue;
     if (multiple && Array.isArray(selectedValue) && selectedValue.length > 0) {
-      candidate = selectedValue[selectedValue.length - 1];
+      selectedCandidate = selectedValue[selectedValue.length - 1];
     }
-    if (candidate !== undefined && (0, _itemEquality.compareItemEquality)(candidate, value, isItemEqualToValue)) {
+    if (selectedCandidate !== undefined && (0, _itemEquality.compareItemEquality)(itemValue, selectedCandidate, isItemEqualToValue)) {
       store.set('selectedIndex', index);
     }
     return undefined;
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, value]);
-  const state = React.useMemo(() => ({
+  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue]);
+  const state = {
     disabled,
     selected,
     highlighted
-  }), [disabled, selected, highlighted]);
+  };
   const rootProps = getItemProps({
     active: highlighted,
     selected
@@ -117,10 +117,10 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     const selectedValue = store.state.value;
     if (multiple) {
       const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const nextValue = selected ? (0, _itemEquality.removeItem)(currentValue, value, isItemEqualToValue) : [...currentValue, value];
+      const nextValue = selected ? (0, _itemEquality.removeItem)(currentValue, itemValue, isItemEqualToValue) : [...currentValue, itemValue];
       setValue(nextValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
     } else {
-      setValue(value, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
+      setValue(itemValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
       setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
     }
   }
@@ -132,7 +132,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       store.set('activeIndex', index);
     },
     onMouseEnter() {
-      if (!keyboardActiveRef.current && store.state.selectedIndex === null) {
+      if (!keyboardActiveRef.current && store.state.selectedIndex === null && highlightItemOnHover) {
         store.set('activeIndex', index);
       }
     },

package/select/item/SelectItemContext.js

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

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

@@ -15,7 +15,7 @@ export interface SelectItemIndicatorState {
 export interface SelectItemIndicatorProps extends BaseUIComponentProps<'span', SelectItemIndicator.State> {
   children?: React.ReactNode;
   /** Whether to keep the HTML element in the DOM when the item is not selected. */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectItemIndicator {
   type State = SelectItemIndicatorState;

package/select/item-indicator/SelectItemIndicator.js

@@ -54,10 +54,10 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(selected);
-  const state = React.useMemo(() => ({
+  const state = {
     selected,
     transitionStatus
-  }), [selected, transitionStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     ref: [forwardedRef, indicatorRef],
     state,

package/select/popup/SelectPopup.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
@@ -11,6 +12,16 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 export declare const SelectPopup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopup.State> {
   children?: React.ReactNode;
+  /**
+   * Determines the element to focus when the select popup is closed.
+   *
+   * - `false`: Do not move focus.
+   * - `true`: Move focus based on the default behavior (trigger or previously focused element).
+   * - `RefObject`: Move focus to the ref element.
+   * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
+   *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
+   */
+  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
 }
 export interface SelectPopupState {
   side: Side | 'none';

package/select/popup/SelectPopup.js

@@ -34,6 +34,7 @@ var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTra
 var _clamp = require("../../utils/clamp");
 var _CSPContext = require("../../csp-provider/CSPContext");
 var _jsxRuntime = require("react/jsx-runtime");
+const SCROLL_EPS_PX = 1;
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._stateAttributesMapping.transitionStatusMapping
@@ -49,6 +50,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    finalFocus,
     ...elementProps
   } = componentProps;
   const {
@@ -109,31 +111,53 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     const marginTop = parseFloat(positionerStyles.marginTop);
     const marginBottom = parseFloat(positionerStyles.marginBottom);
     const maxPopupHeight = getMaxPopupHeight(getComputedStyle(popupRef.current));
-    const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
+    const maxAvailableHeight = Math.min(doc.documentElement.clientHeight - marginTop - marginBottom, maxPopupHeight);
     const scrollTop = scroller.scrollTop;
-    const scrollHeight = scroller.scrollHeight;
-    const clientHeight = scroller.clientHeight;
-    const maxScrollTop = scrollHeight - clientHeight;
+    const maxScrollTop = getMaxScrollTop(scroller);
     let nextPositionerHeight = 0;
     let nextScrollTop = null;
     let setReachedMax = false;
+    let scrollToMax = false;
+    const setHeight = height => {
+      positionerElement.style.height = `${height}px`;
+    };
+    const handleSmallDiff = (diff, targetScrollTop) => {
+      const heightDelta = (0, _clamp.clamp)(diff, 0, maxAvailableHeight - currentHeight);
+      if (heightDelta > 0) {
+        // Consume the remaining scroll in height.
+        setHeight(currentHeight + heightDelta);
+      }
+      scroller.scrollTop = targetScrollTop;
+      if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EPS_PX) {
+        reachedMaxHeightRef.current = true;
+      }
+      handleScrollArrowVisibility();
+    };
     if (isTopPositioned) {
       const diff = maxScrollTop - scrollTop;
       const idealHeight = currentHeight + diff;
-      const nextHeight = Math.min(idealHeight, viewportHeight);
+      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
       nextPositionerHeight = nextHeight;
-      if (nextHeight !== viewportHeight) {
-        nextScrollTop = maxScrollTop;
+      if (diff <= SCROLL_EPS_PX) {
+        handleSmallDiff(diff, maxScrollTop);
+        return;
+      }
+      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
+        scrollToMax = true;
       } else {
         setReachedMax = true;
       }
     } else if (isBottomPositioned) {
-      const diff = scrollTop - 0;
+      const diff = scrollTop;
       const idealHeight = currentHeight + diff;
-      const nextHeight = Math.min(idealHeight, viewportHeight);
-      const overshoot = idealHeight - viewportHeight;
+      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
+      const overshoot = idealHeight - maxAvailableHeight;
       nextPositionerHeight = nextHeight;
-      if (nextHeight !== viewportHeight) {
+      if (diff <= SCROLL_EPS_PX) {
+        handleSmallDiff(diff, 0);
+        return;
+      }
+      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
         nextScrollTop = 0;
       } else {
         setReachedMax = true;
@@ -142,13 +166,21 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
         }
       }
     }
+    nextPositionerHeight = Math.ceil(nextPositionerHeight);
     if (nextPositionerHeight !== 0) {
-      positionerElement.style.height = `${nextPositionerHeight}px`;
+      setHeight(nextPositionerHeight);
     }
-    if (nextScrollTop != null) {
-      scroller.scrollTop = nextScrollTop;
+    if (scrollToMax || nextScrollTop != null) {
+      // Recompute bounds after resizing (clientHeight likely changed).
+      const nextMaxScrollTop = getMaxScrollTop(scroller);
+      const target = scrollToMax ? nextMaxScrollTop : (0, _clamp.clamp)(nextScrollTop, 0, nextMaxScrollTop);
+
+      // Avoid adjustments that re-trigger scroll events forever.
+      if (Math.abs(scroller.scrollTop - target) > SCROLL_EPS_PX) {
+        scroller.scrollTop = target;
+      }
     }
-    if (setReachedMax || nextPositionerHeight >= maxPopupHeight) {
+    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EPS_PX) {
       reachedMaxHeightRef.current = true;
     }
     handleScrollArrowVisibility();
@@ -163,12 +195,12 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus,
     side,
     align
-  }), [open, transitionStatus, side, align]);
+  };
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!positionerElement || !popupRef.current || Object.keys(originalPositionerStylesRef.current).length) {
       return;
@@ -361,7 +393,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
       if (listElement) {
         return;
       }
-      scrollHandlerRef.current?.(event.currentTarget);
+      handleScroll(event.currentTarget);
     },
     ...(alignItemWithTriggerActive && {
       style: listElement ? {
@@ -382,6 +414,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
       context: floatingRootContext,
       modal: false,
       disabled: !mounted,
+      returnFocus: finalFocus,
       restoreFocus: true,
       children: element
     })]
@@ -392,31 +425,27 @@ function getMaxPopupHeight(popupStyles) {
   const maxHeightStyle = popupStyles.maxHeight || '';
   return maxHeightStyle.endsWith('px') ? parseFloat(maxHeightStyle) || Infinity : Infinity;
 }
-const UNSET_TRANSFORM_STYLES = {
-  transform: 'none',
-  scale: '1',
-  translate: '0 0'
-};
-function restoreInlineStyleProperty(style, property, value) {
-  if (value) {
-    style.setProperty(property, value);
-  } else {
-    style.removeProperty(property);
-  }
+function getMaxScrollTop(scroller) {
+  return Math.max(0, scroller.scrollHeight - scroller.clientHeight);
 }
+const TRANSFORM_STYLE_RESETS = [['transform', 'none'], ['scale', '1'], ['translate', '0 0']];
 function unsetTransformStyles(popupElement) {
   const {
     style
   } = popupElement;
   const originalStyles = {};
-  const props = Object.keys(UNSET_TRANSFORM_STYLES);
-  for (const prop of props) {
-    originalStyles[prop] = style.getPropertyValue(prop);
-    style.setProperty(prop, UNSET_TRANSFORM_STYLES[prop]);
+  for (const [property, value] of TRANSFORM_STYLE_RESETS) {
+    originalStyles[property] = style.getPropertyValue(property);
+    style.setProperty(property, value, 'important');
   }
   return () => {
-    for (const prop of props) {
-      restoreInlineStyleProperty(style, prop, originalStyles[prop]);
+    for (const [property] of TRANSFORM_STYLE_RESETS) {
+      const originalValue = originalStyles[property];
+      if (originalValue) {
+        style.setProperty(property, originalValue);
+      } else {
+        style.removeProperty(property);
+      }
     }
   };
 }