reshaped 3.8.0-canary.2 → 3.8.0-canary.21

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

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").ContextMenuProps> & {
-        Content: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").ContentProps>;
-        Item: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").ItemProps>;
-        Section: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SectionProps>;
-        SubMenu: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SubMenuProps>;
-        SubTrigger: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SubTriggerProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const handlers: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;

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

@@ -1,53 +0,0 @@
-import { expect, fn, userEvent, waitFor, within } from "storybook/test";
-import ContextMenu from "../index.js";
-import View from "../../View/index.js";
-import { sleep } from "../../../utilities/helpers.js";
-export default {
-    title: "Components/ContextMenu/tests",
-    component: ContextMenu,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/context-menu",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const handlers = {
-    name: "handleOpen, handleClose",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<div style={{ height: 200, overflow: "auto" }} data-testid="scroll">
-			<ContextMenu onOpen={args.handleOpen} onClose={args.handleClose}>
-				<View height="400px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ "data-testid": "root" }}/>
-
-				<ContextMenu.Content>
-					<ContextMenu.Item>Item</ContextMenu.Item>
-				</ContextMenu.Content>
-			</ContextMenu>
-		</div>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const root = canvas.getByTestId("root");
-        const scroll = canvas.getByTestId("scroll");
-        await userEvent.pointer({ keys: "[MouseRight>]", target: root });
-        expect(args.handleOpen).toHaveBeenCalledTimes(1);
-        expect(args.handleOpen).toHaveBeenCalledWith();
-        const item = canvas.getByText("Item");
-        expect(item).toBeInTheDocument();
-        // Context menu locks the scroll of the closest scrollable parent
-        expect(scroll).toHaveStyle("overflow: hidden");
-        // Wait for the open animation to finish
-        await sleep(500);
-        await userEvent.click(root);
-        expect(args.handleClose).toHaveBeenCalledTimes(1);
-        expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-        await waitFor(() => {
-            expect(item).not.toBeInTheDocument();
-            expect(scroll).not.toHaveStyle("overflow: hidden");
-        }, {
-            timeout: 1000,
-        });
-    },
-};

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

@@ -1,19 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").DismissibleProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const closeAriaLabel: StoryObj<{
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;

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

@@ -1,42 +0,0 @@
-import { expect, fn, userEvent } from "storybook/test";
-import Dismissible from "../index.js";
-import { Placeholder } from "../../../utilities/storybook/index.js";
-export default {
-    title: "Utility components/Dismissible/tests",
-    component: Dismissible,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/action-bar",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const closeAriaLabel = {
-    args: {
-        handleClose: fn(),
-    },
-    name: "onClose, closeAriaLabel",
-    render: (args) => (<Dismissible closeAriaLabel="Close" onClose={args.handleClose}>
-			<Placeholder />
-		</Dismissible>),
-    play: async ({ canvas, args }) => {
-        const button = canvas.getAllByRole("button")[0];
-        await userEvent.click(button);
-        expect(button).toHaveAttribute("aria-label", "Close");
-        expect(args.handleClose).toHaveBeenCalledTimes(1);
-        expect(args.handleClose).toHaveBeenCalledWith();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Dismissible closeAriaLabel="Close" onClose={() => { }} className="test-classname" attributes={{ id: "test-id" }}>
-				<Placeholder />
-			</Dismissible>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,18 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").DividerProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const horizontal: StoryObj;
-export declare const vertical: StoryObj;
-export declare const responsive: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,47 +0,0 @@
-import { expect } from "storybook/test";
-import Divider from "../index.js";
-export default {
-    title: "Components/Divider/tests",
-    component: Divider,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/divider",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const horizontal = {
-    name: "orientation, horizontal",
-    render: () => <Divider />,
-    play: async ({ canvas }) => {
-        const el = canvas.getByRole("separator");
-        expect(el).toHaveAttribute("aria-orientation", "horizontal");
-    },
-};
-export const vertical = {
-    name: "orientation, vertical",
-    render: () => <Divider vertical/>,
-    play: async ({ canvas }) => {
-        const el = canvas.getByRole("separator");
-        expect(el).toHaveAttribute("aria-orientation", "vertical");
-    },
-};
-export const responsive = {
-    name: "orientation, responsive",
-    render: () => <Divider vertical={{ s: true, l: false }}/>,
-    play: async ({ canvas }) => {
-        const el = canvas.getByRole("separator");
-        expect(el).not.toHaveAttribute("aria-orientation");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Divider className="test-classname" attributes={{ id: "test-id" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,36 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").DropdownMenuProps> & {
-        Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
-        Trigger: import("react").FC<import("../../Flyout").FlyoutTriggerProps>;
-        Content: import("react").FC<import("../DropdownMenu.types").ContentProps>;
-        Section: import("react").FC<import("../DropdownMenu.types").SectionProps>;
-        Item: import("react").FC<import("../DropdownMenu.types").ItemProps>;
-        SubMenu: import("react").FC<import("../DropdownMenu.types").SubMenuProps>;
-        SubTrigger: import("react").FC<import("../DropdownMenu.types").SubTriggerProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const defaultActive: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const active: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const activeFalse: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;

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

@@ -1,117 +0,0 @@
-import { expect, fn, userEvent, waitFor, within } from "storybook/test";
-import Button from "../../Button/index.js";
-import DropdownMenu from "../index.js";
-import { sleep } from "../../../utilities/helpers.js";
-export default {
-    title: "Components/DropdownMenu/tests",
-    component: DropdownMenu,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/dropdown-menu",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const defaultActive = {
-    name: "defaultActive, uncontrolled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
-			<DropdownMenu.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				<DropdownMenu.Item>Item</DropdownMenu.Item>
-			</DropdownMenu.Content>
-		</DropdownMenu>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        let item = canvas.getByText("Item");
-        await sleep(500);
-        await userEvent.click(document.body);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-            expect(item).not.toBeInTheDocument();
-        });
-        await userEvent.click(trigger);
-        item = canvas.getByText("Item");
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-            expect(item).toBeInTheDocument();
-        });
-    },
-};
-export const active = {
-    name: "active, controlled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} active>
-			<DropdownMenu.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				<DropdownMenu.Item>Item</DropdownMenu.Item>
-			</DropdownMenu.Content>
-		</DropdownMenu>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const item = canvas.getByText("Item");
-        await userEvent.click(document.body);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-        });
-        expect(item).toBeInTheDocument();
-    },
-};
-export const activeFalse = {
-    name: "active false, controlled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
-			<DropdownMenu.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				<DropdownMenu.Item>Item</DropdownMenu.Item>
-			</DropdownMenu.Content>
-		</DropdownMenu>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        await userEvent.click(trigger);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-        });
-        const item = canvas.queryByText("Item");
-        expect(item).not.toBeInTheDocument();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<DropdownMenu active>
-				<DropdownMenu.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
-					<DropdownMenu.Item>Item</DropdownMenu.Item>
-				</DropdownMenu.Content>
-			</DropdownMenu>
-		</div>),
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const menu = await canvas.findByTestId("test-id");
-        expect(menu).toHaveClass("test-classname");
-    },
-};

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

