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

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

@@ -1,16 +1,33 @@
 import React from "react";
 import {default as ReactFlowOriginal, ReactFlowProps as ReactFlowOriginalProps} from "react-flow-renderer";
-import { ReactFlowMarkers } from "../../../extensions/react-flow/markers/ReactFlowMarkers";
+import {ReactFlowMarkers} from "../../../extensions/react-flow/markers/ReactFlowMarkers";
 import * as unspecifiedConfig from "./../configuration/unspecified";
 import * as graphConfig from "./../configuration/graph";
 import * as workflowConfig from "./../configuration/workflow";
 import * as linkingConfig from "./../configuration/linking";
+import {useReactFlowScrollOnDrag} from "../extensions/scrollOnDragHook";
 
 export interface ReactFlowProps extends ReactFlowOriginalProps {
     /**
      * Load `ReactFlow` component with pre-configured values for `nodeTypes` and `edgeTypes`
      */
     configuration?: "unspecified" | "graph" | "workflow" | "linking";
+
+    /** If defined the canvas scrolls on all drag operations (node, selection, edge connect)
+     * when the mouse pointer comes near the canvas borders or goes beyond them.
+     * The `id` property of the ReactFlow component must be set in order for this to work.
+     *
+     * NOTE: If scrollOnDrag is defined, a ReactFlowProvider must be wrapped around this component (or a parent). */
+    scrollOnDrag?: {
+        /** Time in milliseconds to wait before the canvas scrolls the next step. */
+        scrollInterval: number
+
+        /**
+         * The size of each scroll step.
+         * This should be a number between 0.0 - 1.0.
+         * E.g. a value of 0.25 will lead to a scroll step size of a quarter of the visible canvas. */
+        scrollStepSize: number
+    }
 }
 
 /**
@@ -20,10 +37,17 @@ export interface ReactFlowProps extends ReactFlowOriginalProps {
 export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
     {
         configuration = "unspecified",
+        scrollOnDrag,
         children,
         ...originalProps
     },
     ref) => {
+
+    const scrollOnDragFunctions = useReactFlowScrollOnDrag({
+        reactFlowProps: originalProps,
+        scrollOnDrag
+    })
+
     const configReactFlow = {
         unspecified: unspecifiedConfig,
         graph: graphConfig,
@@ -37,6 +61,7 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
             nodeTypes={ configReactFlow[configuration].nodeTypes }
             edgeTypes={ configReactFlow[configuration].edgeTypes }
             {...originalProps}
+            {...scrollOnDragFunctions}
         >
             { children }
             <ReactFlowMarkers />

package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -27,13 +27,17 @@ export interface StickyNoteModalProps {
     translate: (key: StickyNoteModalTranslationKeys) => string;
 }
 
-export const StickyNoteModal: React.FC<StickyNoteModalProps> = ({ metaData, onClose, onSubmit, translate }) => {
+export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(({
+    metaData,
+    onClose,
+    onSubmit,
+    translate
+}) => {
     const refNote = React.useRef<string>(metaData?.note ?? "");
     const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
-    const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(([key, value]) => [
-        key,
-        value as string,
-    ]);
+    const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
+        ([key, value]) => [key, value as string]
+    );
 
     React.useEffect(() => {
         if (!color && noteColors[0][1]) {
@@ -131,4 +135,4 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = ({ metaData, onCl
             </FieldItem>
         </SimpleDialog>
     );
-};
+});

package/src/cmem/react-flow/extensions/scrollOnDragHook.ts

@@ -0,0 +1,247 @@
+import {OnLoadParams, useStoreState} from "react-flow-renderer";
+import React, {MouseEvent as ReactMouseEvent, useCallback} from "react";
+import {
+    Edge,
+    Node,
+    OnConnectStartFunc,
+    OnConnectStartParams,
+    OnConnectStopFunc,
+    Transform
+} from "react-flow-renderer/dist/types";
+import {ReactFlowProps} from "../ReactFlow/ReactFlow";
+
+interface IProps {
+    /** The original react-flow props. */
+    reactFlowProps: ReactFlowProps
+    /** If defined the canvas scrolls on all drag operations (node, selection, edge connect)
+     * when the mouse pointer comes near the canvas borders or goes beyond them.
+     * The `id` property of the ReactFlow component must be set in order for this to work. */
+    scrollOnDrag?: {
+        /** Time in milliseconds to wait before the canvas scrolls the next step. */
+        scrollInterval: number
+
+        /**
+         * The size of each scroll step.
+         * This should be a number between 0.0 - 1.0.
+         * E.g. a value of 0.25 will lead to a scroll step size of a quarter of the visible canvas. */
+        scrollStepSize: number
+    }
+}
+
+interface ScrollState {
+    // The react-flow instance
+    reactFlowInstance?: OnLoadParams
+    // The current x position of the react-flow view
+    currentX: number
+    // The current y position of the react-flow view
+    currentY: number
+    // The current Zoom level
+    currentZoom: number
+    // The current scroll function callback, when scrolling is active
+    scrollTaskId?: NodeJS.Timeout
+    // If a warning of the react-flow instance with the given ID has not been found
+    loggedWarning: boolean,
+    // If the x-axis is currently being scrolled
+    scrollX: boolean,
+    // If the y-axis is currently being scrolled
+    scrollY: boolean
+    // Only if this is true the canvas will scroll when moving the mouse past it
+    draggingOperationActive: boolean
+}
+
+type ReturnType = Pick<ReactFlowProps, "onLoad" | "onNodeDragStart" | "onNodeDragStop" | "onConnectStart" | "onConnectStop" |
+    "onSelectionDragStart" | "onSelectionDragStop" | "onEdgeUpdateStart" | "onEdgeUpdateEnd">
+
+/** Handles the scrolling of the react-flow canvas on all drag operations when the mouse pointer gets near or over the borders.
+ * The return value contains the wrapped react-flow callback functions that need to be handed over to the react-flow component. */
+export const useReactFlowScrollOnDrag = ({
+                                             reactFlowProps,
+                                             scrollOnDrag
+                                         }: IProps): ReturnType => {
+    /** Tracks the zoom on drag to border functionality. */
+    const scrollState = React.useRef<ScrollState>({
+        reactFlowInstance: undefined,
+        currentX: 0,
+        currentY: 0,
+        currentZoom: 1,
+        loggedWarning: false,
+        scrollX: false,
+        scrollY: false,
+        draggingOperationActive: false
+    })
+
+    const useStoreStateInternal = (): Transform => {
+        try {
+            return useStoreState((state) => state.transform)
+        } catch(ex) {
+            if(reactFlowProps.id && scrollOnDrag) {
+                console.warn("Scroll on drag is not correctly working. Reason: " + ex)
+            }
+            return [0, 0, 1]
+        }
+    }
+
+    /** The current position and zoom factor of the view port. */
+    const [currentX, currentY, currentZoom] = useStoreStateInternal()
+    scrollState.current.currentX = currentX
+    scrollState.current.currentY = currentY
+    scrollState.current.currentZoom = currentZoom
+
+    const originalOnLoad = reactFlowProps.onLoad
+    const originalOnNodeDragStart = reactFlowProps.onNodeDragStart
+    const originalOnNodeDragStop = reactFlowProps.onNodeDragStop
+    const originalOnConnectStart = reactFlowProps.onConnectStart
+    const originalOnConnectStop = reactFlowProps.onConnectStop
+    const originalOnSelectionDragStart = reactFlowProps.onSelectionDragStart
+    const originalOnSelectionDragStop = reactFlowProps.onSelectionDragStop
+    const originalOnEdgeUpdateStart = reactFlowProps.onEdgeUpdateStart
+    const originalOnEdgeUpdateEnd = reactFlowProps.onEdgeUpdateEnd
+
+    const scrollInterval = scrollOnDrag?.scrollInterval
+    const scrollStepSize = scrollOnDrag?.scrollStepSize
+
+    const reactFlowInstanceId = reactFlowProps.id
+
+    const clearIntervalIfExists = React.useCallback(() => {
+        if(scrollState.current.scrollTaskId) {
+            clearInterval(scrollState.current.scrollTaskId)
+        }
+    }, [])
+
+    const setScrolling = React.useCallback((active: boolean) => {
+        scrollState.current.draggingOperationActive = active
+        if(!active) {
+            clearIntervalIfExists()
+        }
+    }, [clearIntervalIfExists])
+
+    // Handle scrolling if any operation is active e.g. connecting or dragging a node
+    React.useEffect(() => {
+        if(scrollInterval && scrollStepSize && reactFlowInstanceId) {
+            const handleScrolling = (event: MouseEvent) => {
+                const state = scrollState.current
+                if(!state.draggingOperationActive) {
+                    clearIntervalIfExists()
+                    return
+                }
+                // Check if mouse pointer is outside of the canvas
+                const canvasElement = document.getElementById(reactFlowInstanceId)
+                if (!canvasElement) {
+                    if (!state.loggedWarning) {
+                        console.warn("No element found with ID " + reactFlowInstanceId)
+                        state.loggedWarning = true
+                    }
+                    return
+                }
+                const boundingRect = canvasElement.getBoundingClientRect()
+                const xStepSize = boundingRect.width * scrollStepSize
+                const yStepSize = boundingRect.height * scrollStepSize
+                if (boundingRect.top > event.clientY || boundingRect.bottom < event.clientY ||
+                    boundingRect.left > event.clientX || boundingRect.right < event.clientX) {
+                    const scrollX: number = boundingRect.left > event.clientX ?
+                        xStepSize :
+                        boundingRect.right < event.clientX ?
+                            -xStepSize :
+                            0
+                    const scrollY: number = boundingRect.top > event.clientY ?
+                        yStepSize :
+                        boundingRect.bottom < event.clientY ?
+                            -yStepSize :
+                            0
+                    if (state.scrollY === (scrollY !== 0) && state.scrollX === (scrollX !== 0)) {
+                        // Nothing has changed, do not change interval function
+                        return
+                    }
+                    clearIntervalIfExists()
+                    state.scrollTaskId = setInterval(() => {
+                        state.reactFlowInstance?.setTransform({
+                            x: state.currentX + scrollX,
+                            y: state.currentY + scrollY,
+                            zoom: state.currentZoom
+                        })
+                    }, scrollInterval)
+                } else {
+                    clearIntervalIfExists()
+                }
+            }
+            const disableScrollingOnMouseUp = () => {
+                scrollState.current.draggingOperationActive = false
+                clearIntervalIfExists()
+            }
+            document.addEventListener('mousemove', handleScrolling);
+            document.addEventListener("mouseup", disableScrollingOnMouseUp)
+            return () => {
+                document.removeEventListener('mousemove', handleScrolling)
+                document.removeEventListener("mouseup", disableScrollingOnMouseUp)
+            }
+        } else {
+            return undefined
+        }
+    }, [scrollInterval, scrollStepSize, reactFlowInstanceId, clearIntervalIfExists])
+
+    const onLoad = useCallback(
+        (rfi: OnLoadParams) => {
+            scrollState.current.reactFlowInstance = rfi;
+            originalOnLoad?.(rfi)
+        },
+        [originalOnLoad]
+    );
+
+    /** Wrap original callbacks to turn scrolling on and off. */
+    const onConnectStart: OnConnectStartFunc = React.useCallback((event: ReactMouseEvent, params: OnConnectStartParams) => {
+        setScrolling(true)
+        originalOnConnectStart?.(event, params)
+    }, [originalOnConnectStart, setScrolling])
+
+    const onConnectStop: OnConnectStopFunc = React.useCallback((event: MouseEvent) => {
+        setScrolling(false)
+        originalOnConnectStop?.(event)
+    }, [originalOnConnectStop, setScrolling])
+
+    const onNodeDragStart = React.useCallback((event: ReactMouseEvent, node: Node) => {
+        setScrolling(true)
+        originalOnNodeDragStart?.(event, node)
+    }, [originalOnNodeDragStart, setScrolling])
+
+    const onNodeDragStop = React.useCallback((event: ReactMouseEvent, node: Node) => {
+        setScrolling(false)
+        originalOnNodeDragStop?.(event, node)
+    }, [originalOnNodeDragStop, setScrolling])
+
+    const onSelectionDragStart = React.useCallback((event: ReactMouseEvent, nodes: Node[]) => {
+        setScrolling(true)
+        originalOnSelectionDragStart?.(event, nodes)
+    }, [originalOnSelectionDragStart, setScrolling])
+
+    const onSelectionDragStop = React.useCallback((event: ReactMouseEvent, nodes: Node[]) => {
+        setScrolling(false)
+        originalOnSelectionDragStop?.(event, nodes)
+    }, [originalOnSelectionDragStop, setScrolling])
+
+    const onEdgeUpdateStart = React.useCallback((event: ReactMouseEvent, edge: Edge) => {
+        setScrolling(true)
+        originalOnEdgeUpdateStart?.(event, edge)
+    }, [originalOnEdgeUpdateStart, setScrolling])
+
+    const onEdgeUpdateEnd = React.useCallback((event: MouseEvent, edge: Edge) => {
+        setScrolling(false)
+        originalOnEdgeUpdateEnd?.(event, edge)
+    }, [originalOnEdgeUpdateEnd, setScrolling])
+
+    if (!reactFlowProps.id || !scrollOnDrag) {
+        // No instance ID or config available, return empty object that will not overwrite any react-flow config parameters
+        return {}
+    } else {
+        return {
+            onLoad,
+            onNodeDragStart,
+            onNodeDragStop,
+            onConnectStart,
+            onConnectStop,
+            onSelectionDragStart,
+            onSelectionDragStop,
+            onEdgeUpdateStart,
+            onEdgeUpdateEnd
+        }
+    }
+}

