@eccenca/gui-elements 24.4.1 → 25.0.0-bugfixcenterednodecontentmenuitemscmem7184.0

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,
@@ -154,7 +152,16 @@ InverseEdge.args = {
     ...Default.args,
     id: "inverse",
     data: {
-        inversePath: true,
+        arrowDirection: "inversed",
+    },
+};
+
+export const Bidirectional = Template.bind({});
+Bidirectional.args = {
+    ...Default.args,
+    id: "bidirectional",
+    data: {
+        arrowDirection: "bidirectional",
     },
 };
 

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,8 +1,8 @@
 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 HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/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 { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
@@ -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 {

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

@@ -8,16 +8,15 @@ import { Definitions } from "../../../../common/Intent";
 import {
     Button,
     HandleDefault,
-    HandleProps,
+    HandleDefaultProps,
     HandleTools,
     Menu,
     MenuItem,
-    ReactFlow,
+    ReactFlowExtended,
     SimpleDialog,
 } from "./../../../../../index";
-import { edgeTypes } from "./../../edges/edgeTypes";
 
-const HandleDefaultDataProps = (data: HandleProps["data"]) => {
+const HandleDefaultDataProps = (data: HandleDefaultProps["data"]) => {
     // this is only a mock to get it as sub element in the table
     return <>{data?.extendedTooltip}</>;
 };
@@ -66,11 +65,10 @@ const HandleDefaultExample = (args: any) => {
     return (
         <OverlaysProvider>
             <ReactFlowProvider>
-                <ReactFlow
+                <ReactFlowExtended
                     elements={elements}
                     style={{ height: "400px" }}
                     onLoad={onLoad}
-                    edgeTypes={edgeTypes}
                     defaultZoom={1}
                 />
             </ReactFlowProvider>

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

@@ -6,17 +6,19 @@ export * from "./nodes/nodeUtils";
 export * from "./handles/HandleDefault";
 export * from "./handles/HandleContent";
 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 * from "./markers/ReactFlowMarkers";
 export * from "./minimap/MiniMap";
+export * from "./minimap/MiniMapV12";
 export * from "./minimap/utils";
-export * from "./versionsupport";
-
-// deprecated exports
-export { nodeTypes } from "./nodes/nodeTypes"; // @deprecated removed in v25
-export { edgeTypes } from "./edges/edgeTypes"; // @deprecated removed in v25
+export * from "./versionsupport";

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

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

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

@@ -1,16 +1,73 @@
 import React, { FC } from "react";
 
+import { intentClassName, IntentTypes } from "../../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
 // FIXME: we need to check how these markers are used and if we can justify the namings
 import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
 
+type ReactFlowMarkerAppearance = "arrow-closed";
+
+interface ReactFlowMarkerProps extends React.SVGProps<SVGMarkerElement> {
+    /**
+     * Visual appearance of the marker.
+     */
+    appearance?: ReactFlowMarkerAppearance;
+    /**
+     * Feedback state of the marker.
+     * SVG markers are reused by paths but they cannot inherit their state color automatically.
+     */
+    intent?: IntentTypes;
+    /**
+     * If set, then the marker orientation is reversed.
+     * Can be used if a start marker should displayed similar to an end marker.
+     */
+    reverse?: boolean;
+}
+
+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" />
+        ),
+    };
+
+    return (
+        <marker
+            id={`react-flow__marker--${appearance}${intent ? `-${intent}` : ""}${reverse ? "-reverse" : ""}`}
+            className={
+                `${eccgui}-graphviz__marker` +
+                (className ? ` ${className}` : "") +
+                (intent ? ` ${intentClassName(intent)}` : "")
+            }
+            markerWidth="12.5"
+            markerHeight="12.5"
+            viewBox="-10 -10 20 20"
+            refX="0"
+            refY="0"
+            orient={reverse ? "auto-start-reverse" : "auto"}
+        >
+            {markerDisplay[appearance]}
+        </marker>
+    );
+};
+
 const ReactFlowMarkers: FC = () => {
+    const intents = ["none", "primary", "accent", "success", "warning", "danger", "info" ] as IntentTypes[];
+
     return (
         <svg>
             <defs>
                 <MarkerArrowClosedInverse />
+                {intents.map((intent) => (
+                    <>
+                        <ReactFlowMarker appearance="arrow-closed" intent={intent} />
+                        <ReactFlowMarker appearance="arrow-closed" intent={intent} reverse />
+                    </>
+                ))}
             </defs>
         </svg>
     );
 };
 
-export { MarkerArrowClosedInverse, ReactFlowMarkers };
+export { MarkerArrowClosedInverse, ReactFlowMarkers, ReactFlowMarker };

package/src/extensions/react-flow/markers/_markers.scss

@@ -0,0 +1,31 @@
+marker[id|="react-flow__marker"] {
+    color: var(--marker-intent-color);
+
+    &.#{$eccgui}-intent--none {
+        --marker-intent-color: #{$reactflow-edge-stroke-color-default};
+    }
+
+    &.#{$eccgui}-intent--primary {
+        --marker-intent-color: #{$eccgui-color-primary};
+    }
+
+    &.#{$eccgui}-intent--accent {
+        --marker-intent-color: #{$eccgui-color-accent};
+    }
+
+    &.#{$eccgui}-intent--info {
+        --marker-intent-color: #{$eccgui-color-info-text};
+    }
+
+    &.#{$eccgui}-intent--success {
+        --marker-intent-color: #{$eccgui-color-success-text};
+    }
+
+    &.#{$eccgui}-intent--warning {
+        --marker-intent-color: #{$eccgui-color-warning-text};
+    }
+
+    &.#{$eccgui}-intent--danger {
+        --marker-intent-color: #{$eccgui-color-danger-text};
+    }
+}

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

