remove support for react flow v10

Author: haschek

CHANGELOG.md

@@ -14,6 +14,10 @@ This is a major release, and it might be not compatible with your current usage
 -   `<CodeAutocompleteField />`:
     -    outerDivAttributes parameter: Allows to set parameter of the container div element of the code complete field.
 
+### Removed
+
+-   support for React Flow v10 was completely removed
+
 ### Fixed
 
 -   <CodeMirror />:
@@ -26,6 +30,10 @@ This is a major release, and it might be not compatible with your current usage
 -   `<Modal />`:
     -    Add 'nopan', 'nowheel' and 'nodrag' classes to Modal's overlay classes in order to always prevent react-flow to react to drag and pan actions in modals.
 
+### Deprecated
+
+-   support for React Flow v9 will be removed
+
 
 ## [24.3.0] - 2025-06-05
 

package.json

@@ -93,7 +93,6 @@
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-flow-renderer": "9.7.4",
-        "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
         "react-markdown": "^10.1.0",
         "react-markdown-deprecated": "npm:react-markdown@^8.0.7",

src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -6,16 +6,6 @@ import {
     FlowElement,
     Position,
 } from "react-flow-renderer";
-import {
-    Background as BackgroundV10,
-    BackgroundVariant as BackgroundVariantV10,
-    Edge as Edge10,
-    Node as Node10,
-    OnInit as OnInitV10,
-    ReactFlowInstance as ReactFlowInstanceV10,
-    useEdgesState as useEdgesState10,
-    useNodesState as useNodesState10,
-} from "react-flow-renderer-lts";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 import {
@@ -31,7 +21,6 @@ import {
     ApplicationContainer,
     EdgeTools,
     MiniMap,
-    MiniMapV10,
     MiniMapV12,
     NodeTools,
     ReactFlowExtended,
@@ -425,7 +414,7 @@ export default {
         },
         flowVersion: {
             control: "select",
-            options: [undefined, "v9", "v10", "v12"],
+            options: [undefined, "v9", "v12"],
         },
     },
 } as Meta<typeof ReactFlowExtended>;
@@ -490,33 +479,6 @@ const ReactFlowExampleV9: FC<ReactFlowExtendedProps> = (args) => {
     );
 };
 
