reshaped 3.3.11 → 3.3.13

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

@@ -12,89 +12,54 @@ export default {
         },
     },
 };
-export const color = () => (<Example>
-		<Example.Item title="color: neutral">
-			<Alert title="Alert title goes here" icon={IconZap} actionsSlot={<React.Fragment>
-						<Link variant="plain">View now</Link>
-						<Link variant="plain">Dismiss</Link>
-					</React.Fragment>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-
-		<Example.Item title="color: primary">
-			<Alert color="primary" title="Alert title goes here" icon={IconZap} actionsSlot={<>
-						<Link variant="plain">View now</Link>
-						<Link variant="plain">Dismiss</Link>
-					</>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-
-		<Example.Item title="color: critical">
-			<Alert color="critical" title="Alert title goes here" icon={IconZap} actionsSlot={<>
-						<Link variant="plain" color="critical">
-							View now
-						</Link>
-						<Link variant="plain" color="critical">
-							Dismiss
-						</Link>
-					</>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-
-		<Example.Item title="color: positive">
-			<Alert color="positive" title="Alert title goes here" icon={IconZap} actionsSlot={<>
-						<Link variant="plain" color="positive">
-							View now
-						</Link>
-						<Link variant="plain" color="positive">
-							Dismiss
-						</Link>
-					</>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-
-		<Example.Item title="color: warning">
-			<Alert color="warning" title="Alert title goes here" icon={IconZap} actionsSlot={<>
-						<Link variant="plain" color="warning">
-							View now
-						</Link>
-						<Link variant="plain" color="warning">
-							Dismiss
-						</Link>
-					</>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-	</Example>);
-export const inline = () => (<Example>
-		<Example.Item title="inline: true">
-			<Alert inline title="Alert title goes here" icon={IconZap} actionsSlot={<>
-						<Link variant="plain">View now</Link>
-						<Link variant="plain">Dismiss</Link>
-					</>}>
-				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-				been the industry's standard
-			</Alert>
-		</Example.Item>
-	</Example>);
-export const bleed = () => (<Example>
-		<Example.Item title="bleed: 4">
-			<Alert bleed={4} icon={IconZap}>
-				Content
-			</Alert>
-		</Example.Item>
-		<Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
-			<Alert bleed={{ s: 4, m: 0 }} icon={IconZap}>
-				Content
-			</Alert>
-		</Example.Item>
-	</Example>);
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			{["neutral", "primary", "critical", "positive", "warning"].map((color) => (<Example.Item title={`color: ${color}`} key={color}>
+					<Alert color={color} title="Alert title goes here" icon={IconZap} actionsSlot={<>
+								<Link variant="plain" color={color === "neutral" ? "primary" : color} onClick={() => { }}>
+									View now
+								</Link>
+								<Link variant="plain" color={color === "neutral" ? "primary" : color} onClick={() => { }}>
+									Dismiss
+								</Link>
+							</>}>
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard
+					</Alert>
+				</Example.Item>))}
+		</Example>),
+};
+export const inline = {
+    name: "inline",
+    render: () => (<Example>
+			<Example.Item title="inline: true">
+				<Alert inline title="Alert title goes here" icon={IconZap} actionsSlot={<>
+							<Link variant="plain" onClick={() => { }}>
+								View now
+							</Link>
+							<Link variant="plain" onClick={() => { }}>
+								Dismiss
+							</Link>
+						</>}>
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard
+				</Alert>
+			</Example.Item>
+		</Example>),
+};
+export const bleed = {
+    name: "bleed",
+    render: () => (<Example>
+			<Example.Item title="bleed: 4">
+				<Alert bleed={4} icon={IconZap}>
+					Content
+				</Alert>
+			</Example.Item>
+			<Example.Item title="bleed: [s] 4, [m+] 0">
+				<Alert bleed={{ s: 4, m: 0 }} icon={IconZap}>
+					Content
+				</Alert>
+			</Example.Item>
+		</Example>),
+};

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

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

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

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

package/dist/components/Autocomplete/Autocomplete.js

@@ -26,7 +26,9 @@ const Autocomplete = (props) => {
     }, []);
     const handleClose = () => setActive(false);
     useHotkeys({
-        [keys.BACKSPACE]: () => onBackspaceRef.current?.(),
+        [keys.BACKSPACE]: () => {
+            onBackspaceRef.current?.();
+        },
     }, [onBackspaceRef], {
         ref: inputRef,
         disabled: !onBackspaceRef.current,
@@ -58,8 +60,13 @@ const Autocomplete = (props) => {
     };
     return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: hasChildren && active, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: hasChildren && active, 
                         // Ignoring the type check since TS can't infer the correct html element type
-                        attributes: { ...textFieldProps.attributes, ref }, inputAttributes: {
+                        attributes: {
+                            ...textFieldProps.attributes,
+                            ref: ref,
+                            onClick: attributes.onFocus,
+                        }, inputAttributes: {
                             ...textFieldProps.inputAttributes,
+                            ...attributes,
                             onFocus: (e) => {
                                 attributes.onFocus?.();
                                 textFieldProps.onFocus?.(e);

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     component: {
@@ -12,5 +13,8 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => React.JSX.Element;
-export declare const multiselect: () => React.JSX.Element;
+export declare const base: StoryObj;
+export declare const multiselect: {
+    name: string;
+    render: () => React.JSX.Element;
+};

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Autocomplete from "../index.js";
-import Loader from "../../Loader/index.js";
 import View from "../../View/index.js";
 import Badge from "../../Badge/index.js";
 import useToggle from "../../../hooks/useToggle.js";
@@ -11,6 +10,7 @@ import Text from "../../Text/index.js";
 import Button from "../../Button/index.js";
 import PlusIcon from "../../../icons/Plus.js";
 import Dismissible from "../../Dismissible/index.js";
+import FormControl from "../../FormControl/index.js";
 export default {
     title: "Components/Autocomplete",
     component: Autocomplete,
@@ -20,117 +20,100 @@ export default {
         },
     },
 };
-const Demo = () => {
-    const [value, setValue] = React.useState("");
-    return (<Autocomplete name="fruit" value={value} placeholder="Pick your food" onChange={(args) => setValue(args.value)}>
-			{["Pizza", "Pie", "Ice-cream"].map((v) => {
-            if (!v.toLowerCase().includes(value.toLowerCase()))
-                return;
-            return (<Autocomplete.Item key={v} value={v}>
-						{v}
-					</Autocomplete.Item>);
-        })}
-		</Autocomplete>);
-};
-const DemoAsync = () => {
-    const [value, setValue] = React.useState("");
-    const [loading, setLoading] = React.useState(false);
-    return (<Autocomplete name="fruit" value={value} placeholder="Pick your food" onChange={({ value }) => {
-            setLoading(true);
-            setTimeout(() => {
-                setLoading(false);
-            }, 500);
-            setValue(value);
-        }}>
-			{loading ? (<View align="center" justify="center" padding={4}>
-					<Loader />
-				</View>) : (["Pizza", "Pie", "Ice-cream"].map((v) => {
-            if (!v.toLowerCase().includes(value.toLowerCase()))
-                return;
-            return (<Autocomplete.Item key={v} value={v}>
-							{v}
-						</Autocomplete.Item>);
-        }))}
-		</Autocomplete>);
+export const base = {
+    name: "base",
+    render: () => {
+        const [value, setValue] = React.useState("");
+        return (<Example>
+				<Example.Item title="Base">
+					<FormControl>
+						<FormControl.Label>Food</FormControl.Label>
+						<Autocomplete name="fruit" placeholder="Pick your food" value={value} onChange={(args) => setValue(args.value)}>
+							{["Pizza", "Pie", "Ice-cream"].map((v) => {
+                return (<Autocomplete.Item key={v} value={v}>
+										{v}
+									</Autocomplete.Item>);
+            })}
+						</Autocomplete>
+					</FormControl>
+				</Example.Item>
+			</Example>);
+    },
 };
-export const base = () => (<Example>
-		<Example.Item title="Default">
-			<Demo />
-		</Example.Item>
-		<Example.Item title="Async, should keep focus on the first item after reload">
-			<DemoAsync />
-		</Example.Item>
-	</Example>);
-export const multiselect = () => {
-    const inputRef = React.useRef(null);
-    const [values, setValues] = React.useState([]);
-    const [query, setQuery] = React.useState("");
-    const [customValueQuery, setCustomValueQuery] = React.useState("");
-    const customValueToggle = useToggle();
-    const handleDismiss = (dismissedValue) => {
-        const nextValues = values.filter((value) => value !== dismissedValue);
-        setValues(nextValues);
-        inputRef.current?.focus();
-    };
-    const handleAddCustomValue = () => {
-        if (customValueQuery.length) {
-            setValues((prev) => [...prev, customValueQuery]);
-        }
-        customValueToggle.deactivate();
-        setCustomValueQuery("");
-    };
-    const valuesNode = !!values.length && (<View direction="row" gap={1}>
-			{values.map((value) => (<Badge dismissAriaLabel="Dismiss value" onDismiss={() => handleDismiss(value)} key={value} size="small">
-					{value}
-				</Badge>))}
-		</View>);
-    return (<>
-			<Autocomplete name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} inputAttributes={{ ref: inputRef }} onBackspace={() => {
-            if (!query.length)
-                handleDismiss(values[values.length - 1]);
-        }} multiline onChange={(args) => setQuery(args.value)} onItemSelect={(args) => {
-            setCustomValueQuery(query);
-            setQuery("");
-            if (args.value === "_custom") {
-                customValueToggle.activate();
-                return;
+export const multiselect = {
+    name: "multiselect",
+    render: () => {
+        const inputRef = React.useRef(null);
+        const [values, setValues] = React.useState(["foo", "bar"]);
+        const [query, setQuery] = React.useState("");
+        const [customValueQuery, setCustomValueQuery] = React.useState("");
+        const customValueToggle = useToggle();
+        const handleDismiss = (dismissedValue) => {
+            const nextValues = values.filter((value) => value !== dismissedValue);
+            setValues(nextValues);
+            inputRef.current?.focus();
+        };
+        const handleAddCustomValue = () => {
+            if (customValueQuery.length) {
+                setValues((prev) => [...prev, customValueQuery]);
             }
-            setValues((prev) => [...prev, args.value]);
-        }}>
-				{["Pizza", "Pie", "Ice-cream"].map((v) => {
-            if (!v.toLowerCase().includes(query.toLowerCase()))
-                return;
-            if (values.includes(v))
-                return;
-            return (<Autocomplete.Item key={v} value={v}>
-							{v}
-						</Autocomplete.Item>);
-        })}
-				{!!query.length && (<Autocomplete.Item value="_custom" icon={PlusIcon}>
-						Add a custom value
-					</Autocomplete.Item>)}
-			</Autocomplete>
-			<Modal onClose={customValueToggle.deactivate} active={customValueToggle.active}>
-				<View gap={4}>
-					<Dismissible onClose={customValueToggle.deactivate} closeAriaLabel="Close modal">
-						<Modal.Title>
-							<Text variant="body-3" weight="medium">
-								Add a custom value
-							</Text>
-						</Modal.Title>
-					</Dismissible>
-					<View direction="row" gap={3} as="form" attributes={{
-            onSubmit: (e) => {
-                e.preventDefault();
-                handleAddCustomValue();
-            },
-        }}>
-						<View.Item grow>
-							<TextField name="custom" onChange={(args) => setCustomValueQuery(args.value)} value={customValueQuery}/>
-						</View.Item>
-						<Button type="submit">Add</Button>
+            customValueToggle.deactivate();
+            setCustomValueQuery("");
+        };
+        const valuesNode = !!values.length && (<View direction="row" gap={1}>
+				{values.map((value) => (<Badge dismissAriaLabel="Dismiss value" onDismiss={() => handleDismiss(value)} key={value} size="small">
+						{value}
+					</Badge>))}
+			</View>);
+        return (<FormControl>
+				<FormControl.Label>Food</FormControl.Label>
+				<Autocomplete name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} inputAttributes={{ ref: inputRef }} onBackspace={() => {
+                if (!query.length)
+                    handleDismiss(values[values.length - 1]);
+            }} multiline onChange={(args) => setQuery(args.value)} onItemSelect={(args) => {
+                setCustomValueQuery(query);
+                setQuery("");
+                if (args.value === "_custom") {
+                    customValueToggle.activate();
+                    return;
+                }
+                setValues((prev) => [...prev, args.value]);
+            }}>
+					{["Pizza", "Pie", "Ice-cream"].map((v) => {
+                if (!v.toLowerCase().includes(query.toLowerCase()))
+                    return;
+                if (values.includes(v))
+                    return;
+                return (<Autocomplete.Item key={v} value={v}>
+								{v}
+							</Autocomplete.Item>);
+            })}
+					{!!query.length && (<Autocomplete.Item value="_custom" icon={PlusIcon}>
+							Add a custom value
+						</Autocomplete.Item>)}
+				</Autocomplete>
+				<Modal onClose={customValueToggle.deactivate} active={customValueToggle.active}>
+					<View gap={4}>
+						<Dismissible onClose={customValueToggle.deactivate} closeAriaLabel="Close modal">
+							<Modal.Title>
+								<Text variant="body-3" weight="medium">
+									Add a custom value
+								</Text>
+							</Modal.Title>
+						</Dismissible>
+						<View direction="row" gap={3} as="form" attributes={{
+                onSubmit: (e) => {
+                    e.preventDefault();
+                    handleAddCustomValue();
+                },
+            }}>
+							<View.Item grow>
+								<TextField name="custom" onChange={(args) => setCustomValueQuery(args.value)} value={customValueQuery}/>
+							</View.Item>
+							<Button type="submit">Add</Button>
+						</View>
 					</View>
-				</View>
-			</Modal>
-		</>);
+				</Modal>
+			</FormControl>);
+    },
 };

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").AutocompleteProps): React.JSX.Element;
+        Item: (props: import("../Autocomplete.types").ItemProps) => React.JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const base: StoryObj<{
+    handleItemSelect: ReturnType<typeof fn>;
+    handleBackspace: ReturnType<typeof fn>;
+}>;

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

@@ -0,0 +1,86 @@
+import React from "react";
+import { expect, waitFor, within, fn } from "@storybook/test";
+import { Example } from "../../../utilities/storybook/index.js";
+import Autocomplete from "../index.js";
+import FormControl from "../../FormControl/index.js";
+import { sleep } from "../../../utilities/helpers.js";
+import userEvent from "@testing-library/user-event";
+export default {
+    title: "Components/Autocomplete/tests",
+    component: Autocomplete,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/autocomplete",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    args: {
+        handleBackspace: fn(),
+        handleItemSelect: fn(),
+    },
+    render: (args) => {
+        const [value, setValue] = React.useState("");
+        return (<Example>
+				<Example.Item title="Base">
+					<FormControl>
+						<FormControl.Label>Food</FormControl.Label>
+						<Autocomplete name="fruit" placeholder="Pick your food" value={value} onChange={(args) => setValue(args.value)} onBackspace={args.handleBackspace} onItemSelect={args.handleItemSelect}>
+							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
+                return (<Autocomplete.Item key={v} value={v} data={i === 0 ? { foo: "bar" } : undefined}>
+										{v}
+									</Autocomplete.Item>);
+            })}
+						</Autocomplete>
+					</FormControl>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const input = canvas.getByRole("combobox");
+        // Reset the focus
+        document.body.focus();
+        // Test keyboard selection after focusing the input
+        input.focus();
+        let options = [];
+        await waitFor(() => {
+            options = canvas.getAllByRole("option");
+        });
+        expect(options).toHaveLength(3);
+        await waitFor(() => {
+            expect(options[0]).toHaveAttribute("data-rs-focus");
+        });
+        expect(options[1]).not.toHaveAttribute("data-rs-focus");
+        await userEvent.keyboard("{ArrowDown/}");
+        await userEvent.keyboard("{Enter/}");
+        expect(input).toHaveValue("Pie");
+        expect(args.handleItemSelect).toHaveBeenCalledTimes(1);
+        expect(args.handleItemSelect).toHaveBeenCalledWith({
+            value: "Pie",
+            data: undefined,
+        });
+        // Give browser time to focus on the input
+        await sleep(100);
+        // Test click selection after opening with down arrow
+        await userEvent.keyboard("{ArrowDown/}");
+        await waitFor(() => {
+            options = canvas.getAllByRole("option");
+        });
+        await userEvent.click(options[0]);
+        expect(input).toHaveValue("Pizza");
+        expect(args.handleItemSelect).toHaveBeenCalledTimes(2);
+        expect(args.handleItemSelect).toHaveBeenCalledWith({
+            value: "Pizza",
+            data: { foo: "bar" },
+        });
+        input.focus();
+        await userEvent.keyboard("{Backspace/}");
+        await waitFor(() => {
+            expect(args.handleBackspace).toHaveBeenCalledTimes(1);
+            expect(args.handleBackspace).toHaveBeenCalledWith();
+        });
+    },
+};

package/dist/components/Avatar/Avatar.js

@@ -19,7 +19,7 @@ const Avatar = (props) => {
     const rootClassNames = classNames(s.root, className, heightStyles?.classNames, color && s[`--color-${color}`], variant && s[`--variant-${variant}`]);
     const renderContent = () => {
         if (src)
-            return (_jsx("img", { role: !initials ? "presentation" : undefined, src: src, alt: alt, className: s.img }));
+            return _jsx("img", { role: !alt ? "presentation" : undefined, src: src, alt: alt, className: s.img });
         if (icon)
             return (_jsx(Icon, { svg: icon, size: responsivePropDependency(size, (size) => Math.ceil(size * 0.4)) }));
         return initials;

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     component: (props: import("./..").AvatarProps) => import("react").JSX.Element;
@@ -8,7 +9,16 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const content: () => import("react").JSX.Element;
-export declare const size: () => import("react").JSX.Element;
-export declare const squared: () => import("react").JSX.Element;
-export declare const colors: () => import("react").JSX.Element;
+export declare const src: StoryObj;
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const squared: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const colors: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};