reshaped 3.8.0-canary.7 → 3.8.0-canary.8

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

@@ -9,6 +9,8 @@ import Switch from "../../Switch/index.js";
 import TextField from "../../TextField/index.js";
 import useToggle from "../../../hooks/useToggle.js";
 import Radio from "../../Radio/index.js";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import { sleep } from "../../../utilities/helpers.js";
 export default {
     title: "Components/Modal",
     component: Modal,
@@ -37,239 +39,389 @@ const Demo = (props) => {
 			</Modal>
 		</>);
 };
-export const position = () => (<Example>
-		<Example.Item title={["responsive position", "[s] full-screen", "[m] center", "[l] end"]}>
-			<Demo position={{ s: "full-screen", m: "center", l: "end" }}/>
-		</Example.Item>
-		<Example.Item title="position: center">
-			<Demo position="center"/>
-		</Example.Item>
-		<Example.Item title="position: bottom">
-			<Demo position="bottom"/>
-		</Example.Item>
-		<Example.Item title="position: start">
-			<Demo position="start"/>
-		</Example.Item>
-		<Example.Item title="position: end">
-			<Demo position="end"/>
-		</Example.Item>
-		<Example.Item title="position: full-screen">
-			<Demo position="full-screen"/>
-		</Example.Item>
-	</Example>);
-export const size = () => {
-    return (<Example>
-			<Example.Item title="size: default">
-				<Demo />
+export const position = {
+    name: "position",
+    render: () => (<Example>
+			<Example.Item title={["responsive position", "[s] full-screen", "[m] center", "[l] end"]}>
+				<Demo position={{ s: "full-screen", m: "center", l: "end" }}/>
 			</Example.Item>
-			<Example.Item title="size: 300px">
-				<Demo size="300px"/>
+			<Example.Item title="position: center">
+				<Demo position="center"/>
 			</Example.Item>
-			<Example.Item title={["size: 800px", "should have max width of 100% minus gaps on the sides"]}>
-				<Demo size="800px"/>
+			<Example.Item title="position: bottom">
+				<Demo position="bottom"/>
 			</Example.Item>
-			<Example.Item title={[
-            "responsive size, responsive position",
-            "[s] auto",
-            "[m+] 600px",
-            "bottom position changes height instead of width",
-        ]}>
-				<Demo position={{ s: "bottom", m: "center", l: "end" }} size={{ s: "auto", m: "600px" }}/>
+			<Example.Item title="position: start">
+				<Demo position="start"/>
 			</Example.Item>
-		</Example>);
-};
-export const padding = () => (<Example>
-		<Example.Item title="padding: 0">
-			<Demo padding={0}/>
-		</Example.Item>
-		<Example.Item title="padding: 6">
-			<Demo padding={6}/>
-		</Example.Item>
-		<Example.Item title={["responsive padding", "[s] 2", "[m+]: 6"]}>
-			<Demo padding={{ s: 2, m: 6 }}/>
-		</Example.Item>
-	</Example>);
-export const overflow = () => (<Example>
-		<Example.Item title="default overflow">
-			<Demo>
-				<div style={{
-        position: "absolute",
-        top: -32,
-        left: -32,
-        height: 100,
-        width: 100,
-        background: "tomato",
-    }}/>
-			</Demo>
-		</Example.Item>
-
-		<Example.Item title="overflow: visible">
-			<Demo overflow="visible">
-				<div style={{
-        position: "absolute",
-        top: -32,
-        left: -32,
-        height: 100,
-        width: 100,
-        background: "tomato",
-    }}/>
-			</Demo>
-		</Example.Item>
-	</Example>);
-export const composition = () => (<Example>
-		<Example.Item title="title, subtitle, dismissible">
-			<Demo title="Modal title" subtitle="Modal subtitle"/>
-		</Example.Item>
-	</Example>);
-export const overlay = () => (<Example>
-		<Example.Item title="transparentOverlay, doesn't lock scroll">
-			<Demo transparentOverlay/>
-		</Example.Item>
-		<Example.Item title="blurredOverlay">
-			<Demo blurredOverlay/>
-		</Example.Item>
-		<View height="1000px"/>
-	</Example>);
-export const flags = () => {
-    return (<Example>
-			<Example.Item title="disableCloseOnOutsideClick">
-				<Demo disableCloseOnOutsideClick/>
+			<Example.Item title="position: end">
+				<Demo position="end"/>
+			</Example.Item>
+			<Example.Item title="position: full-screen">
+				<Demo position="full-screen"/>
 			</Example.Item>
-		</Example>);
+		</Example>),
 };
-export const containerRef = () => {
-    const containerRef = React.useRef(null);
-    const containerRef2 = React.useRef(null);
-    const toggle = useToggle();
-    const toggle2 = useToggle();
-    return (<Example>
-			<Example.Item title={["in scrollable container", "scroll and then open"]}>
-				<View attributes={{ ref: containerRef2 }} borderRadius="medium" height="400px" overflow="auto" backgroundColor="neutral-faded" padding={4}>
-					<View gap={4} align="start">
-						<Button onClick={toggle2.activate}>Open modal</Button>
-						<View height="500px" backgroundColor="primary" width="500px" borderRadius="medium"/>
-					</View>
-					<Modal containerRef={containerRef2} active={toggle2.active} onClose={toggle2.deactivate} position="end">
-						<Placeholder />
-					</Modal>
-				</View>
+export const size = {
+    name: "size",
+    render: () => {
+        return (<Example>
+				<Example.Item title="size: default">
+					<Demo />
+				</Example.Item>
+				<Example.Item title="size: 300px">
+					<Demo size="300px"/>
+				</Example.Item>
+				<Example.Item title={["size: 800px", "should have max width of 100% minus gaps on the sides"]}>
+					<Demo size="800px"/>
+				</Example.Item>
+				<Example.Item title={[
+                "responsive size, responsive position",
+                "[s] auto",
+                "[m+] 600px",
+                "bottom position changes height instead of width",
+            ]}>
+					<Demo position={{ s: "bottom", m: "center", l: "end" }} size={{ s: "auto", m: "600px" }}/>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const padding = {
+    name: "padding",
+    render: () => (<Example>
+			<Example.Item title="padding: 0">
+				<Demo padding={0}/>
 			</Example.Item>
-			<Example.Item title="in static container">
-				<View attributes={{ ref: containerRef }} borderRadius="medium" height="400px" overflow="hidden" backgroundColor="neutral-faded" padding={4}>
-					<Button onClick={toggle.activate}>Open modal</Button>
-					<Modal containerRef={containerRef} active={toggle.active} onClose={toggle.deactivate} position="end">
-						<Placeholder />
-					</Modal>
-				</View>
+			<Example.Item title="padding: 6">
+				<Demo padding={6}/>
 			</Example.Item>
-		</Example>);
-};
-export const edgeCases = () => {
-    const menuModalToggle = useToggle();
-    const menuModalToggleInner = useToggle();
-    const scrollModalToggle = useToggle();
-    const inputRef = React.useRef(null);
-    return (<Example>
-			<Example.Item title="keyboard focus stays on the modal first">
-				<Demo title="Modal title" autoFocus={false}/>
+			<Example.Item title={["responsive padding", "[s] 2", "[m+]: 6"]}>
+				<Demo padding={{ s: 2, m: 6 }}/>
 			</Example.Item>
-			<Example.Item title="trap focus works with custom children components">
-				<Demo title="Modal title">
-					<View gap={3} direction="row">
-						<Button onClick={() => { }}>Button</Button>
-						<Switch name="switch"/>
-					</View>
+		</Example>),
+};
+export const overflow = {
+    name: "overflow",
+    render: () => (<Example>
+			<Example.Item title="default overflow">
+				<Demo>
+					<div style={{
+            position: "absolute",
+            top: -32,
+            left: -32,
+            height: 100,
+            width: 100,
+            background: "tomato",
+        }}/>
 				</Demo>
 			</Example.Item>
-			<Example.Item title="focus moves to the input">
-				<Demo title="Modal title" onOpen={() => {
-            inputRef.current?.focus();
-        }}>
-					<View gap={3} direction="row">
-						<Button onClick={() => { }}>Button</Button>
-						<TextField name="name" inputAttributes={{ ref: inputRef }}/>
-					</View>
+
+			<Example.Item title="overflow: visible">
+				<Demo overflow="visible">
+					<div style={{
+            position: "absolute",
+            top: -32,
+            left: -32,
+            height: 100,
+            width: 100,
+            background: "tomato",
+        }}/>
 				</Demo>
 			</Example.Item>
-			<Example.Item title="Focus moves to the input with autoFocus">
-				<Demo title="Modal title">
-					<View gap={3} direction="row">
-						<Button onClick={() => { }}>Button</Button>
-						<TextField name="name" placeholder="autofocus" inputAttributes={{ autoFocus: true }}/>
-					</View>
-				</Demo>
+		</Example>),
+};
+export const composition = {
+    name: "composition",
+    render: () => (<Example>
+			<Example.Item title="title, subtitle, dismissible">
+				<Demo title="Modal title" subtitle="Modal subtitle"/>
 			</Example.Item>
-			<Example.Item title="scrollable area in modal ignores swipe-to-close">
-				<View gap={3} direction="row">
-					<Button onClick={scrollModalToggle.activate}>Open</Button>
-					<Modal active={scrollModalToggle.active} onClose={scrollModalToggle.deactivate} size="300px" position="bottom">
-						<View height="1000px" backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-							Content
-						</View>
-					</Modal>
-				</View>
+		</Example>),
+};
+export const overlay = {
+    name: "overlay",
+    render: () => (<Example>
+			<Example.Item title="transparentOverlay, doesn't lock scroll">
+				<Demo transparentOverlay/>
+			</Example.Item>
+			<Example.Item title="blurredOverlay">
+				<Demo blurredOverlay/>
 			</Example.Item>
-			<Example.Item title={[
-            "trap focus works correctly when it was already trapped",
-            "focus return back to the dropdown trigger on modal close",
-            "closing dropdown inside the modal doesn't close the modal",
-        ]}>
-				<DropdownMenu>
-					<DropdownMenu.Trigger>
-						{(attributes) => <Button attributes={attributes}>Open menu</Button>}
-					</DropdownMenu.Trigger>
-					<DropdownMenu.Content>
-						<DropdownMenu.Item onClick={menuModalToggle.activate}>Open dialog</DropdownMenu.Item>
-						<DropdownMenu.Item>Item 2</DropdownMenu.Item>
-					</DropdownMenu.Content>
-				</DropdownMenu>
-				<Modal active={menuModalToggle.active} onClose={menuModalToggle.deactivate}>
-					<View gap={3}>
-						<DropdownMenu>
-							<DropdownMenu.Trigger>
-								{(attributes) => <Button attributes={attributes}>Open menu</Button>}
-							</DropdownMenu.Trigger>
-							<DropdownMenu.Content>
-								<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-								<DropdownMenu.Item>Item 2</DropdownMenu.Item>
-							</DropdownMenu.Content>
-						</DropdownMenu>
-						<Button onClick={menuModalToggleInner.activate}>Open dialog</Button>
-						<Button onClick={menuModalToggle.deactivate}>Close</Button>
-						<Modal active={menuModalToggleInner.active} onClose={menuModalToggleInner.deactivate}>
-							<Button onClick={menuModalToggleInner.deactivate}>Close</Button>
+			<View height="1000px"/>
+		</Example>),
+};
+export const flags = {
+    name: "disableCloseOnOutsideClick",
+    render: () => {
+        return (<Example>
+				<Example.Item title="disableCloseOnOutsideClick">
+					<Demo disableCloseOnOutsideClick/>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const containerRef = {
+    name: "containerRef",
+    render: () => {
+        const containerRef = React.useRef(null);
+        const containerRef2 = React.useRef(null);
+        const toggle = useToggle();
+        const toggle2 = useToggle();
+        return (<Example>
+				<Example.Item title={["in scrollable container", "scroll and then open"]}>
+					<View attributes={{ ref: containerRef2 }} borderRadius="medium" height="400px" overflow="auto" backgroundColor="neutral-faded" padding={4}>
+						<View gap={4} align="start">
+							<Button onClick={toggle2.activate}>Open modal</Button>
+							<View height="500px" backgroundColor="primary" width="500px" borderRadius="medium"/>
+						</View>
+						<Modal containerRef={containerRef2} active={toggle2.active} onClose={toggle2.deactivate} position="end">
+							<Placeholder />
+						</Modal>
+					</View>
+				</Example.Item>
+				<Example.Item title="in static container">
+					<View attributes={{ ref: containerRef }} borderRadius="medium" height="400px" overflow="hidden" backgroundColor="neutral-faded" padding={4}>
+						<Button onClick={toggle.activate}>Open modal</Button>
+						<Modal containerRef={containerRef} active={toggle.active} onClose={toggle.deactivate} position="end">
+							<Placeholder />
 						</Modal>
 					</View>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const renderProps = {
+    name: "children, render props",
+    render: () => (<Modal active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			<Modal.Title>Title</Modal.Title>
+			Content
+		</Modal>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByText("Content");
+        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>
+				<Modal active={overlayToggle.active} onClose={(closeArgs) => {
+                overlayToggle.deactivate();
+                args.handleClose(closeArgs);
+            }} onOpen={args.handleOpen} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
+					<Modal.Title>Title</Modal.Title>
+					Content
 				</Modal>
-			</Example.Item>
+			</>);
+    },
+    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);
+        // Wait for transition
+        await waitFor(() => {
+            // Changing state doesn't trigger onClose
+            expect(args.handleClose).toHaveBeenCalledTimes(0);
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        await sleep(100);
+        overlay = canvas.getAllByRole("button", { hidden: true }).at(-1);
+        // Close by clicking on the overlay
+        await userEvent.click(overlay);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(2);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        await sleep(100);
+        // Close by pressing Escape
+        await userEvent.keyboard("{Escape}");
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(2);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(3);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+    },
+};
+export const disableCloseOnClick = {
+    name: "disableCloseOnOutsideClick",
+    args: {
+        handleClose: fn(),
+    },
+    render: (args) => (<Modal active disableCloseOnOutsideClick onClose={(closeArgs) => {
+            args.handleClose(closeArgs);
+        }}>
+			<Modal.Title>Title</Modal.Title>
+			Content
+		</Modal>),
+    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 className = {
+    name: "className, attributes",
+    render: () => (<Modal active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			<Modal.Title>Title</Modal.Title>
+			Content
+		</Modal>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByTestId("test-id");
+        expect(root).toHaveClass("test-classname");
+    },
+};
+export const edgeCases = {
+    name: "test: edge cases",
+    render: () => {
+        const menuModalToggle = useToggle();
+        const menuModalToggleInner = useToggle();
+        const scrollModalToggle = useToggle();
+        const inputRef = React.useRef(null);
+        return (<Example>
+				<Example.Item title="Scrolls with long content on touch devices">
+					<Demo position="center">
+						<Button onClick={() => { }}>Action</Button>
+						<View height="2000px" backgroundColor="primary-faded"/>
+					</Demo>
+				</Example.Item>
+				<Example.Item title="keyboard focus stays on the modal first">
+					<Demo title="Modal title" autoFocus={false}/>
+				</Example.Item>
+				<Example.Item title="trap focus works with custom children components">
+					<Demo title="Modal title">
+						<View gap={3} direction="row">
+							<Button onClick={() => { }}>Button</Button>
+							<Switch name="switch"/>
+						</View>
+					</Demo>
+				</Example.Item>
+				<Example.Item title="focus moves to the input">
+					<Demo title="Modal title" onOpen={() => {
+                inputRef.current?.focus();
+            }}>
+						<View gap={3} direction="row">
+							<Button onClick={() => { }}>Button</Button>
+							<TextField name="name" inputAttributes={{ ref: inputRef }}/>
+						</View>
+					</Demo>
+				</Example.Item>
+				<Example.Item title="Focus moves to the input with autoFocus">
+					<Demo title="Modal title">
+						<View gap={3} direction="row">
+							<Button onClick={() => { }}>Button</Button>
+							<TextField name="name" placeholder="autofocus" inputAttributes={{ autoFocus: true }}/>
+						</View>
+					</Demo>
+				</Example.Item>
+				<Example.Item title="scrollable area in modal ignores swipe-to-close">
+					<View gap={3} direction="row">
+						<Button onClick={scrollModalToggle.activate}>Open</Button>
+						<Modal active={scrollModalToggle.active} onClose={scrollModalToggle.deactivate} size="300px" position="bottom">
+							<View height="1000px" backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+								Content
+							</View>
+						</Modal>
+					</View>
+				</Example.Item>
+				<Example.Item title={[
+                "trap focus works correctly when it was already trapped",
+                "focus return back to the dropdown trigger on modal close",
+                "closing dropdown inside the modal doesn't close the modal",
+            ]}>
+					<DropdownMenu>
+						<DropdownMenu.Trigger>
+							{(attributes) => <Button attributes={attributes}>Open menu</Button>}
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content>
+							<DropdownMenu.Item onClick={menuModalToggle.activate}>Open dialog</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+						</DropdownMenu.Content>
+					</DropdownMenu>
+					<Modal active={menuModalToggle.active} onClose={menuModalToggle.deactivate}>
+						<View gap={3}>
+							<DropdownMenu>
+								<DropdownMenu.Trigger>
+									{(attributes) => <Button attributes={attributes}>Open menu</Button>}
+								</DropdownMenu.Trigger>
+								<DropdownMenu.Content>
+									<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+									<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+								</DropdownMenu.Content>
+							</DropdownMenu>
+							<Button onClick={menuModalToggleInner.activate}>Open dialog</Button>
+							<Button onClick={menuModalToggle.deactivate}>Close</Button>
+							<Modal active={menuModalToggleInner.active} onClose={menuModalToggleInner.deactivate}>
+								<Button onClick={menuModalToggleInner.deactivate}>Close</Button>
+							</Modal>
+						</View>
+					</Modal>
+				</Example.Item>
 
-			<Example.Item title="disableSwipeGesture">
-				<Demo disableSwipeGesture position="start"/>
-			</Example.Item>
+				<Example.Item title="disableSwipeGesture">
+					<Demo disableSwipeGesture position="start"/>
+				</Example.Item>
 
-			<Example.Item title="scroll locks on open">
-				<Demo />
-				<View height="1000px"/>
-			</Example.Item>
-		</Example>);
+				<Example.Item title="scroll locks on open">
+					<Demo />
+					<View height="1000px"/>
+				</Example.Item>
+			</Example>);
+    },
 };
-export const trapFocusEdgeCases = () => {
-    const toggle = useToggle();
-    return (<Example>
-			<Example.Item title="Radio should be navigatable with arrow keys">
-				<Button onClick={toggle.activate}>Open modal</Button>
-				<Modal active={toggle.active} onClose={toggle.deactivate}>
-					<View gap={2}>
-						<Button onClick={() => { }}>Action 1</Button>
-						<Radio name="radio" value="1">
-							Option 1
-						</Radio>
-						<Radio name="radio" value="2">
-							Option 2
-						</Radio>
-						<Button onClick={() => { }}>Action 2</Button>
-					</View>
-				</Modal>
-			</Example.Item>
-		</Example>);
+export const trapFocusEdgeCases = {
+    name: "test: trap focus edge cases",
+    render: () => {
+        const toggle = useToggle();
+        return (<Example>
+				<Example.Item title="Radio should be navigatable with arrow keys">
+					<Button onClick={toggle.activate}>Open modal</Button>
+					<Modal active={toggle.active} onClose={toggle.deactivate}>
+						<View gap={2}>
+							<Button onClick={() => { }}>Action 1</Button>
+							<Radio name="radio" value="1">
+								Option 1
+							</Radio>
+							<Radio name="radio" value="2">
+								Option 2
+							</Radio>
+							<Button onClick={() => { }}>Action 2</Button>
+						</View>
+					</Modal>
+				</Example.Item>
+			</Example>);
+    },
 };

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

@@ -1,7 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import React from "react";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./..").OverlayProps>;
+    component: React.FC<import("./..").OverlayProps>;
     parameters: {
         iframe: {
             url: string;
@@ -12,3 +14,15 @@ export default _default;
 export declare const base: StoryObj;
 export declare const transparent: StoryObj;
 export declare const blurred: StoryObj;
+export declare const renderProps: StoryObj;
+export declare const handlers: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleAfterOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+    handleAfterClose: ReturnType<typeof fn>;
+}>;
+export declare const disableCloseOnClick: StoryObj<{
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const containerRef: StoryObj;
+export declare const className: StoryObj;