reshaped 3.4.2 → 3.4.4

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

@@ -2,7 +2,12 @@ import { expect, userEvent } from "@storybook/test";
 import Button from "../../components/Button/index.js";
 import View from "../../components/View/index.js";
 import useKeyboardMode from "../useKeyboardMode.js";
-export default { title: "Hooks/useKeyboardMode" };
+export default {
+    title: "Hooks/useKeyboardMode",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 const Component = () => {
     const { activate, deactivate, disable, enable } = useKeyboardMode();
     return (<View direction="row" gap={2}>

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

@@ -0,0 +1,23 @@
+import { StoryObj } from "@storybook/react";
+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,111 @@
+import React from "react";
+import { expect, fn, userEvent } from "@storybook/test";
+import Button from "../../components/Button/index.js";
+import useOnClickOutside from "../useOnClickOutside.js";
+import View from "../../components/View/index.js";
+export default {
+    title: "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 (<View gap={4} align="start">
+				<Button attributes={{ ref }} onClick={() => setTarget("inside")}>
+					Trigger
+				</Button>
+				{target && `Clicked ${target}`}
+			</View>);
+    },
+    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 (<View gap={4} align="start">
+				<Button attributes={{ ref }}>Trigger</Button>
+				<Button attributes={{ ref: ref2 }}>Trigger 2</Button>
+			</View>);
+    },
+    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 (<View gap={4} align="start">
+				<Button attributes={{ ref }}>Trigger</Button>
+			</View>);
+    },
+    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 (<Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>
+				Trigger
+			</Button>);
+    },
+    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

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

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

@@ -1,8 +1,12 @@
 import React from "react";
-import { expect, waitFor } from "@storybook/test";
-import Reshaped from "../../components/Reshaped/index.js";
+import { expect } from "@storybook/test";
 import useRTL from "../useRTL.js";
