reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,23 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.disabled = exports.circular = exports.vertical = exports.horizontal = exports.base = void 0;
-const react_1 = require("react");
-const test_1 = require("storybook/test");
-const useKeyboardArrowNavigation_1 = __importDefault(require("../useKeyboardArrowNavigation"));
-exports.default = {
+import { useRef } from "react";
+import { expect, userEvent } from "storybook/test";
+import useKeyboardArrowNavigation from "../useKeyboardArrowNavigation.js";
+export default {
     title: "Hooks/useKeyboardArrowNavigation",
     parameters: {
         chromatic: { disableSnapshot: true },
     },
 };
-exports.base = {
+export const base = {
     name: "base",
     render: () => {
-        const ref = (0, react_1.useRef)(null);
-        (0, useKeyboardArrowNavigation_1.default)({ ref });
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref });
         return (<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
 				<button onClick={() => { }}>Action 1</button>
 				<button onClick={() => { }}>Action 2</button>
@@ -27,21 +21,21 @@ exports.base = {
     play: async ({ canvas }) => {
         const buttons = canvas.getAllByRole("button");
         buttons[0].focus();
-        await test_1.userEvent.keyboard("{ArrowRight/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[1]);
-        await test_1.userEvent.keyboard("{ArrowDown/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[2]);
-        await test_1.userEvent.keyboard("{ArrowUp/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[1]);
-        await test_1.userEvent.keyboard("{ArrowLeft/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[0]);
+        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]);
     },
 };
-exports.horizontal = {
+export const horizontal = {
     name: "orientation: horizontal",
     render: () => {
-        const ref = (0, react_1.useRef)(null);
-        (0, useKeyboardArrowNavigation_1.default)({ ref, orientation: "horizontal" });
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, orientation: "horizontal" });
         return (<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
 				<button onClick={() => { }}>Action 1</button>
 				<button onClick={() => { }}>Action 2</button>
@@ -50,25 +44,25 @@ exports.horizontal = {
     },
     play: async ({ canvas }) => {
         const buttons = canvas.getAllByRole("button");
-        (0, test_1.expect)(buttons[0]).toHaveAttribute("tabindex", "0");
-        (0, test_1.expect)(buttons[1]).toHaveAttribute("tabindex", "-1");
-        (0, test_1.expect)(buttons[2]).toHaveAttribute("tabindex", "-1");
+        expect(buttons[0]).toHaveAttribute("tabindex", "0");
+        expect(buttons[1]).toHaveAttribute("tabindex", "-1");
+        expect(buttons[2]).toHaveAttribute("tabindex", "-1");
         buttons[0].focus();
-        await test_1.userEvent.keyboard("{ArrowRight/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[1]);
-        await test_1.userEvent.keyboard("{ArrowLeft/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[0]);
-        await test_1.userEvent.keyboard("{ArrowDown/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[0]);
-        await test_1.userEvent.keyboard("{ArrowUp/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[0]);
+        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]);
     },
 };
-exports.vertical = {
+export const vertical = {
     name: "orientation: vertical",
     render: () => {
-        const ref = (0, react_1.useRef)(null);
-        (0, useKeyboardArrowNavigation_1.default)({ ref, orientation: "vertical" });
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, orientation: "vertical" });
         return (<div style={{ display: "flex", gap: 8, flexDirection: "column" }} ref={ref}>
 				<button onClick={() => { }}>Action 1</button>
 				<button onClick={() => { }}>Action 2</button>
@@ -78,21 +72,21 @@ exports.vertical = {
     play: async ({ canvas }) => {
         const buttons = canvas.getAllByRole("button");
         buttons[0].focus();
-        await test_1.userEvent.keyboard("{ArrowDown/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[1]);
-        await test_1.userEvent.keyboard("{ArrowUp/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[0]);
-        await test_1.userEvent.keyboard("{ArrowRight/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[0]);
-        await test_1.userEvent.keyboard("{ArrowLeft/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[0]);
+        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]);
     },
 };
-exports.circular = {
+export const circular = {
     name: "circular",
     render: () => {
-        const ref = (0, react_1.useRef)(null);
-        (0, useKeyboardArrowNavigation_1.default)({ ref, circular: true });
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, circular: true });
         return (<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
 				<button onClick={() => { }}>Action 1</button>
 				<button onClick={() => { }}>Action 2</button>
@@ -102,20 +96,20 @@ exports.circular = {
     play: async ({ canvas }) => {
         const buttons = canvas.getAllByRole("button");
         buttons[0].focus();
-        await test_1.userEvent.keyboard("{ArrowRight/}");
-        await test_1.userEvent.keyboard("{ArrowRight/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[2]);
-        await test_1.userEvent.keyboard("{ArrowRight/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[0]);
-        await test_1.userEvent.keyboard("{ArrowLeft/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[2]);
+        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]);
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
     render: () => {
-        const ref = (0, react_1.useRef)(null);
-        (0, useKeyboardArrowNavigation_1.default)({ ref, disabled: true });
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, disabled: true });
         return (<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
 				<button onClick={() => { }}>Action 1</button>
 				<button onClick={() => { }}>Action 2</button>
@@ -125,8 +119,8 @@ exports.disabled = {
     play: async ({ canvas }) => {
         const buttons = canvas.getAllByRole("button");
         buttons[0].focus();
-        await test_1.userEvent.keyboard("{ArrowRight/}");
-        (0, test_1.expect)(document.activeElement).toBe(buttons[0]);
-        (0, test_1.expect)(buttons[0]).not.toHaveAttribute("tabindex");
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        expect(buttons[0]).not.toHaveAttribute("tabindex");
     },
 };

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

@@ -1,19 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.base = void 0;
-const test_1 = require("storybook/test");
-const useKeyboardMode_1 = __importDefault(require("../useKeyboardMode"));
-exports.default = {
+import { expect, userEvent } from "storybook/test";
+import useKeyboardMode from "../useKeyboardMode.js";
+export default {
     title: "Hooks/useKeyboardMode",
     parameters: {
         chromatic: { disableSnapshot: true },
     },
 };
 const Component = () => {
-    const { activate, deactivate, disable, enable } = (0, useKeyboardMode_1.default)();
+    const { activate, deactivate, disable, enable } = useKeyboardMode();
     return (<div style={{ display: "flex", gap: 8, flexDirection: "row" }}>
 			<button onClick={activate}>Activate</button>
 			<button onClick={deactivate}>Deactivate</button>
@@ -21,7 +15,7 @@ const Component = () => {
 			<button onClick={enable}>Enable</button>
 		</div>);
 };
-exports.base = {
+export const base = {
     name: "base",
     render: () => <Component />,
     play: async ({ canvas }) => {
@@ -31,16 +25,16 @@ exports.base = {
         const deactivateTrigger = canvas.getAllByRole("button")[1];
         const disableTrigger = canvas.getAllByRole("button")[2];
         const enableTrigger = canvas.getAllByRole("button")[3];
-        (0, test_1.expect)(root).not.toHaveAttribute(attribute);
-        await test_1.userEvent.click(activateTrigger);
-        (0, test_1.expect)(root).toHaveAttribute(attribute);
-        await test_1.userEvent.click(deactivateTrigger);
-        (0, test_1.expect)(root).not.toHaveAttribute(attribute);
-        await test_1.userEvent.click(disableTrigger);
-        await test_1.userEvent.click(activateTrigger);
-        (0, test_1.expect)(root).not.toHaveAttribute(attribute);
-        await test_1.userEvent.click(enableTrigger);
-        await test_1.userEvent.click(activateTrigger);
-        (0, test_1.expect)(root).toHaveAttribute(attribute);
+        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

@@ -12,6 +12,12 @@ export default _default;
 export declare const base: StoryObj<{
     handleOutsideClick: Mock;
 }>;
+export declare const rightClick: StoryObj<{
+    handleOutsideClick: Mock;
+}>;
+export declare const keyboardContextMenu: StoryObj<{
+    handleOutsideClick: Mock;
+}>;
 export declare const refs: StoryObj<{
     handleOutsideClick: Mock;
 }>;
@@ -21,3 +27,7 @@ export declare const disabled: StoryObj<{
 export declare const deps: StoryObj<{
     handleOutsideClick: Mock;
 }>;
+export declare const disabledListeners: StoryObj;
+export declare const enable: StoryObj<{
+    handleOutsideClick: Mock;
+}>;

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

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deps = exports.disabled = exports.refs = exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const useOnClickOutside_1 = __importDefault(require("../useOnClickOutside"));
-exports.default = {
+import React from "react";
+import { expect, fireEvent, fn, spyOn, userEvent } from "storybook/test";
+import useOnClickOutside from "../useOnClickOutside.js";
+export default {
     title: "Hooks/useOnClickOutside",
     parameters: {
         chromatic: { disableSnapshot: true },
     },
 };
 const DemoBase = (props) => {
-    const ref = react_1.default.useRef(null);
-    const [target, setTarget] = react_1.default.useState(null);
-    (0, useOnClickOutside_1.default)([ref], () => {
+    const ref = React.useRef(null);
+    const [target, setTarget] = React.useState(null);
+    useOnClickOutside([ref], () => {
         props.onOutsideClick();
         console.log("clicked outside");
         setTarget("outside");
@@ -31,25 +25,63 @@ const DemoBase = (props) => {
 			{target && `Clicked ${target}`}
 		</div>);
 };
-exports.base = {
+export const base = {
     name: "base",
     args: {
-        handleOutsideClick: (0, test_1.fn)(),
+        handleOutsideClick: fn(),
+    },
+    render: (args) => <DemoBase onOutsideClick={args.handleOutsideClick}/>,
+    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 rightClick = {
+    name: "test: right click",
+    args: {
+        handleOutsideClick: fn(),
     },
     render: (args) => <DemoBase onOutsideClick={args.handleOutsideClick}/>,
     play: async ({ canvas, args }) => {
         const button = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(args.handleOutsideClick).not.toHaveBeenCalled();
-        await test_1.userEvent.click(document.body);
-        (0, test_1.expect)(args.handleOutsideClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleOutsideClick).toHaveBeenCalledWith();
+        await userEvent.pointer({ keys: "[MouseRight]", target: button });
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+        await userEvent.pointer({ keys: "[MouseRight]", target: document.body });
+        expect(args.handleOutsideClick).toHaveBeenCalledTimes(1);
+        expect(args.handleOutsideClick).toHaveBeenCalledWith();
+        // Opening another context menu outside
+        const preventDefault = (e) => e.preventDefault();
+        document.body.addEventListener("contextmenu", preventDefault);
+        await userEvent.pointer({ keys: "[MouseRight]", target: document.body });
+        document.body.removeEventListener("contextmenu", preventDefault);
+        expect(args.handleOutsideClick).toHaveBeenCalledTimes(2);
+    },
+};
+export const keyboardContextMenu = {
+    name: "test: context menu key",
+    args: {
+        handleOutsideClick: fn(),
+    },
+    render: (args) => <DemoBase onOutsideClick={args.handleOutsideClick}/>,
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        // Context menu key doesn't trigger mousedown
+        fireEvent.mouseDown(document.body);
+        fireEvent.contextMenu(button);
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+        fireEvent.mouseDown(button);
+        fireEvent.contextMenu(document.body);
+        expect(args.handleOutsideClick).toHaveBeenCalledTimes(1);
     },
 };
 const DemoRefs = (props) => {
-    const ref = react_1.default.useRef(null);
-    const ref2 = react_1.default.useRef(null);
-    (0, useOnClickOutside_1.default)([ref, ref2], () => {
+    const ref = React.useRef(null);
+    const ref2 = React.useRef(null);
+    useOnClickOutside([ref, ref2], () => {
         props.onOutsideClick();
     });
     return (<div style={{ display: "flex", gap: 16, flexDirection: "column", alignItems: "flex-start" }}>
@@ -57,31 +89,31 @@ const DemoRefs = (props) => {
 			<button ref={ref2}>Trigger 2</button>
 		</div>);
 };
-exports.refs = {
+export const refs = {
     name: "multiple refs",
     args: {
-        handleOutsideClick: (0, test_1.fn)(),
+        handleOutsideClick: fn(),
     },
     render: (args) => <DemoRefs onOutsideClick={args.handleOutsideClick}/>,
     play: async ({ canvas, args }) => {
         const [button, button2] = canvas.getAllByRole("button");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(args.handleOutsideClick).not.toHaveBeenCalled();
-        await test_1.userEvent.click(button2);
-        (0, test_1.expect)(args.handleOutsideClick).not.toHaveBeenCalled();
-        await test_1.userEvent.click(document.body);
-        (0, test_1.expect)(args.handleOutsideClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleOutsideClick).toHaveBeenCalledWith();
+        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();
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
     args: {
-        handleOutsideClick: (0, test_1.fn)(),
+        handleOutsideClick: fn(),
     },
     render: (args) => {
-        const ref = react_1.default.useRef(null);
-        (0, useOnClickOutside_1.default)([ref], () => {
+        const ref = React.useRef(null);
+        useOnClickOutside([ref], () => {
             args.handleOutsideClick();
         }, {
             disabled: true,
@@ -89,32 +121,82 @@ exports.disabled = {
         return <button ref={ref}>Trigger</button>;
     },
     play: async ({ args }) => {
-        await test_1.userEvent.click(document.body);
-        (0, test_1.expect)(args.handleOutsideClick).not.toHaveBeenCalled();
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
     },
 };
 const DemoDeps = (props) => {
-    const ref = react_1.default.useRef(null);
-    const [count, setCount] = react_1.default.useState(0);
-    (0, useOnClickOutside_1.default)([ref], () => {
+    const ref = React.useRef(null);
+    const [count, setCount] = React.useState(0);
+    useOnClickOutside([ref], () => {
         props.onOutsideClick({ count });
     });
     return (<button ref={ref} onClick={() => setCount((prev) => prev + 1)}>
 			Trigger
 		</button>);
 };
-exports.deps = {
+export const deps = {
     name: "test: handler uses latest state",
     args: {
-        handleOutsideClick: (0, test_1.fn)(),
+        handleOutsideClick: fn(),
     },
     render: (args) => <DemoDeps onOutsideClick={args.handleOutsideClick}/>,
     play: async ({ canvas, args }) => {
         const button = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(document.body);
-        (0, test_1.expect)(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 0 });
-        await test_1.userEvent.click(button);
-        await test_1.userEvent.click(document.body);
-        (0, test_1.expect)(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 1 });
+        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 });
+    },
+};
+const DemoDisabledItem = () => {
+    const ref = React.useRef(null);
+    useOnClickOutside([ref], () => { }, { disabled: true });
+    return <div ref={ref}>Item</div>;
+};
+export const disabledListeners = {
+    name: "test: disabled doesn't add listeners",
+    render: () => {
+        const [mounted, setMounted] = React.useState(false);
+        return (<div>
+				<button onClick={() => setMounted(true)}>Mount</button>
+				{mounted && Array.from({ length: 10 }).map((_, i) => <DemoDisabledItem key={i}/>)}
+			</div>);
+    },
+    play: async ({ canvas }) => {
+        const spy = spyOn(document, "addEventListener");
+        await userEvent.click(canvas.getByRole("button", { name: "Mount" }));
+        const types = spy.mock.calls.map((call) => call[0]);
+        spy.mockRestore();
+        expect(canvas.getAllByText("Item")).toHaveLength(10);
+        expect(types.filter((type) => ["mousedown", "touchstart", "keydown", "click", "contextmenu"].includes(type))).toHaveLength(0);
+    },
+};
+const DemoEnable = (props) => {
+    const ref = React.useRef(null);
+    const [enabled, setEnabled] = React.useState(false);
+    useOnClickOutside([ref], props.onOutsideClick, { disabled: !enabled });
+    return (<div style={{ display: "flex", gap: 16, flexDirection: "column", alignItems: "flex-start" }}>
+			<input ref={ref} onFocus={() => setEnabled(true)} aria-label="Enable"/>
+			{enabled && "Enabled"}
+		</div>);
+};
+export const enable = {
+    name: "test: enabled during click inside",
+    args: {
+        handleOutsideClick: fn(),
+    },
+    render: (args) => <DemoEnable onOutsideClick={args.handleOutsideClick}/>,
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox", { name: "Enable" });
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+        // Focus on mousedown enables the hook, so the mousedown happened inside before it was enabled
+        await userEvent.click(input);
+        expect(canvas.getByText("Enabled")).toBeInTheDocument();
+        expect(args.handleOutsideClick).not.toHaveBeenCalled();
+        await userEvent.click(document.body);
+        expect(args.handleOutsideClick).toHaveBeenCalledTimes(1);
     },
 };

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

@@ -1,29 +1,23 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setRTL = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const useRTL_1 = __importDefault(require("../useRTL"));
-exports.default = {
+import React from "react";
+import { expect } from "storybook/test";
+import useRTL from "../useRTL.js";
+export default {
     title: "Hooks/useRTL",
     parameters: {
         chromatic: { disableSnapshot: true },
     },
 };
 const Component = () => {
-    const [rtl, setRTL] = (0, useRTL_1.default)();
-    react_1.default.useEffect(() => {
+    const [rtl, setRTL] = useRTL();
+    React.useEffect(() => {
         setRTL(true);
     }, [setRTL]);
     return <div>{rtl ? "RTL" : "LTR"}</div>;
 };
-exports.setRTL = {
+export const setRTL = {
     name: "setRTL",
     render: () => <Component />,
     play: async () => {
-        (0, test_1.expect)(document.documentElement).toHaveAttribute("dir", "rtl");
+        expect(document.documentElement).toHaveAttribute("dir", "rtl");
     },
 };

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

@@ -1,33 +1,27 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.boolean = exports.base = void 0;
-const View_1 = __importDefault(require("../../components/View"));
-const useResponsiveClientValue_1 = __importDefault(require("../../hooks/useResponsiveClientValue"));
-exports.default = {
+import View from "../../components/View/index.js";
+import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
+export default {
     title: "Hooks/useResponsiveClientValue",
     parameters: {
         chromatic: { disableSnapshot: true },
     },
 };
-exports.base = {
+export const base = {
     name: "base",
     render: () => {
-        const value = (0, useResponsiveClientValue_1.default)({
+        const value = useResponsiveClientValue({
             s: "neutral",
             m: "critical",
             l: "positive",
         });
-        return <View_1.default width={25} height={25} backgroundColor={value}/>;
+        return <View width={25} height={25} backgroundColor={value}/>;
     },
 };
-exports.boolean = {
+export const boolean = {
     name: "boolean",
     describe: "works with boolean properties",
     render: () => {
-        const value = (0, useResponsiveClientValue_1.default)({
+        const value = useResponsiveClientValue({
             s: true,
             l: false,
         });