@eccenca/gui-elements 25.1.0 → 25.2.0-featureupgradeblueprintjsv6cmem7139.0

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/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/stories/HandleDefault.stories.tsx

@@ -59,18 +59,13 @@ const HandleDefaultExample = (args: any) => {
                 setReactflowInstance(rfi);
             }
         },
-        [reactflowInstance]
+        [reactflowInstance],
     );
 
     return (
         <OverlaysProvider>
             <ReactFlowProvider>
-                <ReactFlowExtended
-                    elements={elements}
-                    style={{ height: "400px" }}
-                    onLoad={onLoad}
-                    defaultZoom={1}
-                />
+                <ReactFlowExtended elements={elements} style={{ height: "400px" }} onLoad={onLoad} defaultZoom={1} />
             </ReactFlowProvider>
         </OverlaysProvider>
     );

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

@@ -21,4 +21,4 @@ export * from "./markers/ReactFlowMarkers";
 export * from "./minimap/MiniMap";
 export * from "./minimap/MiniMapV12";
 export * from "./minimap/utils";
-export * from "./versionsupport";
+export * from "./versionsupport";

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

@@ -47,13 +47,13 @@ const ReactFlowMarker = ({ className, appearance = "arrow-closed", intent, rever
             refY="0"
             orient={reverse ? "auto-start-reverse" : "auto"}
         >
-            {markerDisplay[appearance]}
+            {markerDisplay[appearance] as React.ReactNode}
         </marker>
     );
 };
 
 const ReactFlowMarkers: FC = () => {
-    const intents = ["none", "primary", "accent", "success", "warning", "danger", "info" ] as IntentTypes[];
+    const intents = ["none", "primary", "accent", "success", "warning", "danger", "info"] as IntentTypes[];
 
     return (
         <svg>

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

@@ -2,7 +2,7 @@ import React, { memo, useEffect } from "react";
 import {
     MiniMap as ReactFlowMiniMapV9,
     MiniMapProps as ReactFlowMiniMapV9Props,
-    OnLoadParams
+    OnLoadParams,
 } from "react-flow-renderer";
 import { FlowTransform } from "react-flow-renderer/dist/types";
 
@@ -33,7 +33,9 @@ export interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Pro
     flowInstance?: OnLoadParams;
 }
 
-export type MiniMapProps = (ReacFlowVersionSupportProps & MiniMapV9Props) | (ReacFlowVersionSupportProps & MiniMapV12Props);
+export type MiniMapProps =
+    | (ReacFlowVersionSupportProps & MiniMapV9Props)
+    | (ReacFlowVersionSupportProps & MiniMapV12Props);
 
 interface configParams {
     // Key has been pressed down over the mini-map and navigation mode has thus started
@@ -51,23 +53,18 @@ let minimapCalcConf: configParams = {
 };
 
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
-export const MiniMap = memo(
-    ({
-        flowVersion,
-        ...otherProps
-    }: MiniMapProps) => {
-        const flowVersionCheck = flowVersion || useReactFlowVersion();
-        
-        switch (flowVersionCheck) {
-            case ReactFlowVersions.V9:
-                return <MiniMapV9 {...otherProps as MiniMapV9Props} />;
-            case ReactFlowVersions.V12:
-                return <MiniMapV12 {...otherProps as MiniMapV12Props} />;
-            default:
-                return <></>; // cannot exit on its own
-        }
+export const MiniMap = memo(({ flowVersion, ...otherProps }: MiniMapProps) => {
+    const flowVersionCheck = flowVersion || useReactFlowVersion();
+
+    switch (flowVersionCheck) {
+        case ReactFlowVersions.V9:
+            return <MiniMapV9 {...(otherProps as MiniMapV9Props)} />;
+        case ReactFlowVersions.V12:
+            return <MiniMapV12 {...(otherProps as MiniMapV12Props)} />;
+        default:
+            return <></>; // cannot exit on its own
     }
-);
+});
 
 /**
  * Mini-map support for for React Flow v9.
@@ -173,7 +170,7 @@ export const MiniMapV9 = memo(
                 />
             </div>
         );
-    }
+    },
 );
 
-export default MiniMap;
+export default MiniMap;

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

@@ -4,8 +4,7 @@ import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps } fr
 import { MiniMapBasicProps } from "./MiniMap";
 import { miniMapUtils } from "./utils";
 
-export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {
-}
+export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {}
 
 /**
  * Mini-map support for for React Flow v12.
@@ -35,5 +34,5 @@ export const MiniMapV12 = memo(
                 />
             </div>
         );
-    }
+    },
 );