reshaped 4.2.0 → 4.3.0-canary.0

package/dist/components/_private/Freeze/Freeze.types.d.ts

@@ -0,0 +1,14 @@
+import type React from "react";
+export type Props = {
+    /** Stop committing updates to the children and keep their last rendered output on the screen */
+    frozen: boolean;
+    /** Node for inserting children */
+    children?: React.ReactNode;
+};
+export type State = {
+    /** Frozen render was committed, children stay suspended until unfrozen */
+    committed?: boolean;
+    /** Frozen render wasn't committed in time, children render without freezing */
+    expired?: boolean;
+    pending?: Promise<void>;
+};

package/dist/components/_private/Freeze/Freeze.types.js

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

package/dist/components/_private/Freeze/index.d.ts

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

package/dist/components/_private/Freeze/index.js

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

package/dist/components/_private/Freeze/tests/Freeze.stories.d.ts

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

package/dist/components/_private/Freeze/tests/Freeze.stories.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transition = exports.base = void 0;
+const react_1 = __importDefault(require("react"));
+const test_1 = require("storybook/test");
+const Freeze_1 = __importDefault(require("../../../../components/_private/Freeze"));
+const Button_1 = __importDefault(require("../../../../components/Button"));
+const View_1 = __importDefault(require("../../../../components/View"));
+exports.default = { title: "Internal/Freeze" };
+const ValueContext = react_1.default.createContext(0);
+const ContextValue = () => {
+    const value = react_1.default.useContext(ValueContext);
+    return <div data-testid="context-value">Context: {value}</div>;
+};
+const Demo = (props) => {
+    const [frozen, setFrozen] = react_1.default.useState(false);
+    const [value, setValue] = react_1.default.useState(0);
+    const update = (nextFrozen) => {
+        const apply = () => {
+            setFrozen(nextFrozen);
+            setValue((prev) => prev + 1);
+        };
+        if (props.transition) {
+            react_1.default.startTransition(apply);
+        }
+        else {
+            apply();
+        }
+    };
+    return (<View_1.default gap={4}>
+			<View_1.default direction="row" gap={2}>
+				<Button_1.default onClick={() => update(true)}>Freeze and update</Button_1.default>
+				<Button_1.default onClick={() => update(false)}>Unfreeze and update</Button_1.default>
+			</View_1.default>
+
+			<div data-testid="frozen-state">{frozen ? "Frozen" : "Active"}</div>
+
+			<ValueContext.Provider value={value}>
+				<Freeze_1.default frozen={frozen}>
+					<div data-testid="prop-value">Prop: {value}</div>
+					<ContextValue />
+				</Freeze_1.default>
+			</ValueContext.Provider>
+		</View_1.default>);
+};
+exports.base = {
+    name: "base",
+    render: () => <Demo />,
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const [freezeButton, unfreezeButton] = canvas.getAllByRole("button");
+        await test_1.userEvent.click(freezeButton);
+        // Updates coming in the same render as freezing are ignored
+        (0, test_1.expect)(canvas.getByTestId("frozen-state")).toHaveTextContent("Frozen");
+        (0, test_1.expect)(canvas.getByTestId("prop-value")).toHaveTextContent("Prop: 0");
+        (0, test_1.expect)(canvas.getByTestId("context-value")).toHaveTextContent("Context: 0");
+        // Frozen content stays visible even though it's suspended
+        (0, test_1.expect)(canvas.getByTestId("prop-value")).toBeVisible();
+        (0, test_1.expect)(canvas.getByTestId("context-value")).toBeVisible();
+        await test_1.userEvent.click(freezeButton);
+        (0, test_1.expect)(canvas.getByTestId("prop-value")).toHaveTextContent("Prop: 0");
+        await test_1.userEvent.click(unfreezeButton);
+        await (0, test_1.waitFor)(() => {
+            (0, test_1.expect)(canvas.getByTestId("frozen-state")).toHaveTextContent("Active");
+            (0, test_1.expect)(canvas.getByTestId("prop-value")).toHaveTextContent("Prop: 3");
+            (0, test_1.expect)(canvas.getByTestId("context-value")).toHaveTextContent("Context: 3");
+        });
+        (0, test_1.expect)(canvas.getByTestId("prop-value")).toBeVisible();
+    },
+};
+exports.transition = {
+    name: "test: freezing in a transition",
+    render: () => <Demo transition/>,
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const [freezeButton] = canvas.getAllByRole("button");
+        await test_1.userEvent.click(freezeButton);
+        // Transitions can't commit a frozen render, so they shouldn't be blocked by it
+        await (0, test_1.waitFor)(() => {
+            (0, test_1.expect)(canvas.getByTestId("frozen-state")).toHaveTextContent("Frozen");
+            (0, test_1.expect)(canvas.getByTestId("prop-value")).toHaveTextContent("Prop: 1");
+        });
+        (0, test_1.expect)(canvas.getByTestId("prop-value")).toBeVisible();
+    },
+};

package/dist/hooks/_internal/useSingletonHotkeys.js

