@eccenca/gui-elements 25.1.0-rc.4 → 25.2.0-featuredarkthemesupportcmem7503.0

package/src/extensions/codemirror/toolbars/commands/markdown.command.ts

@@ -149,7 +149,7 @@ export default class MarkdownCommand {
                     changes,
                     range: EditorSelection.range(selectionStart, selectionStart + selectionLength),
                 };
-            })
+            }),
         );
 
         view.focus();
@@ -192,7 +192,7 @@ export default class MarkdownCommand {
                     },
                     range: EditorSelection.range(range.anchor + diffLength, range.head + diffLength),
                 };
-            })
+            }),
         );
 
         this.enforceCursorFocus(lastCursorPosition);
@@ -214,7 +214,7 @@ export default class MarkdownCommand {
                     changes: [{ from: range.from, to: range.to, insert: `${startDelimiter}${text}${endDelimiter}` }],
                     range: EditorSelection.range(range.from + start, range.to + stop),
                 };
-            })
+            }),
         );
         view.focus();
     };
@@ -247,7 +247,7 @@ export default class MarkdownCommand {
                     ],
                     range: EditorSelection.range(cursor, cursor),
                 };
-            })
+            }),
         );
 
         view.focus();
@@ -298,7 +298,7 @@ export default class MarkdownCommand {
                     changes,
                     range: EditorSelection.range(selectionStart, selectionStart + selectionLength),
                 };
-            })
+            }),
         );
         this.enforceCursorFocus(lastCursorPosition);
     };
