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

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

@@ -8,6 +8,10 @@ export declare type HighlightingState = "success" | "warning" | "danger" | "matc
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
+export declare type NodeDimensions = {
+    width: number;
+    height: number;
+};
 interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Name of icon that should be displayed before the node label.
@@ -30,6 +34,10 @@ interface NodeContentData<CONTENT_PROPS = any> {
      * Content extension, displayed at the bottom side of a node.
      */
     contentExtension?: React.ReactElement<NodeContentExtensionProps>;
+    /**
+     * If submitted then the node will display footer element.
+     */
+    footerContent?: React.ReactNode;
 }
 export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -117,11 +125,19 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * If this is allowed scrolling inside a node is not possible.
      */
     letPassWheelEvents?: boolean;
+    /**
+     * When set to true, allows nodes to be resized by dragging edges and sides
+     */
+    onNodeResize?: (data: NodeDimensions) => void;
+    /**
+     * width and height dimensions of the node (Optional)
+     */
+    nodeDimensions?: NodeDimensions;
 }
 export declare const gethighlightedStateClasses: (state: any, baseClassName: any) => any;
 /**
  * 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>({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
 export {};

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

@@ -13,7 +13,7 @@ export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivE
      * Click handler to manage the expanded state from outside the the element.
      * This state is not managed automatically by the element itself.
      */
-    onToggle?: (event: React.MouseEvent<HTMLElement>, isExpanded: boolean) => void;
+    setExpanded?: (event: React.MouseEvent<HTMLElement>, isCurrentlyExpanded: boolean) => boolean;
     /**
      * Single element or aray of `IconButton` and `Button` elements.
      * They will be displayed beside the closing button under the element content body.
@@ -31,4 +31,4 @@ export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivE
 /**
  * Displays an content area that can be attached to `NodeContent` elements.
  */
-export declare const NodeContentExtension: ({ children, slideOutOfNode, isExpanded, onToggle, actionButtons, tooltipExpand, tooltipReduce, ...otherProps }: NodeContentExtensionProps) => JSX.Element;
+export declare const NodeContentExtension: ({ children, slideOutOfNode, isExpanded, setExpanded, actionButtons, tooltipExpand, tooltipReduce, ...otherProps }: NodeContentExtensionProps) => JSX.Element;

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { IPopoverProps as IBlueprintPopoverProps } from "@blueprintjs/core";
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-export interface NodeToolsProps extends IBlueprintPopoverProps {
+export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
     children: string | JSX.Element;
     togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;

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

@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+import { Node } from "react-flow-renderer";
+interface IStickyNote {
+    id: string;
+    content: string;
+    color: string;
+    position: number[];
+    dimension: number[];
+}
+declare const utils: {
+    generateStyleWithColor: (color: string) => CSSProperties;
+    transformNodeToStickyNode: (node: Node<any>) => IStickyNote;
+};
+export default utils;

package/dist/types/index.d.ts

@@ -51,7 +51,7 @@ import Tag from "./components/Tag/Tag";
 import TagList from "./components/Tag/TagList";
 import Notification from "./components/Notification/Notification";
 import Toast from "./components/Notification/Toast";
-import { Select } from "@blueprintjs/select";
+import Select from "./components/Select/Select";
 import MultiSelect from "./components/MultiSelect/MultiSelect";
 import { Iframe } from "./components/Iframe/Iframe";
 import { IframeModal } from "./components/Iframe/IframeModal";
@@ -92,6 +92,7 @@ declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
 };
 export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, HtmlContentBlock, OverflowText, WhiteSpaceContainer, Highlighter, Grid, GridRow, GridColumn, List, WorkspaceContent, WorkspaceMain, WorkspaceSide, WorkspaceHeader, Menu, MenuItem, MenuDivider, ContextOverlay, ContextMenu, OverviewItem, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemActions, OverviewItemList, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader, Icon, IconButton, Label, Button, Checkbox, RadioButton, Tabs, Tab, TabTitle, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, // FIXME: CMEM-3742: include as own element
-MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements, };
+MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements };
 export * from "./cmem";
 export * from "./extensions";
+export * from "./components/interfaces";

package/dist/types/legacy-replacements/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TabsProps as BlueprintTabsProps } from "@blueprintjs/core";
-interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "renderActiveTabPanelOnly"> {
+interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "animate"> {
     activeTab: string;
     tabs: DeprecatedTabProps[];
     onTabClick?: ({ props }: any) => void;

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.0.0-rc.1",
+  "version": "23.0.0-rc.3",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -38,11 +38,13 @@
     ".": {
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
-    }
+    },
+    "./config/sassOptions": "./scripts/sassConfig.js"
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "scripts"
   ],
   "scripts": {
     "build:clean": "rimraf dist/",
@@ -50,7 +52,7 @@
     "build:cjs": "tsc --project .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
     "build:all": "yarn build:clean && yarn build:esm && yarn build:cjs",
     "compile": "tsc --build tsconfig.json",
-    "compile-scss": "node-sass src/index.scss --importer=node_modules/node-sass-tilde-importer",
+    "compile-scss": "ts-node -O \"{ \\\"esModuleInterop\\\": true, \\\"module\\\": \\\"commonjs\\\"}\" ./scripts/compile-sass.ts",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "test": "jest",
@@ -60,8 +62,10 @@
     "check:package": "pjv --warnings --recommendations"
   },
   "dependencies": {
-    "@blueprintjs/core": "3.49.1",
-    "@blueprintjs/select": "3.18.1",
+    "@blueprintjs/colors": "^4.1.5",
+    "@blueprintjs/core": "^4.9.0",
+    "@blueprintjs/popover2": "^1.6.0",
+    "@blueprintjs/select": "^4.6.0",
     "@carbon/icons": "10.44.0",
     "@carbon/icons-react": "10.44.0",
     "@mavrin/remark-typograf": "^2.2.0",
@@ -72,6 +76,7 @@
     "color": "3.2.1",
     "lodash": "^4.17.21",
     "micromark": "^3.0.10",
+    "re-resizable": "6.9.9",
     "react": "^16.13.1",
     "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.1",
@@ -93,12 +98,12 @@
     "@babel/preset-flow": "^7.16.5",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-jest": "^6.4.13",
-    "@storybook/addon-links": "^6.4.9",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-jest": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.9",
+    "@storybook/react": "^6.5.10",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@types/carbon-components-react": "7.49.0",
@@ -117,15 +122,16 @@
     "jest": "^26.6.3",
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-pnp-resolver": "^1.2.1",
-    "node-sass": "6.0.1",
-    "node-sass-tilde-importer": "^1.0.2",
+    "node-sass-package-importer": "^5.3.2",
     "package-json-validator": "^0.6.3",
     "react-app-polyfill": "^1.0.6",
     "react-lorem-ipsum": "^1.4.9",
     "regenerator-runtime": "^0.13.9",
     "rimraf": "^3.0.2",
+    "sass": "^1.53.0",
     "sass-loader": "^10.3.1",
     "style-loader": "0.23.1",
+    "ts-node": "^10.9.1",
     "tsc-esm-fix": "^2.13.0",
     "typescript": "4.4.4",
     "webpack": "^4.46.0"
@@ -135,8 +141,6 @@
     "react-dom": ">=16"
   },
   "resolutions": {
-    "**/@blueprintjs/core": "3.49.1",
-    "**/@blueprintjs/select": "3.18.1",
     "**/@carbon/icons": "10.44.0",
     "**/@carbon/icons-react": "10.44.0",
     "**/carbon-components": "10.44.0",

package/scripts/compile-sass.ts

@@ -0,0 +1,9 @@
+import * as sass from "sass";
+import tildeImporter from "node-sass-package-importer";
+import sassRenderSyncConfig from "./sassConfig";
+
+sass.renderSync({
+    importer: tildeImporter(),
+    ...sassRenderSyncConfig,
+    file: "src/index.scss",
+});

package/scripts/fix-cjs-dist

@@ -0,0 +1,5 @@
+cat >dist/cjs/package.json <<!EOF
+{
+    "type": "commonjs"
+}
+!EOF

package/scripts/fix-esm-dist

@@ -0,0 +1,6 @@
+yarn tsc-esm-fix --target='dist/esm'
+cat >dist/esm/package.json <<!EOF
+{
+    "type": "module"
+}
+!EOF

package/scripts/sassConfig.js

@@ -0,0 +1,13 @@
+const sass = require("sass");
+
+const functions = {
+    'svg-icon($path, $selectors: null)': function(_path, _selectors) {
+        return new sass.SassString("unset");
+    },
+};
+const sassRenderSyncConfig = {
+    quietDeps: true,
+    functions,
+};
+
+module.exports = sassRenderSyncConfig;

package/src/_shame.scss

@@ -109,3 +109,20 @@ scrollbar-color: #bbb transparent;
         background-color: #bbb;
     }
 }
