reshaped 3.3.13 → 3.4.0

package/dist/components/_private/Flyout/useFlyout.js

@@ -33,7 +33,8 @@ const flyout = (args) => {
     const targetClone = flyoutEl.cloneNode(true);
     const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
     const unitModifier = baseUnit ? parseInt(baseUnit) : 0;
-    const triggerBounds = passedTriggerBounds || triggerEl?.getBoundingClientRect();
+    const internalTriggerBounds = triggerEl?.getBoundingClientRect();
+    const triggerBounds = passedTriggerBounds || internalTriggerBounds;
     if (!triggerBounds)
         return;
     const resolvedTriggerBounds = getRectFromCoordinates(triggerBounds);
@@ -56,7 +57,12 @@ const flyout = (args) => {
     // Insert inside shadow root if possible to make sure styles are applied correctly
     (shadowRoot || document.body).appendChild(targetClone);
     const flyoutBounds = targetClone.getBoundingClientRect();
-    const containerParent = container || (triggerEl ? findClosestRenderContainer({ el: triggerEl }) : document.body);
+    const closestRenderContainer = !container && triggerEl ? findClosestRenderContainer({ el: triggerEl }) : undefined;
+    const containerParent = container ||
+        // Only render inside non-scrollable container to make sure it doesn't get clipped by overflow auto
+        // We render those cases in the document root and then sync the position on scroll instead
+        (!closestRenderContainer?.scrollable ? closestRenderContainer?.el : undefined) ||
+        document.body;
     const containerBounds = containerParent.getBoundingClientRect();
     const scopeOffset = {
         top: containerBounds.top + document.documentElement.scrollTop - containerParent.scrollTop,
@@ -74,7 +80,7 @@ const flyout = (args) => {
             contentGap: contentGap * unitModifier,
             contentShift: contentShift * unitModifier,
         });
-        const visible = isFullyVisible(tested);
+        const visible = isFullyVisible({ ...tested, container });
         const validPosition = visible || fallbackPositions?.length === 0;
         // Saving first try in case non of the options work
         if (validPosition || lastUsedFallback === currentPosition) {

package/dist/components/_private/Flyout/utilities/isFullyVisible.d.ts

@@ -2,5 +2,7 @@ import calculatePosition from "./calculatePosition";
 /**
  * Check if element visually fits on the screen
  */
-declare const isFullyVisible: (args: ReturnType<typeof calculatePosition>) => boolean;
+declare const isFullyVisible: (args: ReturnType<typeof calculatePosition> & {
+    container?: HTMLElement | null;
+}) => boolean;
 export default isFullyVisible;

package/dist/components/_private/Flyout/utilities/isFullyVisible.js

@@ -2,8 +2,8 @@
  * Check if element visually fits on the screen
  */
 const isFullyVisible = (args) => {
-    const { styles, scopeOffset } = args;
-    const htmlEl = document.documentElement;
+    const { styles, scopeOffset, container } = args;
+    const htmlEl = container || document.documentElement;
     const pageLeft = htmlEl.scrollLeft;
     const pageRight = pageLeft + htmlEl.clientWidth;
     const pageTop = htmlEl.scrollTop;

package/dist/hooks/_private/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare const usePrevious: <T>(value?: T, clean?: boolean) => T;
+export default usePrevious;

package/dist/hooks/_private/usePrevious.js

@@ -0,0 +1,17 @@
+"use client";
+import React from "react";
+const copy = (value) => {
+    const valueIsDate = value instanceof Date;
+    if (valueIsDate)
+        return String(valueIsDate);
+    const string = JSON.stringify(value);
+    return JSON.parse(string);
+};
+const usePrevious = (value, clean = false) => {
+    const ref = React.useRef(clean ? copy(value) : value);
+    React.useEffect(() => {
+        ref.current = clean ? copy(value) : value;
+    }, [value, clean]);
+    return ref.current;
+};
+export default usePrevious;

package/dist/hooks/_private/useSingletonEnvironment.d.ts

@@ -5,5 +5,5 @@ type Context = {
     defaultViewport: G.Viewport;
 };
 export declare const SingletonEnvironmentContext: React.Context<Context>;
-export declare const useSingletonRTL: (defaultRTL?: boolean) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+export declare const useSingletonEnvironment: (defaultRTL?: boolean) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];
 export {};

package/dist/hooks/_private/useSingletonEnvironment.js

@@ -4,7 +4,7 @@ export const SingletonEnvironmentContext = React.createContext({
     rtl: [false, () => { }],
     defaultViewport: "s",
 });
-export const useSingletonRTL = (defaultRTL) => {
+export const useSingletonEnvironment = (defaultRTL) => {
     const state = React.useState(defaultRTL || false);
     const [isRTL, setRTL] = state;
     /**

package/dist/hooks/_private/useSingletonKeyboardMode.d.ts

@@ -1,2 +1,13 @@
-declare const useSingletonKeyboardMode: () => void;
-export default useSingletonKeyboardMode;
+import React from "react";
+type ContextProps = {
+    disabledRef: React.RefObject<boolean> | null;
+    disable: () => void;
+    enable: () => void;
+    activate: () => void;
+    deactivate: () => void;
+};
+export declare const SingletonKeyboardModeContext: React.Context<ContextProps>;
+export declare const SingletonKeyboardModeProvider: (props: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/hooks/_private/useSingletonKeyboardMode.js

@@ -1,25 +1,58 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import * as keys from "../../constants/keys.js";
-import { enableKeyboardMode, disableKeyboardMode } from "../../utilities/a11y/index.js";
-const useSingletonKeyboardMode = () => {
+import { activateKeyboardMode, deactivateKeyboardMode } from "../../utilities/a11y/index.js";
+export const SingletonKeyboardModeContext = React.createContext({
+    disabledRef: null,
+    disable: () => { },
+    enable: () => { },
+    activate: () => { },
+    deactivate: () => { },
+});
+export const SingletonKeyboardModeProvider = (props) => {
+    const disabledRef = React.useRef(false);
+    const disable = React.useCallback(() => {
+        disabledRef.current = true;
+    }, []);
+    const enable = React.useCallback(() => {
+        disabledRef.current = false;
+    }, []);
+    const activate = React.useCallback(() => {
+        if (disabledRef.current)
+            return;
+        activateKeyboardMode();
+    }, []);
+    const deactivate = React.useCallback(() => {
+        if (disabledRef.current)
+            return;
+        deactivateKeyboardMode();
+    }, []);
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.metaKey || e.altKey || e.ctrlKey)
+            return;
+        // Prevent focus ring from appearing when using mouse but closing with esc
+        if (e.key === keys.ESC)
+            return;
+        activate();
+    }, [activate]);
+    const handleClick = React.useCallback(() => {
+        deactivate();
+    }, [deactivate]);
     React.useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (e.metaKey || e.altKey || e.ctrlKey)
-                return;
-            // Prevent focus ring from appearing when using mouse but closing with esc
-            if (e.key === keys.ESC)
-                return;
-            enableKeyboardMode();
-        };
-        const handleClick = () => {
-            disableKeyboardMode();
-        };
         window.addEventListener("keydown", handleKeyDown);
         window.addEventListener("mousedown", handleClick);
         return () => {
             window.removeEventListener("keydown", handleKeyDown);
             window.removeEventListener("mousedown", handleClick);
         };
-    }, []);
+    }, [handleClick, handleKeyDown]);
+    const value = React.useMemo(() => ({
+        disabledRef,
+        disable,
+        enable,
+        activate,
+        deactivate,
+    }), [disable, enable, activate, deactivate]);
+    return (_jsx(SingletonKeyboardModeContext.Provider, { value: value, children: props.children }));
 };
-export default useSingletonKeyboardMode;

package/dist/hooks/tests/useKeyboardMode.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: StoryObj;

package/dist/hooks/tests/useKeyboardMode.stories.js

@@ -0,0 +1,37 @@
+import { expect, userEvent } from "@storybook/test";
+import Button from "../../components/Button/index.js";
+import View from "../../components/View/index.js";
+import useKeyboardMode from "../useKeyboardMode.js";
+export default { title: "Hooks/useKeyboardMode" };
+const Component = () => {
+    const { activate, deactivate, disable, enable } = useKeyboardMode();
+    return (<View direction="row" gap={2}>
+			<Button onClick={activate}>Activate</Button>
+			<Button onClick={deactivate}>Deactivate</Button>
+			<Button onClick={disable}>Disable</Button>
+			<Button onClick={enable}>Enable</Button>
+		</View>);
+};
+export const base = {
+    name: "base",
+    render: () => <Component />,
+    play: async ({ canvas }) => {
+        const attribute = "data-rs-keyboard";
+        const root = document.documentElement;
+        const activateTrigger = canvas.getAllByRole("button")[0];
+        const deactivateTrigger = canvas.getAllByRole("button")[1];
+        const disableTrigger = canvas.getAllByRole("button")[2];
+        const enableTrigger = canvas.getAllByRole("button")[3];
+        expect(root).not.toHaveAttribute(attribute);
+        await userEvent.click(activateTrigger);
+        expect(root).toHaveAttribute(attribute);
+        await userEvent.click(deactivateTrigger);
+        expect(root).not.toHaveAttribute(attribute);
+        await userEvent.click(disableTrigger);
+        await userEvent.click(activateTrigger);
+        expect(root).not.toHaveAttribute(attribute);
+        await userEvent.click(enableTrigger);
+        await userEvent.click(activateTrigger);
+        expect(root).toHaveAttribute(attribute);
+    },
+};

package/dist/hooks/useKeyboardMode.d.ts

@@ -0,0 +1,7 @@
+declare const useKeyboardMode: () => {
+    enable: () => void;
+    disable: () => void;
+    activate: () => void;
+    deactivate: () => void;
+};
+export default useKeyboardMode;

package/dist/hooks/useKeyboardMode.js

@@ -0,0 +1,13 @@
+"use client";
+import React from "react";
+import { SingletonKeyboardModeContext } from "./_private/useSingletonKeyboardMode.js";
+const useKeyboardMode = () => {
+    const singletonKeyboardMode = React.useContext(SingletonKeyboardModeContext);
+    return React.useMemo(() => ({
+        enable: singletonKeyboardMode.enable,
+        disable: singletonKeyboardMode.disable,
+        activate: singletonKeyboardMode.activate,
+        deactivate: singletonKeyboardMode.deactivate,
+    }), [singletonKeyboardMode]);
+};
+export default useKeyboardMode;

package/dist/index.d.ts

@@ -73,6 +73,8 @@ export { default as Popover } from "./components/Popover";
 export type { PopoverProps, PopoverInstance } from "./components/Popover";
 export { default as Progress } from "./components/Progress";
 export type { ProgressProps } from "./components/Progress";
+export { default as ProgressIndicator } from "./components/ProgressIndicator";
+export type { ProgressIndicatorProps } from "./components/ProgressIndicator";
 export { default as Radio } from "./components/Radio";
 export type { RadioProps } from "./components/Radio";
 export { default as RadioGroup } from "./components/RadioGroup";
@@ -124,6 +126,7 @@ export { default as useToggle } from "./hooks/useToggle";
 export { default as useRTL } from "./hooks/useRTL";
 export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
 export { default as useHotkeys } from "./hooks/useHotkeys";
+export { default as useKeyboardMode } from "./hooks/useKeyboardMode";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue";
 /**
  * Utilities

package/dist/index.js

@@ -37,6 +37,7 @@ export { default as Pagination } from "./components/Pagination/index.js";
 export { default as PinField } from "./components/PinField/index.js";
 export { default as Popover } from "./components/Popover/index.js";
 export { default as Progress } from "./components/Progress/index.js";
+export { default as ProgressIndicator } from "./components/ProgressIndicator/index.js";
 export { default as Radio } from "./components/Radio/index.js";
 export { default as RadioGroup } from "./components/RadioGroup/index.js";
 export { default as Reshaped } from "./components/Reshaped/index.js";
@@ -67,6 +68,7 @@ export { default as useToggle } from "./hooks/useToggle.js";
 export { default as useRTL } from "./hooks/useRTL.js";
 export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
 export { default as useHotkeys } from "./hooks/useHotkeys.js";
+export { default as useKeyboardMode } from "./hooks/useKeyboardMode.js";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue.js";
 /**
  * Utilities

package/dist/utilities/a11y/index.d.ts

@@ -1,4 +1,4 @@
 export { focusableSelector, getActiveElement, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus";
-export { enableKeyboardMode, disableKeyboardMode, checkKeyboardMode } from "./keyboardMode";
+export { activateKeyboardMode, deactivateKeyboardMode, checkKeyboardMode } from "./keyboardMode";
 export { default as TrapFocus } from "./TrapFocus";
 export type { TrapMode, FocusableElement } from "./types";

package/dist/utilities/a11y/index.js

@@ -1,3 +1,3 @@
 export { focusableSelector, getActiveElement, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus.js";
-export { enableKeyboardMode, disableKeyboardMode, checkKeyboardMode } from "./keyboardMode.js";
+export { activateKeyboardMode, deactivateKeyboardMode, checkKeyboardMode } from "./keyboardMode.js";
 export { default as TrapFocus } from "./TrapFocus.js";

package/dist/utilities/a11y/keyboardMode.d.ts

@@ -1,3 +1,3 @@
-export declare const enableKeyboardMode: () => void;
-export declare const disableKeyboardMode: () => void;
+export declare const activateKeyboardMode: () => void;
+export declare const deactivateKeyboardMode: () => void;
 export declare const checkKeyboardMode: () => boolean;

package/dist/utilities/a11y/keyboardMode.js

@@ -1,8 +1,8 @@
 const keyboardModeAttribute = "data-rs-keyboard";
-export const enableKeyboardMode = () => {
+export const activateKeyboardMode = () => {
     document.documentElement.setAttribute(keyboardModeAttribute, "true");
 };
-export const disableKeyboardMode = () => {
+export const deactivateKeyboardMode = () => {
     document.documentElement.removeAttribute(keyboardModeAttribute);
 };
 export const checkKeyboardMode = () => {

package/dist/utilities/dom/find.d.ts

@@ -7,4 +7,7 @@ export declare const findClosestRenderContainer: (args: {
     el: HTMLElement | null;
     iteration?: number;
     overflowOnly?: boolean;
-}) => HTMLElement;
+}) => {
+    el: HTMLElement;
+    scrollable?: boolean;
+};

package/dist/utilities/dom/find.js

@@ -23,13 +23,13 @@ export const findClosestRenderContainer = (args) => {
     if (iteration === 0) {
         const shadowRoot = getShadowRoot(el);
         if (shadowRoot?.firstElementChild)
-            return shadowRoot.firstElementChild;
+            return { el: shadowRoot.firstElementChild };
     }
     if (el === document.body || !el)
-        return document.body;
+        return { el: document.body };
     if (isScrollable && el.scrollHeight > el.clientHeight)
-        return el;
+        return { el, scrollable: true };
     if (isFixed && !overflowOnly)
-        return el;
+        return { el };
     return findClosestRenderContainer({ el: el.parentElement, iteration: iteration + 1 });
 };

package/dist/utilities/scroll/lockStandard.js

@@ -5,7 +5,7 @@ const styleCache = new StyleCache();
 const lockStandardScroll = (args) => {
     let container = document.body;
     if (args.originEl)
-        container = findClosestRenderContainer({ el: args.originEl });
+        container = findClosestRenderContainer({ el: args.originEl }).el;
     if (args.containerEl)
         container = args.containerEl;
     const rect = container.getBoundingClientRect();

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.3.13",
+	"version": "3.4.0",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -71,9 +71,8 @@
 		"build:cjs": "tsc -p tsconfig.cjs.json && resolve-tspaths -p tsconfig.cjs.json && node ./bin/format-cjs-build.js",
 		"build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",
 		"build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
-		"build:bundle:vite": "vite build",
-		"build:bundle": "yarn build:bundle:vite && cp dist/index.d.ts dist/bundle.d.ts",
-		"build:size": "yarn clean && yarn build:esm && yarn build:bundle:vite",
+		"build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",
+		"build:size": "yarn clean && yarn build:esm && yarn build:bundle",
 		"build:storybook": "storybook build -o dist/app --disable-telemetry",
 		"build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
 		"release": "read -p 'Have you updated chromatic tests?' && yarn release:lib && yarn release:source && yarn build:storybook && yarn release:copy",

package/dist/components/_private/Flyout/tests/Flyout.test.stories.d.ts

@@ -1,28 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const defaultActive: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const active: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const activeFalse: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const triggerType: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-}>;
-export declare const containerRef: StoryObj;
-export declare const shadowDom: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,205 +0,0 @@
-import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
-import Flyout from "../index.js";
-import Button from "../../../Button/index.js";
-import Reshaped from "../../../Reshaped/index.js";
-import { useRef } from "react";
-import { createRoot } from "react-dom/client";
-import { sleep } from "../../../../utilities/helpers.js";
-export default {
-    title: "Internal/Flyout/tests",
-};
-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}>Open</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();
-            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}>Open</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();
-        });
-        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}>Open</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 triggerType = {
-    name: "triggerType hover",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Flyout onOpen={args.handleOpen} onClose={args.handleClose} triggerType="hover">
-			<Flyout.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</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.hover(trigger);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-        });
-        await userEvent.unhover(trigger);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith();
-        });
-    },
-};
-export const disabled = {
-    name: "disabled",
-    args: {
-        handleOpen: fn(),
-    },
-    render: () => (<div data-testid="root">
-			<Flyout disabled>
-				<Flyout.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</Flyout.Trigger>
-				<Flyout.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
-					Content
-				</Flyout.Content>
-			</Flyout>
-		</div>),
-    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 = useRef(null);
-        return (<div ref={portalRef} data-testid="test-id">
-				<Flyout containerRef={portalRef} active>
-					<Flyout.Trigger>
-						{(attributes) => <Button attributes={attributes}>Trigger</Button>}
-					</Flyout.Trigger>
-					<Flyout.Content>Content</Flyout.Content>
-				</Flyout>
-			</div>);
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const containerEl = canvas.getByTestId("test-id");
-        const contentEl = canvas.getByText("Content");
-        expect(containerEl).toContainElement(contentEl);
-    },
-};
-class CustomElement extends window.HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: "open" });
-        if (!this.shadowRoot)
-            return;
-        const root = createRoot(this.shadowRoot);
-        root.render(<Reshaped>
-				<Flyout active>
-					<Flyout.Trigger>
-						{(attributes) => <button {...attributes}>Trigger</button>}
-					</Flyout.Trigger>
-					<Flyout.Content>
-						<div id="test-id"/>
-					</Flyout.Content>
-				</Flyout>
-			</Reshaped>);
-    }
-}
-window.customElements.define("custom-element-flyout", CustomElement);
-export const shadowDom = {
-    name: "shadow DOM",
-    // @ts-ignore
-    render: () => <custom-element-flyout />,
-    play: async () => {
-        expect(document.querySelector("custom-element-flyout")?.shadowRoot?.querySelector(`#test-id`)).toBeTruthy();
-        expect(document.body.querySelector(`#test-id`)).toBe(null);
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Flyout active>
-				<Flyout.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</Flyout.Trigger>
-				<Flyout.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
-					Content
-				</Flyout.Content>
-			</Flyout>
-		</div>),
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const menu = await canvas.findByTestId("test-id");
-        expect(menu).toHaveClass("test-classname");
-    },
-};