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

package/src/cmem/ConfidenceValue/ConfidenceValue.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ConfidenceValue } from "../../../index";
 
@@ -11,9 +11,9 @@ export default {
             control: "color",
         },
     },
-} as ComponentMeta<typeof ConfidenceValue>;
+} as Meta<typeof ConfidenceValue>;
 
-const TemplateIcons: ComponentStory<typeof ConfidenceValue> = (args) => <ConfidenceValue {...args} />;
+const TemplateIcons: StoryFn<typeof ConfidenceValue> = (args) => <ConfidenceValue {...args} />;
 export const Default = TemplateIcons.bind({});
 Default.args = {
     value: "0.5",

package/src/cmem/markdown/Markdown.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Blockquote } from "@blueprintjs/core";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Markdown } from "./../../../index";
 
@@ -8,9 +8,9 @@ export default {
     title: "Cmem/Markdown",
     component: Markdown,
     argTypes: {},
-} as ComponentMeta<typeof Markdown>;
+} as Meta<typeof Markdown>;
 
-const Template: ComponentStory<typeof Markdown> = (args) => <Markdown {...args} />;
+const Template: StoryFn<typeof Markdown> = (args) => <Markdown {...args} />;
 
 export const Default = Template.bind({});
 

package/src/components/Accordion/Accordion.tsx

@@ -1,11 +1,12 @@
-import React from "react";
-import { Accordion as CarbonAccordion, AccordionProps as CarbonAccordionProps } from "carbon-components-react";
+import React, { ReactNode } from "react";
+import { Accordion as CarbonAccordion, AccordionProps as CarbonAccordionProps } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { AccordionItemProps } from "./AccordionItem";
 
-export interface AccordionProps extends Omit<CarbonAccordionProps, "className" | "size"> {
+export interface AccordionProps extends Omit<CarbonAccordionProps, "children" | "className" | "size" | "isFlush"> {
+    children?: ReactNode;
     /**
      * Additional CSS classes.
      */

package/src/components/Accordion/AccordionItem.tsx

@@ -1,15 +1,16 @@
 import React from "react";
-import {
-    AccordionItem as CarbonAccordionItem,
-    AccordionItemProps as CarbonAccordionItemProps,
-} from "carbon-components-react";
+import { AccordionItem as CarbonAccordionItem } from "@carbon/react";
 
+// import { AccordionItemProps as CarbonAccordionItemProps } from "@carbon/react/es/components/Accordion/AccordionItem"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 type sizeOptions = "none" | "small" | "medium" | "large";
 
+// workaround to get type/interface
+type CarbonAccordionItemProps = React.ComponentProps<typeof CarbonAccordionItem>;
 export interface AccordionItemProps
-    extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando"> {
+    extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando">,
+        Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
     /**
      * additional user class name
      */

package/src/components/Accordion/accordion.scss

@@ -1,6 +1,6 @@
 // lib import
 @use "sass:color";
-@use "~@carbon/styles/scss/components/accordion/accordion";
+@use "~@carbon/react/scss/components/accordion/accordion";
 @include accordion.accordion;
 
 // own vars
@@ -77,11 +77,21 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
     }
 }
 
+.#{$prefix}--accordion__wrapper {
+    .#{$prefix}--accordion__item--active > & {
+        padding-block: 0;
+    }
+}
+
 .#{$prefix}--accordion__heading {
     align-items: center;
     min-height: var(--#{$eccgui}-accordion-header-height, mini-units(5));
     color: inherit;
 
+    .#{$prefix}--accordion--end & {
+        padding-right: 0;
+    }
+
     .#{$prefix}--accordion__arrow {
         margin: 0 $eccgui-size-block-whitespace * 0.5 0 0;
 
@@ -110,6 +120,7 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
 
 .#{$prefix}--accordion__title {
     min-width: 0; // flex layout fix
+    padding-left: 0;
     margin: 0 0 0 $eccgui-size-block-whitespace;
     font-size: inherit;
     line-height: inherit;

package/src/components/Application/ApplicationContent.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Content as CarbonContent } from "carbon-components-react";
+import { Content as CarbonContent } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 

