@base-ui/react 1.0.0-rc.2 → 1.1.0

package/scroll-area/content/ScrollAreaContent.d.ts

@@ -7,7 +7,7 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-export declare const ScrollAreaContent: React.ForwardRefExoticComponent<ScrollAreaContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaContent: React.ForwardRefExoticComponent<Omit<ScrollAreaContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaContentState extends ScrollAreaRoot.State {}
 export interface ScrollAreaContentProps extends BaseUIComponentProps<'div', ScrollAreaContent.State> {}
 export declare namespace ScrollAreaContent {

package/scroll-area/content/ScrollAreaContent.js

@@ -35,7 +35,16 @@ const ScrollAreaContent = exports.ScrollAreaContent = /*#__PURE__*/React.forward
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
-    const ro = new ResizeObserver(computeThumbPosition);
+    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.
+      if (!hasInitialized) {
+        hasInitialized = true;
+        return;
+      }
+      computeThumbPosition();
+    });
     if (contentWrapperRef.current) {
       ro.observe(contentWrapperRef.current);
     }

package/scroll-area/corner/ScrollAreaCorner.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-export declare const ScrollAreaCorner: React.ForwardRefExoticComponent<ScrollAreaCornerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<ScrollAreaCornerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaCornerState {}
 export interface ScrollAreaCornerProps extends BaseUIComponentProps<'div', ScrollAreaCorner.State> {}
 export declare namespace ScrollAreaCorner {

package/scroll-area/corner/ScrollAreaCorner.js

@@ -38,7 +38,7 @@ const ScrollAreaCorner = exports.ScrollAreaCorner = /*#__PURE__*/React.forwardRe
       }
     }, elementProps]
   });
-  if (hiddenState.cornerHidden) {
+  if (hiddenState.corner) {
     return null;
   }
   return element;

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

@@ -1,12 +1,35 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
+declare const DEFAULT_COORDS: {
+  x: number;
+  y: number;
+};
+declare const DEFAULT_SIZE: {
+  width: number;
+  height: number;
+};
+declare const DEFAULT_OVERFLOW_EDGES: {
+  xStart: boolean;
+  xEnd: boolean;
+  yStart: boolean;
+  yEnd: boolean;
+};
+declare const DEFAULT_HIDDEN_STATE: {
+  x: boolean;
+  y: boolean;
+  corner: boolean;
+};
+export type HiddenState = typeof DEFAULT_HIDDEN_STATE;
+export type OverflowEdges = typeof DEFAULT_OVERFLOW_EDGES;
+export type Size = typeof DEFAULT_SIZE;
+export type Coords = typeof DEFAULT_COORDS;
 /**
  * Groups all parts of the scroll area.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-export declare const ScrollAreaRoot: React.ForwardRefExoticComponent<ScrollAreaRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaRoot: React.ForwardRefExoticComponent<Omit<ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaRootState {
   /** Whether horizontal overflow is present. */
   hasOverflowX: boolean;
@@ -39,4 +62,5 @@ export interface ScrollAreaRootProps extends BaseUIComponentProps<'div', ScrollA
 export declare namespace ScrollAreaRoot {
   type State = ScrollAreaRootState;
   type Props = ScrollAreaRootProps;
-}
+}
+export {};

package/scroll-area/root/ScrollAreaRoot.js

@@ -19,7 +19,12 @@ var _styles = require("../../utils/styles");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _stateAttributes = require("./stateAttributes");
 var _utils = require("../../floating-ui-react/utils");
+var _CSPContext = require("../../csp-provider/CSPContext");
 var _jsxRuntime = require("react/jsx-runtime");
