@eccenca/gui-elements 23.2.0-rc.1 → 23.3.0-rc.0

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

@@ -2,6 +2,7 @@ import React from "react";
 import { Tag, TagList, SimpleDialog, Icon, Button, FieldItem } from "./../../../index";
 import getColorConfiguration from "../../../common/utils/getColorConfiguration";
 import { CodeEditor } from "../../../extensions";
+import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 
 export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
 
@@ -38,6 +39,15 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(({
     const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
         ([key, value]) => [key, value as string]
     );
+    const {disableHotKeys} = React.useContext(ReactFlowHotkeyContext)
+
+    React.useEffect(() => {
+        disableHotKeys(true)
+
+        return () => {
+            disableHotKeys(false)
+        }
+    }, [])
 
     React.useEffect(() => {
         if (!color && noteColors[0][1]) {
@@ -45,17 +55,6 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(({
         }
     }, [color, noteColors]);
 
-    const wrapperDivProps: { [key: string]: (event: any) => any } = {
-        // Prevent react-flow from getting these events
-        onContextMenu: (event) => event.stopPropagation(),
-        onDrag: (event) => event.stopPropagation(),
-        onDragStart: (event) => event.stopPropagation(),
-        onDragEnd: (event) => event.stopPropagation(),
-        onMouseDown: (event) => event.stopPropagation(),
-        onMouseUp: (event) => event.stopPropagation(),
-        onClick: (event) => event.stopPropagation(),
-    };
-
     const predefinedColorsMenu = (
         <TagList>
             {noteColors &&
@@ -88,7 +87,6 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(({
             hasBorder
             isOpen
             onClose={onClose}
-            wrapperDivProps={wrapperDivProps}
             actions={[
                 <Button
                     key="submit"

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

@@ -0,0 +1,14 @@
+import React from "react";
+
+export interface ReactFlowHotkeyContextProps {
+    /** Allows to disable hot keys. */
+    disableHotKeys: (enable: boolean) => any
+
+    /** If the hot keys are currently disabled. */
+    hotKeysDisabled: boolean
+}
+
+export const ReactFlowHotkeyContext = React.createContext<ReactFlowHotkeyContextProps>({
+    disableHotKeys: () => {},
+    hotKeysDisabled: false
+})

package/src/components/Application/ApplicationHeader.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import {
-    Header as CarbonHeader,
-    HeaderProps as CarbonHeaderProps,
-} from "carbon-components-react";
+import { Header as CarbonHeader, HeaderProps as CarbonHeaderProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface ApplicationHeaderProps extends CarbonHeaderProps {};
+export type ApplicationHeaderProps = CarbonHeaderProps;
 
 export const ApplicationHeader = ({
     children = "",
-    className,
+    className = "",
     ...otherCarbonHeaderProps
 }: ApplicationHeaderProps) => {
     return (
-        <CarbonHeader
-            className={`${eccgui}-application__header ` + className}
-            {...otherCarbonHeaderProps}
-        >
-            { children }
+        <CarbonHeader className={`${eccgui}-application__header ${className}`} {...otherCarbonHeaderProps}>
+            {children}
         </CarbonHeader>
-    )
-}
+    );
+};
 
 export default ApplicationHeader;

package/src/components/Application/_header.scss

@@ -5,32 +5,37 @@
     own rule patches.
 */
 
+@use "sass:color";
+
 /// Header bar background
-$shell-header-bg-01: $eccgui-color-applicationheader-background !default;
+$shell-header-bg-01: var(
+    --#{$eccgui}-appheader-color-background,
+    #{$eccgui-color-applicationheader-background}
+) !default;
 
 /// Header menu trigger hover, Header nav link hover
-$shell-header-bg-02: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-header-bg-02: color-mix(in srgb, $shell-header-bg-01, black 5%) !default;
 
 /// Header action active background
-$shell-header-bg-03: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-header-bg-03: color-mix(in srgb, $shell-header-bg-01, black 10%) !default;
 
 /// Header submenu link hover
-$shell-header-bg-04: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default; //TODO needs color var gray-90-hover
+$shell-header-bg-04: $shell-header-bg-02 !default;
 
 /// Header nav link active and focus background
-$shell-header-bg-05: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-header-bg-05: $shell-header-bg-02 !default;
 
 /// Header nav link submenu
-$shell-header-bg-06: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-header-bg-06: $shell-header-bg-03 !default;
 
 /// Header border bottom
 $shell-header-border-01: transparent !default;
 
 /// Header focus
-$shell-header-focus: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%) !default;
+$shell-header-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
 
 /// Primary text in header, Title text
-$shell-header-text-01: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%) !default;
+$shell-header-text-01: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%) !default;
 
 /// Secondary text in header, Menu item nav text
 $shell-header-text-02: $eccgui-color-applicationheader-text !default;
@@ -48,7 +53,7 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 $shell-header-link: $blue-60 !default;
 
 // load library sub component
-@import '~@carbon/styles/scss/components/ui-shell/header/index';
+@import "~@carbon/styles/scss/components/ui-shell/header/index";
 
 // tweack original layout
 
@@ -62,11 +67,10 @@ $shell-header-link: $blue-60 !default;
 }
 
 .#{$prefix}--header__menu-trigger {
-    margin-right: 0;
     flex-shrink: 0;
+    margin-right: 0;
 }
 
-
 span.#{$prefix}--header__name {
     // @extend a.#{$prefix}--header__name;
     @extend .#{$prefix}--header__name;
@@ -79,15 +83,19 @@ span.#{$prefix}--header__name {
 }
 
 .#{$eccgui}-application__title--withsidebar {
-    width: mini-units(40 - 8);
     flex-shrink: 0;
+    width: mini-units(40 - 8);
 }
 
 .#{$eccgui}-application__title--content {
-    white-space: nowrap;
     display: inline-block;
     overflow: hidden;
+    font-size: $eccgui-size-typo-caption;
+    font-weight: $eccgui-font-weight-bold;
+    line-height: $eccgui-size-typo-caption-lineheight;
     text-overflow: ellipsis;
+    letter-spacing: $eccgui-font-spacing-wide;
+    white-space: nowrap;
 }
 
 .#{$eccgui}-application__title--depiction {
@@ -98,77 +106,64 @@ span.#{$prefix}--header__name {
         display: none;
     }
 
-    & > img, & > svg {
+    & > img,
+    & > svg {
         display: inline;
+        width: auto;
+        max-width: mini-units(5);
+        height: auto;
+        max-height: mini-units(5);
         padding: 0;
         margin: mini-units(1.4) 0 mini-units(1.6) 0;
-        max-height: mini-units(5);
-        max-width: mini-units(5);
-        width: auto;
-        height:auto;
         vertical-align: middle;
     }
 }
 
-.#{$prefix}--header__nav {
-    // padding-left: mini-units(2);
-}
-
-a.#{$prefix}--header__menu-item {
-    // padding: 0 mini-units(2);
-}
-
-.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu {
-    // width: mini-units(25);
-}
-
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
     height: mini-units(8);
 }
 
