reshaped 3.3.10 → 3.3.12

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

@@ -0,0 +1,93 @@
+import { expect } from "@storybook/test";
+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 },
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => (<Table>
+			<Table.Head>
+				<Table.Row>
+					<Table.Heading>Heading</Table.Heading>
+					<Table.Heading>Heading</Table.Heading>
+				</Table.Row>
+			</Table.Head>
+			<Table.Body>
+				<Table.Row>
+					<Table.Cell>Content</Table.Cell>
+					<Table.Cell>Content</Table.Cell>
+				</Table.Row>
+			</Table.Body>
+		</Table>),
+    play: async ({ canvas }) => {
+        const body = canvas.getAllByRole("rowgroup");
+        const rows = canvas.getAllByRole("row");
+        const headings = canvas.getAllByRole("columnheader");
+        const cells = canvas.getAllByRole("cell");
+        expect(body).toHaveLength(2);
+        expect(rows).toHaveLength(2);
+        expect(headings).toHaveLength(2);
+        expect(cells).toHaveLength(2);
+        expect(canvas.getAllByText("Heading")).toHaveLength(2);
+        expect(canvas.getAllByText("Content")).toHaveLength(2);
+    },
+};
+export const tbody = {
+    name: "tbody rendering",
+    render: () => (<Table>
+			<Table.Row>
+				<Table.Heading>Heading</Table.Heading>
+				<Table.Heading>Heading</Table.Heading>
+			</Table.Row>
+		</Table>),
+    play: async ({ canvas }) => {
+        const body = canvas.getByRole("rowgroup");
+        expect(body).toBeInTheDocument();
+    },
+};
+export const tabIndex = {
+    name: "adds tabIndex for clickable rows",
+    render: () => (<Table>
+			<Table.Row>
+				<Table.Cell />
+			</Table.Row>
+			<Table.Row onClick={() => { }}>
+				<Table.Cell />
+			</Table.Row>
+			<Table.Row attributes={{ onClick: () => { } }}>
+				<Table.Cell />
+			</Table.Row>
+		</Table>),
+    play: async ({ canvas }) => {
+        const elRows = canvas.getAllByRole("row");
+        expect(elRows[0]).not.toHaveAttribute("tabIndex");
+        expect(elRows[1]).toHaveAttribute("tabIndex", "0");
+        expect(elRows[2]).toHaveAttribute("tabIndex", "0");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Table className="test-classname" attributes={{ id: "test-id" }}>
+				<Table.Row attributes={{ id: "test-row-id" }}>
+					<Table.Cell attributes={{ id: "test-cell-id" }}></Table.Cell>
+				</Table.Row>
+			</Table>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const row = canvas.getByRole("row");
+        const cell = canvas.getByRole("cell");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(row).toHaveAttribute("id", "test-row-id");
+        expect(cell).toHaveAttribute("id", "test-cell-id");
+    },
+};

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

@@ -55,9 +55,9 @@ export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "na
     value?: string;
     setDefaultValue: (value: string) => void;
     id: string;
-    elActiveRef: React.MutableRefObject<HTMLDivElement | null>;
-    elPrevActiveRef: React.MutableRefObject<HTMLDivElement | null>;
-    elScrollableRef: React.MutableRefObject<HTMLDivElement | null>;
+    elActiveRef: React.RefObject<HTMLDivElement | null>;
+    elPrevActiveRef: React.RefObject<HTMLDivElement | null>;
+    elScrollableRef: React.RefObject<HTMLDivElement | null>;
     selection: SelectionState;
     setSelection: React.Dispatch<React.SetStateAction<SelectionState>>;
 };

package/dist/components/Tabs/TabsContext.d.ts

@@ -15,9 +15,9 @@ export declare const useTabs: (value?: string) => {
     size: NonNullable<T.BaseProps["size"]>;
     value?: string;
     setDefaultValue: (value: string) => void;
-    elActiveRef: React.MutableRefObject<HTMLDivElement | null>;
-    elPrevActiveRef: React.MutableRefObject<HTMLDivElement | null>;
-    elScrollableRef: React.MutableRefObject<HTMLDivElement | null>;
+    elActiveRef: React.RefObject<HTMLDivElement | null>;
+    elPrevActiveRef: React.RefObject<HTMLDivElement | null>;
+    elScrollableRef: React.RefObject<HTMLDivElement | null>;
     selection: T.SelectionState;
     setSelection: React.Dispatch<React.SetStateAction<T.SelectionState>>;
 };

package/dist/components/Tabs/TabsItem.js

