reshaped 3.7.0-canary.1 → 3.7.0-canary.3

package/dist/components/View/View.js

@@ -96,7 +96,7 @@ const View = (props) => {
     const renderItem = ({ className, child, index }) => {
         const isItem = child.type === ViewItem;
         const isView = child.type === View;
-        const key = child.key || index;
+        const key = child.key;
         const dividerElement = !!index && divided && renderDivider({ className, key });
         let itemElement;
         if (isItem) {
@@ -120,7 +120,7 @@ const View = (props) => {
         }
         if (isItem && child.props?.gap === "auto")
             nowrap = true;
-        return (_jsxs(React.Fragment, { children: [dividerElement, itemElement] }, `${key}-fragment`));
+        return (_jsxs(React.Fragment, { children: [dividerElement, itemElement] }, key ? `${key}-fragment` : undefined));
     };
     // Using any in favor of resolving the props in runtime where we don't know their props definitions
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -121,6 +121,10 @@ export declare const hiddenItem: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const keys: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const nestedGaps: {
     name: string;
     render: () => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Placeholder, Example } from "../../../utilities/storybook/index.js";
 import View from "../index.js";
 import Hidden from "../../Hidden/index.js";
@@ -8,6 +8,7 @@ import Avatar from "../../Avatar/index.js";
 import MenuItem from "../../MenuItem/index.js";
 import Button from "../../Button/index.js";
 import IconPlus from "../../../icons/Plus.js";
+import useToggle from "../../../hooks/useToggle.js";
 export default {
     title: "Utility components/View",
     component: View,
@@ -1067,6 +1068,28 @@ export const hiddenItem = {
 			</Example.Item>
 		</Example>),
 };
+const KeyItem = (props) => {
+    const [timer, setTimer] = useState(0);
+    useEffect(() => {
+        const t = setInterval(() => setTimer((t) => t + 1), 500);
+        return () => clearInterval(t);
+    }, []);
+    return (<div>
+			{props.children}, timer: {timer}
+		</div>);
+};
+export const keys = {
+    name: "item, key",
+    render: () => {
+        const toggle = useToggle();
+        return (<View gap={2}>
+				<Button onClick={() => toggle.toggle()}>Toggle</Button>
+				<View.Item>Item 1</View.Item>
+				{toggle.active && <KeyItem>Item 2</KeyItem>}
+				<KeyItem>Item 3</KeyItem>
+			</View>);
+    },
+};
 export const nestedGaps = {
     name: "composition, nested gap",
     render: () => (<Example>

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.7.0-canary.1",
+	"version": "3.7.0-canary.3",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",

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

@@ -1,27 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").TabsProps> & {
-        Item: import("react").ForwardRefExoticComponent<import("./..").TabsItemProps & import("react").RefAttributes<import("../../Actionable").ActionableRef>>;
-        List: import("react").FC<import("../Tabs.types").ListProps>;
-        Panel: import("react").FC<import("../Tabs.types").PanelProps>;
-    };
-    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

@@ -1,128 +0,0 @@
-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");
-    },
-};