@eccenca/gui-elements 23.8.0 → 24.0.0-rc.1

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { MultiSelectSelectionProps, MultiSuggestField, SimpleDialog } from "./../../../index";
 
@@ -28,6 +29,9 @@ export default {
             control: "none",
         },
     },
+    args: {
+        onSelection: fn(),
+    },
 } as Meta<typeof MultiSuggestField>;
 
 const Template: StoryFn<typeof MultiSuggestField> = (args) => {
@@ -234,3 +238,15 @@ const WithinModal = (): JSX.Element => {
 };
 
 export const withinModal = WithinModal.bind({});
+
+/** With custom search function */
+export const CustomSearch = Template.bind({});
+CustomSearch.args = {
+    items,
+    prePopulateWithItems: false,
+    itemId: (item) => item.testId,
+    itemLabel: (item) => item.testLabel,
+    searchPredicate: (item, query) => {
+        return item.testId.toLowerCase().includes(query) || item.testLabel.toLowerCase().includes(query);
+    },
+};

package/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx

@@ -4,7 +4,7 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import { MultiSuggestField } from "../MultiSuggestField";
-import { Default, dropdownOnFocus, predefinedNotControlledValues } from "../MultiSuggestField.stories";
+import { CustomSearch, Default, dropdownOnFocus, predefinedNotControlledValues } from "../MultiSuggestField.stories";
 
 const testLabels = ["label1", "label2", "label3", "label4", "label5"];
 
@@ -260,6 +260,68 @@ describe("MultiSuggestField", () => {
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
             });
         });
+
+        it("should filter items by custom search function", async () => {
+            const { container } = render(<MultiSuggestField {...CustomSearch.args} items={items} />);
+
+            const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
+            const [input] = inputContainer.getElementsByTagName("input");
+
+            fireEvent.click(input);
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(CustomSearch.args.items.length);
+            });
+
+            fireEvent.change(input, { target: { value: "label1" } });
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(1);
+
+                const item = menuItems[0];
+
+                const [div] = item.getElementsByTagName("div");
+                expect(div.textContent).toBe("label1");
+            });
+
+            fireEvent.change(input, { target: { value: "label1-id" } });
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(1);
+
+                const item = menuItems[0];
+
+                const [div] = item.getElementsByTagName("div");
+                expect(div.textContent).toBe("label1");
+            });
+
+            fireEvent.change(input, { target: { value: "label1-id-other" } });
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(1);
+
+                const item = menuItems[0];
+
+                const [div] = item.getElementsByTagName("div");
+                expect(div.textContent).toBe("No results.");
+            });
+        });
     });
 
     describe("controlled (when both selectedItems and onSelect are provided)", () => {

package/src/components/Notification/Notification.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Button, HtmlContentBlock, Notification, Spacing } from "../../../index";
@@ -16,9 +16,9 @@ export default {
             ...helpersArgTypes.exampleIcon,
         },
     },
-} as ComponentMeta<typeof Notification>;
+} as Meta<typeof Notification>;
 
-const TemplateFull: ComponentStory<typeof Notification> = (args) => <Notification {...args} />;
+const TemplateFull: StoryFn<typeof Notification> = (args) => <Notification {...args} />;
 
 export const ExampleWithMessage = TemplateFull.bind({});
 ExampleWithMessage.args = {

package/src/components/Pagination/Pagination.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { Pagination as CarbonPagination, PaginationProps as CarbonPaginationProps } from "carbon-components-react";
+import { Pagination as CarbonPagination } from "@carbon/react";
+import { PaginationProps as CarbonPaginationProps } from "@carbon/react/es/components/Pagination/Pagination";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 

package/src/components/Pagination/Stories/Pagination.stories.tsx

@@ -1,16 +1,16 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Pagination } from "../../../../index";
 export default {
     title: "Components/Pagination",
     component: Pagination,
     argTypes: {},
-} as ComponentMeta<typeof Pagination>;
+} as Meta<typeof Pagination>;
 
 const PaginationExample = (args) => <Pagination {...args} />;
 
