@nulogy/components 16.0.2 → 16.0.3

package/dist/src/Switcher/Switcher.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
 import { Box } from "../Box";
 import { Text } from "../Type";
 import { Button } from "../Button";
@@ -10,7 +11,18 @@ export const WithSelectedValue = () => {
     const [selected, setSelected] = useState("option_2");
     return (_jsxs(Switcher, { "aria-label": "storybook-switcher", selected: selected, onChange: setSelected, children: [_jsx(Switch, { value: "option_1", children: "Option 1" }), _jsx(Switch, { value: "option_2", children: "Option 2" })] }));
 };
-export const WithOtherInteractiveElements = () => (_jsxs(Flex, { gap: "x1", alignItems: "center", children: [_jsx(Button, { children: "Click me" }), _jsxs(Switcher, { "aria-label": "storybook-switcher", selected: "option_2", children: [_jsx(Switch, { value: "option_1", children: "Option 1" }), _jsx(Switch, { value: "option_2", children: "Option 2" })] })] }));
+export const WithOtherInteractiveElements = {
+    render: () => (_jsxs(Flex, { gap: "x1", alignItems: "center", children: [_jsx(Button, { children: "Click me" }), _jsxs(Switcher, { "aria-label": "storybook-switcher", selected: "option_2", children: [_jsx(Switch, { value: "option_1", children: "Option 1" }), _jsx(Switch, { value: "option_2", children: "Option 2" })] })] })),
+    name: "with other interactive elements",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("focuses the selected switch when tabbing from another element", async () => {
+            canvas.getByText("Click me").focus();
+            await userEvent.tab();
+            await expect(document.activeElement).toHaveTextContent("Option 2");
+        });
+    },
+};
 export const WithContent = () => {
     const [selected, setSelected] = useState("all");
     return (_jsxs(_Fragment, { children: [_jsxs(Switcher, { "aria-label": "storybook-switcher", selected: selected, onChange: setSelected, children: [_jsx(Switch, { value: "all", children: "All" }), _jsx(Switch, { value: "option_1", children: "Option 1" }), _jsx(Switch, { value: "option_2", children: "Option 2" })] }), _jsxs(Box, { px: "x1", py: "x3", children: [["all", "option_1"].includes(selected) && _jsx(Text, { children: "Option 1 Content" }), ["all", "option_2"].includes(selected) && _jsx(Text, { children: "Option 2 Content" })] })] }));

package/dist/src/Table/stories/BaseTable.story.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import { Table } from "..";
 declare const _default: {
     title: string;

package/dist/src/Table/stories/BaseTable.story.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Box, DropdownButton, DropdownMenu, Button, Text, Flex } from "../..";
 import { getMockRows, mockColumns } from "../Table.mock-utils";
 import { Table } from "..";

package/dist/src/Table/stories/CustomContent.story.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Input } from "../../Input";
 import { Table } from "..";
 import { Box } from "../../Box";

package/dist/src/Table/stories/Density.story.d.ts

@@ -3,14 +3,10 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Compact: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Table/stories/Density.story.js

