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

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

@@ -1,44 +1,32 @@
-import { memo } from "react";
-import React from "react";
-import { BaseEdge, Edge, EdgeProps, EdgeText, getBezierPath, getEdgeCenter } from "@xyflow/react";
+import React, { memo } from "react";
+import { BaseEdge, Edge, EdgeProps, EdgeText, GetBezierPathParams } from "@xyflow/react";
 
-import { IntentTypes } from "../../../common/Intent";
 import { nodeContentUtils } from "../nodes/NodeContent";
-import { NodeHighlightColor } from "../nodes/sharedTypes";
+import { ReactFlowVersions } from "../versionsupport";
 
-import { edgeDefaultUtils } from "./EdgeDefault";
+import { EdgeDefaultDataProps, edgeDefaultUtils } from "./EdgeDefault";
+import { getStraightPath } from "./utils";
 
-export type EdgeDefaultV12DataProps = Record<string, unknown> & {
-    /**
-     * Overwrites the default style how the edge stroke is displayed.
-     */
-    strokeType?: "solid" | "dashed" | "dotted" | "double" | "doubledashed";
-    /**
-     * Feedback state of the node.
-     */
-    intent?: IntentTypes;
-    /**
-     * Set the color of used highlights to mark the edge.
-     */
-    highlightColor?: NodeHighlightColor | [NodeHighlightColor, NodeHighlightColor];
-    /**
-     * Size of the "glow" effect when the edge is hovered.
-     */
-    pathGlowWidth?: number;
-    /*
-     * Direction of the SVG path is inversed.
-     * This is important for the placement of the markers and the animation movement.
-     */
-    inversePath?: boolean;
+/**
+ * @deprecated (v26) use EdgeDefaultDataProps
+ */
+export interface EdgeDefaultV12DataProps extends Record<string, unknown>, EdgeDefaultDataProps {
     /**
-     * Callback handler that returns a React element used as edge title.
+     * Set the marker used on the start or end of the edge.
      */
-    renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
+    markerAppearance?: "arrow-closed" | "none";
+}
+
+/**
+ * @deprecated (v26) use EdgeDefaultProps
+ */
+export type EdgeDefaultV12Props = EdgeProps<Edge<EdgeDefaultV12DataProps>> & {
     /**
-     * Properties are forwarded to the internally used SVG `g` element.
-     * Data attributes for test ids coud be included here.
+     * Callback handler that returns SVG path and label position of the edge.
      */
-    edgeSvgProps?: React.SVGProps<SVGGElement>;
+    getPath?: (
+        edgeParams: Omit<GetBezierPathParams, "curvature"> & Record<string, unknown>
+    ) => [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number];
 };
 
 /**
@@ -62,11 +50,12 @@ export const EdgeDefaultV12 = memo(
         labelBgPadding = [5, 5],
         labelBgBorderRadius = 3,
         data = {},
+        getPath = getStraightPath,
         ...edgeOriginalProperties
-    }: EdgeProps<Edge<EdgeDefaultV12DataProps>>) => {
+    }: EdgeDefaultV12Props) => {
         const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, inversePath, strokeType } = data;
 
-        const [edgePath, labelX, labelY] = getBezierPath({
+        const [edgePath, labelX, labelY] = getPath({
             sourceX,
             sourceY,
             sourcePosition,
@@ -81,19 +70,12 @@ export const EdgeDefaultV12 = memo(
             highlightColor
         );
 
-        const edgeCenter = getEdgeCenter({
-            sourceX,
-            sourceY,
-            targetX,
-            targetY,
-        });
-
         const renderedLabel =
             renderLabel?.([labelX, labelY, sourceX, targetX]) ??
             (label ? (
                 <EdgeText
-                    x={edgeCenter[0]}
-                    y={edgeCenter[1]}
+                    x={labelX}
+                    y={labelY}
                     label={label}
                     labelStyle={labelStyle}
                     labelShowBg={labelShowBg}
@@ -103,50 +85,59 @@ export const EdgeDefaultV12 = memo(
                 />
             ) : null);
 
+        const appearance = data.markerAppearance ?? "arrow-closed";
+
+        const marker =
+            appearance !== "none"
+                ? {
+                      markerStart: inversePath
+                          ? `url(#react-flow__marker--${appearance}${intent ? `-${intent}` : "-none"}-reverse)`
+                          : undefined,
+                      markerEnd: !inversePath
+                          ? `url(#react-flow__marker--${appearance}${intent ? `-${intent}` : "-none"}`
+                          : undefined,
+                  }
+                : {};
+
         return (
             <g
-                className={
-                    "react-flow__edge " +
-                    edgeDefaultUtils.createEdgeDefaultClassName(
-                        { intent },
-                        `${edgeOriginalProperties.selected ? "selected" : ""}`
-                    )
-                }
+                {...edgeSvgProps}
+                className={edgeDefaultUtils.createEdgeDefaultClassName(
+                    { intent },
+                    `${edgeSvgProps?.className ?? ""}`,
+                    ReactFlowVersions.V12
+                )}
                 tabIndex={0}
                 role="button"
                 data-id={id}
                 aria-label={`Edge from ${edgeOriginalProperties.source} to ${edgeOriginalProperties.target}`}
                 aria-describedby={`react-flow__edge-desc-${id}`}
             >
-                <g className={edgeSvgProps?.className ?? ""}>
-                    {highlightColor && (
-                        <path
-                            d={edgePath}
-                            className={edgeDefaultUtils.createEdgeDefaultClassName(
-                                { highlightColor },
-                                "react-flow__edge-path-highlight"
-                            )}
-                            strokeWidth={10}
-                            style={{
-                                ...highlightCustomPropertySettings,
-                            }}
-                        />
-                    )}
-
-                    <BaseEdge
-                        id={id}
-                        path={edgePath}
-                        markerStart={inversePath ? "url(#arrow-closed-reverse)" : undefined}
-                        markerEnd={!inversePath ? "url(#arrow-closed)" : undefined}
-                        className={edgeDefaultUtils.createEdgeDefaultClassName({ strokeType })}
-                        interactionWidth={pathGlowWidth}
+                {highlightColor && (
+                    <path
+                        d={edgePath}
+                        className={edgeDefaultUtils.createEdgeDefaultClassName(
+                            { highlightColor },
+                            "react-flow__edge-path-highlight"
+                        )}
+                        strokeWidth={pathGlowWidth}
                         style={{
-                            ...edgeSvgProps?.style,
-                            ...edgeStyle,
-                            color: edgeStyle.color || edgeStyle.stroke,
+                            ...highlightCustomPropertySettings,
                         }}
                     />
-                </g>
+                )}
+                <BaseEdge
+                    id={id}
+                    path={edgePath}
+                    {...marker}
+                    className={edgeDefaultUtils.createEdgeDefaultClassName({ strokeType })}
+                    interactionWidth={pathGlowWidth}
+                    style={{
+                        ...edgeSvgProps?.style,
+                        ...edgeStyle,
+                        color: edgeStyle.color || edgeStyle.stroke,
+                    }}
+                />
                 {renderedLabel}
             </g>
         );

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

@@ -1,5 +1,8 @@
 import React from "react";
 
+/**
+ * @deprecated (v26) use `<ReactFlowMarkers />`
+ */
 export const EdgeDefs = React.memo(() => (
     <svg style={{ position: "absolute", top: 0, left: 0 }}>
         <defs>

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

@@ -0,0 +1,52 @@
+import React from "react";
+import {
+    ConnectionLineComponentProps,
+    ConnectionLineType,
+} from "@xyflow/react";
+import { EdgeStraight, EdgeStep, EdgeBezier, EdgeDefaultV12Props } from "./../index";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
+export const EdgeNew = (edgeNewProps: ConnectionLineComponentProps) => {
+
+    const {
+        connectionLineType,
+        fromX,
+        fromY,
+        toX,
+        toY,
+        connectionStatus,
+        fromPosition,
+        toPosition,
+    } = edgeNewProps;
+
+    let EdgeType;
+
+    switch(connectionLineType) {
+        case ConnectionLineType.Step:
+        case ConnectionLineType.SmoothStep:
+            EdgeType = EdgeStep;
+            break;
+        case ConnectionLineType.Bezier:
+        case ConnectionLineType.SimpleBezier:
+            EdgeType = EdgeBezier;
+            break;
+        default:
+            EdgeType = EdgeStraight;
+    }
+
+    return <EdgeType {...{
+        sourceX: fromX,
+        sourceY: fromY,
+        targetX: toX,
+        targetY: toY,
+        sourcePosition: fromPosition,
+        targetPosition: toPosition,
+        data: {
+            strokeType: !connectionStatus ? "dashed" : undefined,
+            edgeSvgProps: {className: `${eccgui}-graphviz__edge--dragged`},
+            intent: connectionStatus === "valid" ? "success" : connectionStatus === "invalid" ? "warning" : "accent"
+        },
+    } as EdgeDefaultV12Props} />;
+};
+

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

@@ -1,16 +1,51 @@
 import React, { memo } from "react";
+import { Edge, EdgeProps, getSmoothStepPath } from "@xyflow/react";
 
-import { EdgeDefault, EdgeDefaultDataProps, EdgeDefaultProps } from "./EdgeDefault";
+import { ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
+
+import { EdgeDefault, EdgeDefaultV9DataProps, EdgeDefaultV9Props } from "./EdgeDefault";
+import { EdgeDefaultV12DataProps, EdgeDefaultV12Props } from "./EdgeDefaultV12";
 import { drawEdgeStep } from "./utils";
 
-interface EdgeStepDataProps extends EdgeDefaultDataProps {
+interface EdgeStepDataV9Props extends EdgeDefaultV9DataProps {
+    stepCornerRadius?: number;
+}
+interface EdgeStepDataV12Props extends EdgeDefaultV12DataProps {
     stepCornerRadius?: number;
 }
 
-export interface EdgeStepProps extends EdgeDefaultProps {
-    data?: EdgeStepDataProps;
+/**
+ * @deprecated (v26) v9 support is removed after v25
+ */
+export interface EdgeStepV9Props extends EdgeDefaultV9Props {
+    data?: EdgeStepDataV9Props;
 }
+/**
+ * @deprecated (v26) v9 support is removed after v25
+ */
+export interface EdgeStepV12Props extends Omit<EdgeDefaultV12Props, "data">, EdgeProps<Edge<EdgeStepDataV12Props>> {}
+
+export type EdgeStepProps = EdgeStepV9Props | EdgeStepV12Props;
 
-export const EdgeStep = memo((edge: EdgeStepProps) => {
-    return <EdgeDefault {...edge} drawSvgPath={drawEdgeStep} />;
+/**
+ * This element cannot be used directly, it must be connected via a `edgeTypes` definition.
+ * @see https://reactflow.dev/docs/api/nodes/
+ */
+export const EdgeStep = memo((props: EdgeStepProps) => {
+    const flowVersionCheck = useReactFlowVersion();
+    switch (flowVersionCheck) {
+        case ReactFlowVersions.V9:
+            return <EdgeDefault {...(props as EdgeDefaultV9Props)} drawSvgPath={drawEdgeStep} />;
+        case ReactFlowVersions.V12:
+            return (
+                <EdgeDefault
+                    {...(props as EdgeDefaultV12Props)}
+                    getPath={(params) => {
+                        return getSmoothStepPath({ ...params, borderRadius: props.data?.stepCornerRadius ?? 7 });
+                    }}
+                />
+            );
+        default:
+            return <></>;
+    }
 });

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

@@ -0,0 +1 @@
+export { EdgeDefault as EdgeStraight } from "./EdgeDefault";

package/src/extensions/react-flow/edges/_edges.scss

@@ -49,6 +49,12 @@
             opacity: $reactflow-edge-stroke-opacity-selected;
         }
     }
+
+    &.selected,
+    &:focus,
+    &:focus-visible {
+        outline: none;
+    }
 }
 
 path.react-flow__edge-path {
@@ -143,8 +149,8 @@ path.react-flow__edge-path--stroke-double {
 path.react-flow__edge-path--stroke-doubledashed {
     filter: drop-shadow(1px 1px 1px currentcolor) drop-shadow(-1px -1px 1px currentcolor);
     stroke: #fff !important;
-    stroke-dasharray: 5;
     stroke-opacity: 1 !important;
+    stroke-dasharray: 5;
 }
 
 // Intent states
@@ -193,8 +199,8 @@ path.react-flow__edge-path-highlight {
         drop-shadow(-2px 2px 1px var(--edge-highlight-alternate-color, var(--edge-highlight-default-color)));
     fill: none;
     stroke: #fff;
-    stroke-linecap: round;
     stroke-opacity: 1;
+    stroke-linecap: round;
 }
 
 .#{$eccgui}-graphviz__edge--highlight-default {
@@ -256,9 +262,9 @@ path.react-flow__edge-path-highlight {
     polyline {
         fill: currentcolor;
         stroke: currentcolor;
+        stroke-width: 1px;
         stroke-linecap: square;
         stroke-linejoin: miter;
-        stroke-width: 1px;
         transform: scale(1.75, 0.75);
     }
 }
@@ -330,8 +336,8 @@ path.react-flow__edge-path-highlight {
     flex-shrink: 1;
     margin: 0 $eccgui-size-block-whitespace * 0.25;
     overflow: hidden;
-    text-align: center;
     text-overflow: ellipsis;
+    text-align: center;
     white-space: nowrap;
 
     .#{$eccgui}-graphviz__edge-label--fullwidth & {

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

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { EdgeLabel, EdgeLabelObject, ReactFlow } from "./../../../../../index";
 import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
-import { edgeTypes } from "./../edgeTypes";
+import { edgeTypes } from "./../../../../cmem/react-flow/configuration/workflow";
 
 const EdgeDefaultDataProps = (data: EdgeData) => {
     // this is only a mock to get it as sub element in the table

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

@@ -1,12 +1,15 @@
 import React, { useCallback, useState } from "react";
 import { Meta, StoryFn } from "@storybook/react";
-import { addEdge, Edge, OnConnect, Position, ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";
+import { addEdge, Edge, Node, OnConnect, Position, useEdgesState, useNodesState } from "@xyflow/react";
 
-import { NodeDefaultV12 } from "../../nodes/NodeDefaultV12";
-import { EdgeDefaultV12, EdgeDefaultV12DataProps as EdgeData } from "../EdgeDefaultV12";
-import { EdgeDefs } from "../EdgeDefs";
-
-import { EdgeLabel, EdgeLabelObject } from "./../../../../../index";
+import {
+    EdgeDefaultV12,
+    EdgeDefaultV12DataProps as EdgeData,
+    EdgeLabel,
+    EdgeLabelObject,
+    ReactFlowExtended,
+    ReactFlowVersions,
+} from "./../../../../../index";
 
 /**
  * this is only a mock to get it as sub element in the table
@@ -16,12 +19,6 @@ const EdgeDefaultDataProps = (data: EdgeData) => {
     return <></>;
 };
 
-const edgeTypes = {
-    default: EdgeDefaultV12,
-};
-const nodeTypes = {
-    default: NodeDefaultV12,
-};
 export default {
     title: "Extensions/React Flow V12/Edge",
     component: EdgeDefaultV12,
@@ -76,17 +73,11 @@ const EdgeDefault = (args: Edge) => {
             },
             position: { x: 600, y: 200 },
         },
-    ]);
+    ] as Node[]);
 
     const [edges, setEdges, onEdgesChange] = useEdgesState([
         {
             ...args,
-            // sourceX: 150,
-            // sourceY: 0,
-            // targetX: 250,
-            // targetY: 0,
-            sourcePosition: Position.Left,
-            targetPosition: Position.Right,
         },
     ]);
 
@@ -102,14 +93,12 @@ const EdgeDefault = (args: Edge) => {
     );
 
     return (
-        <div style={{ width: "1000px", height: "800px" }}>
-            <EdgeDefs />
-            <ReactFlow
+        <div style={{ height: "400px" }}>
+            <ReactFlowExtended
+                flowVersion={ReactFlowVersions.V12}
                 nodes={nodes}
                 edges={edges}
                 onLoad={onLoad}
-                edgeTypes={edgeTypes}
-                nodeTypes={nodeTypes}
                 onNodesChange={onNodesChange}
                 onEdgesChange={onEdgesChange}
                 onConnect={onConnect}
@@ -135,6 +124,15 @@ const defaultEdge: Edge = {
 export const Default = Template.bind({});
 Default.args = defaultEdge;
 
+export const WithoutArrow = Template.bind({});
+WithoutArrow.args = {
+    ...Default.args,
+    id: "noarrow",
+    data: {
+        markerAppearance: "none",
+    },
+};
+
 export const CustomLabel = Template.bind({});
 CustomLabel.args = {
     ...Default.args,

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

@@ -1,4 +1,5 @@
-import { Position } from "react-flow-renderer";
+import { getEdgeCenter, Position } from "react-flow-renderer";
+import { GetBezierPathParams } from "@xyflow/react";
 
 import { EdgeDefaultProps } from "./EdgeDefault";
 import { EdgeStepProps } from "./EdgeStep";
@@ -145,6 +146,23 @@ export const drawEdgeStraight = ({
     });
 };
 
+export const getStraightPath = (params: Omit<GetBezierPathParams, "curvature">) => {
+    const path = drawEdgeStraight(params as EdgeDefaultProps);
+    const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({
+        sourceX: params.sourceX,
+        sourceY: params.sourceY,
+        targetX: params.targetX,
+        targetY: params.targetY,
+    });
+    return [path, labelX, labelY, offsetX, offsetY] as [
+        path: string,
+        labelX: number,
+        labelY: number,
+        offsetX: number,
+        offsetY: number
+    ];
+};
+
 export const drawEdgeStep = ({
     sourceX,
     sourceY,

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

@@ -1,6 +1,5 @@
 import React, { memo } from "react";
-import { Handle as HandleLegacy, HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
-import { Handle as HandleNext, HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
+import { Handle as HandleV9, HandleProps as ReactFlowHandleV9Props } from "react-flow-renderer";
 import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
 
@@ -10,6 +9,7 @@ import { TooltipProps } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { HandleContent, HandleContentProps } from "./HandleContent";
+import {Intent} from "@blueprintjs/core/src/common/intent";
 
 export type HandleCategory = "configuration" | "flexible" | "fixed" | "unknown" | "dependency";
 
@@ -35,33 +35,44 @@ interface HandleExtensionProps
     children?: HandleContentProps["children"];
 }
 
-export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {}
-export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {}
+/**
+ * @deprecated (v26) use only `HandleDefaultProps`
+ */
+export interface HandleV9Props extends HandleExtensionProps, ReactFlowHandleV9Props {}
+/**
+ * @deprecated (v26) use only `HandleDefaultProps`
+ */
 export interface HandleV12Props extends HandleExtensionProps, ReactFlowHandleV12Props {}
-export type HandleDefaultProps = HandleProps | HandleNextProps | HandleV12Props;
+
+/**
+ * Combined interface, later this will be only a copy of `HandleV12Props`.
+ */
+export type HandleDefaultProps = HandleV9Props | HandleV12Props;
 
 export const HandleDefault = memo(
     ({ flowVersion, data, tooltip, children, category, intent, ...handleProps }: HandleDefaultProps) => {
         const evaluateFlowVersion = useReactFlowVersion();
         const flowVersionCheck = flowVersion || evaluateFlowVersion;
-        const handleDefaultRef = React.useRef<any>();
+        const handleDefaultRef = React.useRef<HTMLDivElement>(null);
         const [extendedTooltipDisplayed, setExtendedTooltipDisplayed] = React.useState<boolean>(false);
 
-        let toolsTarget: HTMLElement[];
+        let toolsTarget: HTMLCollectionOf<Element>;
 
         React.useEffect(() => {
-            toolsTarget = handleDefaultRef.current.getElementsByClassName(`${eccgui}-graphviz__handletools-target`);
-            if (toolsTarget && toolsTarget[0]) {
-                // Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
-                // need to be re-evaluated then
-                // @see https://connect.mozilla.org/t5/ideas/when-is-has-css-selector-going-to-be-fully-implemented-in/idi-p/23794
-                handleDefaultRef.current.classList.add(`ffpolyfill-has-${eccgui}-graphviz__handletools-target`);
+            if (handleDefaultRef.current) {
+                toolsTarget = handleDefaultRef.current.getElementsByClassName(`${eccgui}-graphviz__handletools-target`);
+                if (toolsTarget && toolsTarget[0]) {
+                    // Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
+                    // need to be re-evaluated then
+                    // @see https://connect.mozilla.org/t5/ideas/when-is-has-css-selector-going-to-be-fully-implemented-in/idi-p/23794
+                    handleDefaultRef.current.classList.add(`ffpolyfill-has-${eccgui}-graphviz__handletools-target`);
+                }
             }
         });
 
         const tooltipTitle = tooltip ? { title: tooltip } : {};
 
-        const handleContentTooltipProps = {
+        const handleContentTooltipProps: Partial<TooltipProps> = {
             placement:
                 handleProps.position === "left" || handleProps.position === "right"
                     ? `${handleProps.position}-end`
@@ -74,39 +85,39 @@ export const HandleDefault = memo(
                     },
                 },
             },
-            intent: intent,
+            intent: intent as Intent,
             className: `${eccgui}-graphviz__handle__tooltip-target`,
             isOpen: extendedTooltipDisplayed,
-        };
+        }
 
-        const handleContentProps = {
+        const handleContentProps = React.useMemo(() => ({
             ...data,
             tooltipProps: {
                 ...handleContentTooltipProps,
                 ...data?.tooltipProps,
             } as TooltipProps,
-        };
+        }), [intent, category, handleProps.isConnectable])
 
-        const handleContent = <HandleContent {...handleContentProps}>{children}</HandleContent>;
+        const handleContent = React.useMemo(() => <HandleContent {...handleContentProps}>{children}</HandleContent>, [])
 
         let switchTooltipTimerOn: ReturnType<typeof setTimeout>;
         let switchToolsTimerOff: ReturnType<typeof setTimeout>;
 
-        const handleConfig = {
+        const handleConfig =  React.useMemo(() => ({
             ...handleProps,
             ...tooltipTitle,
-            className: intent ? `${intentClassName(intent)} ` : "",
-            onClick: (e: any) => {
+            className: intent ? `${intentClassName(intent)} ` : "" + ` ${eccgui}-graphviz__handle ${eccgui}-graphviz__handle--${flowVersionCheck}`,
+            onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
                 if (handleProps.onClick) {
                     handleProps.onClick(e);
                 }
                 if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
                     setExtendedTooltipDisplayed(false);
-                    toolsTarget[0].click();
+                    (toolsTarget[0] as HTMLElement).click();
                 }
             },
             "data-category": category,
-            onMouseEnter: (e: any) => {
+            onMouseEnter: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
                 if (switchToolsTimerOff) clearTimeout(switchToolsTimerOff);
                 if (e.target === handleDefaultRef.current) {
                     switchTooltipTimerOn = setTimeout(
@@ -118,24 +129,18 @@ export const HandleDefault = memo(
             onMouseLeave: () => {
                 if (switchTooltipTimerOn) clearTimeout(switchTooltipTimerOn);
                 if (toolsTarget.length > 0 && toolsTarget[0].classList.contains(BlueprintClasses.POPOVER_OPEN)) {
-                    switchToolsTimerOff = setTimeout(() => toolsTarget[0].click(), 500);
+                    switchToolsTimerOff = setTimeout(() => (toolsTarget[0] as HTMLElement).click(), 500);
                 }
                 setExtendedTooltipDisplayed(false);
             },
-        };
+        }), [intent, category, tooltip, handleProps.isConnectable, handleProps.style]);
 
         switch (flowVersionCheck) {
-            case "legacy":
-                return (
-                    <HandleLegacy ref={handleDefaultRef} {...(handleConfig as HandleProps)}>
-                        {handleContent}
-                    </HandleLegacy>
-                );
-            case "next":
+            case "v9":
                 return (
-                    <HandleNext ref={handleDefaultRef} {...(handleConfig as HandleNextProps)}>
+                    <HandleV9 ref={handleDefaultRef} {...(handleConfig as HandleV9Props)}>
                         {handleContent}
-                    </HandleNext>
+                    </HandleV9>
                 );
             case "v12":
                 return (

package/src/extensions/react-flow/handles/_handles.scss

@@ -90,7 +90,7 @@ div.react-flow__handle {
     }
 
     &[data-category="dependency"] {
-        background-color: color-mix(in srgb, currentcolor 39%, white);
+        background-color: eccgui-color-mix(currentcolor 39%, white);
         border-radius: 0;
         transform: rotate(45deg);
 
@@ -118,7 +118,7 @@ div.react-flow__handle {
     }
 
     &[data-category="unknown"] {
-        background-color: color-mix(in srgb, currentcolor 39%, white);
+        background-color: eccgui-color-mix(currentcolor 39%, white);
     }
 
     .react-flow__node:hover &.connectable {