@reshaped/headless 3.10.0-canary.10

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Reshaped
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/Actionable/Actionable.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Actionable.types";
+declare const Actionable: React.ForwardRefExoticComponent<T.Props & React.RefAttributes<T.Ref>>;
+export default Actionable;

package/dist/components/Actionable/Actionable.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames, keys } from "@reshaped/utilities";
+import { forwardRef } from "react";
+const Actionable = forwardRef((props, ref) => {
+    const { children, render, href, onClick, type, disabled, as, stopPropagation, className, attributes, } = props;
+    const rootAttributes = { ...attributes };
+    const hasClickHandler = onClick || attributes?.onClick;
+    const hasFocusHandler = attributes?.onFocus || attributes?.onBlur;
+    const isLink = Boolean(href || attributes?.href);
+    // Including attributes ref for the cases when event listeners are added through it
+    // To make sure it doesn't render a span
+    const isButton = Boolean(hasClickHandler || hasFocusHandler || type || attributes?.ref);
+    const renderedAsButton = !isLink && isButton && (!as || as === "button");
+    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let TagName;
+    if (isLink) {
+        TagName = "a";
+        rootAttributes.href = disabled ? undefined : href || attributes?.href;
+    }
+    else if (renderedAsButton) {
+        TagName = "button";
+        rootAttributes.type = type || attributes?.type || "button";
+        rootAttributes.disabled = disabled || attributes?.disabled;
+    }
+    else if (isButton) {
+        const isFocusable = as === "label";
+        const simulateButton = !isFocusable || hasClickHandler || hasFocusHandler;
+        TagName = as || "span";
+        rootAttributes.role = simulateButton ? "button" : undefined;
+        rootAttributes.tabIndex = simulateButton ? 0 : undefined;
+    }
+    else {
+        TagName = as || "span";
+    }
+    const handlePress = (event) => {
+        if (disabled)
+            return;
+        if (stopPropagation)
+            event.stopPropagation();
+        onClick?.(event);
+        attributes?.onClick?.(event);
+    };
+    const handleKeyDown = (event) => {
+        const isSpace = event.key === keys.SPACE;
+        const isEnter = event.key === keys.ENTER;
+        if (!isSpace && !isEnter)
+            return;
+        if (rootAttributes.role !== "button")
+            return;
+        if (stopPropagation)
+            event.stopPropagation();
+        event.preventDefault();
+        handlePress(event);
+    };
+    const tagAttributes = {
+        ref: ref,
+        // rootAttributes can receive ref from Flyout
+        ...rootAttributes,
+        className: classNames(className),
+        onClick: handlePress,
+        onKeyDown: handleKeyDown,
+        "aria-disabled": disabled ? true : undefined,
+        children: children,
+    };
+    if (render)
+        return render(tagAttributes);
+    return _jsx(TagName, { ...tagAttributes });
+});
+Actionable.displayName = "Actionable";
+export default Actionable;

package/dist/components/Actionable/Actionable.types.d.ts

@@ -0,0 +1,35 @@
+import type { Attributes as AttributesType } from "../../types/global";
+import type { ClassName } from "@reshaped/utilities";
+import type React from "react";
+export type AttributesRef = React.RefObject<HTMLButtonElement | null>;
+type Attributes = AttributesType<"button"> & Omit<React.JSX.IntrinsicElements["a"], keyof AttributesType<"button">> & {
+    ref?: AttributesRef;
+};
+export type RenderAttributes = AttributesType<"a"> & {
+    ref: React.RefObject<HTMLAnchorElement | null>;
+    children: React.ReactNode;
+};
+export type Props = {
+    /** Node for inserting the content */
+    children?: React.ReactNode;
+    /** Render a custom root element, useful for integrating with routers */
+    render?: (attributes: RenderAttributes) => React.ReactNode;
+    /** Callback when clicked, renders it as a button tag if href is not provided */
+    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    /** URL, renders it as an anchor tag */
+    href?: string;
+    /** Type attribute, renders it as a button tag */
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    /** Disable from user interaction */
+    disabled?: boolean;
+    /** Prevent the event from bubbling up to the parent */
+    stopPropagation?: boolean;
+    /** Render as a different element */
+    as?: keyof React.JSX.IntrinsicElements;
+    /** Additional classname for the root element */
+    className?: ClassName;
+    /** Additional attributes for the root element */
+    attributes?: Attributes;
+};
+export type Ref = HTMLButtonElement | HTMLAnchorElement;
+export {};

