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

package/dist/esm/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"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"}

package/dist/esm/extensions/codemirror/CodeMirror.js

@@ -1,34 +1,77 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React, { useEffect, useRef } from "react";
 import CodeMirror from "codemirror";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 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";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
+export var supportedCodeEditorModes = [
+    "markdown",
+    "python",
+    "sparql",
+    "sql",
+    "turtle",
+    "xml",
+    "jinja2",
+    "yaml",
+    "json",
+    "undefined",
+];
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
 export var CodeEditor = function (_a) {
-    var onChange = _a.onChange, name = _a.name, id = _a.id, _b = _a.mode, mode = _b === void 0 ? "undefined" : _b, _c = _a.preventLineNumbers, preventLineNumbers = _c === void 0 ? false : _c, defaultValue = _a.defaultValue;
+    var onChange = _a.onChange, name = _a.name, id = _a.id, _b = _a.mode, mode = _b === void 0 ? "undefined" : _b, _c = _a.preventLineNumbers, preventLineNumbers = _c === void 0 ? false : _c, defaultValue = _a.defaultValue, _d = _a.readOnly, readOnly = _d === void 0 ? false : _d, height = _a.height, _e = _a.wrapLines, wrapLines = _e === void 0 ? false : _e, outerDivAttributes = _a.outerDivAttributes;
     var domRef = useRef(null);
     useEffect(function () {
         var editorInstance = CodeMirror.fromTextArea(domRef.current, {
-            mode: mode === "undefined" ? undefined : mode,
-            lineWrapping: true,
+            mode: convertMode(mode),
+            lineWrapping: wrapLines,
             lineNumbers: !preventLineNumbers,
             tabSize: 2,
             theme: "xq-light",
+            readOnly: readOnly,
         });
         editorInstance.on("change", function (api) {
             onChange(api.getValue());
         });
+        if (height) {
+            editorInstance.setSize(null, height);
+        }
         return function cleanup() {
             editorInstance.toTextArea();
         };
     }, [onChange, mode, preventLineNumbers]);
-    return (React.createElement("div", { className: eccgui + "-codeeditor" },
-        React.createElement("textarea", { ref: domRef, "data-test-id": "codemirror-wrapper", id: !!id ? id : "codemirror-" + name, name: name, defaultValue: defaultValue })));
+    return (React.createElement("div", __assign({}, outerDivAttributes, { className: eccgui + "-codeeditor" }),
+        React.createElement("textarea", { ref: domRef, "data-test-id": "codemirror-wrapper", id: id ? id : "codemirror-" + name, name: name, defaultValue: defaultValue })));
+};
+var convertMode = function (mode) {
+    switch (mode) {
+        case "undefined":
+            return undefined;
+        case "json":
+            return {
+                name: "javascript",
+                json: true,
+            };
+        default:
+            return mode;
+    }
 };
 //# sourceMappingURL=CodeMirror.js.map

package/dist/esm/extensions/codemirror/CodeMirror.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeMirror.js","sourceRoot":"","sources":["../../../../src/extensions/codemirror/CodeMirror.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,sCAAsC,CAAC;AAC9C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AA+BpC;;GAEG;AACH,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,EAOT;QANd,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,EAAE,QAAA,EACF,YAAkB,EAAlB,IAAI,mBAAG,WAAW,KAAA,EAClB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,YAAY,kBAAA;IAEZ,IAAM,MAAM,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC;QACN,IAAM,cAAc,GAAG,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,OAAQ,EAAE;YAC5D,IAAI,EAAE,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;YAC7C,YAAY,EAAE,IAAI;YAClB,WAAW,EAAE,CAAC,kBAAkB;YAChC,OAAO,EAAE,CAAC;YACV,KAAK,EAAE,UAAU;SACpB,CAAC,CAAC;QAEH,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAC,GAAG;YAC5B,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;QAEH,OAAO,SAAS,OAAO;YACnB,cAAc,CAAC,UAAU,EAAE,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEzC,OAAO,CACH,6BAAK,SAAS,EAAK,MAAM,gBAAa;QAClC,kCACI,GAAG,EAAE,MAAM,kBAME,oBAAoB,EACjC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAc,IAAM,EACpC,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,GAC5B,CACA,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"CodeMirror.js","sourceRoot":"","sources":["../../../../src/extensions/codemirror/CodeMirror.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAA0B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,UAAyC,MAAM,YAAY,CAAC;AAEnE,OAAO,sCAAsC,CAAC;AAC9C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AACtC,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,CAAC,IAAM,wBAAwB,GAAG;IACpC,UAAU;IACV,QAAQ;IACR,QAAQ;IACR,KAAK;IACL,QAAQ;IACR,KAAK;IACL,QAAQ;IACR,MAAM;IACN,MAAM;IACN,WAAW;CACL,CAAC;AA4CX;;GAEG;AACH,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,EAWT;QAVd,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,EAAE,QAAA,EACF,YAAkB,EAAlB,IAAI,mBAAG,WAAW,KAAA,EAClB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,YAAY,kBAAA,EACZ,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,MAAM,YAAA,EACN,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,kBAAkB,wBAAA;IAElB,IAAM,MAAM,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC;QACN,IAAM,cAAc,GAAG,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,OAAQ,EAAE;YAC5D,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;YACvB,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,CAAC,kBAAkB;YAChC,OAAO,EAAE,CAAC;YACV,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;QAEH,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAC,GAAG;YAC5B,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;QAEH,IAAI,MAAM,EAAE;YACR,cAAc,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;SACxC;QAED,OAAO,SAAS,OAAO;YACnB,cAAc,CAAC,UAAU,EAAE,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEzC,OAAO,CACH,wCAAS,kBAAkB,IAAE,SAAS,EAAK,MAAM,gBAAa;QAC1D,kCACI,GAAG,EAAE,MAAM,kBAME,oBAAoB,EACjC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAc,IAAM,EAClC,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,GAC5B,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,IAAM,WAAW,GAAG,UAAC,IAA0C;IAC3D,QAAQ,IAAI,EAAE;QACV,KAAK,WAAW;YACZ,OAAO,SAAS,CAAC;QACrB,KAAK,MAAM;YACP,OAAO;gBACH,IAAI,EAAE,YAAY;gBAClB,IAAI,EAAE,IAAI;aACb,CAAC;QACN;YACI,OAAO,IAAI,CAAC;KACnB;AACL,CAAC,CAAC"}