package/src/common/Intent/index.ts

@@ -1,23 +1,27 @@
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export const Definitions: { [key: string]: string; } = {
-    PRIMARY: "primary" as "primary",
-    ACCENT: "accent" as "accent",
-    NEUTRAL: "neutral" as "neutral",
-    SUCCESS: "success" as "success",
-    INFO: "info" as "info",
-    WARNING: "warning" as "warning",
-    DANGER: "danger" as "danger",
+export type IntentTypes = "neutral" | "primary" | "accent" | "info" | "success" | "warning" | "danger";
+
+export const Definitions: { [key: string]: IntentTypes; } = {
+    PRIMARY: "primary",
+    ACCENT: "accent",
+    NEUTRAL: "neutral",
+    SUCCESS: "success",
+    INFO: "info",
+    WARNING: "warning",
+    DANGER: "danger",
+}
+
+export const intentClassName = (intent: IntentTypes) => {
+    return `${eccgui}-intent--${intent}`
 }
 
 const classNamesCreation = () => {
-    const intentClasses = {...Definitions};
+    const intentClasses : { [key: string]: string; } = {};
     for (let intentDefinition in Definitions) {
-        intentClasses[intentDefinition] = `${eccgui}-intent--${Definitions[intentDefinition]}`;
+        intentClasses[intentDefinition] = intentClassName(Definitions[intentDefinition]);
     }
     return intentClasses;
 }
 
 export const ClassNames = classNamesCreation();
-
-export type IntentTypes = typeof Definitions[keyof typeof Definitions];

package/src/common/utils/characters.ts

@@ -0,0 +1,111 @@
+/** Zero width invisible characters, i.e. they do not change the space between 2 other characters. */
+const internalInvisibleZeroWidthCharacterCodePoints: InternalInvisibleCharacter[] = [
+    { codePoint: 11, label: "Vertical Tabulation" },
+    { codePoint: 173, label: "Soft hyphen" },
+    { codePoint: 847, label: "Combining grapheme joiner" },
+    { codePoint: 1564, label: "Arabic letter mark" },
+    { codePoint: [6068, 6069], label: "Khmer vowel inherent" },
+    { codePoint: [6155, 6158], label: "Mongolian special characters" },
+    { codePoint: 8203, label: "Zero Width Space" },
+    { codePoint: 8204, label: "Zero Width Non-Joiner" },
+    { codePoint: 8205, label: "Zero Width Joiner" },
+    { codePoint: 8206, label: "Left-To-Right Mark" },
+    { codePoint: 8207, label: "Right-To-Left Mark" },
+    { codePoint: [8234, 8238], label: "zero width character" },
+    // Word joiner - Nominal Digit Shapes
+    { codePoint: [8288, 8303], label: "zero width character" },
+    { codePoint: [65024, 65039], label: "Variation selectors" },
+    { codePoint: 65279, label: "Zero Width No-Break Space" },
+    { codePoint: [65520, 65528], label: "Specials" },
+    { codePoint: 65532, label: "Object Replacement Character" },
+    { codePoint: [119155, 119162], label: "Invisible Musical Symbol" },
+    { codePoint: [917504, 917631], label: "Tags" },
+    { codePoint: [917760, 917999], label: "Variation Selectors" }
+]
+
+const toHex = (codepoint: number): string => codepoint.toString(16).toUpperCase()
+
+const padWithZeroes = (hexString: string): string => {
+    if(hexString.length % 2 === 1) {
+        return `0${hexString}`
+    }
+    return hexString
+}
+
+/** All characters that are considered invisible zero-width characters that e.g. need to be handled in input fields. */
+const invisibleZeroWidthCharacterCodePoints: InvisibleCharacter[] = internalInvisibleZeroWidthCharacterCodePoints.map(cp => {
+    const create = (codePoint: number, label?: string) => {
+        const hexString = toHex(codePoint)
+        const unicodeHexRepresentation = `U+${padWithZeroes(hexString)}`
+        return {
+            codePoint: codePoint,
+            label: label ?? unicodeHexRepresentation,
+            hexString,
+            fullLabel: label ? `${label} (${unicodeHexRepresentation})` : unicodeHexRepresentation
+        }
+    }
+    if(Array.isArray(cp.codePoint)) {
+        const codePoints: InvisibleCharacter[] = []
+        const [from, to] = cp.codePoint
+        if(from < 0 || to < 0 || from > to) {
+            throw new Error(`Invalid code point range specified: [${from}, ${to}]`)
+        }
+        for(let currentCp = from; currentCp <= to; currentCp++) {
+            codePoints.push(create(currentCp, cp.label))
+        }
+        return codePoints
+    } else {
+        return create(cp.codePoint, cp.label)
+    }
+}).flat()
+
+const createInvisibleZeroWidthCharacterCodePointsRegex = () => {
+    return new RegExp(
+        `([${
+            invisibleZeroWidthCharacterCodePoints
+                .map(cp => `\\u{${cp.hexString}}`)
+                .join("")
+        }])`,
+        "ug"
+    )
+}
+
+/** Map from codepoint to invisible character. */
+const invisibleZeroWidthCharacterCodePointsMap: Map<number, InvisibleCharacter> = new Map(
+    invisibleZeroWidthCharacterCodePoints.map(cp => [cp.codePoint, cp])
+)
+
+const clearStringFromInvisibleCharacters = (inputString: string): string => {
+    const regex = createInvisibleZeroWidthCharacterCodePointsRegex()
+    return inputString.replaceAll(regex, "")
+}
+
+interface InternalInvisibleCharacter {
+    /** Code point or code point range (inclusive on both sides). */
+    codePoint: number | [number, number],
+    /** Human readable label for code point. */
+    label?: string
+}
+
+type InvisibleCharacter = {
+    /** Code point. */
+    codePoint: number,
+    /** Human readable label for code point. */
+    label: string
+    /** The hex representation of the code point, e.g. "200B" */
+    hexString: string
+    /** The label plus the hex value. */
+    fullLabel: string
+}
+
+const invisibleZeroWidthCharacters = {
+    codePoints: invisibleZeroWidthCharacterCodePoints,
+    codePointMap: invisibleZeroWidthCharacterCodePointsMap,
+    createRegex: createInvisibleZeroWidthCharacterCodePointsRegex,
+    clearString: clearStringFromInvisibleCharacters
+}
+
+const moduleObject = {
+    invisibleZeroWidthCharacters
+}
+export default moduleObject

package/src/components/Accordion/accordion.scss

@@ -1,11 +1,12 @@
+// lib import
+@use "~@carbon/styles/scss/components/accordion/accordion";
+@include accordion.accordion;
+
 // own vars
 $eccgui-color-accordion-background-elevated: rgba($eccgui-color-accent, 0.1) !default;
 $eccgui-color-accordion-toggler-hover: $menu-item-color-hover !default;
 $eccgui-color-accordion-toggler-elevated-hover: mix($eccgui-color-accordion-background-elevated, $eccgui-color-accordion-toggler-hover, 50%) !default;
 
-// lib import
-@import "~carbon-components/scss/components/accordion/accordion";
-
 // changes
 
 .#{$prefix}--accordion__heading {

package/src/components/Application/ApplicationTitle.tsx

@@ -58,7 +58,7 @@ function ApplicationTitle({
 }: IApplicationTitleProps) {
 
     const classApplication = `${eccgui}-application__title`;
-    const classNotDisplayed = isNotDisplayed || (!isApplicationSidebarExpanded && typeof isNotDisplayed === "undefined") ? "bx--visually-hidden" : "";
+    const classNotDisplayed = isNotDisplayed || (!isApplicationSidebarExpanded && typeof isNotDisplayed === "undefined") ? "cds--visually-hidden" : "";
     const classAlignedSidebar = isAlignedWithSidebar || isApplicationSidebarExpanded ? `${eccgui}-application__title--withsidebar` : "";
 
     return (
@@ -77,7 +77,7 @@ function ApplicationTitle({
                 )}
                 {!!prefix && (
                         <>
-                            <span className="bx--header__name--prefix">{prefix}</span>
+                            <span className="cds--header__name--prefix">{prefix}</span>
                             &nbsp;
                         </>
                 )}

package/src/components/Application/_config.scss

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

package/src/components/Application/_content.scss

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

package/src/components/Application/_header.scss

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

package/src/components/Application/_sidebar.scss

@@ -1,8 +1,8 @@
 $ui-02: $eccgui-color-workspace-background !default;
 
-@import '~carbon-components/scss/components/ui-shell/side-nav';
+@import '~@carbon/styles/scss/components/ui-shell/side-nav/index';
 
-// tweack original layout
+// tweak original layout
 
 .#{$prefix}--side-nav--ux {
     top: mini-units(8);
@@ -10,13 +10,6 @@ $ui-02: $eccgui-color-workspace-background !default;
     max-width: mini-units(40);
 }
 
-/*
-.#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
-.#{$prefix}--side-nav--expanded, .#{$prefix}--side-nav--collapsed {
-    width: mini-units(40);
-}
-*/
-
 .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed) {
     transform: translateX(0);
     width: mini-units(8);

package/src/components/Application/_toolbar.scss

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

package/src/components/Application/application.scss

@@ -1,9 +1,9 @@
 // @import 'config';
-@import '~carbon-components/scss/components/ui-shell/functions';
+@import '~@carbon/styles/scss/components/ui-shell/functions';
 @import 'header';
 @import 'toolbar';
-// @import '~carbon-components/scss/components/ui-shell/product-switcher'; // TODO needs to be depracated and redone to match react
-// @import '~carbon-components/scss/components/ui-shell/switcher';
+// @import '~@carbon/styles/scss/components/ui-shell/product-switcher';
+// @import '~@carbon/styles/scss/components/ui-shell/switcher';
 @import 'sidebar';
-// @import '~carbon-components/scss/components/ui-shell/navigation-menu';
+// @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
 @import 'content';

package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx

@@ -1,24 +1,29 @@
 import React from "react";
-import {IElementWidth, IRenderModifiers} from "./AutoCompleteField";
+import { IElementWidth, IRenderModifiers } from "./AutoCompleteField";
 import OverflowText from "../Typography/OverflowText";
 import MenuItem from "../Menu/MenuItem";
-import {ValidIconName} from "../Icon/canonicalIconNames";
+import { TestIconProps } from "./../Icon/TestIcon";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 
-/** Returns a function to be used in an AutoComplete widget for rendering custom elements based on the query string.
+/**
+ * Returns a function to be used in an AutoComplete widget for rendering custom elements based on the query string.
  *
  * @param itemTextRenderer The text or element that should be displayed for the new custom item suggestion.
  * @param iconName Optional icon to show left to the text.
  */
 export const createNewItemRendererFactory = (
     itemTextRenderer: (query: string, styleWidth: IElementWidth) => string | JSX.Element,
-    iconName?: ValidIconName) => {
+    iconName?: ValidIconName | React.ReactElement<TestIconProps>
+) => {
     // Return custom render function
     return (query: string, modifiers: IRenderModifiers, handleClick: React.MouseEventHandler<HTMLElement>) => {
         let textElement = itemTextRenderer(query, modifiers.styleWidth)
-        if(typeof textElement === "string") {
-            textElement = <OverflowText style={modifiers.styleWidth}>
-                {textElement.trim() !== "" ? textElement : `Create option '${query}'`}
-            </OverflowText>
+        if (typeof textElement === "string") {
+            textElement = (
+                <OverflowText style={modifiers.styleWidth}>
+                    {textElement.trim() !== "" ? textElement : `Create option '${query}'`}
+                </OverflowText>
+            )
         }
         return (
             <MenuItem