@eccenca/gui-elements 23.1.0-rc.4 → 23.2.0-rc.0

package/src/components/index.ts

@@ -1,10 +1,47 @@
+export * from "./Accordion";
+export * from "./Application";
+export * from "./AutocompleteField";
+export * from "./AutoSuggestion";
 export * from "./Badge/Badge";
+export * from "./Breadcrumb";
+export * from "./Button/Button";
+export * from "./Card";
+export * from "./Checkbox/Checkbox";
+export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
+export * from "./Dialog";
+export * from "./Form";
+export * from "./Grid";
+export * from "./HoverToggler/HoverToggler";
 export * from "./Icon";
+export * from "./Iframe";
+export * from "./InteractionGate/InteractionGate";
+export * from "./Label/Label";
+export * from "./Link/Link";
+export * from "./List/List";
+export * from "./Menu";
+export * from "./MultiSelect/MultiSelect";
+export * from "./Notification";
+export * from "./NumericInput/NumericInput";
+export * from "./OverviewItem";
+export * from "./Pagination/Pagination";
 export * from "./ProgressBar";
+export * from "./PropertyValuePair";
+export * from "./RadioButton/RadioButton";
+export * from "./Select/Select";
+export * from "./Separation/Divider";
+export * from "./Separation/Spacing";
+export * from "./Spinner/Spinner";
+export * from "./Structure";
+export * from "./Switch/Switch";
 export * from "./Table";
+export * from "./Tabs";
 export * from "./Tag";
+export * from "./TextField";
+export * from "./Toolbar";
+export * from "./Tooltip/Tooltip";
 export * from "./Tree/Tree";
 export * from "./Typography";
+export * from "./Workspace";
 
 export * from "./interfaces";

package/src/components/interfaces.ts

@@ -1,4 +1,7 @@
 export interface TestableComponent {
+    /**
+     * Can be set to use it as selector in test environments.
+     */
     "data-test-id"?: string
 }
 

package/src/extensions/codemirror/_codemirror.scss

