reshaped 3.8.0-canary.2 → 3.8.0-canary.20

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

@@ -4,6 +4,7 @@ import Popover from "../../Popover/index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
 import useResponsiveClientValue from "../../../hooks/useResponsiveClientValue.js";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 export default {
     title: "Components/Tooltip",
     component: Tooltip,
@@ -29,122 +30,153 @@ const DemoResponsive = (props) => {
 			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
 		</Tooltip>);
 };
-export const position = () => (<Example>
-		<Example.Item title="position: bottom-start">
-			<View direction="row" gap={2}>
-				<Demo position="bottom-start" text="Tooltip 1"/>
-				<Demo position="bottom-start" text="Tooltip 2"/>
-				<Demo position="bottom-start" text="Tooltip 3"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="position: bottom">
-			<Demo position="bottom"/>
-		</Example.Item>
-		<Example.Item title="position: bottom-end">
-			<Demo position="bottom-end"/>
-		</Example.Item>
-		<Example.Item title="position: top-start">
-			<Demo position="top-start"/>
-		</Example.Item>
-		<Example.Item title="position: top">
-			<Demo position="top"/>
-		</Example.Item>
-		<Example.Item title="position: top-end">
-			<Demo position="top-end"/>
-		</Example.Item>
+export const position = {
+    name: "position",
+    render: () => (<Example>
+			<Example.Item title="position: bottom-start">
+				<View direction="row" gap={2}>
+					<Demo position="bottom-start" text="Tooltip 1"/>
+					<Demo position="bottom-start" text="Tooltip 2"/>
+					<Demo position="bottom-start" text="Tooltip 3"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="position: bottom">
+				<Demo position="bottom"/>
+			</Example.Item>
+			<Example.Item title="position: bottom-end">
+				<Demo position="bottom-end"/>
+			</Example.Item>
+			<Example.Item title="position: top-start">
+				<Demo position="top-start"/>
+			</Example.Item>
+			<Example.Item title="position: top">
+				<Demo position="top"/>
+			</Example.Item>
+			<Example.Item title="position: top-end">
+				<Demo position="top-end"/>
+			</Example.Item>
 
-		<Example.Item title="position: start">
-			<View align="end">
-				<Demo position="start"/>
-			</View>
-		</Example.Item>
+			<Example.Item title="position: start">
+				<View align="end">
+					<Demo position="start"/>
+				</View>
+			</Example.Item>
 
-		<Example.Item title="position: start-top">
-			<View align="end">
-				<Demo position="start-top"/>
-			</View>
-		</Example.Item>
+			<Example.Item title="position: start-top">
+				<View align="end">
+					<Demo position="start-top"/>
+				</View>
+			</Example.Item>
 
-		<Example.Item title="position: start-bottom">
-			<View align="end">
-				<Demo position="start-bottom"/>
-			</View>
-		</Example.Item>
+			<Example.Item title="position: start-bottom">
+				<View align="end">
+					<Demo position="start-bottom"/>
+				</View>
+			</Example.Item>
 
-		<Example.Item title="position: end">
-			<Demo position="end"/>
-		</Example.Item>
+			<Example.Item title="position: end">
+				<Demo position="end"/>
+			</Example.Item>
 
-		<Example.Item title="position: end-top">
-			<Demo position="end-top"/>
-		</Example.Item>
+			<Example.Item title="position: end-top">
+				<Demo position="end-top"/>
+			</Example.Item>
 
-		<Example.Item title="position: end-bottom">
-			<Demo position="end-bottom"/>
-		</Example.Item>
-	</Example>);
-export const color = () => (<Example>
-		<Example.Item title="color: inverted">
-			<Demo color="inverted" position="bottom"/>
-		</Example.Item>
-		<Example.Item title="color: dark">
-			<Demo color="dark" position="bottom"/>
-		</Example.Item>
-	</Example>);
-export const controlled = () => (<Example>
-		<Example.Item title="active, controlled, position: bottom">
-			<Demo position="bottom" active/>
-		</Example.Item>
-	</Example>);
-export const edgeCases = () => (<Example>
-		<Example.Item title="responsive visibility">
-			<DemoResponsive text="Responsive"/>
-		</Example.Item>
-
-		<Example.Item title="without text">
-			<Tooltip>{() => <Button>Button</Button>}</Tooltip>
-		</Example.Item>
+			<Example.Item title="position: end-bottom">
+				<Demo position="end-bottom"/>
+			</Example.Item>
+		</Example>),
+};
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: inverted">
+				<Demo color="inverted" position="bottom"/>
+			</Example.Item>
+			<Example.Item title="color: dark">
+				<Demo color="dark" position="bottom"/>
+			</Example.Item>
+		</Example>),
+};
+export const defaultActive = {
+    name: "uncontrolled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Tooltip text="Content" onOpen={args.handleOpen} onClose={args.handleClose}>
+			{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+		</Tooltip>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.hover(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        const item = canvas.getByText("Content");
+        expect(item).toBeInTheDocument();
+        await userEvent.unhover(trigger);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({});
+            expect(item).not.toBeInTheDocument();
+        });
+    },
+};
+export const edgeCases = {
+    name: "test: edge cases",
+    render: () => (<Example>
+			<Example.Item title="responsive visibility">
+				<DemoResponsive text="Responsive"/>
+			</Example.Item>
 
-		<Example.Item title="tooltip with popover">
-			<Tooltip text="Tooltip" position="top">
-				{(attributes) => (<Popover position="bottom">
-						<Popover.Trigger>
-							{(popoverAttributes) => (<Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>)}
-						</Popover.Trigger>
-						<Popover.Content>Popover</Popover.Content>
-					</Popover>)}
-			</Tooltip>
-		</Example.Item>
+			<Example.Item title="without text">
+				<Tooltip>{() => <Button>Button</Button>}</Tooltip>
+			</Example.Item>
 
-		<Example.Item title="nested popovers inside a tooltip">
-			<View direction="row" gap={2}>
-				<Tooltip position="top" text="Hello">
-					{(tooltipAttributes) => (<Popover position="bottom" width="300px">
+			<Example.Item title="tooltip with popover">
+				<Tooltip text="Tooltip" position="top">
+					{(attributes) => (<Popover position="bottom">
 							<Popover.Trigger>
-								{(attributes) => (<Button attributes={{ ...tooltipAttributes, ...attributes }}>
-										Tooltip with popover
-									</Button>)}
+								{(popoverAttributes) => (<Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>)}
 							</Popover.Trigger>
-							<Popover.Content>
-								<View gap={2} align="center" direction="row" justify="space-between">
-									Popover content
-									<Popover position="bottom" width="300px">
-										<Popover.Trigger>
-											{(attributes) => <Button attributes={attributes}>Open</Button>}
-										</Popover.Trigger>
-										<Popover.Content>
-											<Popover.Dismissible align="center" closeAriaLabel="Close">
-												Another popover content
-											</Popover.Dismissible>
-										</Popover.Content>
-									</Popover>
-								</View>
-							</Popover.Content>
+							<Popover.Content>Popover</Popover.Content>
 						</Popover>)}
 				</Tooltip>
-				<Tooltip position="top" text="Hello">
-					{(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}
-				</Tooltip>
-			</View>
-		</Example.Item>
-	</Example>);
+			</Example.Item>
+
+			<Example.Item title="nested popovers inside a tooltip">
+				<View direction="row" gap={2}>
+					<Tooltip position="top" text="Hello">
+						{(tooltipAttributes) => (<Popover position="bottom" width="300px">
+								<Popover.Trigger>
+									{(attributes) => (<Button attributes={{ ...tooltipAttributes, ...attributes }}>
+											Tooltip with popover
+										</Button>)}
+								</Popover.Trigger>
+								<Popover.Content>
+									<View gap={2} align="center" direction="row" justify="space-between">
+										Popover content
+										<Popover position="bottom" width="300px">
+											<Popover.Trigger>
+												{(attributes) => <Button attributes={attributes}>Open</Button>}
+											</Popover.Trigger>
+											<Popover.Content>
+												<Popover.Dismissible align="center" closeAriaLabel="Close">
+													Another popover content
+												</Popover.Dismissible>
+											</Popover.Content>
+										</Popover>
+									</View>
+								</Popover.Content>
+							</Popover>)}
+					</Tooltip>
+					<Tooltip position="top" text="Hello">
+						{(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}
+					</Tooltip>
+				</View>
+			</Example.Item>
+		</Example>),
+};

package/dist/components/View/View.js

@@ -1,6 +1,6 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { isValidElement } from "react";
 import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";
@@ -100,13 +100,15 @@ const View = (props) => {
         return (_jsx("div", { className: dividerClassName, children: _jsx(Divider, { vertical: isDividerVertical, blank: true }) }, `${key}-divider`));
     };
     const renderItem = ({ className, child, index }) => {
-        const isItem = child.type === ViewItem;
-        const isView = child.type === View;
+        const isElement = isValidElement(child);
+        const isItem = isElement && child.type === ViewItem;
+        const isView = isElement && child.type === View;
         const key = child.key;
         const dividerElement = !!index && divided && renderDivider({ className, key });
         let itemElement;
         if (isItem) {
             itemElement = React.cloneElement(child, {
+                // @ts-expect-error -- child is guaranteed to be an element
                 className: classNames(className, child.props.className),
             });
         }
@@ -120,10 +122,13 @@ const View = (props) => {
             itemElement = (_jsx("div", { className: className, children: child }, key));
         }
         // Passing grow here because it's responsive and nowrap should follow it
+        // @ts-expect-error -- child is guaranteed to be an element
         if ((isItem || isView) && child.props?.grow) {
+            // @ts-expect-error -- child is guaranteed to be an element
             nowrap = child.props.grow;
             isFlex = true;
         }
+        // @ts-expect-error -- child is guaranteed to be an element
         if (isItem && child.props?.gap === "auto")
             nowrap = true;
         return (_jsxs(React.Fragment, { children: [dividerElement, itemElement] }, key ? `${key}-fragment` : undefined));
@@ -134,8 +139,10 @@ const View = (props) => {
         if (!child)
             return null;
         const usedIndex = renderedItemIndex;
+        // eslint-disable-next-line react-hooks/immutability
         renderedItemIndex += 1;
-        if (child.type === Hidden) {
+        if (isValidElement(child) && child.type === Hidden) {
+            // @ts-expect-error -- child is guaranteed to be an element
             const { children: hiddenChild, ...hiddenProps } = child.props;
             const key = child.key || index;
             return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: usedIndex })));

package/dist/components/View/View.types.d.ts

@@ -87,7 +87,7 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     /** z-index style */
     zIndex?: number;
     /** Shadow style, based on the shadow tokens */
-    shadow?: "raised" | "overlay" | "inset";
+    shadow?: "raised" | "overlay";
     /** Overflow style */
     overflow?: "hidden" | "auto";
     /** Add transition for the properties */

package/dist/components/View/tests/View.stories.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { type ViewProps } from "./..";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: {
@@ -137,3 +138,6 @@ export declare const testComposition: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const asProp: StoryObj;
+export declare const className: StoryObj;
+export declare const itemClassName: StoryObj;

package/dist/components/View/tests/View.stories.js

@@ -9,6 +9,7 @@ import MenuItem from "../../MenuItem/index.js";
 import Button from "../../Button/index.js";
 import IconPlus from "../../../icons/Plus.js";
 import useToggle from "../../../hooks/useToggle.js";
+import { expect } from "storybook/test";
 export default {
     title: "Utility components/View",
     component: View,
@@ -1288,3 +1289,41 @@ export const testComposition = {
 			</Example.Item>
 		</Example>),
 };
+export const asProp = {
+    name: "as",
+    render: () => (<View as="ul">
+			<View.Item as="li">Content</View.Item>
+		</View>),
+    play: async ({ canvas }) => {
+        const list = canvas.getByRole("list");
+        const item = canvas.getByRole("listitem");
+        expect(list).toBeInTheDocument();
+        expect(item).toBeInTheDocument();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<View className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</View>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const itemClassName = {
+    name: "item className, attributes",
+    render: () => (<div data-testid="root">
+			<View.Item className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</View.Item>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/_private/Expandable/Expandable.js

@@ -10,7 +10,9 @@ const Expandable = (props) => {
     const rootRef = React.useRef(null);
     const mountedRef = React.useRef(false);
     const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
-    const contentClassNames = classNames(s.root, mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
+    const contentClassNames = classNames(s.root, 
+    // eslint-disable-next-line react-hooks/refs
+    mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
     const handleTransitionEnd = (e) => {
         if (e.propertyName !== "height")
             return;

package/dist/components/_private/Portal/Portal.js

@@ -18,18 +18,20 @@ const Portal = (props) => {
     const { children, targetRef } = props;
     const mountedToggle = useToggle();
     const rootRef = React.useRef(null);
+    // eslint-disable-next-line react-hooks/refs
     const rootNode = rootRef.current?.getRootNode();
     const isShadowDom = rootNode instanceof ShadowRoot;
     const defaultTargetEl = isShadowDom ? rootNode : document.body;
     /**
      * Check for parent portal to render inside it
-     * To avoid z-iondex issues
+     * To avoid z-index issues
      * Example:
      * Dropdown rendered on the page should render under the modal
      * Dropdown inside the modal should render above it
      */
     const portal = usePortalScope();
     const nextScopeRef = targetRef || portal.scopeRef;
+    // eslint-disable-next-line react-hooks/refs
     const targetEl = nextScopeRef?.current || defaultTargetEl;
     useIsomorphicLayoutEffect(() => {
         mountedToggle.activate();
@@ -37,6 +39,7 @@ const Portal = (props) => {
     }, []);
     /* Preserve the current theme when rendered in body */
     return [
+        // eslint-disable-next-line react-hooks/refs
         ReactDOM.createPortal(_jsx(Theme, { children: children }), targetEl),
         // Make sure this element doesn't affect components using :last-child when their children use portals
         !mountedToggle.active && _jsx("div", { ref: rootRef, className: s.root }, "root"),

package/dist/hooks/_private/useIsDismissible.d.ts

@@ -8,5 +8,6 @@ declare const useIsDismissible: (args: {
     active?: boolean;
     contentRef: Ref;
     triggerRef?: Ref;
+    hasTrigger?: boolean;
 }) => () => boolean;
 export default useIsDismissible;

package/dist/hooks/_private/useIsDismissible.js

@@ -4,7 +4,6 @@
  */
 import React from "react";
 import useElementId from "../useElementId.js";
-import { onNextFrame } from "../../utilities/animation.js";
 let queue = {};
 let latestId = null;
 const removeFromQueue = (id) => {
@@ -23,12 +22,12 @@ const addToQueue = (id, contentRef, triggerRef) => {
     latestId = id;
 };
 const useIsDismissible = (args) => {
-    const { active, contentRef, triggerRef } = args;
+    const { active, contentRef, triggerRef, hasTrigger = true } = args;
     const id = useElementId();
     React.useEffect(() => {
         if (!active)
             return;
-        onNextFrame(() => addToQueue(id, contentRef, triggerRef));
+        addToQueue(id, contentRef, triggerRef);
         return () => removeFromQueue(id);
     }, [active, id, contentRef, triggerRef]);
     return React.useCallback(() => {
@@ -38,10 +37,11 @@ const useIsDismissible = (args) => {
         const latestTrigger = latest?.triggerRef?.current;
         const prev = latest?.parentId ? queue[latest.parentId] : undefined;
         const prevContent = prev?.contentRef.current;
+        const nested = prevContent && latestTrigger && prevContent.contains(latestTrigger);
         // Don't block independently rendered components that are not nested in each other
-        if (!prevContent || !latestTrigger || !prevContent.contains(latestTrigger))
+        if (hasTrigger && !nested)
             return true;
-        return latestId === id;
-    }, [id, active]);
+        return !latestId || latestId === id;
+    }, [id, active, hasTrigger]);
 };
 export default useIsDismissible;

package/dist/hooks/_private/usePrevious.js

@@ -12,6 +12,7 @@ const usePrevious = (value, clean = false) => {
     React.useEffect(() => {
         ref.current = clean ? copy(value) : value;
     }, [value, clean]);
+    // eslint-disable-next-line react-hooks/refs
     return ref.current;
 };
 export default usePrevious;

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

@@ -5,7 +5,7 @@ import useDrag from "../_private/useDrag.js";
 import useToggle from "../useToggle.js";
 import Button from "../../components/Button/index.js";
 export default {
-    title: "Internal/Hooks/useDrag",
+    title: "Internal/useDrag",
     parameters: {
         chromatic: { disableSnapshot: true },
     },

package/dist/{components/Toast/tests/Toast.test.stories.d.ts → hooks/tests/useKeyboardArrowNavigation.stories.d.ts}

@@ -2,9 +2,6 @@ import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     parameters: {
-        iframe: {
-            url: string;
-        };
         chromatic: {
             disableSnapshot: boolean;
         };
@@ -12,5 +9,7 @@ declare const _default: {
 };
 export default _default;
 export declare const base: StoryObj;
-export declare const nested: StoryObj;
-export declare const className: StoryObj;
+export declare const horizontal: StoryObj;
+export declare const vertical: StoryObj;
+export declare const circular: StoryObj;
+export declare const disabled: StoryObj;

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");
+    },
+};