@base-ui/react 1.1.0 → 1.3.0

package/scroll-area/root/ScrollAreaRoot.js

@@ -36,9 +36,9 @@ const DEFAULT_OVERFLOW_EDGES = {
   yEnd: false
 };
 const DEFAULT_HIDDEN_STATE = {
-  x: false,
-  y: false,
-  corner: false
+  x: true,
+  y: true,
+  corner: true
 };
 /**
  * Groups all parts of the scroll area.
@@ -65,6 +65,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
   const [scrollingX, setScrollingX] = React.useState(false);
   const [scrollingY, setScrollingY] = React.useState(false);
   const [touchModality, setTouchModality] = React.useState(false);
+  const [hasMeasuredScrollbar, setHasMeasuredScrollbar] = React.useState(false);
   const [cornerSize, setCornerSize] = React.useState(DEFAULT_SIZE);
   const [thumbSize, setThumbSize] = React.useState(DEFAULT_SIZE);
   const [overflowEdges, setOverflowEdges] = React.useState(DEFAULT_OVERFLOW_EDGES);
@@ -178,6 +179,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     }
   }
   const state = React.useMemo(() => ({
+    scrolling: scrollingX || scrollingY,
     hasOverflowX: !hiddenState.x,
     hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
@@ -185,7 +187,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     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 props = {
     role: 'presentation',
     onPointerEnter: handlePointerEnterOrMove,
@@ -215,6 +217,8 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     setCornerSize,
     thumbSize,
     setThumbSize,
+    hasMeasuredScrollbar,
+    setHasMeasuredScrollbar,
     touchModality,
     cornerRef,
     scrollingX,
@@ -236,7 +240,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     setOverflowEdges,
     viewportState: state,
     overflowEdgeThreshold
-  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
+  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ScrollAreaRootContext.ScrollAreaRootContext.Provider, {
     value: contextValue,
     children: [!disableStyleElements && _styles.styleDisableScrollbar.getElement(nonce), element]

package/scroll-area/root/ScrollAreaRootContext.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import type { Coords, HiddenState, OverflowEdges, ScrollAreaRoot, Size } from "./ScrollAreaRoot.js";
+import type { Coords, HiddenState, OverflowEdges, Size, ScrollAreaRootState } from "./ScrollAreaRoot.js";
 export interface ScrollAreaRootContext {
   cornerSize: Size;
   setCornerSize: React.Dispatch<React.SetStateAction<Size>>;
   thumbSize: Size;
   setThumbSize: React.Dispatch<React.SetStateAction<Size>>;
+  hasMeasuredScrollbar: boolean;
+  setHasMeasuredScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
   touchModality: boolean;
   hovering: boolean;
   setHovering: React.Dispatch<React.SetStateAction<boolean>>;
@@ -28,7 +30,7 @@ export interface ScrollAreaRootContext {
   setHiddenState: React.Dispatch<React.SetStateAction<HiddenState>>;
   overflowEdges: OverflowEdges;
   setOverflowEdges: React.Dispatch<React.SetStateAction<OverflowEdges>>;
-  viewportState: ScrollAreaRoot.State;
+  viewportState: ScrollAreaRootState;
   overflowEdgeThreshold: {
     xStart: number;
     xEnd: number;

package/scroll-area/root/ScrollAreaRootContext.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/root/ScrollAreaRootDataAttributes.d.ts

@@ -1,4 +1,8 @@
 export declare enum ScrollAreaRootDataAttributes {
+  /**
+   * 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/root/ScrollAreaRootDataAttributes.js

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

package/scroll-area/root/stateAttributes.d.ts

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { ScrollAreaRoot } from "./ScrollAreaRoot.js";
-export declare const scrollAreaStateAttributesMapping: StateAttributesMapping<ScrollAreaRoot.State>;
+import type { ScrollAreaRootState } from "./ScrollAreaRoot.js";
+export declare const scrollAreaStateAttributesMapping: StateAttributesMapping<ScrollAreaRootState>;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
+import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * A vertical or horizontal scrollbar for the scroll area.
  * Renders a `<div>` element.
@@ -8,25 +8,31 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
 export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ScrollAreaScrollbarState extends ScrollAreaRoot.State {
-  /** Whether the scroll area is being hovered. */
+export interface ScrollAreaScrollbarState extends ScrollAreaRootState {
+  /**
+   * Whether the scroll area is being hovered.
+   */
   hovering: boolean;
-  /** Whether the scroll area is being scrolled. */
+  /**
+   * Whether the scroll area is being scrolled.
+   */
   scrolling: boolean;
-  /** The orientation of the scrollbar. */
+  /**
+   * The orientation of the scrollbar.
+   */
   orientation: 'vertical' | 'horizontal';
 }