+const DEFAULT_COORDS = {
+  x: 0,
+  y: 0
+};
 const DEFAULT_SIZE = {
   width: 0,
   height: 0
@@ -30,7 +35,11 @@ const DEFAULT_OVERFLOW_EDGES = {
   yStart: false,
   yEnd: false
 };
-
+const DEFAULT_HIDDEN_STATE = {
+  x: false,
+  y: false,
+  corner: false
+};
 /**
  * Groups all parts of the scroll area.
  * Renders a `<div>` element.
@@ -44,14 +53,22 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     overflowEdgeThreshold: overflowEdgeThresholdProp,
     ...elementProps
   } = componentProps;
+  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
+  const rootId = (0, _useBaseUiId.useBaseUiId)();
+  const scrollYTimeout = (0, _useTimeout.useTimeout)();
+  const scrollXTimeout = (0, _useTimeout.useTimeout)();
+  const {
+    nonce,
+    disableStyleElements
+  } = (0, _CSPContext.useCSPContext)();
   const [hovering, setHovering] = React.useState(false);
   const [scrollingX, setScrollingX] = React.useState(false);
   const [scrollingY, setScrollingY] = React.useState(false);
+  const [touchModality, setTouchModality] = React.useState(false);
   const [cornerSize, setCornerSize] = React.useState(DEFAULT_SIZE);
   const [thumbSize, setThumbSize] = React.useState(DEFAULT_SIZE);
-  const [touchModality, setTouchModality] = React.useState(false);
   const [overflowEdges, setOverflowEdges] = React.useState(DEFAULT_OVERFLOW_EDGES);
-  const rootId = (0, _useBaseUiId.useBaseUiId)();
+  const [hiddenState, setHiddenState] = React.useState(DEFAULT_HIDDEN_STATE);
   const rootRef = React.useRef(null);
   const viewportRef = React.useRef(null);
   const scrollbarYRef = React.useRef(null);
@@ -65,18 +82,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
   const startScrollTopRef = React.useRef(0);
   const startScrollLeftRef = React.useRef(0);
   const currentOrientationRef = React.useRef('vertical');
-  const scrollYTimeout = (0, _useTimeout.useTimeout)();
-  const scrollXTimeout = (0, _useTimeout.useTimeout)();
-  const scrollPositionRef = React.useRef({
-    x: 0,
-    y: 0
-  });
-  const [hiddenState, setHiddenState] = React.useState({
-    scrollbarYHidden: false,
-    scrollbarXHidden: false,
-    cornerHidden: false
-  });
-  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
+  const scrollPositionRef = React.useRef(DEFAULT_COORDS);
   const handleScroll = (0, _useStableCallback.useStableCallback)(scrollPosition => {
     const offsetX = scrollPosition.x - scrollPositionRef.current.x;
     const offsetY = scrollPosition.y - scrollPositionRef.current.y;
@@ -161,32 +167,30 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
       thumbXRef.current.releasePointerCapture(event.pointerId);
     }
   });
+  function handleTouchModalityChange(event) {
+    setTouchModality(event.pointerType === 'touch');
+  }
   function handlePointerEnterOrMove(event) {
-    const isTouch = event.pointerType === 'touch';
-    setTouchModality(isTouch);
-    if (!isTouch) {
+    handleTouchModalityChange(event);
+    if (event.pointerType !== 'touch') {
       const isTargetRootChild = (0, _utils.contains)(rootRef.current, event.target);
       setHovering(isTargetRootChild);
     }
   }
   const state = React.useMemo(() => ({
-    hasOverflowX: !hiddenState.scrollbarXHidden,
-    hasOverflowY: !hiddenState.scrollbarYHidden,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
     overflowXEnd: overflowEdges.xEnd,
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.cornerHidden
-  }), [hiddenState.scrollbarXHidden, hiddenState.scrollbarYHidden, hiddenState.cornerHidden, overflowEdges]);
+    cornerHidden: hiddenState.corner
+  }), [hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
   const props = {
     role: 'presentation',
     onPointerEnter: handlePointerEnterOrMove,
     onPointerMove: handlePointerEnterOrMove,
-    onPointerDown({
-      pointerType
-    }) {
-      setTouchModality(pointerType === 'touch');
-    },
+    onPointerDown: handleTouchModalityChange,
     onPointerLeave() {
       setHovering(false);
     },
@@ -232,10 +236,10 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     setOverflowEdges,
     viewportState: state,
     overflowEdgeThreshold
-  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, touchModality, cornerRef, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, viewportRef, rootRef, scrollbarYRef, scrollbarXRef, thumbYRef, thumbXRef, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
+  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ScrollAreaRootContext.ScrollAreaRootContext.Provider, {
     value: contextValue,
-    children: [_styles.styleDisableScrollbar.element, element]
+    children: [!disableStyleElements && _styles.styleDisableScrollbar.getElement(nonce), element]
   });
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaRoot.displayName = "ScrollAreaRoot";

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

@@ -1,22 +1,10 @@
 import * as React from 'react';
-import type { ScrollAreaRoot } from "./ScrollAreaRoot.js";
+import type { Coords, HiddenState, OverflowEdges, ScrollAreaRoot, Size } from "./ScrollAreaRoot.js";
 export interface ScrollAreaRootContext {
-  cornerSize: {
-    width: number;
-    height: number;
-  };
-  setCornerSize: React.Dispatch<React.SetStateAction<{
-    width: number;
-    height: number;
-  }>>;
-  thumbSize: {
-    width: number;
-    height: number;
-  };
-  setThumbSize: React.Dispatch<React.SetStateAction<{
-    width: number;
-    height: number;
-  }>>;
+  cornerSize: Size;
+  setCornerSize: React.Dispatch<React.SetStateAction<Size>>;
+  thumbSize: Size;
+  setThumbSize: React.Dispatch<React.SetStateAction<Size>>;
   touchModality: boolean;
   hovering: boolean;
   setHovering: React.Dispatch<React.SetStateAction<boolean>>;
@@ -34,33 +22,12 @@ export interface ScrollAreaRootContext {
   handlePointerDown: (event: React.PointerEvent) => void;
   handlePointerMove: (event: React.PointerEvent) => void;
   handlePointerUp: (event: React.PointerEvent) => void;
-  handleScroll: (scrollPosition: {
-    x: number;
-    y: number;
-  }) => void;
+  handleScroll: (scrollPosition: Coords) => void;
   rootId: string | undefined;
-  hiddenState: {
-    scrollbarYHidden: boolean;
-    scrollbarXHidden: boolean;
-    cornerHidden: boolean;
-  };
-  setHiddenState: React.Dispatch<React.SetStateAction<{
-    scrollbarYHidden: boolean;
-    scrollbarXHidden: boolean;
-    cornerHidden: boolean;
-  }>>;
-  overflowEdges: {
-    xStart: boolean;
-    xEnd: boolean;
-    yStart: boolean;
-    yEnd: boolean;
-  };
-  setOverflowEdges: React.Dispatch<React.SetStateAction<{
-    xStart: boolean;
-    xEnd: boolean;
-    yStart: boolean;
-    yEnd: boolean;
-  }>>;
+  hiddenState: HiddenState;
+  setHiddenState: React.Dispatch<React.SetStateAction<HiddenState>>;
+  overflowEdges: OverflowEdges;
+  setOverflowEdges: React.Dispatch<React.SetStateAction<OverflowEdges>>;
   viewportState: ScrollAreaRoot.State;
   overflowEdgeThreshold: {
     xStart: number;

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

@@ -7,7 +7,7 @@ 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<ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>>;
+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. */
   hovering: boolean;

package/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -53,13 +53,13 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
       vertical: scrollingY
     }[orientation],
     orientation,
