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

package/dist/types/components/Application/ApplicationHeader.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { HeaderProps as CarbonHeaderProps } from "carbon-components-react";
-export interface ApplicationHeaderProps extends CarbonHeaderProps {
-}
+export declare type ApplicationHeaderProps = CarbonHeaderProps;
 export declare const ApplicationHeader: ({ children, className, ...otherCarbonHeaderProps }: ApplicationHeaderProps) => React.JSX.Element;
 export default ApplicationHeader;

package/dist/types/components/Dialog/Modal.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { OverlayProps, IOverlayState } from "@blueprintjs/core";
+import React from "react";
+import { IOverlayState, OverlayProps } from "@blueprintjs/core";
 export interface ModalProps extends OverlayProps, IOverlayState {
     children: React.ReactNode | React.ReactNode[];
     /**
@@ -9,19 +9,26 @@ export interface ModalProps extends OverlayProps, IOverlayState {
     /**
      * Size of the modal.
      */
-    size?: "tiny" | "small" | "regular" | "large" | "fullscreen";
+    size?: "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
     /**
      * Prevents that a backdrop area is displayed behind the modal elements.
      */
     preventBackdrop?: boolean;
-    /** Optional props for the wrapper div element inside the modal overlay. */
+    /**
+     * Optional props for the wrapper div element inside the modal overlay.
+     */
     wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Make the modal focusable, e.g. when clicking somewhere on it.
+     * This is needed, e.g. when capturing key (down, up) events that should bubble to the modal's parent elements.
+     */
+    modalFocusable?: boolean;
 }
 /**
  * Displays contents on top of other elements, used to create dialogs.
- * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
+ * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.
  * Otherwise this element can be used to create own modal elements and edge cases for modal dialogs.
  * Then it is recommended to use the `Card` element inside.
  */
-export declare const Modal: ({ children, className, overlayClassName, size, canOutsideClickClose, canEscapeKeyClose, preventBackdrop, wrapperDivProps, ...otherProps }: ModalProps) => React.JSX.Element;
+export declare const Modal: ({ children, className, overlayClassName, size, canOutsideClickClose, canEscapeKeyClose, preventBackdrop, wrapperDivProps, modalFocusable, ...otherProps }: ModalProps) => React.JSX.Element;
 export default Modal;

package/dist/types/components/Dialog/SimpleDialog.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { BaseSyntheticEvent } from "react";
 import { IntentTypes } from "../../common/Intent";
 import { TestableComponent } from "../interfaces";
 import { ModalProps } from "./Modal";
@@ -44,4 +44,15 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
  * Inherits all properties from `Modal`.
  */
 export declare const SimpleDialog: ({ children, canOutsideClickClose, canEscapeKeyClose, title, actions, notifications, hasBorder, preventSimpleClosing, enforceFocus, intent, headerOptions, showFullScreenToggler, startInFullScreenMode, size, ...otherProps }: SimpleDialogProps) => React.JSX.Element;
+/** Events that should be prevented to bubble up from a modal that goes beyond the most simple version of a modal, e.g.
+ * allows to drag or supports hot keys etc. */
+export declare const modalPreventEvents: {
+    onContextMenu: (event: BaseSyntheticEvent) => void;
+    onDrag: (event: BaseSyntheticEvent) => void;
+    onDragStart: (event: BaseSyntheticEvent) => void;
+    onDragEnd: (event: BaseSyntheticEvent) => void;
+    onMouseDown: (event: BaseSyntheticEvent) => void;
+    onMouseUp: (event: BaseSyntheticEvent) => void;
+    onClick: (event: BaseSyntheticEvent) => void;
+};
 export default SimpleDialog;

package/dist/types/components/Icon/canonicalIconNames.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IconProps as CarbonIconProps } from "carbon-components-react";
 /** Valid icon names. */
