@eccenca/gui-elements 23.0.0-rc.3-unofficial.0 → 23.0.0-rc.4

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -13,8 +13,9 @@ import {
     Tooltip,
 } from "./../../";
 import { ISuggestionWithReplacementInfo } from "./AutoSuggestion";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface IDropdownProps {
+export interface IDropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     // The options of the drop down
     options: Array<ISuggestionWithReplacementInfo>;
     // Called when an item has been selected from the drop down
@@ -78,6 +79,7 @@ export const AutoSuggestionList = ({
     left,
     currentlyFocusedIndex,
     itemToHighlight,
+    ...otherDivProps
 }: IDropdownProps) => {
     const [hoveredItem, setHoveredItem] = React.useState<
         ISuggestionWithReplacementInfo | undefined
@@ -132,7 +134,8 @@ export const AutoSuggestionList = ({
     if (!loadingOrHasSuggestions || !isOpen) return null;
     return (
         <div
-            className="ecc-auto-suggestion-box__dropdown"
+            {...otherDivProps}
+            className={`${eccgui}-autosuggestion__dropdown`}
             style={{ left }}
             ref={dropdownRef}
         >

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { Controlled as ControlledEditor } from "react-codemirror2";
 import { Classes as BlueprintClassNames } from "@blueprintjs/core";
 import {Editor as CodeMirrorEditor} from "codemirror";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface IEditorProps {
   // Is called with the editor instance that allows access via the CodeMirror API
@@ -11,7 +12,7 @@ export interface IEditorProps {
   // Called whenever the editor content changes
   onChange: (value: string) => any
   // Called when the cursor position changes
-  onCursorChange: (pos: any, coords: any) => any
+  onCursorChange: (pos: any, coords: any, scrollinfo: any) => any
   // The editor theme, e.g. "sparql"
   mode?: string
   // The initial value of the editor
@@ -49,7 +50,7 @@ const SingleLineCodeEditor = ({
                                   showScrollBar = true
                               }: IEditorProps) => {
     return (
-        <div className={"ecc-input-editor " + BlueprintClassNames.INPUT}>
+        <div className={`${eccgui}-singlelinecodeeditor ${BlueprintClassNames.INPUT}`}>
             <ControlledEditor
         editorDidMount={(editor) => {
           editor.on("beforeChange", (_, change) => {
@@ -82,7 +83,11 @@ const SingleLineCodeEditor = ({
           }
         }}
         onCursor={(editor, data) => {
-          onCursorChange(data, editor.cursorCoords(true, "div"));
+          onCursorChange(
+              data,
+              editor.cursorCoords(true, "local"),
+              editor.getScrollInfo()
+          );
         }}
         onBeforeChange={(_editor, _data, value) => {
           const trimmedValue = value.replace(/\n/g, "");

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

@@ -71,7 +71,7 @@ describe("Dropdown list", () => {
            left: 10
        }
        const {container} = render(<AutoSuggestionList {...props} />)
-       const parentDiv:HTMLElement = container.querySelector(".ecc-auto-suggestion-box__dropdown")!!
+       const parentDiv:HTMLElement = container.querySelector(`.${eccgui}-autosuggestion__dropdown`)!!
        const leftOffset = Number(parentDiv.style.left.replace(/px$/,""));
        expect(leftOffset).toBe(props.left)
     })

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

@@ -5,6 +5,7 @@ import SingleLineEditor, {
     IEditorProps,
 } from "../SingleLineCodeEditor";
 import CodeMirror from "codemirror";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
 describe("SingleLineCodeEditor", () => {
     let props: IEditorProps,
@@ -26,7 +27,7 @@ describe("SingleLineCodeEditor", () => {
 
     it("should render properly", () => {
         const { container } = render(<SingleLineEditor {...props} />);
-        expect(container.querySelector(".ecc-input-editor")).not.toBeNull();
+        expect(container.querySelector(`.${eccgui}-singlelinecodeeditor`)).not.toBeNull();
     });
 
     it("should set the editorInstance immediately it's mounted", () => {

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -223,7 +223,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     );
 
     useEffect(() => {
-        if (!disabled && hasFocus) {
+        if (!disabled && !otherProps.inputProps?.readOnly && hasFocus) {
             setListLoading(true);
             const timeout: number = window.setTimeout(async () => {
                 fetchQueryResults(query);
@@ -351,7 +351,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         return <Notification danger={true} message={requestError} />
     }
     // Optional clear button to reset the selected value
-    const clearButton = reset &&
+    const clearButton = !disabled && reset &&
         selectedItem != null &&
         reset.resettableValue(selectedItem) ? (
             <IconButton
@@ -370,7 +370,9 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         onBlur: handleOnFocusOut,
         onFocus: handleOnFocusIn,
         ...otherProps.inputProps,
+        title: (selectedItem !== undefined && (!!otherProps.inputProps?.readOnly || disabled)) ? itemValueString(selectedItem) : otherProps.inputProps?.title,
     };
+    const preventOverlayOnReadonly = !!otherProps.inputProps?.readOnly ? { isOpen: false } : {}
     const updatedContextOverlayProps: Partial<Omit<ContextOverlayProps, "content" | "children">> = {
         minimal: true,
         placement: "bottom-start",
@@ -378,6 +380,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         rootBoundary: "viewport",
         onClosed: onPopoverClose,
         ...otherProps.contextOverlayProps,
+        ...preventOverlayOnReadonly,
     }
     if(selectedItem !== undefined) {
         // Makes sure that even when an empty string is selected, the placeholder won't be shown.

package/src/components/AutocompleteField/stories/AutoCompleteField.stories.tsx

@@ -20,6 +20,7 @@ export const Default = Template.bind({});
 export const AdaptQueryAfterSelection = Template.bind({})
 export const AllowReset = Template.bind({})
 export const AllowCustomValues = Template.bind({})
+export const ReadOnlyState = Template.bind({})
 
 // Renders string values as string
 const defaultRenderer = (item: string) => item
@@ -37,7 +38,7 @@ const defaultArgs: IAutoCompleteFieldProps<string, string> = {
         console.log(`Entry '${elem}' selected!`)
     },
     itemValueSelector: defaultRenderer,
-    noResultText: "No result"
+    noResultText: "No result",
 }
 
 // Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
@@ -67,9 +68,19 @@ const allowCustomValues: IAutoCompleteFieldProps<string, string> = {
     }
 }
 
+// Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
+const readOnlyState: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    initialValue: "search item B",
+    inputProps: {
+        readOnly: true
+    }
+}
+
 Default.args = defaultArgs;
-AdaptQueryAfterSelection.args = adaptQueryAfterSelection
-AllowReset.args = resetSelection
-AllowCustomValues.args = allowCustomValues
+AdaptQueryAfterSelection.args = adaptQueryAfterSelection;
+AllowReset.args = resetSelection;
+AllowCustomValues.args = allowCustomValues;
+ReadOnlyState.args = readOnlyState;
 
 export default AutoCompleteFieldStory

package/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -2,14 +2,14 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import {
     Breadcrumb as BlueprintBreadcrumbItem,
-    IBreadcrumbProps as IBlueprintBreadcrumbItemProps,
+    BreadcrumbProps as BlueprintBreadcrumbItemProps,
 } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { openInNewTab } from "../../common/utils/openInNewTab";
 
 // FIXME: enforce href and remove onClick later
-export type IBreadcrumbItemProps = Omit<
-    IBlueprintBreadcrumbItemProps,
+export type BreadcrumbItemProps = Omit<
+    BlueprintBreadcrumbItemProps,
     // we remove some properties that are currently not necessary, required usage should be discussed
     "icon" |
     "iconTitle" |
@@ -17,13 +17,17 @@ export type IBreadcrumbItemProps = Omit<
     "target"
 >;
 
+/**
+ * Item of the breadcrumbs list.
+ * It cannot be used directly but the properties can be used within the elements of the `BreadcrumbList.items` property.
+ */
 function BreadcrumbItem({
     className = "",
     onClick,
     href,
     //itemDivider='',
     ...otherBlueprintBreadcrumbProps
-}: IBreadcrumbItemProps) {
+}: BreadcrumbItemProps) {
 
     /*
         FIXME: adding `data-divider` does not work this way because BlueprintJS
@@ -32,11 +36,16 @@ function BreadcrumbItem({
         CSS/Sass as content for the pseudo element, currently done static in CSS
         with slash char.
     */
+
+    const allowActions = !otherBlueprintBreadcrumbProps.current && !otherBlueprintBreadcrumbProps.disabled;
+    const actions = allowActions ? {
+        href,
+        onClick: (e:React.MouseEvent<HTMLElement>) => openInNewTab(e, onClick, href),
+    } : {};
     return (
       <BlueprintBreadcrumbItem
         {...otherBlueprintBreadcrumbProps}
-        href={href}
-        onClick={(e) => openInNewTab(e, onClick, href)}
+        {...actions}
         className={`${eccgui}-breadcrumb__item ` + className}
         /* data-divider={itemDivider ? itemDivider : ''} */
       />

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -1,14 +1,14 @@
-import React from "react";
+import React, {useCallback} from "react";
 import {
-    Breadcrumbs as BlueprintBreadcrumbList,
-    IBreadcrumbsProps as IBlueprintBreadcrumbsProps,
-} from "@blueprintjs/core";
+    Breadcrumbs2 as BlueprintBreadcrumbList,
+    Breadcrumbs2Props as BlueprintBreadcrumbsProps,
+} from "@blueprintjs/popover2";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import BreadcrumbItem from "./BreadcrumbItem";
-import { IBreadcrumbItemProps } from "./BreadcrumbItem";
+import { BreadcrumbItemProps } from "./BreadcrumbItem";
 
 type ReducedBreadcrumbsProps = Omit<
-    IBlueprintBreadcrumbsProps,
+    BlueprintBreadcrumbsProps,
     // we remove some properties that are currently not necessary, required usage should be discussed
     "breadcrumbRenderer" |
     "collapseFrom" |
@@ -19,15 +19,15 @@ type ReducedBreadcrumbsProps = Omit<
 >;
 
 // FIXME: enforce onItemClick later when href value can always be routed correctly
-interface IBreadcrumbListProps extends ReducedBreadcrumbsProps {
+interface BreadcrumbListProps extends ReducedBreadcrumbsProps {
     /**
         list of breadcrumb items to display
     */
-    items: IBreadcrumbItemProps[];
+    items: BreadcrumbItemProps[];
     /**
         click handler used on breadcrumb items
     */
-    onItemClick?(itemUrl: string, event: object): any;
+    onItemClick?(itemUrl: string | undefined, event: object): any;
     /**
         native attributes for the unordered HTML list (ul)
     */
@@ -35,17 +35,32 @@ interface IBreadcrumbListProps extends ReducedBreadcrumbsProps {
     /**
         char that devides breadcrumb items, default: "/" (currently unsupported)
     */
-    itemDivider?: never;
+    //itemDivider?: never;
+    /**
+     * Do not re-render breadcrumbs in a shortened version if they overflow the available space.
+     */
+    ignoreOverflow?: boolean;
+    /**
+     * If set to `true` then breadcrumb items can shrink.
+     * This way we cannot prevent overflowing breadcrumbs completely but this happens very late.
+     * You should enable this when `ignoreOverflow` is `true`.
+     */
+    latenOverflow?: boolean;
 }
 
+/**
+ * Navigation path to the currently show resource or view in the application.
+ */
 function BreadcrumbList({
     className = "",
     // itemDivider = "/",
     onItemClick,
     htmlUlProps,
+    ignoreOverflow = false,
+    latenOverflow = false,
     ...otherBlueprintBreadcrumbsProps
-}: IBreadcrumbListProps) {
-    const renderBreadcrumb = (propsBreadcrumb: any) => {
+}: BreadcrumbListProps) {
+    const renderBreadcrumb = useCallback((propsBreadcrumb: BreadcrumbItemProps) => {
         const {onClick, ...otherProps} = propsBreadcrumb;
         return (
             <BreadcrumbItem
@@ -60,20 +75,29 @@ function BreadcrumbList({
                 }
             />
         );
-    };
+    }, [onItemClick]);
+
+    const renderCurrentBreadcrumb = React.useCallback((propsBreadcrumb: BreadcrumbItemProps) => {
+        return <BreadcrumbItem {...propsBreadcrumb} current={true} /*itemDivider={itemDivider}*/ />;
+    }, []);
 
-    const renderCurrentBreadcrumb = (propsBreadcrumb: any) => {
-        return <BreadcrumbItem {...propsBreadcrumb} current={true} href={null} onClick={null} /*itemDivider={itemDivider}*/ />;
-    };
+    const overflowListProps = React.useMemo(() => ignoreOverflow ? {
+        minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
+    } : {}, [ignoreOverflow, otherBlueprintBreadcrumbsProps.items.length])
 
     return (
         <BlueprintBreadcrumbList
             {...otherBlueprintBreadcrumbsProps}
             {...htmlUlProps}
-            className={`${eccgui}-breadcrumb__list ` + className}
+            className={
+                `${eccgui}-breadcrumb__list` +
+                (latenOverflow ? ` ${eccgui}-breadcrumb__list--latenoverflow` : "") +
+                (className ? ` ${className}` : "")
+            }
             minVisibleItems={1}
             breadcrumbRenderer={renderBreadcrumb}
             currentBreadcrumbRenderer={renderCurrentBreadcrumb}
+            overflowListProps={overflowListProps}
         />
     );
 }

package/src/components/Breadcrumb/breadcrumb.scss

@@ -5,7 +5,6 @@
     height: auto;
 
     & > li {
-
         &:last-of-type {
             min-width: 0;
         }
@@ -39,9 +38,37 @@
     }
 }
 
+.#{$eccgui}-breadcrumb__list--latenoverflow {
+    & > li {
+        flex-shrink: 1;
+        min-width: 0;
+    }
+
+    .#{$eccgui}-breadcrumb__item > * {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        vertical-align: middle;
+        display: inline;
+    }
+}
+
 .#{$eccgui}-breadcrumb__item {
     font-size: inherit;
     overflow: hidden;
     text-overflow: ellipsis;
     display: inline-block;
 }
+
+a.#{$eccgui}-breadcrumb__item {
+    &:not(.#{$ns}-breadcrumb-current):not(.#{$ns}-disabled) {
+        text-decoration: underline;
+        &:hover,
+        &:focus {
+            text-decoration: none;
+        }
+    }
+    a {
+        @extend .#{$eccgui}-breadcrumb__item;
+        @extend .#{$ns}-breadcrumb;
+    }
+}

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { BreadcrumbItem } from './../../../index';
+
+export default {
+    title: "Components/Breadcrumbs/Item",
+    component: BreadcrumbItem,
+    argTypes: {
+    },
+}  as ComponentMeta<typeof BreadcrumbItem>
+
+const Template: ComponentStory<typeof BreadcrumbItem> = (args) => (
+    <BreadcrumbItem {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    text : 'Breadcrumb item',
+};

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { BreadcrumbList, BreadcrumbItem } from './../../../index';
+
+export default {
+    title: "Components/Breadcrumbs/List",
+    component: BreadcrumbList,
+    subcomponents: { BreadcrumbItem },
+    argTypes: {
+    },
+}  as ComponentMeta<typeof BreadcrumbList>
+
+const Template: ComponentStory<typeof BreadcrumbList> = (args) => (
+    <BreadcrumbList  {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    items : [
+        {text: "Root page", href : "#" },
+        {text: "Main click category", onClick: () => alert("Breadcrumb click")},
+        {text: <div>Sub category item</div>, href: "#"},
+        {text: <span>Disabled breadcrumb with a very long title</span>, disabled: true},
+        {text: <a href="#wrong">Wrongly placed link inside link</a>},
+        {text: "Current breadcrumb item", current: true}
+    ],
+};

package/src/components/Card/Card.tsx

@@ -49,7 +49,7 @@ function Card({
                 behavior: "smooth",
                 block: scrollinOnFocus,
                 inline: scrollinOnFocus,
-            })}, 100);
+            })}, 200);
         }
     } : {}
     const cardElement = (

package/src/components/Card/CardContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 /**
@@ -12,7 +12,7 @@ function CardContent({
     children,
     className='',
     ...otherProps
-}: OverviewItemProps) {
+}: CardContentProps) {
     return (
         <div
             {...otherProps}

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -38,6 +38,8 @@ interface ContextMenuProps extends TestableComponent {
      * Props to spread to `ContextOverlay` that is used to display the dropdown.
      */
     contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children" | "className">>
+    /** Disables the button to open the menu. */
+    disabled?: boolean
 }
 
 /**
@@ -49,6 +51,7 @@ function ContextMenu({
     togglerElement = "item-moremenu",
     togglerText = "Show more options",
     contextOverlayProps,
+    disabled,
     togglerLarge = false,
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
@@ -68,6 +71,7 @@ function ContextMenu({
                     name={[togglerElement]}
                     text={togglerText}
                     large={togglerLarge}
+                    disabled={!!disabled}
                     data-test-id={restProps["data-test-id"]}
                 />
             ) : (

package/src/components/Form/FieldItem.tsx

@@ -13,7 +13,7 @@ import {TestableComponent} from "../interfaces";
     * input id could be created when not given
 */
 
-interface IProps extends TestableComponent {
+export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
     hasStatePrimary?: boolean
     hasStateSuccess?: boolean
     hasStateWarning?: boolean
@@ -26,6 +26,9 @@ interface IProps extends TestableComponent {
     messageText?: string
 }
 
+/**
+ * Form element that manages the combination of label, helper texts, input element and feedback messages.
+ */
 function FieldItem({
     hasStatePrimary = false,
     hasStateSuccess = false,
@@ -38,7 +41,7 @@ function FieldItem({
     helperText,
     messageText,
     ...otherProps
-}: IProps) {
+}: FieldItemProps) {
     let classIntent = "";
     switch (true) {
         case hasStatePrimary:
@@ -79,10 +82,10 @@ function FieldItem({
 
     return (
         <div
-            data-test-id={otherProps["data-test-id"]}
             className={
                 `${eccgui}-fielditem` + (className ? " " + className : "") + (disabled ? ` ${eccgui}-fielditem--disabled` : "")
             }
+            {...otherProps}
         >
             {label}
             {userhelp}

package/src/components/Form/FieldItemRow.tsx

@@ -1,12 +1,34 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-/*
-    FIXME: allow grow factors for children
-*/
-/** Allows to layout field items horizontally. */
-function FieldItemRow({ children, className, ...otherProps }: any) {
-    return <div className={`${eccgui}-fielditem__row` + (className ? " " + className : "")} {...otherProps}>{children}</div>;
+export interface FieldItemRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If set to `true` all `FieldItem` childrens have the same width.
+     */
+    justifyItemWidths?: boolean;
+}
+
+/**
+ * Allows to display `FieldItem` children horizontally in one row.
+ */
+function FieldItemRow({
+    children,
+    className,
+    justifyItemWidths = false,
+    ...otherProps
+}: FieldItemRowProps) {
+    return (
+        <div
+            className={
+                `${eccgui}-fielditem__row` +
+                (justifyItemWidths ? ` ${eccgui}-fielditem__row--justified` : "") +
+                (className ? ` ${className}` : "")
+            }
+            {...otherProps}
+        >
+            {children}
+        </div>
+    );
 }
 
 export default FieldItemRow;

package/src/components/Form/form.scss

@@ -157,3 +157,9 @@ form {
         margin-bottom: $eccgui-size-block-whitespace;
     }
 }
+
+.#{$eccgui}-fielditem__row--justified {
+    & > .#{$eccgui}-fielditem {
+        width: 100%;
+    }
+}

package/src/components/Grid/Grid.tsx

@@ -2,14 +2,20 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import { Grid as CarbonGrid } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {GridDefaultProps} from "carbon-components-react/lib/components/Grid/Grid";
+
+interface GridProps extends GridDefaultProps {
+    verticalStretchable?: boolean
+    useAbsoluteSpace?: boolean
+}
 
 function Grid({
     children,
-    verticalStretchable,
-    useAbsoluteSpace,
+    verticalStretchable = false,
+    useAbsoluteSpace = false,
     className = '',
     ...restProps
-}: any) {
+}: GridProps) {
     return (
         <CarbonGrid
             {...restProps}

package/src/components/Grid/GridColumn.tsx

@@ -2,6 +2,14 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import { Column as CarbonColumn } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {ColumnDefaultProps} from "carbon-components-react/lib/components/Grid/Column";
+
+interface GridColumnProps extends ColumnDefaultProps {
+    small?: boolean
+    medium?: boolean
+    full?: boolean
+    verticalAlign?: "center"
+}
 
 function GridColumn({
     children,
@@ -9,9 +17,9 @@ function GridColumn({
     small = false,
     medium = false,
     full = true,
-    verticalAlign = '',
+    verticalAlign,
     ...otherProps
-}: any) {
+}: GridColumnProps) {
     let sizeConfig = {};
     if (small) sizeConfig = { md:2, lg:3 };
     if (medium) sizeConfig = { md:3, lg:5 };

package/src/components/Grid/GridRow.tsx

@@ -2,6 +2,13 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import { Row as CarbonRow } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {RowDefaultProps} from "carbon-components-react/lib/components/Grid/Row";
+
+interface GridRowProps extends RowDefaultProps {
+    dontWrapColumns?: boolean
+    fullHeight?: boolean
+    verticalStretched?: boolean
+}
 
 function GridRow({
     children,
@@ -10,7 +17,7 @@ function GridRow({
     fullHeight = false,
     verticalStretched,
     ...otherProps
-}: any) {
+}: GridRowProps) {
     return (
         <CarbonRow
             {...otherProps}