+
+/*
+    CHANGE: default focus behaviour
+*/
+
+
+:focus,
+input:focus-visible,
+textarea:focus-visible {
+    outline: none;
+    outline-offset: 0;
+}
+
+:focus-visible {
+    outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
+    outline-offset: 1px;
+}

package/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -66,10 +66,10 @@ const actions = [
 ];
 
 const commonWidgetArgs = {
-    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }),
+    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }).toString(),
     border: true,
     activityActions: actions,
-    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }),
+    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }).toString(),
     progressSpinner: {
         intent: "none",
         value: 0.5,

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -151,15 +151,8 @@ export function ActivityControlWidget(props: IActivityControlProps) {
                                     <Tooltip
                                         content={props.statusMessage}
                                         size="large"
-                                        tooltipProps={{
-                                            position: "top-right",
-                                            boundary: "viewport",
-                                            modifiers: {
-                                                flip: {
-                                                    enabled: false
-                                                }
-                                            }
-                                        }}
+                                        placement="top-start"
+                                        rootBoundary="viewport"
                                     >
                                         {props.statusMessage}
                                     </Tooltip>
@@ -181,9 +174,11 @@ export function ActivityControlWidget(props: IActivityControlProps) {
                                 name={action.icon}
                                 text={action.tooltip}
                                 onClick={action.action}
-                                tooltipOpenDelay={200}
                                 disabled={action.disabled}
                                 hasStateWarning={action.hasStateWarning}
+                                tooltipProps={{
+                                    hoverOpenDelay: 200
+                                }}
                             />
                         );
                     })}

package/src/cmem/index.ts

@@ -13,6 +13,7 @@ export { firstNonEmptyLine } from "./ContentBlobToggler/StringPreviewContentBlob
 export { ElapsedDateTimeDisplay } from "./DateTimeDisplay/ElapsedDateTimeDisplay";
 export { Markdown } from "./markdown/Markdown";
 export { ReactFlow } from "./react-flow/ReactFlow/ReactFlow";
