@eccenca/gui-elements 25.2.0 → 26.0.0-rc.0

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

@@ -47,18 +47,18 @@ export interface EdgeDefaultDataProps {
 }
 
 /**
- * @deprecated (v26) v9 support is removed after v25
+ * @deprecated (v27) v9 support is removed after v26
  */
 export interface EdgeDefaultV9DataProps extends EdgeDefaultDataProps {
     /**
      * Reference link to the SVG marker used for the start of the edge
-     * @deprecated (v26) only necessary for react flow v9
+     * @deprecated (v27) only necessary for react flow v9
      */
     markerStart?: string;
 }
 
 /**
- * @deprecated (v26) v9 support is removed after v25
+ * @deprecated (v27) v9 support is removed after v26
  */
 export interface EdgeDefaultV9Props extends ReactFlowEdgeProps {
     /**
@@ -73,6 +73,9 @@ export interface EdgeDefaultV9Props extends ReactFlowEdgeProps {
 
 export type EdgeDefaultProps = EdgeDefaultV9Props | EdgeDefaultV12Props;
 
+/**
+ * @deprecated (v27) will be removed v9 support is dropped
+ */
 const EdgeDefaultV9 = memo(
     ({ data = {}, drawSvgPath = drawEdgeStraight, ...edgeOriginalProperties }: EdgeDefaultV9Props) => {
         const { pathGlowWidth = 10, markerStart, strokeType, intent, highlightColor, edgeSvgProps } = data;
@@ -104,7 +107,7 @@ const EdgeDefaultV9 = memo(
         const edgeStyle = edgeOriginalProperties.style ?? {};
         const { highlightCustomPropertySettings } = nodeContentUtils.evaluateHighlightColors(
             "--edge-highlight",
-            highlightColor
+            highlightColor,
         );
 
         return (
@@ -113,7 +116,7 @@ const EdgeDefaultV9 = memo(
                 className={createEdgeDefaultClassName(
                     { intent },
                     `${edgeSvgProps?.className ?? ""}`,
-                    ReactFlowVersions.V9
+                    ReactFlowVersions.V9,
                 )}
                 style={{
                     ...edgeSvgProps?.style,
@@ -147,7 +150,7 @@ const EdgeDefaultV9 = memo(
                 {edgeLabel}
             </g>
         );
-    }
+    },
 );
 
 /**
@@ -169,7 +172,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

@@ -8,7 +8,7 @@ import { EdgeDefaultDataProps, edgeDefaultUtils } from "./EdgeDefault";
 import { getStraightPath } from "./utils";
 
 /**
- * @deprecated (v26) use EdgeDefaultDataProps
+ * @deprecated (v27) use EdgeDefaultDataProps
  */
 export interface EdgeDefaultV12DataProps extends Record<string, unknown>, EdgeDefaultDataProps {
     /**
@@ -18,21 +18,19 @@ export interface EdgeDefaultV12DataProps extends Record<string, unknown>, EdgeDe
 }
 
 /**
- * @deprecated (v26) use EdgeDefaultProps
+ * @deprecated (v27) use EdgeDefaultProps
  */
 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];
 };
 
 /**
- * This element cannot be used directly, it must be connected via a `edgeTypes` definition.
- * @see https://reactflow.dev/docs/api/nodes/
- * @deprecated (v26) will be removed when `EdgeDefault` supports v12 directly
+ * @deprecated (v27) will be removed v9 support is dropped
  */
 export const EdgeDefaultV12 = memo(
     ({
@@ -75,7 +73,7 @@ export const EdgeDefaultV12 = memo(
         const edgeStyle = edgeOriginalProperties.style ?? {};
         const { highlightCustomPropertySettings } = nodeContentUtils.evaluateHighlightColors(
             "--edge-highlight",
-            highlightColor
+            highlightColor,
         );
 
         const renderedLabel =
@@ -115,7 +113,7 @@ export const EdgeDefaultV12 = memo(
                 className={edgeDefaultUtils.createEdgeDefaultClassName(
                     { intent },
                     `${edgeSvgProps?.className ?? ""}`,
-                    ReactFlowVersions.V12
+                    ReactFlowVersions.V12,
                 )}
                 tabIndex={0}
                 role="button"
@@ -128,7 +126,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 +149,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/EdgeStep.tsx

@@ -15,13 +15,13 @@ interface EdgeStepDataV12Props extends EdgeDefaultV12DataProps {
 }
 
 /**
- * @deprecated (v26) v9 support is removed after v25
+ * @deprecated (v27) v9 support is removed after v26
  */
 export interface EdgeStepV9Props extends EdgeDefaultV9Props {
     data?: EdgeStepDataV9Props;
 }
 /**
- * @deprecated (v26) v9 support is removed after v25
+ * @deprecated (v27) v9 support is removed after v26
  */
 export interface EdgeStepV12Props extends Omit<EdgeDefaultV12Props, "data">, EdgeProps<Edge<EdgeStepDataV12Props>> {}
 

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.
      */
@@ -36,11 +35,11 @@ interface HandleExtensionProps
 }
 
 /**
- * @deprecated (v26) use only `HandleDefaultProps`
+ * @deprecated (v27) use only `HandleDefaultProps`
  */
 export interface HandleV9Props extends HandleExtensionProps, ReactFlowHandleV9Props {}
 /**
- * @deprecated (v26) use only `HandleDefaultProps`
+ * @deprecated (v27) use only `HandleDefaultProps`
  */
 export interface HandleV12Props extends HandleExtensionProps, ReactFlowHandleV12Props {}
 
@@ -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

@@ -9,16 +9,13 @@ export * from "./handles/HandleTools";
 export * from "./edges/EdgeBezier";
 export * from "./edges/EdgeDefault";
 export * from "./edges/EdgeDefaultV12";
-export * from "./edges/EdgeDefs";
 export * from "./edges/EdgeStep";
 export * from "./edges/EdgeStraight";
 export * from "./edges/EdgeNew";
 export * from "./edges/EdgeTools";
 export * from "./edges/EdgeLabel";
-export * from "./edges/EdgeDefs";
-export * from "./edges/EdgeDefaultV12";
+export type { EdgeDefaultV12DataProps, EdgeDefaultV12Props } from "./edges/EdgeDefaultV12";
 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/MarkerArrowClosedInverse.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 
 /**
- * @deprecated (v26) only necessary for react flow v9, support will be removed
+ * @deprecated (v27) only necessary for react flow v9, support will be removed
  */
 export const MarkerArrowClosedInverse: FC = () => {
     return (

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

@@ -28,7 +28,7 @@ interface ReactFlowMarkerProps extends React.SVGProps<SVGMarkerElement> {
 const ReactFlowMarker = ({ className, appearance = "arrow-closed", intent, reverse }: ReactFlowMarkerProps) => {
     const markerDisplay: Record<ReactFlowMarkerAppearance, unknown> = {
         "arrow-closed": (
-            <path d="M-5,-4 L5,0 L-5,4 Z" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M-5,-4 L5,0 L-5,4 Z" fill="currentColor" strokeLinecap="round" strokeLinejoin="round" />
         ),
     };
 
@@ -47,23 +47,23 @@ 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>
             <defs>
                 <MarkerArrowClosedInverse />
-                {intents.map((intent) => (
-                    <>
+                {intents.map((intent, index) => (
+                    <React.Fragment key={index}>
                         <ReactFlowMarker appearance="arrow-closed" intent={intent} />
                         <ReactFlowMarker appearance="arrow-closed" intent={intent} reverse />
-                    </>
+                    </React.Fragment>
                 ))}
             </defs>
         </svg>