reshaped 3.3.10 → 3.3.12

package/dist/components/View/tests/View.test.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: {
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewProps<As>): React.ReactNode;
+        Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>) => React.ReactNode;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const asProp: StoryObj;
+export declare const className: StoryObj;
+export declare const itemClassName: StoryObj;

package/dist/components/View/tests/View.test.stories.js

@@ -0,0 +1,50 @@
+import { expect } from "@storybook/test";
+import View from "../index.js";
+export default {
+    title: "Utilities/View/tests",
+    component: View,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/view",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const asProp = {
+    name: "as",
+    render: () => (<View as="ul">
+			<View.Item as="li">Content</View.Item>
+		</View>),
+    play: async ({ canvas }) => {
+        const list = canvas.getByRole("list");
+        const item = canvas.getByRole("listitem");
+        expect(list).toBeInTheDocument();
+        expect(item).toBeInTheDocument();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<View className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</View>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const itemClassName = {
+    name: "item className, attributes",
+    render: () => (<div data-testid="root">
+			<View.Item className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</View.Item>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

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

@@ -44,7 +44,7 @@ export type Instance = {
     open: () => void;
     close: () => void;
     updatePosition: () => void;
-} | undefined;
+} | null;
 type WithUncontrolled = {
     active?: never;
     defaultActive?: boolean;
@@ -54,7 +54,7 @@ type WithControlled = {
     defaultActive?: never;
 };
 export type TriggerAttributes = {
-    ref: React.RefObject<HTMLButtonElement>;
+    ref: React.RefObject<HTMLButtonElement | null>;
     onBlur?: (e: React.FocusEvent) => void;
     onFocus?: () => void;
     onMouseDown?: () => void;
@@ -93,8 +93,8 @@ type BaseProps = {
     contentClassName?: string;
     contentAttributes?: G.Attributes<"div">;
     instanceRef?: React.Ref<Instance>;
-    containerRef?: React.RefObject<HTMLElement>;
-    initialFocusRef?: React.RefObject<HTMLElement>;
+    containerRef?: React.RefObject<HTMLElement | null>;
+    initialFocusRef?: React.RefObject<HTMLElement | null>;
 };
 export type DefaultProps = Required<{
     position: BaseProps["position"];
@@ -115,8 +115,8 @@ export type ContextProps = {
     id: string;
     flyout: UseFlyoutData;
     width?: Width;
-    triggerElRef?: React.RefObject<HTMLButtonElement>;
-    flyoutElRef: React.RefObject<HTMLDivElement>;
+    triggerElRef?: React.RefObject<HTMLButtonElement | null>;
+    flyoutElRef: React.RefObject<HTMLDivElement | null>;
     handleClose: (options?: {
         closeParents?: boolean;
     }) => void;

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

@@ -51,7 +51,7 @@ const FlyoutContent = (props) => {
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: contentClassNames, style: {
                 ...styles,
                 "--rs-flyout-gap": contentGap,
-            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, "aria-modal": triggerType === "click", style: contentAttributes?.style, className: innerClassNames, children: children }) }) }));
+            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, "aria-modal": role === "dialog" ? true : undefined, style: contentAttributes?.style, className: innerClassNames, children: children }) }) }));
     const closestScrollable = triggerElRef && findClosestRenderContainer({ el: triggerElRef.current });
     const scrollableRef = closestScrollable === document.body || !closestScrollable
         ? undefined

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