+export { StickyNoteModal } from "./react-flow/StickyNoteModal/StickyNoteModal";
 
 export type {
     IActivityStatus,

package/src/cmem/markdown/markdown.scss

@@ -8,7 +8,7 @@
 
     vertical-align: super;
     font-size: $eccgui-size-typo-caption;
-    margin-left: $eccgui-size-inline-whitespace / 2;
+    margin-left: $eccgui-size-inline-whitespace * 0.5;
 }
 
 .footnote-back {

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

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useCallback, FC } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import IconButton from "../../../components/Icon/IconButton";
-import { ReactFlow, ReactFlowProps } from "./ReactFlow";
-import { ArrowHeadType, Elements, getMarkerEnd } from "react-flow-renderer";
+import { ReactFlow, EdgeTools, NodeTools, IconButton } from "./../../../index";
+import { ReactFlowProps } from "./ReactFlow";
+import { ArrowHeadType, Elements, FlowElement, getMarkerEnd } from "react-flow-renderer";
 
 export default {
     title: "CMEM/React Flow/Configurations",
@@ -17,7 +17,8 @@ const nodeExamples = {
             id: 'unspecified-1',
             type: "default",
             data: {
-                label: "Default ", content: "Example content.", minimalShape: "none"
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 200, y: 50 },
         },
@@ -42,7 +43,8 @@ const nodeExamples = {
             id: 'linking-1',
             type: "sourcepath",
             data: {
-                label: "Source path", content: "Example content.", minimalShape: "none"
+                label: "Source path", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 100, y: 50 },
         },
@@ -91,7 +93,8 @@ const nodeExamples = {
             id: 'workflow-1',
             type: "dataset",
             data: {
-                label: "Dataset", content: "Example content.", minimalShape: "none"
+                label: "Dataset", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 100, y: 50 },
         },
@@ -140,7 +143,8 @@ const nodeExamples = {
             id: 'graph-1',
             type: "default",
             data: {
-                label: "Default ", content: "Example content.", minimalShape: "none"
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 100, y: 50 },
         },
@@ -264,12 +268,36 @@ const nodeExamples = {
 const ReactFlowExample: FC<ReactFlowProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
-    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
+    const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
 
     useEffect(() => {
         setElements(nodeExamples[args.configuration ?? "unspecified"] as Elements);
     }, [args]);
 
+    // Helper methods for nodes and edges
+    const isNode = (element: FlowElement & { source?: string }): boolean =>
+        !element.source;
+    const isEdge = (element: FlowElement & { source?: string }): boolean =>
+        !isNode(element);
+
+    // Fired when clicked on any elements, e.g. edge or node. Used to show the edge menu.
+    const onElementClick = React.useCallback((event, element) => {
+        if (isEdge(element)) {
+            event.preventDefault();
+            setEdgeTools(
+                <EdgeTools
+                    posOffset={{ left: event.clientX, top: event.clientY }}
+                    onClose={() => {
+                        setEdgeTools(<></>);
+                    }}
+                >
+                    EdgeTools demo,
+                    add elements here.
+                </EdgeTools>
+            );
+        }
+    }, []);
+
     const onLoad = useCallback(
         (rfi) => {
             if (!reactflowInstance) {
@@ -279,13 +307,18 @@ const ReactFlowExample: FC<ReactFlowProps> = (args) => {
         [reactflowInstance]
     );
 
-    return <ReactFlow
-        configuration={args.configuration}
-        elements={elements}
-        style={{ height: '400px' }}
-        onLoad={onLoad}
-        defaultZoom={1}
-    />
+    return <>
+        <ReactFlow
+            configuration={args.configuration}
+            elements={elements}
+            style={{ height: '400px' }}
+            onLoad={onLoad}
+            defaultZoom={1}
+            onElementClick={onElementClick}
+            onEdgeContextMenu={onElementClick}
+        />
+        {edgeTools}
+    </>
 }
 
 const Template: ComponentStory<typeof ReactFlow> = (args) => (

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

@@ -22,6 +22,7 @@ export interface ReactFlowProps extends ReactFlowOriginalProps {
 export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
     {
         configuration = "unspecified",
+        children,
         ...originalProps
     },
     ref) => {
@@ -41,6 +42,7 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
             edgeTypes={ configReactFlow[configuration].edgeTypes }
             {...originalProps}
         >
+            { children }
             <ReactFlowMarkers />
         </ReactFlowOriginal>
     );

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

@@ -0,0 +1,134 @@
+import React from "react";
+import { Tag, TagList, SimpleDialog, Icon, Button, FieldItem } from "./../../../index";
+import getColorConfiguration from "../../../common/utils/getColorConfiguration";
+import { CodeEditor } from "../../../extensions";
+
+export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
+
+export type StickyNoteMetadataType = { note: string; color: string };
+
+export interface StickyNoteModalProps {
+    /**
+     * sticky data containing the sticky note and the selected color
+     */
+    metaData?: StickyNoteMetadataType;
+    /**
+     * utility to close the sticky note modal when cancelled as well as closed also
+     */
+    onClose: () => void;
+    /**
+     * utility to save recently entered metadata for sticky
+     *  note and add on to the canvas
+     */
+    onSubmit: (data: StickyNoteMetadataType) => void;
+    /**
+     * translation utility for language compatibility
+     */
+    translate: (key: StickyNoteModalTranslationKeys) => string;
+}
+
+export const StickyNoteModal: React.FC<StickyNoteModalProps> = ({ 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,
+    ]);
+
+    React.useEffect(() => {
+        if (!color && noteColors[0][1]) {
+            setSelectedColor(noteColors[0][1]);
+        }
+    }, [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 &&
+                noteColors.map(([colorName, colorValue]) => {
+                    const selectedFeedback =
+                        color === colorValue
+                            ? {
+                                  icon: <Icon name="state-checkedsimple" />,
+                                  large: true,
+                              }
+                            : {};
+                    return (
+                        <Tag
+                            round
+                            onClick={() => setSelectedColor(colorValue)}
+                            backgroundColor={colorValue}
+                            {...selectedFeedback}
+                            key={colorName}
+                        />
+                    );
+                })}
+        </TagList>
+    );
+
+    return (
+        <SimpleDialog
+            data-test-id={"sticky-note-modal"}
+            size="small"
+            title={translate("modalTitle")}
+            hasBorder
+            isOpen
+            onClose={onClose}
+            wrapperDivProps={wrapperDivProps}
+            actions={[
+                <Button
+                    key="submit"
+                    data-test-id="sticky-submit-btn"
+                    affirmative
+                    onClick={() => {
+                        onSubmit({ note: refNote.current, color: color || "#444444" });
+                        onClose();
+                    }}
+                >
+                    {translate("saveButton")}
+                </Button>,
+                <Button key="cancel" onClick={onClose}>
+                    {translate("cancelButton")}
+                </Button>,
+            ]}
+        >
+            <FieldItem
+                key="note"
+                labelProps={{
+                    htmlFor: "noteinput",
+                    text: translate("noteLabel"),
+                }}
+            >
+                <CodeEditor
+                    name={translate("noteLabel")}
+                    id={"sticky-note-input"}
+                    mode="markdown"
+                    preventLineNumbers
+                    onChange={(value) => {
+                        refNote.current = value;
+                    }}
+                    defaultValue={refNote.current}
+                />
+            </FieldItem>
+            <FieldItem
+                key="color"
+                labelProps={{
+                    htmlFor: "colorinput",
+                    text: translate("colorLabel"),
+                }}
+            >
+                {predefinedColorsMenu}
+            </FieldItem>
+        </SimpleDialog>
+    );
+};

package/src/cmem/react-flow/_index.scss

@@ -2,4 +2,4 @@
 @import "edges";
 @import "handles";
 @import "minimap";
-@import "nodes";
+@import "./nodes";

package/src/cmem/react-flow/_minimap.scss

@@ -5,8 +5,12 @@
 }
 
 @mixin mapcoloring($color) {
-    fill: $color;
-    stroke: $color;
+    &:not([fill]) {
+        fill: $color;
+    }
+    &:not([stroke]) {
+        stroke: $color;
+    }
 }
 
 // Graph node type

package/src/cmem/react-flow/configuration/graph.ts

@@ -1,5 +1,6 @@
 import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import { GRAPH_NODE_TYPES } from "./typing";
 
 const edgeTypes = {
     default: EdgeDefault,
@@ -13,7 +14,7 @@ const edgeTypes = {
     danger: EdgeDefault,
 };
 
-const nodeTypes = {
+const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode> = {
     default: NodeDefault,
     graph: NodeDefault,
     class: NodeDefault,
@@ -21,7 +22,4 @@ const nodeTypes = {
     property: NodeDefault,
 };
 
- export {
-     edgeTypes,
-     nodeTypes,
- }
+export { edgeTypes, nodeTypes };