reshaped 3.4.2 → 3.4.4

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

@@ -6,7 +6,7 @@ import useIsDismissible from "../../../hooks/_private/useIsDismissible.js";
 import useElementId from "../../../hooks/useElementId.js";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import useHotkeys from "../../../hooks/useHotkeys.js";
-import useOnClickOutside from "../../../hooks/_private/useOnClickOutside.js";
+import useOnClickOutside from "../../../hooks/useOnClickOutside.js";
 import useRTL from "../../../hooks/useRTL.js";
 import { checkTransitions, onNextFrame } from "../../../utilities/animation.js";
 import useFlyout from "./useFlyout.js";
@@ -14,7 +14,7 @@ import * as timeouts from "./Flyout.constants.js";
 import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../../hooks/useHandlerRef.js";
-const FlyoutRoot = (props) => {
+const FlyoutControlled = (props) => {
     const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
@@ -236,7 +236,7 @@ const FlyoutRoot = (props) => {
             mode: trapFocusMode,
             initialFocusEl: initialFocusRef?.current,
             includeTrigger: triggerType === "hover" && trapFocusMode !== "dialog" && !isSubmenu,
-            onNavigateOutside: () => {
+            onRelease: () => {
                 handleClose({});
             },
         });
@@ -289,14 +289,12 @@ const FlyoutRoot = (props) => {
     }), [handleOpen, handleClose, updatePosition]);
     useHotkeys({ Escape: () => handleClose({ reason: "escape-key" }) }, [handleClose]);
     useOnClickOutside([flyoutElRef, triggerElRef], () => {
-        if (!isRendered)
-            return;
-        if (disableCloseOnOutsideClick)
-            return;
         // Clicking outside changes focused element so we don't need to set it back ourselves
         shouldReturnFocusRef.current = false;
         handleClose({ reason: "outside-click" });
-    }, [isRendered]);
+    }, {
+        disabled: !isRendered || disableCloseOnOutsideClick,
+    });
     return (_jsx(Provider, { value: {
             id,
             flyout,
@@ -326,4 +324,5 @@ const FlyoutRoot = (props) => {
             isSubmenu,
         }, children: children }));
 };
-export default FlyoutRoot;
+FlyoutControlled.displayName = "FlyoutControlled";
+export default FlyoutControlled;

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

@@ -1,3 +1,6 @@
 import type * as T from "./Flyout.types";
-declare const FlyoutTrigger: (props: T.TriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const FlyoutTrigger: {
+    (props: T.TriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default FlyoutTrigger;

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

@@ -38,4 +38,5 @@ const FlyoutTrigger = (props) => {
     }
     return (_jsx(TriggerProvider, { value: { elRef: triggerElRef }, children: children(childrenAttributes) }));
 };
+FlyoutTrigger.displayName = "Flyout.Trigger";
 export default FlyoutTrigger;

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

@@ -1,3 +1,6 @@
 import type * as T from "./Flyout.types";
-declare const FlyoutUncontrolled: (props: T.UncontrolledProps & T.DefaultProps) => import("react/jsx-runtime").JSX.Element;
+declare const FlyoutUncontrolled: {
+    (props: T.UncontrolledProps & T.DefaultProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default FlyoutUncontrolled;

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

@@ -15,4 +15,5 @@ const FlyoutUncontrolled = (props) => {
     };
     return (_jsx(FlyoutControlled, { ...props, defaultActive: undefined, active: active, onClose: handleClose, onOpen: handleOpen }));
 };
+FlyoutUncontrolled.displayName = "FlyoutUncontrolled";
 export default FlyoutUncontrolled;

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

@@ -1,3 +1,6 @@
 import type * as T from "./HiddenInput.types";
-declare const HiddenInput: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const HiddenInput: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default HiddenInput;

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

@@ -6,4 +6,5 @@ const HiddenInput = (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/Portal/Portal.d.ts

@@ -7,6 +7,10 @@ export declare const usePortalScope: () => T.Context;
 declare const Portal: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element[];
     Scope: typeof PortalScope;
+    displayName: string;
 };
 declare function PortalScope<T extends HTMLElement>(props: T.ScopeProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace PortalScope {
+    var displayName: string;
+}
 export default Portal;

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

@@ -40,4 +40,6 @@ function PortalScope(props) {
     return (_jsx(PortalScopeContext.Provider, { value: { scopeRef: ref }, children: children(ref) }));
 }
 Portal.Scope = PortalScope;
+Portal.displayName = "Portal";
+PortalScope.displayName = "PortalScope";
 export default Portal;

package/dist/hooks/{useDrag.js → _private/useDrag.js}

@@ -1,11 +1,11 @@
 "use client";
 import React from "react";
-import { disableUserSelect, enableUserSelect } from "../utilities/dom/index.js";
-import { disableScroll, enableScroll } from "../utilities/scroll/index.js";
-import useToggle from "./useToggle.js";
-import useHotkeys from "./useHotkeys.js";
-import * as keys from "../constants/keys.js";
-import useHandlerRef from "./useHandlerRef.js";
+import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
+import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
+import useToggle from "../useToggle.js";
+import useHotkeys from "../useHotkeys.js";
+import useHandlerRef from "../useHandlerRef.js";
+import * as keys from "../../constants/keys.js";
 const useDrag = (cb, options) => {
     const { disabled, containerRef: passedContainerRef, orientation = "all" } = options || {};
     const cbRef = useHandlerRef(cb);

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

@@ -1,6 +1,31 @@
 import React from "react";
+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 state: () => React.JSX.Element;
+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,9 +1,15 @@
 import React from "react";
+import { fireEvent, fn, expect } from "@storybook/test";
 import View from "../../components/View/index.js";
-import useDrag from "../useDrag.js";
+import useDrag from "../_private/useDrag.js";
 import useToggle from "../useToggle.js";
 import Button from "../../components/Button/index.js";
-export default { title: "Hooks/useDrag" };
+export default {
+    title: "Internal/Hooks/useDrag",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 function Example() {
     const [state, setState] = React.useState({ x: 0, y: 0 });
     const disabledToggle = useToggle();
@@ -27,4 +33,115 @@ function Example() {
 			</Button>
 		</View>);
 }
-export const state = () => <Example />;
+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,6 +1,11 @@
 import { StoryObj } from "@storybook/react";
 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,7 +1,11 @@
-import React from "react";
 import { expect, waitFor } from "@storybook/test";
 import useElementId from "../useElementId.js";
-export default { title: "Hooks/useElementId" };
+export default {
+    title: "Hooks/useElementId",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 const Component = (props) => {
     const id = useElementId(props.id);
     return <div id={id}>{id}</div>;

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

@@ -0,0 +1,14 @@
+import { StoryObj } from "@storybook/react";
+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

@@ -0,0 +1,44 @@
+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,5 +1,43 @@
+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 state: () => import("react").JSX.Element;
+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,39 +1,158 @@
-import useHotkeys from "../useHotkeys.js";
+import { expect, fn, userEvent } from "@storybook/test";
 import View from "../../components/View/index.js";
-export default { title: "Hooks/useHotkeys" };
-function Example() {
-    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>);
-}
-export const state = () => <Example />;
+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/useKeyboardMode.stories.d.ts

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