@wix/site-ui 1.30.0 → 1.31.0

package/dist/ScrollArea/index.js

@@ -1,44 +1,926 @@
-import { jsx } from "react/jsx-runtime";
-import { ScrollArea } from "@base-ui/react/scroll-area";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { useRenderElement, esm_formatErrorMessage } from "../8272.js";
+import { useBaseUiId } from "../6046.js";
+import { useTimeout } from "../42.js";
+import { useCSPContext } from "../6003.js";
+import { useStableCallback } from "../7541.js";
+import { getTarget, contains } from "../4549.js";
+import { styleDisableScrollbar, normalizeScrollOffset } from "../6329.js";
+import { isWebKit } from "../8971.js";
+import { useDirection } from "../9863.js";
+import { clamp } from "../3296.js";
+import { useIsoLayoutEffect } from "../6499.js";
+import { addEventListener } from "../4723.js";
 import * as __rspack_external_react from "react";
+const ScrollAreaRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) ScrollAreaRootContext.displayName = "ScrollAreaRootContext";
+function useScrollAreaRootContext() {
+    const context = __rspack_external_react.useContext(ScrollAreaRootContext);
+    if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: ScrollAreaRootContext is missing. ScrollArea parts must be placed within <ScrollArea.Root>.' : esm_formatErrorMessage(53));
+    return context;
+}
+let ScrollAreaRootCssVars_ScrollAreaRootCssVars = /*#__PURE__*/ function(ScrollAreaRootCssVars) {
+    ScrollAreaRootCssVars["scrollAreaCornerHeight"] = "--scroll-area-corner-height";
+    ScrollAreaRootCssVars["scrollAreaCornerWidth"] = "--scroll-area-corner-width";
+    return ScrollAreaRootCssVars;
+}({});
+function getOffset(element, prop, axis) {
+    if (!element) return 0;
+    const styles = getComputedStyle(element);
+    const propAxis = 'x' === axis ? 'Inline' : 'Block';
+    if ('x' === axis && 'margin' === prop) return 2 * parseFloat(styles[`${prop}InlineStart`]);
+    return parseFloat(styles[`${prop}${propAxis}Start`]) + parseFloat(styles[`${prop}${propAxis}End`]);
+}
+let ScrollAreaScrollbarDataAttributes_ScrollAreaScrollbarDataAttributes = /*#__PURE__*/ function(ScrollAreaScrollbarDataAttributes) {
+    ScrollAreaScrollbarDataAttributes["orientation"] = "data-orientation";
+    ScrollAreaScrollbarDataAttributes["hovering"] = "data-hovering";
+    ScrollAreaScrollbarDataAttributes["scrolling"] = "data-scrolling";
+    ScrollAreaScrollbarDataAttributes["hasOverflowX"] = "data-has-overflow-x";
+    ScrollAreaScrollbarDataAttributes["hasOverflowY"] = "data-has-overflow-y";
+    ScrollAreaScrollbarDataAttributes["overflowXStart"] = "data-overflow-x-start";
+    ScrollAreaScrollbarDataAttributes["overflowXEnd"] = "data-overflow-x-end";
+    ScrollAreaScrollbarDataAttributes["overflowYStart"] = "data-overflow-y-start";
+    ScrollAreaScrollbarDataAttributes["overflowYEnd"] = "data-overflow-y-end";
+    return ScrollAreaScrollbarDataAttributes;
+}({});
+let ScrollAreaRootDataAttributes_ScrollAreaRootDataAttributes = /*#__PURE__*/ function(ScrollAreaRootDataAttributes) {
+    ScrollAreaRootDataAttributes["scrolling"] = "data-scrolling";
+    ScrollAreaRootDataAttributes["hasOverflowX"] = "data-has-overflow-x";
+    ScrollAreaRootDataAttributes["hasOverflowY"] = "data-has-overflow-y";
+    ScrollAreaRootDataAttributes["overflowXStart"] = "data-overflow-x-start";
+    ScrollAreaRootDataAttributes["overflowXEnd"] = "data-overflow-x-end";
+    ScrollAreaRootDataAttributes["overflowYStart"] = "data-overflow-y-start";
+    ScrollAreaRootDataAttributes["overflowYEnd"] = "data-overflow-y-end";
+    return ScrollAreaRootDataAttributes;
+}({});
+const 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,
+    cornerHidden: ()=>null
+};
+const DEFAULT_COORDS = {
+    x: 0,
+    y: 0
+};
+const DEFAULT_SIZE = {
+    width: 0,
+    height: 0
+};
+const DEFAULT_OVERFLOW_EDGES = {
+    xStart: false,
+    xEnd: false,
+    yStart: false,
+    yEnd: false
+};
+const DEFAULT_HIDDEN_STATE = {
+    x: true,
+    y: true,
+    corner: true
+};
+const ScrollAreaRoot_ScrollAreaRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, overflowEdgeThreshold: overflowEdgeThresholdProp, style, ...elementProps } = componentProps;
+    const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
+    const rootId = useBaseUiId();
+    const scrollYTimeout = useTimeout();
+    const scrollXTimeout = useTimeout();
+    const { nonce, disableStyleElements } = useCSPContext();
+    const [hovering, setHovering] = __rspack_external_react.useState(false);
+    const [scrollingX, setScrollingX] = __rspack_external_react.useState(false);
+    const [scrollingY, setScrollingY] = __rspack_external_react.useState(false);
+    const [touchModality, setTouchModality] = __rspack_external_react.useState(false);
+    const [hasMeasuredScrollbar, setHasMeasuredScrollbar] = __rspack_external_react.useState(false);
+    const [cornerSize, setCornerSize] = __rspack_external_react.useState(DEFAULT_SIZE);
+    const [thumbSize, setThumbSize] = __rspack_external_react.useState(DEFAULT_SIZE);
+    const [overflowEdges, setOverflowEdges] = __rspack_external_react.useState(DEFAULT_OVERFLOW_EDGES);
+    const [hiddenState, setHiddenState] = __rspack_external_react.useState(DEFAULT_HIDDEN_STATE);
+    const rootRef = __rspack_external_react.useRef(null);
+    const viewportRef = __rspack_external_react.useRef(null);
+    const scrollbarYRef = __rspack_external_react.useRef(null);
+    const scrollbarXRef = __rspack_external_react.useRef(null);
+    const thumbYRef = __rspack_external_react.useRef(null);
+    const thumbXRef = __rspack_external_react.useRef(null);
+    const cornerRef = __rspack_external_react.useRef(null);
+    const thumbDraggingRef = __rspack_external_react.useRef(false);
+    const startYRef = __rspack_external_react.useRef(0);
+    const startXRef = __rspack_external_react.useRef(0);
+    const startScrollTopRef = __rspack_external_react.useRef(0);
+    const startScrollLeftRef = __rspack_external_react.useRef(0);
+    const currentOrientationRef = __rspack_external_react.useRef('vertical');
+    const scrollPositionRef = __rspack_external_react.useRef(DEFAULT_COORDS);
+    const handleScroll = useStableCallback((scrollPosition)=>{
+        const offsetX = scrollPosition.x - scrollPositionRef.current.x;
+        const offsetY = scrollPosition.y - scrollPositionRef.current.y;
+        scrollPositionRef.current = scrollPosition;
+        if (0 !== offsetY) {
+            setScrollingY(true);
+            scrollYTimeout.start(500, ()=>{
+                setScrollingY(false);
+            });
+        }
+        if (0 !== offsetX) {
+            setScrollingX(true);
+            scrollXTimeout.start(500, ()=>{
+                setScrollingX(false);
+            });
+        }
+    });
+    const handlePointerDown = useStableCallback((event)=>{
+        if (0 !== event.button) return;
+        thumbDraggingRef.current = true;
+        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 && 'vertical' === currentOrientationRef.current) thumbYRef.current.setPointerCapture(event.pointerId);
+        if (thumbXRef.current && 'horizontal' === currentOrientationRef.current) thumbXRef.current.setPointerCapture(event.pointerId);
+    });
+    const handlePointerMove = useStableCallback((event)=>{
+        if (!thumbDraggingRef.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 && 'vertical' === currentOrientationRef.current) {
+                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(500, ()=>{
+                    setScrollingY(false);
+                });
+            }
+            if (thumbXRef.current && scrollbarXRef.current && 'horizontal' === currentOrientationRef.current) {
+                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(500, ()=>{
+                    setScrollingX(false);
+                });
+            }
+        }
+    });
+    const handlePointerUp = useStableCallback((event)=>{
+        thumbDraggingRef.current = false;
+        if (thumbYRef.current && 'vertical' === currentOrientationRef.current) thumbYRef.current.releasePointerCapture(event.pointerId);
+        if (thumbXRef.current && 'horizontal' === currentOrientationRef.current) thumbXRef.current.releasePointerCapture(event.pointerId);
+    });
+    function handleTouchModalityChange(event) {
+        setTouchModality('touch' === event.pointerType);
+    }
+    function handlePointerEnterOrMove(event) {
+        handleTouchModalityChange(event);
+        if ('touch' !== event.pointerType) {
+            const isTargetRootChild = contains(rootRef.current, event.target);
+            setHovering(isTargetRootChild);
+        }
+    }
+    const state = __rspack_external_react.useMemo(()=>({
+            scrolling: scrollingX || scrollingY,
+            hasOverflowX: !hiddenState.x,
+            hasOverflowY: !hiddenState.y,
+            overflowXStart: overflowEdges.xStart,
+            overflowXEnd: overflowEdges.xEnd,
+            overflowYStart: overflowEdges.yStart,
+            overflowYEnd: overflowEdges.yEnd,
+            cornerHidden: hiddenState.corner
+        }), [
+        scrollingX,
+        scrollingY,
+        hiddenState.x,
+        hiddenState.y,
+        hiddenState.corner,
+        overflowEdges
+    ]);
+    const props = {
+        role: 'presentation',
+        onPointerEnter: handlePointerEnterOrMove,
+        onPointerMove: handlePointerEnterOrMove,
+        onPointerDown: handleTouchModalityChange,
+        onPointerLeave () {
+            setHovering(false);
+        },
+        style: {
+            position: 'relative',
+            [ScrollAreaRootCssVars_ScrollAreaRootCssVars.scrollAreaCornerHeight]: `${cornerSize.height}px`,
+            [ScrollAreaRootCssVars_ScrollAreaRootCssVars.scrollAreaCornerWidth]: `${cornerSize.width}px`
+        }
+    };
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            rootRef
+        ],
+        props: [
+            props,
+            elementProps
+        ],
+        stateAttributesMapping: scrollAreaStateAttributesMapping
+    });
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            handlePointerDown,
+            handlePointerMove,
+            handlePointerUp,
+            handleScroll,
+            cornerSize,
+            setCornerSize,
+            thumbSize,
+            setThumbSize,
+            hasMeasuredScrollbar,
+            setHasMeasuredScrollbar,
+            touchModality,
+            cornerRef,
+            scrollingX,
+            setScrollingX,
+            scrollingY,
+            setScrollingY,
+            hovering,
+            setHovering,
+            viewportRef,
+            rootRef,
+            scrollbarYRef,
+            scrollbarXRef,
+            thumbYRef,
+            thumbXRef,
+            rootId,
+            hiddenState,
+            setHiddenState,
+            overflowEdges,
+            setOverflowEdges,
+            viewportState: state,
+            overflowEdgeThreshold
+        }), [
+        handlePointerDown,
+        handlePointerMove,
+        handlePointerUp,
+        handleScroll,
+        cornerSize,
+        thumbSize,
+        hasMeasuredScrollbar,
+        touchModality,
+        scrollingX,
+        setScrollingX,
+        scrollingY,
+        setScrollingY,
+        hovering,
+        setHovering,
+        rootId,
+        hiddenState,
+        overflowEdges,
+        state,
+        overflowEdgeThreshold
+    ]);
+    return /*#__PURE__*/ jsxs(ScrollAreaRootContext.Provider, {
+        value: contextValue,
+        children: [
+            !disableStyleElements && styleDisableScrollbar.getElement(nonce),
+            element
+        ]
+    });
+});
+if ("production" !== process.env.NODE_ENV) ScrollAreaRoot_ScrollAreaRoot.displayName = "ScrollAreaRoot";
+function normalizeOverflowEdgeThreshold(threshold) {
+    if ('number' == typeof threshold) {
+        const value = Math.max(0, threshold);
+        return {
+            xStart: value,
+            xEnd: value,
+            yStart: value,
+            yEnd: value
+        };
+    }
+    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)
+    };
+}
+const ScrollAreaViewportContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) ScrollAreaViewportContext.displayName = "ScrollAreaViewportContext";
+function useScrollAreaViewportContext() {
+    const context = __rspack_external_react.useContext(ScrollAreaViewportContext);
+    if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: ScrollAreaViewportContext missing. ScrollAreaViewport parts must be placed within <ScrollArea.Viewport>.' : esm_formatErrorMessage(55));
+    return context;
+}
+let ScrollAreaViewportCssVars_ScrollAreaViewportCssVars = /*#__PURE__*/ function(ScrollAreaViewportCssVars) {
+    ScrollAreaViewportCssVars["scrollAreaOverflowXStart"] = "--scroll-area-overflow-x-start";
+    ScrollAreaViewportCssVars["scrollAreaOverflowXEnd"] = "--scroll-area-overflow-x-end";
+    ScrollAreaViewportCssVars["scrollAreaOverflowYStart"] = "--scroll-area-overflow-y-start";
+    ScrollAreaViewportCssVars["scrollAreaOverflowYEnd"] = "--scroll-area-overflow-y-end";
+    return ScrollAreaViewportCssVars;
+}({});
+let scrollAreaOverflowVarsRegistered = false;
+function removeCSSVariableInheritance() {
+    if (scrollAreaOverflowVarsRegistered || isWebKit) return;
+    if ("u" > typeof CSS && 'registerProperty' in CSS) [
+        ScrollAreaViewportCssVars_ScrollAreaViewportCssVars.scrollAreaOverflowXStart,
+        ScrollAreaViewportCssVars_ScrollAreaViewportCssVars.scrollAreaOverflowXEnd,
+        ScrollAreaViewportCssVars_ScrollAreaViewportCssVars.scrollAreaOverflowYStart,
+        ScrollAreaViewportCssVars_ScrollAreaViewportCssVars.scrollAreaOverflowYEnd
+    ].forEach((name)=>{
+        try {
+            CSS.registerProperty({
+                name,
+                syntax: '<length>',
+                inherits: false,
+                initialValue: '0px'
+            });
+        } catch  {}
+    });
+    scrollAreaOverflowVarsRegistered = true;
+}
+const ScrollAreaViewport_ScrollAreaViewport = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const { viewportRef, scrollbarYRef, scrollbarXRef, thumbYRef, thumbXRef, cornerRef, cornerSize, setCornerSize, setThumbSize, rootId, setHiddenState, hiddenState, setHasMeasuredScrollbar, handleScroll, setHovering, setOverflowEdges, overflowEdges, overflowEdgeThreshold, scrollingX, scrollingY } = useScrollAreaRootContext();
+    const direction = useDirection();
+    const programmaticScrollRef = __rspack_external_react.useRef(true);
+    const lastMeasuredViewportMetricsRef = __rspack_external_react.useRef([
+        NaN,
+        NaN,
+        NaN,
+        NaN
+    ]);
+    const scrollEndTimeout = useTimeout();
+    const waitForAnimationsTimeout = useTimeout();
+    const computeThumbPosition = useStableCallback(()=>{
+        const viewportEl = viewportRef.current;
+        const scrollbarYEl = scrollbarYRef.current;
+        const scrollbarXEl = scrollbarXRef.current;
+        const thumbYEl = thumbYRef.current;
+        const thumbXEl = thumbXRef.current;
+        const cornerEl = cornerRef.current;
+        if (!viewportEl) return;
+        const scrollableContentHeight = viewportEl.scrollHeight;
+        const scrollableContentWidth = viewportEl.scrollWidth;
+        const viewportHeight = viewportEl.clientHeight;
+        const viewportWidth = viewportEl.clientWidth;
+        const scrollTop = viewportEl.scrollTop;
+        const scrollLeft = viewportEl.scrollLeft;
+        const lastMeasuredViewportMetrics = lastMeasuredViewportMetricsRef.current;
+        const isFirstMeasurement = Number.isNaN(lastMeasuredViewportMetrics[0]);
+        lastMeasuredViewportMetrics[0] = viewportHeight;
+        lastMeasuredViewportMetrics[1] = scrollableContentHeight;
+        lastMeasuredViewportMetrics[2] = viewportWidth;
+        lastMeasuredViewportMetrics[3] = scrollableContentWidth;
+        if (isFirstMeasurement) setHasMeasuredScrollbar(true);
+        if (0 === scrollableContentHeight || 0 === scrollableContentWidth) return;
+        const nextHiddenState = getHiddenState(viewportEl);
+        const scrollbarYHidden = nextHiddenState.y;
+        const scrollbarXHidden = nextHiddenState.x;
+        const ratioX = viewportWidth / scrollableContentWidth;
+        const ratioY = viewportHeight / scrollableContentHeight;
+        const maxScrollLeft = Math.max(0, scrollableContentWidth - viewportWidth);
+        const maxScrollTop = Math.max(0, scrollableContentHeight - viewportHeight);
+        let scrollLeftFromStart = 0;
+        let scrollLeftFromEnd = 0;
+        if (!scrollbarXHidden) {
+            let rawScrollLeftFromStart = 0;
+            rawScrollLeftFromStart = 'rtl' === direction ? clamp(-scrollLeft, 0, maxScrollLeft) : clamp(scrollLeft, 0, maxScrollLeft);
+            scrollLeftFromStart = normalizeScrollOffset(rawScrollLeftFromStart, maxScrollLeft);
+            scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart;
+        }
+        const rawScrollTopFromStart = scrollbarYHidden ? 0 : clamp(scrollTop, 0, maxScrollTop);
+        const scrollTopFromStart = scrollbarYHidden ? 0 : normalizeScrollOffset(rawScrollTopFromStart, maxScrollTop);
+        const scrollTopFromEnd = scrollbarYHidden ? 0 : maxScrollTop - scrollTopFromStart;
+        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;
+        }
+        const cornerNotYetSized = 0 === cornerSize.width && 0 === cornerSize.height;
+        const cornerWidthOffset = cornerNotYetSized ? nextCornerWidth : 0;
+        const cornerHeightOffset = cornerNotYetSized ? nextCornerHeight : 0;
+        const scrollbarXOffset = getOffset(scrollbarXEl, 'padding', 'x');
+        const scrollbarYOffset = getOffset(scrollbarYEl, 'padding', 'y');
+        const thumbXOffset = getOffset(thumbXEl, 'margin', 'x');
+        const thumbYOffset = getOffset(thumbYEl, 'margin', 'y');
+        const idealNextWidth = nextWidth - scrollbarXOffset - thumbXOffset;
+        const idealNextHeight = nextHeight - scrollbarYOffset - thumbYOffset;
+        const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth - cornerWidthOffset, idealNextWidth) : idealNextWidth;
+        const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight;
+        const clampedNextWidth = Math.max(16, maxNextWidth * ratioX);
+        const clampedNextHeight = Math.max(16, maxNextHeight * ratioY);
+        setThumbSize((prevSize)=>{
+            if (prevSize.height === clampedNextHeight && prevSize.width === clampedNextWidth) return prevSize;
+            return {
+                width: clampedNextWidth,
+                height: clampedNextHeight
+            };
+        });
+        if (scrollbarYEl && thumbYEl) {
+            const maxThumbOffsetY = scrollbarYEl.offsetHeight - clampedNextHeight - scrollbarYOffset - thumbYOffset;
+            const scrollRangeY = scrollableContentHeight - viewportHeight;
+            const scrollRatioY = 0 === scrollRangeY ? 0 : scrollTop / scrollRangeY;
+            const thumbOffsetY = Math.min(maxThumbOffsetY, Math.max(0, scrollRatioY * maxThumbOffsetY));
+            thumbYEl.style.transform = `translate3d(0,${thumbOffsetY}px,0)`;
+        }
+        if (scrollbarXEl && thumbXEl) {
+            const maxThumbOffsetX = scrollbarXEl.offsetWidth - clampedNextWidth - scrollbarXOffset - thumbXOffset;
+            const scrollRangeX = scrollableContentWidth - viewportWidth;
+            const scrollRatioX = 0 === scrollRangeX ? 0 : scrollLeft / scrollRangeX;
+            const thumbOffsetX = 'rtl' === direction ? clamp(scrollRatioX * maxThumbOffsetX, -maxThumbOffsetX, 0) : clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX);
+            thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`;
+        }
+        const overflowMetricsPx = [
+            [
+                ScrollAreaViewportCssVars_ScrollAreaViewportCssVars.scrollAreaOverflowXStart,
+                scrollLeftFromStart
+            ],
+            [
+                ScrollAreaViewportCssVars_ScrollAreaViewportCssVars.scrollAreaOverflowXEnd,
+                scrollLeftFromEnd
+            ],
+            [
+                ScrollAreaViewportCssVars_ScrollAreaViewportCssVars.scrollAreaOverflowYStart,
+                scrollTopFromStart
+            ],
+            [
+                ScrollAreaViewportCssVars_ScrollAreaViewportCssVars.scrollAreaOverflowYEnd,
+                scrollTopFromEnd
+            ]
+        ];
+        for (const [cssVar, value] of overflowMetricsPx)viewportEl.style.setProperty(cssVar, `${value}px`);
+        if (cornerEl) {
+            if (scrollbarXHidden || scrollbarYHidden) setCornerSize({
+                width: 0,
+                height: 0
+            });
+            else if (!scrollbarXHidden && !scrollbarYHidden) setCornerSize({
+                width: nextCornerWidth,
+                height: nextCornerHeight
+            });
+        }
+        setHiddenState((prevState)=>mergeHiddenState(prevState, nextHiddenState));
+        const nextOverflowEdges = {
+            xStart: !scrollbarXHidden && scrollLeftFromStart > overflowEdgeThreshold.xStart,
+            xEnd: !scrollbarXHidden && scrollLeftFromEnd > overflowEdgeThreshold.xEnd,
+            yStart: !scrollbarYHidden && scrollTopFromStart > overflowEdgeThreshold.yStart,
+            yEnd: !scrollbarYHidden && scrollTopFromEnd > overflowEdgeThreshold.yEnd
+        };
+        setOverflowEdges((prev)=>{
+            if (prev.xStart === nextOverflowEdges.xStart && prev.xEnd === nextOverflowEdges.xEnd && prev.yStart === nextOverflowEdges.yStart && prev.yEnd === nextOverflowEdges.yEnd) return prev;
+            return nextOverflowEdges;
+        });
+    });
+    useIsoLayoutEffect(()=>{
+        if (!viewportRef.current) return;
+        removeCSSVariableInheritance();
+    }, [
+        viewportRef
+    ]);
+    useIsoLayoutEffect(()=>{
+        queueMicrotask(computeThumbPosition);
+    }, [
+        computeThumbPosition,
+        hiddenState,
+        direction
+    ]);
+    useIsoLayoutEffect(()=>{
+        if (viewportRef.current?.matches(':hover')) setHovering(true);
+    }, [
+        viewportRef,
+        setHovering
+    ]);
+    __rspack_external_react.useEffect(()=>{
+        const viewport = viewportRef.current;
+        if ("u" < typeof ResizeObserver || !viewport) return;
+        let hasInitialized = false;
+        const resizeObserver = new ResizeObserver(()=>{
+            if (!hasInitialized) {
+                hasInitialized = true;
+                const lastMeasuredViewportMetrics = lastMeasuredViewportMetricsRef.current;
+                if (lastMeasuredViewportMetrics[0] === viewport.clientHeight && lastMeasuredViewportMetrics[1] === viewport.scrollHeight && lastMeasuredViewportMetrics[2] === viewport.clientWidth && lastMeasuredViewportMetrics[3] === viewport.scrollWidth) return;
+            }
+            computeThumbPosition();
+        });
+        resizeObserver.observe(viewport);
+        waitForAnimationsTimeout.start(0, ()=>{
+            const animations = viewport.getAnimations({
+                subtree: true
+            });
+            if (0 === animations.length) return;
+            Promise.allSettled(animations.map((animation)=>animation.finished)).then(computeThumbPosition).catch(()=>{});
+        });
+        return ()=>{
+            resizeObserver.disconnect();
+            waitForAnimationsTimeout.clear();
+        };
+    }, [
+        computeThumbPosition,
+        viewportRef,
+        waitForAnimationsTimeout
+    ]);
+    function handleUserInteraction() {
+        programmaticScrollRef.current = false;
+    }
+    const props = {
+        role: 'presentation',
+        ...rootId && {
+            'data-id': `${rootId}-viewport`
+        },
+        tabIndex: hiddenState.x && hiddenState.y ? -1 : 0,
+        className: styleDisableScrollbar.className,
+        style: {
+            overflow: 'scroll'
+        },
+        onScroll () {
+            if (!viewportRef.current) return;
+            computeThumbPosition();
+            if (!programmaticScrollRef.current) handleScroll({
+                x: viewportRef.current.scrollLeft,
+                y: viewportRef.current.scrollTop
+            });
+            scrollEndTimeout.start(100, ()=>{
+                programmaticScrollRef.current = true;
+            });
+        },
+        onWheel: handleUserInteraction,
+        onTouchMove: handleUserInteraction,
+        onPointerMove: handleUserInteraction,
+        onPointerEnter: handleUserInteraction,
+        onKeyDown: handleUserInteraction
+    };
+    const viewportState = __rspack_external_react.useMemo(()=>({
+            scrolling: scrollingX || scrollingY,
+            hasOverflowX: !hiddenState.x,
+            hasOverflowY: !hiddenState.y,
+            overflowXStart: overflowEdges.xStart,
+            overflowXEnd: overflowEdges.xEnd,
+            overflowYStart: overflowEdges.yStart,
+            overflowYEnd: overflowEdges.yEnd,
+            cornerHidden: hiddenState.corner
+        }), [
+        scrollingX,
+        scrollingY,
+        hiddenState.x,
+        hiddenState.y,
+        hiddenState.corner,
+        overflowEdges
+    ]);
+    const element = useRenderElement('div', componentProps, {
+        ref: [
+            forwardedRef,
+            viewportRef
+        ],
+        state: viewportState,
+        props: [
+            props,
+            elementProps
+        ],
+        stateAttributesMapping: scrollAreaStateAttributesMapping
+    });
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            computeThumbPosition
+        }), [
+        computeThumbPosition
+    ]);
+    return /*#__PURE__*/ jsx(ScrollAreaViewportContext.Provider, {
+        value: contextValue,
+        children: element
+    });
+});
+if ("production" !== process.env.NODE_ENV) ScrollAreaViewport_ScrollAreaViewport.displayName = "ScrollAreaViewport";
+function getHiddenState(viewport) {
+    const y = viewport.clientHeight >= viewport.scrollHeight;
+    const x = viewport.clientWidth >= viewport.scrollWidth;
+    return {
+        y,
+        x,
+        corner: y || x
+    };
+}
+function mergeHiddenState(prevState, nextState) {
+    if (prevState.y === nextState.y && prevState.x === nextState.x && prevState.corner === nextState.corner) return prevState;
+    return nextState;
+}
+const ScrollAreaScrollbarContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) ScrollAreaScrollbarContext.displayName = "ScrollAreaScrollbarContext";
+function useScrollAreaScrollbarContext() {
+    const context = __rspack_external_react.useContext(ScrollAreaScrollbarContext);
+    if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: ScrollAreaScrollbarContext is missing. ScrollAreaScrollbar parts must be placed within <ScrollArea.Scrollbar>.' : esm_formatErrorMessage(54));
+    return context;
+}
+let ScrollAreaScrollbarCssVars_ScrollAreaScrollbarCssVars = /*#__PURE__*/ function(ScrollAreaScrollbarCssVars) {
+    ScrollAreaScrollbarCssVars["scrollAreaThumbHeight"] = "--scroll-area-thumb-height";
+    ScrollAreaScrollbarCssVars["scrollAreaThumbWidth"] = "--scroll-area-thumb-width";
+    return ScrollAreaScrollbarCssVars;
+}({});
+const ScrollAreaScrollbar_ScrollAreaScrollbar = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, orientation = 'vertical', keepMounted = false, style, ...elementProps } = componentProps;
+    const { hovering, scrollingX, scrollingY, hiddenState, overflowEdges, scrollbarYRef, scrollbarXRef, viewportRef, thumbYRef, thumbXRef, handlePointerDown, handlePointerUp, rootId, thumbSize, hasMeasuredScrollbar } = useScrollAreaRootContext();
+    const state = {
+        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
+    };
+    const direction = useDirection();
+    const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
+    const isHidden = 'vertical' === orientation ? hiddenState.y : hiddenState.x;
+    const shouldRender = keepMounted || !isHidden;
+    __rspack_external_react.useEffect(()=>{
+        if (!shouldRender) return;
+        const viewportEl = viewportRef.current;
+        const scrollbarEl = 'vertical' === orientation ? scrollbarYRef.current : scrollbarXRef.current;
+        if (!scrollbarEl) return;
+        function handleWheel(event) {
+            if (!viewportEl || !scrollbarEl || event.ctrlKey) return;
+            event.preventDefault();
+            const horizontal = 'horizontal' === orientation;
+            const scrollProperty = horizontal ? 'scrollLeft' : 'scrollTop';
+            const delta = horizontal ? event.deltaX : event.deltaY;
+            const maxScroll = horizontal ? viewportEl.scrollWidth - viewportEl.clientWidth : viewportEl.scrollHeight - viewportEl.clientHeight;
+            const minScroll = horizontal && 'rtl' === direction ? -maxScroll : 0;
+            const maxScrollValue = horizontal && 'rtl' === direction ? 0 : maxScroll;
+            const scrollValue = viewportEl[scrollProperty];
+            if (scrollValue <= minScroll && delta < 0 || scrollValue >= maxScrollValue && delta > 0) return;
+            viewportEl[scrollProperty] = Math.min(maxScrollValue, Math.max(minScroll, scrollValue + delta));
+        }
+        return addEventListener(scrollbarEl, 'wheel', handleWheel, {
+            passive: false
+        });
+    }, [
+        direction,
+        orientation,
+        scrollbarXRef,
+        scrollbarYRef,
+        shouldRender,
+        viewportRef
+    ]);
+    const props = {
+        ...rootId && {
+            'data-id': `${rootId}-scrollbar`
+        },
+        onPointerDown (event) {
+            if (0 !== event.button) return;
+            const target = getTarget(event.nativeEvent);
+            const thumb = 'vertical' === orientation ? thumbYRef.current : thumbXRef.current;
+            if (thumb && contains(thumb, target)) return;
+            if (!viewportRef.current) return;
+            if (thumbYRef.current && scrollbarYRef.current && 'vertical' === orientation) {
+                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;
+            }
+            if (thumbXRef.current && scrollbarXRef.current && 'horizontal' === orientation) {
+                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 ('rtl' === direction) {
+                    newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth);
+                    if (viewportRef.current.scrollLeft <= 0) newScrollLeft = -newScrollLeft;
+                } else newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth);
+                viewportRef.current.scrollLeft = newScrollLeft;
+            }
+            handlePointerDown(event);
+        },
+        onPointerUp: handlePointerUp,
+        style: {
+            position: 'absolute',
+            touchAction: 'none',
+            WebkitUserSelect: 'none',
+            userSelect: 'none',
+            visibility: hideTrackUntilMeasured ? 'hidden' : void 0,
+            ...'vertical' === orientation && {
+                top: 0,
+                bottom: `var(${ScrollAreaRootCssVars_ScrollAreaRootCssVars.scrollAreaCornerHeight})`,
+                insetInlineEnd: 0,
+                [ScrollAreaScrollbarCssVars_ScrollAreaScrollbarCssVars.scrollAreaThumbHeight]: `${thumbSize.height}px`
+            },
+            ...'horizontal' === orientation && {
+                insetInlineStart: 0,
+                insetInlineEnd: `var(${ScrollAreaRootCssVars_ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
+                bottom: 0,
+                [ScrollAreaScrollbarCssVars_ScrollAreaScrollbarCssVars.scrollAreaThumbWidth]: `${thumbSize.width}px`
+            }
+        }
+    };
+    const element = useRenderElement('div', componentProps, {
+        ref: [
+            forwardedRef,
+            'vertical' === orientation ? scrollbarYRef : scrollbarXRef
+        ],
+        state,
+        props: [
+            props,
+            elementProps
+        ],
+        stateAttributesMapping: scrollAreaStateAttributesMapping
+    });
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            orientation
+        }), [
+        orientation
+    ]);
+    if (!shouldRender) return null;
+    return /*#__PURE__*/ jsx(ScrollAreaScrollbarContext.Provider, {
+        value: contextValue,
+        children: element
+    });
+});
+if ("production" !== process.env.NODE_ENV) ScrollAreaScrollbar_ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";
+const ScrollAreaContent_ScrollAreaContent = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const { computeThumbPosition } = useScrollAreaViewportContext();
+    const { viewportState } = useScrollAreaRootContext();
+    const contentWrapperRef = __rspack_external_react.useRef(null);
+    useIsoLayoutEffect(()=>{
+        if ("u" < typeof ResizeObserver) return;
+        let hasInitialized = false;
+        const resizeObserver = new ResizeObserver(()=>{
+            if (!hasInitialized) {
+                hasInitialized = true;
+                return;
+            }
+            computeThumbPosition();
+        });
+        if (contentWrapperRef.current) resizeObserver.observe(contentWrapperRef.current);
+        return ()=>{
+            resizeObserver.disconnect();
+        };
+    }, [
+        computeThumbPosition
+    ]);
+    const element = useRenderElement('div', componentProps, {
+        ref: [
+            forwardedRef,
+            contentWrapperRef
+        ],
+        state: viewportState,
+        stateAttributesMapping: scrollAreaStateAttributesMapping,
+        props: [
+            {
+                role: 'presentation',
+                style: {
+                    minWidth: 'fit-content'
+                }
+            },
+            elementProps
+        ]
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) ScrollAreaContent_ScrollAreaContent.displayName = "ScrollAreaContent";
+const ScrollAreaThumb_ScrollAreaThumb = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const { thumbYRef, thumbXRef, handlePointerDown, handlePointerMove, handlePointerUp, setScrollingX, setScrollingY, hasMeasuredScrollbar } = useScrollAreaRootContext();
+    const { orientation } = useScrollAreaScrollbarContext();
+    const state = {
+        orientation
+    };
+    const element = useRenderElement('div', componentProps, {
+        ref: [
+            forwardedRef,
+            'vertical' === orientation ? thumbYRef : thumbXRef
+        ],
+        state,
+        props: [
+            {
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp (event) {
+                    if ('vertical' === orientation) setScrollingY(false);
+                    if ('horizontal' === orientation) setScrollingX(false);
+                    handlePointerUp(event);
+                },
+                style: {
+                    visibility: hasMeasuredScrollbar ? void 0 : 'hidden',
+                    ...'vertical' === orientation && {
+                        height: `var(${ScrollAreaScrollbarCssVars_ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`
+                    },
+                    ...'horizontal' === orientation && {
+                        width: `var(${ScrollAreaScrollbarCssVars_ScrollAreaScrollbarCssVars.scrollAreaThumbWidth})`
+                    }
+                }
+            },
+            elementProps
+        ]
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) ScrollAreaThumb_ScrollAreaThumb.displayName = "ScrollAreaThumb";
+const ScrollAreaCorner_ScrollAreaCorner = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const { cornerRef, cornerSize, hiddenState } = useScrollAreaRootContext();
+    const element = useRenderElement('div', componentProps, {
+        ref: [
+            forwardedRef,
+            cornerRef
+        ],
+        props: [
+            {
+                style: {
+                    position: 'absolute',
+                    bottom: 0,
+                    insetInlineEnd: 0,
+                    width: cornerSize.width,
+                    height: cornerSize.height
+                }
+            },
+            elementProps
+        ]
+    });
+    if (hiddenState.corner) return null;
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) ScrollAreaCorner_ScrollAreaCorner.displayName = "ScrollAreaCorner";
 const ScrollArea_module = {
     root: "root-_9VjLl",
     viewport: "viewport-AtdxVk",
     scrollbar: "scrollbar-NftRcM",
     thumb: "thumb-qKKUxU"
 };
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollArea.Root, {
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollAreaRoot_ScrollAreaRoot, {
         ref: ref,
         className: clsx(ScrollArea_module.root, className),
         ...props
     }));