-export declare type ValidIconName = "application-activities" | "application-dataintegration" | "application-explore" | "application-homepage" | "application-legacygui" | "application-mapping" | "application-queries" | "application-useraccount" | "application-vocabularies" | "application-warning" | "artefact-commit" | "artefact-customtask" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-jdbc" | "artefact-dataset-json" | "artefact-dataset-multicsv" | "artefact-dataset-neo4j" | "artefact-dataset-sparkview" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-sqlendpoint" | "artefact-dataset-xml" | "artefact-deprecated" | "artefact-embedded" | "artefact-errorlog" | "artefact-file" | "artefact-linking" | "artefact-project" | "artefact-rawdata" | "artefact-remote" | "artefact-report" | "artefact-task" | "artefact-transform" | "artefact-uncategorized" | "artefact-workflow" | "data-sourcepath" | "data-targetpath" | "item-add-artefact" | "item-clone" | "item-comment" | "item-copy" | "item-download" | "item-draggable" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-launch" | "item-moremenu" | "item-question" | "item-reload" | "item-remove" | "item-reset" | "item-save" | "item-settings" | "item-shuffle" | "item-skip-forward" | "item-start" | "item-stop" | "item-upload" | "item-vertmenu" | "item-viewdetails" | "item-hidedetails" | "list-sort" | "list-sortasc" | "list-sortdesc" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-gdprsearch" | "module-integrations" | "module-linkedrules" | "module-reports" | "module-search" | "module-thesauri" | "module-timetracker" | "module-visualization" | "navigation-back" | "navigation-close" | "navigation-down" | "navigation-first" | "navigation-forth" | "navigation-jump" | "navigation-last" | "navigation-left" | "navigation-next" | "navigation-previous" | "navigation-right" | "navigation-up" | "operation-aggregation" | "operation-autolayout" | "operation-clear" | "operation-commit" | "operation-comparison" | "operation-erase" | "operation-filter" | "operation-filteredit" | "operation-filterremove" | "operation-fix" | "operation-link" | "operation-logout" | "operation-merge" | "operation-redo" | "operation-search" | "operation-sharelink" | "operation-transform" | "operation-translate" | "operation-undo" | "operation-unlink" | "state-checked" | "state-checkedsimple" | "state-confirmed" | "state-danger" | "state-declined" | "state-info" | "state-partlychecked" | "state-protected" | "state-success" | "state-unchecked" | "state-warning" | "toggler-caret" | "toggler-caretright" | "toggler-caretdown" | "toggler-maximize" | "toggler-minimize" | "toggler-moveleft" | "toggler-moveright" | "toggler-rowexpand" | "toggler-rowcollapse" | "toggler-showless" | "toggler-showmore" | "toggler-star-empty" | "toggler-star-filled" | "toggler-tree" | "form-template" | "undefined";
+export declare type ValidIconName = "application-activities" | "application-dataintegration" | "application-explore" | "application-homepage" | "application-legacygui" | "application-mapping" | "application-queries" | "application-useraccount" | "application-vocabularies" | "application-warning" | "application-hotkeys" | "artefact-commit" | "artefact-customtask" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-jdbc" | "artefact-dataset-json" | "artefact-dataset-multicsv" | "artefact-dataset-neo4j" | "artefact-dataset-sparkview" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-sqlendpoint" | "artefact-dataset-xml" | "artefact-deprecated" | "artefact-embedded" | "artefact-errorlog" | "artefact-file" | "artefact-linking" | "artefact-project" | "artefact-rawdata" | "artefact-remote" | "artefact-report" | "artefact-task" | "artefact-transform" | "artefact-uncategorized" | "artefact-workflow" | "data-sourcepath" | "data-targetpath" | "item-add-artefact" | "item-clone" | "item-comment" | "item-copy" | "item-download" | "item-draggable" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-launch" | "item-moremenu" | "item-question" | "item-reload" | "item-remove" | "item-reset" | "item-save" | "item-settings" | "item-shuffle" | "item-skip-forward" | "item-start" | "item-stop" | "item-upload" | "item-vertmenu" | "item-viewdetails" | "item-hidedetails" | "list-sort" | "list-sortasc" | "list-sortdesc" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-gdprsearch" | "module-integrations" | "module-linkedrules" | "module-reports" | "module-search" | "module-thesauri" | "module-timetracker" | "module-visualization" | "navigation-back" | "navigation-close" | "navigation-down" | "navigation-first" | "navigation-forth" | "navigation-jump" | "navigation-last" | "navigation-left" | "navigation-next" | "navigation-previous" | "navigation-right" | "navigation-up" | "operation-aggregation" | "operation-autolayout" | "operation-clear" | "operation-commit" | "operation-comparison" | "operation-erase" | "operation-filter" | "operation-filteredit" | "operation-filterremove" | "operation-fix" | "operation-link" | "operation-logout" | "operation-merge" | "operation-redo" | "operation-search" | "operation-sharelink" | "operation-transform" | "operation-translate" | "operation-undo" | "operation-unlink" | "state-checked" | "state-checkedsimple" | "state-confirmed" | "state-danger" | "state-declined" | "state-info" | "state-partlychecked" | "state-protected" | "state-success" | "state-unchecked" | "state-warning" | "toggler-caret" | "toggler-caretright" | "toggler-caretdown" | "toggler-maximize" | "toggler-minimize" | "toggler-moveleft" | "toggler-moveright" | "toggler-rowexpand" | "toggler-rowcollapse" | "toggler-showless" | "toggler-showmore" | "toggler-star-empty" | "toggler-star-filled" | "toggler-tree" | "form-template" | "undefined";
 export declare type CarbonIconType = React.ComponentType<CarbonIconProps>;
 /**
  * @deprecated

package/dist/types/components/PropertyValuePair/PropertyName.d.ts

@@ -1,9 +1,15 @@
 import React from "react";
+import { LabelProps } from "../Label/Label";
 export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Increase or decrease the width used for the property name.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Additional label properties, e.g. `tooltip`.
+     * It is only used if the `PropertyName` has simple text input.
+     */
+    labelProps?: LabelProps;
 }
