@eccenca/gui-elements 23.6.0-rc.2 → 23.7.0-rc.0

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

@@ -9,12 +9,23 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
+};
 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, tooltipProps = _a.tooltipProps;
-    var handleContent = children ? (React.createElement("div", { className: "".concat(eccgui, "-graphviz__handle__content") }, children)) : extendedTooltip ? (React.createElement("div", { className: "".concat(eccgui, "-graphviz__handle__content") })) : (React.createElement(React.Fragment, null));
+    var children = _a.children, extendedTooltip = _a.extendedTooltip, tooltipProps = _a.tooltipProps, otherDivProps = __rest(_a, ["children", "extendedTooltip", "tooltipProps"]);
+    var handleContent = children ? (React.createElement("div", __assign({ className: "".concat(eccgui, "-graphviz__handle__content") }, otherDivProps), children)) : extendedTooltip ? (React.createElement("div", __assign({ className: "".concat(eccgui, "-graphviz__handle__content") }, otherDivProps))) : (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));
     }

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,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,EAAE,UAAG,MAAM,+BAA4B,IAAG,QAAQ,CAAO,CAC1E,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAClB,6BAAK,SAAS,EAAE,UAAG,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"}
+{"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;AAavD,MAAM,CAAC,IAAM,aAAa,GAAG,IAAI,CAC7B,UAAC,EAAiF;IAA/E,IAAA,QAAQ,cAAA,EAAE,eAAe,qBAAA,EAAE,YAAY,kBAAA,EAAK,aAAa,cAA3D,+CAA6D,CAAF;IACxD,IAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC7B,sCAAK,SAAS,EAAE,UAAG,MAAM,+BAA4B,IAAM,aAAa,GACnE,QAAQ,CACP,CACT,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAClB,sCAAK,SAAS,EAAE,UAAG,MAAM,+BAA4B,IAAM,aAAa,EAAI,CAC/E,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,CACJ,CAAC"}

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

@@ -56,6 +56,6 @@ export var HandleTools = function (_a) {
             },
         };
     return (React.createElement(ContextOverlay, __assign({ hoverCloseDelay: 500 }, configToolsDisplayed, otherContextOverlayProps, { content: React.createElement("div", { className: "".concat(eccgui, "-graphviz__handletools-content") }, children), className: "".concat(eccgui, "-graphviz__handletools-target"), popoverClassName: "".concat(eccgui, "-graphviz__handletools-overlay") }),
-        React.createElement("div", { className: "".concat(eccgui, "-graphviz__handletools-target"), "data-test-id": otherContextOverlayProps["data-test-id"] })));
+        React.createElement("div", { className: "".concat(eccgui, "-graphviz__handletools-target"), "data-test-id": otherContextOverlayProps["data-test-id"], "data-testid": otherContextOverlayProps["data-testid"] })));
 };
 //# sourceMappingURL=HandleTools.js.map

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

