reshaped 3.8.0-canary.2 → 3.8.0-canary.20

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

@@ -4,6 +4,7 @@ import Text from "../../Text/index.js";
 import MenuItem from "../index.js";
 import IconZap from "../../../icons/Zap.js";
 import Hotkey from "../../Hotkey/index.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/MenuItem",
     component: MenuItem,
@@ -13,118 +14,223 @@ export default {
         },
     },
 };
-export const size = () => (<Example>
-		<Example.Item title="size: small">
-			<MenuItem size="small" icon={IconZap} onClick={() => { }} endSlot={<Hotkey>⌘K</Hotkey>}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-		<Example.Item title="size: medium">
-			<MenuItem icon={IconZap} onClick={() => { }}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-		<Example.Item title="size: large">
-			<MenuItem size="large" icon={IconZap} onClick={() => { }}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-		<Example.Item title={["responsive size", "[s] small", "[m] medium", "[l+] large"]}>
-			<MenuItem size={{ s: "small", m: "medium", l: "large" }} icon={IconZap} onClick={() => { }}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-	</Example>);
-export const color = () => (<Example>
-		<Example.Item title="color: neutral">
-			<MenuItem color="neutral" icon={IconZap}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-		<Example.Item title="color: primary">
-			<MenuItem color="primary" icon={IconZap}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-		<Example.Item title="color: critical">
-			<MenuItem color="critical" icon={IconZap}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-	</Example>);
-export const selected = () => (<Example>
-		<Example.Item title="selected, color: neutral">
-			<MenuItem color="neutral" selected icon={IconZap}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-		<Example.Item title="selected, color: primary">
-			<MenuItem color="primary" selected icon={IconZap}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-		<Example.Item title="selected, color: critical">
-			<MenuItem color="critical" selected icon={IconZap}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled">
-			<MenuItem disabled icon={IconZap}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-	</Example>);
-export const roundedCorners = () => (<Example>
-		<Example.Item title="roundedCorners">
-			<MenuItem roundedCorners selected icon={IconZap}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<MenuItem size="small" icon={IconZap} onClick={() => { }} endSlot={<Hotkey>⌘K</Hotkey>}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="size: medium">
+				<MenuItem icon={IconZap} onClick={() => { }}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="size: large">
+				<MenuItem size="large" icon={IconZap} onClick={() => { }}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title={["responsive size", "[s] small", "[m] medium", "[l+] large"]}>
+				<MenuItem size={{ s: "small", m: "medium", l: "large" }} icon={IconZap} onClick={() => { }}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+		</Example>),
+};
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: neutral">
+				<MenuItem color="neutral" icon={IconZap}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="color: primary">
+				<MenuItem color="primary" icon={IconZap}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<MenuItem color="critical" icon={IconZap}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+		</Example>),
+};
+export const selected = {
+    name: "selected",
+    render: () => (<Example>
+			<Example.Item title="selected, color: neutral">
+				<MenuItem color="neutral" selected icon={IconZap}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="selected, color: primary">
+				<MenuItem color="primary" selected icon={IconZap}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="selected, color: critical">
+				<MenuItem color="critical" selected icon={IconZap}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+		</Example>),
+};
+export const roundedCorners = {
+    name: "roundedCorners",
+    render: () => (<Example>
+			<Example.Item title="roundedCorners">
+				<MenuItem roundedCorners selected icon={IconZap}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
 
-		<Example.Item title={["responsive roundedCorners", "[s]: false", "[m+]: true"]}>
-			<MenuItem roundedCorners={{ s: false, m: true }} selected icon={IconZap}>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-	</Example>);
-export const slots = () => (<Example>
-		<Example.Item title="startSlot, endSlot, selected">
-			<MenuItem startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>} selected>
-				Menu item
-			</MenuItem>
-		</Example.Item>
-	</Example>);
-export const aligner = () => (<Example>
-		<Example.Item title="size: small">
-			<View gap={2}>
-				<Text variant="title-6">Heading</Text>
-				<MenuItem.Aligner>
-					<MenuItem size="small" selected onClick={() => { }}>
-						Menu item
-					</MenuItem>
-				</MenuItem.Aligner>
-			</View>
-		</Example.Item>
+			<Example.Item title={["responsive roundedCorners", "[s]: false", "[m+]: true"]}>
+				<MenuItem roundedCorners={{ s: false, m: true }} selected icon={IconZap}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+		</Example>),
+};
+export const slots = {
+    name: "startSlot, endSlot",
+    render: () => (<Example>
+			<Example.Item title="startSlot, endSlot, selected">
+				<MenuItem startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>} selected>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+		</Example>),
+};
+export const aligner = {
+    name: "aligner",
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<View gap={2}>
+					<Text variant="title-6">Heading</Text>
+					<MenuItem.Aligner>
+						<MenuItem size="small" selected onClick={() => { }}>
+							Menu item
+						</MenuItem>
+					</MenuItem.Aligner>
+				</View>
+			</Example.Item>
 
-		<Example.Item title="size: medium">
-			<View gap={2}>
-				<Text variant="title-6">Heading</Text>
-				<MenuItem.Aligner>
-					<MenuItem selected>Menu item</MenuItem>
-				</MenuItem.Aligner>
-			</View>
-		</Example.Item>
+			<Example.Item title="size: medium">
+				<View gap={2}>
+					<Text variant="title-6">Heading</Text>
+					<MenuItem.Aligner>
+						<MenuItem selected>Menu item</MenuItem>
+					</MenuItem.Aligner>
+				</View>
+			</Example.Item>
 
-		<Example.Item title="size: large">
-			<View gap={2}>
-				<Text variant="title-6">Heading</Text>
-				<MenuItem.Aligner>
-					<MenuItem size="large" selected>
-						Menu item
-					</MenuItem>
-				</MenuItem.Aligner>
-			</View>
-		</Example.Item>
-	</Example>);
+			<Example.Item title="size: large">
+				<View gap={2}>
+					<Text variant="title-6">Heading</Text>
+					<MenuItem.Aligner>
+						<MenuItem size="large" selected>
+							Menu item
+						</MenuItem>
+					</MenuItem.Aligner>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const href = {
+    name: "href",
+    render: () => <MenuItem href="https://reshaped.so">Trigger</MenuItem>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("link");
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <MenuItem onClick={args.handleClick}>Trigger</MenuItem>,
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getAllByRole("button")[0];
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("type", "button");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const hrefOnClick = {
+    name: "href + onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => (<MenuItem onClick={(e) => {
+            e.preventDefault();
+            args.handleClick(e);
+        }} href="https://reshaped.so">
+			Trigger
+		</MenuItem>),
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getByRole("link");
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<MenuItem disabled onClick={() => { }}>
+			Trigger
+		</MenuItem>),
+    play: async ({ canvas }) => {
+        const el = canvas.getAllByRole("button")[0];
+        expect(el).toBeDisabled();
+    },
+};
+export const as = {
+    name: "as, render",
+    render: () => (<Example>
+			<Example.Item title="render, disabled">
+				<MenuItem disabled onClick={() => { }} render={(props) => <section {...props}/>} attributes={{ "data-testid": "render-el" }}>
+					Trigger
+				</MenuItem>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const renderEl = canvas.getByTestId("render-el");
+        expect(renderEl.tagName).toBe("SECTION");
+        expect(renderEl).toHaveAttribute("aria-disabled", "true");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<MenuItem className="test-classname" attributes={{ id: "test-id" }}>
+				Trigger
+			</MenuItem>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const alignerClassName = {
+    name: "aligner, className, attributes",
+    render: () => (<div data-testid="root">
+			<MenuItem.Aligner className="test-classname" attributes={{ id: "test-id" }}>
+				<MenuItem>Trigger</MenuItem>
+			</MenuItem.Aligner>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Modal/Modal.js

@@ -87,7 +87,7 @@ const Modal = (props) => {
                 return;
             currentEl = currentEl ? currentEl.parentElement : null;
         }
-        // Prevent the drag handling when browser tab swiping is triggering
+        // Prevent the drag handling when browser is trying to navigate to a previous page
         if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
             return;
         disableUserSelect();

package/dist/components/Modal/Modal.module.css

@@ -1 +1 @@
-.root{--rs-modal-container-width:100vw;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);outline:none;transition:var(--rs-easing-accelerate) var(--rs-duration-fast);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}.root.--contained{--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
+.root{--rs-modal-container-width:100vw;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);outline:none;transition:var(--rs-easing-accelerate) var(--rs-duration-fast);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-shadow-focus)}.root.--contained{--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { type ModalProps } from "./..";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: React.FC<ModalProps> & {
@@ -13,13 +15,50 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const position: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const padding: () => React.JSX.Element;
-export declare const overflow: () => React.JSX.Element;
-export declare const composition: () => React.JSX.Element;
-export declare const overlay: () => React.JSX.Element;
-export declare const flags: () => React.JSX.Element;
-export declare const containerRef: () => React.JSX.Element;
-export declare const edgeCases: () => React.JSX.Element;
-export declare const trapFocusEdgeCases: () => React.JSX.Element;
+export declare const position: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const padding: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const overflow: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const composition: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const overlay: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const flags: StoryObj<{
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const containerRef: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+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 className: StoryObj;
+export declare const edgeCases: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const trapFocusEdgeCases: {
+    name: string;
+    render: () => React.JSX.Element;
+};