reshaped 4.3.0-canary.2 → 4.3.0

package/dist/components/Tabs/TabsList.js

@@ -24,8 +24,11 @@ const TabsList = (props) => {
     const { children, className, attributes } = props;
     const { value, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, disableSelectionAnimation, } = useTabs();
     const [rtl] = useRTL();
-    const fadeSide = useFadeSide(elScrollableRef, { disabled: itemWidth === "equal" });
     const listRef = React.useRef(null);
+    const fadeSide = useFadeSide(elScrollableRef, {
+        contentRef: listRef,
+        disabled: itemWidth === "equal",
+    });
     const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], fadeSide && s["--scrollable"], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"], className);
     const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["selector--hidden"], selection.status === "animated" && s["selector--animated"]);
     const handleNextClick = () => {

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

@@ -61,3 +61,4 @@ export declare const testEdgeCaseDom: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const testOverflowResize: StoryObj;

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

@@ -631,3 +631,64 @@ export const testEdgeCaseDom = {
 			</Example>);
     },
 };
+export const testOverflowResize = {
+    name: "test: overflow on size change",
+    render: () => {
+        const [narrow, setNarrow] = React.useState(false);
+        const [longLabel, setLongLabel] = React.useState(false);
+        return (<Example>
+				<Example.Item title="container width changes without window resize">
+					<View gap={3}>
+						<View width={narrow ? "200px" : "640px"}>
+							<Tabs defaultValue="0">
+								<Tabs.List attributes={{ "data-testid": "container-tabs" }}>
+									{[...Array(4)].map((_, i) => (<Tabs.Item value={`${i}`} key={i}>
+											Item {i}
+										</Tabs.Item>))}
+								</Tabs.List>
+							</Tabs>
+						</View>
+						<View direction="row">
+							<Button onClick={() => setNarrow((v) => !v)}>Toggle container width</Button>
+						</View>
+					</View>
+				</Example.Item>
+
+				<Example.Item title="content width changes">
+					<View gap={3}>
+						<View width="200px">
+							<Tabs defaultValue="0">
+								<Tabs.List attributes={{ "data-testid": "content-tabs" }}>
+									<Tabs.Item value="0">Item 0</Tabs.Item>
+									<Tabs.Item value="1">
+										{longLabel ? "Very long item label that doesn't fit" : "Item 1"}
+									</Tabs.Item>
+								</Tabs.List>
+							</Tabs>
+						</View>
+						<View direction="row">
+							<Button onClick={() => setLongLabel((v) => !v)}>Toggle label length</Button>
+						</View>
+					</View>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvas }) => {
+        const getOverflow = (testId) => {
+            const tablist = within(canvas.getByTestId(testId)).getByRole("tablist");
+            return getComputedStyle(tablist.parentElement).overflowX;
+        };
+        const [containerButton, labelButton] = canvas.getAllByRole("button");
+        const cases = [
+            ["container-tabs", containerButton],
+            ["content-tabs", labelButton],
+        ];
+        for (const [testId, button] of cases) {
+            await waitFor(() => expect(getOverflow(testId)).toBe("visible"));
+            await userEvent.click(button);
+            await waitFor(() => expect(getOverflow(testId)).toBe("auto"));
+            await userEvent.click(button);
+            await waitFor(() => expect(getOverflow(testId)).toBe("visible"));
+        }
+    },
+};

package/dist/hooks/_internal/useFadeSide.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 declare const useFadeSide: (scrollableRef: React.RefObject<HTMLElement | null>, options?: {
+    contentRef?: React.RefObject<HTMLElement | null>;
     disabled?: boolean;
 }) => "both" | "end" | "start" | null;
 export default useFadeSide;

package/dist/hooks/_internal/useFadeSide.js

@@ -4,7 +4,7 @@ import { rafThrottle } from "@reshaped/utilities/internal";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import useRTL from "../../hooks/useRTL.js";
 const useFadeSide = (scrollableRef, options = {}) => {
-    const { disabled } = options;
+    const { contentRef, disabled } = options;
     const [rtl] = useRTL();
     const [fadeSide, setFadeSide] = React.useState(null);
     const updateFade = React.useCallback(() => {
@@ -12,8 +12,10 @@ const useFadeSide = (scrollableRef, options = {}) => {
         if (!elScrollable)
             return;
         const isScrollable = elScrollable.clientWidth < elScrollable.scrollWidth;
-        if (!isScrollable)
+        if (!isScrollable) {
             setFadeSide(null);
+            return;
+        }
         // scrollLeft in RTL starts from 1 instead of 0, so we compare values using this delta
         const scrollLeft = elScrollable.scrollLeft * (rtl ? -1 : 1);
         const cutOffStart = scrollLeft > 1;
@@ -32,13 +34,13 @@ const useFadeSide = (scrollableRef, options = {}) => {
         if (disabled)
             return;
         const debouncedUpdate = rafThrottle(updateFade);
-        // Use RaF when scroll to have scrollWidth calculated correctly on the first effect
-        // For example: And edge case inside the complex flexbox layout
-        requestAnimationFrame(() => updateFade());
-        window.addEventListener("resize", debouncedUpdate);
+        const resizeObserver = new ResizeObserver(() => updateFade());
+        resizeObserver.observe(elScrollable);
+        if (contentRef?.current)
+            resizeObserver.observe(contentRef.current);
         elScrollable.addEventListener("scroll", debouncedUpdate);
         return () => {
-            window.removeEventListener("resize", debouncedUpdate);
+            resizeObserver.disconnect();
             elScrollable.removeEventListener("scroll", debouncedUpdate);
         };
     }, [rtl, disabled]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reshaped",
-  "version": "4.3.0-canary.2",
+  "version": "4.3.0",
   "description": "Professionally crafted design system in React and Figma for building products of any scale and complexity",
   "keywords": [
     "accessibility",
@@ -81,8 +81,8 @@
     "cssnano": "8.0.2",
     "csstype": "3.2.3",
     "postcss-custom-media": "12.0.1",
-    "@reshaped/theming": "4.3.0-canary.2",
-    "@reshaped/utilities": "4.3.0-canary.2"
+    "@reshaped/utilities": "4.3.0",
+    "@reshaped/theming": "4.3.0"
   },
   "peerDependencies": {
     "postcss": "^8",