@@ -37,10 +37,10 @@ const FlyoutRoot = (props) => {
     const isParentTriggerInsideFlyout = !!parentTriggerRef?.current && parentContentRef?.current?.contains(parentTriggerRef.current);
     const tryParentTrigger = !parentContentRef || isParentTriggerInsideFlyout;
     const triggerElRef = (tryParentTrigger && parentTriggerRef) || internalTriggerElRef;
-    const triggerBoundsRef = React.useRef();
+    const triggerBoundsRef = React.useRef(null);
     const flyoutElRef = React.useRef(null);
     const id = useElementId(passedId);
-    const timerRef = React.useRef();
+    const timerRef = React.useRef(null);
     const trapFocusRef = React.useRef(null);
     const lockedRef = React.useRef(false);
     // Check if transition had enough time to start when opening a flyout
@@ -154,6 +154,8 @@ const FlyoutRoot = (props) => {
     }, [isRendered, handleOpen, handleClose]);
     const handleTriggerMouseDown = React.useCallback(() => {
         const rect = triggerElRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
         triggerBoundsRef.current = rect;
     }, [triggerElRef]);
     const handleContentMouseDown = () => {
@@ -173,7 +175,7 @@ const FlyoutRoot = (props) => {
          * After animation has started, we're sure about the correct bounds
          * so drop the cache to make flyout work when trigger moves around
          */
-        triggerBoundsRef.current = undefined;
+        triggerBoundsRef.current = null;
     }, [resolvedActive]);
     const handleTransitionEnd = React.useCallback((e) => {
         if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")

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

@@ -7,7 +7,7 @@ import Theme from "../../../Theme/index.js";
 import Button from "../../../Button/index.js";
 import Flyout from "../index.js";
 import TextField from "../../../TextField/index.js";
-export default { title: "Utilities/Internal/Flyout" };
+export default { title: "Internal/Flyout" };
 const Demo = (props) => {
     const { position = "bottom-start", children, ...rest } = props;
     return (<Flyout triggerType="click" position={position} {...rest}>
@@ -254,7 +254,7 @@ 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();
+    const flyoutRef = React.useRef(null);
     React.useEffect(() => {
         flyoutRef.current?.updatePosition();
     }, [left, top]);
@@ -311,11 +311,11 @@ export const testDisableOutsideClick = () => {
 };
 export const testScopedTheming = () => (<View gap={3} align="start">
 		<Button color="primary">Reshaped button</Button>
-		<Theme name="twitter">
+		<Theme name="slate">
 			<Flyout triggerType="click" active position="bottom-start">
 				<Flyout.Trigger>
 					{(attributes) => (<Button color="primary" attributes={attributes}>
-							Twitter button
+							Slate button
 						</Button>)}
 				</Flyout.Trigger>
 				<Flyout.Content>
@@ -327,7 +327,7 @@ export const testScopedTheming = () => (<View gap={3} align="start">
     }}>
 						<View gap={1}>
 							<View.Item>Portal content, rendered in body</View.Item>
-							<Button color="primary">Twitter button</Button>
+							<Button color="primary">Slate button</Button>
 						</View>
 					</div>
 				</Flyout.Content>

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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,205 @@
+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");
+    },
+};

package/dist/components/_private/Flyout/useFlyout.d.ts

@@ -9,9 +9,9 @@ type UseFlyout = (args: {
     contentGap?: number;
     contentShift?: number;
     container?: HTMLElement | null;
-    triggerElRef: React.RefObject<HTMLElement>;
-    flyoutElRef: React.RefObject<HTMLElement>;
-    triggerBounds?: DOMRect | G.Coordinates;
+    triggerElRef: React.RefObject<HTMLElement | null>;
+    flyoutElRef: React.RefObject<HTMLElement | null>;
+    triggerBounds?: DOMRect | G.Coordinates | null;
 }) => Pick<T.State, "styles" | "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;

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

@@ -1,11 +1,11 @@
 import React from "react";
 export type Props = {
     children?: React.ReactNode;
-    targetRef?: React.RefObject<HTMLElement | ShadowRoot>;
+    targetRef?: React.RefObject<HTMLElement | ShadowRoot | null>;
 };
 export type ScopeProps<T extends HTMLElement> = {
-    children: (ref: React.RefObject<T>) => React.ReactNode;
+    children: (ref: React.RefObject<T | null>) => React.ReactNode;
 };
 export type Context = {
-    scopeRef: React.RefObject<HTMLElement>;
+    scopeRef: React.RefObject<HTMLElement | null>;
 };

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

@@ -1,6 +1,6 @@
 import React from "react";
 import Portal from "../index.js";
-export default { title: "Utilities/Internal/Portal" };
+export default { title: "Internal/Portal" };
 export const base = () => {
     const ref = React.useRef(null);
     const [mounted, setMounted] = React.useState(false);

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

@@ -3,7 +3,7 @@
  * Example: Use to only close the latest opened Flyout/Modal
  */
 import React from "react";
-type Ref = React.RefObject<HTMLElement>;
+type Ref = React.RefObject<HTMLElement | null>;
 declare const useIsDismissible: (args: {
     active?: boolean;
     contentRef: Ref;

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

@@ -1,3 +1,3 @@
 import React from "react";
-declare const useOnClickOutside: (refs: React.RefObject<HTMLElement>[], handler: (event: Event) => void, deps: any[]) => void;
+declare const useOnClickOutside: (refs: React.RefObject<HTMLElement | null>[], handler: (event: Event) => void, deps: any[]) => void;
 export default useOnClickOutside;

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

@@ -10,17 +10,17 @@ type HotkeyOptions = {
 };
 type Context = {
     isPressed: (key: string) => boolean;
-    addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement>, options?: HotkeyOptions) => (() => void) | undefined;
+    addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options?: HotkeyOptions) => (() => void) | undefined;
 };
 type HotkeyData = {
     callback: Callback;
-    ref: React.RefObject<HTMLElement>;
+    ref: React.RefObject<HTMLElement | null>;
     options: HotkeyOptions;
 };
 export declare class HotkeyStore {
     hotkeyMap: Record<string, Set<HotkeyData>>;
     getSize: () => number;
-    bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement>, options: HotkeyOptions) => void;
+    bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options: HotkeyOptions) => void;
     unbindHotkeys: (hotkeys: Hotkeys) => void;
     handleKeyDown: (pressedMap: PressedMap, e: KeyboardEvent) => void;
 }

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -82,7 +82,7 @@ export class HotkeyStore {
             if (hotkeyData?.size) {
                 hotkeyData.forEach((data) => {
                     const eventTarget = e.composedPath()[0];
-                    if (data.ref?.current &&
+                    if (data.ref.current &&
                         !(eventTarget === data.ref.current || data.ref.current.contains(eventTarget))) {
                         return;
                     }

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

@@ -17,6 +17,7 @@ function Example() {
 				<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" },
         }}/>

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

@@ -0,0 +1,26 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+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.test.stories.js

@@ -0,0 +1,120 @@
+import { fireEvent, fn, expect } from "@storybook/test";
+import View from "../../components/View/index.js";
+import useDrag from "../useDrag.js";
+export default {
+    title: "Hooks/useDrag/tests",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+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);
+    },
+};