reshaped 3.9.0-canary.0 → 3.9.0-canary.10

package/dist/components/_private/HiddenInput/HiddenInput.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../../utilities/props.js";
-import s from "./HiddenInput.module.css";
-const HiddenInput = (props) => {
-    const { name, value, type, onChange, onFocus, onBlur, checked, defaultChecked, disabled, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, className);
-    return (_jsx("input", { ...attributes, className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, onFocus: onFocus || attributes?.onFocus, onBlur: onBlur || attributes?.onBlur }));
-};
-HiddenInput.displayName = "HiddenInput";
-export default HiddenInput;

package/dist/components/_private/HiddenInput/HiddenInput.types.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-import type * as G from "../../../types/global";
-export type Props = {
-    name?: string;
-    value?: string;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    disabled?: boolean;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (e: React.FocusEvent) => void;
-    onBlur?: (e: React.FocusEvent) => void;
-    type: "checkbox" | "radio";
-    className?: G.ClassName;
-    attributes?: G.Attributes<"input">;
-};

package/dist/components/_private/Portal/tests/Portal.stories.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const base: () => React.JSX.Element;

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

@@ -1,17 +0,0 @@
-import React from "react";
-import Portal from "../index.js";
-export default { title: "Internal/Portal" };
-export const base = () => {
-    const ref = React.useRef(null);
-    const [mounted, setMounted] = React.useState(false);
-    React.useEffect(() => {
-        setMounted(true);
-    }, []);
-    return (<>
-			<div style={{ border: "2px solid #333", padding: 16 }}>
-				App
-				{mounted && <Portal targetRef={ref}>Ported to green</Portal>}
-			</div>
-			<div ref={ref} style={{ border: "2px solid green", padding: 16 }}/>
-		</>);
-};

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

@@ -1,31 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const mouseEvents: StoryObj<{
-    handleDrag: ReturnType<typeof fn>;
-}>;
-export declare const touchEvents: StoryObj<{
-    handleDrag: ReturnType<typeof fn>;
-}>;
-export declare const orientationHorizontal: StoryObj<{
-    handleDrag: ReturnType<typeof fn>;
-}>;
-export declare const orientationVertical: StoryObj<{
-    handleDrag: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj<{
-    handleDrag: ReturnType<typeof fn>;
-}>;

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

@@ -1,147 +0,0 @@
-import React from "react";
-import { fireEvent, fn, expect } from "storybook/test";
-import View from "../../components/View/index.js";
-import useDrag from "../_private/useDrag.js";
-import useToggle from "../useToggle.js";
-import Button from "../../components/Button/index.js";
-export default {
-    title: "Internal/useDrag",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-function Example() {
-    const [state, setState] = React.useState({ x: 0, y: 0 });
-    const disabledToggle = useToggle();
-    const { ref, containerRef, active } = useDrag((args) => {
-        setState(args);
-    }, {
-        disabled: disabledToggle.active,
-    });
-    return (<View direction="row" gap={4}>
-			<View backgroundColor="neutral-faded" borderRadius="medium" width="200px" height="200px" attributes={{ ref: containerRef }}>
-				<View height={8} width={8} borderRadius="small" animated backgroundColor={active ? "primary" : "neutral"} attributes={{
-            role: "button",
-            tabIndex: 0,
-            "aria-label": "Drag",
-            ref,
-            style: { translate: `${state.x}px ${state.y}px`, cursor: active ? "grabbing" : "grab" },
-        }}/>
-			</View>
-			<Button onClick={() => disabledToggle.toggle()}>
-				{disabledToggle.active ? "Enable" : "Disable"}
-			</Button>
-		</View>);
-}
-export const base = { name: "base", render: () => <Example /> };
-const Demo = (props) => {
-    const { ref, containerRef } = useDrag((options) => {
-        props.onDrag(options);
-    }, {
-        orientation: props.orientation,
-        disabled: props.disabled,
-    });
-    return (<View backgroundColor="neutral-faded" width="200px" height="200px" attributes={{ ref: containerRef, "data-testid": "test-id" }}>
-			<View height={8} width={8} backgroundColor="primary" attributes={{
-            "data-testid": "test-handle-id",
-            ref,
-        }}/>
-		</View>);
-};
-export const mouseEvents = {
-    name: "onDrag, mouse events",
-    args: {
-        handleDrag: fn(),
-    },
-    render: (args) => {
-        return <Demo onDrag={args.handleDrag}/>;
-    },
-    play: ({ canvas, args }) => {
-        const trigger = canvas.getByTestId("test-handle-id");
-        fireEvent.mouseDown(trigger);
-        fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-        expect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 50 }));
-        fireEvent.mouseUp(trigger);
-        fireEvent.mouseUp(document.body, { clientX: 50, clientY: 100 });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-    },
-};
-export const touchEvents = {
-    name: "onDrag, touch events",
-    args: {
-        handleDrag: fn(),
-    },
-    render: (args) => {
-        return <Demo onDrag={args.handleDrag}/>;
-    },
-    play: ({ canvas, args }) => {
-        const createTouch = (target, x, y) => {
-            return new Touch({
-                identifier: Date.now(),
-                target,
-                clientX: x,
-                clientY: y,
-                screenX: x,
-                screenY: y,
-                pageX: x,
-                pageY: y,
-            });
-        };
-        const trigger = canvas.getByTestId("test-handle-id");
-        fireEvent.touchStart(trigger, { changedTouches: [createTouch(trigger, 0, 0)] });
-        fireEvent.touchMove(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-        expect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 50 }));
-        fireEvent.touchEnd(trigger);
-        fireEvent.touchEnd(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-    },
-};
-export const orientationHorizontal = {
-    name: "orientation horizontal",
-    args: {
-        handleDrag: fn(),
-    },
-    render: (args) => {
-        return <Demo onDrag={args.handleDrag} orientation="horizontal"/>;
-    },
-    play: ({ canvas, args }) => {
-        const trigger = canvas.getByTestId("test-handle-id");
-        fireEvent.mouseDown(trigger);
-        fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-        expect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 0 }));
-    },
-};
-export const orientationVertical = {
-    name: "orientation vertical",
-    args: {
-        handleDrag: fn(),
-    },
-    render: (args) => {
-        return <Demo onDrag={args.handleDrag} orientation="vertical"/>;
-    },
-    play: ({ canvas, args }) => {
-        const trigger = canvas.getByTestId("test-handle-id");
-        fireEvent.mouseDown(trigger);
-        fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-        expect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 0, y: 50 }));
-    },
-};
-export const disabled = {
-    name: "disabled",
-    args: {
-        handleDrag: fn(),
-    },
-    render: (args) => {
-        return <Demo onDrag={args.handleDrag} disabled/>;
-    },
-    play: ({ canvas, args }) => {
-        const trigger = canvas.getByTestId("test-handle-id");
-        fireEvent.mouseDown(trigger);
-        fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        expect(args.handleDrag).toHaveBeenCalledTimes(0);
-    },
-};

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

