@eccenca/gui-elements 24.4.1-featurechatcomponentscmem6775.4 → 24.4.1-featurepreparefinalnextcmem6943.0

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

@@ -1,7 +1,6 @@
 import React from "react";
-import { Position, useStoreState as getStoreStateFlowLegacy } from "react-flow-renderer";
-import { useStore as getStoreStateFlowNext } from "react-flow-renderer-lts";
-import { useStore as useStoreFlowV12 } from "@xyflow/react";
+import { Position, useStoreState as getStoreStateFlowV9 } from "react-flow-renderer";
+import { useStore as getStoreStateFlowV12 } from "@xyflow/react";
 import Color from "color";
 import { Resizable } from "re-resizable";
 
@@ -9,24 +8,18 @@ import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { DepictionProps } from "../../../components";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Depiction, HandleDefaultProps, Icon, OverflowText } from "../../../index";
-import { HandleDefault, HandleNextProps, HandleProps, HandleV12Props } from "../handles/HandleDefault";
-import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
+import { Depiction, Icon, OverflowText } from "../../../index";
+import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
 
+import { HandleDefault, HandleDefaultProps } from "./../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { NodeDefaultProps } from "./NodeDefault";
 import { NodeHighlightColor } from "./sharedTypes";
 
-type NodeContentHandleLegacyProps = HandleProps;
-
-type NodeContentHandleNextProps = HandleNextProps;
-
-type NodeContentHandleV12Props = HandleV12Props;
-
-export type NodeContentHandleProps =
-    | NodeContentHandleLegacyProps
-    | NodeContentHandleNextProps
-    | NodeContentHandleV12Props;
+/**
+ * @deprecated (v26) use `HandleDefaultProps`
+ */
+export type NodeContentHandleProps = HandleDefaultProps;
 
 export type NodeDimensions = {
     width?: number;
@@ -92,7 +85,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
     footerContent?: React.ReactNode;
 }
 
-export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
+export interface NodeContentProps<CONTENT_PROPS = any>
     extends NodeContentData,
         ReacFlowVersionSupportProps,
         Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
@@ -144,9 +137,9 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Set of defined buttons and icons that can be displayed.
      */
     executionButtons?: (
-        adjustedContentProps: Partial<NODE_CONTENT_PROPS>,
-        setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<NODE_CONTENT_PROPS>>>
-    ) => React.ReactElement<NODE_CONTENT_PROPS>;
+        adjustedContentProps: Partial<CONTENT_PROPS>,
+        setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<CONTENT_PROPS>>>
+    ) => React.ReactElement<React.HTMLAttributes<HTMLElement>>;
     /**
      * Can be used for permanent action button or context menu.
      * It is displayed at the node header right to the label.
@@ -156,7 +149,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?: NodeContentHandleProps[];
+    handles?: HandleDefaultProps[];
     /**
      * 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.
      */
@@ -169,7 +162,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Callback function to provide content for the tooltip on a node with a defined `minimalShape`.
      * If you do not want a tooltip in this state you need to provide a callback that returns an empty value.
      */
-    getMinimalTooltipData?: (node: NodeDefaultProps<NODE_DATA>) => NodeContentData;
+    getMinimalTooltipData?: (node: NodeDefaultProps<CONTENT_PROPS>) => NodeContentData;
     /**
      * Set if a handle is displayed even if it does not allow a connection to an edge.
      */
@@ -183,8 +176,11 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      */
     introductionTime?: number | IntroductionTime;
 
-    /** Additional data stored in the node. */
-    businessData?: NODE_DATA;
+    /**
+     * Additional data stored in the node.
+     * @deprecated (v26) is not used anymore.
+     */
+    businessData?: never;
 
     // we need to forward some ReactFlowNodeProps here
 
@@ -227,37 +223,20 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
     resizeMaxDimensions?: Partial<NodeDimensions>;
 }
 
-interface MemoHandlerLegacyProps extends HandleProps {
-    posdirection: string;
-    style: React.CSSProperties;
-    flowVersion: "legacy";
-}
-
-interface MemoHandlerNextProps extends HandleNextProps {
-    posdirection: string;
+type MemoHandlerProps = HandleDefaultProps & {
+    posdirection: "left" | "top";
     style: React.CSSProperties;
-    flowVersion: "next";
-}
-
-interface MemoHandlerV12Props extends HandleV12Props {
-    posdirection: string;
-    style: React.CSSProperties;
-    flowVersion: "v12";
-}
+};
 
