@reshaped/headless 3.10.0-canary.10

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

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { expect, fn, userEvent } from "storybook/test";
+import useHotkeys from "../useHotkeys.js";
+export default {
+    title: "Headless/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 (_jsxs("div", { style: {
+                display: "flex",
+                gap: 8,
+                padding: 8,
+                background: active ? "violet" : "transparent",
+            }, children: [_jsx("div", { style: {
+                        padding: 4,
+                        borderRadius: 4,
+                        backgroundColor: shiftActive ? "tomato" : "transparent",
+                    }, children: "Shift" }), _jsx("div", { style: {
+                        padding: 4,
+                        borderRadius: 4,
+                        backgroundColor: bActive ? "tomato" : "transparent",
+                    }, children: "b" }), _jsx("div", { style: {
+                        padding: 4,
+                        borderRadius: 4,
+                        backgroundColor: nActive ? "tomato" : "transparent",
+                    }, children: "n" })] }));
+    },
+};
+const Component = (props) => {
+    const { hotkeys } = props;
+    useHotkeys(hotkeys);
+    return _jsx("div", {});
+};
+export const singleKey = {
+    name: "single key",
+    args: {
+        handleHotkey: fn(),
+    },
+    render: (args) => _jsx(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) => _jsx(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) => _jsx(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) => _jsx(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) => _jsx(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) => _jsx(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) => _jsx(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) => _jsx(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) => (_jsx(Component, { hotkeys: { "alt+n": args.handleHotkeyModified, "alt+shift": args.handleHotkey } })),
+    play: async ({ args }) => {
+        await userEvent.keyboard("{Alt>}n{/Alt}");
+        expect(args.handleHotkeyModified).toHaveBeenCalledTimes(1);
+        await userEvent.keyboard("{Alt>}{Shift}{/Alt}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
+    },
+};

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

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

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { expect, userEvent } from "storybook/test";
+import useKeyboardArrowNavigation from "../useKeyboardArrowNavigation.js";
+export default {
+    title: "Headless/Hooks/useKeyboardArrowNavigation",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref });
+        return (_jsxs("div", { style: { display: "flex", gap: 8, flexDirection: "row" }, ref: ref, children: [_jsx("button", { onClick: () => { }, children: "Action 1" }), _jsx("button", { onClick: () => { }, children: "Action 2" }), _jsx("button", { onClick: () => { }, children: "Action 3" })] }));
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[1]);
+        await userEvent.keyboard("{ArrowDown/}");
+        expect(document.activeElement).toBe(buttons[2]);
+        await userEvent.keyboard("{ArrowUp/}");
+        expect(document.activeElement).toBe(buttons[1]);
+        await userEvent.keyboard("{ArrowLeft/}");
+        expect(document.activeElement).toBe(buttons[0]);
+    },
+};
+export const horizontal = {
+    name: "orientation: horizontal",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, orientation: "horizontal" });
+        return (_jsxs("div", { style: { display: "flex", gap: 8, flexDirection: "row" }, ref: ref, children: [_jsx("button", { onClick: () => { }, children: "Action 1" }), _jsx("button", { onClick: () => { }, children: "Action 2" }), _jsx("button", { onClick: () => { }, children: "Action 3" })] }));
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        expect(buttons[0]).toHaveAttribute("tabindex", "0");
+        expect(buttons[1]).toHaveAttribute("tabindex", "-1");
+        expect(buttons[2]).toHaveAttribute("tabindex", "-1");
+        buttons[0].focus();
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[1]);
+        await userEvent.keyboard("{ArrowLeft/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        await userEvent.keyboard("{ArrowDown/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        await userEvent.keyboard("{ArrowUp/}");
+        expect(document.activeElement).toBe(buttons[0]);
+    },
+};
+export const vertical = {
+    name: "orientation: vertical",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, orientation: "vertical" });
+        return (_jsxs("div", { style: { display: "flex", gap: 8, flexDirection: "column" }, ref: ref, children: [_jsx("button", { onClick: () => { }, children: "Action 1" }), _jsx("button", { onClick: () => { }, children: "Action 2" }), _jsx("button", { onClick: () => { }, children: "Action 3" })] }));
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        await userEvent.keyboard("{ArrowDown/}");
+        expect(document.activeElement).toBe(buttons[1]);
+        await userEvent.keyboard("{ArrowUp/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        await userEvent.keyboard("{ArrowLeft/}");
+        expect(document.activeElement).toBe(buttons[0]);
+    },
+};
+export const circular = {
+    name: "circular",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, circular: true });
+        return (_jsxs("div", { style: { display: "flex", gap: 8, flexDirection: "row" }, ref: ref, children: [_jsx("button", { onClick: () => { }, children: "Action 1" }), _jsx("button", { onClick: () => { }, children: "Action 2" }), _jsx("button", { onClick: () => { }, children: "Action 3" })] }));
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        await userEvent.keyboard("{ArrowRight/}");
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[2]);
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        await userEvent.keyboard("{ArrowLeft/}");
+        expect(document.activeElement).toBe(buttons[2]);
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, disabled: true });
+        return (_jsxs("div", { style: { display: "flex", gap: 8, flexDirection: "row" }, ref: ref, children: [_jsx("button", { onClick: () => { }, children: "Action 1" }), _jsx("button", { onClick: () => { }, children: "Action 2" }), _jsx("button", { onClick: () => { }, children: "Action 3" })] }));
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        expect(buttons[0]).not.toHaveAttribute("tabindex");
+    },
+};

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

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

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { expect, userEvent } from "storybook/test";
+import useKeyboardMode from "../useKeyboardMode.js";
+export default {
+    title: "Headless/Hooks/useKeyboardMode",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const Component = () => {
+    const { activate, deactivate, disable, enable } = useKeyboardMode();
+    return (_jsxs("div", { style: { display: "flex", gap: 8, flexDirection: "row" }, children: [_jsx("button", { onClick: activate, children: "Activate" }), _jsx("button", { onClick: deactivate, children: "Deactivate" }), _jsx("button", { onClick: disable, children: "Disable" }), _jsx("button", { onClick: enable, children: "Enable" })] }));
+};
+export const base = {
+    name: "base",
+    render: () => _jsx(Component, {}),
+    play: async ({ canvas }) => {
+        const attribute = "data-rs-keyboard";
+        const root = document.documentElement;
+        const activateTrigger = canvas.getAllByRole("button")[0];
+        const deactivateTrigger = canvas.getAllByRole("button")[1];
+        const disableTrigger = canvas.getAllByRole("button")[2];
+        const enableTrigger = canvas.getAllByRole("button")[3];
+        expect(root).not.toHaveAttribute(attribute);
+        await userEvent.click(activateTrigger);
+        expect(root).toHaveAttribute(attribute);
+        await userEvent.click(deactivateTrigger);
+        expect(root).not.toHaveAttribute(attribute);
+        await userEvent.click(disableTrigger);
+        await userEvent.click(activateTrigger);
+        expect(root).not.toHaveAttribute(attribute);
+        await userEvent.click(enableTrigger);
+        await userEvent.click(activateTrigger);
+        expect(root).toHaveAttribute(attribute);
+    },
+};

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

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

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

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { expect, fn, userEvent } from "storybook/test";
+import useOnClickOutside from "../useOnClickOutside.js";
+export default {
+    title: "Headless/Hooks/useOnClickOutside",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    args: {
+        handleOutsideClick: fn(),
+    },
+    render: (args) => {
+        const ref = React.useRef(null);
+        const [target, setTarget] = React.useState(null);
+        useOnClickOutside([ref], () => {
+            args.handleOutsideClick();
+            setTarget("outside");
+        });
+        return (_jsxs("div", { style: { display: "flex", gap: 16, flexDirection: "column", alignItems: "flex-start" }, children: [_jsx("button", { ref: ref, onClick: () => setTarget("inside"), children: "Trigger" }), target && `Clicked ${target}`] }));
+    },
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).toHaveBeenCalledTimes(1);
+        expect(args.handleOutsideClick).toHaveBeenCalledWith();
+    },
+};
+export const refs = {
+    name: "multiple refs",
+    args: {
+        handleOutsideClick: fn(),
+    },
+    render: (args) => {
+        const ref = React.useRef(null);
+        const ref2 = React.useRef(null);
+        useOnClickOutside([ref, ref2], () => {
+            args.handleOutsideClick();
+        });
+        return (_jsxs("div", { style: { display: "flex", gap: 16, flexDirection: "column", alignItems: "flex-start" }, children: [_jsx("button", { ref: ref, children: "Trigger" }), _jsx("button", { ref: ref2, children: "Trigger 2" })] }));
+    },
+    play: async ({ canvas, args }) => {
+        const [button, button2] = canvas.getAllByRole("button");
+        await userEvent.click(button);
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+        await userEvent.click(button2);
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).toHaveBeenCalledTimes(1);
+        expect(args.handleOutsideClick).toHaveBeenCalledWith();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    args: {
+        handleOutsideClick: fn(),
+    },
+    render: (args) => {
+        const ref = React.useRef(null);
+        useOnClickOutside([ref], () => {
+            args.handleOutsideClick();
+        }, {
+            disabled: true,
+        });
+        return _jsx("button", { ref: ref, children: "Trigger" });
+    },
+    play: async ({ args }) => {
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+    },
+};
+export const deps = {
+    name: "test: handler uses latest state",
+    args: {
+        handleOutsideClick: fn(),
+    },
+    render: (args) => {
+        const ref = React.useRef(null);
+        const [count, setCount] = React.useState(0);
+        useOnClickOutside([ref], () => {
+            args.handleOutsideClick({ count });
+        });
+        return (_jsx("button", { ref: ref, onClick: () => setCount((prev) => prev + 1), children: "Trigger" }));
+    },
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 0 });
+        await userEvent.click(button);
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 1 });
+    },
+};

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

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { expect } from "storybook/test";
+import useRTL from "../useRTL.js";
+export default {
+    title: "Headless/Hooks/useRTL",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const Component = () => {
+    const [rtl, setRTL] = useRTL();
+    React.useEffect(() => {
+        setRTL(true);
+    }, [setRTL]);
+    return _jsx("div", { children: rtl ? "RTL" : "LTR" });
+};
+export const setRTL = {
+    name: "setRTL",
+    render: () => _jsx(Component, {}),
+    play: async () => {
+        expect(document.documentElement).toHaveAttribute("dir", "rtl");
+    },
+};

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

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

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { expect, userEvent } from "storybook/test";
+import useScrollLock from "../useScrollLock.js";
+export default {
+    title: "Headless/Hooks/useScrollLock",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    render: () => {
+        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock();
+        return (_jsxs(React.Fragment, { children: [_jsx("button", { onClick: scrollLocked ? unlockScroll : lockScroll, children: scrollLocked ? "Unlock" : "Lock" }), _jsx("div", { style: { height: "150vh" } })] }));
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(document.body).toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(document.body).not.toHaveStyle("overflow: hidden");
+    },
+};
+export const origin = {
+    name: "originRef",
+    render: () => {
+        const originRef = React.useRef(null);
+        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });
+        return (_jsx("div", { style: { overflow: "auto", height: 100 }, ref: originRef, "data-testid": "root", children: _jsx("div", { style: { height: 200, padding: 15, backgroundColor: "#1f1f1f", borderRadius: 8 }, children: _jsx("button", { onClick: scrollLocked ? unlockScroll : lockScroll, children: "Toggle" }) }) }));
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        const root = canvas.getByTestId("root");
+        await userEvent.click(button);
+        expect(document.body).not.toHaveStyle("overflow: hidden");
+        expect(root).toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(root).not.toHaveStyle("overflow: hidden");
+    },
+};
+export const container = {
+    name: "containerRef",
+    render: () => {
+        const containerRef = React.useRef(null);
+        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });
+        return (_jsx("div", { style: { overflow: "auto", height: 100 }, ref: containerRef, "data-testid": "root", children: _jsx("button", { onClick: scrollLocked ? unlockScroll : lockScroll, children: "Toggle" }) }));
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        const root = canvas.getByTestId("root");
+        await userEvent.click(button);
+        expect(document.body).not.toHaveStyle("overflow: hidden");
+        expect(root).toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(root).not.toHaveStyle("overflow: hidden");
+    },
+};
+export const testContainerAsync = {
+    name: "test: containerRef locked count",
+    render: () => {
+        const containerRef = React.useRef(null);
+        const globalLock = useScrollLock();
+        const scopedLock = useScrollLock({ containerRef });
+        return (_jsxs("div", { style: { display: "flex", gap: 16, flexDirection: "row" }, ref: containerRef, children: [_jsx("button", { onClick: globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll, children: "Toggle" }), _jsx("button", { onClick: scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll, children: "Toggle" })] }));
+    },
+    play: async ({ canvas }) => {
+        const [buttonGlobal, buttonScoped] = canvas.getAllByRole("button");
+        await userEvent.click(buttonGlobal);
+        expect(document.body).toHaveStyle("overflow: hidden");
+        await userEvent.click(buttonScoped);
+        await userEvent.click(buttonGlobal);
+        expect(document.body).not.toHaveStyle("overflow: hidden");
+    },
+};

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

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

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, userEvent } from "storybook/test";
+import useToggle from "../useToggle.js";
+export default {
+    title: "Headless/Hooks/useToggle",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const toggle = {
+    name: "toggle",
+    render: () => {
+        const { toggle, active } = useToggle();
+        return (_jsx("button", { onClick: () => toggle(), "data-active": active, children: active ? "Deactivate" : "Activate" }));
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        expect(button.getAttribute("data-active")).toBe("false");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("true");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("false");
+    },
+};
+export const activate = {
+    name: "activate",
+    render: () => {
+        const { activate, active } = useToggle();
+        return (_jsx("button", { onClick: activate, "data-active": active, children: "Activate" }));
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        expect(button.getAttribute("data-active")).toBe("false");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("true");
+    },
+};
+export const deactivate = {
+    name: "deactivate",
+    render: () => {
+        const { deactivate, active } = useToggle(true);
+        return (_jsx("button", { onClick: deactivate, "data-active": active, children: "Deactivate" }));
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        expect(button.getAttribute("data-active")).toBe("true");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("false");
+    },
+};

package/dist/hooks/useHandlerRef.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * Hook for wrapping event handlers passed as props with a ref
+ * This way we can keep the instance of the ref the same and pass this ref to the effects dependency array
+ * While also making sure that function implementation stays up-to-date
+ */
+declare const useHandlerRef: <T>(cb: T) => React.RefObject<T>;
+export default useHandlerRef;