-export default { title: "Hooks/useRTL" };
+export default {
+    title: "Hooks/useRTL",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 const Component = () => {
     const [rtl, setRTL] = useRTL();
     React.useEffect(() => {
@@ -12,14 +16,8 @@ const Component = () => {
 };
 export const setRTL = {
     name: "setRTL",
-    render: () => {
-        return (<Reshaped theme="reshaped">
-				<Component />
-			</Reshaped>);
-    },
+    render: () => <Component />,
     play: async () => {
-        waitFor(() => {
-            expect(document.documentElement).toHaveAttribute("dir", "rtl");
-        });
+        expect(document.documentElement).toHaveAttribute("dir", "rtl");
     },
 };

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

@@ -1,5 +1,10 @@
 declare const _default: {
     title: string;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
 };
 export default _default;
 export declare const base: {

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

@@ -1,6 +1,11 @@
 import useResponsiveClientValue from "../useResponsiveClientValue.js";
 import View from "../../components/View/index.js";
-export default { title: "Hooks/useResponsiveClientValue" };
+export default {
+    title: "Hooks/useResponsiveClientValue",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 export const base = {
     name: "base",
     render: () => {

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

@@ -1,6 +1,13 @@
 import { StoryObj } from "@storybook/react";
 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;

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

@@ -2,7 +2,13 @@ import React from "react";
 import { expect, userEvent } from "@storybook/test";
 import Button from "../../components/Button/index.js";
 import useScrollLock from "../useScrollLock.js";
-export default { title: "Hooks/useScrollLock" };
+import View from "../../components/View/index.js";
+export default {
+    title: "Hooks/useScrollLock",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 export const base = {
     name: "base",
     render: () => {
@@ -20,3 +26,43 @@ export const base = {
         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 (<View overflow="auto" height={25} attributes={{ ref: originRef, "data-testid": "root" }}>
+				<View height={50} padding={4} backgroundColor="neutral-faded" borderRadius="medium">
+					<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>
+				</View>
+			</View>);
+    },
+    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 (<View height={25} attributes={{ ref: containerRef, "data-testid": "root" }}>
+				<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>
+			</View>);
+    },
+    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");
+    },
+};

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

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

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

@@ -2,7 +2,12 @@ import React from "react";
 import { expect, userEvent } from "@storybook/test";
 import Button from "../../components/Button/index.js";
 import useToggle from "../useToggle.js";
-export default { title: "Hooks/useToggle" };
+export default {
+    title: "Hooks/useToggle",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 export const toggle = {
     name: "toggle",
     render: () => {

package/dist/hooks/useHandlerRef.js

@@ -10,7 +10,7 @@ const useHandlerRef = (cb) => {
     // Update the callback on every render, keeping the ref instance the same
     useIsomorphicLayoutEffect(() => {
         ref.current = cb;
-    });
+    }, [cb]);
     return ref;
 };
 export default useHandlerRef;

package/dist/hooks/{_private/useOnClickOutside.d.ts → useOnClickOutside.d.ts}

@@ -1,3 +1,5 @@
 import React from "react";
-declare const useOnClickOutside: (refs: React.RefObject<HTMLElement | null>[], handler: (event: Event) => void, deps: unknown[]) => void;
+declare const useOnClickOutside: (refs: React.RefObject<HTMLElement | null>[], handler: (event: Event) => void, options?: {
+    disabled?: boolean;
+}) => void;
 export default useOnClickOutside;

package/dist/hooks/{_private/useOnClickOutside.js → useOnClickOutside.js}

@@ -1,6 +1,7 @@
 import React from "react";
-import useHandlerRef from "../useHandlerRef.js";
-const useOnClickOutside = (refs, handler, deps) => {
+import useHandlerRef from "./useHandlerRef.js";
+const useOnClickOutside = (refs, handler, options) => {
+    const { disabled } = options || {};
     const handlerRef = useHandlerRef(handler);
     /**
      * We're checking the element position in the DOM on mousedown to make sure
@@ -9,6 +10,10 @@ const useOnClickOutside = (refs, handler, deps) => {
      */
     const isMouseDownInsideRef = React.useRef(false);
     React.useEffect(() => {
+        /**
+         * Not checking for disabled here since some components can enable the hook
+         * after it was clicked
+         */
         const handleMouseDown = (event) => {
             isMouseDownInsideRef.current = false;
             const clickedEl = event.composedPath()[0];
@@ -31,16 +36,20 @@ const useOnClickOutside = (refs, handler, deps) => {
     React.useEffect(() => {
         if (!handlerRef.current)
             return;
+        if (disabled)
+            return;
         const handleClick = (event) => {
+            if (!event.pointerType)
+                return;
             if (event.button === 2)
                 return;
             if (isMouseDownInsideRef.current)
                 return;
             handlerRef.current?.(event);
         };
-        document.addEventListener("click", handleClick);
+        document.addEventListener("click", handleClick, { passive: true });
         return () => document.removeEventListener("click", handleClick);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [handlerRef, ...refs, ...deps]);
+    }, [handlerRef, disabled, ...refs]);
 };
 export default useOnClickOutside;

package/dist/hooks/useScrollLock.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare const useScrollLock: (props?: {
+declare const useScrollLock: (options?: {
     containerRef?: React.RefObject<HTMLElement | null>;
     originRef?: React.RefObject<HTMLElement | null>;
 }) => {

package/dist/hooks/useScrollLock.js

@@ -1,8 +1,8 @@
 "use client";
 import React from "react";
 import { lockScroll, unlockScroll } from "../utilities/scroll/index.js";
-const useScrollLock = (props) => {
-    const { containerRef, originRef } = props || {};
+const useScrollLock = (options) => {
+    const { containerRef, originRef } = options || {};
     const [locked, setLocked] = React.useState(false);
     const handleLockScroll = React.useCallback(() => {
         lockScroll({

package/dist/index.d.ts

@@ -119,19 +119,21 @@ export type { ViewProps, ViewItemProps } from "./components/View";
  * Hooks
  */
 export { useFormControl } from "./components/FormControl";
-export { default as Theme, useTheme } from "./components/Theme";
-export type { ThemeProps } from "./components/Theme";
-export { default as useScrollLock } from "./hooks/useScrollLock";
-export { default as useToggle } from "./hooks/useToggle";
-export { default as useRTL } from "./hooks/useRTL";
-export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
+export { default as Theme, useTheme, type ThemeProps } from "./components/Theme";
+export { default as useHandlerRef } from "./hooks/useHandlerRef";
 export { default as useHotkeys } from "./hooks/useHotkeys";
+export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
 export { default as useKeyboardMode } from "./hooks/useKeyboardMode";
+export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue";
+export { default as useRTL } from "./hooks/useRTL";
+export { default as useScrollLock } from "./hooks/useScrollLock";
+export { default as useToggle } from "./hooks/useToggle";
 /**
  * Utilities
  */
 export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers";
+export { TrapFocus } from "./utilities/a11y";
 /**
  * Types
  */

package/dist/index.js

@@ -63,17 +63,20 @@ export { default as View } from "./components/View/index.js";
  */
 export { useFormControl } from "./components/FormControl/index.js";
 export { default as Theme, useTheme } from "./components/Theme/index.js";
-export { default as useScrollLock } from "./hooks/useScrollLock.js";
-export { default as useToggle } from "./hooks/useToggle.js";
-export { default as useRTL } from "./hooks/useRTL.js";
-export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
+export { default as useHandlerRef } from "./hooks/useHandlerRef.js";
 export { default as useHotkeys } from "./hooks/useHotkeys.js";
+export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
 export { default as useKeyboardMode } from "./hooks/useKeyboardMode.js";
+export { default as useOnClickOutside } from "./hooks/useOnClickOutside.js";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue.js";
+export { default as useRTL } from "./hooks/useRTL.js";
+export { default as useScrollLock } from "./hooks/useScrollLock.js";
+export { default as useToggle } from "./hooks/useToggle.js";
 /**
  * Utilities
  */
 export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers.js";
+export { TrapFocus } from "./utilities/a11y/index.js";
 /**
  * Dev utilities
  */

package/dist/tests/ShadowDOM.stories.js

@@ -9,7 +9,7 @@ import Select from "../components/Select/index.js";
 import Button from "../components/Button/index.js";
 import Tooltip from "../components/Tooltip/index.js";
 export default {
-    title: "Meta/ShadowDOM",
+    title: "Internal/ShadowDOM",
 };
 const getStylesData = () => {
     const sourceStylesContainer = document.head;

package/dist/themes/_generator/tests/themes.stories.js

@@ -14,7 +14,7 @@ import Link from "../../../components/Link/index.js";
 import Text from "../../../components/Text/index.js";
 import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
 export default {
-    title: "Meta/Themes",
+    title: "Internal/Themes",
     parameters: {
         iframe: { url: "https://reshaped.so/docs/tokens/theming/runtime-theming" },
         a11y: {

package/dist/utilities/a11y/TrapFocus.d.ts

@@ -5,7 +5,7 @@ type ReleaseOptions = {
     withoutFocusReturn?: boolean;
 };
 type TrapOptions = {
-    onNavigateOutside?: () => void;
+    onRelease?: () => void;
     includeTrigger?: boolean;
     initialFocusEl?: FocusableElement | null;
     mode?: TrapMode;

package/dist/utilities/a11y/TrapFocus.js

@@ -25,25 +25,27 @@ class TrapFocus {
             return;
         if (TrapFocus.chain.tailId !== this.chainId)
             return;
-        const { mode, onNavigateOutside, pseudoFocus, includeTrigger } = this.options;
+        const { mode, onRelease, pseudoFocus, includeTrigger } = this.options;
         let navigationMode = "tabs";
-        if (mode === "action-menu" || mode === "selection-menu")
+        if (mode === "action-menu" || mode === "selection-menu" || mode === "action-bar") {
             navigationMode = "arrows";
+        }
         const key = event.key;
         const isTab = key === keys.TAB;
+        const isPrevTab = isTab && event.shiftKey;
         const isNextTab = isTab && !event.shiftKey;
-        const isBackTab = isTab && event.shiftKey;
-        const isUp = navigationMode === "arrows" && key === keys.UP;
-        const isDown = navigationMode === "arrows" && key === keys.DOWN;
-        const isPrev = (isBackTab && navigationMode === "tabs") || isUp;
-        const isNext = (isNextTab && navigationMode === "tabs") || isDown;
+        const isArrow = [keys.LEFT, keys.RIGHT, keys.UP, keys.DOWN].includes(key);
+        const isPrevArrow = navigationMode === "arrows" && key === (mode === "action-bar" ? keys.LEFT : keys.UP);
+        const isNextArrow = navigationMode === "arrows" && key === (mode === "action-bar" ? keys.RIGHT : keys.DOWN);
+        const isPrev = (isPrevTab && navigationMode === "tabs") || isPrevArrow;
+        const isNext = (isNextTab && navigationMode === "tabs") || isNextArrow;
         const isFocusedOnTrigger = getActiveElement(this.root) === this.trigger;
         const focusData = getFocusData({
             root: this.root,
             target: isPrev ? "prev" : "next",
             options: {
                 additionalElement: includeTrigger ? this.trigger : undefined,
-                circular: mode !== "action-menu",
+                circular: mode !== "action-menu" && mode !== "action-bar",
             },
         });
         // Release the trap when tab is used in navigation modes that support arrows
@@ -51,14 +53,18 @@ class TrapFocus {
             (mode === "content-menu" && isTab && focusData.overflow);
         if (hasNavigatedOutside) {
             // Prevent shift + tab event to avoid focus moving after the trap release
-            if (isBackTab && !isFocusedOnTrigger)
+            if (isPrevTab && !isFocusedOnTrigger)
                 event.preventDefault();
             this.release();
-            onNavigateOutside?.();
+            onRelease?.();
             return;
         }
-        if (!isPrev && !isNext)
+        if (!isPrev && !isNext) {
+            // Avoid page from scrolling with arrow keys while focus it trapped
+            if (isArrow && (mode === "action-bar" || mode === "action-menu"))
+                event.preventDefault();
             return;
+        }
         event.preventDefault();
         if (!focusData.el)
             return;

package/dist/utilities/a11y/tests/TrapFocus.stories.d.ts

@@ -1,6 +1,14 @@
-import React from "react";
+import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const base: () => React.JSX.Element;
+export declare const modeDialog: StoryObj;
+export declare const modeActionMenu: StoryObj;
+export declare const modeActionBar: StoryObj;
+export declare const modeContentMenu: StoryObj;
+export declare const includeTrigger: StoryObj;
+export declare const initialFocusEl: StoryObj;
+export declare const focusableElements: StoryObj;
+export declare const nested: StoryObj;
+export declare const mutationObserver: StoryObj;