@eccenca/gui-elements 23.1.0-rc.2 → 23.1.0-rc.4

package/src/cmem/ConfidenceValue/confidencevalue.scss

@@ -0,0 +1,49 @@
+.#{$eccgui}-confidencevalue {
+    display: inline-block;
+    position: relative;
+    width: 5rem;
+}
+
+.#{$eccgui}-confidencevalue--minimalspace {
+    width: auto;
+    min-width: 0;
+}
+
+.#{$eccgui}-confidencevalue--maximalspace {
+    width: auto;
+    min-width: 100%;
+}
+
+.#{$eccgui}-confidencevalue__value {
+    width: 100%;
+    text-align: center;
+}
+
+.#{$eccgui}-confidencevalue__bar {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 3px;
+    background-color: transparent;
+
+    .#{$eccgui}-confidencevalue--center & {
+        left: 50%;
+        width: 50%;
+    }
+
+    .#{$eccgui}-confidencevalue--negative & {
+        transform: rotate(180deg);
+    }
+
+    .#{$eccgui}-confidencevalue--center.#{$eccgui}-confidencevalue--negative & {
+        left: 0;
+        right: 50%;
+    }
+}
+
+.#{$eccgui}-confidencevalue__bar-colorwrapper {
+    & .#{$ns}-progress-meter {
+        background-color: currentColor;
+    }
+}

package/src/cmem/ConfidenceValue/index.ts

@@ -0,0 +1 @@
+export * from "./ConfidenceValue";

package/src/cmem/_index.scss

@@ -1,4 +1,5 @@
 @import "./ActivityControl/activitycontrol";
+@import "./ConfidenceValue/confidencevalue";
 @import "./markdown/markdown";
 @import "./react-flow";
 

package/src/cmem/index.ts

@@ -21,3 +21,5 @@ export type {
     IActivityControlLayoutProps,
     TimeUnits,
 }
+
+export * from "./ConfidenceValue";

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

@@ -36,7 +36,7 @@ This is a paragraph.
     * another line
 3. third item
 
