reshaped 3.3.11 → 3.3.12

package/dist/components/RadioGroup/tests/RadioGroup.test.stories.d.ts

@@ -0,0 +1,22 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").RadioGroupProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;

package/dist/components/RadioGroup/tests/RadioGroup.test.stories.js

@@ -0,0 +1,78 @@
+import { fn, userEvent, expect } from "@storybook/test";
+import RadioGroup from "../index.js";
+import Radio from "../../Radio/index.js";
+export default {
+    title: "Components/RadioGroup/tests",
+    component: RadioGroup,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/radio",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<RadioGroup name="test-name" value="1" onChange={args.handleChange}>
+			{/* checked should be ignored */}
+			<Radio value="1" checked={false}>
+				Content
+			</Radio>
+
+			<Radio value="2">Content 2</Radio>
+		</RadioGroup>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("radio");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2",
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        // Still checked because it's controlled
+        expect(inputs[0]).toBeChecked();
+        expect(inputs[1]).not.toBeChecked();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<RadioGroup name="test-name" defaultValue="1" onChange={args.handleChange}>
+			{/* checked should be ignored */}
+			<Radio value="1" checked={false}>
+				Content
+			</Radio>
+
+			<Radio value="2">Content 2</Radio>
+		</RadioGroup>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("radio");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2",
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        expect(inputs[0]).not.toBeChecked();
+        expect(inputs[1]).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<RadioGroup name="test-name" disabled>
+			<Radio value="test-value">Content</Radio>
+		</RadioGroup>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeDisabled();
+    },
+};

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

@@ -0,0 +1,33 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    parameters: {
+        disableWrapper: boolean;
+    };
+};
+export default _default;
+export declare const rtl: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const lightMode: {
+    name: string;
+    render: () => import("react").JSX.Element;
+    play: () => void;
+};
+export declare const darkMode: {
+    name: string;
+    render: () => import("react").JSX.Element;
+    play: () => void;
+};
+export declare const scoped: {
+    name: string;
+    render: () => import("react").JSX.Element;
+    play: () => Promise<void>;
+};
+export declare const testScoped: StoryObj;
+export declare const keyboardMode: {
+    name: string;
+    render: () => import("react").JSX.Element;
+    play: () => Promise<void>;
+};

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