-type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps | MemoHandlerV12Props;
+type HandleStack = { [key: string]: HandleDefaultProps[] };
 
 const defaultHandles = (flowVersion: ReacFlowVersionSupportProps["flowVersion"]): NodeContentHandleProps[] => {
     switch (flowVersion) {
-        case "legacy":
-            return [{ type: "target" }, { type: "source" }] as NodeContentHandleLegacyProps[];
-        case "next":
-            return [{ type: "target" }, { type: "source" }] as NodeContentHandleNextProps[];
+        case "v9":
         case "v12":
-            return [{ type: "target" }, { type: "source" }] as NodeContentHandleV12Props[];
-
+            return [{ type: "target" }, { type: "source" }] as HandleDefaultProps[];
         default:
-            return [];
+            return [] as HandleDefaultProps[];
     }
 };
 
@@ -271,17 +250,17 @@ const getDefaultMinimalTooltipData = (node: any) => {
 };
 
 const addHandles = (
-    handles: any,
-    position: any,
-    posDirection: any,
-    isConnectable: any,
-    nodeStyle: any,
-    flowVersion: any = "legacy"
+    handles: HandleStack,
+    position: MemoHandlerProps["position"],
+    posDirection: MemoHandlerProps["posdirection"],
+    isConnectable: MemoHandlerProps["isConnectable"],
+    nodeStyle: MemoHandlerProps["style"],
+    flowVersion: ReacFlowVersionSupportProps["flowVersion"] = ReactFlowVersions.V9
 ) => {
     return handles[position].map((handle: HandleDefaultProps, idx: number) => {
         // FIXME: remove? orig v12 change: return handles[position].map((handle: any, idx: any) => {
         const { style = {}, ...otherHandleProps } = handle;
-        const styleAdditions: { [key: string]: string } = {
+        const styleAdditions: MemoHandlerProps["style"] = {
             color: nodeStyle.borderColor ?? undefined,
         };
         styleAdditions[posDirection] = (100 / (handles[position].length + 1)) * (idx + 1) + "%";
@@ -294,8 +273,10 @@ const addHandles = (
                 isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
             },
         };
-
-        return <MemoHandler flowVersion={flowVersion} {...handleProperties} key={"handle" + idx} />;
+        return (
+            <MemoHandler flowVersion={flowVersion} {...(handleProperties as MemoHandlerProps)} key={"handle" + idx} />
+        );
+        // FIXME: remove? orig v12 change: return <MemoHandler flowVersion={flowVersion} {...handleProperties} key={"handle" + idx} />;
     });
 };
 
@@ -317,11 +298,12 @@ const MemoHandler = React.memo(
     }
 );
 
