reshaped 3.8.8 → 3.9.0-canary.1

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

@@ -1,209 +0,0 @@
-import { expect, fn, userEvent, waitFor } from "storybook/test";
-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,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/pin-field",
-        },
-    },
-};
-export const base = {
-    name: "base",
-    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 variant = {
-    name: "variant",
-    render: () => (<Example>
-			<Example.Item title="variant: faded">
-				<PinField name="pin" variant="faded" inputAttributes={{ "aria-label": "Pin" }}/>
-			</Example.Item>
-		</Example>),
-};
-export const size = {
-    name: "size",
-    render: () => (<Example>
-			<Example.Item title="size: small">
-				<PinField name="pin" size="small" inputAttributes={{ "aria-label": "Pin" }}/>
-			</Example.Item>
-
-			<Example.Item title="size: medium">
-				<PinField name="pin" size="medium" inputAttributes={{ "aria-label": "Pin" }}/>
-			</Example.Item>
-
-			<Example.Item title="size: large">
-				<PinField name="pin" size="large" inputAttributes={{ "aria-label": "Pin" }}/>
-			</Example.Item>
-
-			<Example.Item title="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" }} inputAttributes={{ "aria-label": "Pin" }}/>
-			</Example.Item>
-		</Example>),
-};
-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 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");
-    },
-};
-export const formControl = {
-    name: "test: 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: "test: 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);
-        });
-    },
-};

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

@@ -1,69 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").PopoverProps> & {
-        Dismissible: typeof import("../Popover").PopoverDismissible;
-        Trigger: import("react").FC<import("../../Flyout").FlyoutTriggerProps>;
-        Content: import("react").FC<import("../../Flyout").FlyoutContentProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const position: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const widthNumber: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const widthFull: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const padding: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const elevation: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-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 autoFocus: StoryObj;
-export declare const className: StoryObj;
-export declare const testNested: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const testWithTooltip: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const testContentEditable: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const variant: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};

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

