@base-ui/react 1.6.0 → 1.7.0

package/scroll-area/root/stateAttributes.mjs

@@ -1,22 +1,13 @@
-import { ScrollAreaRootDataAttributes } from "./ScrollAreaRootDataAttributes.mjs";
+// Data-attribute strings inlined so `ScrollAreaRootDataAttributes` tree-shakes out.
+const attr = name => value => value ? {
+  [name]: ''
+} : null;
 export const scrollAreaStateAttributesMapping = {
-  hasOverflowX: value => value ? {
-    [ScrollAreaRootDataAttributes.hasOverflowX]: ''
-  } : null,
-  hasOverflowY: value => value ? {
-    [ScrollAreaRootDataAttributes.hasOverflowY]: ''
-  } : null,
-  overflowXStart: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowXStart]: ''
-  } : null,
-  overflowXEnd: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowXEnd]: ''
-  } : null,
-  overflowYStart: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowYStart]: ''
-  } : null,
-  overflowYEnd: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowYEnd]: ''
-  } : null,
+  hasOverflowX: attr('data-has-overflow-x'),
+  hasOverflowY: attr('data-has-overflow-y'),
+  overflowXStart: attr('data-overflow-x-start'),
+  overflowXEnd: attr('data-overflow-x-end'),
+  overflowYStart: attr('data-overflow-y-start'),
+  overflowYEnd: attr('data-overflow-y-end'),
   cornerHidden: () => null
 };

package/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -13,8 +13,6 @@ var _ScrollAreaRootContext = require("../root/ScrollAreaRootContext");
 var _ScrollAreaScrollbarContext = require("./ScrollAreaScrollbarContext");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _getOffset = require("../utils/getOffset");