+const DEFAULT_RESIZE_DIRECTIONS: ResizeDirections = { bottom: true, right: true }
 /**
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export function NodeContent<CONTENT_PROPS = any>({
+export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
     flowVersion,
     iconName,
     depiction,
@@ -354,7 +336,7 @@ export function NodeContent<CONTENT_PROPS = any>({
     // resizing
     onNodeResize,
     nodeDimensions,
-    resizeDirections = { bottom: true, right: true },
+    resizeDirections = DEFAULT_RESIZE_DIRECTIONS,
     resizeMaxDimensions,
     // forwarded props
     targetPosition = Position.Left,
@@ -366,11 +348,15 @@ export function NodeContent<CONTENT_PROPS = any>({
     businessData,
     // other props for DOM element
     ...otherDomProps
-}: NodeContentProps<any>) {
+}: NodeContentProps<CONTENT_PROPS>) {
     const evaluateFlowVersion = useReactFlowVersion();
     const flowVersionCheck = flowVersion || evaluateFlowVersion;
     const [introductionDone, setIntroductionDone] = React.useState(false);
 
+    // ignore some properties for now (remove them later)
+    // if (otherDomProps.businessData) { delete otherDomProps.businessData }
+    // if (otherDomProps.getMinimalTooltipData) { delete otherDomProps.getMinimalTooltipData }
+
     const { handles = defaultHandles(flowVersionCheck), ...otherProps } = otherDomProps;
 
     const hasValidResizeDirection = resizeDirections.bottom || resizeDirections.right;
@@ -385,16 +371,13 @@ export function NodeContent<CONTENT_PROPS = any>({
     if (isResizable)
         try {
             switch (flowVersionCheck) {
-                case "legacy":
-                    [, , zoom] = getStoreStateFlowLegacy((state) => state.transform);
-                    break;
-                case "next":
-                    [, , zoom] = getStoreStateFlowNext((state) => state.transform);
+                case "v9":
+                    [, , zoom] = getStoreStateFlowV9((state) => state.transform);
                     break;
                 case "v12":
                     // we are calling a hook here conditionally. Not recommended, by the flowversion check is
                     // is basically compile time determined. So we just do it.
-                    [, , zoom] = useStoreFlowV12((state) => state.transform);
+                    [, , zoom] = getStoreStateFlowV12((state) => state.transform);
                     break;
             }
         } catch (error) {
@@ -523,19 +506,23 @@ export function NodeContent<CONTENT_PROPS = any>({
                 return 0;
             })
             .forEach((handle) => {
-                if ("category" in handle && handle.category === "configuration") {
-                    handleStack[Position.Top].push(handle);
-                } else if (handle.position) {
-                    handleStack[handle.position].push(handle);
+                let position: HandleDefaultProps["position"] = handle.position;
+
+                // force position regarding special configuration
+                if (handle.category === "configuration") {
+                    position = Position.Top;
                 } else {
                     const handleType = handle as { type?: string };
                     if (handleType.type === "target") {
-                        handleStack[targetPosition].push(handle);
+                        position = targetPosition;
                     }
                     if (handleType.type === "source") {
-                        handleStack[sourcePosition].push(handle);
+                        position = sourcePosition;
                     }
                 }
+
+                handle.position = position;
+                handleStack[position].push(handle);
             });
     }
     const styleExpandDimensions: { [key: string]: string | number } = Object.create(null);
@@ -589,6 +576,7 @@ export function NodeContent<CONTENT_PROPS = any>({
                 }}
                 className={
                     `${eccgui}-graphviz__node` +
+                    ` ${eccgui}-graphviz__node--${flowVersionCheck}` +
                     ` ${eccgui}-graphviz__node--${size}` +
                     ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
                     (fullWidth ? ` ${eccgui}-graphviz__node--fullwidth` : "") +
@@ -686,10 +674,38 @@ export function NodeContent<CONTENT_PROPS = any>({
             </section>
             {!!handles && (
                 <>
-                    {addHandles(handleStack, Position.Top, "left", isConnectable, style, flowVersionCheck)}
-                    {addHandles(handleStack, Position.Right, "top", isConnectable, style, flowVersionCheck)}
-                    {addHandles(handleStack, Position.Bottom, "left", isConnectable, style, flowVersionCheck)}
-                    {addHandles(handleStack, Position.Left, "top", isConnectable, style, flowVersionCheck)}
+                    {addHandles(
+                        handleStack,
+                        Position.Top,
+                        "left",
+                        isConnectable,
+                        style as MemoHandlerProps["style"],
+                        flowVersionCheck
+                    )}
+                    {addHandles(
+                        handleStack,
+                        Position.Right,
+                        "top",
+                        isConnectable,
+                        style as MemoHandlerProps["style"],
+                        flowVersionCheck
+                    )}
+                    {addHandles(
+                        handleStack,
+                        Position.Bottom,
+                        "left",
+                        isConnectable,
+                        style as MemoHandlerProps["style"],
+                        flowVersionCheck
+                    )}
+                    {addHandles(
+                        handleStack,
+                        Position.Left,
+                        "top",
+                        isConnectable,
+                        style as MemoHandlerProps["style"],
+                        flowVersionCheck
+                    )}
                 </>
             )}
         </>
@@ -719,53 +735,59 @@ export function NodeContent<CONTENT_PROPS = any>({
         return validatedHeight;
     };
 
+    const onResize = React.useCallback((_0, _1, _2, d) => {
+        if (nodeContentRef.current) {
+            const nextWidth = resizeDirections.right
+                ? (width ?? originalSize.current.width ?? 0) + d.width
+                : undefined;
+            const nextHeight = resizeDirections.bottom
+                ? (height ?? originalSize.current.height ?? 0) + d.height
+                : undefined;
+            if (nextWidth || nextHeight) {
+                const currentClassNames = nodeContentRef.current.classList;
+                currentClassNames.add("was-resized");
+            }
+            if (nextWidth) {
+                nodeContentRef.current.style.width = `${nextWidth}px`;
+            }
+            if (nextHeight) {
+                nodeContentRef.current.style.height = `${nextHeight}px`;
+            }
+        }
+    }, [resizeDirections, originalSize])
+
+    const onResizeStop = React.useCallback((_0, _1, _2, d) => {
+        const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width);
+        const nextHeight = validateHeight((height ?? originalSize.current.height ?? 0) + d.height);
+        setWidth(nextWidth);
+        setHeight(nextHeight);
+        if (onNodeResize) {
+            onNodeResize({
+                height: nextHeight,
+                width: nextWidth,
+            });
+        }
+    }, [onNodeResize])
+
+    const resizableSize = React.useMemo(() => ({ height: height ?? "auto", width: width ?? "auto" }), [height, width]);
+    const enableResize = React.useMemo(() => resizeDirections!.bottom && resizeDirections!.right ? { bottomRight: true } : resizeDirections, [resizeDirections]);
+
     const resizableNode = () => {
-        const size = { height: height ?? "auto", width: width ?? "auto" };
         return (
             <Resizable
                 className={
                     `${eccgui}-graphviz__node__resizer` +
-                    (resizeDirections.right ? ` ${eccgui}-graphviz__node__resizer--right` : "") +
-                    (resizeDirections.bottom ? ` ${eccgui}-graphviz__node__resizer--bottom` : "")
+                    (resizeDirections!.right ? ` ${eccgui}-graphviz__node__resizer--right` : "") +
+                    (resizeDirections!.bottom ? ` ${eccgui}-graphviz__node__resizer--bottom` : "")
                 }
                 handleWrapperClass={`${eccgui}-graphviz__node__resizer--cursorhandles` + " nodrag"}
-                size={size}
+                size={resizableSize}
                 maxHeight={resizeMaxDimensions?.height ?? undefined}
                 maxWidth={resizeMaxDimensions?.width ?? undefined}
-                enable={resizeDirections.bottom && resizeDirections.right ? { bottomRight: true } : resizeDirections}
+                enable={enableResize}
                 scale={zoom}
-                onResize={(_0, _1, _2, d) => {
-                    if (nodeContentRef.current) {
-                        const nextWidth = resizeDirections.right
-                            ? (width ?? originalSize.current.width ?? 0) + d.width
-                            : undefined;
-                        const nextHeight = resizeDirections.bottom
-                            ? (height ?? originalSize.current.height ?? 0) + d.height
-                            : undefined;
-                        if (nextWidth || nextHeight) {
-                            const currentClassNames = nodeContentRef.current.classList;
-                            currentClassNames.add("was-resized");
-                        }
-                        if (nextWidth) {
-                            nodeContentRef.current.style.width = `${nextWidth}px`;
-                        }
-                        if (nextHeight) {
-                            nodeContentRef.current.style.height = `${nextHeight}px`;
-                        }
-                    }
-                }}
-                onResizeStop={(_0, _1, _2, d) => {
-                    const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width);
-                    const nextHeight = validateHeight((height ?? originalSize.current.height ?? 0) + d.height);
-                    setWidth(nextWidth);
-                    setHeight(nextHeight);
-                    if (onNodeResize) {
-                        onNodeResize({
-                            height: nextHeight,
-                            width: nextWidth,
-                        });
-                    }
-                }}
+                onResize={onResize}
+                onResizeStop={onResizeStop}
             >
                 {nodeContent}
             </Resizable>

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

@@ -1,21 +1,25 @@
 import React, { memo } from "react";
-import { NodeProps as ReactFlowNodeProps, Position } from "react-flow-renderer";
+import { NodeProps as ReactFlowNodeV9Props } from "react-flow-renderer";
+import { NodeProps as ReactFlowNodeV12Props, Position } from "@xyflow/react";
 
 import { Tooltip } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { NodeContent, NodeContentProps } from "./NodeContent";
 
-export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any>
-    extends ReacFlowVersionSupportProps,
-        ReactFlowNodeProps {
+interface NodeDefaultExtendedProps<CONTENT_PROPS = any> extends ReacFlowVersionSupportProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
      */
