reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,25 +1,19 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.trapFocusEdgeCases = exports.edgeCases = exports.className = exports.handlers = exports.renderProps = exports.containerRef = exports.flags = exports.overlay = exports.composition = exports.overflow = exports.padding = exports.size = exports.position = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Dismissible_1 = __importDefault(require("../../../components/Dismissible"));
-const DropdownMenu_1 = __importDefault(require("../../../components/DropdownMenu"));
-const Modal_1 = __importDefault(require("../../../components/Modal"));
-const Radio_1 = __importDefault(require("../../../components/Radio"));
-const Switch_1 = __importDefault(require("../../../components/Switch"));
-const TextField_1 = __importDefault(require("../../../components/TextField"));
-const View_1 = __importDefault(require("../../../components/View"));
-const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
-const helpers_1 = require("../../../utilities/helpers");
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import React from "react";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import Dismissible from "../../../components/Dismissible/index.js";
+import DropdownMenu from "../../../components/DropdownMenu/index.js";
+import Modal from "../../../components/Modal/index.js";
+import Radio from "../../../components/Radio/index.js";
+import Switch from "../../../components/Switch/index.js";
+import TextField from "../../../components/TextField/index.js";
+import View from "../../../components/View/index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import { sleep } from "../../../utilities/helpers.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Modal",
-    component: Modal_1.default,
+    component: Modal,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/modal",
@@ -28,88 +22,88 @@ exports.default = {
 };
 const Demo = (props) => {
     const { active: activeProp, title, subtitle, children, ...modalProps } = props;
-    const { active, activate, deactivate } = (0, useToggle_1.default)(activeProp);
+    const { active, activate, deactivate } = useToggle(activeProp);
     return (<>
-			<Button_1.default onClick={activate}>Open dialog</Button_1.default>
-			<Modal_1.default {...modalProps} active={active} onClose={deactivate}>
-				<View_1.default gap={3}>
-					{(title || subtitle) && (<Dismissible_1.default onClose={deactivate} closeAriaLabel="Close modal">
-							{title && <Modal_1.default.Title>{title}</Modal_1.default.Title>}
-							{subtitle && <Modal_1.default.Subtitle>{subtitle}</Modal_1.default.Subtitle>}
-						</Dismissible_1.default>)}
+			<Button onClick={activate}>Open dialog</Button>
+			<Modal {...modalProps} active={active} onClose={deactivate}>
+				<View gap={3}>
+					{(title || subtitle) && (<Dismissible onClose={deactivate} closeAriaLabel="Close modal">
+							{title && <Modal.Title>{title}</Modal.Title>}
+							{subtitle && <Modal.Subtitle>{subtitle}</Modal.Subtitle>}
+						</Dismissible>)}
 					{children ||
             "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."}
-					<Button_1.default onClick={deactivate}>Close</Button_1.default>
-					<TextField_1.default name="hey"/>
-				</View_1.default>
-			</Modal_1.default>
+					<Button onClick={deactivate}>Close</Button>
+					<TextField name="hey"/>
+				</View>
+			</Modal>
 		</>);
 };