@@ -1,11 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const id: StoryObj;

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

@@ -1,23 +0,0 @@
-import { expect, waitFor } from "storybook/test";
-import useElementId from "../useElementId.js";
-export default {
-    title: "Hooks/useElementId",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const Component = (props) => {
-    const id = useElementId(props.id);
-    return <div id={id}>{id}</div>;
-};
-export const id = {
-    name: "passed id",
-    render: () => {
-        return <Component id="hey"/>;
-    },
-    play: async () => {
-        waitFor(() => {
-            expect(document.querySelector("#hey")).toBeTruthy();
-        });
-    },
-};

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

@@ -1,14 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { Mock } from "storybook/test";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj<{
-    handleEffect: Mock;
-}>;

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

@@ -1,44 +0,0 @@
-import React from "react";
-import { expect, fn, userEvent } from "storybook/test";
-import Button from "../../components/Button/index.js";
-import View from "../../components/View/index.js";
-import useHandlerRef from "../useHandlerRef.js";
-export default {
-    title: "Hooks/useHandlerRef",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const Component = (props) => {
-    const { onEffect, count } = props;
-    const onEffectRef = useHandlerRef(onEffect);
-    React.useEffect(() => {
-        onEffectRef.current();
-    }, [onEffectRef]);
-    return <>Counter: {count}</>;
-};
-export const base = {
-    name: "base",
-    args: {
-        handleEffect: fn(),
-    },
-    render: (args) => {
-        const [count, setCount] = React.useState(0);
-        // Creating a new handler on each render
-        const handleEffect = () => {
-            args.handleEffect(0);
-        };
-        return (<View gap={4}>
-				<Button onClick={() => setCount((prev) => prev + 1)}>Increase count</Button>
-				<Component onEffect={handleEffect} count={count}/>
-			</View>);
-    },
-    play: async ({ canvas, args }) => {
-        const button = canvas.getAllByRole("button")[0];
-        // mount, triggerred twice in dev mode
-        expect(args.handleEffect).toHaveBeenCalledTimes(2);
-        await userEvent.click(button);
-        // Rerendering the component doesn't re-trigger the effect
-        expect(args.handleEffect).toHaveBeenCalledTimes(2);
-    },
-};

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

@@ -1,43 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const singleKey: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const modKey: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const modKeyHold: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const keyList: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const keyCombination: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const keyCombinationFormat: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const keyCombinationOrder: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const keyCombinationMoreThanRequired: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const optionModified: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-    handleHotkeyModified: ReturnType<typeof fn>;
-}>;

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

@@ -1,158 +0,0 @@
-import { expect, fn, userEvent } from "storybook/test";
-import View from "../../components/View/index.js";
-import useHotkeys from "../useHotkeys.js";
-export default {
-    title: "Hooks/useHotkeys",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => {
-        const { checkHotkeyState } = useHotkeys({
-            "shift + b + n": () => console.log("pressed"),
-            "c + v": () => console.log("c + v"),
-            "Meta + k": () => console.log("meta + k"),
-            "Meta + f": () => console.log("meta + f"),
-            "Meta + v": () => console.log("meta + v"),
-            "Meta + b": () => console.log("meta + b"),
-            "control + enter": () => console.log("control + enter"),
-            "meta + enter": () => console.log("meta + enter"),
-            "mod + enter": () => console.log("mod + enter"),
-            "mod + ArrowRight": () => console.log("right"),
-            "mod + ArrowUp": () => console.log("top"),
-            "shift + ArrowRight": () => console.log("right"),
-            "shift + ArrowUp": () => console.log("top"),
-            "alt+shift+n": () => console.log("alt+shift+n"),
-            "shift+alt+n": () => console.log("shift+alt+n"),
-            "alt+shiftLeft+n": () => console.log("alt+shiftLeft+n"),
-        });
-        const active = checkHotkeyState("shift + b + n");
-        const shiftActive = checkHotkeyState("shift");
-        const bActive = checkHotkeyState("b");
-        const nActive = checkHotkeyState("n");
-        return (<View animated gap={2} direction="row" backgroundColor={active ? "positive-faded" : undefined} padding={2} borderRadius="small">
-				<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={shiftActive ? "neutral-faded" : "elevation-raised"} shadow={shiftActive ? undefined : "raised"}>
-					Shift
-				</View>
-				<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={bActive ? "neutral-faded" : "elevation-raised"} shadow={bActive ? undefined : "raised"}>
-					b
-				</View>
-				<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={nActive ? "neutral-faded" : "elevation-raised"} shadow={nActive ? undefined : "raised"}>
-					n
-				</View>
-			</View>);
-    },
-};
-const Component = (props) => {
-    const { hotkeys } = props;
-    useHotkeys(hotkeys);
-    return <div />;
-};
-export const singleKey = {
-    name: "single key",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ a: args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("a");
-        await userEvent.keyboard("b");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const modKey = {
-    name: "mod key",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ mod: args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{Meta/}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const modKeyHold = {
-    name: "mod key on hold",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "Meta + b": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{Meta>}bb{/Meta}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(2);
-    },
-};
-export const keyList = {
-    name: "key list",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "a,b": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("a");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-        await userEvent.keyboard("b");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(2);
-    },
-};
-export const keyCombination = {
-    name: "key combination",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "a+b": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{a>}b{/a}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const keyCombinationFormat = {
-    name: "key combination without formatting",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "A  + b": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{a>}b{/a}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const keyCombinationOrder = {
-    name: "key combination without order",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "b+a": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{a>}b{/a}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const keyCombinationMoreThanRequired = {
-    name: "key combination, more keys pressed",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "z + x": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{z>}{x>}c{/x}{/z}");
-        // When c is pressed, it doesn't trigger a+b for the second time
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const optionModified = {
-    name: "modified with alt/option",
-    args: {
-        handleHotkey: fn(),
-        handleHotkeyModified: fn(),
-    },
-    render: (args) => (<Component hotkeys={{ "alt+n": args.handleHotkeyModified, "alt+shift": args.handleHotkey }}/>),
-    play: async ({ args }) => {
-        await userEvent.keyboard("{Alt>}n{/Alt}");
-        expect(args.handleHotkeyModified).toHaveBeenCalledTimes(1);
-        await userEvent.keyboard("{Alt>}{Shift}{/Alt}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};

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

@@ -1,15 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj;
-export declare const horizontal: StoryObj;
-export declare const vertical: StoryObj;
-export declare const circular: StoryObj;
-export declare const disabled: StoryObj;

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

@@ -1,128 +0,0 @@
-import React, { useRef } from "react";
-import { expect, userEvent } from "storybook/test";
-import View from "../../components/View/index.js";
-import Button from "../../components/Button/index.js";
-import useKeyboardArrowNavigation from "../useKeyboardArrowNavigation.js";
-export default {
-    title: "Hooks/useKeyboardArrowNavigation",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => {
-        const ref = useRef(null);
-        useKeyboardArrowNavigation({ ref });
-        return (<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => { }}>Action 1</Button>
-				<Button onClick={() => { }}>Action 2</Button>
-				<Button onClick={() => { }}>Action 3</Button>
-			</View>);
-    },
-    play: async ({ canvas }) => {
-        const buttons = canvas.getAllByRole("button");
-        buttons[0].focus();
-        await userEvent.keyboard("{ArrowRight/}");
-        expect(document.activeElement).toBe(buttons[1]);
-        await userEvent.keyboard("{ArrowDown/}");
-        expect(document.activeElement).toBe(buttons[2]);
-        await userEvent.keyboard("{ArrowUp/}");
-        expect(document.activeElement).toBe(buttons[1]);
-        await userEvent.keyboard("{ArrowLeft/}");
-        expect(document.activeElement).toBe(buttons[0]);
-    },
-};
-export const horizontal = {
-    name: "orientation: horizontal",
-    render: () => {
-        const ref = useRef(null);
-        useKeyboardArrowNavigation({ ref, orientation: "horizontal" });
-        return (<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => { }}>Action 1</Button>
-				<Button onClick={() => { }}>Action 2</Button>
-				<Button onClick={() => { }}>Action 3</Button>
-			</View>);
-    },
-    play: async ({ canvas }) => {
-        const buttons = canvas.getAllByRole("button");
-        expect(buttons[0]).toHaveAttribute("tabindex", "0");
-        expect(buttons[1]).toHaveAttribute("tabindex", "-1");
-        expect(buttons[2]).toHaveAttribute("tabindex", "-1");
-        buttons[0].focus();
-        await userEvent.keyboard("{ArrowRight/}");
-        expect(document.activeElement).toBe(buttons[1]);
-        await userEvent.keyboard("{ArrowLeft/}");
-        expect(document.activeElement).toBe(buttons[0]);
-        await userEvent.keyboard("{ArrowDown/}");
-        expect(document.activeElement).toBe(buttons[0]);
-        await userEvent.keyboard("{ArrowUp/}");
-        expect(document.activeElement).toBe(buttons[0]);
-    },
-};
-export const vertical = {
-    name: "orientation: vertical",
-    render: () => {
-        const ref = useRef(null);
-        useKeyboardArrowNavigation({ ref, orientation: "vertical" });
-        return (<View gap={2} direction="column" attributes={{ ref }}>
-				<Button onClick={() => { }}>Action 1</Button>
-				<Button onClick={() => { }}>Action 2</Button>
-				<Button onClick={() => { }}>Action 3</Button>
-			</View>);
-    },
-    play: async ({ canvas }) => {
-        const buttons = canvas.getAllByRole("button");
-        buttons[0].focus();
-        await userEvent.keyboard("{ArrowDown/}");
-        expect(document.activeElement).toBe(buttons[1]);
-        await userEvent.keyboard("{ArrowUp/}");
-        expect(document.activeElement).toBe(buttons[0]);
-        await userEvent.keyboard("{ArrowRight/}");
-        expect(document.activeElement).toBe(buttons[0]);
-        await userEvent.keyboard("{ArrowLeft/}");
-        expect(document.activeElement).toBe(buttons[0]);
-    },
-};
-export const circular = {
-    name: "circular",
-    render: () => {
-        const ref = useRef(null);
-        useKeyboardArrowNavigation({ ref, circular: true });
-        return (<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => { }}>Action 1</Button>
-				<Button onClick={() => { }}>Action 2</Button>
-				<Button onClick={() => { }}>Action 3</Button>
-			</View>);
-    },
-    play: async ({ canvas }) => {
-        const buttons = canvas.getAllByRole("button");
-        buttons[0].focus();
-        await userEvent.keyboard("{ArrowRight/}");
-        await userEvent.keyboard("{ArrowRight/}");
-        expect(document.activeElement).toBe(buttons[2]);
-        await userEvent.keyboard("{ArrowRight/}");
-        expect(document.activeElement).toBe(buttons[0]);
-        await userEvent.keyboard("{ArrowLeft/}");
-        expect(document.activeElement).toBe(buttons[2]);
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => {
-        const ref = useRef(null);
-        useKeyboardArrowNavigation({ ref, disabled: true });
-        return (<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => { }}>Action 1</Button>
-				<Button onClick={() => { }}>Action 2</Button>
-				<Button onClick={() => { }}>Action 3</Button>
-			</View>);
-    },
-    play: async ({ canvas }) => {
-        const buttons = canvas.getAllByRole("button");
-        buttons[0].focus();
-        await userEvent.keyboard("{ArrowRight/}");
-        expect(document.activeElement).toBe(buttons[0]);
-        expect(buttons[0]).not.toHaveAttribute("tabindex");
-    },
-};