-    data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>;
+    data: NodeContentProps<CONTENT_PROPS>;
 }
 
+type NodeDefaultV9Props<CONTENT_PROPS = any> = NodeDefaultExtendedProps<CONTENT_PROPS> & ReactFlowNodeV9Props;
+type NodeDefaultV12Props<CONTENT_PROPS = any> = NodeDefaultExtendedProps<CONTENT_PROPS> & Omit<ReactFlowNodeV12Props, "data">;
+
+export type NodeDefaultProps<CONTENT_PROPS = any> = NodeDefaultV9Props<CONTENT_PROPS> | NodeDefaultV12Props<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.

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -6,7 +6,7 @@
         inset: -6 * $reactflow-node-border-width;
         z-index: 0;
         content: " ";
-        background-color: rgba($reactflow-edge-stroke-color-selected, 0.05);
+        background-color: eccgui-color-rgba($reactflow-edge-stroke-color-selected, 0.05);
         border-color: $reactflow-edge-stroke-color-selected;
         border-style: dotted;
         border-width: 1px;
@@ -29,6 +29,12 @@
             box-shadow: none;
         }
     }
+
+    &.selected,
+    &:focus,
+    &:focus-visible {
+        outline: none;
+    }
 }
 
 .#{$eccgui}-graphviz__node {