@@ -1,11 +1,12 @@
-@import "~codemirror/lib/codemirror.css";
-@import "~codemirror/theme/xq-light.css";
+@import "~codemirror/lib/codemirror";
+@import "~codemirror/theme/xq-light";
 
 // adjustments
 
 .#{$eccgui}-codeeditor {
     .CodeMirror {
         border-radius: $pt-border-radius;
+        clip-path: unset !important; // we may check later why they set inset(0) now
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;

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

@@ -9,8 +9,9 @@ import {
 } from "react-flow-renderer";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { IntentTypes, intentClassName } from "../../../common/Intent";
-import { NodeHighlightColor, evaluateHighlightColors } from "./../nodes/NodeContent";
-import { drawEdgeStraight} from "./utils";
+import { nodeContentUtils } from "./../nodes/NodeContent";
+import { NodeHighlightColor } from "./../nodes/sharedTypes";
+import { drawEdgeStraight, drawEdgeStep } from "./utils";
 
 export interface EdgeDefaultDataProps {
     /**
@@ -98,7 +99,7 @@ export const EdgeDefault = memo(
         const edgeStyle = edgeOriginalProperties.style ?? {};
         const {
             highlightCustomPropertySettings
-        } = evaluateHighlightColors("--edge-highlight", highlightColor);
+        } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
 
         return (
             <g
@@ -137,14 +138,14 @@ export const EdgeDefault = memo(
     }
 );
 
-export const createEdgeDefaultClassName = ({
+const createEdgeDefaultClassName = ({
     strokeType,
     intent,
     highlightColor,
 }: EdgeDefaultDataProps, baseClass: string = "react-flow__edge-path") => {
     const {
         highlightClassNameSuffix,
-    } = evaluateHighlightColors("--edge-highlight", highlightColor);
+    } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
     return baseClass +
     (strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
     (intent ? ` ${intentClassName(intent)}` : "") +
@@ -153,3 +154,9 @@ export const createEdgeDefaultClassName = ({
         : ""
     );
 }
+
+export const edgeDefaultUtils = {
+    createEdgeDefaultClassName,
+    drawEdgeStep,
+    drawEdgeStraight,
+}

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

@@ -39,6 +39,7 @@ export const EdgeLabel = memo(({
     large,
     fullWidth,
     intent,
+    title,
     ...otherDivProps
 } : EdgeLabelProps) => {
 
@@ -70,7 +71,7 @@ export const EdgeLabel = memo(({
                     }
                 </div>
             )}
-            <div className={`${eccgui}-graphviz__edge-label__text`}>
+            <div className={`${eccgui}-graphviz__edge-label__text`} title={title}>
                 { typeof text === "string" ? <OverflowText>{ text }</OverflowText> : text }
             </div>
             {!!actions && (
@@ -82,7 +83,7 @@ export const EdgeLabel = memo(({
     )
 });
 
-interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
+export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
     /**
      * The `<EdgeLabel />` element that need to be displayed.
      */
@@ -120,7 +121,7 @@ export const EdgeLabelObject = memo(({
         } 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(() => { labelSize(container)}, 500);
+            setTimeout(() => { labelSize(container)}, resizeTimeout);
         }
     }
 

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

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { EdgeDefaultProps, EdgeDefaultDataProps, EdgeDefault} from "./EdgeDefault";
 import { drawEdgeStep } from "./utils";
 
-export interface EdgeStepDataProps extends EdgeDefaultDataProps {
+interface EdgeStepDataProps extends EdgeDefaultDataProps {
     stepCornerRadius?: number;
 }
 

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

@@ -8,6 +8,7 @@
 import { EdgeDefault } from "./EdgeDefault";
 import { EdgeStep } from "./EdgeStep";
 
+// @deprecated will be removed because it is probably not used this way anymore
 export const edgeTypes = {
     default: EdgeDefault,
     straight: EdgeDefault,

package/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from 'react-lorem-ipsum';
-import { EdgeLabel, IconButton, Badge, Icon } from "./../../../../../index";
+import { EdgeLabel, IconButton, Badge, Icon, OverflowText } from "./../../../../../index";
 import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 import { helpersArgTypes } from "../../../../../.storybook/helpers";
 
@@ -34,7 +34,15 @@ const Template: ComponentStory<typeof EdgeLabel> = (args) => (
     <EdgeLabel {...args} />
 );
 
+const labelText = loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString()
+
 export const Default = Template.bind({});
 Default.args = {
-    text: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString(),
+    text: labelText,
 };
+
+export const ReverseEllipsisLabel = Template.bind({});
+ReverseEllipsisLabel.args = {
+    text: <OverflowText ellipsis="reverse">{labelText}</OverflowText>,
+    title: labelText,
+}

package/src/extensions/react-flow/handles/HandleContent.tsx

@@ -5,7 +5,7 @@ import { Tooltip } from "../../../index";
 export interface HandleContentProps {
     children?: JSX.Element | string;
     /**
-     * Tooltip dosplayed as overlay on hover.
+     * Tooltip displayed as overlay on hover.
      */
     extendedTooltip?: JSX.Element | string;
 }

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -23,11 +23,10 @@ interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     onClick?: () => void;
 }
 
-export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {
-}
+export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {}
+export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {}
 
-export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {
-}
+export type HandleDefaultProps = HandleProps | HandleNextProps;
 
 export const HandleDefault = memo(({
     flowVersion,
@@ -35,7 +34,7 @@ export const HandleDefault = memo(({
     tooltip,
     children,
     ...handleProps
-}: HandleProps | HandleNextProps) => {
+}: HandleDefaultProps) => {
     const evaluateFlowVersion = useReactFlowVersion();
     const flowVersionCheck = flowVersion || evaluateFlowVersion;
 

package/src/extensions/react-flow/index.ts

@@ -1,24 +1,28 @@
-export { NodeDefault } from "./nodes/NodeDefault";
-export { NodeContent } from "./nodes/NodeContent";
-export { NodeContentExtension } from "./nodes/NodeContentExtension";
-export { NodeTools } from "./nodes/NodeTools";
-export { nodeTypes } from "./nodes/nodeTypes";
-export { EdgeStep } from "./edges/EdgeStep";
-export { EdgeTools } from "./edges/EdgeTools";
-export { edgeTypes } from "./edges/edgeTypes";
-export * from "./edges/EdgeLabel";
-export { MarkerArrowClosedInverse } from "./markers/MarkerArrowClosedInverse";
-export { ReactFlowMarkers } from "./markers/ReactFlowMarkers";
-export { MiniMap } from "./minimap/MiniMap";
-export { minimapNodeClassName, minimapNodeColor } from "./minimap/utils";
-export { default as nodeUtils } from "./nodes/nodeUtils";
-
-export type { NodeProps } from "./nodes/NodeDefault";
-export type { NodeContentProps } from "./nodes/NodeContent";
-export type { NodeContentExtensionProps } from "./nodes/NodeContentExtension";
-export type { NodeToolsProps } from "./nodes/NodeTools";
-export type { EdgeStepProps } from "./edges/EdgeStep";
-export type { MiniMapProps } from "./minimap/MiniMap";
+import { miniMapUtils } from "./minimap/utils";
+import { nodeDefaultUtils } from "./nodes/nodeUtils";
 
-export * from "./edges/EdgeDefault";
+export * from "./nodes/NodeDefault";
+export * from "./nodes/NodeContent";
+export * from "./nodes/NodeContentExtension";
+export * from "./nodes/NodeTools";
+export * from "./nodes/nodeUtils";
 export * from "./handles/HandleDefault";
+export * from "./edges/EdgeDefault";
+export * from "./edges/EdgeStep";
+export * from "./edges/EdgeTools";
+export * from "./edges/EdgeLabel";
+export * from "./markers/ReactFlowMarkers";
+export * from "./minimap/MiniMap";
+export * from "./minimap/utils";
+
+// deprecated exports
+export { nodeTypes } from "./nodes/nodeTypes"; // FIXME: deprecated, remove it later
+export { edgeTypes } from "./edges/edgeTypes"; // FIXME: deprecated, remove it later
+// @deprecated was moved to `miniMapUtils.nodeClassName`
+const minimapNodeClassName = miniMapUtils.nodeClassName;
+// @deprecated was moved to `miniMapUtils.nodeClassName`
+const minimapNodeColor = miniMapUtils.nodeColor;
+export { minimapNodeClassName, minimapNodeColor };
+// @deprecated renamed to `nodeDefaultUtils`
+const nodeUtils = nodeDefaultUtils;
+export { nodeUtils };

package/src/extensions/react-flow/markers/ReactFlowMarkers.tsx

@@ -1,8 +1,10 @@
 import React, { FC } from "react";
 
+// FIXME: we need to check how these markers are used and if we can justify the namings
+
 import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
 
-export const ReactFlowMarkers: FC = () => {
+const ReactFlowMarkers: FC = () => {
     return (
         <svg>
             <defs>
@@ -11,3 +13,8 @@ export const ReactFlowMarkers: FC = () => {
         </svg>
     );
 };
+
+export {
+    MarkerArrowClosedInverse,
+    ReactFlowMarkers
+}

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

@@ -5,12 +5,7 @@ import {
     OnLoadParams,
 } from "react-flow-renderer";
 import {FlowTransform} from "react-flow-renderer/dist/types";
-import {
-    minimapNodeClassName,
-    minimapNodeColor,
-    minimapBorderColor
-} from "../minimap/utils";
-
+import { miniMapUtils } from "../minimap/utils";
 
 export interface MiniMapProps extends ReactFlowMiniMapProps {
     flowInstance?: OnLoadParams;
@@ -37,9 +32,9 @@ export const MiniMap = memo(({
     flowInstance,
     enableNavigation = false,
     maskColor = "#ddddddbb",
-    nodeClassName = minimapNodeClassName,
-    nodeColor = minimapNodeColor,
-    nodeStrokeColor = minimapBorderColor,
+    nodeClassName = miniMapUtils.nodeClassName,
+    nodeColor = miniMapUtils.nodeColor,
+    nodeStrokeColor = miniMapUtils.borderColor,
     ...minimapProps
 }: MiniMapProps) => {
     const minimapWrapper = React.useRef<HTMLDivElement | null>(null);

package/src/extensions/react-flow/minimap/_minimap.scss

@@ -10,25 +10,41 @@
 .#{$eccgui}-graphviz__minimap__node--highlight-match {
     stroke: $eccgui-color-accent;
     stroke-width: 5;
-    //fill: $reactflow-node-background-color;
 }
 .#{$eccgui}-graphviz__minimap__node--highlight-altmatch {
     stroke: complement($eccgui-color-primary);
     stroke-width: 5;
-    //fill: $reactflow-node-background-color;
 }
 .#{$eccgui}-graphviz__minimap__node--highlight-success {
     stroke: $eccgui-color-success-text;
     stroke-width: 5;
-    //fill: $reactflow-node-background-color;
 }
 .#{$eccgui}-graphviz__minimap__node--highlight-warning {
     stroke: $eccgui-color-warning-text;
     stroke-width: 7;
-    //fill: $reactflow-node-background-color;
 }
 .#{$eccgui}-graphviz__minimap__node--highlight-danger {
     fill: $eccgui-color-danger-text;
     stroke: $eccgui-color-danger-text;
     stroke-width: 9;
 }
+
+.react-flow__minimap-node {
+
+    // FIXME: this is a first basic implementation, later it should be possible to highlight without overwriting stroke/fill colors
+
+    &[class*="#{$eccgui}-intent--"] {
+        stroke-width: 20;
+    }
+
+    &.#{$eccgui}-intent--success {
+        stroke: $eccgui-color-success-text;
+    }
+    &.#{$eccgui}-intent--warning {
+        stroke: $eccgui-color-warning-text;
+    }
+    &.#{$eccgui}-intent--danger {
+        stroke: $eccgui-color-danger-text;
+        fill: $eccgui-color-danger-text !important;
+    }
+}

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

@@ -1,18 +1,26 @@
 import { CLASSPREFIX as eccgui } from "./../../../configuration/constants";
-import { gethighlightedStateClasses } from "./../nodes/NodeContent";
+import { nodeContentUtils } from "./../nodes/NodeContent";
+import { intentClassName } from "../../../common/Intent";
 
-export const minimapNodeClassName = (node: any) => {
+const nodeClassName = (node: any) => {
     const typeClass = `${eccgui}-graphviz__minimap__node--` + node.type;
-    const stateClass = node.data?.highlightedState ? gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`) : "";
-    return typeClass + (stateClass ? " " + stateClass : "");
+    const stateClass = node.data?.highlightedState ? nodeContentUtils.gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`) : "";
+    const intentClass = node.data?.intent ? intentClassName(node.data.intent) : "";
+    return `${typeClass} ${intentClass} ${stateClass}`;
 };
 
-export const minimapNodeColor = (node: any) => {
+const nodeColor = (node: any) => {
     const fillColor = node.data?.style?.backgroundColor || node.data?.style?.borderColor;
     return fillColor ?? "";
 }
 
-export const minimapBorderColor = (node: any) => {
+const borderColor = (node: any) => {
     const strokeColor = node.data?.style?.borderColor || node.data?.style?.backgroundColor;
     return strokeColor ?? "";
 }
+
+export const miniMapUtils = {
+    nodeClassName,
+    nodeColor,
+    borderColor,
+}

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

@@ -1,5 +1,6 @@
 import React from "react";
 import Color from "color";
+import { Resizable } from "re-resizable";
 import { Position, useStoreState as getStoreStateFlowLegacy } from "react-flow-renderer";
 import { useStore as getStoreStateFlowNext } from "react-flow-renderer-lts";
 import { Icon, Depiction, OverflowText } from "../../../index";
@@ -11,19 +12,25 @@ import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupp
 import { HandleDefault, HandleProps, HandleNextProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
-import { Resizable } from "re-resizable";
+import { HighlightingState, NodeHighlightColor } from "./sharedTypes";
 
-export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
-export type NodeHighlightColor = "default" | "alternate" | Color | string;
+// @deprecated use `NodeContentProps<any>['highlightedState']` (or import from `src/extensions/react-flow/nodes/sharedTypes`)
+export type { HighlightingState };
 
-export interface IHandleProps extends HandleProps {
+interface NodeContentHandleLegacyProps extends HandleProps {
     category?: "configuration";
 }
 
+// @deprecated use `NodeContentHandleProps`
+export type IHandleProps = NodeContentHandleLegacyProps;
+
 interface NodeContentHandleNextProps extends HandleNextProps {
     category?: "configuration";
 }
 
+export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
+
+// @deprecated use `NodeContentProps<any>['nodeDimensions']`
 export type NodeDimensions = {
     width: number;
     height: number;
@@ -68,7 +75,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
 
 export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
     extends NodeContentData, ReacFlowVersionSupportProps,
-        React.HTMLAttributes<HTMLDivElement> {
+        Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
     /**
      * Size of the node.
      * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
@@ -135,7 +142,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Array of property definition objects for `Handle` components that need to be created for the node.
      * @see https://reactflow.dev/docs/api/handle/
      */
-    handles?: IHandleProps[] | NodeContentHandleNextProps[];
+    handles?: NodeContentHandleLegacyProps[] | NodeContentHandleNextProps[];
     /**
      * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
      */
@@ -217,7 +224,7 @@ type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps;
 const defaultHandles = (flowVersion: ReacFlowVersionSupportProps["flowVersion"]) => {
     switch (flowVersion) {
         case "legacy":
-            return [{ type: "target" }, { type: "source" }] as IHandleProps[];
+            return [{ type: "target" }, { type: "source" }] as NodeContentHandleLegacyProps[];
         case "next":
             return [{ type: "target" }, { type: "source" }] as NodeContentHandleNextProps[];
         default:
@@ -258,7 +265,7 @@ const addHandles = (handles: any, position: any, posDirection: any, isConnectabl
     });
 };
 
-export const gethighlightedStateClasses = (
+const gethighlightedStateClasses = (
     state: HighlightingState | HighlightingState[],
     baseClassName: string
 ) => {
@@ -345,11 +352,11 @@ export function NodeContent<CONTENT_PROPS = any>({
     } catch {}
     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
     const nodeContentRef = React.useRef<any>();
-    const handleStack = flowVersionCheck==="legacy" ? {} as { [key: string]: IHandleProps[] } : {} as { [key: string]: NodeContentHandleNextProps[] };
-    handleStack[Position.Top] = flowVersionCheck==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
-    handleStack[Position.Right] = flowVersionCheck==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
-    handleStack[Position.Bottom] = flowVersionCheck==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
-    handleStack[Position.Left] = flowVersionCheck==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
+    const handleStack = flowVersionCheck==="legacy" ? {} as { [key: string]: NodeContentHandleLegacyProps[] } : {} as { [key: string]: NodeContentHandleNextProps[] };
+    handleStack[Position.Top] = flowVersionCheck==="legacy" ? [] as NodeContentHandleLegacyProps[] : [] as NodeContentHandleNextProps[];
+    handleStack[Position.Right] = flowVersionCheck==="legacy" ? [] as NodeContentHandleLegacyProps[] : [] as NodeContentHandleNextProps[];
+    handleStack[Position.Bottom] = flowVersionCheck==="legacy" ? [] as NodeContentHandleLegacyProps[] : [] as NodeContentHandleNextProps[];
+    handleStack[Position.Left] = flowVersionCheck==="legacy" ? [] as NodeContentHandleLegacyProps[] : [] as NodeContentHandleNextProps[];
 
     // initial dimension before resize
     React.useEffect(() => {
@@ -549,7 +556,7 @@ export function NodeContent<CONTENT_PROPS = any>({
     return (isResizeable) ? resizableNode() : nodeContent;
 }
 
-export const evaluateHighlightColors = (
+const evaluateHighlightColors = (
     baseCustomProperty: string,
     highlightColor?: NodeHighlightColor | NodeHighlightColor[]
 ) => {
@@ -598,3 +605,8 @@ export const evaluateHighlightColors = (
         highlightCustomPropertySettings: styleHighlightColors,
     }
 }
+
+export const nodeContentUtils = {
+    evaluateHighlightColors,
+    gethighlightedStateClasses
+}

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

@@ -7,7 +7,7 @@ import { Tooltip } from "../../../index";
 import { NodeContent, NodeContentProps } from "./NodeContent";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
-export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
+export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
@@ -15,13 +15,16 @@ export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlow
     data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>
 }
 
+// @deprecated use NodeDefaultProps
+export type NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> = NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS>;
+
 /**
  * The `NodeDefault` element manages the display of React-Flow nodes.
  * This element cannot be used directly, it must be connected via a `nodeTypes` definition and all properties need to be routed through the `elements` property items inside the `ReactFlow` container.
  * @see https://reactflow.dev/docs/api/nodes/
  */
 export const NodeDefault = memo(
-    (node: NodeProps<any>) => {
+    (node: NodeDefaultProps<any>) => {
         const {
             flowVersion,
             data,
@@ -30,7 +33,7 @@ export const NodeDefault = memo(
             isConnectable = true,
             selected
         } = node;
-        
+
         const evaluateFlowVersion = useReactFlowVersion();
         const flowVersionCheck = flowVersion || evaluateFlowVersion;
 
@@ -57,3 +60,5 @@ export const NodeDefault = memo(
         return nodeEl;
     }
 );
+
+export default NodeDefault;

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

@@ -7,6 +7,12 @@ import {ContextOverlay, IconButton} from "../../../index";
 import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
 import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
 
+// Functions regarding the menu that can be called from the outside
+export interface NodeToolsMenuFunctions {
+    /** Closes the menu if its open. */
+    closeMenu: () => void
+}
+
 export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
     children: string | JSX.Element;
     togglerElement?: ValidIconName | JSX.Element;
@@ -16,12 +22,6 @@ export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
     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(({
     children,
     togglerElement = "item-moremenu",

package/src/extensions/react-flow/nodes/nodeTypes.ts

@@ -1,5 +1,6 @@
 import { NodeDefault } from "./NodeDefault";
 
+// @deprecated will be removed because it is probably not used this way anymore
 export const nodeTypes = {
     default: NodeDefault,
     graphNode: NodeDefault,

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

@@ -2,7 +2,7 @@ import { CSSProperties } from "react";
 import { Node } from "react-flow-renderer";
 import Color from "color";
 
-interface IStickyNote {
+type IStickyNote = {
     id: string;
     content: string;
     color: string;
@@ -45,9 +45,9 @@ const generateStyleWithColor = (color: string): CSSProperties => {
     return style;
 };
 
-const utils = {
+export const nodeDefaultUtils = {
     generateStyleWithColor,
     transformNodeToStickyNode,
 };
 
-export default utils;
+export default nodeDefaultUtils;

package/src/extensions/react-flow/nodes/sharedTypes.ts

@@ -0,0 +1,3 @@
+import Color from "color";
+export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
+export type NodeHighlightColor = "default" | "alternate" | Color | string;

package/src/includes/blueprintjs/_components.scss

@@ -0,0 +1,6 @@
+@import "~@blueprintjs/core/src/components/button/button-group";
+@import "~@blueprintjs/core/src/components/collapse/collapse";
+@import "~@blueprintjs/core/src/components/context-menu/context-menu";
+@import "~@blueprintjs/core/src/components/overlay/overlay";
+@import "~@blueprintjs/core/src/components/portal/portal";
+@import "~@blueprintjs/core/src/components/progress-bar/progress-bar";

package/src/includes/blueprintjs/_requisits.scss

@@ -0,0 +1,7 @@
+@import "~@blueprintjs/colors/src/colors";
+@import "~@blueprintjs/core/src/common/variables";
+// future home for $icon-classes var @import "~@blueprintjs/core/src/common/variables-extended";
+@import "~@blueprintjs/core/src/common/react-transition";
+@import "~@blueprintjs/core/src/components/icon/icon-mixins";
+@import "~@blueprintjs/core/src/components/icon/icon"; // currently necessary for $icon-classes var
+@import "~@blueprintjs/core/src/accessibility/focus-states";