-This is a paragraph with a [text link](http://example.com/).
+This is a paragraph with a [text link](http://example.com/) and a footnote reference [^1].
 
 ## Headline level 2
 ### Headline level 3
@@ -51,5 +51,7 @@ This is a paragraph with a [text link](http://example.com/).
 > With 2 paragraphs.
 
 A line with some <strong>HTML code</strong> inside.
+
+[^1]: This is the text related to the the footnote referrer.
     `
 };

package/src/cmem/markdown/Markdown.tsx

@@ -33,6 +33,11 @@ export interface MarkdownParserProps extends TestableComponent {
      * @see https://github.com/remarkjs/react-markdown#architecture
      */
     reHypePlugins?: PluggableList;
+    /**
+     * Name for browser target where links withing the Markdown content are opened.
+     * Set to `false` to disable this feature.
+     */
+    linkTargetName?: false | string;
 }
 
 const configDefault = {
@@ -60,14 +65,15 @@ const configDefault = {
 
 /** Renders a markdown string. */
 export const Markdown = ({
-                             children,
-                             allowHtml = false,
-                             removeMarkup = false,
-                             inheritBlock = false,
-                             allowedElements,
-                             reHypePlugins,
-                             ...otherProps
-                         }: MarkdownParserProps) => {
+    children,
+    allowHtml = false,
+    removeMarkup = false,
+    inheritBlock = false,
+    allowedElements,
+    reHypePlugins,
+    linkTargetName = "_mdref",
+    ...otherProps
+}: MarkdownParserProps) => {
 
     const configHtml = allowHtml ? {
         rehypePlugins: [...configDefault.rehypePlugins].concat([rehypeRaw]),
@@ -87,15 +93,21 @@ export const Markdown = ({
         ...configDefault,
         ...configHtml,
         ...configTextOnly,
+        linkTarget: linkTargetName ? (href: string, _children: any, _title: string) => {
+            const linkTarget = href.charAt(0) !== "#" ? linkTargetName : "";
+            return linkTarget as React.HTMLAttributeAnchorTarget;
+        } : undefined,
     };
     allowedElements && (reactMarkdownProperties.allowedElements = allowedElements)
     reHypePlugins && reHypePlugins.forEach(plugin => reactMarkdownProperties.rehypePlugins = [...reactMarkdownProperties.rehypePlugins, plugin])
 
+    // @ts-ignore because against the lib spec it does not allow a function for linkTarget.
+    const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />
     return inheritBlock ? (
-        <ReactMarkdown {...reactMarkdownProperties} />
+        markdownDisplay
     ) : (
         <HtmlContentBlock data-test-id={otherProps["data-test-id"]} >
-            <ReactMarkdown {...reactMarkdownProperties} />
+            { markdownDisplay }
         </HtmlContentBlock>
     );
 }

package/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -125,8 +125,8 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'workflow-e1', arrowHeadType: "arrowclosed",source: 'workflow-1', target: 'workflow-2' },
-        { id: 'workflow-e2', arrowHeadType: "arrowclosed",source: 'workflow-2', target: 'workflow-3' },
+        { id: 'workflow-e1', label: "default", arrowHeadType: "arrowclosed",source: 'workflow-1', target: 'workflow-2' },
+        { id: 'workflow-e2', label: "default", arrowHeadType: "arrowclosed",source: 'workflow-2', target: 'workflow-3' },
         { id: 'workflow-e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: 'workflow-3', target: 'workflow-4' },
         { id: 'workflow-e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: 'workflow-4', target: 'workflow-5' },
         { id: 'workflow-e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: 'workflow-5', target: 'workflow-1' },

package/src/cmem/react-flow/_edges.scss

@@ -5,8 +5,9 @@
 }
 
 @mixin edgecoloring($color) {
-    stroke: $color;
-    color: $color;
+    --#{$eccgui}-reactflow-node-color-default: #{$color};
+    --#{$eccgui}-reactflow-node-color-hover: #{$color};
+    --#{$eccgui}-reactflow-node-color-selected: #{$color};
 }
 
 // Graph edge types

package/src/cmem/react-flow/configuration/_colors-workflow.scss

@@ -3,6 +3,7 @@ $reactflow-color-linking-node: #0097a7 !default;
 $reactflow-color-transform-node: #40a691 !default;
 $reactflow-color-task-node: #80b67b !default;
 $reactflow-color-workflow-node: #745a85 !default;
+$reactflow-color-replaceable-input: #faa854 !default;
 
 @function bright($color) {
     @return mix($color, #fff, 24%);
@@ -14,9 +15,11 @@ $reactflow-color-workflow-node: #745a85 !default;
     --transformNode: #{$reactflow-color-transform-node};
     --taskNode: #{$reactflow-color-task-node};
     --workflowNode: #{$reactflow-color-workflow-node};
+    --replaceableInput: #{$reactflow-color-replaceable-input};
     --datasetNodeBright: #{bright($reactflow-color-dataset-node)};
     --linkingNodeBright: #{bright($reactflow-color-linking-node)};
     --transformNodeBright: #{bright($reactflow-color-transform-node)};
     --taskNodeBright: #{bright($reactflow-color-task-node)};
     --workflowNodeBright: #{bright($reactflow-color-workflow-node)};
+    --replaceableInputBright: #{bright($reactflow-color-replaceable-input)};
 }

package/src/common/Intent/index.ts

@@ -1,11 +1,12 @@
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type IntentTypes = "neutral" | "primary" | "accent" | "info" | "success" | "warning" | "danger";
+export type IntentTypes = "none" | "neutral" | "primary" | "accent" | "info" | "success" | "warning" | "danger";
 
 export const Definitions: { [key: string]: IntentTypes; } = {
     PRIMARY: "primary",
     ACCENT: "accent",
     NEUTRAL: "neutral",
+    NONE: "none",
     SUCCESS: "success",
     INFO: "info",
     WARNING: "warning",

package/src/common/utils/CssCustomProperties.ts

@@ -90,7 +90,7 @@ export default class CssCustomProperties {
         const { propertyType = "all", ...otherFilters } = filter;
         return CssCustomProperties.listLocalCssStyleRules(otherFilters)
             .map((cssrule) => {
-                return [...(cssrule as CSSStyleRule).style]
+                return [...(cssrule as any).style]
                     .map((propertyname) => {
                         return [
                             propertyname.trim(),

package/src/components/AutoSuggestion/AutoSuggestion.scss

@@ -1,5 +1,6 @@
 .#{$eccgui}-autosuggestion {
     position: relative;
+    width: 100%;
 
     &__dropdown {
         transition: all 300ms;

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -256,6 +256,15 @@ const AutoSuggestion = ({
         editorState.index = 0
     }, [suggestionResponse, editorState]);
 
+    const inputactionsDisplayed = React.useCallback((node) => {
+        if (!node) return;
+        const width = node.offsetWidth;
+        const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);
+        if (slCodeEditor.length > 0) {
+            slCodeEditor[0].style.paddingRight = `${width}px`;
+        }
+    }, []);
+
     const asyncCheckInput = useMemo(() => async (inputString: string) => {
         if(!checkInput || inputString !== value.current || validationRequestData.current.requestId === inputString) {
             return
@@ -463,7 +472,7 @@ const AutoSuggestion = ({
                     />
                 </ContextOverlay>
                 {!!value.current && (
-                    <span className={BlueprintClassNames.INPUT_ACTION}>
+                    <span className={BlueprintClassNames.INPUT_ACTION} ref={inputactionsDisplayed}>
                         <IconButton
                             data-test-id={"value-path-clear-btn"}
                             name="operation-clear"

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -49,22 +49,21 @@ const SingleLineCodeEditor = ({
                                   placeholder,
                                   showScrollBar = true
                               }: IEditorProps) => {
+    const singleLineInitialContent = React.useRef(initialValue.replace(/[\r\n]/g, " "))
     return (
         <div className={`${eccgui}-singlelinecodeeditor ${BlueprintClassNames.INPUT}`}>
             <UnControlledEditor
         editorDidMount={(editor: any) => {
           editor.on("beforeChange", (_: any, change: any) => {
             // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
-            const newText = change.text.join("").replace(/\n/g, "");
-            //failing unexpectedly during undo and redo
-            if (change.update && typeof change.update === "function") {
-              change.update(change.from, change.to, [newText]);
+            if (change.update && typeof change.update === "function" && change.text.length > 1) {
+              change.update(change.from, change.to, [change.text.join("")]);
             }
             return true;
           });
           setEditorInstance(editor);
         }}
-        value={initialValue}
+        value={singleLineInitialContent.current}
         onFocus={() => onFocusChange(true)}
         onBlur={() => onFocusChange(false)}
         options={{
@@ -89,11 +88,10 @@ const SingleLineCodeEditor = ({
               editor.getScrollInfo()
           );
         }}
-        onBeforeChange={(_editor, _data, value, next) => {
-            // Remove entered new lines
-            const trimmedValue = value.replace(/[\r\n]/g, "");
-            if (trimmedValue !== value) {
-                _editor.setValue(trimmedValue)
+        onBeforeChange={(_editor, data, _, next) => {
+            // Reduce multiple lines to a single line
+            if (data.text.length > 1) {
+                _editor.setValue(data.text.join(""))
             }
             next()
         }}

package/src/components/AutoSuggestion/tests/SingleLineCodeEditor.test.tsx

@@ -53,4 +53,9 @@ describe("SingleLineCodeEditor", () => {
             .setValue("I'm entering a new line \n character");
         expect(codeMirrorEditorInstance.lineCount()).toBe(1);
     });
+
+    it("should convert multiple lines to a single line", () => {
+        render(<SingleLineEditor {...{...props, initialValue: "1\n2\n3"}} />);
+        expect(codeMirrorEditorInstance.lineCount()).toBe(1);
+    });
 });

package/src/components/Badge/badge.scss

@@ -14,11 +14,8 @@
 }
 
 .#{$eccgui}-badge--inline {
-    display: inline-block;
-
-    &.#{$eccgui}-badge--icon {
-        vertical-align: middle;
-    }
+    display: inline-flex;
+    vertical-align: middle;
 }
 
 .#{$eccgui}-badge--bottom-right {

package/src/components/Card/Card.tsx

@@ -24,6 +24,10 @@ export interface CardProps extends BlueprintCardProps {
      * Property value defined which part of the card is always scrolled in, this may important when the card is larger than the viewport.
      */
     scrollinOnFocus?: "start" | "center" | "end";
+    /**
+     * Controls how much whitespace is displayed within the card subelements.
+     */
+    whitespaceAmount?: "none" | "small" | "medium" | "large";
 }
 
 /**
@@ -38,6 +42,7 @@ function Card({
     fullHeight=false,
     elevated=false,
     scrollinOnFocus,
+    whitespaceAmount="medium",
     interactive,
     ...otherProps
 }: CardProps) {
@@ -55,11 +60,12 @@ function Card({
     const cardElement = (
         <BlueprintCard
             className={
-                `${eccgui}-card ` +
-                (fullHeight ? ` ${eccgui}-card--fullheight ` : '') +
-                (elevated ? ` ${eccgui}-card--elevated ` : '') +
-                (!!scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus ` : '') +
-                className
+                `${eccgui}-card` +
+                (fullHeight ? ` ${eccgui}-card--fullheight` : '') +
+                (elevated ? ` ${eccgui}-card--elevated` : '') +
+                (!!scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus` : '') +
+                (whitespaceAmount !== "medium" ? ` ${eccgui}-card--whitespace-${whitespaceAmount}` : '') +
+                (!!className ? ` ${className}` : "")
             }
             elevation={elevation}
             interactive={!!otherProps.onClick ? true : interactive}

package/src/components/Card/CardContent.tsx

@@ -2,6 +2,12 @@ import React from 'react';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Usually `CardContent` uses all the remaining space inside a card.
+     * This behaviour can be changed by this option, so that the content section is not vertically grown or shrinked.
+     * You may use this then you have multiple content sections in one card but not all those sections should be grown or shrinked regarding the remaining space.
+     */
+    noFlexHeight?: boolean;
 }
 
 /**
@@ -11,12 +17,17 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
 function CardContent({
     children,
     className='',
+    noFlexHeight,
     ...otherProps
 }: CardContentProps) {
     return (
         <div
             {...otherProps}
-            className={`${eccgui}-card__content ` + className}
+            className={
+                `${eccgui}-card__content` +
+                (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
+                (!!className ? ` ${className}` : "")
+            }
         >
             {children}
         </div>

package/src/components/Card/CardHeader.tsx

@@ -5,8 +5,16 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import CardTitle from "./CardTitle";
 import CardOptions from "./CardOptions";
 
-interface CardHeaderProps extends OverviewItemProps {
+interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
     children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
+    /**
+     * @deprecated
+     */
+    densityHigh?: OverviewItemProps["densityHigh"];
+    /**
+     * @deprecated
+     */
+    hasSpacing?: OverviewItemProps["hasSpacing"];
 }
 
 function CardHeader({

package/src/components/Card/card.scss

@@ -53,6 +53,18 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     box-sizing: content-box;
     flex-grow: 0;
     flex-shrink: 0;
+
+    .#{$eccgui}-card--whitespace-none > header > & {
+        padding: 0
+    }
+
+    .#{$eccgui}-card--whitespace-small > header > & {
+        padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.5;
+    }
+
+    .#{$eccgui}-card--whitespace-large > header > & {
+        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing * 2;
+    }
 }
 
 .#{$eccgui}-card__title {
@@ -82,28 +94,102 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     }
 }
 
+.#{$eccgui}-card__options {
+    flex-shrink: 1;
+    max-width: calc(100% - #{$eccgui-size-card-spacing * 1.5});
+
+    & > .#{$eccgui}-button:not(.#{$eccgui}-button--icon) {
+        flex-shrink: 1;
+
+        .#{$ns}-button-text {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+
 .#{$eccgui}-card__content {
     padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing;
     flex-grow: 1;
     flex-shrink: 1;
     overflow: auto;
 
+    .#{$eccgui}-card--whitespace-none > & {
+        padding: 0;
+    }
+
+    .#{$eccgui}-card--whitespace-small > & {
+        padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5;
+    }
+
+    .#{$eccgui}-card--whitespace-large > & {
+        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing * 2 $eccgui-size-card-spacing * 2 $eccgui-size-card-spacing * 2;
+    }
+
     .#{$eccgui}-separation__divider-horizontal + &,
     &:first-child {
         padding-top: $eccgui-size-card-spacing;
+
+        .#{$eccgui}-card--whitespace-none > & {
+            padding-top: 0;
+        }
+
+        .#{$eccgui}-card--whitespace-small > & {
+            padding-top: $eccgui-size-card-spacing * 0.5;
+        }
+
+        .#{$eccgui}-card--whitespace-large > & {
+            padding-top: $eccgui-size-card-spacing * 2;
+        }
     }
 }
 
+.#{$eccgui}-card__content--noflexheight {
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
 .#{$eccgui}-card__actions {
-    padding: $eccgui-size-card-spacing * 0.25;
+    padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing;
     flex-grow: 0;
     flex-shrink: 0;
     display: flex;
     flex-flow: row wrap;
     align-items: center;
 
+    .#{$eccgui}-card--whitespace-none > & {
+        padding: 0;
+    }
+
+    .#{$eccgui}-card--whitespace-small > & {
+        padding: $eccgui-size-card-spacing * 0.125 $eccgui-size-card-spacing * 0.5;
+    }
+
+    .#{$eccgui}-card--whitespace-large > & {
+        padding: $eccgui-size-card-spacing * 0.75 $eccgui-size-card-spacing * 2;
+    }
+
     & > * {
-        margin: $eccgui-size-card-spacing * 0.25;
+        margin: $eccgui-size-card-spacing * 0.25 0;
+    }
+
+    &:not(.#{$eccgui}-card__actions--inversedirection) > * {
+        &:not(:first-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+    }
+
+    &.#{$eccgui}-card__actions--inversedirection > * {
+        &:not(:first-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
     }
 
     &.#{$eccgui}-intent--success > .#{$eccgui}-button:first-child {
@@ -131,9 +217,28 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     flex-flow: row wrap;
     justify-content: flex-end;
     align-items: center;
+    margin: 0;
 
     & > * {
-        margin: $eccgui-size-card-spacing * 0.25;
+        margin: $eccgui-size-card-spacing * 0.25 0;
+    }
+
+    &:not(.#{$eccgui}-card__actions--inversedirection) > * {
+        &:not(:first-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+    }
+
+    &.#{$eccgui}-card__actions--inversedirection > * {
+        &:not(:first-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
     }
 
     .#{$eccgui}-card__actions--inversedirection > & {

package/src/components/Checkbox/checkbox.scss

@@ -28,6 +28,8 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
 @import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
 
 .#{$ns}-control {
+    max-width: 100%;
+
     &.#{$ns}-checkbox {
         input ~ .#{$ns}-control-indicator,
         input:checked ~ .#{$ns}-control-indicator,
@@ -64,6 +66,8 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
     }
 }
 
-.#{$ns}-control-indicator + * {
-    margin-top: -1 * $eccgui-size-typo-text * $eccgui-size-typo-text-lineheight;
+.#{$ns}-control-indicator + *,
+.#{$ns}-control-indicator + .#{$eccgui}-typography__overflowtext {
+    display: inline-block;
+    vertical-align: text-top;
 }

package/src/components/Depiction/Depiction.tsx

@@ -92,18 +92,18 @@ export function Depiction({
 }: DepictionProps) {
     const containerRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
-        if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
-            let color = Color("#ffffff")
-            try {
-                color = Color(backgroundColor);
-            } catch(ex) {
-                console.warn("Received invalid background color for depiction: " + backgroundColor)
+    let styleDepictionColors = {};
+    if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
+        try {
+            const color = Color(backgroundColor);
+            styleDepictionColors = {
+                [`--${eccgui}-depiction-background`]: color.rgb().toString(),
+                [`--${eccgui}-depiction-color`]: decideContrastColorValue({testColor: color})
             }
-            containerRef.current!.style.setProperty(`--${eccgui}-depiction-background`, color.rgb().toString());
-            containerRef.current!.style.setProperty(`--${eccgui}-depiction-color`, decideContrastColorValue({testColor: color}));
+        } catch(ex) {
+            console.warn("Received invalid background color for depiction: " + backgroundColor)
         }
-    }, [backgroundColor]);
+    }
 
     const updateSvgResizing = React.useCallback((el: SVGElement) => {
         let preserveAspectRatio = "";
@@ -164,6 +164,7 @@ export function Depiction({
                 (rounded ? ` ${eccgui}-depiction__image--roundedborder` : '') +
                 (padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : '')
             }
+            style={styleDepictionColors as React.CSSProperties}
         >
             {depiction}
         </div>

package/src/components/Grid/Grid.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { FlexGrid as CarbonGrid, GridDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface GridProps extends Omit<GridDefaultProps, "fullWidth"> {
+interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "narrow"> {
     /**
      * 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

@@ -3,7 +3,7 @@ import React from "react";
 import { Column as CarbonColumn, ColumnDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface GridColumnProps extends ColumnDefaultProps {
+interface GridColumnProps extends Omit<ColumnDefaultProps, "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 }`.

package/src/components/Grid/GridRow.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Row as CarbonRow, RowDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface GridRowProps extends RowDefaultProps {
+interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
     /**
      * Do not wrap column children when there is not enough space available.
      * This only works for grids on medium sized and larger viewports.