-var _ScrollAreaRootCssVars = require("../root/ScrollAreaRootCssVars");
-var _ScrollAreaScrollbarCssVars = require("./ScrollAreaScrollbarCssVars");
 var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _stateAttributes = require("../root/stateAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -38,7 +36,6 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
     scrollingX,
     scrollingY,
     hiddenState,
-    overflowEdges,
     scrollbarYRef,
     scrollbarXRef,
     viewportRef,
@@ -47,43 +44,37 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
     handlePointerDown,
     handlePointerUp,
     handleScroll,
+    disableViewportSnap,
     rootId,
     thumbSize,
-    hasMeasuredScrollbar
+    hasMeasuredScrollbar,
+    viewportState
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
+  const vertical = orientation === 'vertical';
   const state = {
+    ...viewportState,
     hovering,
-    scrolling: {
-      horizontal: scrollingX,
-      vertical: scrollingY
-    }[orientation],
-    orientation,
-    hasOverflowX: !hiddenState.x,
-    hasOverflowY: !hiddenState.y,
-    overflowXStart: overflowEdges.xStart,
-    overflowXEnd: overflowEdges.xEnd,
-    overflowYStart: overflowEdges.yStart,
-    overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.corner
+    scrolling: vertical ? scrollingY : scrollingX,
+    orientation
   };
   const direction = (0, _DirectionContext.useDirection)();
   const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
-  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
+  const isHidden = vertical ? hiddenState.y : hiddenState.x;
   const shouldRender = keepMounted || !isHidden;
   React.useEffect(() => {
     if (!shouldRender) {
       return undefined;
     }
     const viewportEl = viewportRef.current;
-    const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
+    const scrollbarEl = vertical ? scrollbarYRef.current : scrollbarXRef.current;
     if (!scrollbarEl) {
       return undefined;
     }
     function handleWheel(event) {
-      if (!viewportEl || !scrollbarEl || event.ctrlKey) {
+      if (!viewportEl || event.ctrlKey) {
         return;
       }
-      const horizontal = orientation === 'horizontal';
+      const horizontal = !vertical;
       const scrollProperty = horizontal ? 'scrollLeft' : 'scrollTop';
       const delta = horizontal ? event.deltaX : event.deltaY;
       if (delta === 0) {
@@ -110,7 +101,7 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
     return (0, _addEventListener.addEventListener)(scrollbarEl, 'wheel', handleWheel, {
       passive: false
     });
-  }, [direction, handleScroll, orientation, scrollbarXRef, scrollbarYRef, shouldRender, viewportRef]);
+  }, [direction, handleScroll, vertical, scrollbarXRef, scrollbarYRef, shouldRender, viewportRef]);
   const props = {
     ...(rootId && {
       'data-id': `${rootId}-scrollbar`
@@ -120,58 +111,55 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
         return;
       }
       const target = (0, _utils.getTarget)(event.nativeEvent);
-      const thumb = orientation === 'vertical' ? thumbYRef.current : thumbXRef.current;
+      const thumbEl = vertical ? thumbYRef.current : thumbXRef.current;
 
       // Ignore clicks on thumb, including cases where React retargets the
       // synthetic event to the track host across a shadow boundary.
-      if (thumb && (0, _utils.contains)(thumb, target)) {
+      if (thumbEl && (0, _utils.contains)(thumbEl, target)) {
         return;
       }
-      if (!viewportRef.current) {
+      const viewportEl = viewportRef.current;
+      if (!viewportEl) {
         return;
       }
-
-      // Handle Y-axis (vertical) scroll
-      if (thumbYRef.current && scrollbarYRef.current && orientation === 'vertical') {
-        const thumbYOffset = (0, _getOffset.getOffset)(thumbYRef.current, 'margin', 'y');
-        const scrollbarYOffset = (0, _getOffset.getOffset)(scrollbarYRef.current, 'padding', 'y');
-        const thumbHeight = thumbYRef.current.offsetHeight;
-        const trackRectY = scrollbarYRef.current.getBoundingClientRect();
-        const clickY = event.clientY - trackRectY.top - thumbHeight / 2 - scrollbarYOffset + thumbYOffset / 2;
-        const scrollableContentHeight = viewportRef.current.scrollHeight;
-        const viewportHeight = viewportRef.current.clientHeight;
-        const maxThumbOffsetY = scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
-        const scrollRatioY = clickY / maxThumbOffsetY;
-        const newScrollTop = scrollRatioY * (scrollableContentHeight - viewportHeight);
-        viewportRef.current.scrollTop = newScrollTop;
+      const scrollbarEl = vertical ? scrollbarYRef.current : scrollbarXRef.current;
+      if (!thumbEl || !scrollbarEl) {
+        return;
+      }
+      const axis = vertical ? 'y' : 'x';
+      const thumbOffset = (0, _getOffset.getOffset)(thumbEl, 'margin', axis);
+      const scrollbarOffset = (0, _getOffset.getOffset)(scrollbarEl, 'padding', axis);
+      const thumbSizePx = vertical ? thumbEl.offsetHeight : thumbEl.offsetWidth;
+      const trackRect = scrollbarEl.getBoundingClientRect();
+      const clickPosition = vertical ? event.clientY - trackRect.top - thumbSizePx / 2 - scrollbarOffset + thumbOffset / 2 : event.clientX - trackRect.left - thumbSizePx / 2 - scrollbarOffset + thumbOffset / 2;
+      const scrollableSize = vertical ? viewportEl.scrollHeight : viewportEl.scrollWidth;
+      const viewportSize = vertical ? viewportEl.clientHeight : viewportEl.clientWidth;
+      const trackSize = vertical ? scrollbarEl.offsetHeight : scrollbarEl.offsetWidth;
+      const maxThumbOffset = trackSize - thumbSizePx - scrollbarOffset - thumbOffset;
+      // A short or heavily padded track can drive `maxThumbOffset` to zero or
+      // negative once the thumb hits its `MIN_THUMB_SIZE` floor. Dividing by it
+      // would yield a non-finite (`Infinity`/`NaN`) or inverted scroll position.
+      if (maxThumbOffset <= 0) {
+        return;
       }
-      if (thumbXRef.current && scrollbarXRef.current && orientation === 'horizontal') {
-        const thumbXOffset = (0, _getOffset.getOffset)(thumbXRef.current, 'margin', 'x');
-        const scrollbarXOffset = (0, _getOffset.getOffset)(scrollbarXRef.current, 'padding', 'x');
-        const thumbWidth = thumbXRef.current.offsetWidth;
-        const trackRectX = scrollbarXRef.current.getBoundingClientRect();
-        const clickX = event.clientX - trackRectX.left - thumbWidth / 2 - scrollbarXOffset + thumbXOffset / 2;
-        const scrollableContentWidth = viewportRef.current.scrollWidth;
-        const viewportWidth = viewportRef.current.clientWidth;
-        const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
-        const scrollRatioX = clickX / maxThumbOffsetX;
-        let newScrollLeft;
-        if (direction === 'rtl') {
-          // In RTL, invert the scroll direction
-          newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth);
+      const scrollRatio = clickPosition / maxThumbOffset;
+      const maxScrollDistance = scrollableSize - viewportSize;
 
-          // Adjust for browsers that use negative scrollLeft in RTL
-          if (viewportRef.current.scrollLeft <= 0) {
-            newScrollLeft = -newScrollLeft;
-          }
-        } else {
-          newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth);
-        }
-        viewportRef.current.scrollLeft = newScrollLeft;
+      // Disable snapping before the jump-to-click assignment, or the
+      // assigned position quantizes to the nearest snap point and the thumb
+      // stays offset from the pointer for the whole drag. `handlePointerDown`
+      // below re-runs this as a guarded no-op for the thumb-drag path.
+      disableViewportSnap();
+      if (vertical) {
+        viewportEl.scrollTop = scrollRatio * maxScrollDistance;
+      } else if (direction === 'rtl') {
+        viewportEl.scrollLeft = -(1 - scrollRatio) * maxScrollDistance;
+      } else {
+        viewportEl.scrollLeft = scrollRatio * maxScrollDistance;
       }
       handleScroll({
-        x: viewportRef.current.scrollLeft,
-        y: viewportRef.current.scrollTop
+        x: viewportEl.scrollLeft,
+        y: viewportEl.scrollTop
       });
       handlePointerDown(event);
     },
@@ -185,34 +173,30 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
       WebkitUserSelect: 'none',
       userSelect: 'none',
       visibility: hideTrackUntilMeasured ? 'hidden' : undefined,
-      ...(orientation === 'vertical' && {
+      ...(vertical ? {
         top: 0,
-        bottom: `var(${_ScrollAreaRootCssVars.ScrollAreaRootCssVars.scrollAreaCornerHeight})`,
+        bottom: 'var(--scroll-area-corner-height)',
         insetInlineEnd: 0,
-        [_ScrollAreaScrollbarCssVars.ScrollAreaScrollbarCssVars.scrollAreaThumbHeight]: `${thumbSize.height}px`
-      }),
-      ...(orientation === 'horizontal' && {
+        ['--scroll-area-thumb-height']: `${thumbSize.height}px`
+      } : {
         insetInlineStart: 0,
-        insetInlineEnd: `var(${_ScrollAreaRootCssVars.ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
+        insetInlineEnd: 'var(--scroll-area-corner-width)',
         bottom: 0,
-        [_ScrollAreaScrollbarCssVars.ScrollAreaScrollbarCssVars.scrollAreaThumbWidth]: `${thumbSize.width}px`
+        ['--scroll-area-thumb-width']: `${thumbSize.width}px`
       })
     }
   };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: [forwardedRef, orientation === 'vertical' ? scrollbarYRef : scrollbarXRef],
+    ref: [forwardedRef, vertical ? scrollbarYRef : scrollbarXRef],
     state,
     props: [props, elementProps],
     stateAttributesMapping: _stateAttributes.scrollAreaStateAttributesMapping
   });
-  const contextValue = React.useMemo(() => ({
-    orientation
-  }), [orientation]);
   if (!shouldRender) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollAreaScrollbarContext.ScrollAreaScrollbarContext.Provider, {
-    value: contextValue,
+    value: orientation,
     children: element
   });
 });

package/scroll-area/scrollbar/ScrollAreaScrollbar.mjs

@@ -7,8 +7,6 @@ import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.mjs";
 import { ScrollAreaScrollbarContext } from "./ScrollAreaScrollbarContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { getOffset } from "../utils/getOffset.mjs";
-import { ScrollAreaRootCssVars } from "../root/ScrollAreaRootCssVars.mjs";
-import { ScrollAreaScrollbarCssVars } from "./ScrollAreaScrollbarCssVars.mjs";
 import { useDirection } from "../../internals/direction-context/DirectionContext.mjs";
 import { scrollAreaStateAttributesMapping } from "../root/stateAttributes.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -32,7 +30,6 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
     scrollingX,
     scrollingY,
     hiddenState,
-    overflowEdges,
     scrollbarYRef,
     scrollbarXRef,
     viewportRef,
@@ -41,43 +38,37 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
     handlePointerDown,
     handlePointerUp,
     handleScroll,
+    disableViewportSnap,
     rootId,
     thumbSize,
-    hasMeasuredScrollbar
+    hasMeasuredScrollbar,
+    viewportState
   } = useScrollAreaRootContext();
+  const vertical = orientation === 'vertical';
   const state = {
+    ...viewportState,
     hovering,
-    scrolling: {
-      horizontal: scrollingX,
-      vertical: scrollingY
-    }[orientation],
-    orientation,
-    hasOverflowX: !hiddenState.x,
-    hasOverflowY: !hiddenState.y,
-    overflowXStart: overflowEdges.xStart,
-    overflowXEnd: overflowEdges.xEnd,
-    overflowYStart: overflowEdges.yStart,
-    overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.corner
+    scrolling: vertical ? scrollingY : scrollingX,
+    orientation
   };
   const direction = useDirection();
   const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
-  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
+  const isHidden = vertical ? hiddenState.y : hiddenState.x;
   const shouldRender = keepMounted || !isHidden;
   React.useEffect(() => {
     if (!shouldRender) {
       return undefined;
     }
     const viewportEl = viewportRef.current;
-    const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
+    const scrollbarEl = vertical ? scrollbarYRef.current : scrollbarXRef.current;
     if (!scrollbarEl) {
       return undefined;
     }
     function handleWheel(event) {
-      if (!viewportEl || !scrollbarEl || event.ctrlKey) {
+      if (!viewportEl || event.ctrlKey) {
         return;
       }
-      const horizontal = orientation === 'horizontal';
+      const horizontal = !vertical;
       const scrollProperty = horizontal ? 'scrollLeft' : 'scrollTop';
       const delta = horizontal ? event.deltaX : event.deltaY;
       if (delta === 0) {
@@ -104,7 +95,7 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
     return addEventListener(scrollbarEl, 'wheel', handleWheel, {
       passive: false
     });
-  }, [direction, handleScroll, orientation, scrollbarXRef, scrollbarYRef, shouldRender, viewportRef]);
+  }, [direction, handleScroll, vertical, scrollbarXRef, scrollbarYRef, shouldRender, viewportRef]);
   const props = {
     ...(rootId && {
       'data-id': `${rootId}-scrollbar`
@@ -114,58 +105,55 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
         return;
       }
       const target = getTarget(event.nativeEvent);
-      const thumb = orientation === 'vertical' ? thumbYRef.current : thumbXRef.current;
+      const thumbEl = vertical ? thumbYRef.current : thumbXRef.current;
 
       // Ignore clicks on thumb, including cases where React retargets the
       // synthetic event to the track host across a shadow boundary.
-      if (thumb && contains(thumb, target)) {
+      if (thumbEl && contains(thumbEl, target)) {
         return;
       }
-      if (!viewportRef.current) {
+      const viewportEl = viewportRef.current;
+      if (!viewportEl) {
         return;
       }
-
-      // Handle Y-axis (vertical) scroll
-      if (thumbYRef.current && scrollbarYRef.current && orientation === 'vertical') {
-        const thumbYOffset = getOffset(thumbYRef.current, 'margin', 'y');
-        const scrollbarYOffset = getOffset(scrollbarYRef.current, 'padding', 'y');
-        const thumbHeight = thumbYRef.current.offsetHeight;
-        const trackRectY = scrollbarYRef.current.getBoundingClientRect();
-        const clickY = event.clientY - trackRectY.top - thumbHeight / 2 - scrollbarYOffset + thumbYOffset / 2;
-        const scrollableContentHeight = viewportRef.current.scrollHeight;
-        const viewportHeight = viewportRef.current.clientHeight;
-        const maxThumbOffsetY = scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
-        const scrollRatioY = clickY / maxThumbOffsetY;
-        const newScrollTop = scrollRatioY * (scrollableContentHeight - viewportHeight);
-        viewportRef.current.scrollTop = newScrollTop;
+      const scrollbarEl = vertical ? scrollbarYRef.current : scrollbarXRef.current;
+      if (!thumbEl || !scrollbarEl) {
+        return;
+      }
+      const axis = vertical ? 'y' : 'x';
+      const thumbOffset = getOffset(thumbEl, 'margin', axis);
+      const scrollbarOffset = getOffset(scrollbarEl, 'padding', axis);
+      const thumbSizePx = vertical ? thumbEl.offsetHeight : thumbEl.offsetWidth;
+      const trackRect = scrollbarEl.getBoundingClientRect();
+      const clickPosition = vertical ? event.clientY - trackRect.top - thumbSizePx / 2 - scrollbarOffset + thumbOffset / 2 : event.clientX - trackRect.left - thumbSizePx / 2 - scrollbarOffset + thumbOffset / 2;
+      const scrollableSize = vertical ? viewportEl.scrollHeight : viewportEl.scrollWidth;
+      const viewportSize = vertical ? viewportEl.clientHeight : viewportEl.clientWidth;
+      const trackSize = vertical ? scrollbarEl.offsetHeight : scrollbarEl.offsetWidth;
+      const maxThumbOffset = trackSize - thumbSizePx - scrollbarOffset - thumbOffset;
+      // A short or heavily padded track can drive `maxThumbOffset` to zero or
+      // negative once the thumb hits its `MIN_THUMB_SIZE` floor. Dividing by it
+      // would yield a non-finite (`Infinity`/`NaN`) or inverted scroll position.
+      if (maxThumbOffset <= 0) {
+        return;
       }
-      if (thumbXRef.current && scrollbarXRef.current && orientation === 'horizontal') {
-        const thumbXOffset = getOffset(thumbXRef.current, 'margin', 'x');
-        const scrollbarXOffset = getOffset(scrollbarXRef.current, 'padding', 'x');
-        const thumbWidth = thumbXRef.current.offsetWidth;
-        const trackRectX = scrollbarXRef.current.getBoundingClientRect();
-        const clickX = event.clientX - trackRectX.left - thumbWidth / 2 - scrollbarXOffset + thumbXOffset / 2;
-        const scrollableContentWidth = viewportRef.current.scrollWidth;
-        const viewportWidth = viewportRef.current.clientWidth;
-        const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
-        const scrollRatioX = clickX / maxThumbOffsetX;
-        let newScrollLeft;
-        if (direction === 'rtl') {
-          // In RTL, invert the scroll direction
-          newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth);
+      const scrollRatio = clickPosition / maxThumbOffset;
+      const maxScrollDistance = scrollableSize - viewportSize;
 
-          // Adjust for browsers that use negative scrollLeft in RTL
-          if (viewportRef.current.scrollLeft <= 0) {
-            newScrollLeft = -newScrollLeft;
-          }
-        } else {
-          newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth);
-        }
-        viewportRef.current.scrollLeft = newScrollLeft;
+      // Disable snapping before the jump-to-click assignment, or the
+      // assigned position quantizes to the nearest snap point and the thumb
+      // stays offset from the pointer for the whole drag. `handlePointerDown`
+      // below re-runs this as a guarded no-op for the thumb-drag path.
+      disableViewportSnap();
+      if (vertical) {
+        viewportEl.scrollTop = scrollRatio * maxScrollDistance;
+      } else if (direction === 'rtl') {
+        viewportEl.scrollLeft = -(1 - scrollRatio) * maxScrollDistance;
+      } else {
+        viewportEl.scrollLeft = scrollRatio * maxScrollDistance;
       }
       handleScroll({
-        x: viewportRef.current.scrollLeft,
-        y: viewportRef.current.scrollTop
+        x: viewportEl.scrollLeft,
+        y: viewportEl.scrollTop
       });
       handlePointerDown(event);
     },
@@ -179,34 +167,30 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
       WebkitUserSelect: 'none',
       userSelect: 'none',
       visibility: hideTrackUntilMeasured ? 'hidden' : undefined,
-      ...(orientation === 'vertical' && {
+      ...(vertical ? {
         top: 0,
-        bottom: `var(${ScrollAreaRootCssVars.scrollAreaCornerHeight})`,
+        bottom: 'var(--scroll-area-corner-height)',
         insetInlineEnd: 0,
-        [ScrollAreaScrollbarCssVars.scrollAreaThumbHeight]: `${thumbSize.height}px`
-      }),
-      ...(orientation === 'horizontal' && {
+        ['--scroll-area-thumb-height']: `${thumbSize.height}px`
+      } : {
         insetInlineStart: 0,
-        insetInlineEnd: `var(${ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
+        insetInlineEnd: 'var(--scroll-area-corner-width)',
         bottom: 0,
-        [ScrollAreaScrollbarCssVars.scrollAreaThumbWidth]: `${thumbSize.width}px`
+        ['--scroll-area-thumb-width']: `${thumbSize.width}px`
       })
     }
   };
   const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, orientation === 'vertical' ? scrollbarYRef : scrollbarXRef],
+    ref: [forwardedRef, vertical ? scrollbarYRef : scrollbarXRef],
     state,
     props: [props, elementProps],
     stateAttributesMapping: scrollAreaStateAttributesMapping
   });
-  const contextValue = React.useMemo(() => ({
-    orientation
-  }), [orientation]);
   if (!shouldRender) {
     return null;
   }
   return /*#__PURE__*/_jsx(ScrollAreaScrollbarContext.Provider, {
-    value: contextValue,
+    value: orientation,
     children: element
   });
 });

package/scroll-area/scrollbar/ScrollAreaScrollbarContext.d.mts

@@ -1,6 +1,4 @@
 import * as React from 'react';
-export interface ScrollAreaScrollbarContext {
-  orientation: 'horizontal' | 'vertical';
-}
+export type ScrollAreaScrollbarContext = 'horizontal' | 'vertical';
 export declare const ScrollAreaScrollbarContext: React.Context<ScrollAreaScrollbarContext | undefined>;
 export declare function useScrollAreaScrollbarContext(): ScrollAreaScrollbarContext;

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

@@ -1,6 +1,4 @@
 import * as React from 'react';
-export interface ScrollAreaScrollbarContext {
-  orientation: 'horizontal' | 'vertical';
-}
+export type ScrollAreaScrollbarContext = 'horizontal' | 'vertical';
 export declare const ScrollAreaScrollbarContext: React.Context<ScrollAreaScrollbarContext | undefined>;
 export declare function useScrollAreaScrollbarContext(): ScrollAreaScrollbarContext;

package/scroll-area/thumb/ScrollAreaThumb.js

@@ -9,7 +9,6 @@ exports.ScrollAreaThumb = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _ScrollAreaRootContext = require("../root/ScrollAreaRootContext");
 var _ScrollAreaScrollbarContext = require("../scrollbar/ScrollAreaScrollbarContext");
-var _ScrollAreaScrollbarCssVars = require("../scrollbar/ScrollAreaScrollbarCssVars");
 var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * The draggable part of the scrollbar that indicates the current scroll position.
@@ -30,43 +29,30 @@ const ScrollAreaThumb = exports.ScrollAreaThumb = /*#__PURE__*/React.forwardRef(
     handlePointerDown,
     handlePointerMove,
     handlePointerUp,
-    setScrollingX,
-    setScrollingY,
     scrollingX,
     scrollingY,
     hasMeasuredScrollbar
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
-  const {
-    orientation
-  } = (0, _ScrollAreaScrollbarContext.useScrollAreaScrollbarContext)();
+  const orientation = (0, _ScrollAreaScrollbarContext.useScrollAreaScrollbarContext)();
+  const vertical = orientation === 'vertical';
   const state = {
-    scrolling: orientation === 'horizontal' ? scrollingX : scrollingY,
+    scrolling: vertical ? scrollingY : scrollingX,
     orientation
   };
-  function endDrag(event) {
-    if (orientation === 'vertical') {
-      setScrollingY(false);
-    }
-    if (orientation === 'horizontal') {
-      setScrollingX(false);
-    }
-    handlePointerUp(event);
-  }
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: [forwardedRef, orientation === 'vertical' ? thumbYRef : thumbXRef],
+    ref: [forwardedRef, vertical ? thumbYRef : thumbXRef],
     state,
     props: [{
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
-      onPointerUp: endDrag,
-      onPointerCancel: endDrag,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
       style: {
         visibility: hasMeasuredScrollbar ? undefined : 'hidden',
-        ...(orientation === 'vertical' && {
-          height: `var(${_ScrollAreaScrollbarCssVars.ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`
-        }),
-        ...(orientation === 'horizontal' && {
-          width: `var(${_ScrollAreaScrollbarCssVars.ScrollAreaScrollbarCssVars.scrollAreaThumbWidth})`
+        ...(vertical ? {
+          height: 'var(--scroll-area-thumb-height)'
+        } : {
+          width: 'var(--scroll-area-thumb-width)'
         })
       }
     }, elementProps]

package/scroll-area/thumb/ScrollAreaThumb.mjs

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.mjs";
 import { useScrollAreaScrollbarContext } from "../scrollbar/ScrollAreaScrollbarContext.mjs";
-import { ScrollAreaScrollbarCssVars } from "../scrollbar/ScrollAreaScrollbarCssVars.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 
 /**
@@ -25,43 +24,30 @@ export const ScrollAreaThumb = /*#__PURE__*/React.forwardRef(function ScrollArea
     handlePointerDown,
     handlePointerMove,
     handlePointerUp,
-    setScrollingX,
-    setScrollingY,
     scrollingX,
     scrollingY,
     hasMeasuredScrollbar
   } = useScrollAreaRootContext();
-  const {
-    orientation
-  } = useScrollAreaScrollbarContext();
+  const orientation = useScrollAreaScrollbarContext();
+  const vertical = orientation === 'vertical';
   const state = {
-    scrolling: orientation === 'horizontal' ? scrollingX : scrollingY,
+    scrolling: vertical ? scrollingY : scrollingX,
     orientation
   };
-  function endDrag(event) {
-    if (orientation === 'vertical') {
-      setScrollingY(false);
-    }
-    if (orientation === 'horizontal') {
-      setScrollingX(false);
-    }
-    handlePointerUp(event);
-  }
   const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, orientation === 'vertical' ? thumbYRef : thumbXRef],
+    ref: [forwardedRef, vertical ? thumbYRef : thumbXRef],
     state,
     props: [{
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
-      onPointerUp: endDrag,
-      onPointerCancel: endDrag,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
       style: {
         visibility: hasMeasuredScrollbar ? undefined : 'hidden',
-        ...(orientation === 'vertical' && {
-          height: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`
-        }),
-        ...(orientation === 'horizontal' && {
-          width: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbWidth})`
+        ...(vertical ? {
+          height: 'var(--scroll-area-thumb-height)'
+        } : {
+          width: 'var(--scroll-area-thumb-width)'
         })
       }
     }, elementProps]

package/scroll-area/utils/getOffset.js

@@ -9,12 +9,13 @@ function getOffset(element, prop, axis) {
     return 0;
   }
   const styles = getComputedStyle(element);
-  const propAxis = axis === 'x' ? 'Inline' : 'Block';
+  const key = `${prop}${axis === 'x' ? 'Inline' : 'Block'}`;
+  const start = parseFloat(styles[`${key}Start`]);
 
   // Safari misreports `marginInlineEnd` in RTL.
   // We have to assume the start/end values are symmetrical, which is likely.
   if (axis === 'x' && prop === 'margin') {
-    return parseFloat(styles[`${prop}InlineStart`]) * 2;
+    return start * 2;
   }
-  return parseFloat(styles[`${prop}${propAxis}Start`]) + parseFloat(styles[`${prop}${propAxis}End`]);
+  return start + parseFloat(styles[`${key}End`]);
 }