-const ReactFlowExampleV10: FC<ReactFlowExtendedProps> = (args) => {
-    const [reactFlowInstance, setReactFlowInstance] = React.useState<ReactFlowInstanceV10 | undefined>(undefined);
-    const [nodes, ,] = useNodesState10(nodeExamples[args.configuration ?? "unspecified"].nodes as Node10[]);
-    const [edges, ,] = useEdgesState10(nodeExamples[args.configuration ?? "unspecified"].edges as Edge10[]);
-
-    const onInit: OnInitV10 = React.useCallback((_reactFlowInstance: ReactFlowInstanceV10) => {
-        setReactFlowInstance(_reactFlowInstance);
-    }, []);
-
-    const reactFlowExtendedProps = {
-        ...args,
-        defaultZoom: 1,
-        nodes,
-        edges,
-        onInit,
-    } as ReactFlowExtendedProps;
-
-    return (
-        <ApplicationContainer monitorDropzonesFor={args.dropzoneFor} style={{ background: "white" }}>
-            <ReactFlowExtended {...reactFlowExtendedProps}>
-                <MiniMapV10 flowInstance={reactFlowInstance} enableNavigation={true} />
-                <BackgroundV10 variant={BackgroundVariantV10.Lines} gap={16} />
-            </ReactFlowExtended>
-        </ApplicationContainer>
-    );
-};
-
 const ReactFlowExampleV12: FC<ReactFlowExtendedProps> = (args) => {
     const [nodes, ,] = useNodesState12(nodeExamples[args.configuration ?? "unspecified"].nodes as Node12[]);
     const [edges, ,] = useEdgesState12(nodeExamples[args.configuration ?? "unspecified"].edges as Edge12[]);
@@ -549,8 +511,6 @@ const ReactFlowExample: FC<ReactFlowExtendedProps> = (args) => {
         case undefined:
         case "v9":
             return <ReactFlowExampleV9 {...args} />;
-        case "v10":
-            return <ReactFlowExampleV10 {...args} />;
         case "v12":
             return <ReactFlowExampleV12 {...args} />;
         default:

src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -1,21 +1,18 @@
 import React, {ReactElement, Ref} from "react";
 import { KeyCode as KeyCodeV9 } from "react-flow-renderer";
-import { KeyCode as KeyCodeV10 } from "react-flow-renderer-lts";
 import { KeyCode as KeyCodeV12} from "@xyflow/react";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ReactFlowMarkers } from "../../../extensions/react-flow/markers/ReactFlowMarkers";
 import { ReactFlowVersions } from "../../../extensions/react-flow/versionsupport";
 import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 import { useReactFlowScrollOnDragV9 } from "../extensions/scrollOnDragHook";
-import { useReactFlowScrollOnDragV10 } from "../extensions/scrollOnDragHookV10";
 
 import * as graphConfig from "./../configuration/graph";
 import * as linkingConfig from "./../configuration/linking";
 import * as unspecifiedConfig from "./../configuration/unspecified";
 import * as workflowConfig from "./../configuration/workflow";
 import { ReactFlowV9Container, ReactFlowV9ContainerProps } from "./ReactFlowV9";
-import { ReactFlowV10Container, ReactFlowV10ContainerProps } from "./ReactFlowV10";
 import { ReactFlowV12Container, ReactFlowV12ContainerProps } from "./ReactFlowV12";
 
 export interface ReactFlowExtendedExtraProps {
@@ -55,13 +52,6 @@ interface ReactFlowExtendedVersion9SupportProps {
     flowVersion?: ReactFlowVersions.V9;
 }
 
-interface ReactFlowExtendedVersion10SupportProps {
-    /**
-     * Set version of `ReactFlow` that is used internally.
-     */
-    flowVersion: ReactFlowVersions.V10;
-}
-
 interface ReactFlowExtendedVersion12SupportProps {
     /**
      * Set version of `ReactFlow` that is used internally.
@@ -74,16 +64,15 @@ interface ReactFlowExtendedVersion12SupportProps {
 }
 
 export type ReactFlowExtendedPropsV9 = ReactFlowExtendedVersion9SupportProps & ReactFlowV9ContainerProps & ReactFlowExtendedExtraProps & ReactFlowExtendedScrollProps
-export type ReactFlowExtendedPropsV10 = ReactFlowExtendedVersion10SupportProps & ReactFlowV10ContainerProps & ReactFlowExtendedExtraProps & ReactFlowExtendedScrollProps
 export type ReactFlowExtendedPropsV12 = ReactFlowExtendedVersion12SupportProps & ReactFlowV12ContainerProps & ReactFlowExtendedExtraProps
 
-export type ReactFlowExtendedProps = ReactFlowExtendedPropsV9 | ReactFlowExtendedPropsV10 | ReactFlowExtendedPropsV12
+export type ReactFlowExtendedProps = ReactFlowExtendedPropsV9 | ReactFlowExtendedPropsV12
 
 /**
  * `ReactFlow` container extension that includes pre-configured nodes and edges for
  * Corporate Memory tools.
  *
- * @param T The concrete type of the corresponding version, i.e. either one of ReactFlowExtendedPropsV9, ReactFlowExtendedPropsV10 or ReactFlowExtendedPropsV12
+ * @param T The concrete type of the corresponding version, i.e. either one of ReactFlowExtendedPropsV9 or ReactFlowExtendedPropsV12
  */
 const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>({
             configuration = "unspecified",
@@ -157,14 +146,6 @@ const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>({
                     zoomActivationKeyCode: hotKeysDisabled ? undefined : (zoomActivationKeyCode as KeyCodeV9),
                 };
                 break;
-            case "v10":
-                keyCodeConfig = {
-                    selectionKeyCode: hotKeysDisabled ? undefined : (selectionKeyCode as KeyCodeV10),
-                    deleteKeyCode: hotKeysDisabled ? undefined : (deleteKeyCode as KeyCodeV10),
-                    multiSelectionKeyCode: hotKeysDisabled ? undefined : (multiSelectionKeyCode as KeyCodeV10),
-                    zoomActivationKeyCode: hotKeysDisabled ? undefined : (zoomActivationKeyCode as KeyCodeV10),
-                };
-                break;
             case "v12":
                 keyCodeConfig = {
                     selectionKeyCode: hotKeysDisabled ? null : (selectionKeyCode as KeyCodeV12),
@@ -183,12 +164,6 @@ const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>({
                     scrollOnDrag,
                 });
                 break;
-            case "v10":
-                scrollOnDragFunctions = useReactFlowScrollOnDragV10({
-                    reactFlowProps: originalProps as ReactFlowV10ContainerProps,
-                    scrollOnDrag,
-                });
-                break;
             // should not be necessary for v12
         }
 
@@ -207,13 +182,6 @@ const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>({
                         <ReactFlowMarkers />
                     </ReactFlowV9Container>
                 );
-            case "v10":
-                return (
-                    <ReactFlowV10Container ref={innerRef} {...(containerConfig as ReactFlowV10ContainerProps)}>
-                        {children}
-                        <ReactFlowMarkers />
-                    </ReactFlowV10Container>
-                );
             case "v12":
                 return (
                     <ReactFlowV12Container ref={innerRef} {...(containerConfig as ReactFlowV12ContainerProps)}>

src/cmem/react-flow/ReactFlow/ReactFlowV10.tsx

@@ -1,8 +1,8 @@
 import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { GRAPH_NODE_TYPES } from "./typing";
-import {ComponentType} from "react";
-import {NodeProps} from "react-flow-renderer-lts";
+//import {ComponentType} from "react";
+//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
     default: EdgeDefault,
@@ -16,7 +16,7 @@ const edgeTypes = {
     danger: EdgeDefault,
 };
 
-const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode & ComponentType<NodeProps>> = {
+const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
     default: NodeDefault,
     graph: NodeDefault,
     class: NodeDefault,

src/cmem/react-flow/configuration/graph.ts

@@ -2,8 +2,8 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { StickyNoteNode } from "./../nodes/StickyNoteNode";
 import { LINKING_NODE_TYPES } from "./typing";
-import {ComponentType} from "react";
-import {NodeProps} from "react-flow-renderer-lts";
+//import {ComponentType} from "react";
+//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -14,7 +14,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode & ComponentType<NodeProps>> = {
+const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
     default: NodeDefault,
     sourcepath: NodeDefault,
     targetpath: NodeDefault,

src/cmem/react-flow/configuration/linking.ts

@@ -2,8 +2,8 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { StickyNoteNode } from "./../nodes/StickyNoteNode";
 import { WORKFLOW_NODE_TYPES } from "./typing";
-import {ComponentType} from "react";
-import {NodeProps} from "react-flow-renderer-lts";
+//import {ComponentType} from "react";
+//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -12,7 +12,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode & ComponentType<NodeProps>> = {
+const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
     default: NodeDefault,
     dataset: NodeDefault,
     linking: NodeDefault,