reshaped 3.4.6 → 3.5.0-rc.0

package/dist/utilities/a11y/TrapFocus.js

@@ -1,3 +1,4 @@
+var _a;
 import Chain from "../Chain.js";
 import * as keys from "../../constants/keys.js";
 import TrapScreenReader from "./TrapScreenReader.js";
@@ -6,26 +7,25 @@ import { getShadowRoot } from "../dom/index.js";
 import { checkKeyboardMode } from "./keyboardMode.js";
 class TrapFocus {
     static chain = new Chain();
-    chainId;
-    root;
-    trigger = null;
-    options = {};
+    #chainId;
+    #root = null;
+    #trigger = null;
+    #options = {};
     trapped;
-    screenReaderTrap;
-    mutationObserver = null;
-    constructor(root) {
-        this.root = root;
-        this.screenReaderTrap = new TrapScreenReader(root);
-    }
+    #screenReaderTrap = null;
+    #mutationObserver = null;
+    constructor() { }
     /**
      * Handle keyboard navigation while focus is trapped
      */
-    handleKeyDown = (event) => {
+    #handleKeyDown = (event) => {
         if (event.defaultPrevented)
             return;
-        if (TrapFocus.chain.tailId !== this.chainId)
+        if (_a.chain.tailId !== this.#chainId)
             return;
-        const { mode, onRelease, pseudoFocus, includeTrigger } = this.options;
+        if (!this.#root)
+            return;
+        const { mode, onRelease, pseudoFocus, includeTrigger } = this.#options;
         let navigationMode = "tabs";
         if (mode === "action-menu" || mode === "selection-menu" || mode === "action-bar") {
             navigationMode = "arrows";
@@ -39,12 +39,12 @@ class TrapFocus {
         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 isFocusedOnTrigger = getActiveElement(this.#root) === this.#trigger;
         const focusData = getFocusData({
-            root: this.root,
+            root: this.#root,
             target: isPrev ? "prev" : "next",
             options: {
-                additionalElement: includeTrigger ? this.trigger : undefined,
+                additionalElement: includeTrigger ? this.#trigger : undefined,
                 circular: mode !== "action-menu" && mode !== "action-bar",
             },
         });
@@ -70,53 +70,57 @@ class TrapFocus {
             return;
         focusElement(focusData.el, { pseudoFocus });
     };
-    addListeners = () => {
-        const shadowRoot = getShadowRoot(this.root);
+    #addListeners = () => {
+        const shadowRoot = getShadowRoot(this.#root);
         const el = shadowRoot ?? document;
-        el.addEventListener("keydown", this.handleKeyDown);
+        el.addEventListener("keydown", this.#handleKeyDown);
     };
-    removeListeners = () => {
-        const shadowRoot = getShadowRoot(this.root);
+    #removeListeners = () => {
+        const shadowRoot = getShadowRoot(this.#root);
         const el = shadowRoot ?? document;
-        el.removeEventListener("keydown", this.handleKeyDown);
+        el.removeEventListener("keydown", this.#handleKeyDown);
     };
     /**
      * Trap the focus, add observer and keyboard event listeners
      * and create a chain item
      */
-    trap = (options = {}) => {
+    trap = (root, options = {}) => {
         const { mode = "dialog", includeTrigger, initialFocusEl } = options;
-        const trigger = getActiveElement(this.root);
-        const focusable = getFocusableElements(this.root, {
+        this.#root = root;
+        this.#screenReaderTrap = new TrapScreenReader(root);
+        const trigger = getActiveElement(this.#root);
+        const focusable = getFocusableElements(this.#root, {
             additionalElement: includeTrigger ? trigger : undefined,
         });
         const pseudoFocus = mode === "selection-menu";
-        this.options = { ...options, pseudoFocus };
-        this.trigger = trigger;
-        this.mutationObserver = new MutationObserver(() => {
-            const currentActiveElement = getActiveElement(this.root);
+        this.#options = { ...options, pseudoFocus };
+        this.#trigger = trigger;
+        this.#mutationObserver = new MutationObserver(() => {
+            if (!this.#root)
+                return;
+            const currentActiveElement = getActiveElement(this.#root);
             // Focus stayed inside the wrapper, no need to refocus
-            if (this.root.contains(currentActiveElement))
+            if (this.#root.contains(currentActiveElement))
                 return;
-            const focusable = getFocusableElements(this.root, {
+            const focusable = getFocusableElements(this.#root, {
                 additionalElement: includeTrigger ? trigger : undefined,
             });
             if (!focusable.length)
                 return;
             focusElement(focusable[0], { pseudoFocus });
         });
-        this.removeListeners();
-        this.mutationObserver.observe(this.root, { childList: true, subtree: true });
+        this.#removeListeners();
+        this.#mutationObserver.observe(this.#root, { childList: true, subtree: true });
         // Don't trap in case there is nothing to focus inside
         if (!focusable.length && !initialFocusEl)
             return;
-        this.addListeners();
+        this.#addListeners();
         if (mode === "dialog")
-            this.screenReaderTrap.trap();
+            this.#screenReaderTrap.trap();
         // Don't add back to the chain if we're traversing back
-        const tailItem = TrapFocus.chain.tailId && TrapFocus.chain.get(TrapFocus.chain.tailId);
-        if (!tailItem || this.root !== tailItem.data.root) {
-            this.chainId = TrapFocus.chain.add(this);
+        const tailItem = _a.chain.tailId && _a.chain.get(_a.chain.tailId);
+        if (!tailItem || this.#root !== tailItem.data.#root) {
+            this.#chainId = _a.chain.add(this);
             focusElement(initialFocusEl || focusable[0], { pseudoFocus });
         }
         this.trapped = true;
@@ -127,21 +131,22 @@ class TrapFocus {
      */
     release = (releaseOptions = {}) => {
         const { withoutFocusReturn } = releaseOptions;
-        if (!this.trapped || !this.chainId)
+        if (!this.trapped || !this.#chainId || !this.#root)
             return;
         this.trapped = false;
-        if (this.trigger && !withoutFocusReturn) {
-            this.trigger.focus({ preventScroll: !checkKeyboardMode() });
+        if (this.#trigger && !withoutFocusReturn) {
+            this.#trigger.focus({ preventScroll: !checkKeyboardMode() });
         }
-        TrapFocus.chain.removePreviousTill(this.chainId, (item) => document.body.contains(item.data.trigger));
-        this.mutationObserver?.disconnect();
-        this.removeListeners();
-        this.screenReaderTrap.release();
-        const previousItem = TrapFocus.chain.tailId && TrapFocus.chain.get(TrapFocus.chain.tailId);
-        if (previousItem) {
-            const trapInstance = new TrapFocus(previousItem.data.root);
-            trapInstance.trap(previousItem.data.options);
+        _a.chain.removePreviousTill(this.#chainId, (item) => document.body.contains(item.data.#trigger));
+        this.#mutationObserver?.disconnect();
+        this.#removeListeners();
+        this.#screenReaderTrap?.release();
+        const previousItem = _a.chain.tailId && _a.chain.get(_a.chain.tailId);
+        if (previousItem && previousItem.data.#root) {
+            const trapInstance = new _a();
+            trapInstance.trap(previousItem.data.#root, previousItem.data.#options);
         }
     };
 }
+_a = TrapFocus;
 export default TrapFocus;

package/dist/utilities/a11y/tests/TrapFocus.stories.js

@@ -34,8 +34,8 @@ export const modeDialog = {
                 return;
             if (!rootRef.current)
                 return;
-            const trapFocus = new TrapFocus(rootRef.current);
-            trapFocus.trap({ mode: "dialog" });
+            const trapFocus = new TrapFocus();
+            trapFocus.trap(rootRef.current, { mode: "dialog" });
             return () => trapFocus.release();
         }, [trapToggle.active]);
         return (<Example>
@@ -92,8 +92,8 @@ export const modeActionMenu = {
                 return;
             if (!rootRef.current)
                 return;
-            const trapFocus = new TrapFocus(rootRef.current);
-            trapFocus.trap({
+            const trapFocus = new TrapFocus();
+            trapFocus.trap(rootRef.current, {
                 mode: "action-menu",
                 onRelease: () => {
                     trapToggle.deactivate();
@@ -154,8 +154,8 @@ export const modeActionBar = {
                 return;
             if (!rootRef.current)
                 return;
-            const trapFocus = new TrapFocus(rootRef.current);
-            trapFocus.trap({
+            const trapFocus = new TrapFocus();
+            trapFocus.trap(rootRef.current, {
                 mode: "action-bar",
                 onRelease: () => {
                     trapToggle.deactivate();
@@ -216,8 +216,8 @@ export const modeContentMenu = {
                 return;
             if (!rootRef.current)
                 return;
-            const trapFocus = new TrapFocus(rootRef.current);
-            trapFocus.trap({
+            const trapFocus = new TrapFocus();
+            trapFocus.trap(rootRef.current, {
                 mode: "content-menu",
                 onRelease: () => {
                     trapToggle.deactivate();
@@ -279,8 +279,8 @@ export const includeTrigger = {
                 return;
             if (!rootRef.current)
                 return;
-            const trapFocus = new TrapFocus(rootRef.current);
-            trapFocus.trap({
+            const trapFocus = new TrapFocus();
+            trapFocus.trap(rootRef.current, {
                 mode: "dialog",
                 includeTrigger: true,
             });
@@ -327,8 +327,8 @@ export const initialFocusEl = {
                 return;
             if (!rootRef.current)
                 return;
-            const trapFocus = new TrapFocus(rootRef.current);
-            trapFocus.trap({
+            const trapFocus = new TrapFocus();
+            trapFocus.trap(rootRef.current, {
                 mode: "dialog",
                 initialFocusEl: initialFocusRef.current,
             });
@@ -388,8 +388,8 @@ export const focusableElements = {
                 return;
             if (!rootRef.current)
                 return;
-            const trapFocus = new TrapFocus(rootRef.current);
-            trapFocus.trap();
+            const trapFocus = new TrapFocus();
+            trapFocus.trap(rootRef.current);
             return () => trapFocus.release();
         }, [trapToggle.active]);
         return (<Example>
@@ -498,8 +498,8 @@ export const nested = {
                 return;
             if (!rootRef.current)
                 return;
-            const trapFocus = new TrapFocus(rootRef.current);
-            trapFocus.trap({
+            const trapFocus = new TrapFocus();
+            trapFocus.trap(rootRef.current, {
                 mode: "dialog",
             });
             return () => trapFocus.release();
@@ -509,8 +509,8 @@ export const nested = {
                 return;
             if (!innerRootRef.current)
                 return;
-            const trapFocus = new TrapFocus(innerRootRef.current);
-            trapFocus.trap({
+            const trapFocus = new TrapFocus();
+            trapFocus.trap(innerRootRef.current, {
                 mode: "dialog",
             });
             return () => trapFocus.release();
@@ -567,8 +567,8 @@ export const mutationObserver = {
                 return;
             if (!rootRef.current)
                 return;
-            const trapFocus = new TrapFocus(rootRef.current);
-            trapFocus.trap({
+            const trapFocus = new TrapFocus();
+            trapFocus.trap(rootRef.current, {
                 mode: "dialog",
             });
             setTimeout(() => {

package/dist/utilities/scroll/lock.js

@@ -1,23 +1,31 @@
 import { isIOS } from "../platform.js";
+import { findClosestRenderContainer } from "../dom/index.js";
 import lockSafariScroll from "./lockSafari.js";
 import lockStandardScroll from "./lockStandard.js";
-let lockedCount = 0;
+let bodyLockedCount = 0;
 let reset = () => { };
 export const lockScroll = (args) => {
-    lockedCount += 1;
-    if (lockedCount > 1)
+    const isIOSLock = isIOS() && !args.containerEl && !args.originEl;
+    let container = document.body;
+    if (args.originEl && !isIOSLock)
+        container = findClosestRenderContainer({ el: args.originEl }).el;
+    if (args.containerEl && !isIOSLock)
+        container = args.containerEl;
+    if (container === document.body)
+        bodyLockedCount += 1;
+    if (bodyLockedCount > 1)
         return;
-    if (isIOS() && !args.containerEl && !args.originEl) {
+    if (isIOSLock) {
         reset = lockSafariScroll();
     }
     else {
-        reset = lockStandardScroll({ containerEl: args.containerEl, originEl: args.originEl });
+        reset = lockStandardScroll({ container });
     }
     args.cb?.();
 };
 export const unlockScroll = (cb) => {
-    lockedCount -= 1;
-    if (lockedCount > 0)
+    bodyLockedCount -= 1;
+    if (bodyLockedCount > 0)
         return;
     reset();
     cb?.();

package/dist/utilities/scroll/lockStandard.d.ts

@@ -1,5 +1,4 @@
 declare const lockStandardScroll: (args: {
-    containerEl?: HTMLElement | null;
-    originEl?: HTMLElement | null;
+    container: HTMLElement;
 }) => () => void;
 export default lockStandardScroll;

package/dist/utilities/scroll/lockStandard.js

@@ -1,13 +1,8 @@
-import { findClosestRenderContainer } from "../dom/index.js";
 import { getScrollbarWidth } from "./helpers.js";
 import { StyleCache } from "../css.js";
 const styleCache = new StyleCache();
 const lockStandardScroll = (args) => {
-    let container = document.body;
-    if (args.originEl)
-        container = findClosestRenderContainer({ el: args.originEl }).el;
-    if (args.containerEl)
-        container = args.containerEl;
+    const { container } = args;
     const rect = container.getBoundingClientRect();
     const isOverflowing = rect.left + rect.right < window.innerWidth;
     styleCache.set(container, { overflow: "hidden" });
@@ -15,8 +10,6 @@ const lockStandardScroll = (args) => {
         const scrollBarWidth = getScrollbarWidth();
         styleCache.set(container, { paddingRight: `${scrollBarWidth}px` });
     }
-    return () => {
-        styleCache.reset();
-    };
+    return () => styleCache.reset();
 };
 export default lockStandardScroll;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.4.6",
+	"version": "3.5.0-rc.0",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -98,35 +98,35 @@
 		"@commitlint/cli": "19.8.0",
 		"@commitlint/config-conventional": "19.8.0",
 		"@commitlint/types": "19.8.0",
-		"@eslint/js": "9.23.0",
+		"@eslint/js": "9.25.0",
 		"@size-limit/preset-big-lib": "11.2.0",
-		"@storybook/addon-a11y": "8.6.9",
-		"@storybook/addon-actions": "8.6.9",
-		"@storybook/addon-controls": "8.6.9",
-		"@storybook/addon-docs": "8.6.9",
-		"@storybook/addon-storysource": "8.6.9",
-		"@storybook/experimental-addon-test": "8.6.9",
-		"@storybook/react": "8.6.9",
-		"@storybook/react-vite": "8.6.9",
+		"@storybook/addon-a11y": "8.6.12",
+		"@storybook/addon-actions": "8.6.12",
+		"@storybook/addon-controls": "8.6.12",
+		"@storybook/addon-docs": "8.6.12",
+		"@storybook/addon-storysource": "8.6.12",
+		"@storybook/experimental-addon-test": "8.6.12",
+		"@storybook/react": "8.6.12",
+		"@storybook/react-vite": "8.6.12",
 		"@types/culori": "2.1.1",
 		"@types/events": "3.0.3",
-		"@types/node": "22.13.13",
-		"@types/react": "19.0.12",
-		"@types/react-dom": "19.0.4",
-		"@vitejs/plugin-react": "4.3.4",
-		"@vitest/browser": "3.0.9",
-		"@vitest/coverage-istanbul": "3.0.9",
-		"@vitest/coverage-v8": "3.0.9",
-		"chromatic": "11.27.0",
+		"@types/node": "22.14.1",
+		"@types/react": "19.1.2",
+		"@types/react-dom": "19.1.2",
+		"@vitejs/plugin-react": "4.4.0",
+		"@vitest/browser": "3.1.1",
+		"@vitest/coverage-istanbul": "3.1.1",
+		"@vitest/coverage-v8": "3.1.1",
+		"chromatic": "11.28.2",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "9.23.0",
-		"eslint-config-prettier": "10.1.1",
+		"eslint": "9.25.0",
+		"eslint-config-prettier": "10.1.2",
 		"eslint-plugin-jsx-a11y": "6.10.2",
-		"eslint-plugin-prettier": "5.2.5",
-		"eslint-plugin-react": "7.37.4",
+		"eslint-plugin-prettier": "5.2.6",
+		"eslint-plugin-react": "7.37.5",
 		"eslint-plugin-react-hooks": "5.2.0",
-		"lefthook": "1.11.5",
-		"playwright": "1.51.1",
+		"lefthook": "1.11.10",
+		"playwright": "1.52.0",
 		"postcss": "8.5.3",
 		"postcss-cli": "11.0.1",
 		"postcss-each": "1.1.0",
@@ -137,16 +137,16 @@
 		"react-shadow": "20.6.0",
 		"resolve-tspaths": "0.8.23",
 		"size-limit": "11.2.0",
-		"storybook": "8.6.9",
-		"stylelint": "16.16.0",
+		"storybook": "8.6.12",
+		"stylelint": "16.18.0",
 		"stylelint-config-prettier": "9.0.5",
-		"stylelint-config-standard": "37.0.0",
+		"stylelint-config-standard": "38.0.0",
 		"ts-node": "10.9.2",
-		"typescript": "5.8.2",
-		"typescript-eslint": "8.28.0",
-		"vite": "6.2.3",
+		"typescript": "5.8.3",
+		"typescript-eslint": "8.30.1",
+		"vite": "6.3.2",
 		"vite-tsconfig-paths": "5.1.4",
-		"vitest": "3.0.9",
+		"vitest": "3.1.1",
 		"vitest-browser-react": "0.1.1"
 	},
 	"peerDependencies": {

package/dist/components/Autocomplete/tests/Autocomplete.test.stories.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-    component: {
-        (props: import("./..").AutocompleteProps): React.JSX.Element;
-        Item: {
-            (props: import("../Autocomplete.types").ItemProps): React.JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj<{
-    handleItemSelect: ReturnType<typeof fn>;
-    handleBackspace: ReturnType<typeof fn>;
-}>;

package/dist/components/Autocomplete/tests/Autocomplete.test.stories.js

@@ -1,86 +0,0 @@
-import React from "react";
-import { expect, waitFor, within, fn } from "@storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import Autocomplete from "../index.js";
-import FormControl from "../../FormControl/index.js";
-import { sleep } from "../../../utilities/helpers.js";
-import userEvent from "@testing-library/user-event";
-export default {
-    title: "Components/Autocomplete/tests",
-    component: Autocomplete,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/autocomplete",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const base = {
-    name: "base",
-    args: {
-        handleBackspace: fn(),
-        handleItemSelect: fn(),
-    },
-    render: (args) => {
-        const [value, setValue] = React.useState("");
-        return (<Example>
-				<Example.Item title="Base">
-					<FormControl>
-						<FormControl.Label>Food</FormControl.Label>
-						<Autocomplete name="fruit" placeholder="Pick your food" value={value} onChange={(args) => setValue(args.value)} onBackspace={args.handleBackspace} onItemSelect={args.handleItemSelect}>
-							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
-                return (<Autocomplete.Item key={v} value={v} data={i === 0 ? { foo: "bar" } : undefined}>
-										{v}
-									</Autocomplete.Item>);
-            })}
-						</Autocomplete>
-					</FormControl>
-				</Example.Item>
-			</Example>);
-    },
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const input = canvas.getByRole("combobox");
-        // Reset the focus
-        document.body.focus();
-        // Test keyboard selection after focusing the input
-        input.focus();
-        let options = [];
-        await waitFor(() => {
-            options = canvas.getAllByRole("option");
-        });
-        expect(options).toHaveLength(3);
-        await waitFor(() => {
-            expect(options[0]).toHaveAttribute("data-rs-focus");
-        });
-        expect(options[1]).not.toHaveAttribute("data-rs-focus");
-        await userEvent.keyboard("{ArrowDown/}");
-        await userEvent.keyboard("{Enter/}");
-        expect(input).toHaveValue("Pie");
-        expect(args.handleItemSelect).toHaveBeenCalledTimes(1);
-        expect(args.handleItemSelect).toHaveBeenCalledWith({
-            value: "Pie",
-            data: undefined,
-        });
-        // Give browser time to focus on the input
-        await sleep(100);
-        // Test click selection after opening with down arrow
-        await userEvent.keyboard("{ArrowDown/}");
-        await waitFor(() => {
-            options = canvas.getAllByRole("option");
-        });
-        await userEvent.click(options[0]);
-        expect(input).toHaveValue("Pizza");
-        expect(args.handleItemSelect).toHaveBeenCalledTimes(2);
-        expect(args.handleItemSelect).toHaveBeenCalledWith({
-            value: "Pizza",
-            data: { foo: "bar" },
-        });
-        input.focus();
-        await userEvent.keyboard("{Backspace/}");
-        await waitFor(() => {
-            expect(args.handleBackspace).toHaveBeenCalledTimes(1);
-            expect(args.handleBackspace).toHaveBeenCalledWith();
-        });
-    },
-};