@@ -47,7 +53,7 @@
     border-radius: $reactflow-node-border-radius;
 
     &:hover {
-        box-shadow: 0 0 0 6 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
+        box-shadow: 0 0 0 6 * $reactflow-node-border-width eccgui-color-rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
 
     &.was-resized.is-resizable-vertical {
@@ -193,13 +199,13 @@
 
 .#{$eccgui}-graphviz__node__header-label {
     display: inline-flex;
-    flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
+    flex-direction: column;
     margin: 0 $eccgui-size-block-whitespace * 0.25;
     overflow: hidden;
-    text-align: left;
     text-overflow: ellipsis;
+    text-align: left;
     white-space: nowrap;
 }
 
@@ -242,24 +248,24 @@
 
 .#{$eccgui}-graphviz__node__resizer--cursorhandles {
     position: absolute;
-    height: 0;
-    width: 0;
-    bottom: 0;
     right: 0;
-    overflow: visible;
+    bottom: 0;
     display: none;
+    width: 0;
+    height: 0;
+    overflow: visible;
 
     & > div {
-        overflow: visible;
-        z-index: 0 !important;
-        height: $reactflow-cursor-delimiter-offset * 3 !important;
-        width: $reactflow-cursor-delimiter-offset * 3 !important;
         top: unset !important;
-        left: unset !important;
-        bottom: -1 * $reactflow-cursor-delimiter-offset !important;
         right: -1 * $reactflow-cursor-delimiter-offset !important;
-        border-bottom: $reactflow-node-border-width solid $reactflow-node-border-color;
+        bottom: -1 * $reactflow-cursor-delimiter-offset !important;
+        left: unset !important;
+        z-index: 0 !important;
+        width: $reactflow-cursor-delimiter-offset * 3 !important;
+        height: $reactflow-cursor-delimiter-offset * 3 !important;
+        overflow: visible;
         border-right: $reactflow-node-border-width solid $reactflow-node-border-color;
+        border-bottom: $reactflow-node-border-width solid $reactflow-node-border-color;
 
         .#{$eccgui}-graphviz__node__resizer--right:not(.#{$eccgui}-graphviz__node__resizer--bottom) & {
             bottom: 0 !important;
@@ -437,8 +443,8 @@
 .#{$eccgui}-graphviz__node--introduction-runs {
     animation-name: outline;
     animation-duration: var(--node-introduction-time);
-    animation-play-state: running;
     animation-timing-function: linear;
+    animation-play-state: running;
 
     &[data-introduction-animation="landing"] {
         animation-name: landing;
@@ -450,48 +456,48 @@
 
     @keyframes landing {
         0% {
-            filter: blur($eccgui-size-block-whitespace);
             outline: solid 0 rgb(0 0 0 / 0%);
             outline-offset: 0;
             opacity: 0;
+            filter: blur($eccgui-size-block-whitespace);
             transform: scale(2);
         }
 
         61% {
-            filter: blur(0);
             outline: solid 0 rgb(0 0 0 / 39%);
             outline-offset: 0;
             opacity: 1;
+            filter: blur(0);
             transform: scale(1);
         }
 
         100% {
-            filter: blur(0);
             outline: solid $eccgui-size-block-whitespace rgb(0 0 0 / 0%);
             outline-offset: 2 * $eccgui-size-block-whitespace;
             opacity: 1;
+            filter: blur(0);
             transform: scale(1);
         }
     }
 
     @keyframes outline {
         0% {
-            outline: solid 0 rgba($eccgui-color-accent, 0);
+            outline: solid 0 eccgui-color-rgba($eccgui-color-accent, 0);
             outline-offset: 0;
         }
 
         9% {
-            outline: solid 0.5 * $eccgui-size-block-whitespace rgba($eccgui-color-accent, 0.39);
+            outline: solid 0.5 * $eccgui-size-block-whitespace eccgui-color-rgba($eccgui-color-accent, 0.39);
             outline-offset: 0;
         }
 
         85% {
-            outline: solid 0.5 * $eccgui-size-block-whitespace rgba($eccgui-color-accent, 0.39);
+            outline: solid 0.5 * $eccgui-size-block-whitespace eccgui-color-rgba($eccgui-color-accent, 0.39);
             outline-offset: 0;
         }
 
         100% {
-            outline: solid 0 rgba($eccgui-color-accent, 0);
+            outline: solid 0 eccgui-color-rgba($eccgui-color-accent, 0);
             outline-offset: 2 * $eccgui-size-block-whitespace;
         }
     }

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

@@ -1,15 +1,23 @@
 import { CSSProperties } from "react";
-import {Node, XYPosition} from "react-flow-renderer";
+import {Node as NodeV9, XYPosition as XYPositionV9} from "react-flow-renderer";
+import {Node as NodeV12, XYPosition as XYPositionV12} from "@xyflow/react";
 import Color from "color";
 import {NodeDimensions} from "./NodeContent";
 
-/** A sticky note for display in the UI as returned from the backend. */
-export interface StickyNote {
+interface StickyNoteBase {
     id: string;
     content: string;
     color: string;
-    position: XYPosition & NodeDimensions;
 }
+interface StickyNotePositionV9 {
+    position: XYPositionV9 & NodeDimensions;
+}
+interface StickyNotePositionV12 {
+    position: XYPositionV12 & NodeDimensions;
+}
+
+/** A sticky note for display in the UI as returned from the backend. */
+export type StickyNote = (StickyNoteBase & StickyNotePositionV9) | (StickyNoteBase & StickyNotePositionV12);
 
 /**
  * converts a react-flow node with
@@ -17,7 +25,7 @@ export interface StickyNote {
  * @param node
  * @returns {StickyNote}
  */
-const transformNodeToStickyNode = (node: Node<any>): StickyNote => {
+const transformNodeToStickyNode = (node: NodeV9<any> | NodeV12<any>): StickyNote => {
     return {
         id: node.id,
         content: node.data.businessData.stickyNote!,
@@ -41,7 +49,8 @@ const generateStyleWithColor = (color: string): CSSProperties => {
             borderColor: color,
             color: colorObj.isLight() ? "#000" : "#fff",
         };
-    } catch (ex) {
+    } catch {
+        // eslint-disable-next-line no-console
         console.warn("Received invalid color for sticky note: " + color);
     }
     return style;

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

@@ -1,9 +1,8 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Elements } from "react-flow-renderer";
+import { Elements, Node } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { ReactFlow } from "./../../../../cmem";
-import { NodeContent } from "./../NodeContent";
 import { NodeDefault } from "./../NodeDefault";
 import { Default as NodeContentExample } from "./NodeContent.stories";
 import { nodeTypes } from "./nodeTypes";
@@ -97,10 +96,9 @@ export default {
     },
 } as Meta<typeof NodeDefault>;
 
-const NodeDefaultExample = (args: any) => {
+const NodeDefaultExample = (args: Node) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
-    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
 
     useEffect(() => {
         setElements([args] as Elements);
@@ -126,7 +124,7 @@ const NodeDefaultExample = (args: any) => {
     );
 };
 
-const Template: StoryFn<typeof NodeDefault> = (args) => <NodeDefaultExample {...args} /*some comment*/ />;
+const Template: StoryFn<typeof NodeDefaultExample> = (args) => <NodeDefaultExample {...args} /*some comment*/ />;
 
 export const Default = Template.bind({});
 Default.args = {