reshaped 3.3.11 → 3.3.13

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/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/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}>
@@ -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/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/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);
+    },
+};

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

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

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { expect, waitFor } from "@storybook/test";
+import useElementId from "../useElementId.js";
+export default { title: "Hooks/useElementId" };
+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/useHotkeys.test.stories.d.ts

@@ -0,0 +1,39 @@
+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 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>;
+}>;