package/dist/esm/extensions/react-flow/edges/EdgeLabel.js

@@ -21,18 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { memo } from "react";
-import { Icon, Depiction, OverflowText } from "../../../index.js";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants.js";
 import { intentClassName } from "../../../common/Intent/index.js";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants.js";
+import { Depiction, Icon, OverflowText } from "../../../index.js";
 export var EdgeLabel = memo(function (_a) {
-    var depiction = _a.depiction, text = _a.text, actions = _a.actions, large = _a.large, fullWidth = _a.fullWidth, intent = _a.intent, title = _a.title, otherDivProps = __rest(_a, ["depiction", "text", "actions", "large", "fullWidth", "intent", "title"]);
-    var depEl = (!!depiction && typeof depiction === "string")
-        ? React.createElement(Depiction, { image: React.createElement(Icon, { name: depiction }) })
-        : depiction;
+    var depiction = _a.depiction, text = _a.text, actions = _a.actions, large = _a.large, fullWidth = _a.fullWidth, loose = _a.loose, intent = _a.intent, title = _a.title, otherDivProps = __rest(_a, ["depiction", "text", "actions", "large", "fullWidth", "loose", "intent", "title"]);
+    var depEl = !!depiction && typeof depiction === "string" ? (React.createElement(Depiction, { image: React.createElement(Icon, { name: depiction }) })) : (depiction);
     return (React.createElement("div", __assign({ className: eccgui + "-graphviz__edge-label" +
             (large ? " " + eccgui + "-graphviz__edge-label--large" : "") +
             (fullWidth ? " " + eccgui + "-graphviz__edge-label--fullwidth" : "") +
-            (!!intent ? " " + intentClassName(intent) : '') }, otherDivProps),
+            (loose ? " " + eccgui + "-graphviz__edge-label--loose" : "") +
+            (intent ? " " + intentClassName(intent) : "") }, otherDivProps),
         !!depEl && (React.createElement("div", { className: eccgui + "-graphviz__edge-label__depiction" }, React.cloneElement(depEl, {
             padding: "tiny",
             ratio: "1:1",
@@ -42,7 +41,7 @@ export var EdgeLabel = memo(function (_a) {
             backgroundColor: undefined,
         }))),
         React.createElement("div", { className: eccgui + "-graphviz__edge-label__text", title: title }, typeof text === "string" ? React.createElement(OverflowText, null, text) : text),
-        !!actions && (React.createElement("div", { className: eccgui + "-graphviz__edge-label__aux" }, actions))));
+        !!actions && React.createElement("div", { className: eccgui + "-graphviz__edge-label__aux" }, actions)));
 });
 export var EdgeLabelObject = memo(function (_a) {
     var children = _a.children, edgeCenter = _a.edgeCenter, _b = _a.resizeTimeout, resizeTimeout = _b === void 0 ? -1 : _b, otherForeignObjectProps = __rest(_a, ["children", "edgeCenter", "resizeTimeout"]);
@@ -63,7 +62,9 @@ export var EdgeLabelObject = memo(function (_a) {
         else if (resizeTimeout > 0) {
             // Content is not ready yet, recall resizing process after timeout.
             // This can happen in case the children is actually not a `EdgeLabel`.
-            setTimeout(function () { labelSize(container); }, resizeTimeout);
+            setTimeout(function () {
+                labelSize(container);
+            }, resizeTimeout);
         }
     };
     return (React.createElement("foreignObject", __assign({ ref: containerCallback, className: eccgui + "-graphviz__edge-labelobject", width: "1", height: "1" }, otherForeignObjectProps, { requiredExtensions: "http://www.w3.org/1999/xhtml" }), children));

package/dist/esm/extensions/react-flow/edges/EdgeLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeLabel.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/edges/EdgeLabel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"EdgeLabel.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/edges/EdgeLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,eAAe,EAAe,MAAM,wBAAwB,CAAC;AAEtE,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAkB,IAAI,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAkC/E,MAAM,CAAC,IAAM,SAAS,GAAG,IAAI,CACzB,UAAC,EAAsG;IAApG,IAAA,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAK,aAAa,cAApF,kFAAsF,CAAF;IACjF,IAAM,KAAK,GACP,CAAC,CAAC,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3C,oBAAC,SAAS,IAAC,KAAK,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAE,SAA0B,GAAI,GAAI,CACnE,CAAC,CAAC,CAAC,CACA,SAAS,CACZ,CAAC;IAEN,OAAO,CACH,sCACI,SAAS,EACF,MAAM,0BAAuB;YAChC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAI,MAAM,iCAA8B,CAAC,CAAC,CAAC,EAAE,CAAC;YACvD,CAAC,SAAS,CAAC,CAAC,CAAC,MAAI,MAAM,qCAAkC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC/D,CAAC,KAAK,CAAC,CAAC,CAAC,MAAI,MAAM,iCAA8B,CAAC,CAAC,CAAC,EAAE,CAAC;YACvD,CAAC,MAAM,CAAC,CAAC,CAAC,MAAI,eAAe,CAAC,MAAM,CAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAE7C,aAAa;QAEhB,CAAC,CAAC,KAAK,IAAI,CACR,6BAAK,SAAS,EAAK,MAAM,qCAAkC,IACtD,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;YACvB,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;YACpB,MAAM,EAAE,KAAK;YACb,eAAe,EAAE,SAAS;SAC7B,CAAC,CACA,CACT;QACD,6BAAK,SAAS,EAAK,MAAM,gCAA6B,EAAE,KAAK,EAAE,KAAK,IAC/D,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAC,YAAY,QAAE,IAAI,CAAgB,CAAC,CAAC,CAAC,IAAI,CACpE;QACL,CAAC,CAAC,OAAO,IAAI,6BAAK,SAAS,EAAK,MAAM,+BAA4B,IAAG,OAAO,CAAO,CAClF,CACT,CAAC;AACN,CAAC,CACJ,CAAC;AAkBF,MAAM,CAAC,IAAM,eAAe,GAAG,IAAI,CAC/B,UAAC,EAA8F;IAA5F,IAAA,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAE,qBAAkB,EAAlB,aAAa,mBAAG,CAAC,CAAC,KAAA,EAAK,uBAAuB,cAAtE,2CAAwE,CAAF;IACnE,IAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACvC,UAAC,YAAY;QACT,IAAI,YAAY;YAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAC9C,CAAC,EACD,CAAC,UAAU,CAAC,CACf,CAAC;IAEF,IAAM,SAAS,GAAG,UAAC,SAAkC;QACjD,IAAM,YAAY,GAAG,SAAS,CAAC,sBAAsB,CAAI,MAAM,0BAAuB,CAAC,CAAC;QACxF,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;YACzB,IAAM,KAAK,GAAI,YAAY,CAAC,CAAC,CAAiB,CAAC,WAAW,CAAC;YAC3D,IAAM,MAAM,GAAI,YAAY,CAAC,CAAC,CAAiB,CAAC,YAAY,CAAC;YAC7D,SAAS,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;YACpE,SAAS,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;YACrE,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;YAClD,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;SACvD;aAAM,IAAI,aAAa,GAAG,CAAC,EAAE;YAC1B,mEAAmE;YACnE,sEAAsE;YACtE,UAAU,CAAC;gBACP,SAAS,CAAC,SAAS,CAAC,CAAC;YACzB,CAAC,EAAE,aAAa,CAAC,CAAC;SACrB;IACL,CAAC,CAAC;IAEF,OAAO,CACH,gDACI,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAK,MAAM,gCAA6B,EACjD,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,IACN,uBAAuB,IAC3B,kBAAkB,EAAC,8BAA8B,KAEhD,QAAQ,CACG,CACnB,CAAC;AACN,CAAC,CACJ,CAAC"}

package/dist/esm/extensions/react-flow/handles/HandleContent.js

@@ -1,11 +1,22 @@
-import React, { memo } from 'react';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { memo } from "react";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants.js";
 import { Tooltip } from "../../../index.js";
 export var HandleContent = memo(function (_a) {
-    var children = _a.children, extendedTooltip = _a.extendedTooltip;
-    var handleContent = !!children ? (React.createElement("div", { className: eccgui + "-graphviz__handle__content" }, children)) : !!extendedTooltip ? (React.createElement("div", { className: eccgui + "-graphviz__handle__content" })) : (React.createElement(React.Fragment, null));
-    if (!!extendedTooltip) {
-        return (React.createElement(Tooltip, { content: extendedTooltip, autoFocus: false, enforceFocus: false, openOnTargetFocus: false }, handleContent));
+    var children = _a.children, extendedTooltip = _a.extendedTooltip, tooltipProps = _a.tooltipProps;
+    var handleContent = children ? (React.createElement("div", { className: eccgui + "-graphviz__handle__content" }, children)) : extendedTooltip ? (React.createElement("div", { className: eccgui + "-graphviz__handle__content" })) : (React.createElement(React.Fragment, null));
+    if (extendedTooltip && (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.isOpen)) {
+        return (React.createElement(Tooltip, __assign({ content: extendedTooltip, autoFocus: false, enforceFocus: false, openOnTargetFocus: false }, tooltipProps), handleContent));
     }
     return handleContent;
 });

package/dist/esm/extensions/react-flow/handles/HandleContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"HandleContent.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/handles/HandleContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,IAAI,EAAC,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAUzC,MAAM,CAAC,IAAM,aAAa,GAAG,IAAI,CAAC,UAAC,EAGd;QAFjB,QAAQ,cAAA,EACR,eAAe,qBAAA;IAEf,IAAM,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC/B,6BAAK,SAAS,EAAK,MAAM,+BAA4B,IAC/C,QAAQ,CACR,CACT,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CACpB,6BAAK,SAAS,EAAK,MAAM,+BAA4B,GAAI,CAC5D,CAAC,CAAC,CAAC,CACA,yCAAK,CACR,CAAC;IAEF,IAAI,CAAC,CAAC,eAAe,EAAE;QACnB,OAAO,CACH,oBAAC,OAAO,IACJ,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,KAAK,EAChB,YAAY,EAAE,KAAK,EACnB,iBAAiB,EAAE,KAAK,IAEtB,aAAa,CACT,CACb,CAAC;KACL;IAED,OAAO,aAAa,CAAC;AACzB,CAAC,CAAC,CAAC"}
+{"version":3,"file":"HandleContent.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/handles/HandleContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,OAAO,EAAgB,MAAM,gBAAgB,CAAC;AAcvD,MAAM,CAAC,IAAM,aAAa,GAAG,IAAI,CAAC,UAAC,EAA+D;QAA7D,QAAQ,cAAA,EAAE,eAAe,qBAAA,EAAE,YAAY,kBAAA;IACxE,IAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC7B,6BAAK,SAAS,EAAK,MAAM,+BAA4B,IAAG,QAAQ,CAAO,CAC1E,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAClB,6BAAK,SAAS,EAAK,MAAM,+BAA4B,GAAI,CAC5D,CAAC,CAAC,CAAC,CACA,yCAAK,CACR,CAAC;IAEF,IAAI,eAAe,KAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,CAAA,EAAE;QACzC,OAAO,CACH,oBAAC,OAAO,aACJ,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,KAAK,EAChB,YAAY,EAAE,KAAK,EACnB,iBAAiB,EAAE,KAAK,IACpB,YAAY,GAEf,aAAa,CACR,CACb,CAAC;KACL;IAED,OAAO,aAAa,CAAC;AACzB,CAAC,CAAC,CAAC"}

package/dist/esm/extensions/react-flow/handles/HandleDefault.js

@@ -20,22 +20,88 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { memo } from 'react';
-import { Handle as HandleLegacy, } from "react-flow-renderer";
-import { Handle as HandleNext, } from "react-flow-renderer-lts";
-import { HandleContent } from "./HandleContent.js";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React, { memo } from "react";
+import { Handle as HandleLegacy } from "react-flow-renderer";
+import { Handle as HandleNext } from "react-flow-renderer-lts";
+import { intentClassName } from "../../../common/Intent/index.js";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants.js";
 import { useReactFlowVersion } from "../versionsupport.js";
+import { HandleContent } from "./HandleContent.js";
 export var HandleDefault = memo(function (_a) {
-    var flowVersion = _a.flowVersion, data = _a.data, tooltip = _a.tooltip, children = _a.children, handleProps = __rest(_a, ["flowVersion", "data", "tooltip", "children"]);
+    var flowVersion = _a.flowVersion, data = _a.data, tooltip = _a.tooltip, children = _a.children, category = _a.category, intent = _a.intent, handleProps = __rest(_a, ["flowVersion", "data", "tooltip", "children", "category", "intent"]);
     var evaluateFlowVersion = useReactFlowVersion();
     var flowVersionCheck = flowVersion || evaluateFlowVersion;
-    var tooltipTitle = !!tooltip ? { title: tooltip } : {};
-    var handleContent = (React.createElement(HandleContent, __assign({}, data), children));
+    var handleDefaultRef = React.useRef();
+    var _b = __read(React.useState(false), 2), extendedTooltipDisplayed = _b[0], setExtendedTooltipDisplayed = _b[1];
+    var _c = __read(React.useState(false), 2), handleToolsDisplayed = _c[0], setHandleToolsDisplayed = _c[1];
+    var routeClickToTools = React.useCallback(function (e) {
+        var toolsTarget = handleDefaultRef.current.getElementsByClassName(eccgui + "-graphviz__handletools-target");
+        if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
+            setHandleToolsDisplayed(true);
+            setExtendedTooltipDisplayed(false);
+        }
+    }, [handleDefaultRef]);
+    React.useEffect(function () {
+        var toolsTarget = handleDefaultRef.current.getElementsByClassName(eccgui + "-graphviz__handletools-target");
+        if (toolsTarget && toolsTarget[0]) {
+            // Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
+            // need to be re-evaluated then
+            // @see https://connect.mozilla.org/t5/ideas/when-is-has-css-selector-going-to-be-fully-implemented-in/idi-p/23794
+            handleDefaultRef.current.classList.add("ffpolyfill-has-" + eccgui + "-graphviz__handletools-target");
+        }
+        if (handleToolsDisplayed) {
+            toolsTarget[0].click();
+        }
+    }, [handleToolsDisplayed]);
+    var tooltipTitle = tooltip ? { title: tooltip } : {};
+    var handleContentTooltipProps = {
+        placement: handleProps.position === "left" || handleProps.position === "right"
+            ? handleProps.position + "-end"
+            : undefined,
+        modifiers: {
+            offset: {
+                enabled: true,
+                options: {
+                    offset: [3, 20],
+                },
+            },
+        },
+        intent: intent,
+        className: eccgui + "-graphviz__handle__tooltip-target",
+        isOpen: extendedTooltipDisplayed && !handleToolsDisplayed,
+    };
+    var handleContentProps = __assign(__assign({}, data), { tooltipProps: __assign(__assign({}, handleContentTooltipProps), data === null || data === void 0 ? void 0 : data.tooltipProps) });
+    var handleContent = React.createElement(HandleContent, __assign({}, handleContentProps), children);
+    var handleConfig = __assign(__assign(__assign({}, handleProps), tooltipTitle), { className: intent ? " " + intentClassName(intent) : "", onClick: function (e) {
+            if (handleProps.onClick) {
+                handleProps.onClick(e);
+            }
+            routeClickToTools(e);
+        }, "data-category": category, onMouseEnter: function () {
+            setExtendedTooltipDisplayed(true);
+            setHandleToolsDisplayed(false);
+        }, onMouseLeave: function () { return setExtendedTooltipDisplayed(false); } });
     switch (flowVersionCheck) {
         case "legacy":
-            return (React.createElement(HandleLegacy, __assign({}, handleProps, tooltipTitle), handleContent));
+            return (React.createElement(HandleLegacy, __assign({ ref: handleDefaultRef }, handleConfig), handleContent));
         case "next":
-            return (React.createElement(HandleNext, __assign({}, handleProps, tooltipTitle), handleContent));
+            return (React.createElement(HandleNext, __assign({ ref: handleDefaultRef }, handleConfig), handleContent));
         default:
             return React.createElement(React.Fragment, null);
     }

package/dist/esm/extensions/react-flow/handles/HandleDefault.js.map

@@ -1 +1 @@
-{"version":3,"file":"HandleDefault.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/handles/HandleDefault.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAC,IAAI,EAAC,MAAM,OAAO,CAAC;AAClC,OAAO,EAEH,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAEH,MAAM,IAAI,UAAU,GACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAA+B,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAoBrF,MAAM,CAAC,IAAM,aAAa,GAAG,IAAI,CAAC,UAAC,EAMd;IALjB,IAAA,WAAW,iBAAA,EACX,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,QAAQ,cAAA,EACL,WAAW,cALiB,8CAMlC,CADiB;IAEd,IAAM,mBAAmB,GAAG,mBAAmB,EAAE,CAAC;IAClD,IAAM,gBAAgB,GAAG,WAAW,IAAI,mBAAmB,CAAC;IAE5D,IAAM,YAAY,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzD,IAAM,aAAa,GAAG,CAClB,oBAAC,aAAa,eAAK,IAAI,GACjB,QAAQ,CACE,CACnB,CAAC;IAEF,QAAQ,gBAAgB,EAAE;QACtB,KAAK,QAAQ;YACT,OAAO,CACH,oBAAC,YAAY,eAAK,WAAW,EAAM,YAAY,GACzC,aAAa,CACJ,CAClB,CAAC;QACN,KAAK,MAAM;YACP,OAAO,CACH,oBAAC,UAAU,eAAK,WAAW,EAAM,YAAY,GACvC,aAAa,CACN,CAChB,CAAC;QACN;YACI,OAAO,yCAAK,CAAC;KACpB;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"HandleDefault.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/handles/HandleDefault.tsx"],"names":[],"mappings":"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"}

package/dist/esm/extensions/react-flow/handles/HandleTools.js

@@ -0,0 +1,61 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants.js";
+import { ContextOverlay } from "../../../index.js";
+export var HandleTools = function (_a) {
+    var children = _a.children, otherContextOverlayProps = __rest(_a, ["children"]);
+    var _b = __read(React.useState(false), 2), toolsDisplayed = _b[0], setToolsDisplayed = _b[1];
+    var configToolsDisplayed = toolsDisplayed
+        ? {
+            defaultIsOpen: true,
+            autoFocus: true,
+            interactionKind: BlueprintPopoverInteractionKind.HOVER,
+            onClosing: function () { return setToolsDisplayed(false); },
+        }
+        : {
+            onOpening: function () {
+                setToolsDisplayed(true);
+            },
+        };
+    return (React.createElement(ContextOverlay, __assign({ hoverCloseDelay: 500 }, configToolsDisplayed, otherContextOverlayProps, { content: React.createElement("div", { className: eccgui + "-graphviz__handletools-content" }, children), className: eccgui + "-graphviz__handletools-target", popoverClassName: eccgui + "-graphviz__handletools-overlay" }),
+        React.createElement("div", { className: eccgui + "-graphviz__handletools-target", "data-test-id": otherContextOverlayProps["data-test-id"] })));
+};
+//# sourceMappingURL=HandleTools.js.map

package/dist/esm/extensions/react-flow/handles/HandleTools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandleTools.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/handles/HandleTools.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,IAAI,+BAA+B,EAAE,MAAM,mBAAmB,CAAC;AAE9F,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAqB,MAAM,gBAAgB,CAAC;AAUnE,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAA2D;IAAzD,IAAA,QAAQ,cAAA,EAAK,wBAAwB,cAAvC,YAAyC,CAAF;IACzD,IAAA,KAAA,OAAsC,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,IAAA,EAAnE,cAAc,QAAA,EAAE,iBAAiB,QAAkC,CAAC;IAE3E,IAAM,oBAAoB,GAAG,cAAc;QACvC,CAAC,CAAC;YACI,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,IAAI;YACf,eAAe,EAAE,+BAA+B,CAAC,KAAK;YACtD,SAAS,EAAE,cAAM,OAAA,iBAAiB,CAAC,KAAK,CAAC,EAAxB,CAAwB;SAC5C;QACH,CAAC,CAAC;YACI,SAAS,EAAE;gBACP,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC;SACJ,CAAC;IAER,OAAO,CACH,oBAAC,cAAc,aACX,eAAe,EAAE,GAAG,IAChB,oBAAoB,EACpB,wBAAwB,IAC5B,OAAO,EAAE,6BAAK,SAAS,EAAK,MAAM,mCAAgC,IAAG,QAAQ,CAAO,EACpF,SAAS,EAAK,MAAM,kCAA+B,EACnD,gBAAgB,EAAK,MAAM,mCAAgC;QAE3D,6BACI,SAAS,EAAK,MAAM,kCAA+B,kBACrC,wBAAwB,CAAC,cAAc,CAAC,GACxD,CACW,CACpB,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/extensions/react-flow/index.js

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

package/dist/esm/extensions/react-flow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/extensions/react-flow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAEhC,qBAAqB;AACrB,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC,CAAC,qCAAqC;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC,CAAC,qCAAqC;AACpF,wDAAwD;AACxD,IAAM,oBAAoB,GAAG,YAAY,CAAC,aAAa,CAAC;AACxD,wDAAwD;AACxD,IAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,CAAC;AAClD,4CAA4C;AAC5C,IAAM,SAAS,GAAG,gBAAgB,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/extensions/react-flow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAEhC,qBAAqB;AACrB,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC,CAAC,qCAAqC;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC,CAAC,qCAAqC;AACpF,wDAAwD;AACxD,IAAM,oBAAoB,GAAG,YAAY,CAAC,aAAa,CAAC;AACxD,wDAAwD;AACxD,IAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,CAAC;AAClD,4CAA4C;AAC5C,IAAM,SAAS,GAAG,gBAAgB,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/esm/extensions/react-flow/nodes/NodeContent.js

@@ -69,20 +69,16 @@ var addHandles = function (handles, position, posDirection, isConnectable, nodeS
     if (flowVersion === void 0) { flowVersion = "legacy"; }
     return handles[position].map(function (handle, idx) {
         var _a, _b;
-        var className = handle.className, _c = handle.style, style = _c === void 0 ? {} : _c, category = handle.category;
+        var _c = handle.style, style = _c === void 0 ? {} : _c, otherHandleProps = __rest(handle, ["style"]);
         var styleAdditions = {
             color: (_a = nodeStyle.borderColor) !== null && _a !== void 0 ? _a : undefined,
         };
         styleAdditions[posDirection] = (100 / (handles[position].length + 1)) * (idx + 1) + "%";
-        var handleProperties = __assign(__assign({}, handle), {
+        var handleProperties = __assign(__assign({}, otherHandleProps), {
             position: (_b = handle.position) !== null && _b !== void 0 ? _b : position,
             style: __assign(__assign({}, style), styleAdditions),
             posdirection: posDirection,
             isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
-            className: category
-                ? (className ? className + " " : "") +
-                    gethighlightedStateClasses(category, eccgui + "-graphviz__handle")
-                : className,
         });
         return React.createElement(MemoHandler, __assign({ flowVersion: flowVersion }, handleProperties, { key: "handle" + idx }));
     });
@@ -95,7 +91,10 @@ var MemoHandler = React.memo(function (props) { return React.createElement(Handl
     return (
     // we only test a few properties to control re-rendering
     // need to be extended if also other properties need to be changed late
-    prev.style[prev.posdirection] === next.style[next.posdirection] && prev.isConnectable === next.isConnectable);
+    prev.style[prev.posdirection] === next.style[next.posdirection] &&
+        prev.isConnectable === next.isConnectable &&
+        prev.intent === next.intent &&
+        prev.category === next.category);
 });
 /**
  * The `NodeContent` element manages the main view of how a node is displaying which content.
@@ -106,21 +105,21 @@ export function NodeContent(_a) {
     var _c, _d;
     var flowVersion = _a.flowVersion, iconName = _a.iconName, depiction = _a.depiction, leftElement = _a.leftElement, typeLabel = _a.typeLabel, label = _a.label, labelSubline = _a.labelSubline, enlargeHeader = _a.enlargeHeader, fullWidth = _a.fullWidth, _e = _a.showExecutionButtons, showExecutionButtons = _e === void 0 ? true : _e, executionButtons = _a.executionButtons, menuButtons = _a.menuButtons, content = _a.content, contentExtension = _a.contentExtension, footerContent = _a.footerContent, _f = _a.size, size = _f === void 0 ? "small" : _f, _g = _a.minimalShape, minimalShape = _g === void 0 ? "circular" : _g, highlightedState = _a.highlightedState, intent = _a.intent, border = _a.border, highlightColor = _a.highlightColor, 
     //handles = defaultHandles(),
-    adaptHeightForHandleMinCount = _a.adaptHeightForHandleMinCount, _h = _a.adaptSizeIncrement, adaptSizeIncrement = _h === void 0 ? 15 : _h, _j = _a.getMinimalTooltipData, getMinimalTooltipData = _j === void 0 ? getDefaultMinimalTooltipData : _j, _k = _a.style, style = _k === void 0 ? {} : _k, _l = _a.showUnconnectableHandles, showUnconnectableHandles = _l === void 0 ? false : _l, _m = _a.animated, animated = _m === void 0 ? false : _m, onNodeResize = _a.onNodeResize, nodeDimensions = _a.nodeDimensions, 
+    adaptHeightForHandleMinCount = _a.adaptHeightForHandleMinCount, _h = _a.adaptSizeIncrement, adaptSizeIncrement = _h === void 0 ? 15 : _h, _j = _a.getMinimalTooltipData, getMinimalTooltipData = _j === void 0 ? getDefaultMinimalTooltipData : _j, _k = _a.style, style = _k === void 0 ? {} : _k, _l = _a.showUnconnectableHandles, showUnconnectableHandles = _l === void 0 ? false : _l, _m = _a.animated, animated = _m === void 0 ? false : _m, _o = _a.introductionTime, introductionTime = _o === void 0 ? 0 : _o, onNodeResize = _a.onNodeResize, nodeDimensions = _a.nodeDimensions, 
     // forwarded props
-    _o = _a.targetPosition, 
+    _p = _a.targetPosition, 
     // forwarded props
-    targetPosition = _o === void 0 ? Position.Left : _o, _p = _a.sourcePosition, sourcePosition = _p === void 0 ? Position.Right : _p, _q = _a.isConnectable, isConnectable = _q === void 0 ? true : _q, selected = _a.selected, _r = _a.letPassWheelEvents, letPassWheelEvents = _r === void 0 ? false : _r, 
+    targetPosition = _p === void 0 ? Position.Left : _p, _q = _a.sourcePosition, sourcePosition = _q === void 0 ? Position.Right : _q, _r = _a.isConnectable, isConnectable = _r === void 0 ? true : _r, selected = _a.selected, _s = _a.letPassWheelEvents, letPassWheelEvents = _s === void 0 ? false : _s, 
     // businessData is just being ignored
     businessData = _a.businessData, 
     // other props for DOM element
-    otherDomProps = __rest(_a, ["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 = __rest(_a, ["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"]);
     var evaluateFlowVersion = useReactFlowVersion();
     var flowVersionCheck = flowVersion || evaluateFlowVersion;
-    var _s = otherDomProps.handles, handles = _s === void 0 ? defaultHandles(flowVersionCheck) : _s, otherProps = __rest(otherDomProps, ["handles"]);
+    var _t = otherDomProps.handles, handles = _t === void 0 ? defaultHandles(flowVersionCheck) : _t, otherProps = __rest(otherDomProps, ["handles"]);
     var isResizeable = !!onNodeResize && minimalShape === "none";
-    var _t = __read(React.useState((_c = nodeDimensions === null || nodeDimensions === void 0 ? void 0 : nodeDimensions.width) !== null && _c !== void 0 ? _c : 0), 2), width = _t[0], setWidth = _t[1];
-    var _u = __read(React.useState((_d = nodeDimensions === null || nodeDimensions === void 0 ? void 0 : nodeDimensions.height) !== null && _d !== void 0 ? _d : 0), 2), height = _u[0], setHeight = _u[1];
+    var _u = __read(React.useState((_c = nodeDimensions === null || nodeDimensions === void 0 ? void 0 : nodeDimensions.width) !== null && _c !== void 0 ? _c : 0), 2), width = _u[0], setWidth = _u[1];
+    var _v = __read(React.useState((_d = nodeDimensions === null || nodeDimensions === void 0 ? void 0 : nodeDimensions.height) !== null && _d !== void 0 ? _d : 0), 2), height = _v[0], setHeight = _v[1];
     var zoom = 1;
     if (isResizeable)
         try {
@@ -132,7 +131,7 @@ export function NodeContent(_a) {
             // do not handle error but at least push it to the console
             console.error(error);
         }
-    var _v = __read(React.useState({}), 2), adjustedContentProps = _v[0], setAdjustedContentProps = _v[1];
+    var _w = __read(React.useState({}), 2), adjustedContentProps = _w[0], setAdjustedContentProps = _w[1];
     var nodeContentRef = React.useRef();
     var handleStack = flowVersionCheck === "legacy"
         ? {}
@@ -159,15 +158,39 @@ export function NodeContent(_a) {
             nodeContentRef.current.className = nodeContentRef.current.className + " is-resizeable";
         }
     }, [nodeContentRef, onNodeResize, minimalShape, nodeDimensions]);
-    //update node dimensions when resized
+    // update node dimensions when resized
     React.useEffect(function () {
         if (nodeDimensions) {
             setWidth(nodeDimensions.width);
             setHeight(nodeDimensions.height);
         }
     }, [nodeDimensions]);
+    // remove introduction class
+    React.useEffect(function () {
+        var _a;
+        if (nodeContentRef && introductionTime) {
+            var timeDelay = typeof introductionTime === "object" ? (_a = introductionTime.delay) !== null && _a !== void 0 ? _a : 0 : 0;
+            var timeRun = typeof introductionTime === "object" ? introductionTime.run : introductionTime;
+            setTimeout(function () {
+                nodeContentRef.current.className = nodeContentRef.current.className.replace(eccgui + "-graphviz__node--introduction", eccgui + "-graphviz__node--introduction-runs");
+            }, timeDelay);
+            setTimeout(function () {
+                nodeContentRef.current.className = nodeContentRef.current.className.replace(eccgui + "-graphviz__node--introduction-runs", "");
+            }, timeDelay + timeRun);
+        }
+    }, [nodeContentRef, introductionTime]);
     if (handles.length > 0) {
-        handles.forEach(function (handle) {
+        handles
+            .sort(function (a, b) {
+            if (a.category === "dependency") {
+                return 1;
+            }
+            if (b.category === "dependency") {
+                return -1;
+            }
+            return 0;
+        })
+            .forEach(function (handle) {
             if (handle.position) {
                 handleStack[handle.position].push(handle);
             }
@@ -194,10 +217,15 @@ export function NodeContent(_a) {
         var minHeightRight = handleStack[Position.Right].length * adaptSizeIncrement;
         styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
     }
-    var _w = evaluateHighlightColors("--node-highlight", highlightColor), highlightClassNameSuffix = _w.highlightClassNameSuffix, highlightCustomPropertySettings = _w.highlightCustomPropertySettings;
+    var _x = evaluateHighlightColors("--node-highlight", highlightColor), highlightClassNameSuffix = _x.highlightClassNameSuffix, highlightCustomPropertySettings = _x.highlightCustomPropertySettings;
     var resizableStyles = !!onNodeResize === true && minimalShape === "none" && width + height > 0 ? { width: width, height: height } : {};
+    var introductionStyles = introductionTime
+        ? {
+            "--node-introduction-time": (typeof introductionTime === "object" ? introductionTime.run : introductionTime) + "ms",
+        }
+        : {};
     var nodeContent = (React.createElement(React.Fragment, null,
-        React.createElement("section", __assign({ ref: nodeContentRef }, otherProps, { style: __assign(__assign(__assign(__assign({}, style), highlightCustomPropertySettings), styleExpandDimensions), resizableStyles), className: eccgui + "-graphviz__node" +
+        React.createElement("section", __assign({ ref: nodeContentRef }, otherProps, { style: __assign(__assign(__assign(__assign(__assign({}, style), highlightCustomPropertySettings), styleExpandDimensions), resizableStyles), introductionStyles), className: eccgui + "-graphviz__node" +
                 (" " + eccgui + "-graphviz__node--" + size) +
                 (" " + eccgui + "-graphviz__node--minimal-" + minimalShape) +
                 (fullWidth ? " " + eccgui + "-graphviz__node--fullwidth" : "") +
@@ -212,8 +240,9 @@ export function NodeContent(_a) {
                     ? " " + gethighlightedStateClasses(highlightedState, eccgui + "-graphviz__node")
                     : "") +
                 (animated ? " " + eccgui + "-graphviz__node--animated" : "") +
+                (introductionTime ? " " + eccgui + "-graphviz__node--introduction" : "") +
                 (showUnconnectableHandles === false ? " " + eccgui + "-graphviz__node--hidehandles" : "") +
-                (letPassWheelEvents === false ? " nowheel" : "") }),
+                (letPassWheelEvents === false ? " nowheel" : ""), "data-introduction-animation": typeof introductionTime === "object" ? introductionTime.animation : undefined }),
             React.createElement("header", { className: eccgui + "-graphviz__node__header" +
                     (enlargeHeader && minimalShape === "none" ? " " + eccgui + "-graphviz__node__header--large" : "") },
                 (!!iconName || !!depiction || !!leftElement) && (React.createElement("div", { className: eccgui + "-graphviz__node__header-depiction" },