@@ -58,11 +58,11 @@ const rowData = [
 export default {
     title: "Components/Table/Density",
 };
-export const Default = () => _jsx(Table, { columns: columns, rows: rowData });
-Default.story = {
+export const Default = {
+    render: () => _jsx(Table, { columns: columns, rows: rowData }),
     name: "Default",
 };
-export const Compact = () => _jsx(Table, { columns: columns, rows: rowData, compact: true });
-Compact.story = {
+export const Compact = {
+    render: () => _jsx(Table, { columns: columns, rows: rowData, compact: true }),
     name: "Compact",
 };

package/dist/src/Table/stories/SortingColumnHeader.story.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import { Table } from "../../index";
 declare const _default: {
     title: string;

package/dist/src/Table/stories/SortingColumnHeader.story.js

@@ -1,4 +1,4 @@
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Table } from "../../index";
 export default {
     title: "Components/Table/Headers",

package/dist/src/Table/stories/Table.story.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import { Table } from "..";
 declare const _default: {
     title: string;

package/dist/src/Table/stories/Table.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { action } from "storybook/actions";
 import { useState } from "react";
 import { Box, DropdownButton, DropdownMenu, Text } from "../..";
 import { Table } from "..";
@@ -176,6 +177,21 @@ export const WithPagination = {
         },
     },
     name: "with pagination",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("navigates to next page", async () => {
+            await userEvent.click(canvas.getByLabelText("Go to next results"));
+            await expect(canvas.getByTestId("table-body")).toHaveTextContent("2019-10-02");
+        });
+        await step("navigates to previous page", async () => {
+            await userEvent.click(canvas.getByLabelText("Go to previous results"));
+            await expect(canvas.getByTestId("table-body")).toHaveTextContent("2019-10-01");
+        });
+        await step("navigates to a specific page", async () => {
+            await userEvent.click(canvas.getByRole("button", { name: "Go to page 5" }));
+            await expect(canvas.getByTestId("table-body")).toHaveTextContent("2019-10-07");
+        });
+    },
 };
 export const WithEverything = {
     args: {
@@ -204,6 +220,26 @@ export const WithEverything = {
         },
     },
     name: "with everything",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("can expand a row", async () => {
+            await userEvent.click(canvas.getByLabelText("Expand row"));
+            await expect(canvas.getByTestId("table-body")).toHaveTextContent("Expands!");
+        });
+        await step("can collapse the expanded row", async () => {
+            await userEvent.click(canvas.getByLabelText("Collapse row"));
+            await waitFor(() => expect(canvas.getByTestId("table-body")).not.toHaveTextContent("Expands!"));
+        });
+        await step("saves row selections when navigating pages", async () => {
+            const tableHead = canvasElement.querySelector("[data-testid='table-head']");
+            await userEvent.click(within(tableHead).getByTestId("visual-checkbox"));
+            const headerInput = canvasElement.querySelector("[data-testid='table-head'] [type='checkbox']");
+            await expect(headerInput).toBeChecked();
+            await userEvent.click(canvas.getByLabelText("Go to next results"));
+            await userEvent.click(canvas.getByLabelText("Go to previous results"));
+            await expect(headerInput).toBeChecked();
+        });
+    },
 };
 export const WithOnHoverActions = {
     render: (args) => {

package/dist/src/Table/stories/TableWithCustomSorting.story.d.ts

@@ -3,8 +3,6 @@ declare const _default: {
 };
 export default _default;
 export declare const WithCustomSorting: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Table/stories/TableWithCustomSorting.story.js

@@ -58,7 +58,7 @@ const TableWithCustomSorting = () => {
 export default {
     title: "Components/Table/with custom sorting",
 };
-export const WithCustomSorting = () => _jsx(TableWithCustomSorting, {});
-WithCustomSorting.story = {
+export const WithCustomSorting = {
+    render: () => _jsx(TableWithCustomSorting, {}),
     name: "with custom sorting",
 };

package/dist/src/Table/stories/TableWithExpandableRows.story.d.ts

@@ -3,14 +3,10 @@ declare const _default: {
 };
 export default _default;
 export declare const WithExpandableRows: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithRowsExpandedByDefault: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Table/stories/TableWithExpandableRows.story.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Table } from "..";
 import { Box, Text } from "../..";
 const columns = [
@@ -64,11 +64,11 @@ const rowDataWithExpandable = [
 export default {
     title: "Components/Table/with expandable rows",
 };
-export const WithExpandableRows = () => (_jsx(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, onRowExpansionChange: action("toggled expand") }));
-WithExpandableRows.story = {
+export const WithExpandableRows = {
+    render: () => (_jsx(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, onRowExpansionChange: action("toggled expand") })),
     name: "with expandable rows",
 };
-export const WithRowsExpandedByDefault = () => (_jsx(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, expandedRows: ["2019-10-04", "2019-10-22"], keyField: "date", onRowSelectionChange: action("row selection changed") }));
-WithRowsExpandedByDefault.story = {
+export const WithRowsExpandedByDefault = {
+    render: () => (_jsx(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, expandedRows: ["2019-10-04", "2019-10-22"], keyField: "date", onRowSelectionChange: action("row selection changed") })),
     name: "with rows expanded by default",
 };

package/dist/src/Table/stories/TableWithFiltering.story.d.ts

@@ -3,14 +3,14 @@ declare const _default: {
 };
 export default _default;
 export declare const WithFiltering: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithFilteringAndPagination: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };

package/dist/src/Table/stories/TableWithFiltering.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { Table } from "../..";
 import { Input } from "../../Input";
 const COLUMNS = [
@@ -51,11 +52,21 @@ const TableWithFilters = ({ rowsPerPage }) => {
 export default {
     title: "Components/Table/with filtering",
 };
-export const WithFiltering = () => _jsx(TableWithFilters, {});
-WithFiltering.story = {
+export const WithFiltering = {
+    render: () => _jsx(TableWithFilters, {}),
     name: "with filtering",
 };
-export const WithFilteringAndPagination = () => _jsx(TableWithFilters, { rowsPerPage: 4 });
-WithFilteringAndPagination.story = {
+export const WithFilteringAndPagination = {
+    render: () => _jsx(TableWithFilters, { rowsPerPage: 4 }),
     name: "with filtering and pagination",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows multiple pages for unfiltered data", async () => {
+            await expect(canvas.getByRole("button", { name: "Go to page 3" })).toBeInTheDocument();
+        });
+        await step("filters down to fewer pages", async () => {
+            await userEvent.type(canvas.getByRole("textbox", { name: "Filter by Name" }), "a");
+            await waitFor(() => expect(canvas.queryByRole("button", { name: "Go to page 3" })).not.toBeInTheDocument());
+        });
+    },
 };

package/dist/src/Table/stories/TableWithSelectableRows.story.d.ts

@@ -3,14 +3,14 @@ declare const _default: {
 };
 export default _default;
 export declare const WithSelectableRows: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithPreselectedRows: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Table/stories/TableWithSelectableRows.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { expect, userEvent, within } from "storybook/test";
+import { action } from "storybook/actions";
 import { Table } from "..";
 const columns = [
     { label: "Date", dataKey: "date" },
@@ -59,11 +60,27 @@ const rowData = [
 export default {
     title: "Components/Table/with selectable rows",
 };
-export const WithSelectableRows = () => (_jsx(Table, { columns: columns, rows: rowData, hasSelectableRows: true, onRowSelectionChange: action("row selection changed") }));
-WithSelectableRows.story = {
+export const WithSelectableRows = {
+    render: () => (_jsx(Table, { columns: columns, rows: rowData, hasSelectableRows: true, onRowSelectionChange: action("row selection changed") })),
     name: "with selectable rows",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("can select a row by clicking its checkbox", async () => {
+            const tableBody = canvas.getByTestId("table-body");
+            const rowCheckboxes = within(tableBody).getAllByTestId("visual-checkbox");
+            await userEvent.click(rowCheckboxes[0]);
+            const rowInputs = canvasElement.querySelectorAll("[data-testid='table-body'] [type='checkbox']");
+            await expect(rowInputs[0]).toBeChecked();
+        });
+        await step("can select all rows using the header checkbox", async () => {
+            const tableHead = canvasElement.querySelector("[data-testid='table-head']");
+            await userEvent.click(within(tableHead).getByTestId("visual-checkbox"));
+            const headerInput = canvasElement.querySelector("[data-testid='table-head'] [type='checkbox']");
+            await expect(headerInput).toBeChecked();
+        });
+    },
 };
-export const WithPreselectedRows = () => (_jsx(Table, { columns: columns, rows: rowData, hasSelectableRows: true, selectedRows: ["2019-10-01"], keyField: "date", onRowSelectionChange: action("row selection changed") }));
-WithPreselectedRows.story = {
+export const WithPreselectedRows = {
+    render: () => (_jsx(Table, { columns: columns, rows: rowData, hasSelectableRows: true, selectedRows: ["2019-10-01"], keyField: "date", onRowSelectionChange: action("row selection changed") })),
     name: "with preselected rows",
 };

package/dist/src/Table/stories/TableWithServerSidePagination.story.d.ts

@@ -3,8 +3,6 @@ declare const _default: {
 };
 export default _default;
 export declare const WithServerSidePagination: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Table/stories/TableWithServerSidePagination.story.js

@@ -55,7 +55,7 @@ class TableWithServerSidePagination extends React.Component {
 export default {
     title: "Components/Table/with server side pagination",
 };
-export const WithServerSidePagination = () => _jsx(TableWithServerSidePagination, {});
-WithServerSidePagination.story = {
+export const WithServerSidePagination = {
+    render: () => _jsx(TableWithServerSidePagination, {}),
     name: "with server-side pagination",
 };

package/dist/src/Tabs/Tabs.story.d.ts

@@ -2,52 +2,52 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Tabs: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Tabs: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const WithADefaultSelectedIndex: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const WithOtherInteractiveElements: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
-export declare const WithOtherInteractiveElements: () => import("react/jsx-runtime").JSX.Element;
 export declare const SetToFitted: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAllTabStates: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithScrollingTabs: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            viewport: {
-                defaultViewport: string;
-            };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
         };
     };
 };
 export declare const Controlled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithInputs: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithContentLoadedOnSelection: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Tabs/Tabs.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
+import { expect, userEvent, within } from "storybook/test";
 import { Button } from "../Button";
 import { Flex } from "../Flex";
 import { Tab, Tabs } from ".";
@@ -22,34 +23,69 @@ class ControlledTabs extends React.Component {
 export default {
     title: "Components/Tabs",
 };
-export const _Tabs = () => (_jsxs(Tabs, { children: [_jsx(Tab, { className: "Tab1", label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { className: "Tab2", label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { className: "Tab3", label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { className: "Tab4", label: "Tab 4", children: "Tab 4 Content" })] }));
-export const WithADefaultSelectedIndex = () => (_jsxs(Tabs, { defaultSelectedIndex: 1, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] }));
-WithADefaultSelectedIndex.story = {
+export const _Tabs = {
+    render: () => (_jsxs(Tabs, { children: [_jsx(Tab, { className: "Tab1", label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { className: "Tab2", label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { className: "Tab3", label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { className: "Tab4", label: "Tab 4", children: "Tab 4 Content" })] })),
+    name: "Tabs",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("renders tab components", async () => {
+            await expect(canvas.getByText("Tab 1")).toBeVisible();
+        });
+        await step("selects the tab on click", async () => {
+            const tab1 = canvas.getByRole("tab", { name: "Tab 1" });
+            await expect(tab1).toHaveAttribute("aria-selected", "false");
+            await userEvent.click(tab1);
+            await expect(tab1).toHaveAttribute("aria-selected", "true");
+        });
+        await step("displays the tab content on click", async () => {
+            await expect(canvas.getByText("Tab 1 Content")).toBeVisible();
+        });
+        await step("moves to next tab with right arrow key", async () => {
+            const tab1 = canvas.getByRole("tab", { name: "Tab 1" });
+            tab1.focus();
+            await userEvent.keyboard("{ArrowRight}");
+            await expect(canvas.getByRole("tab", { name: "Tab 2" })).toHaveFocus();
+        });
+    },
+};
+export const WithADefaultSelectedIndex = {
+    render: () => (_jsxs(Tabs, { defaultSelectedIndex: 1, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] })),
     name: "with a defaultSelectedIndex",
 };
-export const WithOtherInteractiveElements = () => (_jsxs(Flex, { gap: "x2", alignItems: "flex-start", flexDirection: "column", children: [_jsx(Button, { children: "Click me" }), _jsxs(Tabs, { defaultSelectedIndex: 1, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] })] }));
-export const SetToFitted = () => (_jsxs(Tabs, { fitted: true, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] }));
-SetToFitted.story = {
+export const WithOtherInteractiveElements = {
+    render: () => (_jsxs(Flex, { gap: "x2", alignItems: "flex-start", flexDirection: "column", children: [_jsx(Button, { children: "Click me" }), _jsxs(Tabs, { defaultSelectedIndex: 1, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] })] })),
+    name: "with other interactive elements",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("focuses on the default selected tab when tabbing", async () => {
+            canvas.getByText("Click me").focus();
+            await userEvent.tab();
+            await expect(document.activeElement).toHaveTextContent("Tab 2");
+        });
+    },
+};
+export const SetToFitted = {
+    render: () => (_jsxs(Tabs, { fitted: true, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] })),
     name: "set to fitted",
 };
-export const WithAllTabStates = () => (_jsxs("div", { children: [_jsx(Tab, { label: "Tab" }), _jsx(Tab, { label: "Tab", selected: true }), _jsx(Tab, { label: "Tab", disabled: true }), _jsx(Tab, { label: "Tab", disabled: true, selected: true })] }));
-WithAllTabStates.story = {
+export const WithAllTabStates = {
+    render: () => (_jsxs("div", { children: [_jsx(Tab, { label: "Tab" }), _jsx(Tab, { label: "Tab", selected: true }), _jsx(Tab, { label: "Tab", disabled: true }), _jsx(Tab, { label: "Tab", disabled: true, selected: true })] })),
     name: "with all tab states",
 };
-export const WithScrollingTabs = () => (_jsxs(Tabs, { className: "tab-container", children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" }), _jsx(Tab, { label: "Tab 5", children: "Tab 5 Content" }), _jsx(Tab, { label: "Tab 6", children: "Tab 6 Content" }), _jsx(Tab, { label: "Tab 7", children: "Tab 7 Content" }), _jsx(Tab, { label: "Tab 8", children: "Tab 8 Content" }), _jsx(Tab, { label: "Tab 9", children: "Tab 9 Content" }), _jsx(Tab, { label: "Tab 10", children: "Tab 10 Content" }), _jsx(Tab, { label: "Tab 11", children: "Tab 11 Content" }), _jsx(Tab, { label: "Tab 12", children: "Tab 12 Content" })] }));
-WithScrollingTabs.story = {
+export const WithScrollingTabs = {
+    render: () => (_jsxs(Tabs, { className: "tab-container", children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" }), _jsx(Tab, { label: "Tab 5", children: "Tab 5 Content" }), _jsx(Tab, { label: "Tab 6", children: "Tab 6 Content" }), _jsx(Tab, { label: "Tab 7", children: "Tab 7 Content" }), _jsx(Tab, { label: "Tab 8", children: "Tab 8 Content" }), _jsx(Tab, { label: "Tab 9", children: "Tab 9 Content" }), _jsx(Tab, { label: "Tab 10", children: "Tab 10 Content" }), _jsx(Tab, { label: "Tab 11", children: "Tab 11 Content" }), _jsx(Tab, { label: "Tab 12", children: "Tab 12 Content" })] })),
     name: "with scrolling tabs",
     parameters: { viewport: { defaultViewport: "extraSmall" } },
 };
-export const Controlled = () => _jsx(ControlledTabs, {});
-Controlled.story = {
+export const Controlled = {
+    render: () => _jsx(ControlledTabs, {}),
     name: "controlled",
 };
-export const WithInputs = () => (_jsxs(Tabs, { children: [_jsx(Tab, { label: "Tab 1", className: "Tab1", children: _jsx("input", { className: "Input1" }) }), _jsx(Tab, { label: "Tab 2", className: "Tab2", children: _jsx("input", { className: "Input2" }) })] }));
-WithInputs.story = {
+export const WithInputs = {
+    render: () => (_jsxs(Tabs, { children: [_jsx(Tab, { label: "Tab 1", className: "Tab1", children: _jsx("input", { className: "Input1" }) }), _jsx(Tab, { label: "Tab 2", className: "Tab2", children: _jsx("input", { className: "Input2" }) })] })),
     name: "with inputs",
 };
-export const WithContentLoadedOnSelection = () => (_jsxs(Tabs, { renderTabContentOnlyWhenSelected: true, children: [_jsx(Tab, { label: "Tab 1", className: "Tab1", children: _jsx("input", { className: "Input1" }) }), _jsx(Tab, { label: "Tab 2", className: "Tab2", children: _jsx("input", { className: "Input2" }) })] }));
-WithContentLoadedOnSelection.story = {
+export const WithContentLoadedOnSelection = {
+    render: () => (_jsxs(Tabs, { renderTabContentOnlyWhenSelected: true, children: [_jsx(Tab, { label: "Tab 1", className: "Tab1", children: _jsx("input", { className: "Input1" }) }), _jsx(Tab, { label: "Tab 2", className: "Tab2", children: _jsx("input", { className: "Input2" }) })] })),
     name: "with content loaded on selection",
 };

package/dist/src/Textarea/Textarea.story.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Textarea, Button } from "../index";
 const errorList = ["Error message 1", "Error message 2"];
 export default {

package/dist/src/TimePicker/TimePicker.js

@@ -100,6 +100,8 @@ const TimePicker = forwardRef(({ timeFormat, interval, className, minTime, maxTi
     const { t } = useTranslation();
     const componentVariant = useComponentVariant(variant);
     const scrollToSelection = useCallback(debounce((currentOption, dropdown) => {
+        if (!dropdown.current)
+            return;
         const currentIndex = Array.from(dropdown.current.children).indexOf(currentOption);
         if (currentIndex > 2) {
             dropdown.current.scrollTop = (currentIndex - 2) * currentOption.scrollHeight;