@@ -1 +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,EAAE,UAAG,MAAM,mCAAgC,IAAG,QAAQ,CAAO,EACpF,SAAS,EAAE,UAAG,MAAM,kCAA+B,EACnD,gBAAgB,EAAE,UAAG,MAAM,mCAAgC;QAE3D,6BACI,SAAS,EAAE,UAAG,MAAM,kCAA+B,kBACrC,wBAAwB,CAAC,cAAc,CAAC,GACxD,CACW,CACpB,CAAC;AACN,CAAC,CAAC"}
+{"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,EAAE,UAAG,MAAM,mCAAgC,IAAG,QAAQ,CAAO,EACpF,SAAS,EAAE,UAAG,MAAM,kCAA+B,EACnD,gBAAgB,EAAE,UAAG,MAAM,mCAAgC;QAE3D,6BACI,SAAS,EAAE,UAAG,MAAM,kCAA+B,kBACrC,wBAAwB,CAAC,cAAc,CAAC,iBACzC,wBAAwB,CAAC,aAAa,CAAC,GACtD,CACW,CACpB,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/extensions/react-flow/minimap/MiniMap.js

@@ -30,7 +30,8 @@ var minimapCalcConf = {
 };
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
 export var MiniMap = memo(function (_a) {
-    var flowInstance = _a.flowInstance, _b = _a.enableNavigation, enableNavigation = _b === void 0 ? false : _b, _c = _a.maskColor, maskColor = _c === void 0 ? "#ddddddbb" : _c, _d = _a.nodeClassName, nodeClassName = _d === void 0 ? miniMapUtils.nodeClassName : _d, _e = _a.nodeColor, nodeColor = _e === void 0 ? miniMapUtils.nodeColor : _e, _f = _a.nodeStrokeColor, nodeStrokeColor = _f === void 0 ? miniMapUtils.borderColor : _f, minimapProps = __rest(_a, ["flowInstance", "enableNavigation", "maskColor", "nodeClassName", "nodeColor", "nodeStrokeColor"]);
+    var _b;
+    var flowInstance = _a.flowInstance, _c = _a.enableNavigation, enableNavigation = _c === void 0 ? false : _c, _d = _a.maskColor, maskColor = _d === void 0 ? "#ddddddbb" : _d, _e = _a.nodeClassName, nodeClassName = _e === void 0 ? miniMapUtils.nodeClassName : _e, _f = _a.nodeColor, nodeColor = _f === void 0 ? miniMapUtils.nodeColor : _f, _g = _a.nodeStrokeColor, nodeStrokeColor = _g === void 0 ? miniMapUtils.borderColor : _g, wrapperProps = _a.wrapperProps, minimapProps = __rest(_a, ["flowInstance", "enableNavigation", "maskColor", "nodeClassName", "nodeColor", "nodeStrokeColor", "wrapperProps"]);
     var minimapWrapper = React.useRef(null);
     useEffect(function () {
         var minimapDiv = minimapWrapper.current;
@@ -78,22 +79,19 @@ export var MiniMap = memo(function (_a) {
             flowInstance.setTransform(canvasNewState);
         }
     };
-    /**
-    sets the view for the user when clicked and finish navigation
- **/
+    // sets the view for the user when clicked and finish navigation
     var handleMiniMapMouseUp = function (event) {
         handleMiniMapMouseMove(event);
         minimapCalcConf.navigationOn = false;
     };
-    /**
-    enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
- **/
+    // enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
     var handleMiniMapMouseDown = function () {
         if (enableNavigation && flowInstance) {
             minimapCalcConf.navigationOn = true;
         }
     };
-    return (React.createElement("div", { ref: minimapWrapper, onMouseDown: handleMiniMapMouseDown, onMouseUp: handleMiniMapMouseUp, onMouseMove: handleMiniMapMouseMove, onMouseLeave: handleMiniMapMouseUp, style: flowInstance ? { cursor: "grab" } : {} },
+    return (React.createElement("div", __assign({ ref: minimapWrapper, onMouseDown: handleMiniMapMouseDown, onMouseUp: handleMiniMapMouseUp, onMouseMove: handleMiniMapMouseMove, onMouseLeave: handleMiniMapMouseUp }, wrapperProps, { style: flowInstance && enableNavigation
+            ? __assign(__assign({}, ((_b = wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style) !== null && _b !== void 0 ? _b : {})), { cursor: "grab" }) : wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style }),
         React.createElement(ReactFlowMiniMap, __assign({ maskColor: maskColor, nodeClassName: nodeClassName, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor }, minimapProps))));
 });
 //# sourceMappingURL=MiniMap.js.map

package/dist/esm/extensions/react-flow/minimap/MiniMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniMap.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/minimap/MiniMap.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MiniMap.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/minimap/MiniMap.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAuD,MAAM,qBAAqB,CAAC;AAGvH,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AA8BhD,IAAI,eAAe,GAAiB;IAChC,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,IAAI;IACpB,WAAW,EAAE,IAAI;CACpB,CAAC;AAEF,qFAAqF;AACrF,MAAM,CAAC,IAAM,OAAO,GAAG,IAAI,CACvB,UAAC,EASc;;IARX,IAAA,YAAY,kBAAA,EACZ,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACxB,iBAAuB,EAAvB,SAAS,mBAAG,WAAW,KAAA,EACvB,qBAA0C,EAA1C,aAAa,mBAAG,YAAY,CAAC,aAAa,KAAA,EAC1C,iBAAkC,EAAlC,SAAS,mBAAG,YAAY,CAAC,SAAS,KAAA,EAClC,uBAA0C,EAA1C,eAAe,mBAAG,YAAY,CAAC,WAAW,KAAA,EAC1C,YAAY,kBAAA,EACT,YAAY,cARlB,kHASA,CADkB;IAEf,IAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEjE,SAAS,CAAC;QACN,IAAM,UAAU,GAA0B,cAAc,CAAC,OAAO,CAAC;QACjE,IAAI,gBAAgB,IAAI,YAAY,IAAI,UAAU,EAAE;YAChD,eAAe,GAAG;gBACd,YAAY,EAAE,KAAK;gBACnB,cAAc,EAAE,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC;gBAChE,WAAW,EAAE,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC;aACjD,CAAC;SACL;IACL,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAErC,8EAA8E;IAC9E,IAAM,sBAAsB,GAAG,UAAC,KAAU;;QACtC,IAAM,aAAa,GAAG,MAAA,MAAA,eAAe,CAAC,cAAc,0CAAE,YAAY,CAAC,SAAS,CAAC,0CAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1F,IACI,eAAe,CAAC,YAAY;YAC5B,eAAe,CAAC,cAAc;YAC9B,eAAe,CAAC,WAAW;YAC3B,YAAY;YACZ,aAAa,EACf;YACE,IAAM,aAAa,GAAG,eAAe,CAAC,cAAc,CAAC,qBAAqB,EAAE,CAAC;YAC7E,IAAM,YAAY,GAAG,eAAe,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;YACzE,IAAM,aAAa,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;YAC9C,IAAM,kBAAkB,GAAG;gBACvB,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC3D,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;aAC9D,CAAC;YACF,IAAM,YAAY,GAAG;gBACjB,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,aAAa,CAAC,IAAI;gBACrC,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,aAAa,CAAC,GAAG;aACvC,CAAC;YACF,IAAM,cAAc,GAAG;gBACnB,CAAC,EACG,CAAC,CAAC,kBAAkB,CAAC,EAAE,GAAG,kBAAkB,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC;oBAC7F,kBAAkB,CAAC,EAAE;gBACzB,CAAC,EACG,CAAC,CAAC,kBAAkB,CAAC,EAAE,GAAG,kBAAkB,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC;oBAC9F,kBAAkB,CAAC,EAAE;aAC5B,CAAC;YACF,IAAM,cAAc,GAAkB;gBAClC,IAAI,EAAE,aAAa,CAAC,IAAI;gBACxB,CAAC,EAAE,cAAc,CAAC,CAAC,GAAG,aAAa,CAAC,IAAI,GAAG,YAAY,CAAC,KAAK,GAAG,CAAC;gBACjE,CAAC,EAAE,cAAc,CAAC,CAAC,GAAG,aAAa,CAAC,IAAI,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC;aACrE,CAAC;YACF,YAAY,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;SAC7C;IACL,CAAC,CAAC;IAEF,gEAAgE;IAChE,IAAM,oBAAoB,GAAG,UAAC,KAAU;QACpC,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,eAAe,CAAC,YAAY,GAAG,KAAK,CAAC;IACzC,CAAC,CAAC;IAEF,4EAA4E;IAC5E,IAAM,sBAAsB,GAAG;QAC3B,IAAI,gBAAgB,IAAI,YAAY,EAAE;YAClC,eAAe,CAAC,YAAY,GAAG,IAAI,CAAC;SACvC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,sCACI,GAAG,EAAE,cAAc,EACnB,WAAW,EAAE,sBAAsB,EACnC,SAAS,EAAE,oBAAoB,EAC/B,WAAW,EAAE,sBAAsB,EACnC,YAAY,EAAE,oBAAoB,IAC9B,YAAY,IAChB,KAAK,EACD,YAAY,IAAI,gBAAgB;YAC5B,CAAC,uBAAM,CAAC,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,mCAAI,EAAE,CAAC,KAAE,MAAM,EAAE,MAAM,IAClD,CAAC,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK;QAG7B,oBAAC,gBAAgB,aACb,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,IAC5B,YAAY,EAClB,CACA,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/dist/types/cmem/react-flow/StickyNoteModal/StickyNoteModal.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { SimpleDialogProps } from "./../../../index";
 export declare type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
 export declare type StickyNoteMetadataType = {
     note: string;
@@ -22,5 +23,9 @@ export interface StickyNoteModalProps {
      * translation utility for language compatibility
      */
     translate: (key: StickyNoteModalTranslationKeys) => string;
+    /**
+     * Forward other properties to the `SimpleModal` element that is used for this dialog.
+     */
+    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
 }
 export declare const StickyNoteModal: React.FC<StickyNoteModalProps>;

package/dist/types/cmem/react-flow/configuration/graph.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 import { GRAPH_NODE_TYPES } from "./typing";
 declare const edgeTypes: {
-    default: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    implicit: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    import: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    subclass: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    subproperty: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    rdftype: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    success: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    warning: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    danger: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    default: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    implicit: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    import: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    subclass: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    subproperty: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    rdftype: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    success: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    warning: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    danger: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
 };
 declare const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode>;
 export { edgeTypes, nodeTypes };

package/dist/types/cmem/react-flow/configuration/unspecified.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const edgeTypes: {
-    default: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    straight: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    default: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    straight: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
     step: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => import("react").JSX.Element>;
 };
 export declare const nodeTypes: {

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

@@ -4,7 +4,7 @@ import { MultiSelect as BlueprintMultiSelect, MultiSelectProps as BlueprintMulti
 import { TestableComponent } from "../interfaces";
 import { ContextOverlayProps } from "./../../index";
 export interface MultiSelectSelectionProps<T> {
-    newlySelected: T;
+    newlySelected?: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
 }

package/dist/types/extensions/react-flow/edges/EdgeDefault.d.ts

@@ -28,6 +28,11 @@ export interface EdgeDefaultDataProps {
      * Callback handler that returns a React element used as edge title.
      */
     renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
+    /**
+     * Properties are forwarded to the internally used SVG `g` element.
+     * Data attributes for test ids coud be included here.
+     */
+    edgeSvgProps?: React.SVGProps<SVGGElement>;
 }
 export interface EdgeDefaultProps extends ReactFlowEdgeProps {
     /**
@@ -39,7 +44,7 @@ export interface EdgeDefaultProps extends ReactFlowEdgeProps {
      */
     drawSvgPath?: (edge: ReactFlowEdgeProps) => string;
 }
-export declare const EdgeDefault: React.MemoExoticComponent<(edge: EdgeDefaultProps) => React.JSX.Element>;
+export declare const EdgeDefault: React.MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: EdgeDefaultProps) => React.JSX.Element>;
 export declare const edgeDefaultUtils: {
     createEdgeDefaultClassName: ({ strokeType, intent, highlightColor }: EdgeDefaultDataProps, baseClass?: string) => string;
     drawEdgeStep: ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, data, }: import("./EdgeStep").EdgeStepProps) => string;

package/dist/types/extensions/react-flow/edges/EdgeLabel.d.ts

@@ -33,7 +33,7 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     intent?: IntentTypes;
 }
-export declare const EdgeLabel: React.MemoExoticComponent<({ depiction, text, actions, large, fullWidth, loose, intent, title, ...otherDivProps }: EdgeLabelProps) => React.JSX.Element>;
+export declare const EdgeLabel: React.MemoExoticComponent<({ depiction, text, actions, large, fullWidth, loose, intent, title, className, ...otherDivProps }: EdgeLabelProps) => React.JSX.Element>;
 export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
     /**
      * The `<EdgeLabel />` element that need to be displayed.

package/dist/types/extensions/react-flow/edges/edgeTypes.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
 export declare const edgeTypes: {
-    default: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    straight: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    default: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    straight: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
     step: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => import("react").JSX.Element>;
-    success: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    warning: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    danger: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    implicit: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    import: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    subclass: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    subproperty: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
-    rdftype: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    success: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    warning: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    danger: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    implicit: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    import: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    subclass: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    subproperty: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
+    rdftype: import("react").MemoExoticComponent<({ data, drawSvgPath, ...edgeOriginalProperties }: import("./EdgeDefault").EdgeDefaultProps) => import("react").JSX.Element>;
     value: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => import("react").JSX.Element>;
     score: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => import("react").JSX.Element>;
 };

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { TooltipProps } from "../../../index";
-export interface HandleContentProps {
-    children?: JSX.Element | string;
+export interface HandleContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     /**
      * Tooltip displayed as overlay on hover.
      */
@@ -11,4 +10,4 @@ export interface HandleContentProps {
      */
     tooltipProps?: Omit<TooltipProps, "content" | "children" | "renderTarget">;
 }
-export declare const HandleContent: React.MemoExoticComponent<({ children, extendedTooltip, tooltipProps }: HandleContentProps) => React.JSX.Element>;
+export declare const HandleContent: React.MemoExoticComponent<({ children, extendedTooltip, tooltipProps, ...otherDivProps }: HandleContentProps) => React.JSX.Element>;

package/dist/types/extensions/react-flow/minimap/MiniMap.d.ts

@@ -1,8 +1,19 @@
 import React from "react";
 import { MiniMapProps as ReactFlowMiniMapProps, OnLoadParams } from "react-flow-renderer";
 export interface MiniMapProps extends ReactFlowMiniMapProps {
+    /**
+     * React-Flow instance
+     */
     flowInstance?: OnLoadParams;
+    /**
+     * Enable navigating the react-flow canvas by dragging and clicking on the mini-map.
+     */
     enableNavigation?: boolean;
+    /**
+     * Properties are forwarded to the HTML `div` element used as minimap wrapper.
+     * Data attributes for test ids coud be included here.
+     */
+    wrapperProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseLeave">;
 }
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
-export declare const MiniMap: React.MemoExoticComponent<({ flowInstance, enableNavigation, maskColor, nodeClassName, nodeColor, nodeStrokeColor, ...minimapProps }: MiniMapProps) => React.JSX.Element>;
+export declare const MiniMap: React.MemoExoticComponent<({ flowInstance, enableNavigation, maskColor, nodeClassName, nodeColor, nodeStrokeColor, wrapperProps, ...minimapProps }: MiniMapProps) => React.JSX.Element>;

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.6.0-rc.2",
+    "version": "23.7.0-rc.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -85,6 +85,7 @@
         "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
         "react-markdown": "^8.0.7",
+        "react-syntax-highlighter": "15.5.0",
         "rehype-raw": "^6.1.1",
         "remark-definition-list": "^1.2.0",
         "remark-gfm": "^3.0.1",
@@ -117,6 +118,7 @@
         "@types/color": "^3.0.6",
         "@types/jest": "^29.5.12",
         "@types/lodash": "^4.14.202",
+        "@types/react-syntax-highlighter": "15.5.11",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-jest": "^29.7.0",
@@ -161,7 +163,8 @@
         "**/@carbon/icons-react": "11.19.0",
         "**/jackspeak": "2.1.1",
         "node-sass-package-importer/**/postcss": "^8.4.31",
-        "**/word-wrap": "^1.2.4"
+        "**/word-wrap": "^1.2.4",
+        "**/webpack-dev-middleware": "^6.1.2"
     },
     "husky": {
         "hooks": {

package/src/cmem/markdown/Markdown.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Blockquote } from "@blueprintjs/core";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import { Markdown } from "./../../../index";
@@ -44,11 +45,17 @@ This is a paragraph with a [text link](http://example.com/) and a footnote refer
 ##### Headline level 5
 ###### Headline level 6
 
-    This is a code block.
+    This is a code block. 
+
+\`\`\`
+another code block
+{{templateVar}}
+\`\`\`
 
 > This is a block quote.
 >
 > With 2 paragraphs.
+> And some code like \`{{showThisNotItsValue}}\`
 
 A line with some <strong>HTML code</strong> inside.
 

package/src/cmem/markdown/Markdown.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import { PluggableList } from "react-markdown/lib/react-markdown";
-//@ts-ignore
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { materialLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+// @ts-expect-error: No declaration file for module
 import remarkTypograf from "@mavrin/remark-typograf";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
@@ -132,6 +134,25 @@ export const Markdown = ({
                   return linkTarget as React.HTMLAttributeAnchorTarget;
               }
             : undefined,
+        components: {
+            code(props: any) {
+                const { children, className, node, ...rest } = props;
+                const match = /language-(\w+)/.exec(className || "");
+                return match ? (
+                    <SyntaxHighlighter
+                        {...rest}
+                        PreTag="div"
+                        children={String(children).replace(/\n$/, "")}
+                        language={match[1]}
+                        style={materialLight}
+                    />
+                ) : (
+                    <code {...rest} className={className}>
+                        {children}
+                    </code>
+                );
+            },
+        },
     };
     allowedElements && (reactMarkdownProperties.allowedElements = allowedElements);
     reHypePlugins &&

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

@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
 import { Elements, FlowElement } from "react-flow-renderer";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { EdgeTools, NodeTools, ReactFlow } from "./../../../index";
 import { ReactFlowProps } from "./ReactFlow";
@@ -361,7 +361,7 @@ export default {
             options: Object.keys(nodeExamples),
         },
     },
-} as ComponentMeta<typeof ReactFlow>;
+} as Meta<typeof ReactFlow>;
 
 const ReactFlowExample: FC<ReactFlowProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
@@ -402,10 +402,13 @@ const ReactFlowExample: FC<ReactFlowProps> = (args) => {
         [reactflowInstance]
     );
 
+    const { configuration, ...otherArgs } = args;
+
     return (
         <>
             <ReactFlow
-                configuration={args.configuration}
+                {...otherArgs}
+                configuration={configuration}
                 elements={elements}
                 style={{ height: "400px" }}
                 onLoad={onLoad}
@@ -418,9 +421,12 @@ const ReactFlowExample: FC<ReactFlowProps> = (args) => {
     );
 };
 
-const Template: ComponentStory<typeof ReactFlow> = (args) => <ReactFlowExample {...args} />;
+const Template: StoryFn<typeof ReactFlow> = (args) => <ReactFlowExample {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
     configuration: "unspecified",
+    "data-test-id": "reactflow-test-id",
+    "data-testid": "reactflow-testid",
 };
+Default.nodeExamples = nodeExamples;

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

@@ -4,7 +4,7 @@ import getColorConfiguration from "../../../common/utils/getColorConfiguration";
 import { CodeEditor } from "../../../extensions";
 import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 
-import { Button, FieldItem, Icon, SimpleDialog, Tag, TagList } from "./../../../index";
+import { Button, FieldItem, Icon, SimpleDialog, SimpleDialogProps, Tag, TagList } from "./../../../index";
 
 export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
 
@@ -28,10 +28,14 @@ export interface StickyNoteModalProps {
      * translation utility for language compatibility
      */
     translate: (key: StickyNoteModalTranslationKeys) => string;
+    /**
+     * Forward other properties to the `SimpleModal` element that is used for this dialog.
+     */
+    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
 }
 
 export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
-    ({ metaData, onClose, onSubmit, translate }) => {
+    ({ metaData, onClose, onSubmit, translate, simpleDialogProps }) => {
         const refNote = React.useRef<string>(metaData?.note ?? "");
         const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
         const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
@@ -79,7 +83,6 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
 
         return (
             <SimpleDialog
-                data-test-id={"sticky-note-modal"}
                 size="small"
                 title={translate("modalTitle")}
                 hasBorder
@@ -101,6 +104,8 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                         {translate("cancelButton")}
                     </Button>,
                 ]}
+                {...simpleDialogProps}
+                data-test-id={(simpleDialogProps ?? {})["data-test-id"] ?? "sticky-note-modal"} // @deprecated we remove this automatically set testid with the next major release
             >
                 <FieldItem
                     key="note"

package/src/components/Card/card.scss

@@ -1,10 +1,9 @@
 $card-padding: 0 !default;
 $card-background-color: $white !default;
-
-//$dark-card-background-color: $dark-gray4 !default;
-
+$card-selected-background-color: rgba($blue3, 0.1);
 $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
+@use "sass:color";
 @import "~@blueprintjs/core/src/components/card/card";
 
 .#{$eccgui}-card {
@@ -14,10 +13,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     justify-content: flex-start;
 
     &.#{$eccgui}-intent--primary {
-        background-color: mix($eccgui-color-primary, $card-background-color, 5%);
+        background-color: color.mix($eccgui-color-primary, $card-background-color, 5%);
     }
     &.#{$eccgui}-intent--accent {
-        background-color: mix($eccgui-color-accent, $card-background-color, 10%);
+        background-color: color.mix($eccgui-color-accent, $card-background-color, 10%);
     }
     &.#{$eccgui}-intent--success {
         background-color: $eccgui-color-success-background;
@@ -35,6 +34,19 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     &.#{$ns}-interactive:hover {
         background-color: $button-background-color-hover;
     }
+
+    &.#{$ns}-selected {
+        background-color: $card-selected-background-color;
+        box-shadow: 0 0 0 3px rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
+
+        &.#{$ns}-interactive {
+            box-shadow: 0 0 0 3px rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
+
+            &:hover {
+                background-color: color.mix($card-selected-background-color, $button-background-color-hover, 50%);
+            }
+        }
+    }
 }
 
 .#{$eccgui}-card--elevated {