-const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollArea.Viewport, {
+const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollAreaViewport_ScrollAreaViewport, {
         ref: ref,
         className: clsx(ScrollArea_module.viewport, className),
         ...props
     }));
-const Scrollbar = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
+const Scrollbar = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollAreaScrollbar_ScrollAreaScrollbar, {
         ref: ref,
         className: clsx(ScrollArea_module.scrollbar, className),
         ...props
     }));
-const Content = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollArea.Content, {
+const Content = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollAreaContent_ScrollAreaContent, {
         ref: ref,
         className: clsx(ScrollArea_module.content, className),
         ...props
     }));
-const Thumb = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollArea.Thumb, {
+const Thumb = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollAreaThumb_ScrollAreaThumb, {
         ref: ref,
         className: clsx(ScrollArea_module.thumb, className),
         ...props
     }));
-const Corner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollArea.Corner, {
+const Corner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollAreaCorner_ScrollAreaCorner, {
         ref: ref,
         className: clsx(ScrollArea_module.corner, className),
         ...props
     }));
-const ScrollArea_ScrollArea = {
+const ScrollArea = {
     Root: Root,
     Viewport: Viewport,
     Scrollbar: Scrollbar,
@@ -46,4 +928,4 @@ const ScrollArea_ScrollArea = {
     Thumb: Thumb,
     Corner: Corner
 };
-export { ScrollArea_ScrollArea as ScrollArea };
+export { ScrollArea };