-export const Default: ComponentStory<typeof Pagination> = PaginationExample.bind({});
+export const Default: StoryFn<typeof Pagination> = PaginationExample.bind({});
 Default.args = {
     pageSizes: [10, 20, 50, 100],
     totalItems: 60,
@@ -18,7 +18,7 @@ Default.args = {
     forwardText: "Next page",
 };
 
-export const ExtendedPagesizeSelection: ComponentStory<typeof Pagination> = PaginationExample.bind({});
+export const ExtendedPagesizeSelection: StoryFn<typeof Pagination> = PaginationExample.bind({});
 ExtendedPagesizeSelection.args = {
     ...Default.args,
     pageSizes: [

package/src/components/Pagination/pagination.scss

@@ -1,11 +1,15 @@
-@use "~@carbon/styles/scss/components/pagination/pagination";
+@use "~@carbon/react/scss/components/pagination/pagination";
 @include pagination.pagination;
 
 $eccgui-color-pagination-background: transparent !default;
 $eccgui-color-pagination-text: $eccgui-color-workspace-text !default;
 $eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
+$eccgui-size-pagination-height-medium: $pt-button-height !default;
+$eccgui-size-pagination-height-small: $pt-button-height-small !default;
+$eccgui-size-pagination-height-large: $pt-button-height-large !default;
 
 .#{$prefix}--pagination {
+    min-block-size: $eccgui-size-pagination-height-medium;
     font-size: $eccgui-size-typo-pagination;
     background-color: $eccgui-color-pagination-background;
 
@@ -15,8 +19,17 @@ $eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
     }
 }
 
+.#{$prefix}--pagination__left {
+    padding: 0 $eccgui-size-block-whitespace * 0.5;
+}
+
 span.#{$prefix}--pagination__text {
+    margin-inline-start: $eccgui-size-block-whitespace * 0.5;
     color: $eccgui-color-pagination-text;
+
+    .#{$prefix}--pagination__right & {
+        margin-inline-end: $eccgui-size-block-whitespace * 0.5;
+    }
 }
 
 .#{$eccgui}-pagination--hidepagesize {
@@ -29,6 +42,12 @@ span.#{$prefix}--pagination__text {
     }
 }
 
+.#{$prefix}--pagination__button--backward {
+    .#{$prefix}--pagination:not(.#{$eccgui}-pagination--hidepageselect) & {
+        border-left: 1px solid $border-subtle;
+    }
+}
+
 .#{$prefix}--pagination__button--no-index {
     // TODO: revalidate if this is still necessary using the latest version of carbon lib
     color: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled);
@@ -38,6 +57,10 @@ span.#{$prefix}--pagination__text {
     .#{$prefix}--pagination__left > .#{$prefix}--pagination__text:last-child {
         display: none;
     }
+
+    & .#{$prefix}--select__item-count .#{$prefix}--select-input {
+        border-inline-end: none;
+    }
 }
 
 .#{$eccgui}-pagination--hidepageselect {
@@ -66,4 +89,50 @@ span.#{$prefix}--pagination__text {
     .#{$prefix}--pagination__button {
         border-left: none;
     }
+
+    .#{$prefix}--pagination__right {
+        border-inline-start: none;
+    }
+}
+
+// Fix pagination height, align it with button height
+.#{$prefix}--pagination--sm {
+    min-block-size: $eccgui-size-pagination-height-small;
+}
+
+.#{$prefix}--pagination--lg {
+    min-block-size: $eccgui-size-pagination-height-large;
+}
+
+.#{$prefix}--pagination__button,
+.#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
+    inline-size: $eccgui-size-pagination-height-medium;
+    block-size: $eccgui-size-pagination-height-medium;
+    min-block-size: $eccgui-size-pagination-height-medium;
+
+    .#{$prefix}--pagination--sm & {
+        inline-size: $eccgui-size-pagination-height-small;
+        block-size: $eccgui-size-pagination-height-small;
+        min-block-size: $eccgui-size-pagination-height-small;
+    }
+
+    .#{$prefix}--pagination--lg & {
+        inline-size: $eccgui-size-pagination-height-large;
+        block-size: $eccgui-size-pagination-height-large;
+        min-block-size: $eccgui-size-pagination-height-large;
+    }
+}
+
+.#{$prefix}--select-input {
+    .#{$prefix}--pagination & {
+        line-height: $eccgui-size-pagination-height-medium;
+    }
+
+    .#{$prefix}--pagination--sm & {
+        line-height: $eccgui-size-pagination-height-small;
+    }
+
+    .#{$prefix}--pagination--lg & {
+        line-height: $eccgui-size-pagination-height-large;
+    }
 }

package/src/components/ProgressBar/Stories/ProgressBar.stories.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ProgressBar } from "../../../../index";
 export default {
     title: "Components/ProgressBar",
     component: ProgressBar,
     argTypes: {},
-} as ComponentMeta<typeof ProgressBar>;
+} as Meta<typeof ProgressBar>;
 
