reshaped 3.3.11 → 3.3.12

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

@@ -0,0 +1,99 @@
+import { expect, fn, userEvent } from "@storybook/test";
+import TextArea from "../index.js";
+export default {
+    title: "Components/TextArea/tests",
+    component: TextArea,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/text-area",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "base",
+    render: () => <TextArea name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).toHaveAccessibleName("Label");
+    },
+};
+export const placeholder = {
+    name: "placeholder",
+    render: () => (<TextArea name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("");
+        expect(input).toHaveAttribute("placeholder", "Placeholder");
+    },
+};
+export const id = {
+    name: "id",
+    render: () => (<TextArea name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveAttribute("id", "test-id");
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => <TextArea name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toBeDisabled();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<TextArea name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("value");
+        input.focus();
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2value",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("2value");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<TextArea name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("value");
+        input.focus();
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2value",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("value");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<TextArea className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.getByRole("textbox");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};

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

@@ -113,7 +113,7 @@ export const slots = () => (<Example>
 			<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={20}/>}/>
 		</Example.Item>
 		<Example.Item title={["endSlot", "vertical and horizontal padding aligned"]}>
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Button icon={IconZap} size="small" onClick={() => { }}/>}/>
+			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Button icon={IconZap} size="small" onClick={() => { }} attributes={{ "aria-label": "Action" }}/>}/>
 		</Example.Item>
 		<Example.Item title="multiline wrap">
 			<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={[...Array(10).keys()].map((i) => (<Badge key={i}>Item {i + 1}</Badge>))} multiline/>

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

@@ -0,0 +1,29 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").TextFieldProps): import("react").JSX.Element;
+        Aligner: (props: import("../../_private/Aligner").AlignerProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const render: StoryObj;
+export declare const placeholder: StoryObj;
+export declare const id: StoryObj;
+export declare const disabled: 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/TextField/tests/TextField.test.stories.js

@@ -0,0 +1,99 @@
+import { expect, fn, userEvent } from "@storybook/test";
+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 },
+    },
+};
+export const render = {
+    name: "base",
+    render: () => <TextField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).toHaveAccessibleName("Label");
+    },
+};
+export const placeholder = {
+    name: "placeholder",
+    render: () => (<TextField name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("");
+        expect(input).toHaveAttribute("placeholder", "Placeholder");
+    },
+};
+export const id = {
+    name: "id",
+    render: () => (<TextField name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveAttribute("id", "test-id");
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => <TextField name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toBeDisabled();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<TextField name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("value");
+        input.focus();
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "value2",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("value2");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<TextField name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("value");
+        input.focus();
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "value2",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("value");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<TextField className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.getByRole("textbox");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};

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

@@ -0,0 +1,24 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").ThemeProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const light: StoryObj;
+export declare const dark: StoryObj;
+export declare const inherited: StoryObj;
+export declare const inverted: StoryObj;
+export declare const controlled: StoryObj;
+export declare const uncontrolled: StoryObj;
+export declare const disabledTransition: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

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

@@ -0,0 +1,133 @@
+import { expect, userEvent } from "@storybook/test";
+import Card from "../../Card/index.js";
+import Button from "../../Button/index.js";
+import View from "../../View/index.js";
+import MenuItem from "../../MenuItem/index.js";
+import Theme, { useTheme } from "../index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
+    title: "Utilities/Theme/tests",
+    component: Theme,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/theme",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const light = {
+    name: "light",
+    render: () => (<Theme name="reshaped" colorMode="light">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("test-id").parentNode;
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "light");
+    },
+};
+export const dark = {
+    name: "dark",
+    render: () => (<Theme name="reshaped" colorMode="dark">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("test-id").parentNode;
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+    },
+};
+export const inherited = {
+    name: "inherited",
+    render: () => (<Theme name="reshaped">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("test-id").parentNode;
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        // Our storybook setup uses dark by default
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+    },
+};
+export const inverted = {
+    name: "inverted",
+    render: () => (<Theme name="reshaped" colorMode="inverted">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("test-id").parentNode;
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "light");
+    },
+};
+export const controlled = {
+    name: "controlled",
+    render: () => {
+        const Internal = () => {
+            const { setTheme, theme } = useTheme();
+            return (<Button color="primary" onClick={() => setTheme("slate")}>
+					Switch to slate
+				</Button>);
+        };
+        return (<div data-testid="root">
+				<Theme name="reshaped">
+					<Internal />
+				</Theme>
+			</div>);
+    },
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const trigger = canvas.getAllByRole("button")[0];
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+        await userEvent.click(trigger);
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+    },
+};
+export const uncontrolled = {
+    name: "uncontrolled",
+    render: () => {
+        const Internal = () => {
+            const { setTheme } = useTheme();
+            return (<Button color="primary" onClick={() => setTheme("slate")}>
+					Switch to slate
+				</Button>);
+        };
+        return (<div data-testid="root">
+				<Theme defaultName="reshaped">
+					<Internal />
+				</Theme>
+			</div>);
+    },
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const trigger = canvas.getAllByRole("button")[0];
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+        await userEvent.click(trigger);
+        expect(root).toHaveAttribute("data-rs-theme", "slate");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+    },
+};
+export const disabledTransition = {
+    name: "disabled transitions",
+    render: () => {
+        const { invertColorMode } = useTheme();
+        return (<Example>
+				<Example.Item title="should have no transitions while switching color mode">
+					<View gap={3}>
+						<Button onClick={invertColorMode}>Invert mode</Button>
+
+						<MenuItem selected>Test transition</MenuItem>
+
+						<Card>Default card</Card>
+
+						<Theme colorMode="inverted">
+							<Card>Inverted card</Card>
+						</Theme>
+					</View>
+				</Example.Item>
+			</Example>);
+    },
+};

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