-export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', ScrollAreaScrollbar.State> {
+export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', ScrollAreaScrollbarState> {
   /**
    * 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

@@ -44,9 +44,10 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
     handlePointerDown,
     handlePointerUp,
     rootId,
-    thumbSize
+    thumbSize,
+    hasMeasuredScrollbar
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
-  const state = React.useMemo(() => ({
+  const state = {
     hovering,
     scrolling: {
       horizontal: scrollingX,
@@ -60,8 +61,9 @@ 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)();
+  const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
   React.useEffect(() => {
     const viewportEl = viewportRef.current;
     const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
@@ -163,6 +165,7 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
       touchAction: 'none',
       WebkitUserSelect: 'none',
       userSelect: 'none',
+      visibility: hideTrackUntilMeasured ? 'hidden' : undefined,
       ...(orientation === 'vertical' && {
         top: 0,
         bottom: `var(${_ScrollAreaRootCssVars.ScrollAreaRootCssVars.scrollAreaCornerHeight})`,

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,9 +8,12 @@ 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';
+  /**
+   * The component orientation.
+   */
+  orientation?: 'horizontal' | 'vertical' | undefined;
 }
-export interface ScrollAreaThumbProps extends BaseUIComponentProps<'div', ScrollAreaThumb.State> {}
+export interface ScrollAreaThumbProps extends BaseUIComponentProps<'div', ScrollAreaThumbState> {}
 export declare namespace ScrollAreaThumb {
   type State = ScrollAreaThumbState;
   type Props = ScrollAreaThumbProps;

package/scroll-area/thumb/ScrollAreaThumb.js

@@ -30,14 +30,15 @@ const ScrollAreaThumb = exports.ScrollAreaThumb = /*#__PURE__*/React.forwardRef(
     handlePointerMove,
     handlePointerUp,
     setScrollingX,
-    setScrollingY
+    setScrollingY,
+    hasMeasuredScrollbar
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
   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,
@@ -54,6 +55,7 @@ const ScrollAreaThumb = exports.ScrollAreaThumb = /*#__PURE__*/React.forwardRef(
         handlePointerUp(event);
       },
       style: {
+        visibility: hasMeasuredScrollbar ? undefined : 'hidden',
         ...(orientation === 'vertical' && {
           height: `var(${_ScrollAreaScrollbarCssVars.ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`
         }),

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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
+import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * The actual scrollable container of the scroll area.
  * Renders a `<div>` element.
@@ -8,8 +8,8 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
 export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ScrollAreaViewportProps extends BaseUIComponentProps<'div', ScrollAreaViewport.State> {}
-export interface ScrollAreaViewportState extends ScrollAreaRoot.State {}
+export interface ScrollAreaViewportProps extends BaseUIComponentProps<'div', ScrollAreaViewportState> {}
+export interface ScrollAreaViewportState extends ScrollAreaRootState {}
 export declare namespace ScrollAreaViewport {
   type Props = ScrollAreaViewportProps;
   type State = ScrollAreaViewportState;

package/scroll-area/viewport/ScrollAreaViewport.js

@@ -22,10 +22,12 @@ 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.
 let scrollAreaOverflowVarsRegistered = false;
+const HAS_RESIZE_OBSERVER = typeof ResizeObserver !== 'undefined';
 
 /**
  * Removes inheritance of the scroll area overflow CSS variables, which
@@ -84,14 +86,18 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     rootId,
     setHiddenState,
     hiddenState,
+    setHasMeasuredScrollbar,
     handleScroll,
     setHovering,
     setOverflowEdges,
     overflowEdges,
-    overflowEdgeThreshold
+    overflowEdgeThreshold,
+    scrollingX,
+    scrollingY
   } = (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)(() => {
@@ -110,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);
@@ -122,14 +138,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 +207,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`);
     }
@@ -209,22 +224,12 @@ 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 && 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) {
@@ -238,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)(() => {
@@ -260,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();
     });
@@ -289,7 +296,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();
@@ -305,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'
@@ -341,6 +347,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 +355,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,
@@ -363,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/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.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/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.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;