@eccenca/gui-elements 22.1.0-rc.0 → 23.0.0-rc.0

package/src/components/Typography/HtmlContentBlock.tsx

@@ -2,15 +2,34 @@ import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import * as TypographyClassNames from "./classnames";
 
+// FIXME: CMEM-3742: comment + add story
+
+export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    small?: boolean;
+    /** currently not supported */
+    large?: boolean;
+    /** currently not supported */
+    muted ?: boolean;
+    /** currently not supported */
+    disabled?: boolean;
+    linebreakForced?: boolean;
+    linebreakPrevented?: boolean;
+    noScrollbarsOnChildren?: boolean;
+}
+
 function HtmlContentBlock({
     className = "",
     children,
     small = false,
-    large = false, // currently unsupported
-    muted = false, // currently unsupported
-    disabled = false, // currently unsupported
+    large = false,
+    muted = false,
+    disabled = false,
+    linebreakForced = false,
+    linebreakPrevented = false,
+    noScrollbarsOnChildren = false,
     ...otherProps
-}: any) {
+}: HtmlContentBlockProps) {
     return (
         <div
             className={
@@ -19,8 +38,12 @@ function HtmlContentBlock({
                 (small ? " " + TypographyClassNames.SMALL : "") +
                 (large ? " " + TypographyClassNames.LARGE : "") +
                 (muted ? " " + TypographyClassNames.MUTED : "") +
+                (linebreakForced ? " " + TypographyClassNames.FORCELINEBREAK : "") +
+                (linebreakPrevented ? " " + TypographyClassNames.PREVENTLINEBREAK : "") +
+                (noScrollbarsOnChildren ? " " + TypographyClassNames.NOSCROLLBARSONCHILDREN : "") +
                 (disabled ? " " + TypographyClassNames.DISABLED : "")
             }
+            {...otherProps}
         >
             {children}
         </div>

package/src/components/Typography/classnames.ts

@@ -4,6 +4,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 export const NOOVERFLOW = eccgui + "-typography--nooverflow";
 export const FORCELINEBREAK = eccgui + "-typography--forcelinebreak";
 export const PREVENTLINEBREAK = eccgui + "-typography--preventlinebreak";
+export const NOSCROLLBARSONCHILDREN = eccgui + "-typography--noscrollbarsonchildren";
 export const LARGE = eccgui + "-typography--large";
 export const SMALL = eccgui + "-typography--small";
 export const MUTED = eccgui + "-typography--muted";

package/src/components/Typography/typography.scss

@@ -261,6 +261,14 @@ table {
     white-space: nowrap;
 }
 
+.#{$eccgui}-typography--noscrollbarsonchildren * {
+    overflow: visible;
+
+    pre {
+        width: fit-content;
+    }
+}
+
 // white spaces
 @each $whitespacePlace in ("margin", "padding") {
     @each $whitespaceDirection in ("top", "right", "bottom", "left") {

package/src/extensions/_index.scss

@@ -1 +1,6 @@
 @import "./react-flow/react-flow";
+/*
+CodeMirror styles are already included by the base component styles
+because it is used as lib for elements there already. 
+@import "./codemirror/codemirror";
+*/

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { CodeEditor } from "./CodeMirror";
+
+export default {
+    title: "Extensions/CodeEditor",
+    component: CodeEditor,
+    //parameters: { actions: { argTypesRegex: '^on.*' } },
+    argTypes: {
+        onChange: {
+            action: "value changed"
+        }
+    },
+} as ComponentMeta<typeof CodeEditor>;
+
+const TemplateFull: ComponentStory<typeof CodeEditor> = (args) => (
+    <CodeEditor {...args} />
+);
+
+export const BasicExample = TemplateFull.bind({});
+BasicExample.args = {
+    name: "codeinput",
+    mode: "markdown",
+    defaultValue: "**test me**",
+};

package/src/extensions/codemirror/CodeMirror.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from "react";
+import CodeMirror from "codemirror";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+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";
+
+export interface CodeEditorProps {
+    /**
+     * `name` attribute of connected textarea element.
+     */
+    name: string;
+    /**
+     * `id` attribute of connected textarea element.
+     * If not set then the default value is created by `codemirror-${name-attribute}`.
+     */
+    id?: string;
+    /**
+     * Handler method to receive onChange events.
+     * As input the new value is given.
+     */
+    onChange: (v: any) => void;
+    /**
+     * Syntax mode of the code editor.
+     */
+    mode?: "markdown" | "python" | "sparql" | "sql" | "turtle" | "xml" | "undefined";
+    /**
+     * Default value used first when the editor is instanciated.
+     */
+    defaultValue?: any;
+}
+
+/**
+ * Includes a code editor, currently we use CodeMirror library as base.
+ */
+export const CodeEditor = ({
+    onChange,
+    name,
+    id,
+    mode = "undefined",
+    defaultValue
+}: CodeEditorProps) => {
+    const domRef = useRef<HTMLTextAreaElement>(null);
+
+    useEffect(() => {
+        const editorInstance = CodeMirror.fromTextArea(domRef.current!, {
+            mode: mode === "undefined" ? undefined : mode,
+            lineWrapping: true,
+            lineNumbers: true,
+            tabSize: 2,
+            theme: "xq-light",
+        });
+
+        editorInstance.on("change", (api) => {
+            onChange(api.getValue());
+        });
+
+        return function cleanup() {
+            editorInstance.toTextArea();
+        };
+    }, [onChange, mode]);
+
+    return (
+        <div className={`${eccgui}-codeeditor`}>
+            <textarea
+                ref={domRef}
+                /**
+                 * FIXME: same `data-test-id` for multiple code editor elements are valid
+                 * but may not make really sense for testing purposes. Currently let it
+                 * unchanged from the code what was took over here.
+                 */
+                data-test-id="codemirror-wrapper"
+                id={!!id ? id : `codemirror-${name}`}
+                name={name}
+                defaultValue={defaultValue}
+            />
+        </div>
+    );
+}

package/src/extensions/codemirror/_codemirror.scss

@@ -0,0 +1,31 @@
+@import "~codemirror/lib/codemirror.css";
+@import "~codemirror/theme/xq-light.css";
+
+// adjustments
+
+.#{$eccgui}-codeeditor {
+    .CodeMirror {
+        border-radius: $pt-border-radius;
+
+        // get them a "border" like input boxes from blueprintjs
+        box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
+        &.CodeMirror-focused {
+            box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+        }
+
+        .CodeMirror-gutters {
+            // allow "borders" to shine through
+            background-color: rgba(0,0,0,0.05);
+        }
+
+        .CodeMirror-scroll {
+            cursor: text;
+        }
+    }
+}
+
+.#{$prefix}--accordion__content {
+    .CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber {
+        box-sizing: content-box;
+    }
+}

package/src/extensions/index.ts

@@ -0,0 +1,2 @@
+export * from "./codemirror/CodeMirror";
+export * from "./react-flow";

package/src/extensions/react-flow/_react-flow.scss

@@ -3,3 +3,7 @@
 @import "edges/edges";
 @import "handles/handles";
 @import "minimap/minimap";
+
+.react-flow__background {
+    border: solid 1px $eccgui-color-separation-divider;
+}

package/src/extensions/react-flow/edges/EdgeDefault.tsx

@@ -67,7 +67,6 @@ export const EdgeDefault = memo(
                 <path
                     d={pathDisplay}
                     className="react-flow__edge-path"
-
                     markerEnd={markerEnd}
                 />
                 { edgeLabel }

package/src/extensions/react-flow/edges/getSmoothStepPath.ts

@@ -0,0 +1,118 @@
+/**
+ * Copied from `react-flow` because we need to change there routing.
+ * We use the 10.2.0cversion minus commit 87d518f8b5540a91a3f9c163a2315c2de47abc31
+ * @see https://github.com/wbkd/react-flow/commit/87d518f8b5540a91a3f9c163a2315c2de47abc31
+ */
+
+import { getEdgeCenter as getCenter, Position } from "react-flow-renderer";
+
+// These are some helper methods for drawing the round corners
+// The name indicates the direction of the path. "bottomLeftCorner" goes
+// from bottom to the left and "leftBottomCorner" goes from left to the bottom.
+// We have to consider the direction of the paths because of the animated lines.
+const bottomLeftCorner = (x: number, y: number, size: number): string =>
+    `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`;
+const leftBottomCorner = (x: number, y: number, size: number): string =>
+    `L ${x + size},${y}Q ${x},${y} ${x},${y - size}`;
+const bottomRightCorner = (x: number, y: number, size: number): string =>
+    `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`;
+const rightBottomCorner = (x: number, y: number, size: number): string =>
+    `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`;
+const leftTopCorner = (x: number, y: number, size: number): string => `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`;
+const topLeftCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`;
+const topRightCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
+const rightTopCorner = (x: number, y: number, size: number): string => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
+
+export interface GetSmoothStepPathParams {
+    sourceX: number;
+    sourceY: number;
+    sourcePosition?: Position;
+    targetX: number;
+    targetY: number;
+    targetPosition?: Position;
+    borderRadius?: number;
+    centerX?: number;
+    centerY?: number;
+}
+
+export function getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition = Position.Bottom,
+    targetX,
+    targetY,
+    targetPosition = Position.Top,
+    borderRadius = 5,
+    centerX,
+    centerY,
+}: GetSmoothStepPathParams): string {
+    const [_centerX, _centerY, offsetX, offsetY] = getCenter({ sourceX, sourceY, targetX, targetY });
+    const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
+    const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
+    const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
+    const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
+    const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
+
+    let firstCornerPath = "";
+    let secondCornerPath = "";
+
+    if (sourceX <= targetX) {
+        if (sourceY <= targetY) {
+            firstCornerPath = bottomLeftCorner(sourceX, cY, cornerSize);
+            secondCornerPath = rightTopCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Right) {
+                if (targetPosition === Position.Left) {
+                    firstCornerPath = rightTopCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = bottomLeftCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Left) {
+                    // no change
+                }
+            }
+        } else {
+            firstCornerPath = topLeftCorner(sourceX, cY, cornerSize);
+            secondCornerPath = rightBottomCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Right) {
+                if (targetPosition === Position.Left) {
+                    firstCornerPath = rightBottomCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = topLeftCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Left) {
+                    // no change
+                }
+            }
+        }
+    } else {
+        if (sourceY <= targetY) {
+            firstCornerPath = bottomRightCorner(sourceX, cY, cornerSize);
+            secondCornerPath = leftTopCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Left) {
+                if (targetPosition === Position.Right) {
+                    firstCornerPath = leftTopCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = bottomRightCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Right) {
+                    // no change
+                }
+            }
+        } else {
+            firstCornerPath = topRightCorner(sourceX, cY, cornerSize);
+            secondCornerPath = leftBottomCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Left) {
+                if (targetPosition === Position.Right) {
+                    firstCornerPath = leftBottomCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = topRightCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Right) {
+                    // no change
+                }
+            }
+        }
+    }
+
+    return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
+}

package/src/extensions/react-flow/edges/utils.ts

@@ -1,6 +1,7 @@
 import { EdgeDefaultProps } from "./EdgeDefault";
 import { EdgeStepProps } from "./EdgeStep";
-import { getSmoothStepPath, Position } from "react-flow-renderer";
+import { Position } from "react-flow-renderer";
+import { getSmoothStepPath } from "./getSmoothStepPath";
 
 interface EdgePositionCorrectionProps extends Omit<EdgeDefaultProps, "id" | "source" | "target" | "drawSvgPath" | "data"> {
     correctionLength?: number;
@@ -25,58 +26,49 @@ const posCorrectionEdge = ({
     let endCommandCorrection = ``;
 
     if (sourcePosition === Position.Left && sourceX < targetX) {
-        newSourceX = newSourceX - correctionLength;
+        newSourceX = newSourceX - 2 * correctionLength;
         if (sourceY < targetY) {
-            newSourceY = sourceY + 2 * correctionRadius;
-            startCommandCorrection = startCommandCorrection + ` L ${newSourceX},${sourceY} A ${correctionRadius} ${correctionRadius} ${180} ${1} ${0} `;
+            newSourceY = sourceY + correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX + correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
         } else {
-            newSourceY = sourceY - 2 * correctionRadius;
-            startCommandCorrection = startCommandCorrection + ` L ${newSourceX},${sourceY} A ${correctionRadius} ${correctionRadius} ${180} ${1} ${1} `;
+            newSourceY = sourceY - correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX + correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `;
         }
     }
 
     if (sourcePosition === Position.Right && sourceX > targetX) {
         newSourceX = targetPosition === Position.Right ? newSourceX + correctionLength + correctionRadius : newSourceX + correctionLength;
         if (sourceY < targetY) {
-            newSourceY = targetPosition === Position.Right ? sourceY + 1 * correctionRadius : sourceY + 2 * correctionRadius;
-            startCommandCorrection = targetPosition === Position.Right ? (
-                startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `
-            ) : (
-                startCommandCorrection + ` L ${newSourceX},${sourceY} A ${correctionRadius} ${correctionRadius} ${180} ${1} ${1} `
-            );
+            newSourceY = sourceY + correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `;
         } else {
-            newSourceY = targetPosition === Position.Right ? sourceY - 1 * correctionRadius : sourceY - 2 * correctionRadius;
-            startCommandCorrection = targetPosition === Position.Right ? (
-                startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `
-            ) : (
-                startCommandCorrection + ` L ${newSourceX},${sourceY} A ${correctionRadius} ${correctionRadius} ${180} ${1} ${0} `
-            );
+            newSourceY = sourceY - correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
         }
     }
 
     if (targetPosition === Position.Left && sourceX > targetX) {
-        newTargetX = newTargetX - correctionLength;
+        newTargetX = newTargetX - 3 * correctionLength;
         if (sourceY < targetY) {
-            newTargetY = targetY - 2 * correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${0} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+            newTargetY = targetY - correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${newTargetX + correctionRadius},${targetY} L ${targetX},${targetY}`;
         } else {
-            newTargetY = targetY + 2 * correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${1} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+            newTargetY = targetY + correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${newTargetX + correctionRadius},${targetY} L ${targetX},${targetY}`;
         }
     }
 
     if (targetPosition === Position.Right && sourceX < targetX) {
-        newTargetX = newTargetX + correctionLength;
+        newTargetX = newTargetX + 3 * correctionLength;
         if (sourceY < targetY) {
-            newTargetY = targetY - 2 * correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${1} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+            newTargetY = targetY - correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${newTargetX - correctionRadius},${targetY} L ${targetX},${targetY}`;
         } else {
-            newTargetY = targetY + 2 * correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${0} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+            newTargetY = targetY + correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${newTargetX - correctionRadius},${targetY} L ${targetX},${targetY}`;
         }
     }
 
-
     return {
         newSourceX,
         newSourceY,

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -91,7 +91,7 @@ export const MiniMap = memo(({
     /**
         enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
      **/
-    const handleMiniMapMouseDown = (event: any) => {
+    const handleMiniMapMouseDown = () => {
         if (enableNavigation && flowInstance) { minimapCalcConf.navigationOn = true; }
     };
 

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -7,6 +7,7 @@ import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
 import { HandleDefault, HandleProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
+import { NodeContentExtensionProps } from "./NodeContentExtension";
 
 export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 
@@ -35,7 +36,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Content extension, displayed at the bottom side of a node.
      */
-    contentExtension?: React.ReactNode;
+    contentExtension?: React.ReactElement<NodeContentExtensionProps>;
 }
 
 export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
@@ -124,6 +125,11 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * If set then it will be always overwritten internally.
      */
     selected?: boolean;
+    /**
+     * Allow react flow wheel events, e.g. for zooming using the mouse wheel over a node.
+     * If this is allowed scrolling inside a node is not possible.
+     */
+    letPassWheelEvents?: boolean;
 }
 
 interface MemoHandlerProps extends HandleProps {
@@ -226,6 +232,7 @@ const MemoHandler = React.memo(
      sourcePosition = Position.Right,
      isConnectable = true,
      selected,
+     letPassWheelEvents = false,
      // businessData is just being ignored
      businessData,
      // other props for DOM element
@@ -279,7 +286,8 @@ const MemoHandler = React.memo(
                      ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
                      (!!highlightedState ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`) : "") +
                      (animated ? ` ${eccgui}-graphviz__node--animated` : "") +
-                     (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "")
+                     (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "") +
+                     (letPassWheelEvents === false ? ` nowheel` : "")
                  }
              >
                  <header className={`${eccgui}-graphviz__node__header`}>
@@ -311,11 +319,9 @@ const MemoHandler = React.memo(
                          {typeof content === "function" ? content(adjustedContentProps) : content}
                      </div>
                  )}
-                 {contentExtension && (
-                     <div className={`${eccgui}-graphviz__node__footer`}>
-                         {contentExtension}
-                     </div>
-                 )}
+                 <div className={`${eccgui}-graphviz__node__footer`}>
+                 </div>
+                 {contentExtension}
              </section>
              {!!handles && (
                  <>

package/src/extensions/react-flow/nodes/NodeContentExtension.tsx

@@ -3,6 +3,10 @@ import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import IconButton from "../../../components/Icon/IconButton";
 
 export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * When enabled the element is displayed in a way that it does not count into the node size calculation.
+     */
+    slideOutOfNode?: boolean;
     /**
      * Element is displayed in expanded state.
      * If it has no `onToggle` handler property set then it is always expanded.
@@ -33,6 +37,7 @@ export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivE
  */
 export const NodeContentExtension = ({
     children,
+    slideOutOfNode = false,
     isExpanded = false,
     onToggle = undefined,
     actionButtons,
@@ -50,6 +55,7 @@ export const NodeContentExtension = ({
             {...otherProps}
             className={
                 `${eccgui}-graphviz__node__extension` +
+                (slideOutOfNode ? ` ${eccgui}-graphviz__node__extension--slideout` : "") +
                 (expanded ? ` ${eccgui}-graphviz__node__extension--expanded` : "")
             }
         >

package/src/extensions/react-flow/nodes/NodeTools.tsx

@@ -1,4 +1,4 @@
-import React, {memo, useState} from "react";import {
+import React, {memo, useEffect, useState} from "react";import {
     IPopoverProps as IBlueprintPopoverProps,
     PopoverInteractionKind as BlueprintPopoverInteractionKind,
 } from "@blueprintjs/core";
@@ -11,6 +11,14 @@ export interface NodeToolsProps extends IBlueprintPopoverProps {
     togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string
+    /** If defined this function will be called with the menu API object to be used externally. */
+    menuFunctionsCallback?: (menuFunctions: NodeToolsMenuFunctions) => any
+}
+
+// Functions regarding the menu that can be called from the outside
+export interface NodeToolsMenuFunctions {
+    /** Closes the menu if its open. */
+    closeMenu: () => void
 }
 
 export const NodeTools = memo(({
@@ -18,16 +26,25 @@ export const NodeTools = memo(({
     togglerElement = "item-moremenu",
     togglerText = "Show more options",
     menuButtonDataTestId,
+    menuFunctionsCallback,
     ...otherOverlayProps
 }: NodeToolsProps) => {
-    const [isOpened, toggleIsOpened] = useState<boolean>(false);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    useEffect(() => {
+        menuFunctionsCallback && menuFunctionsCallback({
+            closeMenu(): void {
+                setIsOpen(false)
+            }
+        })
+    }, [menuFunctionsCallback])
 
     return (
         <ContextOverlay
-            defaultIsOpen={isOpened}
-            interactionKind={isOpened ? BlueprintPopoverInteractionKind.HOVER : BlueprintPopoverInteractionKind.CLICK}
-            onOpening={() => { toggleIsOpened(true); }}
-            onClosing={() => { toggleIsOpened(false); }}
+            isOpen={isOpen}
+            onClose={() => setIsOpen(false)}
+            hoverCloseDelay={500}
+            interactionKind={isOpen ? BlueprintPopoverInteractionKind.HOVER : BlueprintPopoverInteractionKind.CLICK}
             {...otherOverlayProps}
         >
             {typeof togglerElement === "string" ? (
@@ -35,9 +52,8 @@ export const NodeTools = memo(({
                     data-test-id={menuButtonDataTestId}
                     name={togglerElement}
                     text={togglerText}
-                    onMouseUp={() => {
-                        if (isOpened) { toggleIsOpened(false) };
-                    }}/>
+                    onClick={() => setIsOpen(previous => !previous)}
+                />
             ) : (
                 { togglerElement }
             )}