@@ -0,0 +1,18 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").TimelineProps): import("react").JSX.Element;
+        Item: (props: import("./..").TimelineItemProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const className: StoryObj;

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

@@ -0,0 +1,32 @@
+import { expect } from "@storybook/test";
+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 },
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Timeline className="test-classname" attributes={{ id: "test-id" }}>
+				<Timeline.Item className="test-item-classname" attributes={{ id: "test-item-id" }}>
+					Content
+				</Timeline.Item>
+				<Timeline.Item>Content</Timeline.Item>
+			</Timeline>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const items = canvas.getAllByRole("listitem");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(items).toHaveLength(2);
+        expect(items[0]).toHaveClass("test-item-classname");
+        expect(items[0]).toHaveAttribute("id", "test-item-id");
+    },
+};

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

@@ -0,0 +1,16 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const base: StoryObj;
+export declare const nested: StoryObj;
+export declare const className: StoryObj;

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

@@ -0,0 +1,101 @@
+import { expect, within, userEvent, waitFor } from "@storybook/test";
+import { useToast, ToastProvider } from "../index.js";
+import Button from "../../Button/index.js";
+export default {
+    title: "Components/Toast/tests",
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/toast",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    render: () => {
+        const toast = useToast();
+        return (<Button onClick={() => {
+                const id = toast.show({
+                    title: "Title",
+                    text: "Text",
+                    children: "Children",
+                    startSlot: "Slot",
+                    actionsSlot: (<Button attributes={{ "data-testid": "trigger-id" }} onClick={() => toast.hide(id)}>
+								Trigger
+							</Button>),
+                });
+            }}>
+				Show toast
+			</Button>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const title = canvas.getByText("Title");
+        const text = canvas.getByText("Text");
+        const children = canvas.getByText("Children");
+        const slot = canvas.getByText("Slot");
+        const action = canvas.getByTestId("trigger-id");
+        expect(title).toBeInTheDocument();
+        expect(text).toBeInTheDocument();
+        expect(children).toBeInTheDocument();
+        expect(slot).toBeInTheDocument();
+        expect(action).toBeInTheDocument();
+        await userEvent.click(action);
+        await waitFor(() => {
+            expect(title).not.toBeInTheDocument();
+        });
+    },
+};
+const NestedDemo = () => {
+    const toast = useToast();
+    return (<Button onClick={() => {
+            toast.show({
+                text: "Content",
+            });
+        }}>
+			Show toast
+		</Button>);
+};
+export const nested = {
+    name: "ToastProvider",
+    render: () => {
+        return (<div data-testid="test-container-id">
+				<ToastProvider>
+					<NestedDemo />
+				</ToastProvider>
+			</div>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const container = canvas.getByTestId("test-container-id");
+        const toast = within(container).getByText("Content");
+        expect(toast).toBeInTheDocument();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => {
+        const toast = useToast();
+        return (<Button onClick={() => {
+                const id = toast.show({
+                    text: "Content",
+                    attributes: { "data-testid": "test-id" },
+                    className: "test-classname",
+                });
+            }}>
+				Show toast
+			</Button>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const toast = canvas.getByTestId("test-id");
+        expect(toast).toBeInTheDocument();
+        expect(toast).toHaveClass("test-classname");
+    },
+};

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

@@ -4,7 +4,6 @@ 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 Actionable from "../../Actionable/index.js";
 export default {
     title: "Components/Tooltip",
     component: Tooltip,
@@ -109,19 +108,6 @@ export const edgeCases = () => (<Example>
 			</Tooltip>
 		</Example.Item>
 
-		<Example.Item title="tooltip with popover on different elements">
-			<Tooltip text="Tooltip" position="top">
-				{(attributes) => (<Actionable attributes={attributes} as="span">
-						<Popover position="bottom">
-							<Popover.Trigger>
-								{(popoverAttributes) => (<Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>)}
-							</Popover.Trigger>
-							<Popover.Content>Popover</Popover.Content>
-						</Popover>
-					</Actionable>)}
-			</Tooltip>
-		</Example.Item>
-
 		<Example.Item title="nested popovers inside a tooltip">
 			<View direction="row" gap={2}>
 				<Tooltip position="top" text="Hello">

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

@@ -0,0 +1,19 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").TooltipProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const defaultActive: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;

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

@@ -0,0 +1,40 @@
+import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
+import Tooltip from "../index.js";
+import Button from "../../Button/index.js";
+export default {
+    title: "Components/Tooltip/tests",
+    component: Tooltip,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/tooltip",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+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();
+        });
+    },
+};

package/dist/components/View/View.js

@@ -135,9 +135,8 @@ const View = (props) => {
             return child.props.children.map((child) => {
                 if (!child)
                     return null;
-                const index = usedIndex;
                 renderedItemIndex += 1;
-                return renderItem({ child, index });
+                return renderItem({ child, index: renderedItemIndex });
             });
         }
         return renderItem({ child, index: usedIndex });