reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,82 +1,76 @@
-"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.orientationVertical = exports.orientationHorizontal = exports.touchEvents = exports.mouseEvents = exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../components/Button"));
-const View_1 = __importDefault(require("../../components/View"));
-const useDrag_1 = __importDefault(require("../../hooks/_internal/useDrag"));
-const useToggle_1 = __importDefault(require("../../hooks/useToggle"));
-exports.default = {
+import React from "react";
+import { expect, fireEvent, fn } from "storybook/test";
+import Button from "../../components/Button/index.js";
+import View from "../../components/View/index.js";
+import useDrag from "../../hooks/_internal/useDrag.js";
+import useToggle from "../../hooks/useToggle.js";
+export default {
     title: "Hooks/Internal/useDrag",
     parameters: {
         chromatic: { disableSnapshot: true },
     },
 };
 function Example() {
-    const [state, setState] = react_1.default.useState({ x: 0, y: 0 });
-    const disabledToggle = (0, useToggle_1.default)();
-    const { ref, containerRef, active } = (0, useDrag_1.default)((args) => {
+    const [state, setState] = React.useState({ x: 0, y: 0 });
+    const disabledToggle = useToggle();
+    const { ref, containerRef, active } = useDrag((args) => {
         setState(args);
     }, {
         disabled: disabledToggle.active,
     });
-    return (<View_1.default direction="row" gap={4}>
-			<View_1.default backgroundColor="neutral-faded" borderRadius="medium" width="200px" height="200px" attributes={{ ref: containerRef }}>
-				<View_1.default height={8} width={8} borderRadius="small" animated backgroundColor={active ? "primary" : "neutral"} attributes={{
+    return (<View direction="row" gap={4}>
+			<View backgroundColor="neutral-faded" borderRadius="medium" width="200px" height="200px" attributes={{ ref: containerRef }}>
+				<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" },
         }}/>
-			</View_1.default>
-			<Button_1.default onClick={() => disabledToggle.toggle()}>
+			</View>
+			<Button onClick={() => disabledToggle.toggle()}>
 				{disabledToggle.active ? "Enable" : "Disable"}
-			</Button_1.default>
-		</View_1.default>);
+			</Button>
+		</View>);
 }
-exports.base = { name: "base", render: () => <Example /> };
+export const base = { name: "base", render: () => <Example /> };
 const Demo = (props) => {
-    const { ref, containerRef } = (0, useDrag_1.default)((options) => {
+    const { ref, containerRef } = useDrag((options) => {
         props.onDrag(options);
     }, {
         orientation: props.orientation,
         disabled: props.disabled,
     });
-    return (<View_1.default backgroundColor="neutral-faded" width="200px" height="200px" attributes={{ ref: containerRef, "data-testid": "test-id" }}>
-			<View_1.default height={8} width={8} backgroundColor="primary" attributes={{
+    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_1.default>);
+		</View>);
 };
-exports.mouseEvents = {
+export const mouseEvents = {
     name: "onDrag, mouse events",
     args: {
-        handleDrag: (0, test_1.fn)(),
+        handleDrag: fn(),
     },
     render: (args) => {
         return <Demo onDrag={args.handleDrag}/>;
     },
     play: ({ canvas, args }) => {
         const trigger = canvas.getByTestId("test-handle-id");
-        test_1.fireEvent.mouseDown(trigger);
-        test_1.fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        (0, test_1.expect)(args.handleDrag).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleDrag).toHaveBeenCalledWith(test_1.expect.objectContaining({ x: 100, y: 50 }));
-        test_1.fireEvent.mouseUp(trigger);
-        test_1.fireEvent.mouseUp(document.body, { clientX: 50, clientY: 100 });
-        (0, test_1.expect)(args.handleDrag).toHaveBeenCalledTimes(1);
+        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);
     },
 };
-exports.touchEvents = {
+export const touchEvents = {
     name: "onDrag, touch events",
     args: {
-        handleDrag: (0, test_1.fn)(),
+        handleDrag: fn(),
     },
     render: (args) => {
         return <Demo onDrag={args.handleDrag}/>;
@@ -95,59 +89,59 @@ exports.touchEvents = {
             });
         };
         const trigger = canvas.getByTestId("test-handle-id");
-        test_1.fireEvent.touchStart(trigger, { changedTouches: [createTouch(trigger, 0, 0)] });
-        test_1.fireEvent.touchMove(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });
-        (0, test_1.expect)(args.handleDrag).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleDrag).toHaveBeenCalledWith(test_1.expect.objectContaining({ x: 100, y: 50 }));
-        test_1.fireEvent.touchEnd(trigger);
-        test_1.fireEvent.touchEnd(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });
-        (0, test_1.expect)(args.handleDrag).toHaveBeenCalledTimes(1);
+        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);
     },
 };