package/src/components/Application/ApplicationHeader.tsx

@@ -1,9 +1,12 @@
 import React from "react";
-import { Header as CarbonHeader, HeaderProps as CarbonHeaderProps } from "carbon-components-react";
+import { Header as CarbonHeader } from "@carbon/react";
 
+// import { HeaderProps as CarbonHeaderProps } from "@carbon/react/es/components/UIShell/Header"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type ApplicationHeaderProps = CarbonHeaderProps;
+// workaround to get type/interface
+type CarbonHeaderProps = React.ComponentProps<typeof CarbonHeader>;
+export interface ApplicationHeaderProps extends CarbonHeaderProps, React.HTMLAttributes<HTMLElement> {}
 
 export const ApplicationHeader = ({
     children = "",

package/src/components/Application/ApplicationSidebarNavigation.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "carbon-components-react";
+import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ApplicationSidebarNavigationProps
-    extends Omit<CarbonSideNavProps, "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
+    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
         React.HTMLAttributes<HTMLElement> {}
 
 export const ApplicationSidebarNavigation = ({

package/src/components/Application/ApplicationSidebarToggler.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {
     HeaderMenuButton as CarbonHeaderMenuButton,
     HeaderMenuButtonProps as CarbonHeaderMenuButtonProps,
-} from "carbon-components-react";
+} from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 

package/src/components/Application/ApplicationTitle.tsx

@@ -1,27 +1,12 @@
 import React from "react";
-import { HeaderName as CarbonHeaderName, HeaderNameProps as CarbonHeaderNameProps } from "carbon-components-react";
+import { HeaderName as CarbonHeaderName, HeaderNameProps as CarbonHeaderNameProps } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 type SvgDepiction = HTMLElement & SVGElement;
 type ImgDepiction = HTMLElement & HTMLImageElement;
 
-export interface ApplicationTitleProps extends CarbonHeaderNameProps {
-    // from CarbonHeaderNameProps
-    /**
-        addional class name
-    */
-    className?: string;
-    /**
-        prefix the application name by extra string, e.g. company name
-    */
-    prefix?: string;
-    /**
-        home link
-    */
-    href?: string;
-
-    // our extensions
+export type ApplicationTitleProps = CarbonHeaderNameProps<"a"> & {
     /**
         application logo, <img>, <svg> or react element
     */
@@ -42,7 +27,7 @@ export interface ApplicationTitleProps extends CarbonHeaderNameProps {
         native attributes for the anchor HTML element (<a>)
     */
     htmlAProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
-}
+};
 
 export const ApplicationTitle = ({
     children,

package/src/components/Application/ApplicationToolbar.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import {
-    HeaderGlobalBar as CarbonHeaderGlobalBar,
-    HeaderGlobalBarProps as CarbonHeaderGlobalBarProps,
-} from "carbon-components-react";
+import { HeaderGlobalBar as CarbonHeaderGlobalBar } from "@carbon/react";
 
+// import { HeaderGlobalBarProps as CarbonHeaderGlobalBarProps } from "@carbon/react/es/components/UIShell/HeaderGlobalBar"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+// workaround to get type/inteface
+type CarbonHeaderGlobalBarProps = React.ComponentProps<typeof CarbonHeaderGlobalBar>;
 export type ApplicationToolbarProps = CarbonHeaderGlobalBarProps;
 
 export const ApplicationToolbar = ({

package/src/components/Application/ApplicationToolbarAction.tsx

@@ -1,12 +1,14 @@
 import React from "react";
-import {
-    HeaderGlobalAction as CarbonHeaderGlobalAction,
-    HeaderGlobalActionProps as CarbonHeaderGlobalActionProps,
-} from "carbon-components-react";
+import { HeaderGlobalAction as CarbonHeaderGlobalAction } from "@carbon/react";
 
+// import { HeaderGlobalActionProps as CarbonHeaderGlobalActionProps } from "@carbon/react/es/components/UIShell/HeaderGlobalAction"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type ApplicationToolbarActionProps = CarbonHeaderGlobalActionProps;
+// workaround to get type/interface
+type CarbonHeaderGlobalActionProps = React.ComponentProps<typeof CarbonHeaderGlobalAction>;
+export interface ApplicationToolbarActionProps
+    extends CarbonHeaderGlobalActionProps,
+        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {}
 
 export const ApplicationToolbarAction = ({
     children,

package/src/components/Application/ApplicationToolbarPanel.tsx

@@ -1,9 +1,12 @@
 import React from "react";
-import { HeaderPanel as CarbonHeaderPanel, HeaderPanelProps as CarbonHeaderPanelProps } from "carbon-components-react";
+import { HeaderPanel as CarbonHeaderPanel } from "@carbon/react";
 
+// import { HeaderPanelProps as CarbonHeaderPanelProps } from "@carbon/react/es/components/UIShell/HeaderPanel"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface ApplicationToolbarPanelProps extends CarbonHeaderPanelProps {
+// workaround to get type/inteface
+type CarbonHeaderPanelProps = React.ComponentProps<typeof CarbonHeaderPanel>;
+export interface ApplicationToolbarPanelProps extends CarbonHeaderPanelProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Event handler getting called when the pointer device leaves the area of the panel menu.
      * Could be used to close it automatically.

package/src/components/Application/_config.scss

@@ -5,7 +5,7 @@
 */
 
 /// should be already imported
-//@import '~@carbon/styles/scss/colors';
+//@import '~@carbon/react/scss/colors';
 
 /*
 //----------------------------------------------------------------------------

package/src/components/Application/_content.scss

@@ -1,6 +1,6 @@
 $ui-02: $eccgui-color-workspace-background !default;
 
-@import "~@carbon/styles/scss/components/ui-shell/content/index";
+@import "~@carbon/react/scss/components/ui-shell/content/index";
 
 // tweack original layout
 

package/src/components/Application/_header.scss

@@ -53,7 +53,7 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 $shell-header-link: $blue-60 !default;
 
 // load library sub component
-@import "~@carbon/styles/scss/components/ui-shell/header/index";
+@import "~@carbon/react/scss/components/ui-shell/header/index";
 
 // tweack original layout
 

package/src/components/Application/_sidebar.scss

@@ -1,6 +1,6 @@
 $ui-02: $eccgui-color-workspace-background !default;
 
-@import "~@carbon/styles/scss/components/ui-shell/side-nav/index";
+@import "~@carbon/react/scss/components/ui-shell/side-nav/index";
 
 // tweak original layout
 

package/src/components/Application/_toolbar.scss

@@ -32,7 +32,7 @@ $shell-panel-text-02: $eccgui-color-applicationheader-text !default;
 /// Header panel focus border
 $shell-panel-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
 
-@import "~@carbon/styles/scss/components/ui-shell/header-panel/index";
+@import "~@carbon/react/scss/components/ui-shell/header-panel/index";
 
 // tweack original layout
 

package/src/components/Application/application.scss

@@ -2,10 +2,10 @@
 @import "header";
 @import "toolbar";
 
-// @import '~@carbon/styles/scss/components/ui-shell/product-switcher';
-// @import '~@carbon/styles/scss/components/ui-shell/switcher';
+// @import '~@carbon/react/scss/components/ui-shell/product-switcher';
+// @import '~@carbon/react/scss/components/ui-shell/switcher';
 @import "sidebar";
 
-// @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
+// @import '~@carbon/react/scss/components/ui-shell/navigation-menu';
 @import "content";
 @import "dropzone";

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import computeScrollIntoView from "compute-scroll-into-view";
+import { compute } from "compute-scroll-into-view";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -96,7 +96,7 @@ export const AutoSuggestionList = ({
     React.useEffect(() => {
         const listIndexNode = refs[currentlyFocusedIndex];
         if (dropdownRef?.current && listIndexNode?.current) {
-            const actions = computeScrollIntoView(listIndexNode.current, {
+            const actions = compute(listIndexNode.current, {
                 boundary: dropdownRef.current,
                 block: "nearest",
                 scrollMode: "if-needed",

package/src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LogoReact } from "@carbon/icons-react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Badge, Icon, TestIcon } from "../../../index";
@@ -23,9 +23,9 @@ export default {
             ...helpersArgTypes.exampleIntent,
         },
     },
-} as ComponentMeta<typeof Badge>;
+} as Meta<typeof Badge>;
 
-const TemplateFull: ComponentStory<typeof Badge> = (args) => (
+const TemplateFull: StoryFn<typeof Badge> = (args) => (
     <div style={{ position: "relative", border: "solid 1px", width: "10rem" }}>
         Element area <Badge {...args} />
     </div>

package/src/components/Breadcrumb/stories/BreadcrumbItem.stories.tsx

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

package/src/components/Card/stories/Card.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../../index";
@@ -30,9 +30,9 @@ export default {
             description: "Elements to include into the card container.",
         },
     },
-} as ComponentMeta<typeof Card>;
+} as Meta<typeof Card>;
 
-const TemplateFull: ComponentStory<typeof Card> = (args) => (
+const TemplateFull: StoryFn<typeof Card> = (args) => (
     <Card {...args}>
         <CardHeader {...CardHeaderExample.args} />
         <Divider />
@@ -43,7 +43,7 @@ const TemplateFull: ComponentStory<typeof Card> = (args) => (
 );
 export const FullExample = TemplateFull.bind({});
 
-const TemplateSimple: ComponentStory<typeof Card> = (args) => <Card {...args} />;
+const TemplateSimple: StoryFn<typeof Card> = (args) => <Card {...args} />;
 export const SimpleCard = TemplateSimple.bind({});
 SimpleCard.args = {
     children: [

package/src/components/Card/stories/CardActions.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 { CardActions, CardActionsAux } from "../index";
@@ -19,9 +19,9 @@ export default {
             description: "Elements to include into the actions container.",
         },
     },
-} as ComponentMeta<typeof CardActions>;
+} as Meta<typeof CardActions>;
 
-const Template: ComponentStory<typeof CardActions> = (args) => <CardActions {...args} />;
+const Template: StoryFn<typeof CardActions> = (args) => <CardActions {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Card/stories/CardContent.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 from "../../../components/Typography/HtmlContentBlock";
 import { CardContent } from "../index";
@@ -14,9 +14,9 @@ export default {
             description: "Elements for card content.",
         },
     },
-} as ComponentMeta<typeof CardContent>;
+} as Meta<typeof CardContent>;
 
-const Template: ComponentStory<typeof CardContent> = (args) => <CardContent {...args} />;
+const Template: StoryFn<typeof CardContent> = (args) => <CardContent {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Card/stories/CardHeader.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { CardHeader, CardOptions, CardTitle } from "../index";
 
@@ -19,9 +19,9 @@ export default {
             description: "Elements to include into the header.",
         },
     },
-} as ComponentMeta<typeof CardHeader>;
+} as Meta<typeof CardHeader>;
 
-const Template: ComponentStory<typeof CardHeader> = (args) => <CardHeader {...args} />;
+const Template: StoryFn<typeof CardHeader> = (args) => <CardHeader {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Card/stories/CardOptions.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import IconButton from "../../Icon/IconButton";
 import { CardOptions } from "../index";
@@ -13,9 +13,9 @@ export default {
             description: "Elements for user-interaction.",
         },
     },
-} as ComponentMeta<typeof CardOptions>;
+} as Meta<typeof CardOptions>;
 
-const Template: ComponentStory<typeof CardOptions> = (args) => <CardOptions {...args} />;
+const Template: StoryFn<typeof CardOptions> = (args) => <CardOptions {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Card/stories/CardTitle.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { CardTitle } from "../index";
 
@@ -12,9 +12,9 @@ export default {
             description: "Elements for card title.",
         },
     },
-} as ComponentMeta<typeof CardTitle>;
+} as Meta<typeof CardTitle>;
 
-const Template: ComponentStory<typeof CardTitle> = (args) => <CardTitle {...args} />;
+const Template: StoryFn<typeof CardTitle> = (args) => <CardTitle {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Checkbox/Stories/Checkbox.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 { Checkbox, HtmlContentBlock } from "../../../../index";
 
@@ -10,9 +10,9 @@ export default {
     argTypes: {
         onChange: { action: "clicked" },
     },
-} as ComponentMeta<typeof Checkbox>;
+} as Meta<typeof Checkbox>;
 
-const Template: ComponentStory<typeof Checkbox> = (args) => <Checkbox {...args} />;
+const Template: StoryFn<typeof Checkbox> = (args) => <Checkbox {...args} />;
 
 export const SimpleTextLabel = Template.bind({});
 SimpleTextLabel.args = {

package/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { CodeAutocompleteField, CodeAutocompleteFieldProps } from "../../../index";
 import { IPartialAutoCompleteResult } from "../AutoSuggestion/AutoSuggestion";
@@ -8,6 +9,9 @@ export default {
     title: "Forms/CodeAutocompleteField",
     component: CodeAutocompleteField,
     argTypes: {},
+    args: {
+        onInputChecked: fn(),
+    },
 } as Meta<typeof CodeAutocompleteField>;
 
 const Template: StoryFn<typeof CodeAutocompleteField> = (args) => (

package/src/components/Form/Stories/FieldItem.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 { FieldItem, TextField } from "../../../../index";
 
@@ -12,9 +12,9 @@ export default {
             control: "none",
         },
     },
-} as ComponentMeta<typeof FieldItem>;
+} as Meta<typeof FieldItem>;
 
-const Template: ComponentStory<typeof FieldItem> = (args) => <FieldItem {...args} />;
+const Template: StoryFn<typeof FieldItem> = (args) => <FieldItem {...args} />;
 export const Default = Template.bind({});
 Default.args = {
     children: <TextField />,

package/src/components/Form/Stories/FieldItemRow.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import FieldItem from "../FieldItem";
 import FieldItemRow from "../FieldItemRow";
@@ -15,9 +15,9 @@ export default {
             description: "Elements to include into the Accordion component",
         },
     },
-} as ComponentMeta<typeof FieldItemRow>;
+} as Meta<typeof FieldItemRow>;
 
-const Template: ComponentStory<typeof FieldItemRow> = (args) => <FieldItemRow {...args} />;
+const Template: StoryFn<typeof FieldItemRow> = (args) => <FieldItemRow {...args} />;
 export const Default = Template.bind({});
 Default.args = {
     children: [

package/src/components/Grid/Grid.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-// @ts-ignore // FlexGrid is not part of @types/carbon-components-react
-import { FlexGrid as CarbonGrid, GridDefaultProps } from "carbon-components-react";
+import { FlexGrid as CarbonGrid } from "@carbon/react";
+import { GridProps as CarbonGridProps } from "@carbon/react/es/components/Grid";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "narrow" | "as"> {
+export interface GridProps
+    extends Omit<CarbonGridProps<"article" | "section" | "div">, "fullWidth" | "columns" | "narrow" | "as"> {
     /**
      * The available grid height can be distributed between multiple rows.
      * To do so the `verticalStretched` property must be set for the `<GridRow />` element that need to be stretched.

package/src/components/Grid/GridColumn.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-// import PropTypes from 'prop-types';
-import { Column as CarbonColumn, ColumnDefaultProps } from "carbon-components-react";
+import { Column as CarbonColumn } from "@carbon/react";
+import { ColumnProps as CarbonGridColumnProps } from "@carbon/react/es/components/Grid/Column";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm"> {
+export interface GridColumnProps extends Omit<CarbonGridColumnProps<"div">, "max" | "xlg" | "lg" | "md" | "sm"> {
     /**
      * Column width is small, using 3 (or 2, on medium viewports) parts out of 16.
      * This boolean property is basically a quick switch for setting `{ md:2, lg:3 }`.
@@ -22,7 +22,7 @@ export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg"
     /**
      * Overwrite column sizes by using the original size config of the Carbon grid column.
      */
-    carbonSizeConfig?: Pick<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm">;
+    carbonSizeConfig?: Pick<CarbonGridColumnProps<"div">, "max" | "xlg" | "lg" | "md" | "sm">;
     /**
      * @deprecated
      * Grid column always uses full width if it is the only column and does not have any othe size config.