reshaped 3.3.10 → 3.3.12

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

@@ -0,0 +1,146 @@
+import React from "react";
+import { within, expect, fn, userEvent, waitFor } from "@storybook/test";
+import Button from "../../Button/index.js";
+import Overlay from "../index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import { sleep } from "../../../utilities/helpers.js";
+export default {
+    title: "Utilities/Overlay/tests",
+    component: Overlay,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/overlay",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const renderProps = {
+    name: "children, render props",
+    render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			{(args) => (args.active ? "Opened" : "Closed")}
+		</Overlay>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByText("Opened");
+        expect(root).toBeInTheDocument();
+    },
+};
+export const handlers = {
+    name: "onOpen, onClose, onAfterOpen, onAfterClose",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+        handleAfterClose: fn(),
+        handleAfterOpen: fn(),
+    },
+    render: (args) => {
+        const overlayToggle = useToggle();
+        return (<>
+				<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+				<Overlay active={overlayToggle.active} onClose={(closeArgs) => {
+                overlayToggle.deactivate();
+                args.handleClose(closeArgs);
+            }} onOpen={args.handleOpen} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
+					Content
+				</Overlay>
+			</>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        let overlay;
+        await userEvent.click(trigger);
+        overlay = canvas.getByText("Content");
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        // Wait for transition
+        await waitFor(() => {
+            expect(args.handleAfterOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterOpen).toHaveBeenCalledWith();
+        });
+        // Close by changing the state after the trigger click
+        await userEvent.click(trigger);
+        // Changing state doesn't trigger onClose
+        expect(args.handleClose).toHaveBeenCalledTimes(0);
+        // Wait for transition
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        overlay = canvas.getByText("Content");
+        // TODO: Fails CLI tests in Storybook without a timeout
+        await sleep(100);
+        // Close by clicking on the overlay
+        await userEvent.click(overlay);
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(2);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        // TODO: Fails CLI tests in Storybook without a timeout
+        await sleep(100);
+        // Close by pressing Escape
+        await userEvent.keyboard("{Escape/}");
+        expect(args.handleClose).toHaveBeenCalledTimes(2);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(3);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+    },
+};
+export const disableCloseOnClick = {
+    name: "disableCloseOnClick",
+    args: {
+        handleClose: fn(),
+    },
+    render: (args) => (<Overlay active disableCloseOnClick onClose={(closeArgs) => {
+            args.handleClose(closeArgs);
+        }}>
+			Content
+		</Overlay>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const overlay = canvas.getByText("Content");
+        await userEvent.click(overlay);
+        expect(args.handleClose).toHaveBeenCalledTimes(0);
+        await userEvent.keyboard("{Escape/}");
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+    },
+};
+export const containerRef = {
+    name: "containerRef",
+    render: () => {
+        const containerRef = React.useRef(null);
+        return (<>
+				<div ref={containerRef} data-testid="test-id" style={{ height: 200 }}/>
+				<Overlay active containerRef={containerRef}>
+					Content
+				</Overlay>
+			</>);
+    },
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const container = canvas.getByTestId("test-id");
+        const overlay = canvas.getByText("Content");
+        expect(container).toContainElement(overlay);
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			Content
+		</Overlay>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByTestId("test-id");
+        expect(root).toHaveClass("test-classname");
+    },
+};

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

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

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

@@ -0,0 +1,86 @@
+import { expect, within, fn, userEvent } from "@storybook/test";
+import Pagination from "../index.js";
+export default {
+    title: "Components/Pagination/tests",
+    component: Pagination,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/pagination",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => (<div data-testid="root">
+			<Pagination total={10} previousAriaLabel="Previous" nextAriaLabel="Next" pageAriaLabel={(args) => `Page ${args.page}`}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        const prevButton = root.getByLabelText("Previous");
+        const nextButton = root.getByLabelText("Next");
+        const firstPageButton = root.getByLabelText("Page 1");
+        expect(buttons.length).toBe(8);
+        expect(prevButton).toEqual(buttons[0]);
+        expect(prevButton).toBeDisabled();
+        expect(nextButton).toEqual(buttons.at(-1));
+        expect(nextButton).not.toBeDisabled();
+        expect(firstPageButton).toBeInTheDocument();
+        expect(firstPageButton).toEqual(pages[0]);
+        expect(firstPageButton).toHaveAttribute("aria-current", "true");
+    },
+};
+export const defaultPage = {
+    name: "defaultPage, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<div data-testid="root">
+			<Pagination total={10} defaultPage={2} onChange={args.handleChange} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas, args }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        expect(pages[1]).toHaveAttribute("aria-current");
+        await userEvent.click(pages[2]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ page: 3 });
+        expect(pages[1]).toHaveAttribute("aria-current", "false");
+        expect(pages[2]).toHaveAttribute("aria-current", "true");
+    },
+};
+export const page = {
+    name: "page, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<div data-testid="root">
+			<Pagination total={10} page={2} onChange={args.handleChange} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas, args }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        expect(pages[1]).toHaveAttribute("aria-current");
+        await userEvent.click(pages[2]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ page: 3 });
+        // Stays the same because it's controlled
+        expect(pages[1]).toHaveAttribute("aria-current", "true");
+        expect(pages[2]).toHaveAttribute("aria-current", "false");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Pagination className="test-classname" attributes={{ id: "test-id" }} total={10} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

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

@@ -11,4 +11,3 @@ export default _default;
 export declare const base: () => import("react").JSX.Element;
 export declare const variant: () => import("react").JSX.Element;
 export declare const size: () => import("react").JSX.Element;
-export declare const formControl: () => import("react").JSX.Element;

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