-exports.orientationHorizontal = {
+export const orientationHorizontal = {
     name: "orientation horizontal",
     args: {
-        handleDrag: (0, test_1.fn)(),
+        handleDrag: fn(),
     },
     render: (args) => {
         return <Demo onDrag={args.handleDrag} orientation="horizontal"/>;
     },
     play: ({ canvas, args }) => {
         const trigger = canvas.getByTestId("test-handle-id");
-        test_1.fireEvent.mouseDown(trigger);
-        test_1.fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        (0, test_1.expect)(args.handleDrag).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleDrag).toHaveBeenCalledWith(test_1.expect.objectContaining({ x: 100, y: 0 }));
+        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 }));
     },
 };
-exports.orientationVertical = {
+export const orientationVertical = {
     name: "orientation vertical",
     args: {
-        handleDrag: (0, test_1.fn)(),
+        handleDrag: fn(),
     },
     render: (args) => {
         return <Demo onDrag={args.handleDrag} orientation="vertical"/>;
     },
     play: ({ canvas, args }) => {
         const trigger = canvas.getByTestId("test-handle-id");
-        test_1.fireEvent.mouseDown(trigger);
-        test_1.fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        (0, test_1.expect)(args.handleDrag).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleDrag).toHaveBeenCalledWith(test_1.expect.objectContaining({ x: 0, y: 50 }));
+        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 }));
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
     args: {
-        handleDrag: (0, test_1.fn)(),
+        handleDrag: fn(),
     },
     render: (args) => {
         return <Demo onDrag={args.handleDrag} disabled/>;
     },
     play: ({ canvas, args }) => {
         const trigger = canvas.getByTestId("test-handle-id");
-        test_1.fireEvent.mouseDown(trigger);
-        test_1.fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        (0, test_1.expect)(args.handleDrag).toHaveBeenCalledTimes(0);
+        fireEvent.mouseDown(trigger);
+        fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
+        expect(args.handleDrag).toHaveBeenCalledTimes(0);
     },
 };