@@ -326,7 +326,7 @@ export default class MarkdownCommand {
             case Commands.orderedList:
             case Commands.todoList:
                 return this.createList(
-                    MarkdownCommand.commands.lists.find((l) => l.title === command)?.moniker as ListType
+                    MarkdownCommand.commands.lists.find((l) => l.title === command)?.moniker as ListType,
                 );
             case Commands.image:
             case Commands.link:

package/src/extensions/react-flow/_react-flow_v12.scss

@@ -6,8 +6,8 @@
  */
 
 .react-flow {
-    direction: ltr;
     z-index: 0;
+    direction: ltr;
 }
 
 .react-flow__pane {
@@ -43,26 +43,45 @@
 .react-flow__controls {
     display: flex;
     flex-direction: column;
+    border: 1px solid rgba($pt-text-color, 0.2);
+    box-shadow: none !important;
+
+    .react-flow__controls-button {
+        display: flex;
+        justify-content: center;
+        color: $pt-text-color;
+        cursor: pointer;
+        user-select: none;
+        background-color: $button-background-color;
+        border: none;
+
+        &:not(:last-child) {
+            border-bottom: 1px solid rgba($pt-text-color, 0.2);
+        }
+
+        &:hover,
+        &:focus {
+            background-color: $button-background-color-hover;
+        }
+
+        &:disabled {
+            color: $button-background-color-disabled;
+            pointer-events: none;
+        }
+    }
+
+    .react-flow__controls-button svg {
+        width: 100%;
+        max-width: 12px;
+        max-height: 12px;
+        fill: currentcolor;
+    }
 }
 
 .react-flow__controls.horizontal {
     flex-direction: row;
 }
 
-.react-flow__controls-button {
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    user-select: none;
-}
-
-.react-flow__controls-button svg {
-    width: 100%;
-    max-width: 12px;
-    max-height: 12px;
-    fill: currentcolor;
-}
-
 .react-flow .react-flow__edges {
     position: absolute;
 }
@@ -152,6 +171,10 @@ svg.react-flow__connectionline {
     cursor: move;
 }
 
+.react-flow__minimap {
+    background-color: #{eccgui-color-var("identity", "background", "100")} !important;
+}
+
 .react-flow__minimap-svg {
     display: block;
 }
@@ -168,10 +191,6 @@ svg.react-flow__connectionline {
     outline: none;
 }
 
-.react-flow__controls-button:disabled {
-    pointer-events: none;
-}
-
 // -- adjustments
 
 .react-flow__background {

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

@@ -14,8 +14,7 @@ interface EdgeBezierDataV12Props extends EdgeDefaultV12DataProps {
  * @deprecated (v26) v9 support is removed after v25
  */
 export interface EdgeBezierV12Props
-    extends Omit<EdgeDefaultV12Props, "data">,
-        EdgeProps<Edge<EdgeBezierDataV12Props>> {}
+    extends Omit<EdgeDefaultV12Props, "data">, EdgeProps<Edge<EdgeBezierDataV12Props>> {}
 
 export type EdgeBezierProps = EdgeDefaultV9Props | EdgeBezierV12Props;
 

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

@@ -104,7 +104,7 @@ const EdgeDefaultV9 = memo(
         const edgeStyle = edgeOriginalProperties.style ?? {};
         const { highlightCustomPropertySettings } = nodeContentUtils.evaluateHighlightColors(
             "--edge-highlight",
-            highlightColor
+            highlightColor,
         );
 
         return (
@@ -113,7 +113,7 @@ const EdgeDefaultV9 = memo(
                 className={createEdgeDefaultClassName(
                     { intent },
                     `${edgeSvgProps?.className ?? ""}`,
-                    ReactFlowVersions.V9
+                    ReactFlowVersions.V9,
                 )}
                 style={{
                     ...edgeSvgProps?.style,
@@ -147,7 +147,7 @@ const EdgeDefaultV9 = memo(
                 {edgeLabel}
             </g>
         );
-    }
+    },
 );
 
 /**
@@ -169,7 +169,7 @@ export const EdgeDefault = memo((props: EdgeDefaultProps) => {
 const createEdgeDefaultClassName = (
     { strokeType, intent, highlightColor }: EdgeDefaultDataProps,
     baseClass = "react-flow__edge-path",
-    flowVersion?: ReactFlowVersions
+    flowVersion?: ReactFlowVersions,
 ) => {
     const { highlightClassNameSuffix } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
     return (

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

@@ -25,7 +25,7 @@ export type EdgeDefaultV12Props = EdgeProps<Edge<EdgeDefaultV12DataProps>> & {
      * Callback handler that returns SVG path and label position of the edge.
      */
     getPath?: (
-        edgeParams: Omit<GetBezierPathParams, "curvature"> & Record<string, unknown>
+        edgeParams: Omit<GetBezierPathParams, "curvature"> & Record<string, unknown>,
     ) => [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number];
 };
 
@@ -75,7 +75,7 @@ export const EdgeDefaultV12 = memo(
         const edgeStyle = edgeOriginalProperties.style ?? {};
         const { highlightCustomPropertySettings } = nodeContentUtils.evaluateHighlightColors(
             "--edge-highlight",
-            highlightColor
+            highlightColor,
         );
 
         const renderedLabel =
@@ -115,7 +115,7 @@ export const EdgeDefaultV12 = memo(
                 className={edgeDefaultUtils.createEdgeDefaultClassName(
                     { intent },
                     `${edgeSvgProps?.className ?? ""}`,
-                    ReactFlowVersions.V12
+                    ReactFlowVersions.V12,
                 )}
                 tabIndex={0}
                 role="button"
@@ -128,7 +128,7 @@ export const EdgeDefaultV12 = memo(
                         d={edgePath}
                         className={edgeDefaultUtils.createEdgeDefaultClassName(
                             { highlightColor },
-                            "react-flow__edge-path-highlight"
+                            "react-flow__edge-path-highlight",
                         )}
                         strokeWidth={pathGlowWidth}
                         style={{
@@ -151,5 +151,5 @@ export const EdgeDefaultV12 = memo(
                 {renderedLabel}
             </g>
         );
-    }
+    },
 );

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

@@ -1,9 +1,11 @@
 import React, { memo } from "react";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
+import { Depiction, DepictionProps } from "../../../components/Depiction/Depiction";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import Icon from "../../../components/Icon/Icon";
+import OverflowText from "../../../components/Typography/OverflowText";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Depiction, DepictionProps, Icon, OverflowText } from "../../../index";
 
 export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -14,11 +16,11 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      * Label of the edge.
      * Cannot overflow the parent container.
      */
-    text: string | JSX.Element;
+    text: string | React.JSX.Element;
     /**
      * One or multiple other elements displayed right from label.
      */
-    actions?: JSX.Element | JSX.Element[];
+    actions?: React.JSX.Element | React.JSX.Element[];
     /**
      * The element is increased in its size.
      */
@@ -82,14 +84,14 @@ export const EdgeLabel = memo(
                     </div>
                 )}
                 {(title || text) && (
-                    <div className={`${eccgui}-graphviz__edge-label__text`} title={title??undefined}>
+                    <div className={`${eccgui}-graphviz__edge-label__text`} title={title ?? undefined}>
                         {text && (typeof text === "string" ? <OverflowText>{text}</OverflowText> : text)}
                     </div>
                 )}
                 {!!actions && <div className={`${eccgui}-graphviz__edge-label__aux`}>{actions}</div>}
             </div>
         );
-    }
+    },
 );
 
 export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
@@ -111,10 +113,10 @@ export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObje
 export const EdgeLabelObject = memo(
     ({ children, edgeCenter, resizeTimeout = -1, ...otherForeignObjectProps }: EdgeLabelObjectProps) => {
         const containerCallback = React.useCallback(
-            (containerRef) => {
+            (containerRef: SVGForeignObjectElement | null) => {
                 if (containerRef) labelSize(containerRef);
             },
-            [edgeCenter]
+            [edgeCenter],
         );
 
         const labelSize = (container: SVGForeignObjectElement) => {
@@ -147,5 +149,5 @@ export const EdgeLabelObject = memo(
                 {children}
             </foreignObject>
         );
-    }
+    },
 );

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

@@ -1,29 +1,19 @@
 import React from "react";
-import {
-    ConnectionLineComponentProps,
-    ConnectionLineType,
-} from "@xyflow/react";
+import { ConnectionLineComponentProps, ConnectionLineType } from "@xyflow/react";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
-import { EdgeBezier, EdgeDefaultV12Props,EdgeStep, EdgeStraight } from "./../index";
+import { EdgeBezier } from "./EdgeBezier";
+import { EdgeDefaultV12Props } from "./EdgeDefaultV12";
+import { EdgeStep } from "./EdgeStep";
+import { EdgeStraight } from "./EdgeStraight";
 
 export const EdgeNew = (edgeNewProps: ConnectionLineComponentProps) => {
-
-    const {
-        connectionLineType,
-        fromX,
-        fromY,
-        toX,
-        toY,
-        connectionStatus,
-        fromPosition,
-        toPosition,
-    } = edgeNewProps;
+    const { connectionLineType, fromX, fromY, toX, toY, connectionStatus, fromPosition, toPosition } = edgeNewProps;
 
     let EdgeType;
 
-    switch(connectionLineType) {
+    switch (connectionLineType) {
         case ConnectionLineType.Step:
         case ConnectionLineType.SmoothStep:
             EdgeType = EdgeStep;
@@ -36,18 +26,26 @@ export const EdgeNew = (edgeNewProps: ConnectionLineComponentProps) => {
             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} />;
+    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/EdgeTools.tsx

@@ -2,9 +2,8 @@ import React, { memo } from "react";
 import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { ContextOverlay } from "../../../index";
 
-import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+import { ContextOverlay, ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 
 interface PosOffset {
     left: number;
@@ -13,7 +12,7 @@ interface PosOffset {
 
 export interface EdgeToolsProps extends Omit<ContextOverlayProps, "children"> {
     posOffset: PosOffset;
-    children: string | JSX.Element | JSX.Element[];
+    children: string | React.JSX.Element | React.JSX.Element[];
 }
 
 export const EdgeTools = memo(({ posOffset, children, ...otherProps }: EdgeToolsProps) => {

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

@@ -18,6 +18,7 @@
     }
 
     .react-flow__edge-textbg {
+        fill: #{eccgui-color-var("identity", "background", "100")};
         stroke: currentcolor;
     }
 

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

@@ -61,7 +61,7 @@ const EdgeDefaultExample = (args: EdgeDefaultProps) => {
                 setReactflowInstance(rfi);
             }
         },
-        [reactflowInstance]
+        [reactflowInstance],
     );
 
     return (

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

@@ -89,7 +89,7 @@ const EdgeDefault = (args: Edge) => {
                 setReactflowInstance(rfi);
             }
         },
-        [reactflowInstance]
+        [reactflowInstance],
     );
 
     return (

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

@@ -3,8 +3,9 @@ import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../../.storybook/helpers";
+import { EdgeLabel } from "../EdgeLabel";
 
-import { Badge, EdgeLabel, Icon, IconButton, OverflowText } from "./../../../../../index";
+import { Badge, Icon, IconButton, OverflowText } from "./../../../../components";
 import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 
 export default {

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

@@ -5,8 +5,10 @@ import { EdgeDefaultProps } from "./EdgeDefault";
 import { EdgeStepProps } from "./EdgeStep";
 import { getSmoothStepPath } from "./getSmoothStepPath";
 
-interface EdgePositionCorrectionProps
-    extends Omit<EdgeDefaultProps, "id" | "source" | "target" | "drawSvgPath" | "data"> {
+interface EdgePositionCorrectionProps extends Omit<
+    EdgeDefaultProps,
+    "id" | "source" | "target" | "drawSvgPath" | "data"
+> {
     correctionLength?: number;
     correctionRadius?: number;
 }
@@ -159,7 +161,7 @@ export const getStraightPath = (params: Omit<GetBezierPathParams, "curvature">)
         labelX: number,
         labelY: number,
         offsetX: number,
-        offsetY: number
+        offsetY: number,
     ];
 };
 

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

@@ -1,13 +1,13 @@
 import React, { memo } from "react";
 
+import Tooltip, { TooltipProps } from "../../../components/Tooltip/Tooltip";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Tooltip, TooltipProps } from "../../../index";
 
 export interface HandleContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     /**
      * Tooltip displayed as overlay on hover.
      */
-    extendedTooltip?: JSX.Element | string;
+    extendedTooltip?: React.JSX.Element | string;
     /**
      * Configure the tooltip and overwrite automatically set options.
      */
@@ -41,5 +41,5 @@ export const HandleContent = memo(
         }
 
         return handleContent;
-    }
+    },
 );

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

@@ -1,12 +1,12 @@
 import React, { memo } from "react";
 import { Handle as HandleV9, HandleProps as ReactFlowHandleV9Props } from "react-flow-renderer";
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
-import {Intent} from "@blueprintjs/core/src/common/intent";
+import { Intent } from "@blueprintjs/core/src/common/intent";
 import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
+import { TooltipProps } from "../../../components";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { TooltipProps } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { HandleContent, HandleContentProps } from "./HandleContent";
@@ -14,8 +14,7 @@ import { HandleContent, HandleContentProps } from "./HandleContent";
 export type HandleCategory = "configuration" | "flexible" | "fixed" | "unknown" | "dependency";
 
 interface HandleExtensionProps
-    extends ReacFlowVersionSupportProps,
-        Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "children"> {
+    extends ReacFlowVersionSupportProps, Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "children"> {
     /**
      * Defines the handle category, mainly used to adjust layout.
      */
@@ -88,52 +87,63 @@ export const HandleDefault = memo(
             intent: intent as Intent,
             className: `${eccgui}-graphviz__handle__tooltip-target`,
             isOpen: extendedTooltipDisplayed,
-        }
-
-        const handleContentProps = React.useMemo(() => ({
-            ...data,
-            tooltipProps: {
-                ...handleContentTooltipProps,
-                ...data?.tooltipProps,
-            } as TooltipProps,
-        }), [intent, category, handleProps.isConnectable])
-
-        const handleContent = React.useMemo(() => <HandleContent {...handleContentProps}>{children}</HandleContent>, [])
+        };
+
+        const handleContentProps = React.useMemo(
+            () => ({
+                ...data,
+                tooltipProps: {
+                    ...handleContentTooltipProps,
+                    ...data?.tooltipProps,
+                } as TooltipProps,
+            }),
+            [intent, category, handleProps.isConnectable],
+        );
+
+        const handleContent = React.useMemo(
+            () => <HandleContent {...handleContentProps}>{children}</HandleContent>,
+            [],
+        );
 
         let switchTooltipTimerOn: ReturnType<typeof setTimeout>;
         let switchToolsTimerOff: ReturnType<typeof setTimeout>;
 
-        const handleConfig =  React.useMemo(() => ({
-            ...handleProps,
-            ...tooltipTitle,
-            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) {
+        const handleConfig = React.useMemo(
+            () => ({
+                ...handleProps,
+                ...tooltipTitle,
+                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] as HTMLElement).click();
+                    }
+                },
+                "data-category": category,
+                onMouseEnter: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+                    if (switchToolsTimerOff) clearTimeout(switchToolsTimerOff);
+                    if (e.target === handleDefaultRef.current) {
+                        switchTooltipTimerOn = setTimeout(
+                            () => setExtendedTooltipDisplayed(true),
+                            data?.tooltipProps?.hoverOpenDelay ?? 500,
+                        );
+                    }
+                },
+                onMouseLeave: () => {
+                    if (switchTooltipTimerOn) clearTimeout(switchTooltipTimerOn);
+                    if (toolsTarget.length > 0 && toolsTarget[0].classList.contains(BlueprintClasses.POPOVER_OPEN)) {
+                        switchToolsTimerOff = setTimeout(() => (toolsTarget[0] as HTMLElement).click(), 500);
+                    }
                     setExtendedTooltipDisplayed(false);
-                    (toolsTarget[0] as HTMLElement).click();
-                }
-            },
-            "data-category": category,
-            onMouseEnter: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-                if (switchToolsTimerOff) clearTimeout(switchToolsTimerOff);
-                if (e.target === handleDefaultRef.current) {
-                    switchTooltipTimerOn = setTimeout(
-                        () => setExtendedTooltipDisplayed(true),
-                        data?.tooltipProps?.hoverOpenDelay ?? 500
-                    );
-                }
-            },
-            onMouseLeave: () => {
-                if (switchTooltipTimerOn) clearTimeout(switchTooltipTimerOn);
-                if (toolsTarget.length > 0 && toolsTarget[0].classList.contains(BlueprintClasses.POPOVER_OPEN)) {
-                    switchToolsTimerOff = setTimeout(() => (toolsTarget[0] as HTMLElement).click(), 500);
-                }
-                setExtendedTooltipDisplayed(false);
-            },
-        }), [intent, category, tooltip, handleProps.isConnectable, handleProps.style]);
+                },
+            }),
+            [intent, category, tooltip, handleProps.isConnectable, handleProps.style],
+        );
 
         switch (flowVersionCheck) {
             case "v9":
@@ -152,5 +162,5 @@ export const HandleDefault = memo(
             default:
                 return <></>;
         }
-    }
+    },
 );

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