package/dist/components/Actionable/Actionable.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Actionable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Actionable";
+export type { Props as ActionableProps, Ref as ActionableRef } from "./Actionable.types";

package/dist/components/Actionable/index.js

@@ -0,0 +1 @@
+export { default } from "./Actionable.js";

package/dist/components/Reshaped/Reshaped.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Reshaped.types";
+declare const Reshaped: React.FC<T.Props>;
+export default Reshaped;

package/dist/components/Reshaped/Reshaped.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SingletonHotkeysProvider } from "../../hooks/_internal/useSingletonHotkeys.js";
+import { SingletonKeyboardModeProvider } from "../../hooks/_internal/useSingletonKeyboardMode.js";
+import { SingletonRTLProvider } from "../../hooks/_internal/useSingletonRTL.js";
+const Reshaped = (props) => {
+    const { children } = props;
+    return (_jsx(SingletonRTLProvider, { children: _jsx(SingletonKeyboardModeProvider, { children: _jsx(SingletonHotkeysProvider, { children: children }) }) }));
+};
+Reshaped.displayName = "Headless.ReshapedProvider";
+export default Reshaped;

package/dist/components/Reshaped/Reshaped.types.d.ts

@@ -0,0 +1,5 @@
+import type React from "react";
+export type Props = {
+    /** Node for inserting children */
+    children?: React.ReactNode;
+};

package/dist/components/Reshaped/Reshaped.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Reshaped/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Reshaped";
+export type { Props as ReshapedProps } from "./Reshaped.types";

package/dist/components/Reshaped/index.js

@@ -0,0 +1 @@
+export { default } from "./Reshaped.js";

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

@@ -0,0 +1,31 @@
+import React from "react";
+/**
+ * Types
+ */
+type Callback = (e?: KeyboardEvent) => void;
+type PressedMap = Map<string, KeyboardEvent>;
+export type Hotkeys = Record<string, Callback | null>;
+type HotkeyOptions = {
+    preventDefault?: boolean;
+};
+type Context = {
+    isPressed: (key: string) => boolean;
+    addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options?: HotkeyOptions) => (() => void) | undefined;
+};
+type HotkeyData = {
+    callback: Callback;
+    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 | null>, options: HotkeyOptions) => void;
+    unbindHotkeys: (hotkeys: Hotkeys) => void;
+    handleKeyDown: (pressedMap: PressedMap, e: KeyboardEvent) => void;
+}
+export declare const SingletonHotkeysProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useSingletonHotkeys: () => Context;
+export {};

package/dist/hooks/_internal/useSingletonHotkeys.js