-.#{$prefix}--header__menu-arrow {
-    // margin-left: mini-units(1);
-}
-
 // tweak original colors (as long as config does not work properly)
 
 // $shell-header-bg-01
 .#{$prefix}--header,
 .#{$prefix}--skip-to-content:focus {
-    background-color: $eccgui-color-applicationheader-background;
+    background-color: $shell-header-bg-01;
 }
+
 // $shell-header-bg-02
 a.#{$prefix}--header__menu-item:hover {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    background-color: $shell-header-bg-02;
 }
 .#{$prefix}--header__menu-trigger:hover {
-    fill: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    fill: $shell-header-bg-02;
 }
 
 // $shell-header-bg-03
 .#{$prefix}--header__action:active,
-.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:active,
-.#{$prefix}--header__action:active,
+.#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:active {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+    background-color: $shell-header-bg-03;
 }
 
 // $shell-header-bg-04
 .#{$prefix}--header__action:hover,
-.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+.#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
+    background-color: $shell-header-bg-04;
 }
 
 // $shell-header-bg-05
 .#{$prefix}--header__action--active {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-    border-bottom-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    background-color: $shell-header-bg-05;
+    border-right-color: transparent;
+    border-bottom-color: $shell-header-bg-05;
+    border-left-color: transparent;
 }
 
 // $shell-header-bg-06
-.#{$prefix}--header__menu-title[aria-expanded='true'],
+.#{$prefix}--header__menu-title[aria-expanded="true"],
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+    background-color: $shell-header-bg-06;
 }
 
 // $shell-header-border-01
@@ -176,10 +171,6 @@ a.#{$prefix}--header__menu-item:active {
 .#{$prefix}--header__action {
     border-bottom: none;
 }
-.#{$prefix}--header__action--active {
-    border-left-color: transparent;
-    border-right-color: transparent;
-}
 .#{$prefix}--header__nav {
     &::before {
         background-color: transparent;
@@ -187,13 +178,13 @@ a.#{$prefix}--header__menu-item:active {
 }
 
 // $shell-header-focus
