reshaped 3.8.0-canary.9 → 3.8.0

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/hooks/useOnClickOutside.js

@@ -39,8 +39,6 @@ const useOnClickOutside = (refs, handler, options) => {
         if (disabled)
             return;
         const handleClick = (event) => {
-            if (!event.pointerType)
-                return;
             if (event.button === 2)
                 return;
             if (isMouseDownInsideRef.current)

package/dist/hooks/useScrollLock.js

@@ -1,18 +1,20 @@
 "use client";
 import React from "react";
-import { lockScroll, unlockScroll } from "../utilities/scroll/index.js";
+import { lockScroll } from "../utilities/scroll/index.js";
 const useScrollLock = (options) => {
     const { containerRef, originRef } = options || {};
     const [locked, setLocked] = React.useState(false);
+    const unlockScrollRef = React.useRef(null);
     const handleLockScroll = React.useCallback(() => {
-        lockScroll({
+        unlockScrollRef.current = lockScroll({
             containerEl: containerRef?.current,
             originEl: originRef?.current,
             cb: () => setLocked(true),
         });
     }, [containerRef, originRef]);
     const handleUnlockScroll = React.useCallback(() => {
-        unlockScroll(() => setLocked(false));
+        unlockScrollRef.current?.(() => setLocked(false));
+        unlockScrollRef.current = null;
     }, []);
     return React.useMemo(() => ({
         scrollLocked: locked,

package/dist/index.d.ts

@@ -103,7 +103,7 @@ export type { ContainerProps } from "./components/Container";
 export { default as Dismissible } from "./components/Dismissible";
 export type { DismissibleProps } from "./components/Dismissible";
 export { default as Flyout } from "./components/Flyout";
-export type { FlyoutProps, FlyoutInstance } from "./components/Flyout";
+export type { FlyoutProps, FlyoutInstance, FlyoutTriggerAttributes } from "./components/Flyout";
 export { default as FormControl } from "./components/FormControl";
 export type { FormControlProps } from "./components/FormControl";
 export { default as Grid } from "./components/Grid";
@@ -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/dist/utilities/props.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import type * as G from "../types/global";
 type Value = string | boolean | number | undefined;
 type ClassNameResolver = string | ((value: Value) => string);
@@ -11,6 +10,4 @@ export declare const responsiveClassNames: <V extends G.Responsive<Value>>(s: Re
 }) => string[];
 export declare const responsiveVariables: <V extends Value = Value>(variableName: G.CSSVariable, value?: G.Responsive<V>) => Record<G.CSSVariable, V>;
 export declare const responsivePropDependency: <Result, T>(prop: G.Responsive<T>, resolver: (value: T, key: G.Viewport) => Result) => Result;
-export declare const setComponentChildId: (Component: React.FC<any>, id: string) => string;
-export declare const isMatchingComponentChildId: (child: React.ReactNode, id: string) => boolean | null;
 export {};

package/dist/utilities/props.js

@@ -1,4 +1,3 @@
-import React from "react";
 /**
  * Resolve an array of values into a classname string
  */
@@ -82,21 +81,3 @@ export const responsivePropDependency = (prop, resolver) => {
         return { ...acc, [viewport]: resolver(viewportValue, viewport) };
     }, {});
 };
-/**
- * Add unique ids to components relying on React.Children.map
- * Relying on an id instead of child.type makes it work in dev mode during HMR
- */
-const getComponentChildId = (id) => `__rs-child-${id}`;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const setComponentChildId = (Component, id) => {
-    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-    // @ts-ignore
-    return (Component.__reshapedChildId = getComponentChildId(id));
-};
-export const isMatchingComponentChildId = (child, id) => {
-    if (!React.isValidElement(child))
-        return null;
-    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-    // @ts-ignore
-    return child.type.__reshapedChildId === getComponentChildId(id);
-};

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

@@ -1,2 +1,2 @@
 export { disableScroll, enableScroll } from "./disable";
-export { lockScroll, unlockScroll } from "./lock";
+export { lockScroll } from "./lock";

package/dist/utilities/scroll/index.js

@@ -1,2 +1,2 @@
 export { disableScroll, enableScroll } from "./disable.js";
-export { lockScroll, unlockScroll } from "./lock.js";
+export { lockScroll } from "./lock.js";

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

@@ -2,5 +2,4 @@ export declare const lockScroll: (args: {
     containerEl?: HTMLElement | null;
     originEl?: HTMLElement | null;
     cb?: () => void;
-}) => void;
-export declare const unlockScroll: (cb?: () => void) => void;
+}) => ((cb?: () => void) => void) | undefined;

package/dist/utilities/scroll/lock.js

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