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

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

@@ -6,6 +6,7 @@ import * as graphConfig from "./../configuration/graph";
 import * as workflowConfig from "./../configuration/workflow";
 import * as linkingConfig from "./../configuration/linking";
 import {useReactFlowScrollOnDrag} from "../extensions/scrollOnDragHook";
+import {ReactFlowHotkeyContext} from "../extensions/ReactFlowHotkeyContext";
 
 export interface ReactFlowProps extends ReactFlowOriginalProps {
     /**
@@ -42,11 +43,16 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
     },
     ref) => {
 
+    /** If the hot keys should be disabled. By default, they are always disabled. */
+    const {hotKeysDisabled} = React.useContext(ReactFlowHotkeyContext)
+
     const scrollOnDragFunctions = useReactFlowScrollOnDrag({
         reactFlowProps: originalProps,
         scrollOnDrag
     })
 
+    const {selectionKeyCode, multiSelectionKeyCode, deleteKeyCode, zoomActivationKeyCode} = originalProps
+
     const configReactFlow = {
         unspecified: unspecifiedConfig,
         graph: graphConfig,
@@ -61,6 +67,10 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
             edgeTypes={ configReactFlow[configuration].edgeTypes }
             {...originalProps}
             {...scrollOnDragFunctions}
+            selectionKeyCode={hotKeysDisabled ? null : selectionKeyCode as any}
+            deleteKeyCode={hotKeysDisabled ? null : deleteKeyCode as any}
+            multiSelectionKeyCode={hotKeysDisabled ? null : multiSelectionKeyCode as any}
+            zoomActivationKeyCode={hotKeysDisabled ? null : zoomActivationKeyCode as any}
         >
             { children }
             <ReactFlowMarkers />

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/common/index.ts

@@ -1,13 +1,16 @@
-import { openInNewTab } from "./utils/openInNewTab";
+import { invisibleZeroWidthCharacters } from "./utils/characters";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
 import getColorConfiguration from "./utils/getColorConfiguration";
-import { invisibleZeroWidthCharacters } from "./utils/characters";
+import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
+import { openInNewTab } from "./utils/openInNewTab";
 
 export const utils = {
     openInNewTab,
     decideContrastColorValue,
     getColorConfiguration,
     invisibleZeroWidthCharacters,
-}
+    getGlobalVar,
+    setGlobalVar,
+};
 // @deprecated use `utils`
 export const Utilities = utils;

package/src/common/utils/globalVars.ts

@@ -0,0 +1,18 @@
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+const getGlobalConfig = () => {
+    return typeof window[eccgui as any] === "undefined"
+        ? Object.defineProperty(window, `${eccgui}`, {
+              value: {},
+              writable: true,
+          })[eccgui as any]
+        : window[eccgui as any];
+};
+
+export const getGlobalVar = (varname: string) => {
+    return getGlobalConfig()[varname as any];
+};
+
+export const setGlobalVar = (varname: string, value: any) => {
+    return (getGlobalConfig()[varname as any] = value);
+};

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

@@ -8,25 +8,25 @@
 @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: color.adjust($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: color.adjust($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: color.adjust(
-    $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: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-header-bg-05: $shell-header-bg-02 !default;
 
 /// Header nav link submenu
-$shell-header-bg-06: color.adjust($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;
@@ -128,42 +128,42 @@ span.#{$prefix}--header__name {
 // $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: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    background-color: $shell-header-bg-02;
 }
 .#{$prefix}--header__menu-trigger:hover {
-    fill: color.adjust($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,
 a.#{$prefix}--header__menu-item:active {
-    background-color: color.adjust($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: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%);
+    background-color: $shell-header-bg-04;
 }
 
 // $shell-header-bg-05
 .#{$prefix}--header__action--active {
-    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    background-color: $shell-header-bg-05;
     border-right-color: transparent;
-    border-bottom-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    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 .#{$prefix}--header__menu-item:hover {
-    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%);
+    background-color: $shell-header-bg-06;
 }
 
 // $shell-header-border-01

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/Application/application.scss

@@ -1,13 +1,15 @@
 // @import 'config';
-@import '~@carbon/styles/scss/components/ui-shell/functions';
-@import 'header';
-@import 'toolbar';
+@import "~@carbon/styles/scss/components/ui-shell/functions";
+@import "header";
+@import "toolbar";
+
 // @import '~@carbon/styles/scss/components/ui-shell/product-switcher';
 // @import '~@carbon/styles/scss/components/ui-shell/switcher';
-@import 'sidebar';
+@import "sidebar";
+
 // @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
-@import 'content';
+@import "content";
 
 .#{$ns}-portal {
-    z-index: 8001; // higher than carbon ui shell header
+    z-index: 10001; // higher than carbon ui shell header and delta to dialog portals
 }

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);
     });
 });