package/dist/hooks/tests/useElementId.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.id = void 0;
-const test_1 = require("storybook/test");
-const useElementId_1 = __importDefault(require("../../hooks/useElementId"));
-exports.default = {
+import { expect, waitFor } from "storybook/test";
+import useElementId from "../../hooks/useElementId.js";
+export default {
     title: "Hooks/useElementId",
     parameters: {
         chromatic: { disableSnapshot: true },
     },
 };
 const Component = (props) => {
-    const id = (0, useElementId_1.default)(props.id);
+    const id = useElementId(props.id);
     return <div id={id}>{id}</div>;
 };
-exports.id = {
+export const id = {
     name: "passed id",
     render: () => {
         return <Component id="hey"/>;
     },
     play: async () => {
-        (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(document.querySelector("#hey")).toBeTruthy();
+        waitFor(() => {
+            expect(document.querySelector("#hey")).toBeTruthy();
         });
     },
 };

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

@@ -1,13 +1,7 @@
-"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 react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const useHandlerRef_1 = __importDefault(require("../useHandlerRef"));
-exports.default = {
+import React from "react";
+import { expect, fn, userEvent } from "storybook/test";
+import useHandlerRef from "../useHandlerRef.js";
+export default {
     title: "Hooks/useHandlerRef",
     parameters: {
         chromatic: { disableSnapshot: true },
@@ -15,19 +9,19 @@ exports.default = {
 };
 const Component = (props) => {
     const { onEffect, count } = props;
-    const onEffectRef = (0, useHandlerRef_1.default)(onEffect);
-    react_1.default.useEffect(() => {
+    const onEffectRef = useHandlerRef(onEffect);
+    React.useEffect(() => {
         onEffectRef.current();
     }, [onEffectRef]);
     return <>Counter: {count}</>;
 };
-exports.base = {
+export const base = {
     name: "base",
     args: {
-        handleEffect: (0, test_1.fn)(),
+        handleEffect: fn(),
     },
     render: (args) => {
-        const [count, setCount] = react_1.default.useState(0);
+        const [count, setCount] = React.useState(0);
         // Creating a new handler on each render
         const handleEffect = () => {
             args.handleEffect(0);
@@ -40,9 +34,9 @@ exports.base = {
     play: async ({ canvas, args }) => {
         const button = canvas.getAllByRole("button")[0];
         // mount, triggered twice in dev mode
-        (0, test_1.expect)(args.handleEffect).toHaveBeenCalledTimes(2);
-        await test_1.userEvent.click(button);
+        expect(args.handleEffect).toHaveBeenCalledTimes(2);
+        await userEvent.click(button);
         // Rerendering the component doesn't re-trigger the effect
-        (0, test_1.expect)(args.handleEffect).toHaveBeenCalledTimes(2);
+        expect(args.handleEffect).toHaveBeenCalledTimes(2);
     },
 };

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

@@ -41,3 +41,6 @@ export declare const optionModified: StoryObj<{
     handleHotkey: ReturnType<typeof fn>;
     handleHotkeyModified: ReturnType<typeof fn>;
 }>;
+export declare const imeComposition: StoryObj<{
+    handleHotkey: ReturnType<typeof fn>;
+}>;

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

@@ -1,21 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.optionModified = exports.keyCombinationMoreThanRequired = exports.keyCombinationOrder = exports.keyCombinationFormat = exports.keyCombination = exports.keyList = exports.modKeyHold = exports.modKey = exports.singleKey = exports.base = void 0;
-const test_1 = require("storybook/test");
-const useHotkeys_1 = __importDefault(require("../useHotkeys"));
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import useHotkeys from "../useHotkeys.js";
+export default {
     title: "Hooks/useHotkeys",
     parameters: {
         chromatic: { disableSnapshot: true },
     },
 };
-exports.base = {
+export const base = {
     name: "base",
     render: () => {
-        const { checkHotkeyState } = (0, useHotkeys_1.default)({
+        const { checkHotkeyState } = useHotkeys({
             "shift + b + n": () => console.log("pressed"),
             "c + v": () => console.log("c + v"),
             "Meta + k": () => console.log("meta + k"),
@@ -69,112 +63,129 @@ exports.base = {
 };
 const Component = (props) => {
     const { hotkeys } = props;
-    (0, useHotkeys_1.default)(hotkeys);
+    useHotkeys(hotkeys);
     return <div />;
 };
-exports.singleKey = {
+export const singleKey = {
     name: "single key",
     args: {
-        handleHotkey: (0, test_1.fn)(),
+        handleHotkey: fn(),
     },
     render: (args) => <Component hotkeys={{ a: args.handleHotkey }}/>,
     play: async ({ args }) => {
-        await test_1.userEvent.keyboard("a");
-        await test_1.userEvent.keyboard("b");
-        (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(1);
+        await userEvent.keyboard("a");
+        await userEvent.keyboard("b");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
     },
 };
-exports.modKey = {
+export const modKey = {
     name: "mod key",
     args: {
-        handleHotkey: (0, test_1.fn)(),
+        handleHotkey: fn(),
     },
     render: (args) => <Component hotkeys={{ mod: args.handleHotkey }}/>,
     play: async ({ args }) => {
-        await test_1.userEvent.keyboard("{Meta/}");
-        (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(1);
+        await userEvent.keyboard("{Meta/}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
     },
 };
-exports.modKeyHold = {
+export const modKeyHold = {
     name: "mod key on hold",
     args: {
-        handleHotkey: (0, test_1.fn)(),
+        handleHotkey: fn(),
     },
     render: (args) => <Component hotkeys={{ "Meta + b": args.handleHotkey }}/>,
     play: async ({ args }) => {
-        await test_1.userEvent.keyboard("{Meta>}bb{/Meta}");
-        (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(2);
+        await userEvent.keyboard("{Meta>}bb{/Meta}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(2);
     },
 };
-exports.keyList = {
+export const keyList = {
     name: "key list",
     args: {
-        handleHotkey: (0, test_1.fn)(),
+        handleHotkey: fn(),
     },
     render: (args) => <Component hotkeys={{ "a,b": args.handleHotkey }}/>,
     play: async ({ args }) => {
-        await test_1.userEvent.keyboard("a");
-        (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(1);
-        await test_1.userEvent.keyboard("b");
-        (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(2);
+        await userEvent.keyboard("a");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
+        await userEvent.keyboard("b");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(2);
     },
 };
-exports.keyCombination = {
+export const keyCombination = {
     name: "key combination",
     args: {
-        handleHotkey: (0, test_1.fn)(),
+        handleHotkey: fn(),
     },
     render: (args) => <Component hotkeys={{ "a+b": args.handleHotkey }}/>,
     play: async ({ args }) => {
-        await test_1.userEvent.keyboard("{a>}b{/a}");
-        (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(1);
+        await userEvent.keyboard("{a>}b{/a}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
     },
 };
-exports.keyCombinationFormat = {
+export const keyCombinationFormat = {
     name: "key combination without formatting",
     args: {
-        handleHotkey: (0, test_1.fn)(),
+        handleHotkey: fn(),
     },
     render: (args) => <Component hotkeys={{ "A  + b": args.handleHotkey }}/>,
     play: async ({ args }) => {
-        await test_1.userEvent.keyboard("{a>}b{/a}");
-        (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(1);
+        await userEvent.keyboard("{a>}b{/a}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
     },
 };
-exports.keyCombinationOrder = {
+export const keyCombinationOrder = {
     name: "key combination without order",
     args: {
-        handleHotkey: (0, test_1.fn)(),
+        handleHotkey: fn(),
     },
     render: (args) => <Component hotkeys={{ "b+a": args.handleHotkey }}/>,
     play: async ({ args }) => {
-        await test_1.userEvent.keyboard("{a>}b{/a}");
-        (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(1);
+        await userEvent.keyboard("{a>}b{/a}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
     },
 };
-exports.keyCombinationMoreThanRequired = {
+export const keyCombinationMoreThanRequired = {
     name: "key combination, more keys pressed",
     args: {
-        handleHotkey: (0, test_1.fn)(),
+        handleHotkey: fn(),
     },
     render: (args) => <Component hotkeys={{ "z + x": args.handleHotkey }}/>,
     play: async ({ args }) => {
-        await test_1.userEvent.keyboard("{z>}{x>}c{/x}{/z}");
+        await userEvent.keyboard("{z>}{x>}c{/x}{/z}");
         // When c is pressed, it doesn't trigger a+b for the second time
-        (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(1);
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
     },
 };
-exports.optionModified = {
+export const optionModified = {
     name: "modified with alt/option",
     args: {
-        handleHotkey: (0, test_1.fn)(),
-        handleHotkeyModified: (0, test_1.fn)(),
+        handleHotkey: fn(),
+        handleHotkeyModified: fn(),
     },
     render: (args) => (<Component hotkeys={{ "alt+n": args.handleHotkeyModified, "alt+shift": args.handleHotkey }}/>),
     play: async ({ args }) => {
-        await test_1.userEvent.keyboard("{Alt>}n{/Alt}");
-        (0, test_1.expect)(args.handleHotkeyModified).toHaveBeenCalledTimes(1);
-        await test_1.userEvent.keyboard("{Alt>}{Shift}{/Alt}");
-        (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(1);
+        await userEvent.keyboard("{Alt>}n{/Alt}");
+        expect(args.handleHotkeyModified).toHaveBeenCalledTimes(1);
+        await userEvent.keyboard("{Alt>}{Shift}{/Alt}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
+    },
+};
+export const imeComposition = {
+    name: "ignores IME composition",
+    args: {
+        handleHotkey: fn(),
+    },
+    render: (args) => <Component hotkeys={{ enter: args.handleHotkey }}/>,
+    play: async ({ args }) => {
+        window.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", isComposing: true }));
+        window.dispatchEvent(new KeyboardEvent("keyup", { key: "Enter" }));
+        // Safari ends the composition before keydown, so only keyCode 229 marks it
+        window.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", keyCode: 229 }));
+        window.dispatchEvent(new KeyboardEvent("keyup", { key: "Enter" }));
+        expect(args.handleHotkey).not.toHaveBeenCalled();
+        await userEvent.keyboard("{Enter}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
     },
 };