-.#{$prefix}--header__action:focus ,
+.#{$prefix}--header__action:focus,
 a.#{$prefix}--header__name:focus,
 a.#{$prefix}--header__menu-item:focus {
-    border-color: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%);
+    border-color: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
 }
-.#{$prefix}--header__menu-title[aria-expanded='true'] {
-    color: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%);
+.#{$prefix}--header__menu-title[aria-expanded="true"] {
+    color: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
 }
 
 // $shell-header-text-01
@@ -205,34 +196,34 @@ a.#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:focus,
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover,
 .#{$prefix}--skip-to-content:focus {
-  color: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%);
+    color: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%);
 }
 
 // $shell-header-text-02
 a.#{$prefix}--header__menu-item {
-  color: $eccgui-color-applicationheader-text;
+    color: $eccgui-color-applicationheader-text;
 }
 
 // $shell-header-icon-01
 .#{$prefix}--header__action,
 .#{$prefix}--header__action:hover,
 .#{$prefix}--header__action:active,
- .#{$prefix}--header__action:focus {
+.#{$prefix}--header__action:focus {
     color: $eccgui-color-applicationheader-text;
 }
 .#{$prefix}--header__menu-trigger > svg,
 a.#{$prefix}--header__menu-item:hover > svg,
 a.#{$prefix}--header__menu-item:active > svg,
 a.#{$prefix}--header__menu-item:focus > svg {
-  fill: $eccgui-color-applicationheader-text;
+    fill: $eccgui-color-applicationheader-text;
 }
 
 // $shell-header-icon-02
 .#{$prefix}--header__action > svg {
-  fill: $eccgui-color-applicationheader-text;
+    fill: $eccgui-color-applicationheader-text;
 }
 
 // $shell-header-icon-03
 .#{$prefix}--header__menu-arrow {
-  fill: $eccgui-color-applicationheader-text;
+    fill: $eccgui-color-applicationheader-text;
 }

package/src/components/Application/_toolbar.scss

@@ -6,29 +6,31 @@
     own rule patches.
 */
 
+@use "sass:color";
+
 /// Header-panel background
-$shell-panel-bg-01: $eccgui-color-applicationheader-background !default;
+$shell-panel-bg-01: $shell-header-bg-01 !default;
 
 /// Panel item hover background
-$shell-panel-bg-02: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-panel-bg-02: color-mix(in srgb, $shell-header-bg-01, black 10%) !default;
 
 /// Panel item focus and active background
-$shell-panel-bg-03: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-panel-bg-03: color-mix(in srgb, $shell-header-bg-01, black 5%) !default;
 
 /// Panel item link selected background
-$shell-panel-bg-04: adjust-color($eccgui-color-applicationheader-background, $lightness: 5%) !default;
+$shell-panel-bg-04: color-mix(in srgb, $shell-header-bg-01, white 5%) !default;
 
 /// Panel border
-$shell-panel-border: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-panel-border: $shell-panel-bg-03 !default;
 
 /// Header panel text
-$shell-panel-text-01: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%) !default;
+$shell-panel-text-01: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%) !default;
 
 /// Header panel secondary text
 $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;
+$shell-panel-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
 
 @import "~@carbon/styles/scss/components/ui-shell/header-panel/index";
 
@@ -36,53 +38,40 @@ $shell-panel-focus: adjust-color($eccgui-color-applicationheader-text, $lightnes
 
 .#{$prefix}--header-panel {
     top: mini-units(8);
+    padding: $eccgui-size-block-whitespace;
+    color: $shell-panel-text-01;
+    background-color: $shell-panel-bg-01;
 }
 
 .#{$prefix}--header-panel--expanded {
-    //width: carbon--mini-units(32);
+    border-right-color: $shell-panel-border;
+    border-left-color: $shell-panel-border;
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onleave,
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     position: fixed;
-    top: mini-units(8);
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: mini-units(8) 0 0 0;
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     top: 0;
 }
 
-// tweak original colors
-
-// $shell-panel-bg-01
-.#{$prefix}--header-panel {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-    padding: $eccgui-size-block-whitespace;
-}
-
-// $shell-panel-text-01
-.#{$prefix}--header-panel {
-    color: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%);
-}
-
-// $shell-panel-border
-.#{$prefix}--header-panel--expanded {
-    border-left-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-    border-right-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-}
-
 // add rules for own class identiiers
 
 .#{$eccgui}-application__toolbar {
-    flex-grow: 0;
     flex-basis: auto;
+    flex-grow: 0;
+
+    .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
+        // for some reason the original calculation still moves out the tooltip
+        transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
+    }
 }
 
 .#{$eccgui}-application__toolbar__section {
