@eccenca/gui-elements 23.0.0 → 23.1.0-rc.1

package/src/components/Icon/index.ts

@@ -0,0 +1,5 @@
+import Icon, { IconProps } from "./Icon";
+import TestIcon, { TestIconProps } from "./TestIcon";
+
+export { Icon, TestIcon };
+export type { IconProps, TestIconProps };

package/src/components/Icon/stories/Icon.stories.tsx

@@ -32,6 +32,19 @@ Default.args = {
     name: "undefined"
 }
 
+const TemplateSizes: ComponentStory<typeof Icon> = (args) => (
+    <>
+        <Icon {...args} small />
+        <Icon {...args} />
+        <Icon {...args} large />
+    </>
+);
+
+export const IconSizes = TemplateSizes.bind({});
+IconSizes.args = {
+    name: "undefined"
+}
+
 export const IconsOverview = () => {
     return (
         <>

package/src/components/Icon/stories/IconButton.stories.tsx

@@ -1,27 +1,34 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import {
-    IconButton,
-} from "../../../index";
+import { LogoReact } from "@carbon/icons-react";
+import { IconButton,TestIcon } from "../../../index";
 import canonicalIcons from "./../canonicalIconNames";
 
 export default {
     title: "Components/IconButton",
     component: IconButton,
     argTypes: {
+        text: { control: "text" },
         name: {
             control: "select",
-            options: [...(Object.keys(canonicalIcons))],
+            options: [
+            "Test icon",
+                ...(Object.keys(canonicalIcons)),
+            ],
+            mapping: {
+            "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon"/>,
+                ...(Object.keys(canonicalIcons)),
+            }
         },
     },
 } as ComponentMeta<typeof IconButton>;
 
 const Template: ComponentStory<typeof IconButton> = (args) => (
-    <IconButton {...args} text={args.name?.toString()}/>
+    <IconButton {...args} />
 );
 
 export const Default = Template.bind({});
 Default.args = {
-    name: "item-moremenu"
+    name: "item-moremenu",
+    text: "Tooltip text"
 }

package/src/components/Icon/stories/TestIcon.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LogoReact } from "@carbon/icons-react";
+import { TestIcon } from "../../../index";
+import { Definitions } from "../../../common/Intent";
+
+export default {
+    title: "Components/Icon",
+    component: TestIcon,
+    argTypes: {
+        tryout: {
+            control: "none",
+        },
+        intent: {
+            control: "select",
+            options: {...Definitions},
+        },
+    },
+} as ComponentMeta<typeof TestIcon>;
+
+const Template: ComponentStory<typeof TestIcon> = (args) => (
+    <TestIcon {...args} />
+);
+
+export const TestingAnIcon = Template.bind({});
+TestingAnIcon.args = {
+    tryout: LogoReact,
+}

package/src/components/Link/link.scss

@@ -1,4 +1,5 @@
-@import "~carbon-components/scss/components/link/link";
+@use "~@carbon/styles/scss/components/link/link";
+@include link.link;
 
 .#{$prefix}--link {
     font-size: 1em;

package/src/components/Menu/MenuItem.tsx

@@ -1,15 +1,19 @@
 import React from 'react';
-import {MenuItem as BlueprintMenuItem, MenuItemProps as BlueprintMenuItemProps} from "@blueprintjs/core";
+import {
+    MenuItem as BlueprintMenuItem,
+    MenuItemProps as BlueprintMenuItemProps
+} from "@blueprintjs/core";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import Icon from '../Icon/Icon';
+import { TestIconProps } from "./../Icon/TestIcon";
 import { openInNewTab } from '../../common/utils/openInNewTab';
-import {ValidIconName} from "../Icon/canonicalIconNames";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 
 export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon" | "children">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "children"> {
     /*
      * If set the icon is diplayed on the left side of the menu item.
      */
-    icon?: ValidIconName | string[];
+    icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
     children?: React.ReactNode
 }
 
