reshaped 3.3.10 → 3.3.12

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

@@ -0,0 +1,117 @@
+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();
+            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();
+        });
+        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/FileUpload/tests/FileUpload.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("./..").FileUploadProps): import("react").JSX.Element;
+        Trigger: (props: import("../FileUpload.types").TriggerProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const onChange: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -0,0 +1,52 @@
+import { expect, userEvent, fn } from "@storybook/test";
+import FileUpload from "../index.js";
+export default {
+    title: "Components/FileUpload/tests",
+    component: FileUpload,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/file-upload",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const onChange = {
+    name: "name, onChange",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<div data-testid="root">
+			<FileUpload name="test-name" onChange={args.handleChange}>
+				Content
+			</FileUpload>
+		</div>),
+    play: async ({ canvas, args }) => {
+        const file = new File(["hello"], "hello.png", { type: "image/png" });
+        const input = canvas.getByTestId("root").querySelector("input");
+        await userEvent.upload(input, file);
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input.files?.[0]).toBe(file);
+        expect(input.files).toHaveLength(1);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: [file],
+            event: expect.objectContaining({ target: input }),
+        });
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<FileUpload name="name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ id: "test-input-id" }}>
+				Content
+			</FileUpload>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.getByTestId("root").querySelector("input");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};

package/dist/components/FormControl/FormControl.context.d.ts

@@ -51,6 +51,10 @@ export declare const useFormControl: () => {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
@@ -268,8 +272,16 @@ export declare const useFormControl: () => {
         onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
         onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+        onBeforeToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+        onTransitionCancel?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRun?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
     } & {
         id: string;
     };

package/dist/components/FormControl/FormControlCaption.js

@@ -10,6 +10,6 @@ const FormControlCaption = (props) => {
     const id = getCaptionId(attributes.id, variant);
     const color = variant === "error" ? "critical" : "neutral-faded";
     const ref = variant === "error" ? errorRef : helperRef;
-    return (_jsx(Text, { as: "span", variant: size === "large" ? "body-3" : "caption-1", color: disabled && !variant ? "disabled" : color, attributes: { id, role: color ? "alert" : undefined, ref }, className: s.caption, children: children }));
+    return (_jsx(Text, { as: "span", variant: size === "large" ? "body-3" : "caption-1", color: disabled && !variant ? "disabled" : color, attributes: { id, role: color ? "alert" : undefined, "aria-disabled": disabled, ref }, className: s.caption, children: children }));
 };
 export default FormControlCaption;

package/dist/components/FormControl/FormControlLabel.js

@@ -13,6 +13,6 @@ const FormControlLabel = (props) => {
             as: "label",
             attributes: { id, htmlFor: attributes.id },
         };
-    return (_jsxs(Text, { ...tagProps, variant: size === "large" ? "body-2" : "body-3", weight: "medium", className: s.label, color: disabled ? "disabled" : undefined, children: [children, required && (_jsx(Text, { color: disabled ? "disabled" : "critical", as: "span", children: "*" }))] }));
+    return (_jsxs(Text, { ...tagProps, variant: size === "large" ? "body-2" : "body-3", weight: "medium", className: s.label, color: disabled ? "disabled" : undefined, "aria-disabled": disabled, children: [children, required && (_jsx(Text, { color: disabled ? "disabled" : "critical", as: "span", children: "*" }))] }));
 };
 export default FormControlLabel;

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     component: import("react").ComponentType<import("./..").FormControlProps> & {
@@ -12,8 +13,13 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const status: () => import("react").JSX.Element;
-export declare const size: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
-export declare const required: () => import("react").JSX.Element;
-export declare const group: () => import("react").JSX.Element;
+export declare const status: StoryObj;
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const disabled: StoryObj;
+export declare const required: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

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

@@ -1,8 +1,7 @@
+import { expect } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
-import FormControl, { useFormControl } from "../index.js";
-import RadioGroup from "../../RadioGroup/index.js";
-import Radio from "../../Radio/index.js";
-import View from "../../View/index.js";
+import FormControl from "../index.js";
+import TextField from "../../TextField/index.js";
 export default {
     title: "Utilities/FormControl",
     component: FormControl,
@@ -12,74 +11,80 @@ export default {
         },
     },
 };
