reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/ScrollArea/ScrollArea.js

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
 import { classNames } from "@reshaped/utilities";
 import { disableScroll, enableScroll } from "@reshaped/utilities/internal";
-import useHandlerRef from "../../hooks/useHandlerRef";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
-import { resolveMixin } from "../../styles/mixin";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./ScrollArea.module.css";
 const ScrollAreaBar = (props) => {
-    const { ratio, position, vertical, onThumbMove } = props;
+    const { ratio, vertical, scrollableRef, onThumbMove } = props;
     const onThumbMoveRef = useHandlerRef(onThumbMove);
     const [dragging, setDragging] = React.useState(false);
     const dragStartPositionRef = React.useRef(0);
@@ -49,6 +49,31 @@ const ScrollAreaBar = (props) => {
         setDragging(false);
         enableScroll();
     }, []);
+    /**
+     * Thumb position is written directly to a css variable on the bar instead of the react state,
+     * so scrolling doesn't re-render the component and the style recalculation stays scoped to the bar
+     */
+    useIsomorphicLayoutEffect(() => {
+        const scrollableEl = scrollableRef.current;
+        const barEl = barRef.current;
+        if (!scrollableEl || !barEl)
+            return;
+        const updatePosition = () => {
+            const { scrollLeft, scrollTop, clientWidth, clientHeight, scrollWidth, scrollHeight } = scrollableEl;
+            const position = vertical
+                ? scrollHeight <= clientHeight
+                    ? 0
+                    : scrollTop / scrollHeight
+                : scrollWidth <= clientWidth
+                    ? 0
+                    : scrollLeft / scrollWidth;
+            barEl.style.setProperty("--rs-scroll-area-position", `${position}`);
+        };
+        updatePosition();
+        scrollableEl.addEventListener("scroll", updatePosition, { passive: true });
+        return () => scrollableEl.removeEventListener("scroll", updatePosition);
+        // Ratio is included to re-sync the position after the content or the container size changes
+    }, [vertical, scrollableRef, ratio]);
     React.useEffect(() => {
         if (!dragging)
             return;
@@ -59,15 +84,11 @@ const ScrollAreaBar = (props) => {
             document.removeEventListener("mouseup", handleDragEnd);
         };
     }, [handleDrag, handleDragEnd, dragging]);
-    return (_jsx("div", { className: barClassNames, style: {
-            "--rs-scroll-area-ratio": ratio,
-            "--rs-scroll-area-position": position,
-        }, ref: barRef, onClick: handleClick, onMouseDown: handleDragStart, "aria-hidden": "true", children: _jsx("div", { className: s.thumb }) }));
+    return (_jsx("div", { className: barClassNames, style: { "--rs-scroll-area-ratio": ratio }, ref: barRef, onClick: handleClick, onMouseDown: handleDragStart, "aria-hidden": "true", children: _jsx("div", { className: s.thumb }) }));
 };
 const ScrollArea = forwardRef((props, ref) => {
     const { children, height, maxHeight, orientation = "both", scrollbarDisplay = "hover", overscrollBehavior = "auto", fade, onScroll, className, attributes, scrollableAttributes, scrollableClassName, } = props;
     const [scrollRatio, setScrollRatio] = React.useState({ x: 1, y: 1 });
-    const [scrollPosition, setScrollPosition] = React.useState({ x: 0, y: 0 });
     const [scrolling, setScrolling] = React.useState(false);
     const scrollingTimeoutRef = React.useRef(undefined);
     const scrollableRef = React.useRef(null);
@@ -80,15 +101,11 @@ const ScrollArea = forwardRef((props, ref) => {
         const scrollableEl = scrollableRef.current;
         if (!scrollableEl)
             return;
-        const { scrollLeft, scrollTop, clientWidth, clientHeight, scrollWidth, scrollHeight } = scrollableEl;
+        const { clientWidth, clientHeight, scrollWidth, scrollHeight } = scrollableEl;
         setScrollRatio({
             x: scrollWidth === 0 ? 1 : Math.min(clientWidth / scrollWidth, 1),
             y: scrollHeight === 0 ? 1 : Math.min(clientHeight / scrollHeight, 1),
         });
-        setScrollPosition({
-            x: scrollWidth <= clientWidth ? 0 : scrollLeft / scrollWidth,
-            y: scrollHeight <= clientHeight ? 0 : scrollTop / scrollHeight,
-        });
     }, []);
     const handleScroll = (e) => {
         const { scrollLeft, scrollTop, clientWidth, clientHeight, scrollWidth, scrollHeight } = e.currentTarget;
@@ -97,10 +114,6 @@ const ScrollArea = forwardRef((props, ref) => {
             clearTimeout(scrollingTimeoutRef.current);
             scrollingTimeoutRef.current = setTimeout(() => setScrolling(false), 1000);
         }
-        setScrollPosition({
-            x: scrollLeft / scrollWidth,
-            y: scrollTop / scrollHeight,
-        });
         onScroll?.({
             x: scrollWidth === clientWidth ? 0 : scrollLeft / (scrollWidth - clientWidth),
             y: scrollHeight === clientHeight ? 0 : scrollTop / (scrollHeight - clientHeight),
@@ -161,7 +174,7 @@ const ScrollArea = forwardRef((props, ref) => {
             mutationObserver.disconnect();
         };
     }, [updateScroll]);
-    return (_jsxs("div", { ...attributes, ref: rootRef, className: rootClassNames, style: mixinStyles.variables, children: [_jsx("div", { className: scrollableClassNames, ref: scrollableRef, onScroll: handleScroll, children: _jsx("div", { ...scrollableAttributes, className: classNames(s.content, scrollableClassName), ref: contentRef, children: children }) }), orientation !== "horizontal" && scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), orientation !== "vertical" && scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
+    return (_jsxs("div", { ...attributes, ref: rootRef, className: rootClassNames, style: mixinStyles.variables, children: [_jsx("div", { className: scrollableClassNames, ref: scrollableRef, onScroll: handleScroll, children: _jsx("div", { ...scrollableAttributes, className: classNames(s.content, scrollableClassName), ref: contentRef, children: children }) }), orientation !== "horizontal" && scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, scrollableRef: scrollableRef })), orientation !== "vertical" && scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, scrollableRef: scrollableRef }))] }));
 });
 ScrollArea.displayName = "ScrollArea";
 export default ScrollArea;

