@base-ui/react 1.6.0 → 1.7.0

package/scroll-area/root/ScrollAreaRoot.js

@@ -11,10 +11,8 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _ScrollAreaRootContext = require("./ScrollAreaRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
-var _ScrollAreaRootCssVars = require("./ScrollAreaRootCssVars");
 var _constants = require("../constants");
 var _getOffset = require("../utils/getOffset");
-var _ScrollAreaScrollbarDataAttributes = require("../scrollbar/ScrollAreaScrollbarDataAttributes");
 var _styles = require("../../utils/styles");
 var _useBaseUiId = require("../../internals/useBaseUiId");
 var _stateAttributes = require("./stateAttributes");
@@ -83,99 +81,145 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
   const thumbYRef = React.useRef(null);
   const thumbXRef = React.useRef(null);
   const cornerRef = React.useRef(null);
-  const thumbDraggingRef = React.useRef(false);
+  const activePointerIdRef = React.useRef(null);
   const startYRef = React.useRef(0);
   const startXRef = React.useRef(0);
   const startScrollTopRef = React.useRef(0);
   const startScrollLeftRef = React.useRef(0);
   const currentOrientationRef = React.useRef('vertical');
   const scrollPositionRef = React.useRef(DEFAULT_COORDS);
+  const savedSnapTypeRef = React.useRef(null);
+  function startScrolling(vertical) {
+    const setScrolling = vertical ? setScrollingY : setScrollingX;
+    const timeout = vertical ? scrollYTimeout : scrollXTimeout;
+    setScrolling(true);
+    timeout.start(_constants.SCROLL_TIMEOUT, () => {
+      setScrolling(false);
+    });
+  }
   const handleScroll = (0, _useStableCallback.useStableCallback)(scrollPosition => {
     const offsetX = scrollPosition.x - scrollPositionRef.current.x;
     const offsetY = scrollPosition.y - scrollPositionRef.current.y;
     scrollPositionRef.current = scrollPosition;
     if (offsetY !== 0) {
-      setScrollingY(true);
-      scrollYTimeout.start(_constants.SCROLL_TIMEOUT, () => {
-        setScrollingY(false);
-      });
+      startScrolling(true);
     }
     if (offsetX !== 0) {
-      setScrollingX(true);
-      scrollXTimeout.start(_constants.SCROLL_TIMEOUT, () => {
-        setScrollingX(false);
-      });
+      startScrolling(false);
+    }
+  });
+
+  // CSS scroll snap forces every programmatic scroll to land on a snap
+  // point, making thumb dragging jump between snap points. Native
+  // scrollbars suppress snapping while dragging, so disable it until the
+  // pointer is released; restoring the value re-snaps the viewport. The
+  // save is guarded so a second pointer during an active drag can't
+  // clobber the saved value with `none`.
+  const disableViewportSnap = (0, _useStableCallback.useStableCallback)(() => {
+    const viewportEl = viewportRef.current;
+    if (viewportEl && savedSnapTypeRef.current === null) {
+      savedSnapTypeRef.current = viewportEl.style.scrollSnapType;
+      viewportEl.style.scrollSnapType = 'none';
     }
   });
   const handlePointerDown = (0, _useStableCallback.useStableCallback)(event => {
     if (event.button !== 0) {
       return;
     }
-    thumbDraggingRef.current = true;
+    if (activePointerIdRef.current !== null) {
+      const activeThumb = currentOrientationRef.current === 'vertical' ? thumbYRef.current : thumbXRef.current;
+      // A live drag holds capture for the active pointer — ignore other pointers.
+      // No capture means the release went missing entirely (silent capture drop
+      // with an id that never reappears, e.g. a lost touch contact), so let the
+      // new pointer take over the latch instead of leaving dragging dead.
+      if (activeThumb?.hasPointerCapture(activePointerIdRef.current)) {
+        return;
+      }
+    }
+    activePointerIdRef.current = event.pointerId;
     startYRef.current = event.clientY;
     startXRef.current = event.clientX;
-    currentOrientationRef.current = event.currentTarget.getAttribute(_ScrollAreaScrollbarDataAttributes.ScrollAreaScrollbarDataAttributes.orientation);
-    if (viewportRef.current) {
-      startScrollTopRef.current = viewportRef.current.scrollTop;
-      startScrollLeftRef.current = viewportRef.current.scrollLeft;
-    }
-    if (thumbYRef.current && currentOrientationRef.current === 'vertical') {
-      thumbYRef.current.setPointerCapture(event.pointerId);
-    }
-    if (thumbXRef.current && currentOrientationRef.current === 'horizontal') {
-      thumbXRef.current.setPointerCapture(event.pointerId);
+    // Literal instead of `ScrollAreaScrollbarDataAttributes.orientation`: referencing an
+    // enum member retains its whole object in the bundle, so the strings are inlined and
+    // the enums kept for docs only.
+    currentOrientationRef.current = event.currentTarget.getAttribute('data-orientation');
+    const viewportEl = viewportRef.current;
+    if (viewportEl) {
+      startScrollTopRef.current = viewportEl.scrollTop;
+      startScrollLeftRef.current = viewportEl.scrollLeft;
+      disableViewportSnap();
     }
+    const thumb = currentOrientationRef.current === 'vertical' ? thumbYRef.current : thumbXRef.current;
+    thumb?.setPointerCapture(event.pointerId);
   });
-  const handlePointerMove = (0, _useStableCallback.useStableCallback)(event => {
-    if (!thumbDraggingRef.current) {
+  const handlePointerUp = (0, _useStableCallback.useStableCallback)(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
       return;
     }
-    const deltaY = event.clientY - startYRef.current;
-    const deltaX = event.clientX - startXRef.current;
-    if (viewportRef.current) {
-      const scrollableContentHeight = viewportRef.current.scrollHeight;
-      const viewportHeight = viewportRef.current.clientHeight;
-      const scrollableContentWidth = viewportRef.current.scrollWidth;
-      const viewportWidth = viewportRef.current.clientWidth;
-      if (thumbYRef.current && scrollbarYRef.current && currentOrientationRef.current === 'vertical') {
-        const scrollbarYOffset = (0, _getOffset.getOffset)(scrollbarYRef.current, 'padding', 'y');
-        const thumbYOffset = (0, _getOffset.getOffset)(thumbYRef.current, 'margin', 'y');
-        const thumbHeight = thumbYRef.current.offsetHeight;
-        const maxThumbOffsetY = scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
-        const scrollRatioY = deltaY / maxThumbOffsetY;
-        viewportRef.current.scrollTop = startScrollTopRef.current + scrollRatioY * (scrollableContentHeight - viewportHeight);
-        event.preventDefault();
-        setScrollingY(true);
-        scrollYTimeout.start(_constants.SCROLL_TIMEOUT, () => {
-          setScrollingY(false);
-        });
-      }
-      if (thumbXRef.current && scrollbarXRef.current && currentOrientationRef.current === 'horizontal') {
-        const scrollbarXOffset = (0, _getOffset.getOffset)(scrollbarXRef.current, 'padding', 'x');
-        const thumbXOffset = (0, _getOffset.getOffset)(thumbXRef.current, 'margin', 'x');
-        const thumbWidth = thumbXRef.current.offsetWidth;
-        const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
-        const scrollRatioX = deltaX / maxThumbOffsetX;
-        viewportRef.current.scrollLeft = startScrollLeftRef.current + scrollRatioX * (scrollableContentWidth - viewportWidth);
-        event.preventDefault();
-        setScrollingX(true);
-        scrollXTimeout.start(_constants.SCROLL_TIMEOUT, () => {
-          setScrollingX(false);
-        });
+    activePointerIdRef.current = null;
+    // Clear the drag's scrolling state immediately rather than waiting for the
+    // `SCROLL_TIMEOUT` timer armed by the last drag move, so every release path
+    // (real, `pointercancel`, or the missed-release fallback) behaves the same.
+    (currentOrientationRef.current === 'vertical' ? setScrollingY : setScrollingX)(false);
+    if (savedSnapTypeRef.current !== null) {
+      if (viewportRef.current) {
+        viewportRef.current.style.scrollSnapType = savedSnapTypeRef.current;
       }
+      savedSnapTypeRef.current = null;
     }
-  });
-  const handlePointerUp = (0, _useStableCallback.useStableCallback)(event => {
-    thumbDraggingRef.current = false;
-
+    const thumb = currentOrientationRef.current === 'vertical' ? thumbYRef.current : thumbXRef.current;
     // `pointercancel` releases capture implicitly, so guard against releasing a
     // capture we no longer hold (which would throw).
-    if (thumbYRef.current && currentOrientationRef.current === 'vertical' && thumbYRef.current.hasPointerCapture(event.pointerId)) {
-      thumbYRef.current.releasePointerCapture(event.pointerId);
+    if (thumb?.hasPointerCapture(event.pointerId)) {
+      thumb.releasePointerCapture(event.pointerId);
     }
-    if (thumbXRef.current && currentOrientationRef.current === 'horizontal' && thumbXRef.current.hasPointerCapture(event.pointerId)) {
-      thumbXRef.current.releasePointerCapture(event.pointerId);
+  });
+  const handlePointerMove = (0, _useStableCallback.useStableCallback)(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
+    }
+
+    // The release can go missing entirely (e.g. the browser drops pointer
+    // capture while the scrollbar is hidden mid-drag), leaving the drag
+    // latched so a buttonless hover over the thumb scrolls the viewport.
+    // Treat a move without the primary button held (`buttons` bit 1 unset)
+    // as the missed release.
+    if (event.buttons % 2 === 0) {
+      handlePointerUp(event);
+      return;
     }
+    const viewportEl = viewportRef.current;
+    if (!viewportEl) {
+      return;
+    }
+    const vertical = currentOrientationRef.current === 'vertical';
+    const thumbEl = vertical ? thumbYRef.current : thumbXRef.current;
+    const scrollbarEl = vertical ? scrollbarYRef.current : scrollbarXRef.current;
+    if (!thumbEl || !scrollbarEl) {
+      return;
+    }
+    const axis = vertical ? 'y' : 'x';
+    const scrollbarOffset = (0, _getOffset.getOffset)(scrollbarEl, 'padding', axis);
+    const thumbOffset = (0, _getOffset.getOffset)(thumbEl, 'margin', axis);
+    const thumbSizePx = vertical ? thumbEl.offsetHeight : thumbEl.offsetWidth;
+    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.
+    const delta = vertical ? event.clientY - startYRef.current : event.clientX - startXRef.current;
+    const scrollRatio = maxThumbOffset <= 0 ? 0 : delta / maxThumbOffset;
+    const scrollableSize = vertical ? viewportEl.scrollHeight : viewportEl.scrollWidth;
+    const viewportSize = vertical ? viewportEl.clientHeight : viewportEl.clientWidth;
+    const startScroll = vertical ? startScrollTopRef.current : startScrollLeftRef.current;
+    const nextScroll = startScroll + scrollRatio * (scrollableSize - viewportSize);
+    if (vertical) {
+      viewportEl.scrollTop = nextScroll;
+    } else {
+      viewportEl.scrollLeft = nextScroll;
+    }
+    event.preventDefault();
+    startScrolling(vertical);
   });
   function handleTouchModalityChange(event) {
     setTouchModality(event.pointerType === 'touch');
@@ -207,8 +251,8 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     },
     style: {
       position: 'relative',
-      [_ScrollAreaRootCssVars.ScrollAreaRootCssVars.scrollAreaCornerHeight]: `${cornerSize.height}px`,
-      [_ScrollAreaRootCssVars.ScrollAreaRootCssVars.scrollAreaCornerWidth]: `${cornerSize.width}px`
+      ['--scroll-area-corner-height']: `${cornerSize.height}px`,
+      ['--scroll-area-corner-width']: `${cornerSize.width}px`
     }
   };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
@@ -222,6 +266,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     handlePointerMove,
     handlePointerUp,
     handleScroll,
+    disableViewportSnap,
     cornerSize,
     setCornerSize,
     thumbSize,
@@ -231,13 +276,10 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     touchModality,
     cornerRef,
     scrollingX,
-    setScrollingX,
     scrollingY,
-    setScrollingY,
     hovering,
     setHovering,
     viewportRef,
-    rootRef,
     scrollbarYRef,
     scrollbarXRef,
     thumbYRef,
@@ -254,7 +296,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
       yStart,
       yEnd
     }
-  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, xStart, xEnd, yStart, yEnd]);
+  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, disableViewportSnap, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, scrollingY, hovering, rootId, hiddenState, overflowEdges, state, xStart, xEnd, yStart, yEnd]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ScrollAreaRootContext.ScrollAreaRootContext.Provider, {
     value: contextValue,
     children: [!disableStyleElements && _styles.styleDisableScrollbar.getElement(nonce), element]
@@ -262,19 +304,16 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaRoot.displayName = "ScrollAreaRoot";
 function normalizeOverflowEdgeThreshold(threshold) {
-  if (typeof threshold === 'number') {
-    const value = Math.max(0, threshold);
-    return {
-      xStart: value,
-      xEnd: value,
-      yStart: value,
-      yEnd: value
-    };
-  }
+  const thresholds = typeof threshold === 'number' ? {
+    xStart: threshold,
+    xEnd: threshold,
+    yStart: threshold,
+    yEnd: threshold
+  } : threshold;
   return {
-    xStart: Math.max(0, threshold?.xStart || 0),
-    xEnd: Math.max(0, threshold?.xEnd || 0),
-    yStart: Math.max(0, threshold?.yStart || 0),
-    yEnd: Math.max(0, threshold?.yEnd || 0)
+    xStart: Math.max(0, thresholds?.xStart || 0),
+    xEnd: Math.max(0, thresholds?.xEnd || 0),
+    yStart: Math.max(0, thresholds?.yStart || 0),
+    yEnd: Math.max(0, thresholds?.yEnd || 0)
   };
 }

package/scroll-area/root/ScrollAreaRoot.mjs

@@ -5,10 +5,8 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ScrollAreaRootContext } from "./ScrollAreaRootContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { ScrollAreaRootCssVars } from "./ScrollAreaRootCssVars.mjs";
 import { SCROLL_TIMEOUT } from "../constants.mjs";
 import { getOffset } from "../utils/getOffset.mjs";