-const Input = () => {
-    const { attributes } = useFormControl();
-    return <input {...attributes}/>;
-};
-export const status = () => (<Example>
-		<Example.Item title="status: default">
-			<FormControl>
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-				<FormControl.Error>Error</FormControl.Error>
-			</FormControl>
-		</Example.Item>
+export const status = {
+    name: "status",
+    render: () => (<Example>
+			<Example.Item title="status: default">
+				<FormControl>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+					<FormControl.Error>Error</FormControl.Error>
+				</FormControl>
+			</Example.Item>
 
-		<Example.Item title="status: error">
-			<FormControl hasError>
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-				<FormControl.Error>Error</FormControl.Error>
-			</FormControl>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: medium">
-			<FormControl size="medium">
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-			</FormControl>
-		</Example.Item>
-		<Example.Item title="size: large">
-			<FormControl size="large">
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-			</FormControl>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled">
-			<FormControl disabled>
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-			</FormControl>
-		</Example.Item>
-	</Example>);
-export const required = () => (<Example>
-		<Example.Item title="required">
-			<FormControl required>
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-			</FormControl>
-		</Example.Item>
-	</Example>);
-export const group = () => (<Example>
-		<Example.Item title="form group">
-			<FormControl group>
-				<FormControl.Label>Favorite animals:</FormControl.Label>
+			<Example.Item title="status: error">
+				<FormControl hasError>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+					<FormControl.Error>Error</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const inputs = canvas.getAllByRole("textbox");
+        expect(inputs[0]).toHaveAccessibleName("Label");
+        expect(inputs[0]).toHaveAccessibleDescription("Caption");
+        expect(inputs[1]).toHaveAccessibleName("Label");
+        expect(inputs[1]).toHaveAccessibleDescription("Caption Error");
+    },
+};
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: medium">
+				<FormControl size="medium">
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
 
-				<RadioGroup name="animalGroup">
-					<View gap={2}>
-						<Radio value="dog">Dog</Radio>
-						<Radio value="cat">Cat</Radio>
-					</View>
-				</RadioGroup>
-			</FormControl>
-		</Example.Item>
-	</Example>);
+			<Example.Item title="size: large">
+				<FormControl size="large">
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name" size="large"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Example>
+			<Example.Item title="disabled">
+				<FormControl disabled>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toBeDisabled();
+    },
+};
+export const required = {
+    name: "required",
+    render: () => (<Example>
+			<Example.Item title="required">
+				<FormControl required>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+};

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

@@ -0,0 +1,20 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: import("react").ComponentType<import("./..").FormControlProps> & {
+        Label: React.ComponentType<import("../FormControl.types").LabelProps>;
+        Helper: React.ComponentType<import("../FormControl.types").CaptionProps>;
+        Error: React.ComponentType<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

@@ -0,0 +1,49 @@
+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: "Utilities/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/Grid/Grid.d.ts

@@ -1,6 +1,6 @@
 import type * as T from "./Grid.types";
 declare const Grid: {
-    <As extends keyof JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
-    Item: <As extends keyof JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => import("react/jsx-runtime").JSX.Element;
+    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
+    Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => import("react/jsx-runtime").JSX.Element;
 };
 export default Grid;

package/dist/components/Grid/Grid.types.d.ts

@@ -1,7 +1,8 @@
+import type React from "react";
 import type { Property } from "csstype";
 import type * as G from "../../types/global";
 import type * as TStyles from "../../styles/types";
-export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     gap?: G.Responsive<number>;
     align?: G.Responsive<TStyles.Align>;
     justify?: G.Responsive<TStyles.Justify>;
@@ -16,7 +17,7 @@ export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
     className?: G.ClassName;
     attributes?: G.Attributes<TagName>;
 };
-export type ItemProps<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     area?: string;
     colStart?: G.Responsive<number>;
     colEnd?: G.Responsive<number>;

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

@@ -1,8 +1,8 @@
 declare const _default: {
     title: string;
     component: {
-        <As extends keyof JSX.IntrinsicElements = "div">(props: import("./..").GridProps<As>): import("react").JSX.Element;
-        Item: <As extends keyof JSX.IntrinsicElements = "div">(props: import("./..").GridItemProps<As>) => import("react").JSX.Element;
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").GridProps<As>): import("react").JSX.Element;
+        Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").GridItemProps<As>) => import("react").JSX.Element;
     };
     parameters: {
         iframe: {
@@ -11,8 +11,23 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const layout: () => import("react").JSX.Element;
-export declare const itemLayout: () => import("react").JSX.Element;
-export declare const areas: () => import("react").JSX.Element;
-export declare const auto: () => import("react").JSX.Element;
+export declare const base: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const layout: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const itemLayout: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const areas: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const auto: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};