@@ -1,20 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").FormControlProps> & {
-        Label: import("react").FC<import("../FormControl.types").LabelProps>;
-        Helper: import("react").FC<import("../FormControl.types").CaptionProps>;
-        Error: import("react").FC<import("../FormControl.types").CaptionProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const className: StoryObj;
-export declare const group: StoryObj;

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

@@ -1,49 +0,0 @@
-import { expect } from "storybook/test";
-import FormControl from "../index.js";
-import Radio from "../../Radio/index.js";
-import RadioGroup from "../../RadioGroup/index.js";
-import TextField from "../../TextField/index.js";
-import View from "../../View/index.js";
-export default {
-    title: "Utility components/FormControl/tests",
-    component: FormControl,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/form-control",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const className = {
-    name: "id",
-    render: () => (<FormControl id="test-id" hasError>
-			<FormControl.Label>Label</FormControl.Label>
-			<TextField name="name"/>
-			<FormControl.Helper>Caption</FormControl.Helper>
-			<FormControl.Error>Error</FormControl.Error>
-		</FormControl>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("textbox");
-        const label = canvas.getByText("Label");
-        expect(input).toHaveAttribute("id", "test-id");
-        expect(input).toHaveAttribute("aria-describedby", `test-id-caption test-id-error`);
-        expect(label).toHaveAttribute("for", "test-id");
-        expect(label).toHaveAttribute("id", `test-id-label`);
-    },
-};
-export const group = {
-    name: "group",
-    render: () => (<FormControl group>
-			<FormControl.Label>Label</FormControl.Label>
-			<RadioGroup name="name">
-				<View gap={2}>
-					<Radio value="1">One</Radio>
-					<Radio value="2">Two</Radio>
-				</View>
-			</RadioGroup>
-		</FormControl>),
-    play: async ({ canvas }) => {
-        const group = canvas.getByRole("group");
-        expect(group).toBeInTheDocument();
-    },
-};

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

@@ -1,15 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").HiddenProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const as: StoryObj;

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

@@ -1,20 +0,0 @@
-import { expect } from "storybook/test";
-import Hidden from "../index.js";
-export default {
-    title: "Utility components/Hidden/tests",
-    component: Hidden,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/hidden",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const as = {
-    name: "as",
-    render: () => <Hidden as="span">Content</Hidden>,
-    play: ({ canvas }) => {
-        const el = canvas.getByText("Content");
-        expect(el.tagName).toEqual("SPAN");
-    },
-};

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

@@ -1,15 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").HiddenVisuallyProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const children: StoryObj;

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

@@ -1,20 +0,0 @@
-import { expect } from "storybook/test";
-import HiddenVisually from "../index.js";
-export default {
-    title: "Utility components/HiddenVisually/tests",
-    component: HiddenVisually,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/hidden-visually",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const children = {
-    name: "children",
-    render: () => <HiddenVisually>Content</HiddenVisually>,
-    play: ({ canvas }) => {
-        const el = canvas.getByText("Content");
-        expect(el).toBeInTheDocument();
-    },
-};

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

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