-const ProgressBarExample: ComponentStory<typeof ProgressBar> = (args) => <ProgressBar {...args}></ProgressBar>;
+const ProgressBarExample: StoryFn<typeof ProgressBar> = (args) => <ProgressBar {...args}></ProgressBar>;
 
 export const Default = ProgressBarExample.bind({});
 Default.args = {

package/src/components/RadioButton/Stories/RadioButton.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { HtmlContentBlock, RadioButton } from "../../../../index";
 
@@ -10,9 +10,9 @@ export default {
     argTypes: {
         onChange: { action: "clicked" },
     },
-} as ComponentMeta<typeof RadioButton>;
+} as Meta<typeof RadioButton>;
 
-const Template: ComponentStory<typeof RadioButton> = (args) => <RadioButton {...args} />;
+const Template: StoryFn<typeof RadioButton> = (args) => <RadioButton {...args} />;
 
 export const SimpleTextLabel = Template.bind({});
 SimpleTextLabel.args = {

package/src/components/Separation/Stories/Divider.stories.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Button, Divider } from "./../../../../index";
 export default {
     title: "Components/Separation/Divider",
     component: Divider,
     argTypes: {},
-} as ComponentMeta<typeof Divider>;
+} as Meta<typeof Divider>;
 
 // buttons used for only showing space with elements