@@ -173,6 +173,10 @@ const HotkeysProvider = (props) => {
         // Browsers trigger keyboard event without passing e.key when you click on autocomplete
         if (!e.key)
             return;
+        // Keys handled by an IME are not hotkeys. Safari fires the Enter that confirms
+        // a composition after compositionend, so only keyCode 229 marks it
+        if (e.isComposing || e.keyCode === 229)
+            return;
         const nextPressedMap = addPressedKey(e) ?? pressedMapRef.current;
         globalHotkeyStore.handleKeyDown(nextPressedMap, e);
     }, [addPressedKey]);

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

@@ -3,7 +3,7 @@ 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;
+exports.imeComposition = 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 = {
@@ -178,3 +178,20 @@ exports.optionModified = {
         (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(1);
     },
 };
+exports.imeComposition = {
+    name: "ignores IME composition",
+    args: {
+        handleHotkey: (0, test_1.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" }));
+        (0, test_1.expect)(args.handleHotkey).not.toHaveBeenCalled();
+        await test_1.userEvent.keyboard("{Enter}");
+        (0, test_1.expect)(args.handleHotkey).toHaveBeenCalledTimes(1);
+    },
+};

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;
 }>;

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

@@ -3,7 +3,7 @@ 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;
+exports.deps = exports.disabled = exports.refs = exports.keyboardContextMenu = exports.rightClick = exports.base = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
 const useOnClickOutside_1 = __importDefault(require("../useOnClickOutside"));
@@ -46,6 +46,44 @@ exports.base = {
         (0, test_1.expect)(args.handleOutsideClick).toHaveBeenCalledWith();
     },
 };