@@ -0,0 +1,191 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+/**
+ * Utilities
+ */
+const COMBINATION_DELIMETER = "+";
+const pressedMap = new Map();
+let modifiedKeys = [];
+const formatHotkey = (hotkey) => {
+    if (hotkey === " ")
+        return hotkey;
+    return hotkey.replace(/\s/g, "").toLowerCase();
+};
+// Normalize passed key combinations to turn them into a consistent ids
+const getHotkeyId = (hotkey) => {
+    return formatHotkey(hotkey).split(COMBINATION_DELIMETER).sort().join(COMBINATION_DELIMETER);
+};
+const getEventKey = (e) => {
+    if (!e.key)
+        return;
+    // Having alt pressed modifies e.key value, so relying on e.code for it
+    if (e.altKey && /^[Key|Digit|Numpad]/.test(e.code)) {
+        return e.code.toLowerCase().replace(/key|digit|numpad/, "");
+    }
+    return e.key.toLowerCase();
+};
+// Removing the unknown gets highlighted an invalid syntax
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+const walkHotkeys = (hotkeys, cb) => {
+    Object.keys(hotkeys).forEach((key) => {
+        key.split(",").forEach((hotkey) => {
+            const data = hotkeys[key];
+            if (!data)
+                return;
+            cb(getHotkeyId(hotkey), data);
+        });
+    });
+};
+export class HotkeyStore {
+    hotkeyMap = {};
+    getSize = () => Object.keys(this.hotkeyMap).length;
+    bindHotkeys = (hotkeys, ref, options) => {
+        walkHotkeys(hotkeys, (id, hotkeyData) => {
+            if (!hotkeyData)
+                return;
+            if (!this.hotkeyMap[id]) {
+                this.hotkeyMap[id] = new Set();
+            }
+            this.hotkeyMap[id].add({ callback: hotkeyData, ref, options });
+        });
+    };
+    unbindHotkeys = (hotkeys) => {
+        walkHotkeys(hotkeys, (id, hotkeyCallback) => {
+            if (!hotkeyCallback)
+                return;
+            this.hotkeyMap[id]?.forEach((data) => {
+                if (data.callback === hotkeyCallback) {
+                    this.hotkeyMap[id].delete(data);
+                }
+            });
+            if (!this.hotkeyMap[id]?.size) {
+                delete this.hotkeyMap[id];
+            }
+        });
+    };
+    handleKeyDown = (pressedMap, e) => {
+        if (!pressedMap.size)
+            return;
+        const pressedKeys = [...pressedMap.keys()];
+        const pressedId = getHotkeyId(pressedKeys.join(COMBINATION_DELIMETER));
+        const pressedFormattedKeys = pressedId.split(COMBINATION_DELIMETER);
+        const hotkeyData = this.hotkeyMap[pressedId];
+        /**
+         * Support for `mod` that represents both Mac and Win keyboards
+         * We create the hotkeyId again to sort the mod key correctly
+         */
+        const controlToModPressedId = getHotkeyId(pressedId.replace("control", "mod"));
+        const metaToModPressedId = getHotkeyId(pressedId.replace("meta", "mod"));
+        const hotkeyControlModData = pressedFormattedKeys.includes("control") && this.hotkeyMap[controlToModPressedId];
+        const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[metaToModPressedId];
+        [hotkeyData, hotkeyControlModData, hotkeyMetaModData].forEach((hotkeyData) => {
+            if (!hotkeyData)
+                return;
+            if (hotkeyData?.size) {
+                hotkeyData.forEach((data) => {
+                    const eventTarget = e.composedPath()[0];
+                    if (data.ref.current &&
+                        !(eventTarget === data.ref.current || data.ref.current.contains(eventTarget))) {
+                        return;
+                    }
+                    const resolvedEvent = pressedMap.get(pressedId);
+                    if (data.options.preventDefault) {
+                        resolvedEvent?.preventDefault();
+                        e.preventDefault();
+                    }
+                    data.callback(e);
+                });
+            }
+        });
+    };
+}
+const globalHotkeyStore = new HotkeyStore();
+/**
+ * Components / Hooks
+ */
+const HotkeyContext = React.createContext({});
+export const SingletonHotkeysProvider = (props) => {
+    const { children } = props;
+    // eslint-disable-next-line
+    const [_, setTriggerCount] = React.useState(0);
+    // Only handle key presses when there is at least one hook listening for hotkeys
+    const [hooksCount, setHooksCount] = React.useState(0);
+    const addPressedKey = React.useCallback((e) => {
+        if (e.repeat || hooksCount === 0)
+            return;
+        const eventKey = getEventKey(e);
+        if (!eventKey)
+            return;
+        pressedMap.set(eventKey, e);
+        setTriggerCount(pressedMap.size);
+        // Key up won't trigger for other keys while Meta is pressed so we need to cache them
+        // and remove on Meta keyup
+        if (e.metaKey)
+            modifiedKeys.push(...pressedMap.keys());
+        if (pressedMap.has("Meta"))
+            modifiedKeys.push(eventKey);
+    }, [hooksCount]);
+    const removePressedKey = React.useCallback((e) => {
+        if (hooksCount === 0)
+            return;
+        const eventKey = getEventKey(e);
+        if (!eventKey)
+            return;
+        pressedMap.delete(eventKey);
+        if (eventKey === "meta" || eventKey === "control") {
+            pressedMap.delete("mod");
+        }
+        if (eventKey === "meta") {
+            modifiedKeys.forEach((key) => {
+                if (!pressedMap.has(key))
+                    return;
+                pressedMap.delete(key);
+            });
+            modifiedKeys = [];
+        }
+        setTriggerCount(pressedMap.size);
+    }, [hooksCount]);
+    const isPressed = (hotkey) => {
+        const keys = formatHotkey(hotkey).split(COMBINATION_DELIMETER);
+        if (keys.some((key) => !pressedMap.has(key)))
+            return false;
+        return true;
+    };
+    const handleWindowKeyDown = React.useCallback((e) => {
+        // Browsers trigger keyboard event without passing e.key when you click on autocomplete
+        if (!e.key)
+            return;
+        addPressedKey(e);
+        globalHotkeyStore.handleKeyDown(pressedMap, e);
+    }, [addPressedKey]);
+    const handleWindowKeyUp = React.useCallback((e) => {
+        if (!e.key)
+            return;
+        removePressedKey(e);
+    }, [removePressedKey]);
+    const handleWindowBlur = React.useCallback(() => {
+        pressedMap.clear();
+        modifiedKeys = [];
+    }, []);
+    const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
+        setHooksCount((prev) => prev + 1);
+        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
+        return () => {
+            setHooksCount((prev) => prev - 1);
+            globalHotkeyStore.unbindHotkeys(hotkeys);
+        };
+    }, []);
+    React.useEffect(() => {
+        window.addEventListener("keydown", handleWindowKeyDown);
+        window.addEventListener("keyup", handleWindowKeyUp);
+        window.addEventListener("blur", handleWindowBlur);
+        return () => {
+            window.removeEventListener("keydown", handleWindowKeyDown);
+            window.removeEventListener("keyup", handleWindowKeyUp);
+            window.removeEventListener("blur", handleWindowBlur);
+        };
+    }, [handleWindowKeyDown, handleWindowKeyUp, handleWindowBlur]);
+    return (_jsx(HotkeyContext.Provider, { value: { addHotkeys, isPressed }, children: children }));
+};
+export const useSingletonHotkeys = () => React.useContext(HotkeyContext);

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