-    hasOverflowX: !hiddenState.scrollbarXHidden,
-    hasOverflowY: !hiddenState.scrollbarYHidden,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
     overflowXEnd: overflowEdges.xEnd,
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.cornerHidden
+    cornerHidden: hiddenState.corner
   }), [hovering, scrollingX, scrollingY, orientation, hiddenState, overflowEdges]);
   const direction = (0, _DirectionContext.useDirection)();
   React.useEffect(() => {
@@ -186,7 +186,7 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
   const contextValue = React.useMemo(() => ({
     orientation
   }), [orientation]);
-  const isHidden = orientation === 'vertical' ? hiddenState.scrollbarYHidden : hiddenState.scrollbarXHidden;
+  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
   const shouldRender = keepMounted || !isHidden;
   if (!shouldRender) {
     return null;

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
- * The draggable part of the the scrollbar that indicates the current scroll position.
+ * The draggable part of the scrollbar that indicates the current scroll position.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<ScrollAreaThumbProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaThumbState {
   orientation?: 'horizontal' | 'vertical';
 }

package/scroll-area/thumb/ScrollAreaThumb.js

@@ -12,7 +12,7 @@ var _ScrollAreaScrollbarContext = require("../scrollbar/ScrollAreaScrollbarConte
 var _ScrollAreaScrollbarCssVars = require("../scrollbar/ScrollAreaScrollbarCssVars");
 var _useRenderElement = require("../../utils/useRenderElement");
 /**
- * The draggable part of the the scrollbar that indicates the current scroll position.
+ * The draggable part of the scrollbar that indicates the current scroll position.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)

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

@@ -7,7 +7,7 @@ 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<ScrollAreaViewportProps & React.RefAttributes<HTMLDivElement>>;
+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 declare namespace ScrollAreaViewport {

package/scroll-area/viewport/ScrollAreaViewport.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ScrollAreaViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
@@ -79,6 +78,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     thumbYRef,
     thumbXRef,
     cornerRef,
+    cornerSize,
     setCornerSize,
     setThumbSize,
     rootId,
@@ -94,7 +94,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
   const programmaticScrollRef = React.useRef(true);
   const scrollEndTimeout = (0, _useTimeout.useTimeout)();
   const waitForAnimationsTimeout = (0, _useTimeout.useTimeout)();
-  function computeThumbPositionHandler() {
+  const computeThumbPosition = (0, _useStableCallback.useStableCallback)(() => {
     const viewportEl = viewportRef.current;
     const scrollbarYEl = scrollbarYRef.current;
     const scrollbarXEl = scrollbarXRef.current;
@@ -133,14 +133,26 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
     const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
     const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
+    let nextCornerWidth = 0;
+    let nextCornerHeight = 0;
+    if (!scrollbarXHidden && !scrollbarYHidden) {
+      nextCornerWidth = scrollbarYEl?.offsetWidth || 0;
+      nextCornerHeight = scrollbarXEl?.offsetHeight || 0;
+    }
+
+    // Only subtract corner size from scrollbar dimensions if the corner hasn't been sized yet.
+    // Once sized, the layout will already account for it.
+    const cornerNotYetSized = cornerSize.width === 0 && cornerSize.height === 0;
+    const cornerWidthOffset = cornerNotYetSized ? nextCornerWidth : 0;
+    const cornerHeightOffset = cornerNotYetSized ? nextCornerHeight : 0;
     const scrollbarXOffset = (0, _getOffset.getOffset)(scrollbarXEl, 'padding', 'x');
     const scrollbarYOffset = (0, _getOffset.getOffset)(scrollbarYEl, 'padding', 'y');
     const thumbXOffset = (0, _getOffset.getOffset)(thumbXEl, 'margin', 'x');
     const thumbYOffset = (0, _getOffset.getOffset)(thumbYEl, 'margin', 'y');
     const idealNextWidth = nextWidth - scrollbarXOffset - thumbXOffset;
     const idealNextHeight = nextHeight - scrollbarYOffset - thumbYOffset;
-    const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth, idealNextWidth) : idealNextWidth;
-    const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight, idealNextHeight) : idealNextHeight;
+    const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth - cornerWidthOffset, idealNextWidth) : idealNextWidth;
+    const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight;
     const clampedNextWidth = Math.max(_constants.MIN_THUMB_SIZE, maxNextWidth * ratioX);
     const clampedNextHeight = Math.max(_constants.MIN_THUMB_SIZE, maxNextHeight * ratioY);
     setThumbSize(prevSize => {
@@ -191,23 +203,21 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
           height: 0
         });
       } else if (!scrollbarXHidden && !scrollbarYHidden) {
-        const width = scrollbarYEl?.offsetWidth || 0;
-        const height = scrollbarXEl?.offsetHeight || 0;
         setCornerSize({
-          width,
-          height
+          width: nextCornerWidth,
+          height: nextCornerHeight
         });
       }
     }
     setHiddenState(prevState => {
       const cornerHidden = scrollbarYHidden || scrollbarXHidden;
-      if (prevState.scrollbarYHidden === scrollbarYHidden && prevState.scrollbarXHidden === scrollbarXHidden && prevState.cornerHidden === cornerHidden) {
+      if (prevState.y === scrollbarYHidden && prevState.x === scrollbarXHidden && prevState.corner === cornerHidden) {
         return prevState;
       }
       return {
-        scrollbarYHidden,
-        scrollbarXHidden,
-        cornerHidden
+        y: scrollbarYHidden,
+        x: scrollbarXHidden,
+        corner: cornerHidden
       };
     });
     const nextOverflowEdges = {
@@ -222,17 +232,20 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       }
       return nextOverflowEdges;
     });
-  }
-  const computeThumbPosition = (0, _useStableCallback.useStableCallback)(() => {
-    ReactDOM.flushSync(computeThumbPositionHandler);
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!viewportRef.current) {
       return undefined;
     }
     removeCSSVariableInheritance();
-    const cleanup = (0, _onVisible.onVisible)(viewportRef.current, computeThumbPosition);
-    return cleanup;
+    let hasInitialized = false;
+    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
@@ -250,7 +263,16 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     if (typeof ResizeObserver === 'undefined' || !viewport) {
       return undefined;
     }
-    const ro = new ResizeObserver(computeThumbPosition);
+    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.
+      if (!hasInitialized) {
+        hasInitialized = true;
+        return;
+      }
+      computeThumbPosition();
+    });
     ro.observe(viewport);
 
     // If there are animations in the viewport, wait for them to finish and then recompute the thumb position.
@@ -261,9 +283,13 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     // We assume the user is using `onOpenChangeComplete` to hide the scrollbar
     // until animations complete because otherwise the scrollbar would show the thumb resizing mid-animation.
     waitForAnimationsTimeout.start(0, () => {
-      Promise.all(viewport.getAnimations({
+      const animations = viewport.getAnimations({
         subtree: true
-      }).map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
+      });
+      if (animations.length === 0) {
+        return;
+      }
+      Promise.all(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
       ro.disconnect();
@@ -279,7 +305,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       'data-id': `${rootId}-viewport`
     }),
     // https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable/
-    ...((!hiddenState.scrollbarXHidden || !hiddenState.scrollbarYHidden) && {
+    ...((!hiddenState.x || !hiddenState.y) && {
       tabIndex: 0
     }),
     className: _styles.styleDisableScrollbar.className,
@@ -315,14 +341,14 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     onKeyDown: handleUserInteraction
   };
   const viewportState = React.useMemo(() => ({
-    hasOverflowX: !hiddenState.scrollbarXHidden,
-    hasOverflowY: !hiddenState.scrollbarYHidden,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
     overflowXEnd: overflowEdges.xEnd,
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.cornerHidden
-  }), [hiddenState.scrollbarXHidden, hiddenState.scrollbarYHidden, hiddenState.cornerHidden, overflowEdges]);
+    cornerHidden: hiddenState.corner
+  }), [hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, viewportRef],
     state: viewportState,

package/select/arrow/SelectArrow.d.ts

@@ -7,7 +7,7 @@ import type { Align, Side } from "../../utils/useAnchorPositioning.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectArrow: React.ForwardRefExoticComponent<SelectArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectArrow: React.ForwardRefExoticComponent<Omit<SelectArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectArrowState {
   /**
    * Whether the select popup is currently open.

package/select/backdrop/SelectBackdrop.d.ts

@@ -7,7 +7,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectBackdrop: React.ForwardRefExoticComponent<SelectBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectBackdrop: React.ForwardRefExoticComponent<Omit<SelectBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectBackdropState {
   open: boolean;
   transitionStatus: TransitionStatus;

package/select/group/SelectGroup.d.ts

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

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

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

package/select/icon/SelectIcon.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectIcon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectIcon: React.ForwardRefExoticComponent<Omit<SelectIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface SelectIconState {
   /**
    * Whether the select popup is currently open.

package/select/item/SelectItem.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/typ
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectItem: React.NamedExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: React.NamedExoticComponent<Omit<SelectItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface SelectItemState {
   /**
    * Whether the item should ignore user interaction.

package/select/item/SelectItem.js

@@ -127,7 +127,6 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   const defaultProps = {
     role: 'option',
     'aria-selected': selected,
-    'aria-disabled': disabled || undefined,
     tabIndex: highlighted ? 0 : -1,
     onFocus() {
       store.set('activeIndex', index);

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

@@ -7,7 +7,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectItemIndicator: React.ForwardRefExoticComponent<SelectItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectItemIndicator: React.ForwardRefExoticComponent<Omit<SelectItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface SelectItemIndicatorState {
   selected: boolean;
   transitionStatus: TransitionStatus;

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

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

package/select/list/SelectList.d.ts

@@ -6,7 +6,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<SelectListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectList: React.ForwardRefExoticComponent<Omit<SelectListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectListProps extends BaseUIComponentProps<'div', SelectList.State> {}
 export interface SelectListState {}
 export declare namespace SelectList {

package/select/popup/SelectPopup.d.ts

@@ -8,7 +8,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<SelectPopupProps & React.RefAttributes<Element>>;
+export declare const SelectPopup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopup.State> {
   children?: React.ReactNode;
 }