@@ -1,340 +0,0 @@
-import { useState, useId } from "react";
-import { expect, fn, userEvent, within, waitFor } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import { sleep } from "../../../utilities/helpers.js";
-import View from "../../View/index.js";
-import Popover from "../index.js";
-import Tooltip from "../../Tooltip/index.js";
-import Button from "../../Button/index.js";
-import MenuItem from "../../MenuItem/index.js";
-import ScrollArea from "../../ScrollArea/index.js";
-export default {
-    title: "Components/Popover",
-    component: Popover,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/popover",
-        },
-    },
-};
-const Demo = (props) => {
-    const { position, ...rest } = props;
-    const id = useId();
-    return (<Popover position={position} {...rest}>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>{position || "Open"}</Button>}
-			</Popover.Trigger>
-			<Popover.Content attributes={{ "aria-labelledby": id }}>
-				<View gap={2} align="start">
-					<span id={id}>Popover content</span>
-					<View direction="row" gap={2}>
-						<Button onClick={() => { }}>Action 1</Button>
-						<Button onClick={() => { }}>Action 2</Button>
-					</View>
-				</View>
-			</Popover.Content>
-		</Popover>);
-};
-export const position = {
-    name: "position",
-    render: () => (<Example>
-			<Example.Item title="position: bottom">
-				<View align="center" justify="center" gap={8} direction="row">
-					<Demo position="bottom-start"/>
-					<Demo position="bottom"/>
-					<Demo position="bottom-end"/>
-				</View>
-			</Example.Item>
-			<Example.Item title="position: top">
-				<View align="center" justify="center" gap={8} direction="row">
-					<Demo position="top-start"/>
-					<Demo position="top"/>
-					<Demo position="top-end"/>
-				</View>
-			</Example.Item>
-			<Example.Item title="position: start">
-				<View align="center" justify="center" gap={8} direction="row">
-					<Demo position="start-top"/>
-					<Demo position="start"/>
-					<Demo position="start-bottom"/>
-				</View>
-			</Example.Item>
-			<Example.Item title="position: end">
-				<View align="center" justify="center" gap={8} direction="row">
-					<Demo position="end-top"/>
-					<Demo position="end"/>
-					<Demo position="end-bottom" defaultActive/>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const widthNumber = {
-    name: "width: px",
-    render: () => <Demo width="400px" defaultActive/>,
-};
-export const widthFull = {
-    name: "width: 100%",
-    render: () => <Demo width="100%" defaultActive/>,
-};
-export const padding = {
-    name: "padding",
-    render: () => (<Example>
-			<Example.Item title="padding: 0">
-				<Demo padding={0}/>
-			</Example.Item>
-			<Example.Item title="padding: 6">
-				<Demo padding={6} defaultActive/>
-			</Example.Item>
-		</Example>),
-};
-export const elevation = {
-    name: "elevation",
-    render: () => (<Example>
-			<Example.Item title="elevation: raised">
-				<Demo elevation="raised" defaultActive/>
-			</Example.Item>
-		</Example>),
-};
-export const defaultActive = {
-    name: "defaultActive, uncontrolled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>Content</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        let item = canvas.getByText("Content");
-        // Wait for the open animation
-        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);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-        });
-        item = canvas.getByText("Content");
-        expect(item).toBeInTheDocument();
-    },
-};
-export const active = {
-    name: "active, controlled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>Content</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const item = canvas.getByText("Content");
-        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) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>Content</Popover.Content>
-		</Popover>),
-    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("Content");
-        expect(item).not.toBeInTheDocument();
-    },
-};
-export const dismissible = {
-    name: "dismissible, onClose, className, attributes, closeAriaLabel",
-    args: {
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onClose={args.handleClose} defaultActive>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>
-				<Popover.Dismissible closeAriaLabel="Close" attributes={{ "data-testid": "test-id" }} className="test-classname">
-					Content
-				</Popover.Dismissible>
-			</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        await sleep(300);
-        const dismissible = canvas.getByTestId("test-id");
-        const closeButton = within(dismissible).getByRole("button");
-        expect(dismissible).toHaveClass("test-classname");
-        expect(closeButton).toHaveAccessibleName("Close");
-        await userEvent.click(closeButton);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({});
-        });
-        await sleep(300);
-        const trigger = canvas.getAllByRole("button")[0];
-        await userEvent.click(trigger);
-    },
-};
-export const autoFocus = {
-    name: "autoFocus",
-    render: () => (<Example>
-			<Example.Item title="autoFocus=false">
-				<Demo autoFocus={false}/>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        await userEvent.click(trigger);
-        await waitFor(() => {
-            expect(document.activeElement).toHaveRole("dialog");
-        });
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Popover active>
-				<Popover.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</Popover.Trigger>
-				<Popover.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
-					Content
-				</Popover.Content>
-			</Popover>
-		</div>),
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const menu = await canvas.findByTestId("test-id");
-        expect(menu).toHaveClass("test-classname");
-    },
-};
-export const testNested = {
-    name: "test: nested",
-    render: () => (<Popover position="bottom">
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>
-				<View gap={2} align="start">
-					Popover content
-					<Popover>
-						<Popover.Trigger>
-							{(attributes) => <Button attributes={attributes}>Open</Button>}
-						</Popover.Trigger>
-						<Popover.Content>Hello</Popover.Content>
-					</Popover>
-				</View>
-			</Popover.Content>
-		</Popover>),
-};
-export const testWithTooltip = {
-    name: "test: with tooltip",
-    render: () => (<View paddingTop={10}>
-			<Tooltip position="top" text="Hello">
-				{(tooltipAttributes) => (<Popover position="bottom">
-						<Popover.Trigger>
-							{(attributes) => (<Button attributes={{
-                    ...attributes,
-                    ...tooltipAttributes,
-                }}>
-									Open
-								</Button>)}
-						</Popover.Trigger>
-						<Popover.Content>
-							<View gap={2} align="start">
-								Popover content
-								<Button onClick={() => { }}>Button</Button>
-							</View>
-						</Popover.Content>
-					</Popover>)}
-			</Tooltip>
-		</View>),
-};
-export const testContentEditable = {
-    name: "test: contenteditable",
-    render: () => {
-        const [active, setActive] = useState(false);
-        return (<Popover>
-				<Popover.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</Popover.Trigger>
-				<Popover.Content>
-					<View gap={4}>
-						<View.Item>
-							<Button onClick={() => { }}>Hello</Button>
-						</View.Item>
-
-						<ScrollArea height="100px">
-							<div style={{ height: "200px" }} contentEditable tabIndex={0} onInput={(e) => {
-                setActive(e.currentTarget.innerText.startsWith("@"));
-            }} onKeyDown={(e) => {
-                console.log(e.key);
-                if (e.key === "Enter" && active) {
-                    e.preventDefault();
-                    e.currentTarget.innerText = "@hello";
-                    setActive(false);
-                }
-            }}/>
-						</ScrollArea>
-
-						<Popover active={active} onClose={() => setActive(false)} originCoordinates={{ x: 300, y: 300 }} trapFocusMode="selection-menu">
-							<Popover.Content>
-								<View gap={4}>
-									<MenuItem onClick={() => { }}>Action</MenuItem>
-									<MenuItem onClick={() => { }}>Close</MenuItem>
-								</View>
-							</Popover.Content>
-						</Popover>
-					</View>
-				</Popover.Content>
-			</Popover>);
-    },
-};
-export const variant = {
-    name: "variant [deprecated]",
-    render: () => (<Example>
-			<Example.Item title="variant: headless">
-				<Popover variant="headless" defaultActive position="bottom-start">
-					<Popover.Trigger>
-						{(attributes) => <Button attributes={attributes}>Open</Button>}
-					</Popover.Trigger>
-					<Popover.Content>
-						<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="primary-faded"/>
-					</Popover.Content>
-				</Popover>
-			</Example.Item>
-		</Example>),
-};

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

@@ -1,30 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./..").ProgressProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const value: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const size: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const color: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const duration: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const render: StoryObj;
-export declare const className: StoryObj;