@@ -1,6 +1,5 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import PinField from "../index.js";
-import FormControl from "../../FormControl/index.js";
 export default {
     title: "Components/PinField",
     component: PinField,
@@ -12,52 +11,44 @@ export default {
 };
 export const base = () => (<Example>
 		<Example.Item title="no value">
-			<PinField name="pin"/>
+			<PinField name="pin" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="defaultValue: 1234">
-			<PinField name="pin2" defaultValue="1234"/>
+			<PinField name="pin2" defaultValue="1234" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="value: 12">
-			<PinField name="pin3" value="12"/>
+			<PinField name="pin3" value="12" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="defaultValue: 12, valueLength: 6">
-			<PinField name="pin4" defaultValue="12" valueLength={6}/>
+			<PinField name="pin4" defaultValue="12" valueLength={6} inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="defaultValue: ab, charPattern: alphabetic">
-			<PinField name="pin5" defaultValue="ab" pattern="alphabetic"/>
+			<PinField name="pin5" defaultValue="ab" pattern="alphabetic" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="defaultValue: ab, charPattern: alphanumeric">
-			<PinField name="pin6" defaultValue="ab" pattern="alphanumeric"/>
+			<PinField name="pin6" defaultValue="ab" pattern="alphanumeric" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 	</Example>);
 export const variant = () => (<Example>
 		<Example.Item title="variant: faded">
-			<PinField name="pin" variant="faded"/>
+			<PinField name="pin" variant="faded" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 	</Example>);
 export const size = () => (<Example>
 		<Example.Item title="size: large">
-			<PinField name="pin" size="large"/>
+			<PinField name="pin" size="large" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="size: xlarge">
-			<PinField name="pin" size="xlarge"/>
+			<PinField name="pin" size="xlarge" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="size: responsive, s: medium, m+: xlarge">
-			<PinField name="pin" size={{ s: "medium", m: "xlarge" }}/>
-		</Example.Item>
-	</Example>);
-export const formControl = () => (<Example>
-		<Example.Item title="with form control">
-			<FormControl>
-				<FormControl.Label>Label</FormControl.Label>
-				<PinField name="pin"/>
-			</FormControl>
+			<PinField name="pin" size={{ s: "medium", m: "xlarge" }} inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 	</Example>);

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

@@ -0,0 +1,29 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").PinFieldProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const render: StoryObj;
+export declare const valueLength: StoryObj;
+export declare const defaultValue: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const value: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const pattern: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const formControl: StoryObj;
+export declare const keyboard: StoryObj;
+export declare const className: StoryObj;

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

@@ -0,0 +1,177 @@
+import { expect, fn, userEvent, waitFor } from "@storybook/test";
+import FormControl from "../../FormControl/index.js";
+import PinField from "../index.js";
+export default {
+    title: "Components/PinField/tests",
+    component: PinField,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/pin-field",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toBeInTheDocument();
+        expect(elInput).toHaveAttribute("name", "test-name");
+        expect(elInput).toHaveAttribute("autocomplete", "one-time-code");
+        expect(elInput).toHaveAttribute("inputmode", "numeric");
+    },
+};
+export const valueLength = {
+    name: "valueLength",
+    render: () => (<PinField name="test-name" valueLength={6} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toHaveAttribute("maxlength", "6");
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" onChange={args.handleChange} defaultValue="12" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            value: "123",
+            name: "test-name",
+            event: expect.objectContaining({ target: elInput }),
+        });
+        expect(elInput).toHaveValue("123");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" onChange={args.handleChange} value="12" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            value: "123",
+            name: "test-name",
+            event: expect.objectContaining({ target: elInput }),
+        });
+        expect(elInput).toHaveValue("12");
+    },
+};
+export const pattern = {
+    name: "pattern",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" pattern="alphabetic" defaultValue="ab" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(elInput).toHaveValue("ab");
+        expect(args.handleChange).toHaveBeenCalledTimes(0);
+        await userEvent.keyboard("c");
+        expect(elInput).toHaveValue("abc");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+    },
+};
+export const formControl = {
+    name: "with FormControl",
+    render: () => (<FormControl>
+			<FormControl.Label>Label</FormControl.Label>
+			<PinField name="test-name"/>
+		</FormControl>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toHaveAccessibleName("Label");
+    },
+};
+export const keyboard = {
+    name: "keyboard navigation",
+    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        expect(elInput.selectionStart).toEqual(0);
+        expect(elInput.selectionEnd).toEqual(0);
+        await userEvent.keyboard("1");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(1);
+        });
+        await userEvent.keyboard("234");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionEnd).toEqual(4);
+        });
+        // Move back to the first character
+        await userEvent.keyboard("{ArrowLeft/}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        await userEvent.keyboard("{ArrowLeft/}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(2);
+        });
+        await userEvent.keyboard("{ArrowLeft}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(0);
+            expect(elInput.selectionEnd).toEqual(1);
+        });
+        // Move to the third character
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(2);
+        });
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        expect(elInput).toHaveValue("1234");
+        await userEvent.keyboard("{backspace}");
+        expect(elInput).toHaveValue("124");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        // Switched to type mode
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionStart).toEqual(3);
+        });
+        // Can't move further
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionStart).toEqual(3);
+        });
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<PinField name="test-name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "Label", id: "test-input-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.queryByLabelText("Label");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};

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

@@ -0,0 +1,40 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").PopoverProps): import("react").JSX.Element;
+        Dismissible: (props: import("../../Dismissible").DismissibleProps) => import("react").JSX.Element;
+        Trigger: (props: import("../../_private/Flyout").FlyoutTriggerProps) => import("react").JSX.Element;
+        Content: (props: import("../../_private/Flyout").FlyoutContentProps) => import("react").JSX.Element | null;
+    };
+    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 dismissible: StoryObj<{
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const triggerType: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;