@@ -42,7 +42,7 @@ const TabsItem = (props, ref) => {
             return;
         // Big enough value to show there are more items and not overlap arrow controls
         const visibilityThreshold = 48;
-        const elItem = findParent(itemRef.current, (el) => el.hasAttribute("data-rs-tabs-item"));
+        const elItem = itemRef.current && findParent(itemRef.current, (el) => el.hasAttribute("data-rs-tabs-item"));
         if (!elItem)
             return;
         const elScrollable = elScrollableRef.current;

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

@@ -302,7 +302,7 @@ export const edgeCaseDom = () => {
 									<Text>Section 1</Text>
 
 									<View gap={1} direction="row">
-										{[...Array(4)].map((i) => (<View grow height="100px" backgroundColor="neutral-faded" key={i}/>))}
+										{[...Array(4)].map((_, i) => (<View grow height="100px" backgroundColor="neutral-faded" key={i}/>))}
 									</View>
 								</View>
 
@@ -310,7 +310,7 @@ export const edgeCaseDom = () => {
 									<Text>Section 2</Text>
 
 									<View gap={1} direction="row">
-										{[...Array(4)].map((i) => (<View grow height="100px" backgroundColor="neutral-faded"/>))}
+										{[...Array(4)].map((_, i) => (<View key={i} grow height="100px" backgroundColor="neutral-faded"/>))}
 									</View>
 								</View>
 
@@ -318,7 +318,7 @@ export const edgeCaseDom = () => {
 									<Text>Section 3</Text>
 
 									<View gap={1} direction="row">
-										{[...Array(4)].map((i) => (<View grow height="100px" backgroundColor="neutral-faded"/>))}
+										{[...Array(4)].map((_, i) => (<View key={i} grow height="100px" backgroundColor="neutral-faded"/>))}
 									</View>
 								</View>
 
@@ -326,7 +326,7 @@ export const edgeCaseDom = () => {
 									<Text>Section 4</Text>
 
 									<View gap={1} direction="row">
-										{[...Array(4)].map((i) => (<View grow height="100px" backgroundColor="neutral-faded"/>))}
+										{[...Array(4)].map((_, i) => (<View key={i} grow height="100px" backgroundColor="neutral-faded"/>))}
 									</View>
 								</View>
 							</View>

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

@@ -0,0 +1,28 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").TabsProps): import("react").JSX.Element;
+        Item: import("react").ForwardRefExoticComponent<import("./..").TabsItemProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+        List: (props: import("../Tabs.types").ListProps) => import("react").JSX.Element;
+        Panel: (props: import("../Tabs.types").PanelProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const base: StoryObj;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -0,0 +1,128 @@
+import { expect, within, userEvent, waitFor, fn } from "@storybook/test";
+import Tabs from "../index.js";
+export default {
+    title: "Components/Tabs/tests",
+    component: Tabs,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/tabs",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    render: () => (<Tabs>
+			<Tabs.List>
+				<Tabs.Item value="1">Item 1</Tabs.Item>
+				<Tabs.Item value="2">Item 2</Tabs.Item>
+			</Tabs.List>
+
+			<Tabs.Panel value="1">Content 1</Tabs.Panel>
+			<Tabs.Panel value="2">Content 2</Tabs.Panel>
+		</Tabs>),
+    play: async ({ canvas }) => {
+        const list = canvas.getByRole("tablist");
+        const items = canvas.getAllByRole("tab");
+        const panels = canvas.getAllByRole("tabpanel", { hidden: true });
+        expect(list).toBeInTheDocument();
+        expect(items).toHaveLength(2);
+        expect(panels).toHaveLength(2);
+        expect(panels[0]).toBeVisible();
+        expect(panels[1]).not.toBeVisible();
+        const selectedItem = items[0];
+        const selectedPanel = panels[0];
+        expect(selectedItem).toHaveAttribute("aria-selected", "true");
+        expect(selectedItem.getAttribute("aria-controls")).toBe(selectedPanel.getAttribute("id"));
+        const unselectedItem = items[1];
+        const unselectedPanel = panels[1];
+        expect(unselectedItem).toHaveAttribute("aria-selected", "false");
+        expect(unselectedItem.getAttribute("aria-controls")).toBe(unselectedPanel.getAttribute("id"));
+        await userEvent.tab();
+        expect(document.activeElement).toBe(items[0]);
+        await userEvent.tab();
+        waitFor(() => {
+            expect(document.activeElement).toBe(panels[0]);
+        });
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Tabs defaultValue="2" onChange={args.handleChange}>
+			<Tabs.List>
+				<Tabs.Item value="1">Item 1</Tabs.Item>
+				<Tabs.Item value="2">Item 2</Tabs.Item>
+			</Tabs.List>
+
+			<Tabs.Panel value="1">Content 1</Tabs.Panel>
+			<Tabs.Panel value="2">Content 2</Tabs.Panel>
+		</Tabs>),
+    play: async ({ canvas, args }) => {
+        const items = canvas.getAllByRole("tab");
+        expect(items[1]).toHaveAttribute("aria-selected", "true");
+        expect(items[1]).toHaveAttribute("tabindex", "0");
+        expect(items[0]).toHaveAttribute("tabindex", "-1");
+        await userEvent.click(items[0]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ value: "1" });
+        expect(document.activeElement).toBe(items[0]);
+        expect(items[0]).toHaveAttribute("aria-selected", "true");
+        expect(items[0]).toHaveAttribute("tabindex", "0");
+        expect(items[1]).toHaveAttribute("tabindex", "-1");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Tabs value="2" onChange={args.handleChange}>
+			<Tabs.List>
+				<Tabs.Item value="1">Item 1</Tabs.Item>
+				<Tabs.Item value="2">Item 2</Tabs.Item>
+			</Tabs.List>
+
+			<Tabs.Panel value="1">Content 1</Tabs.Panel>
+			<Tabs.Panel value="2">Content 2</Tabs.Panel>
+		</Tabs>),
+    play: async ({ canvas, args }) => {
+        const items = canvas.getAllByRole("tab");
+        expect(items[1]).toHaveAttribute("aria-selected", "true");
+        expect(items[1]).toHaveAttribute("tabindex", "0");
+        expect(items[0]).toHaveAttribute("tabindex", "-1");
+        await userEvent.click(items[0]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ value: "1" });
+        expect(document.activeElement).toBe(items[0]);
+        expect(items[1]).toHaveAttribute("aria-selected", "true");
+        expect(items[1]).toHaveAttribute("tabindex", "0");
+        expect(items[0]).toHaveAttribute("tabindex", "-1");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Tabs>
+				<Tabs.List attributes={{ id: "test-list-id" }} className="test-list-classname">
+					<Tabs.Item attributes={{ id: "test-item-id" }} value="1">
+						Item
+					</Tabs.Item>
+				</Tabs.List>
+
+				<Tabs.Panel attributes={{ "data-testid": "test-panel-id" }} className="test-panel-classname" value="1"/>
+			</Tabs>
+		</div>),
+    play: async ({ canvas }) => {
+        const list = canvas.getByTestId("root").firstChild;
+        const item = within(list).getByRole("presentation");
+        const panel = canvas.getByRole("tabpanel");
+        expect(list).toHaveClass("test-list-classname");
+        expect(list).toHaveAttribute("id", "test-list-id");
+        expect(item).toHaveAttribute("id", "test-item-id");
+        expect(panel).toHaveClass("test-panel-classname");
+        expect(panel).toHaveAttribute("data-testid", "test-panel-id");
+    },
+};

package/dist/components/Text/Text.d.ts

@@ -1,3 +1,3 @@
 import type * as T from "./Text.types";
-declare const Text: <As extends keyof JSX.IntrinsicElements>(props: T.Props<As>) => import("react/jsx-runtime").JSX.Element;
+declare const Text: <As extends keyof React.JSX.IntrinsicElements>(props: T.Props<As>) => import("react/jsx-runtime").JSX.Element;
 export default Text;

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

@@ -1,7 +1,7 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Variant = "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "featured-1" | "featured-2" | "featured-3" | "body-1" | "body-2" | "body-3" | "caption-1" | "caption-2";
-export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     variant?: G.Responsive<Variant>;
     weight?: G.Responsive<"regular" | "medium" | "bold">;
     color?: "neutral" | "neutral-faded" | "critical" | "warning" | "positive" | "primary" | "disabled";

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: <As extends keyof JSX.IntrinsicElements>(props: import("./..").TextProps<As>) => import("react").JSX.Element;
+    component: <As extends keyof React.JSX.IntrinsicElements>(props: import("./..").TextProps<As>) => import("react").JSX.Element;
     parameters: {
         iframe: {
             url: string;
@@ -8,10 +8,31 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const variant: () => import("react").JSX.Element;
-export declare const weight: () => import("react").JSX.Element;
-export declare const color: () => import("react").JSX.Element;
-export declare const decoration: () => import("react").JSX.Element;
-export declare const wrap: () => import("react").JSX.Element;
-export declare const maxLines: () => import("react").JSX.Element;
-export declare const align: () => import("react").JSX.Element;
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const weight: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const color: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const decoration: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const wrap: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const maxLines: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const align: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};