+exports.rightClick = {
+    name: "test: right click",
+    args: {
+        handleOutsideClick: (0, test_1.fn)(),
+    },
+    render: (args) => <DemoBase onOutsideClick={args.handleOutsideClick}/>,
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await test_1.userEvent.pointer({ keys: "[MouseRight]", target: button });
+        (0, test_1.expect)(args.handleOutsideClick).not.toHaveBeenCalled();
+        await test_1.userEvent.pointer({ keys: "[MouseRight]", target: document.body });
+        (0, test_1.expect)(args.handleOutsideClick).toHaveBeenCalledTimes(1);
+        (0, test_1.expect)(args.handleOutsideClick).toHaveBeenCalledWith();
+        // Opening another context menu outside
+        const preventDefault = (e) => e.preventDefault();
+        document.body.addEventListener("contextmenu", preventDefault);
+        await test_1.userEvent.pointer({ keys: "[MouseRight]", target: document.body });
+        document.body.removeEventListener("contextmenu", preventDefault);
+        (0, test_1.expect)(args.handleOutsideClick).toHaveBeenCalledTimes(2);
+    },
+};
+exports.keyboardContextMenu = {
+    name: "test: context menu key",
+    args: {
+        handleOutsideClick: (0, test_1.fn)(),
+    },
+    render: (args) => <DemoBase onOutsideClick={args.handleOutsideClick}/>,
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        // Context menu key doesn't trigger mousedown
+        test_1.fireEvent.mouseDown(document.body);
+        test_1.fireEvent.contextMenu(button);
+        (0, test_1.expect)(args.handleOutsideClick).not.toHaveBeenCalled();
+        test_1.fireEvent.mouseDown(button);
+        test_1.fireEvent.contextMenu(document.body);
+        (0, test_1.expect)(args.handleOutsideClick).toHaveBeenCalledTimes(1);
+    },
+};
 const DemoRefs = (props) => {
     const ref = react_1.default.useRef(null);
     const ref2 = react_1.default.useRef(null);

package/dist/hooks/useOnClickOutside.js

@@ -45,25 +45,25 @@ const useOnClickOutside = (refs, handler, options) => {
         if (disabled)
             return;
         const handleClick = (event) => {
-            if (event.type === "contextmenu") {
-                /**
-                 * Context menu events can be claimed by a handler that opens a menu of its own,
-                 * which prevents the default browser behavior. Such events open a new flyout
-                 * instead of dismissing the current one, so they're not outside clicks
-                 */
-                if (event.defaultPrevented)
-                    return;
-                isMouseDownInsideRef.current = checkEventInsideRefs(event);
-            }
             if (isMouseDownInsideRef.current)
                 return;
             handlerRef.current?.(event);
         };
+        /**
+         * Capture phase closes the content before another context menu opens on the same event,
+         * while the content opened by this event subscribes too late to get closed by it.
+         * Target is checked directly since the context menu key doesn't trigger mousedown
+         */
+        const handleContextMenu = (event) => {
+            if (checkEventInsideRefs(event))
+                return;
+            handlerRef.current?.(event);
+        };
         document.addEventListener("click", handleClick);
-        document.addEventListener("contextmenu", handleClick);
+        document.addEventListener("contextmenu", handleContextMenu, { capture: true });
         return () => {
             document.removeEventListener("click", handleClick);
-            document.removeEventListener("contextmenu", handleClick);
+            document.removeEventListener("contextmenu", handleContextMenu, { capture: true });
         };
         // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [handlerRef, disabled, ...refs]);

package/dist/utilities/animation.d.ts

@@ -2,3 +2,20 @@ export declare const onNextFrame: (cb: () => void) => void;
 export declare const disableTransitions: () => void;
 export declare const enableTransitions: () => void;
 export declare const checkTransitions: () => boolean;
+/**
+ * Resolves a critically damped spring into a css transition duration and a linear() easing,
+ * so the release animation continues from the current velocity of the gesture instead of restarting from zero.
+ * Browsers without linear() easing support fall back to a decelerating transition scaled by the velocity.
+ *
+ * @param displacement - current position relative to the target position, in px
+ * @param velocity - current velocity in px/ms, measured on the same axis as the displacement
+ * and positive when moving away from the target position
+ * @returns transition duration in ms and its timing function
+ */
+export declare const resolveSpringTransition: (args: {
+    displacement: number;
+    velocity: number;
+}) => {
+    duration: number;
+    easing: string;
+};

package/dist/utilities/animation.js

@@ -18,3 +18,76 @@ export const checkTransitions = () => {
         return false;
     return !window.matchMedia(reducedMotionMediaQuery).matches;
 };
+/**
+ * Angular frequency of the critically damped spring used for the gesture release animations, in 1/s.
+ * Higher values settle faster, 20 settles from a resting position in ~300ms
+ */
+const SPRING_OMEGA = 20;
+const SPRING_SAMPLE_RATE = 120;
+const SPRING_MAX_DURATION = 600;
+const SPRING_MIN_DURATION = 50;
+const SPRING_REST_DISTANCE = 0.5;
+const SPRING_REST_VELOCITY = 20;
+/** Velocity is capped so a fast flick doesn't resolve into an unreasonably long easing curve */
+const SPRING_MAX_VELOCITY = 3;
+/** Duration range used when the browser doesn't support linear() easing */
+const FALLBACK_MIN_DURATION = 100;
+const FALLBACK_MAX_DURATION = 300;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+let supportsLinearEasing = null;
+const checkLinearEasing = () => {
+    if (supportsLinearEasing !== null)
+        return supportsLinearEasing;
+    supportsLinearEasing =
+        typeof CSS !== "undefined" &&
+            typeof CSS.supports === "function" &&
+            CSS.supports("transition-timing-function", "linear(0, 1)");
+    return supportsLinearEasing;
+};
+/**
+ * Resolves a critically damped spring into a css transition duration and a linear() easing,
+ * so the release animation continues from the current velocity of the gesture instead of restarting from zero.
+ * Browsers without linear() easing support fall back to a decelerating transition scaled by the velocity.
+ *
+ * @param displacement - current position relative to the target position, in px
+ * @param velocity - current velocity in px/ms, measured on the same axis as the displacement
+ * and positive when moving away from the target position
+ * @returns transition duration in ms and its timing function
+ */
+export const resolveSpringTransition = (args) => {
+    const { displacement } = args;
+    const velocity = clamp(args.velocity, -SPRING_MAX_VELOCITY, SPRING_MAX_VELOCITY);
+    if (!displacement)
+        return { duration: 0, easing: "linear" };
+    if (!checkLinearEasing()) {
+        const duration = Math.abs(displacement) / Math.max(Math.abs(velocity), 0.001);
+        return {
+            duration: clamp(duration, FALLBACK_MIN_DURATION, FALLBACK_MAX_DURATION),
+            easing: "var(--rs-easing-decelerate)",
+        };
+    }
+    const step = 1000 / SPRING_SAMPLE_RATE;
+    // Position over time: (a + b * t) * e^(-omega * t), with the time in seconds
+    const a = displacement;
+    const b = velocity * 1000 + SPRING_OMEGA * displacement;
+    const values = [];
+    let duration = 0;
+    while (true) {
+        const time = duration / 1000;
+        const decay = Math.exp(-SPRING_OMEGA * time);
+        const position = (a + b * time) * decay;
+        const speed = (b - SPRING_OMEGA * (a + b * time)) * decay;
+        const settled = Math.abs(position) < SPRING_REST_DISTANCE && Math.abs(speed) < SPRING_REST_VELOCITY;
+        values.push(1 - position / displacement);
+        if (duration >= SPRING_MAX_DURATION)
+            break;
+        if (settled && duration >= SPRING_MIN_DURATION)
+            break;
+        duration += step;
+    }
+    values[values.length - 1] = 1;
+    return {
+        duration,
+        easing: `linear(${values.map((value) => value.toFixed(4)).join(", ")})`,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reshaped",
-  "version": "4.2.0",
+  "version": "4.3.0-canary.0",
   "description": "Professionally crafted design system in React and Figma for building products of any scale and complexity",
   "keywords": [
     "accessibility",
@@ -80,8 +80,8 @@
     "cssnano": "8.0.2",
     "csstype": "3.2.3",
     "postcss-custom-media": "12.0.1",
-    "@reshaped/theming": "4.2.0",
-    "@reshaped/utilities": "4.2.0"
+    "@reshaped/theming": "4.3.0-canary.0",
+    "@reshaped/utilities": "4.3.0-canary.0"
   },
   "peerDependencies": {
     "postcss": "^8",