-import { ScrollAreaScrollbarDataAttributes } from "../scrollbar/ScrollAreaScrollbarDataAttributes.mjs";
 import { styleDisableScrollbar } from "../../utils/styles.mjs";
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
 import { scrollAreaStateAttributesMapping } from "./stateAttributes.mjs";
@@ -77,99 +75,145 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
   const thumbYRef = React.useRef(null);
   const thumbXRef = React.useRef(null);
   const cornerRef = React.useRef(null);
-  const thumbDraggingRef = React.useRef(false);
+  const activePointerIdRef = React.useRef(null);
   const startYRef = React.useRef(0);
   const startXRef = React.useRef(0);
   const startScrollTopRef = React.useRef(0);
   const startScrollLeftRef = React.useRef(0);
   const currentOrientationRef = React.useRef('vertical');
   const scrollPositionRef = React.useRef(DEFAULT_COORDS);
+  const savedSnapTypeRef = React.useRef(null);
+  function startScrolling(vertical) {
+    const setScrolling = vertical ? setScrollingY : setScrollingX;
+    const timeout = vertical ? scrollYTimeout : scrollXTimeout;
+    setScrolling(true);
+    timeout.start(SCROLL_TIMEOUT, () => {
+      setScrolling(false);
+    });
+  }
   const handleScroll = useStableCallback(scrollPosition => {
     const offsetX = scrollPosition.x - scrollPositionRef.current.x;
     const offsetY = scrollPosition.y - scrollPositionRef.current.y;
     scrollPositionRef.current = scrollPosition;
     if (offsetY !== 0) {
-      setScrollingY(true);
-      scrollYTimeout.start(SCROLL_TIMEOUT, () => {
-        setScrollingY(false);
-      });
+      startScrolling(true);
     }
     if (offsetX !== 0) {
-      setScrollingX(true);
-      scrollXTimeout.start(SCROLL_TIMEOUT, () => {
-        setScrollingX(false);
-      });
+      startScrolling(false);
+    }
+  });
+
+  // CSS scroll snap forces every programmatic scroll to land on a snap
+  // point, making thumb dragging jump between snap points. Native
+  // scrollbars suppress snapping while dragging, so disable it until the
+  // pointer is released; restoring the value re-snaps the viewport. The
+  // save is guarded so a second pointer during an active drag can't
+  // clobber the saved value with `none`.
+  const disableViewportSnap = useStableCallback(() => {
+    const viewportEl = viewportRef.current;
+    if (viewportEl && savedSnapTypeRef.current === null) {
+      savedSnapTypeRef.current = viewportEl.style.scrollSnapType;
+      viewportEl.style.scrollSnapType = 'none';
     }
   });
   const handlePointerDown = useStableCallback(event => {
     if (event.button !== 0) {
       return;
     }
-    thumbDraggingRef.current = true;
+    if (activePointerIdRef.current !== null) {
+      const activeThumb = currentOrientationRef.current === 'vertical' ? thumbYRef.current : thumbXRef.current;
+      // A live drag holds capture for the active pointer — ignore other pointers.
+      // No capture means the release went missing entirely (silent capture drop
+      // with an id that never reappears, e.g. a lost touch contact), so let the
+      // new pointer take over the latch instead of leaving dragging dead.
+      if (activeThumb?.hasPointerCapture(activePointerIdRef.current)) {
+        return;
+      }
+    }
+    activePointerIdRef.current = event.pointerId;
     startYRef.current = event.clientY;
     startXRef.current = event.clientX;
-    currentOrientationRef.current = event.currentTarget.getAttribute(ScrollAreaScrollbarDataAttributes.orientation);
-    if (viewportRef.current) {
-      startScrollTopRef.current = viewportRef.current.scrollTop;
-      startScrollLeftRef.current = viewportRef.current.scrollLeft;
-    }
-    if (thumbYRef.current && currentOrientationRef.current === 'vertical') {
-      thumbYRef.current.setPointerCapture(event.pointerId);
-    }
-    if (thumbXRef.current && currentOrientationRef.current === 'horizontal') {
-      thumbXRef.current.setPointerCapture(event.pointerId);
+    // Literal instead of `ScrollAreaScrollbarDataAttributes.orientation`: referencing an
+    // enum member retains its whole object in the bundle, so the strings are inlined and
+    // the enums kept for docs only.
+    currentOrientationRef.current = event.currentTarget.getAttribute('data-orientation');
+    const viewportEl = viewportRef.current;
+    if (viewportEl) {
+      startScrollTopRef.current = viewportEl.scrollTop;
+      startScrollLeftRef.current = viewportEl.scrollLeft;
+      disableViewportSnap();
     }
+    const thumb = currentOrientationRef.current === 'vertical' ? thumbYRef.current : thumbXRef.current;
+    thumb?.setPointerCapture(event.pointerId);
   });
-  const handlePointerMove = useStableCallback(event => {
-    if (!thumbDraggingRef.current) {
+  const handlePointerUp = useStableCallback(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
       return;
     }
-    const deltaY = event.clientY - startYRef.current;
-    const deltaX = event.clientX - startXRef.current;
-    if (viewportRef.current) {
-      const scrollableContentHeight = viewportRef.current.scrollHeight;
-      const viewportHeight = viewportRef.current.clientHeight;
-      const scrollableContentWidth = viewportRef.current.scrollWidth;
-      const viewportWidth = viewportRef.current.clientWidth;
-      if (thumbYRef.current && scrollbarYRef.current && currentOrientationRef.current === 'vertical') {
-        const scrollbarYOffset = getOffset(scrollbarYRef.current, 'padding', 'y');
-        const thumbYOffset = getOffset(thumbYRef.current, 'margin', 'y');
-        const thumbHeight = thumbYRef.current.offsetHeight;
-        const maxThumbOffsetY = scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
-        const scrollRatioY = deltaY / maxThumbOffsetY;
-        viewportRef.current.scrollTop = startScrollTopRef.current + scrollRatioY * (scrollableContentHeight - viewportHeight);
-        event.preventDefault();
-        setScrollingY(true);
-        scrollYTimeout.start(SCROLL_TIMEOUT, () => {
-          setScrollingY(false);
-        });
-      }
-      if (thumbXRef.current && scrollbarXRef.current && currentOrientationRef.current === 'horizontal') {
-        const scrollbarXOffset = getOffset(scrollbarXRef.current, 'padding', 'x');
-        const thumbXOffset = getOffset(thumbXRef.current, 'margin', 'x');
-        const thumbWidth = thumbXRef.current.offsetWidth;
-        const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
-        const scrollRatioX = deltaX / maxThumbOffsetX;
-        viewportRef.current.scrollLeft = startScrollLeftRef.current + scrollRatioX * (scrollableContentWidth - viewportWidth);
-        event.preventDefault();
-        setScrollingX(true);
-        scrollXTimeout.start(SCROLL_TIMEOUT, () => {
-          setScrollingX(false);
-        });
+    activePointerIdRef.current = null;
+    // Clear the drag's scrolling state immediately rather than waiting for the
+    // `SCROLL_TIMEOUT` timer armed by the last drag move, so every release path
+    // (real, `pointercancel`, or the missed-release fallback) behaves the same.
+    (currentOrientationRef.current === 'vertical' ? setScrollingY : setScrollingX)(false);
+    if (savedSnapTypeRef.current !== null) {
+      if (viewportRef.current) {
+        viewportRef.current.style.scrollSnapType = savedSnapTypeRef.current;
       }
+      savedSnapTypeRef.current = null;
     }
-  });
-  const handlePointerUp = useStableCallback(event => {
-    thumbDraggingRef.current = false;
-
+    const thumb = currentOrientationRef.current === 'vertical' ? thumbYRef.current : thumbXRef.current;
     // `pointercancel` releases capture implicitly, so guard against releasing a
     // capture we no longer hold (which would throw).
-    if (thumbYRef.current && currentOrientationRef.current === 'vertical' && thumbYRef.current.hasPointerCapture(event.pointerId)) {
-      thumbYRef.current.releasePointerCapture(event.pointerId);
+    if (thumb?.hasPointerCapture(event.pointerId)) {
+      thumb.releasePointerCapture(event.pointerId);
     }
-    if (thumbXRef.current && currentOrientationRef.current === 'horizontal' && thumbXRef.current.hasPointerCapture(event.pointerId)) {
-      thumbXRef.current.releasePointerCapture(event.pointerId);
+  });
+  const handlePointerMove = useStableCallback(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
+    }
+
+    // The release can go missing entirely (e.g. the browser drops pointer
+    // capture while the scrollbar is hidden mid-drag), leaving the drag
+    // latched so a buttonless hover over the thumb scrolls the viewport.
+    // Treat a move without the primary button held (`buttons` bit 1 unset)
+    // as the missed release.
+    if (event.buttons % 2 === 0) {
+      handlePointerUp(event);
+      return;
     }
+    const viewportEl = viewportRef.current;
+    if (!viewportEl) {
+      return;
+    }
+    const vertical = currentOrientationRef.current === 'vertical';
+    const thumbEl = vertical ? thumbYRef.current : thumbXRef.current;
+    const scrollbarEl = vertical ? scrollbarYRef.current : scrollbarXRef.current;
+    if (!thumbEl || !scrollbarEl) {
+      return;
+    }
+    const axis = vertical ? 'y' : 'x';
+    const scrollbarOffset = getOffset(scrollbarEl, 'padding', axis);
+    const thumbOffset = getOffset(thumbEl, 'margin', axis);
+    const thumbSizePx = vertical ? thumbEl.offsetHeight : thumbEl.offsetWidth;
+    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.
+    const delta = vertical ? event.clientY - startYRef.current : event.clientX - startXRef.current;
+    const scrollRatio = maxThumbOffset <= 0 ? 0 : delta / maxThumbOffset;
+    const scrollableSize = vertical ? viewportEl.scrollHeight : viewportEl.scrollWidth;
+    const viewportSize = vertical ? viewportEl.clientHeight : viewportEl.clientWidth;
+    const startScroll = vertical ? startScrollTopRef.current : startScrollLeftRef.current;
+    const nextScroll = startScroll + scrollRatio * (scrollableSize - viewportSize);
+    if (vertical) {
+      viewportEl.scrollTop = nextScroll;
+    } else {
+      viewportEl.scrollLeft = nextScroll;
+    }
+    event.preventDefault();
+    startScrolling(vertical);
   });
   function handleTouchModalityChange(event) {
     setTouchModality(event.pointerType === 'touch');
@@ -201,8 +245,8 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     },
     style: {
       position: 'relative',
-      [ScrollAreaRootCssVars.scrollAreaCornerHeight]: `${cornerSize.height}px`,
-      [ScrollAreaRootCssVars.scrollAreaCornerWidth]: `${cornerSize.width}px`
+      ['--scroll-area-corner-height']: `${cornerSize.height}px`,
+      ['--scroll-area-corner-width']: `${cornerSize.width}px`
     }
   };
   const element = useRenderElement('div', componentProps, {
@@ -216,6 +260,7 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     handlePointerMove,
     handlePointerUp,
     handleScroll,
+    disableViewportSnap,
     cornerSize,
     setCornerSize,
     thumbSize,
@@ -225,13 +270,10 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     touchModality,
     cornerRef,
     scrollingX,
-    setScrollingX,
     scrollingY,
-    setScrollingY,
     hovering,
     setHovering,
     viewportRef,
-    rootRef,
     scrollbarYRef,
     scrollbarXRef,
     thumbYRef,
@@ -248,7 +290,7 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
       yStart,
       yEnd
     }
-  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, xStart, xEnd, yStart, yEnd]);
+  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, disableViewportSnap, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, scrollingY, hovering, rootId, hiddenState, overflowEdges, state, xStart, xEnd, yStart, yEnd]);
   return /*#__PURE__*/_jsxs(ScrollAreaRootContext.Provider, {
     value: contextValue,
     children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), element]