package/dist/components/ScrollArea/ScrollArea.module.css

@@ -1 +1 @@
-@property --rs-scroll-area-fade-block-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-block-end{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-inline-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-inline-end{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-scroll-area-thumb-size:var(--rs-unit-x1);--rs-scroll-area-thumb-offset:var(--rs-unit-x1);--rs-scroll-area-fade-size:var(--rs-unit-x8);overflow:hidden;height:100%;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){outline:var(--rs-outline)}.scrollable{height:100%;position:relative;overflow:auto;scrollbar-width:none;outline:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;width:0;height:0}.--orientation-vertical{overflow-x:hidden}.--orientation-vertical>.content{max-width:100%}.--orientation-horizontal{overflow-y:hidden}.--orientation-horizontal>.content{max-height:100%}@keyframes fade-block-start{0%{--rs-scroll-area-fade-block-start:0px}to{--rs-scroll-area-fade-block-start:var(--rs-scroll-area-fade-size)}}@keyframes fade-block-end{0%{--rs-scroll-area-fade-block-end:var(--rs-scroll-area-fade-size)}to{--rs-scroll-area-fade-block-end:0px}}@keyframes fade-inline-start{0%{--rs-scroll-area-fade-inline-start:0px}to{--rs-scroll-area-fade-inline-start:var(--rs-scroll-area-fade-size)}}@keyframes fade-inline-end{0%{--rs-scroll-area-fade-inline-end:var(--rs-scroll-area-fade-size)}to{--rs-scroll-area-fade-inline-end:0px}}@supports (animation-timeline:scroll(self block)){.--fade{--rs-scroll-area-fade-inline-direction:to right;mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.1) calc(var(--rs-scroll-area-fade-block-start) * .2),rgba(0,0,0,.35) calc(var(--rs-scroll-area-fade-block-start) * .4),rgba(0,0,0,.65) calc(var(--rs-scroll-area-fade-block-start) * .6),rgba(0,0,0,.9) calc(var(--rs-scroll-area-fade-block-start) * .8),#000 var(--rs-scroll-area-fade-block-start),#000 calc(100% - var(--rs-scroll-area-fade-block-end)),rgba(0,0,0,.9) calc(100% - var(--rs-scroll-area-fade-block-end) * .8),rgba(0,0,0,.65) calc(100% - var(--rs-scroll-area-fade-block-end) * .6),rgba(0,0,0,.35) calc(100% - var(--rs-scroll-area-fade-block-end) * .4),rgba(0,0,0,.1) calc(100% - var(--rs-scroll-area-fade-block-end) * .2),transparent 100%),linear-gradient(var(--rs-scroll-area-fade-inline-direction),transparent 0,rgba(0,0,0,.1) calc(var(--rs-scroll-area-fade-inline-start) * .2),rgba(0,0,0,.35) calc(var(--rs-scroll-area-fade-inline-start) * .4),rgba(0,0,0,.65) calc(var(--rs-scroll-area-fade-inline-start) * .6),rgba(0,0,0,.9) calc(var(--rs-scroll-area-fade-inline-start) * .8),#000 var(--rs-scroll-area-fade-inline-start),#000 calc(100% - var(--rs-scroll-area-fade-inline-end)),rgba(0,0,0,.9) calc(100% - var(--rs-scroll-area-fade-inline-end) * .8),rgba(0,0,0,.65) calc(100% - var(--rs-scroll-area-fade-inline-end) * .6),rgba(0,0,0,.35) calc(100% - var(--rs-scroll-area-fade-inline-end) * .4),rgba(0,0,0,.1) calc(100% - var(--rs-scroll-area-fade-inline-end) * .2),transparent 100%);mask-composite:intersect;animation-name:fade-block-start,fade-block-end,fade-inline-start,fade-inline-end;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(self block),scroll(self block),scroll(self inline),scroll(self inline);animation-range:0 var(--rs-scroll-area-fade-size),calc(100% - var(--rs-scroll-area-fade-size)) 100%,0 var(--rs-scroll-area-fade-size),calc(100% - var(--rs-scroll-area-fade-size)) 100%}[dir=rtl] .--fade{--rs-scroll-area-fade-inline-direction:to left}}.--overscroll-auto{overscroll-behavior:auto}.--overscroll-contain{overscroll-behavior:contain}.content{display:inline-block;vertical-align:top;min-width:100%;min-height:100%;height:100%}.scrollbar{position:absolute;box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset)}.thumb{position:relative;height:100%;width:100%;background-color:var(--rs-color-background-neutral-faded);opacity:0}.thumb,.thumb:before{border-radius:var(--rs-radius-circular);transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.thumb:before{content:"";display:block;background:var(--rs-color-foreground-neutral);position:absolute;opacity:.2}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size);padding-block:calc(var(--rs-scroll-area-thumb-offset) + var(--rs-unit-x1))}.--scrollbar-y .thumb:before{inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%;height:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-x{inset-inline:0;inset-block-end:0;height:var(--rs-scroll-area-thumb-size);padding-inline:calc(var(--rs-scroll-area-thumb-offset) + var(--rs-unit-x0-5))}.--scrollbar-x .thumb:before{inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);height:100%;width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb,.--display-hover>.--scrollbar-dragging .thumb,.--display-scroll.--scrolling>.scrollbar .thumb,.--display-scroll>.--scrollbar-dragging .thumb,.--display-visible>.scrollbar .thumb{opacity:1}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
+@property --rs-scroll-area-fade-block-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-block-end{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-inline-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-inline-end{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-scroll-area-thumb-size:var(--rs-unit-x1);--rs-scroll-area-thumb-offset:var(--rs-unit-x1);--rs-scroll-area-fade-size:var(--rs-unit-x8);overflow:hidden;height:100%;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){outline:var(--rs-outline)}.scrollable{height:100%;position:relative;overflow:auto;scrollbar-width:none;outline:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;width:0;height:0}.--orientation-vertical{overflow-x:hidden}.--orientation-vertical>.content{max-width:100%}.--orientation-horizontal{overflow-y:hidden}.--orientation-horizontal>.content{max-height:100%}@keyframes fade-block-start{0%{--rs-scroll-area-fade-block-start:0px}to{--rs-scroll-area-fade-block-start:var(--rs-scroll-area-fade-size)}}@keyframes fade-block-end{0%{--rs-scroll-area-fade-block-end:var(--rs-scroll-area-fade-size)}to{--rs-scroll-area-fade-block-end:0px}}@keyframes fade-inline-start{0%{--rs-scroll-area-fade-inline-start:0px}to{--rs-scroll-area-fade-inline-start:var(--rs-scroll-area-fade-size)}}@keyframes fade-inline-end{0%{--rs-scroll-area-fade-inline-end:var(--rs-scroll-area-fade-size)}to{--rs-scroll-area-fade-inline-end:0px}}@supports (animation-timeline:scroll(self block)){.--fade{--rs-scroll-area-fade-inline-direction:to right;mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.1) calc(var(--rs-scroll-area-fade-block-start) * .2),rgba(0,0,0,.35) calc(var(--rs-scroll-area-fade-block-start) * .4),rgba(0,0,0,.65) calc(var(--rs-scroll-area-fade-block-start) * .6),rgba(0,0,0,.9) calc(var(--rs-scroll-area-fade-block-start) * .8),#000 var(--rs-scroll-area-fade-block-start),#000 calc(100% - var(--rs-scroll-area-fade-block-end)),rgba(0,0,0,.9) calc(100% - var(--rs-scroll-area-fade-block-end) * .8),rgba(0,0,0,.65) calc(100% - var(--rs-scroll-area-fade-block-end) * .6),rgba(0,0,0,.35) calc(100% - var(--rs-scroll-area-fade-block-end) * .4),rgba(0,0,0,.1) calc(100% - var(--rs-scroll-area-fade-block-end) * .2),transparent 100%),linear-gradient(var(--rs-scroll-area-fade-inline-direction),transparent 0,rgba(0,0,0,.1) calc(var(--rs-scroll-area-fade-inline-start) * .2),rgba(0,0,0,.35) calc(var(--rs-scroll-area-fade-inline-start) * .4),rgba(0,0,0,.65) calc(var(--rs-scroll-area-fade-inline-start) * .6),rgba(0,0,0,.9) calc(var(--rs-scroll-area-fade-inline-start) * .8),#000 var(--rs-scroll-area-fade-inline-start),#000 calc(100% - var(--rs-scroll-area-fade-inline-end)),rgba(0,0,0,.9) calc(100% - var(--rs-scroll-area-fade-inline-end) * .8),rgba(0,0,0,.65) calc(100% - var(--rs-scroll-area-fade-inline-end) * .6),rgba(0,0,0,.35) calc(100% - var(--rs-scroll-area-fade-inline-end) * .4),rgba(0,0,0,.1) calc(100% - var(--rs-scroll-area-fade-inline-end) * .2),transparent 100%);mask-composite:intersect;animation-name:fade-block-start,fade-block-end,fade-inline-start,fade-inline-end;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(self block),scroll(self block),scroll(self inline),scroll(self inline);animation-range:0 var(--rs-scroll-area-fade-size),calc(100% - var(--rs-scroll-area-fade-size)) 100%,0 var(--rs-scroll-area-fade-size),calc(100% - var(--rs-scroll-area-fade-size)) 100%}[dir=rtl] .--fade{--rs-scroll-area-fade-inline-direction:to left}}.--overscroll-auto{overscroll-behavior:auto}.--overscroll-contain{overscroll-behavior:contain}.content{display:inline-block;vertical-align:top;min-width:100%;min-height:100%;height:100%}.scrollbar{position:absolute;box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset)}.thumb{position:relative;height:100%;width:100%;background-color:var(--rs-color-background-neutral-faded);opacity:0}.thumb,.thumb:before{border-radius:var(--rs-radius-circular);transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.thumb:before{content:"";display:block;background:var(--rs-color-foreground-neutral);position:absolute;opacity:.2;will-change:transform}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size);padding-block:calc(var(--rs-scroll-area-thumb-offset) + var(--rs-unit-x1))}.--scrollbar-y .thumb:before{inset-block-start:0;width:100%;height:calc(var(--rs-scroll-area-ratio) * 100%);transform:translateY(calc(var(--rs-scroll-area-position, 0) / var(--rs-scroll-area-ratio) * 100%))}.--scrollbar-x{inset-inline:0;inset-block-end:0;height:var(--rs-scroll-area-thumb-size);padding-inline:calc(var(--rs-scroll-area-thumb-offset) + var(--rs-unit-x0-5))}.--scrollbar-x .thumb:before{inset-inline-start:0;height:100%;width:calc(var(--rs-scroll-area-ratio) * 100%);transform:translateX(calc(var(--rs-scroll-area-position, 0) / var(--rs-scroll-area-ratio) * 100%))}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb,.--display-hover>.--scrollbar-dragging .thumb,.--display-scroll.--scrolling>.scrollbar .thumb,.--display-scroll>.--scrollbar-dragging .thumb,.--display-visible>.scrollbar .thumb{opacity:1}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}

package/dist/components/ScrollArea/ScrollArea.types.d.ts

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
 import type { Coordinates } from "@reshaped/utilities/internal";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Props = {
     /** Node for inserting content */
     children: React.ReactNode;
@@ -31,8 +31,8 @@ export type Props = {
 };
 export type BarProps = {
     ratio: number;
-    position: number;
     vertical?: boolean;
+    scrollableRef: React.RefObject<HTMLElement | null>;
     onThumbMove: (args: {
         value: number;
         type: "absolute" | "relative";

package/dist/components/ScrollArea/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./ScrollArea";
-export type { Props as ScrollAreaProps } from "./ScrollArea.types";
+export { default } from "./ScrollArea.js";
+export type { Props as ScrollAreaProps } from "./ScrollArea.types.js";

package/dist/components/ScrollArea/index.js

@@ -1 +1 @@
-export { default } from "./ScrollArea";
+export { default } from "./ScrollArea.js";

package/dist/components/ScrollArea/tests/ScrollArea.stories.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("../../../components/ScrollArea").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("../../../components/ScrollArea/index.js").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         iframe: {
             url: string;