-export declare const PropertyName: ({ className, size, children, ...otherProps }: PropertyNameProps) => React.JSX.Element;
+export declare const PropertyName: ({ className, size, children, labelProps, ...otherDtProps }: PropertyNameProps) => React.JSX.Element;
 export default PropertyName;

package/dist/types/components/Separation/Spacing.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export interface SpacingProps {
+export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Set the amount of white space that separates two elements.
      */
@@ -19,5 +19,5 @@ export interface SpacingProps {
  * Adds horizontal or vertical space between neighbouring elements.
  * It also can add a visual ruler inside.
  */
-export declare const Spacing: ({ size, hasDivider, vertical }: SpacingProps) => React.JSX.Element;
+export declare const Spacing: ({ size, hasDivider, vertical, ...otherDivProps }: SpacingProps) => React.JSX.Element;
 export default Spacing;

package/dist/types/components/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { MaybeElement, HTMLInputProps, InputGroupProps2 } from "@blueprintjs/core";
+import { HTMLInputProps, InputGroupProps2, MaybeElement } from "@blueprintjs/core";
 import { IntentTypes } from "../../common/Intent";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 import { InvisibleCharacterWarningProps } from "./useTextValidation";
@@ -40,9 +40,11 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent"
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps;
+    /** If true pressing the Escape key will blur/de-focus the input field. Default: false */
+    escapeToBlur?: boolean;
 }
 /**
   * Text input field.
   */
-export declare const TextField: ({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, fullWidth, leftIcon, invisibleCharacterWarning, ...otherProps }: TextFieldProps) => React.JSX.Element;
+export declare const TextField: ({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, fullWidth, leftIcon, invisibleCharacterWarning, escapeToBlur, ...otherProps }: TextFieldProps) => React.JSX.Element;
 export default TextField;

package/dist/types/extensions/codemirror/CodeMirror.d.ts

@@ -1,10 +1,16 @@
-import React from "react";
+import React, { TextareaHTMLAttributes } from "react";
 import "codemirror/mode/markdown/markdown.js";
 import "codemirror/mode/python/python.js";
 import "codemirror/mode/sparql/sparql.js";
 import "codemirror/mode/sql/sql.js";
 import "codemirror/mode/turtle/turtle.js";
 import "codemirror/mode/xml/xml.js";
+import "codemirror/mode/jinja2/jinja2.js";
+import "codemirror/mode/yaml/yaml.js";
+import "codemirror/mode/javascript/javascript.js";
+export declare const supportedCodeEditorModes: readonly ["markdown", "python", "sparql", "sql", "turtle", "xml", "jinja2", "yaml", "json", "undefined"];
+declare type SupportedModesTuple = typeof supportedCodeEditorModes;
+export declare type SupportedCodeEditorModes = SupportedModesTuple[number];
 export interface CodeEditorProps {
     /**
      * `name` attribute of connected textarea element.
@@ -23,7 +29,7 @@ export interface CodeEditorProps {
     /**
      * Syntax mode of the code editor.
      */
-    mode?: "markdown" | "python" | "sparql" | "sql" | "turtle" | "xml" | "undefined";
+    mode?: SupportedCodeEditorModes;
     /**
      * Default value used first when the editor is instanciated.
      */
@@ -32,8 +38,16 @@ export interface CodeEditorProps {
      * If enabled the code editor won't show numbers before each line.
      */
     preventLineNumbers?: boolean;
+    /** Set read-only mode. Default: false */
+    readOnly?: boolean;
+    /** Optional height of the component */
+    height?: number | string;
+    /** Long lines are wrapped and displayed on multiple lines */
+    wrapLines?: boolean;
+    outerDivAttributes?: Partial<TextareaHTMLAttributes<HTMLDivElement>>;
 }
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
-export declare const CodeEditor: ({ onChange, name, id, mode, preventLineNumbers, defaultValue, }: CodeEditorProps) => React.JSX.Element;
+export declare const CodeEditor: ({ onChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, height, wrapLines, outerDivAttributes, }: CodeEditorProps) => React.JSX.Element;
+export {};

package/dist/types/extensions/react-flow/handles/HandleDefault.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
 import { HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
 import { HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
-import { HandleContentProps } from "./HandleContent";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { HandleContentProps } from "./HandleContent";
 interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     /**
      * Extended handle data.

package/dist/types/extensions/react-flow/handles/HandleTools.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+export interface HandleToolsProps extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName"> {
+    children: string | JSX.Element | JSX.Element[];
+}
+export declare const HandleTools: ({ children, ...otherContextOverlayProps }: HandleToolsProps) => React.JSX.Element;

package/dist/types/extensions/react-flow/index.d.ts

@@ -5,6 +5,8 @@ export * from "./nodes/NodeContentExtension";
 export * from "./nodes/NodeTools";
 export * from "./nodes/nodeUtils";
 export * from "./handles/HandleDefault";
+export * from "./handles/HandleContent";
+export * from "./handles/HandleTools";
 export * from "./edges/EdgeDefault";
 export * from "./edges/EdgeStep";
 export * from "./edges/EdgeTools";

package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts

@@ -21,6 +21,22 @@ export declare type NodeDimensions = {
     width: number;
     height: number;
 };
+declare type IntroductionTime = {
+    /**
+     * The delay time in ms before the introduction animation is displayed.
+     * Until the animation starts the node is invisible.
+     */
+    delay?: number;
+    /**
+     * The time in ms the introdcution animation runs.
+     */
+    run: number;
+    /**
+     * Animation used for the visual introduction.
+     * `outline` is used as default animation.
+     */
+    animation?: "landing" | "outline";
+};
 interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Name of icon that should be displayed before the node label.
@@ -142,6 +158,10 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * The node is displayed with some animated shadow for highlighting purposes.
      */
     animated?: boolean;
+    /**
+     * Time in ms used for a short animation of the node to visualize it was added or updated.
+     */
+    introductionTime?: number | IntroductionTime;
     /** Additional data stored in the node. */
     businessData?: NODE_DATA;
     /**
@@ -182,7 +202,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, highlightedState, intent, border, highlightColor, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherDomProps }: NodeContentProps<any>): React.JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, highlightedState, intent, border, highlightColor, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, introductionTime, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherDomProps }: NodeContentProps<any>): React.JSX.Element;
 export declare const nodeContentUtils: {
     evaluateHighlightColors: (baseCustomProperty: string, highlightColor?: NodeHighlightColor | NodeHighlightColor[] | undefined) => {
         highlightClassNameSuffix: string[];

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "23.2.0",
+    "version": "23.3.0-rc.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -67,7 +67,7 @@
         "@blueprintjs/select": "^4.9.14",
         "@carbon/icons": "^11.19.0",
         "@carbon/icons-react": "^11.19.0",
-        "@carbon/styles": "^1.28.0",
+        "@carbon/styles": "1.32.0",
         "@mavrin/remark-typograf": "^2.2.0",
         "carbon-components-react": "^8.28.0",
         "codemirror": "^5.65.13",
@@ -107,32 +107,32 @@
         "@storybook/preset-scss": "^1.0.3",
         "@storybook/react": "^7.0.9",
         "@storybook/react-webpack5": "^7.0.9",
-        "@testing-library/jest-dom": "^5.16.1",
+        "@testing-library/jest-dom": "^6.1.3",
         "@testing-library/react": "^12.1.2",
         "@types/carbon-components-react": "^7.55.2",
         "@types/codemirror": "^5.60.5",
         "@types/color": "^3.0.2",
-        "@types/jest": "^24.9.1",
+        "@types/jest": "^29.5.4",
         "@types/lodash": "^4.14.194",
         "@typescript-eslint/eslint-plugin": "^5.59.11",
         "@typescript-eslint/parser": "^5.59.11",
-        "babel-jest": "^27.5.1",
+        "babel-jest": "^29.7.0",
         "chromatic": "^6.17.4",
         "eslint": "^8.42.0",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^26.6.3",
-        "jest-environment-jsdom-fourteen": "1.0.1",
-        "jest-pnp-resolver": "^1.2.1",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^13.2.2",
         "node-sass-package-importer": "^5.3.2",
         "prettier": "^2.8.8",
         "react-app-polyfill": "^3.0.0",
         "react-lorem-ipsum": "^1.4.9",
         "regenerator-runtime": "^0.13.9",
-        "rimraf": "^5.0.0",
+        "rimraf": "^5.0.1",
         "sass": "^1.62.1",
         "sass-loader": "^13.2.2",
         "storybook": "^7.0.9",
@@ -140,19 +140,21 @@
         "stylelint-config-recess-order": "^4.2.0",
         "stylelint-config-standard-scss": "^9.0.0",
         "ts-node": "^10.9.1",
-        "tsc-esm-fix": "^2.20.13",
+        "tsc-esm-fix": "^2.20.15",
         "typescript": "4.4.4",
         "url-loader": "^4.1.1",
         "yargs": "^17.7.2"
     },
     "peerDependencies": {
+        "@carbon/styles": "<1.33.0",
         "@types/carbon-components-react": ">=7",
         "react": ">=16",
         "react-dom": ">=16"
     },
     "resolutions": {
         "**/@types/react": "^17.0.59",
-        "**/postcss": "^8.4.23"
+        "**/postcss": "^8.4.23",
+        "**/parse5": "^6.0.1"
     },
     "husky": {
         "hooks": {
@@ -193,7 +195,7 @@
         "testMatch": [
             "<rootDir>/src/**/*(*.)@(spec|test).{js,jsx,ts,tsx}"
         ],
-        "testEnvironment": "jest-environment-jsdom-fourteen",
+        "testEnvironment": "jest-environment-jsdom",
         "transform": {
             "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
         },

package/scripts/compile-sass.ts

@@ -3,7 +3,7 @@ import tildeImporter from "node-sass-package-importer";
 import yargs from "yargs";
 import sassRenderSyncConfig from "./sassConfig";
 
-const args = yargs(process.argv.slice(2)).argv;
+const args = yargs(process.argv.slice(2)).argv as any;
 
 const styles = sass.renderSync({
     importer: tildeImporter(),

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/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