-const DividerExample: ComponentStory<typeof Divider> = (args) => (
+const DividerExample: StoryFn<typeof Divider> = (args) => (
     <>
         <Button children="Example element" />
         <Divider {...args} />

package/src/components/Separation/Stories/Spacing.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Button from "../../Button/Button";
 import Spacing from "../Spacing";
@@ -9,10 +9,10 @@ export default {
     argTypes: {
         size: { control: "radio" },
     },
-} as ComponentMeta<typeof Spacing>;
+} as Meta<typeof Spacing>;
 
 // buttons used for only showing space with elements
-const SpacingExample: ComponentStory<typeof Spacing> = (args) => (
+const SpacingExample: StoryFn<typeof Spacing> = (args) => (
     <>
         <Button children="Example element" />
         <Spacing {...args} />

package/src/components/Spinner/Stories/spinner.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Spinner from "../Spinner";
 export default {
@@ -11,9 +11,9 @@ export default {
         size: { control: "radio", options: ["tiny", "small", "medium", "large", "xlarge", "inherit"] },
         stroke: { control: "radio", options: ["thin", "medium", "bold"] },
     },
-} as ComponentMeta<typeof Spinner>;
+} as Meta<typeof Spinner>;
 
-const SpinnerExample: ComponentStory<typeof Spinner> = (args) => (
+const SpinnerExample: StoryFn<typeof Spinner> = (args) => (
     <div style={{ height: "300px", minHeight: "20vw", position: "relative" }}>
         <Spinner {...args} />
     </div>

package/src/components/Switch/Stories/Switch.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Switch from "../Switch";
 
@@ -7,9 +7,9 @@ export default {
     title: "Forms/Switch",
     component: Switch,
     argTypes: {},
-} as ComponentMeta<typeof Switch>;
+} as Meta<typeof Switch>;
 
-const Template: ComponentStory<typeof Switch> = (args) => <Switch {...args} />;
+const Template: StoryFn<typeof Switch> = (args) => <Switch {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Table/Table.tsx

@@ -1,15 +1,14 @@
 import React from "react";
-import {
-    DataTableSize as CarbonDataTableSize,
-    Table as CarbonTable,
-    TableProps as CarbonTableProps,
-} from "carbon-components-react";
+import { DataTableSize as CarbonDataTableSize, Table as CarbonTable } from "@carbon/react";
 
+// import { TableProps as CarbonTableProps } from "@carbon/react/es/components/DataTable/Table"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 type TableRowHeightSizeDepracted = "compact" | "tall"; // @deprecated
 export type TableRowHeightSize = "small" | "medium" | "large" | TableRowHeightSizeDepracted;
 
+// workaround to get type/interface
+type CarbonTableProps = React.ComponentProps<typeof CarbonTable>;
 export interface TableProps
     extends Omit<CarbonTableProps, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">,
         React.TableHTMLAttributes<HTMLTableElement> {

package/src/components/Table/TableCell.tsx

@@ -1,8 +1,11 @@
 import React from "react";
-import { TableCell as CarbonTableCell, TableCellProps as CarbonTableCellProps } from "carbon-components-react";
+import { TableCell as CarbonTableCell } from "@carbon/react";
 
+// import { TableCellProps as CarbonTableCellProps } from "@carbon/react/es/components/DataTable/TableCell"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+// workaround to get type/interface
+type CarbonTableCellProps = React.ComponentProps<typeof CarbonTableCell>;
 export interface TableCellProps extends CarbonTableCellProps, React.TdHTMLAttributes<HTMLTableCellElement> {
     /**
      * By default all table cell content is aligned to the left of the cell.

package/src/components/Table/TableContainer.tsx

@@ -1,16 +1,24 @@
 import React from "react";
 import {
     DataTable as CarbonDataTable,
+    DataTableHeader as CarbonDataTableHeader,
     DataTableProps as CarbonDataTableProps,
-    TableContainerProps as CarbonTableContainerProps,
-} from "carbon-components-react";
+    DataTableRow as CarbonDataTableRow,
+} from "@carbon/react";
+import { TableContainerProps as CarbonTableContainerProps } from "@carbon/react/es/components/DataTable/TableContainer";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { TableRowHeightSize, tableRowHeightSizes } from "./Table";
 
 interface TableDataContainerProps
-    extends Omit<CarbonDataTableProps, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">,
+    extends Omit<
+            CarbonDataTableProps<
+                Array<Omit<CarbonDataTableRow<Array<CarbonDataTableHeader>>, "cells">>,
+                Array<CarbonDataTableHeader>
+            >,
+            "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
+        >,
         React.TableHTMLAttributes<HTMLTableElement> {
     children(signature: any): JSX.Element;
     size?: TableRowHeightSize;

package/src/components/Table/TableExpandHeader.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import {
-    TableExpandHeader as CarbonTableExpandHeader,
-    TableExpandHeaderProps as CarbonTableExpandHeaderProps,
-} from "carbon-components-react";
+import { TableExpandHeader as CarbonTableExpandHeader } from "@carbon/react";
+import { TableExpandHeaderProps as CarbonTableExpandHeaderProps } from "@carbon/react/es/components/DataTable/TableExpandHeader";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestIconProps } from "../Icon";
@@ -11,7 +9,10 @@ import { ValidIconName } from "../Icon/canonicalIconNames";
 import IconButton from "./../Icon/IconButton";
 
 export interface TableExpandHeaderProps
-    extends Omit<CarbonTableExpandHeaderProps, "children" | "ariaLabel" | "enableExpando" | "expandIconDescription">,
+    extends Omit<
+            CarbonTableExpandHeaderProps,
+            "children" | "ariaLabel" | "enableExpando" | "expandIconDescription" | "aria-label"
+        >,
         React.ThHTMLAttributes<HTMLTableCellElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
@@ -44,6 +45,7 @@ export function TableExpandHeader({
             isExpanded={isExpanded}
             onExpand={onExpand}
             enableToggle={false}
+            aria-label="" // workaround to fix difference between types on this properties
             {...otherCarbonTableExpandHeaderProps}
         >
             {enableToggle && toggleButton}

package/src/components/Table/TableExpandRow.tsx

@@ -1,14 +1,17 @@
 import React from "react";
-import { TableExpandRowProps as CarbonTableExpandRowProps } from "carbon-components-react";
-import { usePrefix as carbonPrefix } from "carbon-components-react/es/index";
+import { TableExpandRow as CarbonTableExpandRow } from "@carbon/react";
+// import { TableExpandRowProps as CarbonTableExpandRowProps } from "@carbon/react/es/components/DataTable/TableExpandRow"; // TODO: check later again, currently interface is not exported
+import { usePrefix as carbonPrefix } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import IconButton from "./../Icon/IconButton";
 import { TableCell } from "./index";
 
+// workaround to get type/interface
+type CarbonTableExpandRowProps = React.ComponentProps<typeof CarbonTableExpandRow>;
 export interface TableExpandRowProps
-    extends Omit<CarbonTableExpandRowProps, "ariaLabel" | "expandIconDescription">,
+    extends Omit<CarbonTableExpandRowProps, "ref" | "ariaLabel" | "expandIconDescription" | "aria-label">,
         React.HTMLAttributes<HTMLTableRowElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.

package/src/components/Table/TableRow.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { TableRow as CarbonTableRow, TableRowProps as CarbonTableRowProps } from "carbon-components-react";
+import { TableRow as CarbonTableRow } from "@carbon/react";
+import { TableRowProps as CarbonTableRowProps } from "@carbon/react/es/components/DataTable/TableRow";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 

package/src/components/Table/index.tsx

@@ -6,4 +6,4 @@ export * from "./TableExpandHeader";
 export * from "./TableCell";
 
 // TODO, we may wrap to add own classes (currently not necessary)
-export { TableHead, TableBody, TableExpandedRow, TableHeader } from "carbon-components-react";
+export { TableHead, TableBody, TableExpandedRow, TableHeader } from "@carbon/react";

package/src/components/Table/table.scss

@@ -1,13 +1,13 @@
 @use "sass:color";
 
 // import libs
-@use "~@carbon/styles/scss/components/data-table/data-table";
+@use "~@carbon/react/scss/components/data-table/data-table";
 
-// currently not needed @import "~@carbon/styles/scss/components/data-table/action";
-@use "~@carbon/styles/scss/components/data-table/expandable/index" as table-expandable;
+// currently not needed @import "~@carbon/react/scss/components/data-table/action";
+@use "~@carbon/react/scss/components/data-table/expandable/index" as table-expandable;
 
-// currently not needed @import ~@carbon/styles/scss/components/data-table/skeleton;
-@use "~@carbon/styles/scss/components/data-table/sort/index" as table-sort;
+// currently not needed @import ~@carbon/react/scss/components/data-table/skeleton;
+@use "~@carbon/react/scss/components/data-table/sort/index" as table-sort;
 @include data-table.data-table;
 
 // own vars

package/src/components/Tabs/stories/Tab.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Tab as TabDummyForStorybook, Tabs } from "./../../../../";
 
@@ -11,13 +11,13 @@ export default {
             control: "color",
         },
     },
-} as ComponentMeta<typeof TabDummyForStorybook>;
+} as Meta<typeof TabDummyForStorybook>;
 
 const Tab = (args) => {
     return <Tabs id="titledemo" tabs={[args]} />;
 };
 
-const TemplateFull: ComponentStory<typeof TabDummyForStorybook> = (args) => <Tab {...args} />;
+const TemplateFull: StoryFn<typeof TabDummyForStorybook> = (args) => <Tab {...args} />;
 
 export const TabElement = TemplateFull.bind({});
 TabElement.args = {

package/src/components/Tabs/stories/TabPanel.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { TabPanel } from "./../../../";
 
@@ -8,9 +8,9 @@ export default {
     title: "Components/Tabs",
     component: TabPanel,
     argTypes: {},
-} as ComponentMeta<typeof TabPanel>;
+} as Meta<typeof TabPanel>;
 
-const TemplateFull: ComponentStory<typeof TabPanel> = (args) => <TabPanel {...args} />;
+const TemplateFull: StoryFn<typeof TabPanel> = (args) => <TabPanel {...args} />;
 
 export const TabPanelElement = TemplateFull.bind({});
 TabPanelElement.args = {

package/src/components/Tabs/stories/TabTitle.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
 
@@ -7,7 +7,7 @@ export default {
     title: "Components/Tabs",
     component: TabTitleOrg,
     argTypes: {},
-} as ComponentMeta<typeof TabTitleOrg>;
+} as Meta<typeof TabTitleOrg>;
 
 const TabTitle = (args) => {
     return (
@@ -23,7 +23,7 @@ const TabTitle = (args) => {
     );
 };
 
-const TemplateFull: ComponentStory<typeof TabTitleOrg> = (args) => <TabTitle {...args} />;
+const TemplateFull: StoryFn<typeof TabTitleOrg> = (args) => <TabTitle {...args} />;
 
 export const TabTitleElement = TemplateFull.bind({});
 TabTitleElement.args = {

package/src/components/Tabs/stories/Tabs.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Tabs, TabTitle } from "./../../../";
 
@@ -21,9 +21,9 @@ export default {
         },
         */
     },
-} as ComponentMeta<typeof Tabs>;
+} as Meta<typeof Tabs>;
 
-const TemplateFull: ComponentStory<typeof Tabs> = (args) => <Tabs {...args} />;
+const TemplateFull: StoryFn<typeof Tabs> = (args) => <Tabs {...args} />;
 
 export const TabsContainerUncontrolled = TemplateFull.bind({});
 TabsContainerUncontrolled.args = {