reshaped 3.8.0-canary.11 → 3.8.0-canary.13

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

@@ -0,0 +1,128 @@
+import React, { useRef } from "react";
+import { expect, userEvent } from "storybook/test";
+import View from "../../components/View/index.js";
+import Button from "../../components/Button/index.js";
+import useKeyboardArrowNavigation from "../useKeyboardArrowNavigation.js";
+export default {
+    title: "Hooks/useKeyboardArrowNavigation",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref });
+        return (<View gap={2} direction="row" attributes={{ ref }}>
+				<Button onClick={() => { }}>Action 1</Button>
+				<Button onClick={() => { }}>Action 2</Button>
+				<Button onClick={() => { }}>Action 3</Button>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        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]);
+    },
+};
+export const horizontal = {
+    name: "orientation: horizontal",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, orientation: "horizontal" });
+        return (<View gap={2} direction="row" attributes={{ ref }}>
+				<Button onClick={() => { }}>Action 1</Button>
+				<Button onClick={() => { }}>Action 2</Button>
+				<Button onClick={() => { }}>Action 3</Button>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        expect(buttons[0]).toHaveAttribute("tabindex", "0");
+        expect(buttons[1]).toHaveAttribute("tabindex", "-1");
+        expect(buttons[2]).toHaveAttribute("tabindex", "-1");
+        buttons[0].focus();
+        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]);
+    },
+};
+export const vertical = {
+    name: "orientation: vertical",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, orientation: "vertical" });
+        return (<View gap={2} direction="column" attributes={{ ref }}>
+				<Button onClick={() => { }}>Action 1</Button>
+				<Button onClick={() => { }}>Action 2</Button>
+				<Button onClick={() => { }}>Action 3</Button>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        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]);
+    },
+};
+export const circular = {
+    name: "circular",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, circular: true });
+        return (<View gap={2} direction="row" attributes={{ ref }}>
+				<Button onClick={() => { }}>Action 1</Button>
+				<Button onClick={() => { }}>Action 2</Button>
+				<Button onClick={() => { }}>Action 3</Button>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        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]);
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, disabled: true });
+        return (<View gap={2} direction="row" attributes={{ ref }}>
+				<Button onClick={() => { }}>Action 1</Button>
+				<Button onClick={() => { }}>Action 2</Button>
+				<Button onClick={() => { }}>Action 3</Button>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        expect(buttons[0]).not.toHaveAttribute("tabindex");
+    },
+};

package/dist/hooks/useKeyboardArrowNavigation.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type Props = {
+    ref: React.RefObject<HTMLElement | null>;
+    disabled?: boolean;
+    orientation?: "vertical" | "horizontal";
+    circular?: boolean;
+};
+declare const useKeyboardArrowNavigation: (props: Props) => void;
+export default useKeyboardArrowNavigation;

package/dist/hooks/useKeyboardArrowNavigation.js

@@ -0,0 +1,62 @@
+import React, { useEffect } from "react";
+import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, getFocusableElements, } from "../utilities/a11y/index.js";
+import useHotkeys from "./useHotkeys.js";
+const useKeyboardArrowNavigation = (props) => {
+    const { ref, disabled, orientation, circular } = props;
+    const backHotkeys = [];
+    const forwardHotkeys = [];
+    if (!orientation || orientation === "vertical") {
+        backHotkeys.push("ArrowUp");
+        forwardHotkeys.push("ArrowDown");
+    }
+    if (!orientation || orientation === "horizontal") {
+        backHotkeys.push("ArrowLeft");
+        forwardHotkeys.push("ArrowRight");
+    }
+    const updateTabIndex = React.useCallback((options) => {
+        const { el, focusableElements } = options;
+        const initialEl = focusableElements.find((el) => el.getAttribute("tabindex") !== "-1");
+        const activeEl = el ?? initialEl ?? focusableElements[0];
+        focusableElements.forEach((el) => el.setAttribute("tabindex", "-1"));
+        activeEl?.setAttribute("tabindex", "0");
+    }, []);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        if (disabled)
+            return;
+        const focusableElements = getFocusableElements(ref.current);
+        updateTabIndex({ focusableElements });
+    }, [ref, updateTabIndex, disabled]);
+    useHotkeys({
+        [backHotkeys.join(", ")]: () => {
+            if (!ref.current)
+                return;
+            const data = focusPreviousElement(ref.current, { circular });
+            updateTabIndex(data);
+        },
+        [forwardHotkeys.join(", ")]: () => {
+            if (!ref.current)
+                return;
+            const data = focusNextElement(ref.current, { circular });
+            updateTabIndex(data);
+        },
+        Home: () => {
+            if (!ref.current)
+                return;
+            const data = focusFirstElement(ref.current);
+            updateTabIndex(data);
+        },
+        End: () => {
+            if (!ref.current)
+                return;
+            const data = focusLastElement(ref.current);
+            updateTabIndex(data);
+        },
+    }, [updateTabIndex, circular], {
+        ref,
+        preventDefault: true,
+        disabled,
+    });
+};
+export default useKeyboardArrowNavigation;

package/dist/index.d.ts

@@ -135,6 +135,7 @@ 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 useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation";
 export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue";
 export { default as useRTL } from "./hooks/useRTL";

package/dist/index.js

@@ -74,6 +74,7 @@ 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 useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation.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";

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

