reshaped 3.3.2 → 3.3.3

package/dist/components/ScrollArea/ScrollArea.js

@@ -70,7 +70,7 @@ const ScrollArea = forwardRef((props, ref) => {
     const [scrollRatio, setScrollRatio] = React.useState({ x: 1, y: 1 });
     const [scrollPosition, setScrollPosition] = React.useState({ x: 0, y: 0 });
     const scrollableRef = React.useRef(null);
-    const resizeObserverRef = React.useRef();
+    const contentRef = React.useRef(null);
     const heightStyles = getHeightStyles(height);
     const maxHeightStyles = getMaxHeightStyles(maxHeight);
     const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], heightStyles?.classNames, maxHeightStyles?.classNames, className);
@@ -127,15 +127,13 @@ const ScrollArea = forwardRef((props, ref) => {
         updateScroll();
     }, [updateScroll]);
     useIsomorphicLayoutEffect(() => {
-        const scrollableEl = scrollableRef.current;
-        if (!scrollableEl)
+        const contentEl = contentRef.current;
+        if (!contentEl)
             return;
-        resizeObserverRef.current = new ResizeObserver(updateScroll);
-        resizeObserverRef.current.observe(scrollableEl);
-        return () => {
-            resizeObserverRef.current?.disconnect();
-        };
+        const observer = new ResizeObserver(updateScroll);
+        observer.observe(contentEl);
+        return () => observer.disconnect();
     }, [updateScroll]);
-    return (_jsxs("div", { ...attributes, className: rootClassNames, style: rootVariables, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, children: children }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
+    return (_jsxs("div", { ...attributes, className: rootClassNames, style: rootVariables, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, children: _jsx("div", { className: s.content, ref: contentRef, children: children }) }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
 });
 export default ScrollArea;

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

@@ -1 +1 @@
-.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);height:100%}.root,.scrollable{overflow:auto;position:relative}.scrollable{display:inline-block;max-height:100%;scrollbar-width:none;vertical-align:top;width:100%;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 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 .thumb:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
+.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);overflow:hidden}.root,.scrollable{height:100%;position:relative}.scrollable{overflow:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 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:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}

package/dist/components/ScrollArea/tests/ScrollArea.stories.js

@@ -117,6 +117,7 @@ export const ref = () => (<Example>
 	</Example>);
 export const edgeCases = () => {
     const toggle = useToggle(true);
+    const [count, setCount] = React.useState(20);
     return (<Example>
 			<Example.Item title="dynamic content update">
 				<View gap={4}>
@@ -137,5 +138,33 @@ export const edgeCases = () => {
 					</ScrollArea>
 				</View>
 			</Example.Item>
+
+			<Example.Item title="add items">
+				<View gap={4}>
+					<Button onClick={() => setCount((prev) => prev + 10)}>Add</Button>
+
+					<ScrollArea height="200px" scrollbarDisplay="visible">
+						{Array(count)
+            .fill("")
+            .map((_, index) => {
+            return <div key={index}>Item {index + 1}</div>;
+        })}
+					</ScrollArea>
+				</View>
+			</Example.Item>
+
+			<Example.Item title="nested, hover only for the current area">
+				<ScrollArea height="100px">
+					<View padding={8}>
+						<ScrollArea height="200px">
+							{Array(20)
+            .fill("")
+            .map((_, index) => {
+            return <div key={index}>Item {index + 1}</div>;
+        })}
+						</ScrollArea>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 		</Example>);
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.3.2",
+	"version": "3.3.3",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",