@@ -31,7 +35,13 @@ function MenuItem({
             onClick={(e) => openInNewTab(e, onClick, href)}
             className={`${eccgui}-menu__item ` + className}
             icon={
-                icon ? <Icon name={icon} /> : false
+                icon ? (
+                    (typeof icon === "string" || Array.isArray(icon)) ? (
+                        <Icon name={icon} />
+                    ) : (
+                        icon
+                    )
+                ) : false
             }
         >
             {children ?? null}

package/src/components/Menu/Stories/MenuItem.stories.tsx

@@ -1,10 +1,24 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Menu, MenuItem } from "../../../../index";
+import { LogoReact } from "@carbon/icons-react";
+import { Menu, MenuItem, TestIcon } from "../../../../index";
+import canonicalIcons from "./../../Icon/canonicalIconNames";
+
 export default {
     title: "Components/Menu/MenuItem",
     component: MenuItem,
     argTypes: {
+        icon: {
+            control: "select",
+            options: [
+            "Test icon",
+                ...(Object.keys(canonicalIcons)),
+            ],
+            mapping: {
+            "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon"/>,
+                ...(Object.keys(canonicalIcons)),
+            }
+        },
     }
 } as ComponentMeta<typeof MenuItem>
 
@@ -17,7 +31,7 @@ Default.args = {
     children: (
         <>
         <MenuItem key="m6" text={"Sub option 1"} />
-        <MenuItem key="m6" text={"Sub option 2"} />
+        <MenuItem key="m7" text={"Sub option 2"} />
         </>
     ),
     text: "Parent option",

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useRef} from "react";
 import {
     Intent as BlueprintIntent,
     HTMLInputProps as BlueprintHTMLInputProps
@@ -14,6 +14,7 @@ import {
     Button,
     OverflowText,
     ContextOverlayProps,
+    Spinner,
 } from "./../../index";
 
 import {removeExtraSpaces} from "../../common/utils/stringUtils";
@@ -101,6 +102,9 @@ interface IProps<T> extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeh
      * Disables the input element
      */
     disabled?: boolean;
+
+    /** Delay in ms how long the request for the given query should be delayed. */
+    requestDelay?: number
 }
 
 function MultiSelect<T>({
@@ -123,6 +127,7 @@ function MultiSelect<T>({
     hasStateWarning,
     disabled,
     createNewItemFromQuery,
+    requestDelay = 0,
     ...otherProps
 }: IProps<T>) {
     const [createdItems, setCreatedItems] = React.useState<T[]>([]);
@@ -130,10 +135,14 @@ function MultiSelect<T>({
     const [itemsCopy, setItemsCopy] = React.useState<T[]>([...items]);
     const [filteredItemList, setFilteredItemList] = React.useState<T[]>([]);
     const [selectedItems, setSelectedItems] = React.useState<T[]>(() => (prePopulateWithItems ? [...items] : []));
-    const [query, setQuery] = React.useState<string | undefined>(undefined);
     //currently focused element in popover list
     const [focusedItem, setFocusedItem] = React.useState<T | null>(null);
+    const [showSpinner, setShowSpinner] = React.useState(false)
     const inputRef = React.useRef<HTMLInputElement>(null);
+    const requestState = useRef<{
+        query?: string,
+        timeoutId?: number
+    }>({})
 
     let intent;
     switch (true) {
@@ -193,7 +202,7 @@ function MultiSelect<T>({
         setSelectedItems((items) => items.filter((item) => itemId(item) !== matcher));
     };
 
-    
+
 
     /**
      * selects and deselects an item from selection list
@@ -201,25 +210,25 @@ function MultiSelect<T>({
      * @param item
      */
     const onItemSelect = (item: T) => {
-    
+
         if (itemHasBeenSelectedAlready(itemId(item))) {
             removeItemSelection(itemId(item));
         } else {
             setSelectedItems((items) => [...items, item]);
         }
-        
+
         //remove if already exist
         if (createdSelectedItems.find((t) => itemLabel(t) === itemLabel(item))) {
            setCreatedSelectedItems((prevItems) => prevItems.filter(prevItem => itemLabel(prevItem) !== itemLabel(item)))
         }else {
             const wasNewlyCreated = createdItems.find((t) => itemLabel(t) === itemLabel(item));
-            //only add to createdSelectedItems if it was previously created and not 
-            // from the initial items or a possible query response 
+            //only add to createdSelectedItems if it was previously created and not
+            // from the initial items or a possible query response
             if(wasNewlyCreated){
                  setCreatedSelectedItems((prevItems) =>[...prevItems, item])
             }
         }
- 
+
         inputRef.current?.select();
     };
 
@@ -227,22 +236,33 @@ function MultiSelect<T>({
      * search through item list using "label prop" and update the items popover
      * @param query
      */
-    const onQueryChange = async (query: string) => {
-        if (query.length) {
-            setQuery(query);
-            setFilteredItemList([])
-            const resultFromQuery = runOnQueryChange && (await runOnQueryChange(removeExtraSpaces(query)));
-            setFilteredItemList(() =>
-                [...(resultFromQuery ?? itemsCopy), ...createdItems].filter(item =>
-                    itemLabel(item).toLowerCase().includes(query.toLowerCase())
-                )
-            );
+    const onQueryChange = (query: string) => {
+        if (query.length && query !== requestState.current.query) {
+            requestState.current.query = query
+            if(requestState.current.timeoutId) {
+                clearTimeout(requestState.current.timeoutId)
+            }
+            const fn = async () => {
+                setShowSpinner(true)
+                setFilteredItemList([])
+                const resultFromQuery = runOnQueryChange && (await runOnQueryChange(removeExtraSpaces(query)));
+                if (requestState.current.query === query) {
+                    // Only use most recent request
+                    setFilteredItemList(() =>
+                        [...(resultFromQuery ?? itemsCopy), ...createdItems].filter(item =>
+                            itemLabel(item).toLowerCase().includes(query.toLowerCase())
+                        )
+                    );
+                    setShowSpinner(false)
+                }
+            }
+            requestState.current.timeoutId = window.setTimeout(fn, requestDelay && requestDelay > 0 ? requestDelay : 0)
         }
     };
 
     // Renders the entries of the (search) options list
     const optionRenderer = (label: string) => {
-        return <Highlighter label={label} searchValue={query} />;
+        return <Highlighter label={label} searchValue={requestState.current.query} />;
     };
 
     /**
@@ -294,7 +314,7 @@ function MultiSelect<T>({
         //set new items
         setCreatedItems((items) => [...items, newItem]);
         setCreatedSelectedItems((items) => [...items, newItem])
-        setQuery("");
+        requestState.current.query = ""
         return newItem;
     };
 
@@ -303,8 +323,8 @@ function MultiSelect<T>({
      * @param event
      */
     const handleOnKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
-        if (event.key === "Enter" && !filteredItemList.length && !!query && createNewItemFromQuery) {
-            createNewItem(query);
+        if (event.key === "Enter" && !filteredItemList.length && !!requestState.current.query && createNewItemFromQuery) {
+            createNewItem(requestState.current.query);
         }
         inputRef.current?.focus();
     };
@@ -315,10 +335,10 @@ function MultiSelect<T>({
      * @param event
      */
     const handleOnKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-        if (event.key === "Tab" && !!query) {
+        if (event.key === "Tab" && !!requestState.current.query) {
             event.preventDefault();
-            focusedItem ? onItemSelect(focusedItem) : onItemSelect(createNewItem(query));
-            setQuery("");
+            focusedItem ? onItemSelect(focusedItem) : onItemSelect(createNewItem(requestState.current.query));
+            requestState.current.query = "";
             setTimeout(() => inputRef.current?.focus());
         }
     };
@@ -348,15 +368,25 @@ function MultiSelect<T>({
         );
     };
 
+    // Clear button and spinner are both shown as "right element"
     const clearButton =
         selectedItems.length > 0 ? (
             <Button icon="operation-clear" data-test-id="clear-all-items" minimal={true} onClick={handleClear} />
         ) : undefined;
 
+    const spinnerProps = showSpinner ? {
+        rightElement: (
+            <>
+                <Spinner position={"inline"} size={"tiny"} />
+                {clearButton ?? null}
+            </>
+        )
+    } : {}
+
     return (
         <BlueprintMultiSelect<T>
             {...otherProps}
-            query={query}
+            query={requestState.current.query}
             onQueryChange={onQueryChange}
             items={filteredItemList}
             onItemSelect={onItemSelect}
@@ -385,11 +415,12 @@ function MultiSelect<T>({
                 tagProps: { minimal: true },
                 disabled,
                 ...tagInputProps,
+                ...spinnerProps
             }}
+
             popoverProps={{
                 minimal: true,
                 placement: "bottom-start",
-                hasBackdrop: true,
                 fill: true,
                 ...contextOverlayProps,
             }}

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

@@ -2,6 +2,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { LoremIpsum } from 'react-lorem-ipsum';
 import { Notification, HtmlContentBlock, Button, Spacing} from "../../../index";
+import { helpersArgTypes } from "../../../.storybook/helpers";
 
 export default {
     title: "Components/Notification",
@@ -10,6 +11,9 @@ export default {
         message: {
             control: "none",
         },
+        icon: {
+            ...helpersArgTypes.exampleIcon,
+        },
     },
 } as ComponentMeta<typeof Notification>;
 

package/src/components/Notification/Notification.tsx

@@ -6,7 +6,8 @@ import {
 } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {ClassNames as IntentClassNames} from "../../common/Intent";
-import Icon from "./../Icon/Icon";
+import Icon, { IconProps } from "./../Icon/Icon";
+import { TestIconProps } from "./../Icon/TestIcon";
 import { ValidIconName } from "./../Icon/canonicalIconNames";
 
 export interface NotificationProps extends Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">, React.HTMLAttributes<HTMLDivElement> {
@@ -38,19 +39,25 @@ export interface NotificationProps extends Omit<BlueprintToastProps, "message" |
      */
     danger?: boolean;
     /**
+     * @deprecated
      * Notification uses the the given space more flexible.
-     * Depracation notice: Property name will removed in futire versions.
+     * Deprecation notice: Property name will removed in future versions.
      * Please use `flexWidth`.
-     * @depracted
      */
     fullWidth?: boolean;
     /**
      * Notification uses the the given space more flexible.
-     * Default notifcation is displayed in min and max limits.
+     * Default notification is displayed in min and max limits.
      * Those limits are removed by setting this property to `true`.
      */
     flexWidth?: boolean;
     /**
+     * Icon displayed with the notification.
+     * Set it to false if you need to prevent automatically set icon regarding the notification type.
+     */
+    icon?: false | React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
+    /**
+     * @deprecated
      * Icon used as depiction that is displayed with the notification.
      */
     iconName?: ValidIconName | null;
@@ -71,7 +78,8 @@ function Notification({
     neutral = false,
     fullWidth = false, // deprecated
     flexWidth = false,
-    iconName = "state-info",
+    iconName = "state-info", // deprecated
+    icon,
     timeout,
     ...otherProps
 }: NotificationProps) {
@@ -95,6 +103,11 @@ function Notification({
             break;
     }
 
+    let notificationIcon = icon !== false ? icon : undefined;
+    if (icon !== false && !notificationIcon && !!iconSymbol) {
+        notificationIcon = <Icon name={iconSymbol} />;
+    }
+
     const content = actions ? (
         <div className={`${eccgui}-notification__content`}>
             <div className={`${eccgui}-notification__messagebody`}>{message ? message : children}</div>
@@ -118,7 +131,14 @@ function Notification({
             }
             message={content}
             timeout={timeout ? timeout : 0}
-            icon={!!iconSymbol ? <Icon name={iconSymbol} className={BlueprintClassNames.ICON} /> : undefined}
+            icon={
+                !!notificationIcon ? React.cloneElement(
+                    notificationIcon as JSX.Element,
+                    {
+                        className: (notificationIcon.props.className??"") + ` ${BlueprintClassNames.ICON}`
+                    }
+                ) : undefined
+            }
             {...otherProps}
         />
     );

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -1,4 +1,7 @@
 import React from "react";
+import { Depiction } from "./../Depiction/Depiction";
+import Icon from "./../Icon/Icon";
+import TestIcon from "./../Icon/TestIcon";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemDepictionProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -12,6 +15,34 @@ function OverviewItemDepiction({
     keepColors = false,
     ...restProps
 }: OverviewItemDepictionProps) {
+    const defaultDepictionDisplay = {
+        // mimic OverviewItemDepiction "behaviour"
+        border: false,
+        backgroundColor: keepColors ? undefined : "dark",
+        ratio: "1:1" as "1:1",
+        padding: "medium" as "medium"
+    }
+    // only return Depiction element if it is wrapped inside OverviewItemDepiction
+    if (
+        typeof children === "object" &&
+        !!children &&
+        "type" in children &&
+        children.type === Depiction
+    ) {
+        return React.cloneElement(
+            children,
+            defaultDepictionDisplay
+        );
+    }
+    // use Depiction element for basic icons
+    if (
+        typeof children === "object" &&
+        !!children &&
+        "type" in children &&
+        (children.type === Icon || children.type === TestIcon)
+    ) {
+        return <Depiction image={children} {...defaultDepictionDisplay} />
+    }
     return (
         <div
             {...restProps}

package/src/components/OverviewItem/overviewitem.scss

@@ -62,7 +62,8 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
     .#{$ns}-menu > & {
         // TODO: discuss if this should be enabled via explicit element property
-        @extend .#{$ns}-menu-item;
+        // remove this because reason was not clear and it lead to wrong display
+        // @extend .#{$ns}-menu-item;
 
         &--active {
             background-color: $eccgui-color-accent;

package/src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -2,17 +2,20 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import {
+    Badge,
     OverviewItem,
     OverviewItemActions,
     OverviewItemDepiction,
     OverviewItemDescription,
-} from "./../";
+    Depiction,
+} from "./../../../index";
 
 import Card from "../../Card/Card";
 
 import { Default as DepictionExample } from "./OverviewItemDepiction.stories";
 import { Default as DescriptionExample } from "./OverviewItemDescription.stories";
 import { Default as ActionsExample } from "./OverviewItemActions.stories";
+import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {
     title: "Components/OverviewItem",
@@ -45,6 +48,24 @@ ItemExample.args = {
     ]
 }
 
+export const ItemWithDepictionElement = Template.bind({});
+ItemWithDepictionElement.args = {
+    children: [
+        <Depiction
+            { ...OtherDepictionExample.args }
+            badge={<Badge position="top-right" intent="accent">B</Badge>}
+            ratio="1:1"
+            resizing="stretch"
+            captionPosition="tooltip"
+            border
+            rounded
+        />,
+        <OverviewItemDescription { ...DescriptionExample.args } />,
+        <OverviewItemActions children={ ActionsExample.args.children[0] } hiddenInteractions />,
+        <OverviewItemActions children={ ActionsExample.args.children[1] } />
+    ]
+}
+
 const TemplateCard: ComponentStory<typeof OverviewItem> = (args) => (
     <Card isOnlyLayout><OverviewItem {...args}></OverviewItem></Card>
 );

package/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import Icon from "../../Icon/Icon";
+import { Depiction, Icon, OverviewItemDepiction } from "../../../index";
 
-import OverviewItemDepiction from "./../OverviewItemDepiction";
+import { FullExample as DepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {
   title: "Components/OverviewItem/OverviewItemDepiction",
@@ -22,5 +22,10 @@ const Template: ComponentStory<typeof OverviewItemDepiction> = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-    children: <Icon name="artefact-dataset" />
+    children: <><Icon name="artefact-dataset" /></>
+}
+
+export const UseDepictionElement = Template.bind({});
+UseDepictionElement.args = {
+    children: <Depiction {...DepictionExample.args} resizing="contain" />
 }

package/src/components/Pagination/pagination.scss

@@ -1,9 +1,10 @@
+@use "~@carbon/styles/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;
 
-@import "~carbon-components/scss/components/pagination/pagination";
-
 .#{$prefix}--pagination {
     background-color: $eccgui-color-pagination-background;
     font-size: $eccgui-size-typo-pagination;

package/src/components/SimpleTable/simpletable.scss

@@ -1,10 +1,18 @@
+// import libs
+@use "~@carbon/styles/scss/components/data-table/data-table";
+// currently not needed @import '~@carbon/styles/scss/components/data-table/action';
+// currently not needed @import '~@carbon/styles/scss/components/data-table/expandable';
+// currently not needed @import '~@carbon/styles/scss/components/data-table/skeleton';
+// currently not needed @import '~@carbon/styles/scss/components/data-table/sort';
+@include data-table.data-table;
+
 // own vars
 $eccgui-size-tablecell-height-regular: mini-units(5) !default;
-$eccgui-size-tablecell-padding-regular: ($eccgui-size-tablecell-height-regular - carbon--rem($eccgui-size-typo-text)) * 0.5 !default;
+$eccgui-size-tablecell-padding-regular: ($eccgui-size-tablecell-height-regular - rem($eccgui-size-typo-text)) * 0.5 !default;
 $eccgui-size-tablecell-height-compact: mini-units(4) !default;
-$eccgui-size-tablecell-padding-compact: ($eccgui-size-tablecell-height-compact - carbon--rem($eccgui-size-typo-text)) * 0.5 !default;
+$eccgui-size-tablecell-padding-compact: ($eccgui-size-tablecell-height-compact - rem($eccgui-size-typo-text)) * 0.5 !default;
 $eccgui-size-tablecell-height-tall: mini-units(6) !default;
-$eccgui-size-tablecell-padding-tall: ($eccgui-size-tablecell-height-tall - carbon--rem($eccgui-size-typo-text)) * 0.5 !default;
+$eccgui-size-tablecell-padding-tall: ($eccgui-size-tablecell-height-tall - rem($eccgui-size-typo-text)) * 0.5 !default;
 $eccgui-size-tablecell-font-weight: $eccgui-font-weight-regular !default;
 $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
 $eccgui-color-tableheader-background: lighten($menu-item-color-hover, 15%) !default; // rgba($ui-03, alpha($ui-03) * $eccgui-opacity-muted);
@@ -14,15 +22,6 @@ $eccgui-color-tablerow-hover: $menu-item-color-hover !default;
 $eccgui-color-tablerow-selected: rgba($eccgui-color-accent, 0.1) !default;
 $eccgui-color-tablerow-selected-hover: mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-hover, 50%) !default;
 
-// lib vars
-// import libs
-// currently not needed @import '~carbon-components/scss/components/data-table/data-table-action';
-@import "~carbon-components/scss/components/data-table/data-table-core";
-// currently not needed @import '~carbon-components/scss/components/data-table/data-table-expandable';
-// currently not needed @import '~carbon-components/scss/components/data-table/data-table-sort';
-// currently not needed @import '~carbon-components/scss/components/data-table/data-table-inline-edit';
-// currently not needed @import '~carbon-components/scss/components/data-table/data-table-skeleton';
-
 // changes
 .#{$eccgui}-simpletable__container {
     min-width: unset;