@@ -0,0 +1,13 @@
+import React from "react";
+type ContextProps = {
+    disabledRef: React.RefObject<boolean> | null;
+    disable: () => void;
+    enable: () => void;
+    activate: () => void;
+    deactivate: () => void;
+};
+export declare const SingletonKeyboardModeProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useSingletonKeyboardMode: () => ContextProps;
+export {};

package/dist/hooks/_internal/useSingletonKeyboardMode.js

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

package/dist/hooks/_internal/useSingletonRTL.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const useSingletonRTL: (defaultRTL?: boolean) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+export declare const SingletonRTLProvider: React.FC<{
+    children: React.ReactNode;
+    defaultRTL?: boolean;
+}>;

package/dist/hooks/_internal/useSingletonRTL.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isRTL } from "@reshaped/utilities";
+import React from "react";
+import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
+const SingletonRTLContext = React.createContext({
+    rtl: [false, () => { }],
+});
+export const useSingletonRTL = (defaultRTL) => {
+    const state = React.useState(defaultRTL || false);
+    const [rtl, setRTL] = state;
+    /**
+     * Handle changing dir attribute directly
+     */
+    useIsomorphicLayoutEffect(() => {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName !== "dir")
+                    return;
+                const nextRTL = isRTL();
+                if (rtl !== nextRTL)
+                    setRTL(nextRTL);
+            });
+        });
+        observer.observe(document.documentElement, { attributes: true });
+        return () => observer.disconnect();
+    }, [rtl]);
+    /**
+     * Handle setRTL usage
+     */
+    useIsomorphicLayoutEffect(() => {
+        document.documentElement.setAttribute("dir", rtl ? "rtl" : "ltr");
+    }, [rtl]);
+    return state;
+};
+export const SingletonRTLProvider = (props) => {
+    const { children, defaultRTL } = props;
+    const rtlState = useSingletonRTL(defaultRTL);
+    return (_jsx(SingletonRTLContext.Provider, { value: { rtl: rtlState }, children: children }));
+};

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

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

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { expect, fn, userEvent } from "storybook/test";
+import useHandlerRef from "../useHandlerRef.js";
+export default {
+    title: "Headless/Hooks/useHandlerRef",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const Component = (props) => {
+    const { onEffect, count } = props;
+    const onEffectRef = useHandlerRef(onEffect);
+    React.useEffect(() => {
+        onEffectRef.current();
+    }, [onEffectRef]);
+    return _jsxs(_Fragment, { children: ["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 (_jsxs("div", { style: { display: "flex", gap: "4px" }, children: [_jsx("button", { onClick: () => setCount((prev) => prev + 1), children: "Increase count" }), _jsx(Component, { onEffect: handleEffect, count: count })] }));
+    },
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        // mount, triggered 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

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