reshaped 3.3.12 → 3.4.0-rc.0

package/dist/components/_private/Flyout/tests/Flyout.stories.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
+import { userEvent, waitFor, within, expect, fn } from "@storybook/test";
 import { Example } from "../../../../utilities/storybook/index.js";
 import Reshaped from "../../../Reshaped/index.js";
 import View from "../../../View/index.js";
@@ -7,177 +8,442 @@ import Theme from "../../../Theme/index.js";
 import Button from "../../../Button/index.js";
 import Flyout from "../index.js";
 import TextField from "../../../TextField/index.js";
+import MenuItem from "../../../MenuItem/index.js";
+import { sleep } from "../../../../utilities/helpers.js";
 export default { title: "Internal/Flyout" };
+/**
+ * Unit
+ * - groupTimeouts
+ * - id
+ * - contentClassName
+ * - contentAttributes
+ * - content attributes
+ * - content className
+ */
+const Content = (props) => (<div style={{
+        background: "var(--rs-color-background-elevation-overlay)",
+        padding: "var(--rs-unit-x4)",
+        height: props.height ?? 150,
+        minWidth: props.width === false ? undefined : props.width || 160,
+        borderRadius: "var(--rs-radius-medium)",
+        border: "1px solid var(--rs-color-border-neutral-faded)",
+        boxSizing: "border-box",
+    }}>
+		{props.children || "Content"}
+	</div>);
 const Demo = (props) => {
-    const { position = "bottom-start", children, ...rest } = props;
-    return (<Flyout triggerType="click" position={position} {...rest}>
+    const { position = "bottom-start", children, contentHeight, contentWidth, ...rest } = props;
+    return (<Flyout position={position} {...rest}>
 			<Flyout.Trigger>
 				{(attributes) => <Button attributes={attributes}>{position}</Button>}
 			</Flyout.Trigger>
 			<Flyout.Content>
-				<div style={{
-            background: "var(--rs-color-background-elevation-overlay)",
-            padding: "var(--rs-unit-x4)",
-            height: 150,
-            minWidth: 160,
-            borderRadius: "var(--rs-radius-medium)",
-            border: "1px solid var(--rs-color-border-neutral-faded)",
-            boxSizing: "border-box",
-        }}>
-					{children || "Content"}
-				</div>
+				<Content height={contentHeight} width={contentWidth}>
+					{children}
+				</Content>
 			</Flyout.Content>
 		</Flyout>);
 };
-export const position = () => (<div style={{ paddingTop: 200 }}>
-		<View gap={3} direction="row">
-			<Demo position="bottom-start"/>
-			<Demo position="bottom-end"/>
-			<Demo position="bottom"/>
+export const position = {
+    name: "position",
+    render: () => {
+        return (<View gap={4} padding={50} align="center" justify="center">
+				<View gap={4} direction="row">
+					<Demo position="top-start"/>
+					<Demo position="top"/>
+					<Demo position="top-end"/>
+				</View>
 
-			<Demo position="top-start"/>
-			<Demo position="top-end"/>
-			<Demo position="top"/>
+				<View gap={4} direction="row">
+					<Demo position="end-top"/>
+					<Demo position="end"/>
+					<Demo position="end-bottom"/>
+				</View>
 
-			<Demo position="end"/>
-			<Demo position="end-top"/>
-			<Demo position="end-bottom"/>
+				<View gap={4} direction="row">
+					<Demo position="start-top"/>
+					<Demo position="start"/>
+					<Demo position="start-bottom"/>
+				</View>
 
-			<Demo position="start"/>
-			<Demo position="start-top"/>
-			<Demo position="start-bottom"/>
-		</View>
-	</div>);
-export const dynamicPosition = () => (<div style={{ position: "absolute", top: 0, left: "50%" }}>
-		<Demo position="top"/>
-	</div>);
-export const originCoordinates = () => {
-    const [coordinates, setCoordinates] = React.useState(null);
-    return (<Example>
-			<Example.Item>
-				<View height={25} width={25} attributes={{
-            onContextMenu: (e) => {
-                e.preventDefault();
-                setCoordinates({ x: e.clientX, y: e.clientY });
-            },
-        }} backgroundColor="neutral-faded" borderRadius="medium"/>
-				<br /> <br />
-				<Demo position="top" originCoordinates={coordinates} active={!!coordinates} onClose={() => setCoordinates(null)}/>
-			</Example.Item>
-		</Example>);
+				<View gap={4} direction="row">
+					<Demo position="bottom-start"/>
+					<Demo position="bottom"/>
+					<Demo position="bottom-end" defaultActive/>
+				</View>
+			</View>);
+    },
 };
-export const modes = () => (<Example>
-		<Example.Item title="dialog click">
-			<Demo position="bottom-start" trapFocusMode="dialog">
-				<button type="button">Item 1</button>
-				<button type="button">Item 2</button>
-				<button type="button">Close</button>
-			</Demo>
-		</Example.Item>
-
-		<Example.Item title="action-menu click">
-			<Demo position="bottom-start" trapFocusMode="action-menu">
-				<button type="button">Item 1</button>
-				<button type="button">Item 2</button>
-				<button type="button">Close</button>
-			</Demo>
-		</Example.Item>
+export const defaultActive = {
+    name: "defaultActive, uncontrolled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Flyout onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+			</Flyout.Trigger>
+			<Flyout.Content>
+				<Content />
+			</Flyout.Content>
+		</Flyout>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        let item = canvas.getByText("Content");
+        await sleep(500);
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+            expect(item).not.toBeInTheDocument();
+        });
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        item = canvas.getByText("Content");
+        expect(item).toBeInTheDocument();
+    },
+};
+export const active = {
+    name: "active, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Flyout onOpen={args.handleOpen} onClose={args.handleClose} active>
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+			</Flyout.Trigger>
+			<Flyout.Content>
+				<Content />
+			</Flyout.Content>
+		</Flyout>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const item = canvas.getByText("Content");
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+        });
+        expect(item).toBeInTheDocument();
+    },
+};
+export const activeFalse = {
+    name: "active: false, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Flyout onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+			</Flyout.Trigger>
+			<Flyout.Content>
+				<Content />
+			</Flyout.Content>
+		</Flyout>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        const item = canvas.queryByText("Content");
+        expect(item).not.toBeInTheDocument();
+    },
+};
+export const modes = {
+    name: "triggerType, trapFocusMode",
+    render: () => {
+        return (<Example>
+				<Example.Item title={[
+                "triggerType: click, trapFocusMode: dialog",
+                "tab navigation, completely traps the focus inside",
+            ]}>
+					<Demo position="bottom-start" trapFocusMode="dialog">
+						<View direction="row" gap={2}>
+							<Button onClick={() => { }}>Action 1</Button>
+							<Button onClick={() => { }}>Action 2</Button>
+							<Button onClick={() => { }}>Action 3</Button>
+						</View>
+					</Demo>
+				</Example.Item>
 
-		<Example.Item title="content-menu click">
-			<Demo position="bottom-start" trapFocusMode="content-menu">
-				<button type="button">Item 1</button>
-				<button type="button">Item 2</button>
-				<button type="button">Close</button>
-			</Demo>
-		</Example.Item>
+				<Example.Item title={[
+                "triggerType: click, trapFocusMode: action-menu",
+                "arrow navigation, tab closes the content",
+            ]}>
+					<Demo position="bottom-start" trapFocusMode="action-menu">
+						<View direction="row" gap={2}>
+							<Button onClick={() => { }}>Action 1</Button>
+							<Button onClick={() => { }}>Action 2</Button>
+							<Button onClick={() => { }}>Action 3</Button>
+						</View>
+					</Demo>
+				</Example.Item>
 
-		<Example.Item title="dialog hover">
-			<Demo position="bottom-start" trapFocusMode="dialog" triggerType="hover">
-				<button type="button">Item 1</button>
-				<button type="button">Item 2</button>
-				<button type="button">Close</button>
-			</Demo>
-		</Example.Item>
+				<Example.Item title={[
+                "triggerType: click, trapFocusMode: content-menu",
+                "tab navigation, simulates natural focus order for navigation menus",
+            ]}>
+					<Demo position="bottom-start" trapFocusMode="content-menu">
+						<View direction="row" gap={2}>
+							<Button onClick={() => { }}>Action 1</Button>
+							<Button onClick={() => { }}>Action 2</Button>
+							<Button onClick={() => { }}>Action 3</Button>
+						</View>
+					</Demo>
+				</Example.Item>
 
-		<Example.Item title="action-menu hover">
-			<Demo position="bottom-start" trapFocusMode="action-menu" triggerType="hover">
-				<button type="button">Item 1</button>
-				<button type="button">Item 2</button>
-				<button type="button">Close</button>
-			</Demo>
-		</Example.Item>
+				<Example.Item title="triggerType: hover, trapFocusMode: dialog">
+					<Demo position="bottom-start" trapFocusMode="dialog" triggerType="hover">
+						<View direction="row" gap={2}>
+							<Button onClick={() => { }}>Action 1</Button>
+							<Button onClick={() => { }}>Action 2</Button>
+							<Button onClick={() => { }}>Action 3</Button>
+						</View>
+					</Demo>
+				</Example.Item>
 
-		<Example.Item title="content-menu hover without buttons">
-			<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
-				<div style={{ height: 50, width: 50, background: "tomato" }}/>
-			</Demo>
-		</Example.Item>
+				<Example.Item title="triggerType: hover, trapFocusMode: action-menu">
+					<Demo position="bottom-start" trapFocusMode="action-menu" triggerType="hover">
+						<View direction="row" gap={2}>
+							<Button onClick={() => { }}>Action 1</Button>
+							<Button onClick={() => { }}>Action 2</Button>
+							<Button onClick={() => { }}>Action 3</Button>
+						</View>
+					</Demo>
+				</Example.Item>
 
-		<Example.Item title="content-menu hover">
-			<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
-				<button type="button">Item 1</button>
-				<button type="button">Item 2</button>
-				<button type="button">Close</button>
-			</Demo>
-		</Example.Item>
-	</Example>);
-export const width = () => (<Example>
-		<Example.Item title="width: 300px">
-			<Demo width="300px" position="bottom"/>
-		</Example.Item>
-		<Example.Item title="width: trigger">
-			<Flyout triggerType="click" width="trigger" position="bottom">
-				<Flyout.Trigger>
-					{(attributes) => <Button attributes={attributes}>Trigger with long text</Button>}
-				</Flyout.Trigger>
-				<Flyout.Content>
-					<div style={{
-        background: "var(--rs-color-background-elevation-overlay)",
-        padding: "var(--rs-unit-x4)",
-        borderRadius: "var(--rs-radius-medium)",
-        border: "1px solid var(--rs-color-border-neutral-faded)",
-        boxSizing: "border-box",
-    }}></div>
-				</Flyout.Content>
-			</Flyout>
-		</Example.Item>
-	</Example>);
-export const offset = () => (<Example>
-		<Example.Item title="contentGap: x10">
-			<Demo contentGap={10}/>
-		</Example.Item>
-		<Example.Item title="contentShift: x10">
-			<Demo contentShift={10}/>
-		</Example.Item>
-	</Example>);
-export const disableFlags = () => (<Example>
-		<Example.Item title="disableContentHover">
-			<Demo triggerType="hover" disableContentHover>
-				Content
-			</Demo>
-		</Example.Item>
+				<Example.Item title="triggerType: hover, trapFocusMode: content-menu">
+					<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
+						<View direction="row" gap={2}>
+							<Button onClick={() => { }}>Action 1</Button>
+							<Button onClick={() => { }}>Action 2</Button>
+							<Button onClick={() => { }}>Action 3</Button>
+						</View>
+					</Demo>
+				</Example.Item>
 
-		<Example.Item title="disableCloseOnOutsideClick">
-			<Demo disableCloseOnOutsideClick>Content</Demo>
-		</Example.Item>
+				<Example.Item title={[
+                "triggerType: hover, trapFocusMode: content-menu, no focusable elements inside",
+                "keeps the focus on trigger",
+            ]}>
+					<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover"/>
+				</Example.Item>
 
-		<Example.Item title="disableHideAnimation">
-			<Demo disableHideAnimation>Content</Demo>
-		</Example.Item>
-	</Example>);
-export const initialFocus = () => {
-    const initialFocusRef = React.useRef(null);
-    return (<Example>
-			<Example.Item title="focuses input on open">
-				<Demo initialFocusRef={initialFocusRef}>
-					<View gap={4}>
-						<Button onClick={() => { }}>Click me</Button>
-						<TextField name="foo" inputAttributes={{ ref: initialFocusRef }}/>
+				<Example.Item title={[
+                "triggerType: focus, trapFocusMode: selection-menu",
+                "keeps real focus on trigger and simulates arrow key item selection focus on the content",
+            ]}>
+					<Demo position="bottom-start" trapFocusMode="selection-menu" triggerType="focus">
+						<View gap={1}>
+							<MenuItem onClick={() => { }} roundedCorners>
+								Action 1
+							</MenuItem>
+							<MenuItem onClick={() => { }} roundedCorners>
+								Action 2
+							</MenuItem>
+							<MenuItem onClick={() => { }} roundedCorners>
+								Action 3
+							</MenuItem>
+						</View>
+					</Demo>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const positionFallbacks = {
+    name: "fallbackPositions",
+    render: () => {
+        return (<Example>
+				<Example.Item title="position: top, no fallbacks passed">
+					<View justify="center" align="center">
+						<Demo position="top"/>
 					</View>
-				</Demo>
+				</Example.Item>
+				<Example.Item title="position: top, fallbackPositions: [start]">
+					<View justify="center" align="center">
+						<Demo position="top" fallbackPositions={["start"]} contentHeight={200} defaultActive/>
+					</View>
+				</Example.Item>
+				<Example.Item title="position: top, fallbackPositions: false">
+					<View justify="center" align="center">
+						<Demo position="top" fallbackPositions={false} contentHeight={400}/>
+					</View>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const originCoordinates = {
+    name: "originCoordinates",
+    render: () => {
+        return (<View gap={4} direction="row">
+				<Demo position="bottom-start" originCoordinates={{ x: 150, y: 150 }} defaultActive/>
+			</View>);
+    },
+};
+export const width = {
+    name: "width",
+    render: () => (<Example>
+			<Example.Item title="width: 300px">
+				<Demo width="300px" position="bottom"/>
 			</Example.Item>
-		</Example>);
+
+			<Example.Item title="width: trigger">
+				<Demo width="trigger" contentWidth={false} defaultActive/>
+			</Example.Item>
+		</Example>),
+};
+export const contentGap = {
+    name: "contentGap",
+    render: () => <Demo contentGap={10} defaultActive/>,
+};
+export const contentShift = {
+    name: "contentShift",
+    render: () => <Demo contentShift={10} defaultActive/>,
 };
+export const disableContentHover = {
+    name: "disableContentHover",
+    render: () => <Demo triggerType="hover" disableContentHover/>,
+};
+export const disableCloseOnOutsideClick = {
+    name: "disableCloseOnOutsideClick",
+    render: () => <Demo disableCloseOnOutsideClick/>,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            const content = canvas.getByText("Content");
+            expect(content).toBeVisible();
+        });
+        await userEvent.click(document.body);
+        await sleep(500);
+        const content = canvas.getByText("Content");
+        expect(content).toBeVisible();
+    },
+};
+export const disableHideAnimation = {
+    name: "disableHideAnimation",
+    render: () => <Demo disableHideAnimation defaultActive/>,
+};
+export const disabled = {
+    name: "disabled",
+    args: {
+        handleOpen: fn(),
+    },
+    render: () => (<Flyout disabled>
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+			</Flyout.Trigger>
+			<Flyout.Content>
+				<Content />
+			</Flyout.Content>
+		</Flyout>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(args.handleOpen).toHaveBeenCalledTimes(0);
+    },
+};
+export const containerRef = {
+    name: "containerRef",
+    render: () => {
+        const portalRef = React.useRef(null);
+        return (<View backgroundColor="neutral-faded" borderRadius="small" height={80} attributes={{ ref: portalRef, "data-testid": "container" }} justify="end" align="start" padding={4}>
+				<Demo containerRef={portalRef} defaultActive position="bottom-start"/>
+			</View>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const containerEl = canvas.getByTestId("container");
+        const contentEl = canvas.getByText("Content");
+        expect(containerEl).toContainElement(contentEl);
+    },
+};
+export const initialFocusRef = {
+    name: "initialFocusRef",
+    render: () => {
+        const initialFocusRef = React.useRef(null);
+        return (<Demo initialFocusRef={initialFocusRef}>
+				<View gap={4}>
+					<Button onClick={() => { }}>Action 1</Button>
+					<TextField name="foo" inputAttributes={{ ref: initialFocusRef }}/>
+				</View>
+			</Demo>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            const input = canvas.getByRole("textbox");
+            expect(input).toBe(document.activeElement);
+        });
+    },
+};
+export const instanceRef = {
+    name: "instanceRef",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => {
+        const flyoutRef = React.useRef(null);
+        return (<View direction="row" gap={4}>
+				<Demo instanceRef={flyoutRef} disableCloseOnOutsideClick onOpen={args.handleOpen} onClose={args.handleClose}/>
+
+				<Button onClick={() => flyoutRef.current?.open()}>Open</Button>
+				<Button onClick={() => flyoutRef.current?.close()}>Close</Button>
+			</View>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const openTrigger = canvas.getAllByRole("button")[1];
+        const closeTrigger = canvas.getAllByRole("button")[2];
+        await userEvent.click(openTrigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        await sleep(500);
+        await userEvent.click(closeTrigger);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({});
+        });
+    },
+};
+export const contentAttributes = {
+    name: "content: className, attributes",
+    render: () => {
+        return (<Flyout position="bottom" defaultActive>
+				<Flyout.Trigger>
+					{(attributes) => <Button attributes={attributes}>`Trigger</Button>}
+				</Flyout.Trigger>
+				<Flyout.Content attributes={{ "data-testid": "test-id" }} className="test-classname">
+					<Content />
+				</Flyout.Content>
+			</Flyout>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const content = canvas.getByTestId("test-id");
+        expect(content).toHaveClass("test-classname");
+    },
+};
+/*
+ * Test edge cases
+ */
 class CustomElement extends window.HTMLElement {
     constructor() {
         super();
@@ -185,152 +451,132 @@ class CustomElement extends window.HTMLElement {
         if (!this.shadowRoot)
             return;
         const node = (<Reshaped>
-				<Flyout active>
-					<Flyout.Trigger>{(attributes) => <button {...attributes}>Open</button>}</Flyout.Trigger>
-					<Flyout.Content>Content</Flyout.Content>
-				</Flyout>
+				<Demo defaultActive>
+					Content
+					<div id="test-id"/>
+				</Demo>
 			</Reshaped>);
         const root = createRoot(this.shadowRoot);
         root.render(node);
     }
 }
-if (!window.customElements.get("custom-element")) {
-    window.customElements.define("custom-element", CustomElement);
+if (!window.customElements.get("custom-element-flyout")) {
+    window.customElements.define("custom-element-flyout", CustomElement);
 }
-export const customPortalTarget = () => {
-    const portalRef = React.useRef(null);
-    return (<Example>
-			<Example.Item title="Custom containerRef">
-				<View padding={4} paddingInline={40} height={50} overflow="auto" backgroundColor="neutral-faded" borderRadius="small" attributes={{ ref: portalRef }}>
-					<Flyout position="bottom-end" active>
-						<Flyout.Trigger>{(attributes) => <button {...attributes}>Open</button>}</Flyout.Trigger>
+export const testShadowDom = {
+    name: "test: shadow dom",
+    // @ts-ignore
+    render: () => <custom-element-flyout />,
+};
+export const testInsideFixed = {
+    name: "test: inside position fixed",
+    render: () => (<React.Fragment>
+			<View position="fixed" insetTop={2} insetStart={2} insetEnd={2} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }}>
+				<Demo defaultActive/>
+			</View>
+			<View paddingTop={18} gap={4}>
+				<View height={200} backgroundColor="neutral-faded" borderRadius="small"/>
+				<View height={200} backgroundColor="neutral-faded" borderRadius="small"/>
+			</View>
+		</React.Fragment>),
+    play: ({ canvas }) => {
+        const container = canvas.getByTestId("container");
+        const content = canvas.getByText("Content");
+        expect(container).toContainElement(content);
+    },
+};
+export const testInsideSticky = {
+    name: "test: inside position sticky",
+    render: () => (<React.Fragment>
+			<View position="sticky" insetTop={4} insetStart={0} insetEnd={0} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }}>
+				<Demo defaultActive/>
+			</View>
+			<View gap={4} paddingTop={2}>
+				<View height={200} backgroundColor="neutral-faded" borderRadius="small"/>
+				<View height={200} backgroundColor="neutral-faded" borderRadius="small"/>
+			</View>
+		</React.Fragment>),
+    play: ({ canvas }) => {
+        const container = canvas.getByTestId("container");
+        const content = canvas.getByText("Content");
+        expect(container).toContainElement(content);
+    },
+};
+export const testInsideScrollable = {
+    name: "test: inside scrollable",
+    render: () => {
+        const containerRef = React.useRef(null);
+        return (<View padding={50}>
+				<View height={30} overflow="auto" backgroundColor="neutral-faded" borderRadius="small">
+					<View height={50} attributes={{ ref: containerRef }} padding={4} paddingBottom={30}>
+						<Demo position="start"/>
+					</View>
+				</View>
+			</View>);
+    },
+};
+export const testDynamicBounds = {
+    name: "test: auto position update",
+    render: () => {
+        const [left, setLeft] = React.useState(50);
+        const [top, setTop] = React.useState(50);
+        const [size, setSize] = React.useState("medium");
+        const flyoutRef = React.useRef(null);
+        React.useEffect(() => {
+            flyoutRef.current?.updatePosition();
+        }, [left, top]);
+        return (<View gap={4}>
+				<View direction="row" gap={2}>
+					<Button onClick={() => setLeft((prev) => prev - 10)}>Left</Button>
+					<Button onClick={() => setLeft((prev) => prev + 10)}>Right</Button>
+					<Button onClick={() => setTop((prev) => prev - 10)}>Up</Button>
+					<Button onClick={() => setTop((prev) => prev + 10)}>Down</Button>
+					<Button onClick={() => {
+                setLeft(50);
+                setTop(50);
+            }}>
+						Center
+					</Button>
+					<Button onClick={() => setSize("large")}>Large button</Button>
+					<Button onClick={() => setSize("medium")}>Small button</Button>
+				</View>
+				<View height={100}>
+					<Flyout position="bottom" instanceRef={flyoutRef} disableCloseOnOutsideClick>
+						<Flyout.Trigger>
+							{(attributes) => (<div style={{ position: "absolute", left: `${left}%`, top: `${top}%` }}>
+									<Button color="primary" attributes={attributes} size={size}>
+										Open
+									</Button>
+								</div>)}
+						</Flyout.Trigger>
 						<Flyout.Content>
-							<div style={{
-            background: "var(--rs-color-background-elevation-overlay)",
-            padding: "var(--rs-unit-x4)",
-            height: 200,
-            width: 160,
-            borderRadius: "var(--rs-radius-medium)",
-            border: "1px solid var(--rs-color-border-neutral-faded)",
-            boxSizing: "border-box",
-        }}>
-								{"Content"}
-							</div>
+							<Content />
 						</Flyout.Content>
 					</Flyout>
-					<div style={{ height: 1000 }}/>
 				</View>
-			</Example.Item>
-			<Example.Item title="Shadow dom">
-				{/* @ts-ignore */}
-				<custom-element />
-			</Example.Item>
-		</Example>);
+			</View>);
+    },
 };
-export const testInsideFixed = () => (<Example>
-		<Example.Item title="should move the content on page scroll">
-			<View position="fixed" insetTop={20} insetStart={0} insetEnd={0} backgroundColor="neutral-faded" padding={4}>
-				<Flyout triggerType="click" position="bottom-start">
-					<Flyout.Trigger>{(attributes) => <button {...attributes}>Foo</button>}</Flyout.Trigger>
-					<Flyout.Content>
-						<div style={{
-        background: "var(--rs-color-background-elevation-overlay)",
-        padding: "var(--rs-unit-x4)",
-        height: 100,
-        width: 160,
-        borderRadius: "var(--rs-radius-medium)",
-        border: "1px solid var(--rs-color-border-neutral-faded)",
-        boxSizing: "border-box",
-    }}>
-							{"Content"}
-						</div>
-					</Flyout.Content>
-				</Flyout>
-			</View>
-			<div style={{ height: 2000 }}/>
-		</Example.Item>
-	</Example>);
-export const testDynamicBounds = () => {
-    const [left, setLeft] = React.useState(50);
-    const [top, setTop] = React.useState(50);
-    const [size, setSize] = React.useState("medium");
-    const flyoutRef = React.useRef(null);
-    React.useEffect(() => {
-        flyoutRef.current?.updatePosition();
-    }, [left, top]);
-    return (<View gap={4}>
-			<View direction="row" gap={2}>
-				<Button onClick={() => setLeft((prev) => prev - 10)}>Left</Button>
-				<Button onClick={() => setLeft((prev) => prev + 10)}>Right</Button>
-				<Button onClick={() => setTop((prev) => prev - 10)}>Up</Button>
-				<Button onClick={() => setTop((prev) => prev + 10)}>Down</Button>
-				<Button onClick={() => {
-            setLeft(50);
-            setTop(50);
-        }}>
-					Center
-				</Button>
-				<Button onClick={() => setSize("large")}>Large button</Button>
-				<Button onClick={() => setSize("medium")}>Small button</Button>
-			</View>
-			<View height={100}>
-				<Flyout position="bottom" instanceRef={flyoutRef} disableCloseOnOutsideClick fallbackPositions={["top", "bottom"]}>
+export const testScopedTheming = {
+    name: "test: content uses scope theme",
+    render: () => (<View gap={3} align="start">
+			<Button color="primary">Reshaped button</Button>
+			<Theme name="slate">
+				<Flyout triggerType="click" active position="bottom-start">
 					<Flyout.Trigger>
-						{(attributes) => (<div style={{ position: "absolute", left: `${left}%`, top: `${top}%` }}>
-								<Button color="primary" attributes={attributes} size={size}>
-									Open
-								</Button>
-							</div>)}
+						{(attributes) => (<Button color="primary" attributes={attributes}>
+								Slate button
+							</Button>)}
 					</Flyout.Trigger>
 					<Flyout.Content>
-						<div style={{
-            background: "var(--rs-color-background-elevation-overlay)",
-            padding: "var(--rs-unit-x4)",
-            height: 100,
-            minWidth: 160,
-            borderRadius: "var(--rs-radius-medium)",
-            border: "1px solid var(--rs-color-border-neutral-faded)",
-            boxSizing: "border-box",
-        }}>
-							Content
-						</div>
+						<Content>
+							<View gap={1}>
+								<View.Item>Portal content, rendered in body</View.Item>
+								<Button color="primary">Slate button</Button>
+							</View>
+						</Content>
 					</Flyout.Content>
 				</Flyout>
-			</View>
-		</View>);
+			</Theme>
+		</View>),
 };
-export const testDisableOutsideClick = () => {
-    return (<Example>
-			<Example.Item title="opening second flyout shouldn't block the first one from closing">
-				<View direction="row" gap={4}>
-					<Demo disableCloseOnOutsideClick/>
-					<Demo />
-				</View>
-			</Example.Item>
-		</Example>);
-};
-export const testScopedTheming = () => (<View gap={3} align="start">
-		<Button color="primary">Reshaped button</Button>
-		<Theme name="slate">
-			<Flyout triggerType="click" active position="bottom-start">
-				<Flyout.Trigger>
-					{(attributes) => (<Button color="primary" attributes={attributes}>
-							Slate button
-						</Button>)}
-				</Flyout.Trigger>
-				<Flyout.Content>
-					<div style={{
-        background: "var(--rs-color-background-elevation-overlay)",
-        padding: 8,
-        border: "1px solid var(--rs-color-border-neutral-faded)",
-        boxSizing: "border-box",
-    }}>
-						<View gap={1}>
-							<View.Item>Portal content, rendered in body</View.Item>
-							<Button color="primary">Slate button</Button>
-						</View>
-					</div>
-				</Flyout.Content>
-			</Flyout>
-		</Theme>
-	</View>);