-exports.position = {
+export const position = {
     name: "position",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title={["responsive position", "[s] full-screen", "[m] center", "[l] end"]}>
+    render: () => (<Example>
+			<Example.Item title={["responsive position", "[s] full-screen", "[m] center", "[l] end"]}>
 				<Demo position={{ s: "full-screen", m: "center", l: "end" }}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: center">
+			</Example.Item>
+			<Example.Item title="position: center">
 				<Demo position="center"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: bottom">
+			</Example.Item>
+			<Example.Item title="position: bottom">
 				<Demo position="bottom"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: start">
+			</Example.Item>
+			<Example.Item title="position: start">
 				<Demo position="start"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: end">
+			</Example.Item>
+			<Example.Item title="position: end">
 				<Demo position="end"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: full-screen">
+			</Example.Item>
+			<Example.Item title="position: full-screen">
 				<Demo position="full-screen"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.size = {
+export const size = {
     name: "size",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="size: default">
+        return (<Example>
+				<Example.Item title="size: default">
 					<Demo />
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="size: 300px">
+				</Example.Item>
+				<Example.Item title="size: 300px">
 					<Demo size="300px"/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title={["size: 800px", "should have max width of 100% minus gaps on the sides"]}>
+				</Example.Item>
+				<Example.Item title={["size: 800px", "should have max width of 100% minus gaps on the sides"]}>
 					<Demo size="800px"/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title={[
+				</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" }}/>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+				</Example.Item>
+			</Example>);
     },
 };
-exports.padding = {
+export const padding = {
     name: "padding",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="padding: 0">
+    render: () => (<Example>
+			<Example.Item title="padding: 0">
 				<Demo padding={0}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="padding: 6">
+			</Example.Item>
+			<Example.Item title="padding: 6">
 				<Demo padding={6}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive padding", "[s] 2", "[m+]: 6"]}>
+			</Example.Item>
+			<Example.Item title={["responsive padding", "[s] 2", "[m+]: 6"]}>
 				<Demo padding={{ s: 2, m: 6 }}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.overflow = {
+export const overflow = {
     name: "overflow",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="default overflow">
+    render: () => (<Example>
+			<Example.Item title="default overflow">
 				<Demo>
 					<div style={{
             position: "absolute",
@@ -120,9 +114,9 @@ exports.overflow = {
             background: "tomato",
         }}/>
 				</Demo>
-			</storybook_1.Example.Item>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="overflow: visible">
+			<Example.Item title="overflow: visible">
 				<Demo overflow="visible">
 					<div style={{
             position: "absolute",
@@ -133,288 +127,302 @@ exports.overflow = {
             background: "tomato",
         }}/>
 				</Demo>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.composition = {
+export const composition = {
     name: "composition",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="title, subtitle, dismissible">
+    render: () => (<Example>
+			<Example.Item title="title, subtitle, dismissible">
 				<Demo title="Modal title" subtitle="Modal subtitle"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.overlay = {
+export const overlay = {
     name: "overlay",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="transparentOverlay, doesn't lock scroll">
+    render: () => (<Example>
+			<Example.Item title="transparentOverlay, doesn't lock scroll">
 				<Demo transparentOverlay/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="blurredOverlay">
+			</Example.Item>
+			<Example.Item title="blurredOverlay">
 				<Demo blurredOverlay/>
-			</storybook_1.Example.Item>
-			<View_1.default height="1000px"/>
-		</storybook_1.Example>),
+			</Example.Item>
+			<View height="1000px"/>
+		</Example>),
 };
-exports.flags = {
+export const flags = {
     name: "disableCloseOnOutsideClick",
     args: {
-        handleClose: (0, test_1.fn)(),
+        handleClose: fn(),
     },
     render: (args) => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="disableCloseOnOutsideClick">
+        return (<Example>
+				<Example.Item title="disableCloseOnOutsideClick">
 					<Demo disableCloseOnOutsideClick onClose={args.handleClose} active/>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+				</Example.Item>
+			</Example>);
     },
 };
-exports.containerRef = {
+export const containerRef = {
     name: "containerRef",
     render: () => {
-        const containerRef = react_1.default.useRef(null);
-        const containerRef2 = react_1.default.useRef(null);
-        const containerRef3 = react_1.default.useRef(null);
-        const toggle = (0, useToggle_1.default)();
-        const toggle2 = (0, useToggle_1.default)();
-        const toggle3 = (0, useToggle_1.default)();
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title={["in scrollable container", "scroll and then open"]}>
-					<View_1.default attributes={{ ref: containerRef2 }} borderRadius="medium" height="400px" overflow="auto" backgroundColor="neutral-faded" padding={4}>
-						<View_1.default gap={4} align="start">
-							<Button_1.default onClick={toggle2.activate}>Open modal</Button_1.default>
-							<View_1.default height="500px" backgroundColor="primary" width="500px" borderRadius="medium"/>
-						</View_1.default>
-						<Modal_1.default containerRef={containerRef2} active={toggle2.active} onClose={toggle2.deactivate} position="end">
-							<storybook_1.Placeholder />
-						</Modal_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="in static container">
-					<View_1.default attributes={{ ref: containerRef }} borderRadius="medium" height="400px" overflow="hidden" backgroundColor="neutral-faded" padding={4}>
-						<Button_1.default onClick={toggle.activate}>Open modal</Button_1.default>
-						<Modal_1.default containerRef={containerRef} active={toggle.active} onClose={toggle.deactivate} position="end">
-							<storybook_1.Placeholder />
-						</Modal_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="ignoring container size">
-					<View_1.default attributes={{ ref: containerRef3 }} borderRadius="medium" height="400px" overflow="hidden" backgroundColor="neutral-faded" padding={4}>
-						<Button_1.default onClick={toggle3.activate}>Open modal</Button_1.default>
-						<Modal_1.default contained={false} containerRef={containerRef3} active={toggle3.active} onClose={toggle3.deactivate} position="end">
-							<storybook_1.Placeholder />
-						</Modal_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+        const containerRef = React.useRef(null);
+        const containerRef2 = React.useRef(null);
+        const containerRef3 = React.useRef(null);
+        const toggle = useToggle();
+        const toggle2 = useToggle();
+        const toggle3 = 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.Item title="ignoring container size">
+					<View attributes={{ ref: containerRef3 }} borderRadius="medium" height="400px" overflow="hidden" backgroundColor="neutral-faded" padding={4}>
+						<Button onClick={toggle3.activate}>Open modal</Button>
+						<Modal contained={false} containerRef={containerRef3} active={toggle3.active} onClose={toggle3.deactivate} position="end">
+							<Placeholder />
+						</Modal>
+					</View>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.renderProps = {
+export const renderProps = {
     name: "children, render props",
-    render: () => (<Modal_1.default active className="test-classname" attributes={{ "data-testid": "test-id" }}>
-			<Modal_1.default.Title>Title</Modal_1.default.Title>
+    render: () => (<Modal active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			<Modal.Title>Title</Modal.Title>
 			Content
-		</Modal_1.default>),
+		</Modal>),
     play: async ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const root = canvas.getByText("Content");
-        (0, test_1.expect)(root).toBeInTheDocument();
+        expect(root).toBeInTheDocument();
     },
 };
-exports.handlers = {
+export const handlers = {
     name: "onClose, onAfterOpen, onAfterClose",
     args: {
-        handleClose: (0, test_1.fn)(),
-        handleAfterClose: (0, test_1.fn)(),
-        handleAfterOpen: (0, test_1.fn)(),
+        handleClose: fn(),
+        handleAfterClose: fn(),
+        handleAfterOpen: fn(),
     },
     render: (args) => {
-        const overlayToggle = (0, useToggle_1.default)();
+        const overlayToggle = useToggle();
         return (<>
-				<Button_1.default onClick={() => overlayToggle.toggle()}>Open overlay</Button_1.default>
-				<Modal_1.default active={overlayToggle.active} onClose={(closeArgs) => {
+				<Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>
+				<Modal active={overlayToggle.active} onClose={(closeArgs) => {
                 overlayToggle.deactivate();
                 args.handleClose(closeArgs);
             }} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
-					<Modal_1.default.Title>Title</Modal_1.default.Title>
+					<Modal.Title>Title</Modal.Title>
 					Content
-				</Modal_1.default>
+				</Modal>
 			</>);
     },
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
         // Wait for transition
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleAfterOpen).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleAfterOpen).toHaveBeenCalledWith();
+        await waitFor(() => {
+            expect(args.handleAfterOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterOpen).toHaveBeenCalledWith();
         });
         // Close by changing the state after the trigger click
-        await test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
         // Wait for transition
-        await (0, test_1.waitFor)(() => {
+        await waitFor(() => {
             // Changing state doesn't trigger onClose
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(0);
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledWith();
+            expect(args.handleClose).toHaveBeenCalledTimes(0);
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
         });
         // Open
-        await test_1.userEvent.click(trigger);
-        await (0, helpers_1.sleep)(100);
-        const overlay = canvas.getAllByRole("button", { hidden: true }).at(-1);
+        await userEvent.click(trigger);
+        await sleep(100);
+        const overlay = canvas.getAllByRole("presentation", { hidden: true }).at(-1);
         // Close by clicking on the overlay
-        await test_1.userEvent.click(overlay);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledTimes(2);
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledWith();
+        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 test_1.userEvent.click(trigger);
-        await (0, helpers_1.sleep)(100);
+        await userEvent.click(trigger);
+        await sleep(100);
         // Close by pressing Escape
-        await test_1.userEvent.keyboard("{Escape}");
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(2);
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledTimes(3);
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledWith();
+        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();
         });
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
-    render: () => (<Modal_1.default active className="test-classname" attributes={{ "data-testid": "test-id" }}>
-			<Modal_1.default.Title>Title</Modal_1.default.Title>
+    render: () => (<Modal active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			<Modal.Title>Title</Modal.Title>
 			Content
-		</Modal_1.default>),
+		</Modal>),
     play: async ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const root = canvas.getByTestId("test-id");
-        (0, test_1.expect)(root).toHaveClass("test-classname");
+        expect(root).toHaveClass("test-classname");
     },
 };
-exports.edgeCases = {
+export const edgeCases = {
     name: "test: edge cases",
     render: () => {
-        const menuModalToggle = (0, useToggle_1.default)();
-        const menuModalToggleInner = (0, useToggle_1.default)();
-        const scrollModalToggle = (0, useToggle_1.default)();
-        const inputRef = react_1.default.useRef(null);
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="Scrolls with long content on touch devices">
+        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_1.default onClick={() => { }}>Action</Button_1.default>
-						<View_1.default height="2000px" backgroundColor="primary-faded"/>
+						<Button onClick={() => { }}>Action</Button>
+						<View height="2000px" backgroundColor="primary-faded"/>
 					</Demo>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="keyboard focus stays on the modal first">
+				</Example.Item>
+				<Example.Item title="keyboard focus stays on the modal first">
 					{/* oxlint-disable-next-line jsx_a11y/no-autofocus */}
 					<Demo title="Modal title" autoFocus={false}/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="trap focus works with custom children components">
+				</Example.Item>
+				<Example.Item title="trap focus works with custom children components">
 					<Demo title="Modal title">
-						<View_1.default gap={3} direction="row">
-							<Button_1.default onClick={() => { }}>Button</Button_1.default>
-							<Switch_1.default name="switch"/>
-						</View_1.default>
+						<View gap={3} direction="row">
+							<Button onClick={() => { }}>Button</Button>
+							<Switch name="switch"/>
+						</View>
 					</Demo>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="focus moves to the input">
+				</Example.Item>
+				<Example.Item title="focus moves to the input">
 					<Demo title="Modal title" onAfterOpen={() => {
                 inputRef.current?.focus();
             }}>
-						<View_1.default gap={3} direction="row">
-							<Button_1.default onClick={() => { }}>Button</Button_1.default>
-							<TextField_1.default name="name" inputAttributes={{ ref: inputRef }}/>
-						</View_1.default>
+						<View gap={3} direction="row">
+							<Button onClick={() => { }}>Button</Button>
+							<TextField name="name" inputAttributes={{ ref: inputRef }}/>
+						</View>
 					</Demo>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="Focus moves to the input with autoFocus">
+				</Example.Item>
+				<Example.Item title="Focus moves to the input with autoFocus">
 					<Demo title="Modal title">
-						<View_1.default gap={3} direction="row">
-							<Button_1.default onClick={() => { }}>Button</Button_1.default>
-							<TextField_1.default name="name" placeholder="autofocus" inputAttributes={{ autoFocus: true }}/>
-						</View_1.default>
+						<View gap={3} direction="row">
+							<Button onClick={() => { }}>Button</Button>
+							<TextField name="name" placeholder="autofocus" inputAttributes={{ autoFocus: true }}/>
+						</View>
 					</Demo>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="scrollable area in modal ignores swipe-to-close">
-					<View_1.default gap={3} direction="row">
-						<Button_1.default onClick={scrollModalToggle.activate}>Open</Button_1.default>
-						<Modal_1.default active={scrollModalToggle.active} onClose={scrollModalToggle.deactivate} size="300px" position="bottom">
-							<View_1.default height="1000px" backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+				</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_1.default>
-						</Modal_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title={[
+							</View>
+						</Modal>
+					</View>
+				</Example.Item>
+				<Example.Item title="scrolled side modal supports swipe-to-close, vertical swipes keep scrolling">
+					<Demo position="end">
+						<Placeholder h="1000px" minW={0}/>
+					</Demo>
+				</Example.Item>
+				<Example.Item title="horizontal scroll area in side modal takes priority over swipe-to-close until it reaches its edge">
+					<Demo position="start">
+						<View overflow="auto">
+							<Placeholder w="1000px" h="200px">
+								Horizontally scrollable content
+							</Placeholder>
+						</View>
+					</Demo>
+				</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_1.default>
-						<DropdownMenu_1.default.Trigger>
-							{(attributes) => <Button_1.default attributes={attributes}>Open menu</Button_1.default>}
-						</DropdownMenu_1.default.Trigger>
-						<DropdownMenu_1.default.Content>
-							<DropdownMenu_1.default.Item onClick={menuModalToggle.activate}>Open dialog</DropdownMenu_1.default.Item>
-							<DropdownMenu_1.default.Item>Item 2</DropdownMenu_1.default.Item>
-						</DropdownMenu_1.default.Content>
-					</DropdownMenu_1.default>
-					<Modal_1.default active={menuModalToggle.active} onClose={menuModalToggle.deactivate}>
-						<View_1.default gap={3}>
-							<DropdownMenu_1.default>
-								<DropdownMenu_1.default.Trigger>
-									{(attributes) => <Button_1.default attributes={attributes}>Open menu</Button_1.default>}
-								</DropdownMenu_1.default.Trigger>
-								<DropdownMenu_1.default.Content>
-									<DropdownMenu_1.default.Item>Item 1</DropdownMenu_1.default.Item>
-									<DropdownMenu_1.default.Item>Item 2</DropdownMenu_1.default.Item>
-								</DropdownMenu_1.default.Content>
-							</DropdownMenu_1.default>
-							<Button_1.default onClick={menuModalToggleInner.activate}>Open dialog</Button_1.default>
-							<Button_1.default onClick={menuModalToggle.deactivate}>Close</Button_1.default>
-							<Modal_1.default active={menuModalToggleInner.active} onClose={menuModalToggleInner.deactivate}>
-								<Button_1.default onClick={menuModalToggleInner.deactivate}>Close</Button_1.default>
-							</Modal_1.default>
-						</View_1.default>
-					</Modal_1.default>
-				</storybook_1.Example.Item>
+					<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>
 
-				<storybook_1.Example.Item title="disableSwipeGesture">
+				<Example.Item title="disableSwipeGesture">
 					<Demo disableSwipeGesture position="start"/>
-				</storybook_1.Example.Item>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="scroll locks on open">
+				<Example.Item title="scroll locks on open">
 					<Demo />
-					<View_1.default height="1000px"/>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+					<View height="1000px"/>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.trapFocusEdgeCases = {
+export const trapFocusEdgeCases = {
     name: "test: trap focus edge cases",
     render: () => {
-        const toggle = (0, useToggle_1.default)();
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="Radio should be navigatable with arrow keys">
-					<Button_1.default onClick={toggle.activate}>Open modal</Button_1.default>
-					<Modal_1.default active={toggle.active} onClose={toggle.deactivate}>
-						<View_1.default gap={2}>
-							<Button_1.default onClick={() => { }}>Action 1</Button_1.default>
-							<Radio_1.default name="radio" value="1">
+        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_1.default>
-							<Radio_1.default name="radio" value="2">
+							</Radio>
+							<Radio name="radio" value="2">
 								Option 2
-							</Radio_1.default>
-							<Button_1.default onClick={() => { }}>Action 2</Button_1.default>
-						</View_1.default>
-					</Modal_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+							</Radio>
+							<Button onClick={() => { }}>Action 2</Button>
+						</View>
+					</Modal>
+				</Example.Item>
+			</Example>);
     },
 };