@@ -14,8 +14,25 @@ export declare const getFocusData: (args: {
 }) => {
     overflow: boolean;
     el: FocusableElement;
+    focusableElements: FocusableElement[];
+};
+export declare const focusNextElement: (root: HTMLElement, options?: {
+    circular?: boolean;
+}) => {
+    el: FocusableElement;
+    focusableElements: FocusableElement[];
+};
+export declare const focusPreviousElement: (root: HTMLElement, options?: {
+    circular?: boolean;
+}) => {
+    el: FocusableElement;
+    focusableElements: FocusableElement[];
+};
+export declare const focusFirstElement: (root: HTMLElement) => {
+    el: FocusableElement;
+    focusableElements: FocusableElement[];
+};
+export declare const focusLastElement: (root: HTMLElement) => {
+    el: FocusableElement;
+    focusableElements: FocusableElement[];
 };
-export declare const focusNextElement: (root: HTMLElement) => void;
-export declare const focusPreviousElement: (root: HTMLElement) => void;
-export declare const focusFirstElement: (root: HTMLElement) => void;
-export declare const focusLastElement: (root: HTMLElement) => void;

package/dist/utilities/a11y/focus.js

@@ -88,13 +88,14 @@ export const getFocusData = (args) => {
             nextIndex = target === "prev" ? positions.first : positions.last;
         }
     }
-    return { overflow: isOverflow, el: focusable[nextIndex] };
+    return { overflow: isOverflow, el: focusable[nextIndex], focusableElements: focusable };
 };
 const focusTargetElement = (root, target, options) => {
     const data = getFocusData({ root, target, options });
     focusElement(data.el);
+    return { el: data.el, focusableElements: data.focusableElements };
 };
-export const focusNextElement = (root) => focusTargetElement(root, "next", { includeNegativeTabIndex: true });
-export const focusPreviousElement = (root) => focusTargetElement(root, "prev", { includeNegativeTabIndex: true });
+export const focusNextElement = (root, options) => focusTargetElement(root, "next", { ...options, includeNegativeTabIndex: true });
+export const focusPreviousElement = (root, options) => focusTargetElement(root, "prev", { ...options, includeNegativeTabIndex: true });
 export const focusFirstElement = (root) => focusTargetElement(root, "first", { includeNegativeTabIndex: true });
 export const focusLastElement = (root) => focusTargetElement(root, "last", { includeNegativeTabIndex: true });

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.8.0-canary.11",
+	"version": "3.8.0-canary.13",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",

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

@@ -1,21 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").DropdownMenuProps> & {
-        Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
-        Trigger: import("react").FC<import("../../Flyout").FlyoutTriggerProps>;
-        Content: import("react").FC<import("../DropdownMenu.types").ContentProps>;
-        Section: import("react").FC<import("../DropdownMenu.types").SectionProps>;
-        Item: import("react").FC<import("../DropdownMenu.types").ItemProps>;
-        SubMenu: import("react").FC<import("../DropdownMenu.types").SubMenuProps>;
-        SubTrigger: import("react").FC<import("../DropdownMenu.types").SubTriggerProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;

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

@@ -1,11 +0,0 @@
-import DropdownMenu from "../index.js";
-export default {
-    title: "Components/DropdownMenu/tests",
-    component: DropdownMenu,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/dropdown-menu",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};

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

@@ -1,17 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "render" | "type" | "onClick" | "href" | "stopPropagation"> & {
-        icon?: import("../../Icon").IconProps["svg"];
-        color?: "inherit" | "critical" | "primary" | "positive" | "warning";
-        variant?: "plain" | "underline";
-    } & import("react").RefAttributes<import("../../Actionable").ActionableRef>>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;

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

@@ -1,11 +0,0 @@
-import Link from "../index.js";
-export default {
-    title: "Components/Link/tests",
-    component: Link,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/breadcrumbs",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};

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

@@ -1,13 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").LoaderProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;

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

@@ -1,11 +0,0 @@
-import Loader from "../index.js";
-export default {
-    title: "Components/Loader/tests",
-    component: Loader,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/loader",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};

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

@@ -1,19 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").TableProps> & {
-        Cell: import("react").FC<import("./..").TableCellProps>;
-        Heading: import("react").FC<import("./..").TableHeadingProps>;
-        Row: import("react").FC<import("./..").TableRowProps>;
-        Body: import("react").FC<import("./..").TableBodyProps>;
-        Head: import("react").FC<import("./..").TableHeadProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;

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

@@ -1,11 +0,0 @@
-import Table from "../index.js";
-export default {
-    title: "Components/Table/tests",
-    component: Table,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/table",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};

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

@@ -1,15 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").TextFieldProps> & {
-        Aligner: import("react").FC<import("../../_private/Aligner").AlignerProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;

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

@@ -1,11 +0,0 @@
-import TextField from "../index.js";
-export default {
-    title: "Components/TextField/tests",
-    component: TextField,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/text-area",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};

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

@@ -1,15 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").TimelineProps> & {
-        Item: import("react").FC<import("./..").TimelineItemProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;

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

@@ -1,11 +0,0 @@
-import Timeline from "../index.js";
-export default {
-    title: "Components/Timeline/tests",
-    component: Timeline,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/timeline",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};

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

@@ -1,13 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").TooltipProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;

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

@@ -1,11 +0,0 @@
-import Tooltip from "../index.js";
-export default {
-    title: "Components/Tooltip/tests",
-    component: Tooltip,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/tooltip",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};