@@ -256,19 +298,16 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaRoot.displayName = "ScrollAreaRoot";
 function normalizeOverflowEdgeThreshold(threshold) {
-  if (typeof threshold === 'number') {
-    const value = Math.max(0, threshold);
-    return {
-      xStart: value,
-      xEnd: value,
-      yStart: value,
-      yEnd: value
-    };
-  }
+  const thresholds = typeof threshold === 'number' ? {
+    xStart: threshold,
+    xEnd: threshold,
+    yStart: threshold,
+    yEnd: threshold
+  } : threshold;
   return {
-    xStart: Math.max(0, threshold?.xStart || 0),
-    xEnd: Math.max(0, threshold?.xEnd || 0),
-    yStart: Math.max(0, threshold?.yStart || 0),
-    yEnd: Math.max(0, threshold?.yEnd || 0)
+    xStart: Math.max(0, thresholds?.xStart || 0),
+    xEnd: Math.max(0, thresholds?.xEnd || 0),
+    yStart: Math.max(0, thresholds?.yStart || 0),
+    yEnd: Math.max(0, thresholds?.yEnd || 0)
   };
 }

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

@@ -11,11 +11,8 @@ export interface ScrollAreaRootContext {
   hovering: boolean;
   setHovering: React.Dispatch<React.SetStateAction<boolean>>;
   scrollingX: boolean;
-  setScrollingX: React.Dispatch<React.SetStateAction<boolean>>;
   scrollingY: boolean;
-  setScrollingY: React.Dispatch<React.SetStateAction<boolean>>;
   viewportRef: React.RefObject<HTMLDivElement | null>;
-  rootRef: React.RefObject<HTMLDivElement | null>;
   scrollbarYRef: React.RefObject<HTMLDivElement | null>;
   thumbYRef: React.RefObject<HTMLDivElement | null>;
   scrollbarXRef: React.RefObject<HTMLDivElement | null>;
@@ -25,6 +22,7 @@ export interface ScrollAreaRootContext {
   handlePointerMove: (event: React.PointerEvent) => void;
   handlePointerUp: (event: React.PointerEvent) => void;
   handleScroll: (scrollPosition: Coords) => void;
+  disableViewportSnap: () => void;
   rootId: string | undefined;
   hiddenState: HiddenState;
   setHiddenState: React.Dispatch<React.SetStateAction<HiddenState>>;

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

@@ -11,11 +11,8 @@ export interface ScrollAreaRootContext {
   hovering: boolean;
   setHovering: React.Dispatch<React.SetStateAction<boolean>>;
   scrollingX: boolean;
-  setScrollingX: React.Dispatch<React.SetStateAction<boolean>>;
   scrollingY: boolean;
-  setScrollingY: React.Dispatch<React.SetStateAction<boolean>>;
   viewportRef: React.RefObject<HTMLDivElement | null>;
-  rootRef: React.RefObject<HTMLDivElement | null>;
   scrollbarYRef: React.RefObject<HTMLDivElement | null>;
   thumbYRef: React.RefObject<HTMLDivElement | null>;
   scrollbarXRef: React.RefObject<HTMLDivElement | null>;
@@ -25,6 +22,7 @@ export interface ScrollAreaRootContext {
   handlePointerMove: (event: React.PointerEvent) => void;
   handlePointerUp: (event: React.PointerEvent) => void;
   handleScroll: (scrollPosition: Coords) => void;
+  disableViewportSnap: () => void;
   rootId: string | undefined;
   hiddenState: HiddenState;
   setHiddenState: React.Dispatch<React.SetStateAction<HiddenState>>;

package/scroll-area/root/stateAttributes.js

@@ -4,25 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.scrollAreaStateAttributesMapping = void 0;
-var _ScrollAreaRootDataAttributes = require("./ScrollAreaRootDataAttributes");
+// Data-attribute strings inlined so `ScrollAreaRootDataAttributes` tree-shakes out.
+const attr = name => value => value ? {
+  [name]: ''
+} : null;
 const scrollAreaStateAttributesMapping = exports.scrollAreaStateAttributesMapping = {
-  hasOverflowX: value => value ? {
-    [_ScrollAreaRootDataAttributes.ScrollAreaRootDataAttributes.hasOverflowX]: ''
-  } : null,
-  hasOverflowY: value => value ? {
-    [_ScrollAreaRootDataAttributes.ScrollAreaRootDataAttributes.hasOverflowY]: ''
-  } : null,
-  overflowXStart: value => value ? {
-    [_ScrollAreaRootDataAttributes.ScrollAreaRootDataAttributes.overflowXStart]: ''
-  } : null,
-  overflowXEnd: value => value ? {
-    [_ScrollAreaRootDataAttributes.ScrollAreaRootDataAttributes.overflowXEnd]: ''
-  } : null,
-  overflowYStart: value => value ? {
-    [_ScrollAreaRootDataAttributes.ScrollAreaRootDataAttributes.overflowYStart]: ''
-  } : null,
-  overflowYEnd: value => value ? {
-    [_ScrollAreaRootDataAttributes.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
 };