@@ -1,32 +1,26 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
-import { Background, BackgroundVariant, Elements, FlowElement } from "react-flow-renderer";
-import { OverlaysProvider } from "@blueprintjs/core";
+import { Background, BackgroundVariant, Elements } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Default as ReactFlowExample } from "../../../cmem/react-flow/ReactFlow/ReactFlow.stories";
 
-import { MiniMap as MiniMapElement, MiniMapProps, ReactFlow, ReactFlowProps } from "./../../../../index";
+import { ApplicationContainer, MiniMap, MiniMapProps, ReactFlowExtended } from "./../../../index";
 
 export default {
     title: "Extensions/React Flow/MiniMap",
-    component: MiniMapElement,
+    component: MiniMap,
     argTypes: {},
-} as Meta<typeof MiniMapElement>;
+} as Meta<typeof MiniMap>;
 
 const MiniMapExample: FC<MiniMapProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(undefined);
     const [elements, setElements] = useState([] as Elements);
-    const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
     const nodeExamples = ReactFlowExample.nodeExamples.workflow;
 
     useEffect(() => {
-        setElements(nodeExamples as Elements);
+        setElements([...nodeExamples.nodes, ...nodeExamples.edges] as Elements);
     }, [args]);
 
-    // Helper methods for nodes and edges
-    const isNode = (element: FlowElement & { source?: string }): boolean => !element.source;
-    const isEdge = (element: FlowElement & { source?: string }): boolean => !isNode(element);
-
     const onLoad = useCallback((rfi) => {
         if (!reactflowInstance) {
             setReactflowInstance(rfi);
@@ -34,23 +28,23 @@ const MiniMapExample: FC<MiniMapProps> = (args) => {
     }, []);
 
     return (
-        <OverlaysProvider>
-            <ReactFlow
+        <ApplicationContainer style={{ background: "white" }}>
+            <ReactFlowExtended
                 configuration={"workflow"}
                 elements={elements}
                 style={{ height: "400px" }}
                 onLoad={onLoad}
                 defaultZoom={1}
             >
-                <MiniMapElement flowInstance={reactflowInstance} {...args} />
+                <MiniMap flowInstance={reactflowInstance} {...args} />
                 <Background variant={BackgroundVariant.Lines} gap={16} />
-            </ReactFlow>
-            {edgeTools}
-        </OverlaysProvider>
+            </ReactFlowExtended>
+        </ApplicationContainer>
     );
 };
 
-const Template: StoryFn<typeof MiniMapExample> = (args) => <MiniMapExample {...args} />;
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
+const Template: StoryFn<MiniMapProps> = (args) => <MiniMapExample {...args} key={++forcedUpdateKey} />;
 
 export const Default = Template.bind({});
 Default.args = {

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

@@ -1,14 +1,17 @@
 import React, { memo, useEffect } from "react";
-import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps, OnLoadParams } from "react-flow-renderer";
+import {
+    MiniMap as ReactFlowMiniMapV9,
+    MiniMapProps as ReactFlowMiniMapV9Props,
+    OnLoadParams
+} from "react-flow-renderer";
 import { FlowTransform } from "react-flow-renderer/dist/types";
 
-import { miniMapUtils } from "../minimap/utils";
+import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
 
-export interface MiniMapProps extends ReactFlowMiniMapProps {
-    /**
-     * React-Flow instance
-     */
-    flowInstance?: OnLoadParams;
+import { MiniMapV12, MiniMapV12Props } from "./MiniMapV12";
+import { miniMapUtils } from "./utils";
+
+export interface MiniMapBasicProps {
     /**
      * Enable navigating the react-flow canvas by dragging and clicking on the mini-map.
      */
@@ -23,6 +26,15 @@ export interface MiniMapProps extends ReactFlowMiniMapProps {
     >;
 }
 
+export interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Props {
+    /**
+     * React-Flow instance
+     */
+    flowInstance?: OnLoadParams;
+}
+
+export type MiniMapProps = (ReacFlowVersionSupportProps & MiniMapV9Props) | (ReacFlowVersionSupportProps & MiniMapV12Props);
+
 interface configParams {
     // Key has been pressed down over the mini-map and navigation mode has thus started
     navigationOn: boolean;
@@ -40,6 +52,28 @@ 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
+        }
+    }
+);
+
+/**
+ * Mini-map support for for React Flow v9.
+ * @deprecated (v26) will be removed, use when `MiniMap` directly
+ */
+export const MiniMapV9 = memo(
     ({
         flowInstance,
         enableNavigation = false,
@@ -49,7 +83,7 @@ export const MiniMap = memo(
         nodeStrokeColor = miniMapUtils.borderColor,
         wrapperProps,
         ...minimapProps
-    }: MiniMapProps) => {
+    }: MiniMapV9Props) => {
         const minimapWrapper = React.useRef<HTMLDivElement | null>(null);
 
         useEffect(() => {
@@ -130,7 +164,7 @@ export const MiniMap = memo(
                         : wrapperProps?.style
                 }
             >
-                <ReactFlowMiniMap
+                <ReactFlowMiniMapV9
                     maskColor={maskColor}
                     nodeClassName={nodeClassName}
                     nodeColor={nodeColor}
@@ -141,3 +175,5 @@ export const MiniMap = memo(
         );
     }
 );
+
+export default MiniMap;