@@ -0,0 +1,88 @@
+import { expect, userEvent } from "@storybook/test";
+import { useTheme } from "../../Theme/index.js";
+import Button from "../../Button/index.js";
+import Reshaped from "../Reshaped.js";
+export default {
+    title: "Utilities/Reshaped",
+    parameters: {
+        disableWrapper: true,
+    },
+};
+export const rtl = {
+    name: "defaultRTL",
+    render: () => (<Reshaped defaultRTL theme="reshaped" defaultColorMode="dark">
+			Hello
+		</Reshaped>),
+};
+export const lightMode = {
+    name: "defaultColorMode=light",
+    render: () => <Reshaped theme="reshaped">Hello</Reshaped>,
+    play: () => {
+        const theme = document.documentElement.getAttribute("data-rs-theme");
+        const colorMode = document.documentElement.getAttribute("data-rs-color-mode");
+        expect(theme).toEqual("reshaped");
+        expect(colorMode).toEqual("light");
+    },
+};
+export const darkMode = {
+    name: "defaultColorMode=dark",
+    render: () => (<Reshaped theme="reshaped" defaultColorMode="dark">
+			Hello
+		</Reshaped>),
+    play: () => {
+        const theme = document.documentElement.getAttribute("data-rs-theme");
+        const colorMode = document.documentElement.getAttribute("data-rs-color-mode");
+        expect(theme).toEqual("reshaped");
+        expect(colorMode).toEqual("dark");
+    },
+};
+export const scoped = {
+    name: "scoped",
+    render: () => (<Reshaped theme="reshaped" defaultColorMode="dark" scoped>
+			Hello
+		</Reshaped>),
+    play: async () => {
+        const root = document.querySelector("[data-rs-root]");
+        expect(root).toBeInTheDocument();
+        expect(root).not.toBe(document.documentElement);
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(document.documentElement).not.toHaveAttribute("data-rs-theme");
+    },
+};
+const ScopedComponent = () => {
+    const { invertColorMode } = useTheme();
+    return <Button onClick={invertColorMode}>Invert</Button>;
+};
+export const testScoped = {
+    name: "test: scoped switch",
+    render: () => (<Reshaped theme="reshaped">
+			<Reshaped theme="slate" scoped>
+				<ScopedComponent />
+			</Reshaped>
+		</Reshaped>),
+    play: async ({ canvas }) => {
+        const nestedRoot = document.querySelector("[data-rs-root]");
+        const button = canvas.getAllByRole("button")[0];
+        expect(document.documentElement).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
+        expect(nestedRoot).toHaveAttribute("data-rs-theme", "slate");
+        expect(nestedRoot).toHaveAttribute("data-rs-color-mode", "light");
+        await userEvent.click(button);
+        expect(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
+        expect(nestedRoot).toHaveAttribute("data-rs-color-mode", "dark");
+    },
+};
+export const keyboardMode = {
+    name: "test: keyboard mode",
+    render: () => (<Reshaped theme="reshaped" defaultColorMode="dark">
+			Hello
+		</Reshaped>),
+    play: async () => {
+        const attribute = "data-rs-keyboard";
+        expect(document.documentElement).not.toHaveAttribute(attribute);
+        await userEvent.keyboard("{Tab/}");
+        expect(document.documentElement).toHaveAttribute(attribute);
+        await userEvent.click(document.body);
+        expect(document.documentElement).not.toHaveAttribute(attribute);
+    },
+};

package/dist/components/Resizable/Resizable.js

@@ -19,6 +19,7 @@ const PrivateResizableHandle = (props) => {
     return (_jsx(View.Item, { className: handleClassNames, attributes: {
             role: "button",
             tabIndex: 0,
+            "aria-hidden": true,
             ref: (el) => {
                 // @ts-ignore
                 ref.current = el;

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

@@ -9,6 +9,9 @@ declare const _default: {
         iframe: {
             url: string;
         };
+        a11y: {
+            disable: boolean;
+        };
     };
 };
 export default _default;

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

@@ -9,6 +9,10 @@ export default {
         iframe: {
             url: "https://reshaped.so/docs/utilities/Resizable",
         },
+        // Skip because of the aria-hidden applied to buttons, they're not needed for the screen reader navigation
+        a11y: {
+            disable: true,
+        },
     },
 };
 export const base = () => (<Example>

package/dist/components/Resizable/tests/Resizable.test.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").ResizableProps): import("react").JSX.Element;
+        Item: import("react").FC<import("./..").ResizableItemProps>;
+        Handle: import("react").FC<import("./..").ResizableHandleProps>;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const className: StoryObj;

package/dist/components/Resizable/tests/Resizable.test.stories.js

@@ -0,0 +1,25 @@
+import { expect } from "@storybook/test";
+import Resizable from "../index.js";
+export default {
+    title: "Components/Resizable/tests",
+    component: Resizable,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/Resizable",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Resizable className="test-classname" attributes={{ id: "test-id" }}>
+				<Resizable.Item>Content</Resizable.Item>
+			</Resizable>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Scrim/tests/Scrim.test.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").ScrimProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const className: StoryObj;

package/dist/components/Scrim/tests/Scrim.test.stories.js

@@ -0,0 +1,25 @@
+import { expect } from "@storybook/test";
+import Scrim from "../index.js";
+export default {
+    title: "Components/Scrim/tests",
+    component: Scrim,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/scrim",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Scrim className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</Scrim>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/ScrollArea/ScrollArea.js

@@ -134,6 +134,6 @@ const ScrollArea = forwardRef((props, ref) => {
         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: _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 }))] }));
+    return (_jsxs("div", { ...attributes, className: rootClassNames, style: rootVariables, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, tabIndex: 0, 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);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}
+.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%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){box-shadow:var(--rs-focus-shadow)}.scrollable{height:100%;overflow:auto;position:relative;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.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
@@ -6,10 +7,22 @@ declare const _default: {
         iframe: {
             url: string;
         };
+        a11y: {
+            disable: boolean;
+        };
     };
 };
 export default _default;
-export declare const direction: () => React.JSX.Element;
-export declare const visibility: () => React.JSX.Element;
-export declare const ref: () => React.JSX.Element;
-export declare const edgeCases: () => React.JSX.Element;
+export declare const direction: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const visibility: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const composition: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const dynamicHeight: StoryObj;