@@ -1,15 +1,14 @@
 import React from "react";
 import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
 
+import { TestableComponent } from "../../../components";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { ContextOverlay, TestableComponent } from "../../../index";
 
-import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+import { ContextOverlay, ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 
 export interface HandleToolsProps
-    extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName">,
-        TestableComponent {
-    children: string | JSX.Element | JSX.Element[];
+    extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName">, TestableComponent {
+    children: string | React.JSX.Element | React.JSX.Element[];
 }
 
 export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToolsProps) => {

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

@@ -62,10 +62,10 @@ div.react-flow__handle {
             inset: 0;
             display: none;
             cursor: pointer;
-            content: " ";
-            border-radius: 100%;
             outline: dotted $eccgui-size-flow-handle-border currentcolor;
             outline-offset: $eccgui-size-flow-handle * 0.75 + $eccgui-size-flow-handle-border * 0.5;
+            content: " ";
+            border-radius: 100%;
 
             .react-flow__node:hover & {
                 display: block;
@@ -207,9 +207,9 @@ div.react-flow__handle-bottom {
 .#{$eccgui}-graphviz__node--hidehandles {
     & ~ .react-flow__handle:not(.connectable) {
         z-index: -1;
+        visibility: hidden;
         width: 1px;
         height: 1px;
-        visibility: hidden;
         border: none;
 
         &.react-flow__handle-top {