-    padding: 0 mini-units(1);
     display: flex;
     align-items: center;
+    padding: 0 mini-units(1);
 }

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

@@ -1,37 +1,50 @@
 import React from "react";
 import "@testing-library/jest-dom";
-import {render} from "@testing-library/react";
-import AutoSuggestion, {AutoSuggestionProps} from "../AutoSuggestion"
+import { render } from "@testing-library/react";
+import AutoSuggestion, { AutoSuggestionProps } from "../AutoSuggestion";
 
 describe("AutoSuggestion", () => {
-    let props: AutoSuggestionProps
+    let props: AutoSuggestionProps;
+
+    beforeAll(() => {
+        document.createRange = () => {
+            const range = new Range();
+            range.getBoundingClientRect = jest.fn();
+            range.getClientRects = () => {
+                return {
+                    item: () => null,
+                    length: 0,
+                    [Symbol.iterator]: jest.fn(),
+                };
+            };
+            return range;
+        };
+    });
+
     beforeEach(() => {
         props = {
             label: "test value path",
             initialValue: "",
-            onChange: jest.fn((value) => {
-            }),
+            onChange: jest.fn((value) => {}),
             fetchSuggestions: jest.fn((inputString, cursorPosition) => undefined),
-            checkInput: jest.fn(inputString => ({
-                valid: true
+            checkInput: jest.fn((inputString) => ({
+                valid: true,
             })),
-            onInputChecked: jest.fn(validInput => {
-            }),
+            onInputChecked: jest.fn((validInput) => {}),
             validationErrorText: "",
             clearIconText: "",
-            onFocusChange: jest.fn(hasFocus => {
-            }),
-            id: "test-auto-suggestion"
-        }
-    })
+            onFocusChange: jest.fn((hasFocus) => {}),
+            id: "test-auto-suggestion",
+        };
+    });
 
     it("should render properly", () => {
-        const {container} = render(<AutoSuggestion {...props} />)
-        expect(container).not.toBeEmptyDOMElement()
-    })
+        const { container } = render(<AutoSuggestion {...props} />);
+        expect(container).not.toBeEmptyDOMElement();
+    });
 
     it("should set label prop properly", () => {
-        const {getByText} = render(<AutoSuggestion {...props}/>)
-        expect(getByText(props.label!!)).toBeTruthy()
-    })
-})
+        const { getByText } = render(<AutoSuggestion {...props} />);
+        expect(getByText(props.label!!)).toBeTruthy();
+    });
+});

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

@@ -1,16 +1,29 @@
 import React from "react";
 import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
-import {
-    SingleLineCodeEditor,
-    SingleLineCodeEditorProps,
-} from "../../../../index";
+import { SingleLineCodeEditor, SingleLineCodeEditorProps } from "../../../../index";
 import CodeMirror from "codemirror";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
 describe("SingleLineCodeEditor", () => {
     let props: SingleLineCodeEditorProps,
         codeMirrorEditorInstance: CodeMirror.Editor = null as any;
+
+    beforeAll(() => {
+        document.createRange = () => {
+            const range = new Range();
+            range.getBoundingClientRect = jest.fn();
+            range.getClientRects = () => {
+                return {
+                    item: () => null,
+                    length: 0,
+                    [Symbol.iterator]: jest.fn(),
+                };
+            };
+            return range;
+        };
+    });
+
     beforeEach(() => {
         props = {
             setEditorInstance: jest.fn((editor) => {
@@ -18,7 +31,7 @@ describe("SingleLineCodeEditor", () => {
             }),
             onChange: jest.fn((value) => {}),
             onCursorChange: jest.fn((pos, coords) => {}),
-            mode: null,
+            mode: undefined,
             initialValue: "",
             onFocusChange: jest.fn((focused) => {}),
             onKeyDown: jest.fn((event) => {}),
@@ -49,14 +62,12 @@ describe("SingleLineCodeEditor", () => {
 
     it("should not allow user to create new lines", () => {
         render(<SingleLineCodeEditor {...props} />);
-        codeMirrorEditorInstance
-            .getDoc()
-            .setValue("I'm entering a new line \n character");
+        codeMirrorEditorInstance.getDoc().setValue("I'm entering a new line \n character");
         expect(codeMirrorEditorInstance.lineCount()).toBe(1);
     });
 
     it("should convert multiple lines to a single line", () => {
-        render(<SingleLineCodeEditor {...{...props, initialValue: "1\n2\n3"}} />);
+        render(<SingleLineCodeEditor {...{ ...props, initialValue: "1\n2\n3" }} />);
         expect(codeMirrorEditorInstance.lineCount()).toBe(1);
     });
 });