bump react flow to v12

package.json

@@ -81,6 +81,7 @@
         "@codemirror/lang-yaml": "^6.1.2",
         "@codemirror/legacy-modes": "^6.5.0",
         "@mavrin/remark-typograf": "^2.2.0",
+        "@xyflow/react": "^12.6.0",
         "classnames": "^2.5.1",
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
@@ -176,7 +177,9 @@
     },
     "resolutions": {
         "**/@types/react": "^17.0.85",
-        "node-sass-package-importer/**/postcss": "^8.4.49"
+        "node-sass-package-importer/**/postcss": "^8.4.49",
+        "string-width": "^4.2.3",
+        "wrap-ansi": "^7.0.0"
     },
     "husky": {
         "hooks": {

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

@@ -0,0 +1,146 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { Node, Edge, ReactFlow } from "@xyflow/react";
+import { ArrowHeadType, getMarkerEnd } from "react-flow-renderer";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { EdgeLabel, EdgeLabelObject } from "./../../../../../index";
+import { EdgeDefault as ActualEdge, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
+import { NodeDefaultV12 } from "../../nodes/NodeDefaultV12";
+
+/**
+ * this is only a mock to get it as sub element in the table
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const EdgeDefaultDataProps = (data: EdgeData) => {
+    return <></>;
+};
+
+const edgeTypes = {
+    default: ActualEdge,
+};
+const nodeTypes = {
+    default: NodeDefaultV12,
+};
+export default {
+    title: "Extensions/React Flow V12/Edge",
+    component: ActualEdge,
+    subcomponents: { EdgeDefaultDataProps },
+} as Meta<typeof ActualEdge>;
+
+const EdgeDefault = (args: Edge) => {
+    const [reactflowInstance, setReactflowInstance] = useState(null);
+
+    const [nodes, edges] = useMemo<[Node[], Edge[]]>(() => {
+        return [
+            [
+                {
+                    id: args.source,
+                    type: "default",
+                    data: {
+                        label: "Default ",
+                        content: "Example content.",
+                        minimalShape: "none",
+                    },
+                    position: { x: 50, y: 0 },
+                },
+                {
+                    id: args.target,
+                    type: "default",
+                    data: {
+                        label: "Default ",
+                        content: "Example content.",
+                        minimalShape: "none",
+                    },
+                    position: { x: 300, y: 0 },
+                },
+            ] as Node[],
+            [args],
+        ];
+    }, [args]);
+
+    const onLoad = useCallback(
+        (rfi) => {
+            if (!reactflowInstance) {
+                setReactflowInstance(rfi);
+            }
+        },
+        [reactflowInstance]
+    );
+
+    return (
+        <div style={{ width: "1000px", height: "800px" }}>
+            <ReactFlow
+                defaultNodes={nodes}
+                defaultEdges={edges}
+                onLoad={onLoad}
+                edgeTypes={edgeTypes}
+                nodeTypes={nodeTypes}
+            />
+        </div>
+    );
+};
+
+const Template: StoryFn<typeof EdgeDefault> = (args) => <EdgeDefault {...args} />;
+
+const defaultEdge: Edge = {
+    id: "default",
+    label: "edge",
+    source: "node-1",
+    target: "node-2",
+    data: {
+        edgeSvgProps: {
+            className: "storybook__test__classname",
+        },
+    },
+};
+
+export const Default = Template.bind({});
+Default.args = defaultEdge;
+
+export const CustomLabel = Template.bind({});
+CustomLabel.args = {
+    ...Default.args,
+    id: "customlabel",
+    label: undefined,
+    data: {
+        renderLabel: (edgeCenter: [number, number, number, number]) => (
+            <EdgeLabelObject edgeCenter={edgeCenter}>
+                <EdgeLabel text="Custom label that is very long" />
+            </EdgeLabelObject>
+        ),
+    },
+};
+
+export const InverseEdge = Template.bind({});
+InverseEdge.args = {
+    ...Default.args,
+    id: "inverse",
+    data: {
+        inversePath: true,
+        markerStart: getMarkerEnd(`${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType),
+    },
+};
+
+export const AdjustStrokeType = Template.bind({});
+AdjustStrokeType.args = {
+    ...Default.args,
+    data: {
+        strokeType: "double",
+    },
+};
+
+export const AdjustIntent = Template.bind({});
+AdjustIntent.args = {
+    ...Default.args,
+    data: {
+        intent: "warning",
+    },
+};
+
+export const AdjustHighlight = Template.bind({});
+AdjustHighlight.args = {
+    ...Default.args,
+    data: {
+        highlightColor: ["default", "alternate"],
+    },
+};

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

@@ -1,6 +1,7 @@
 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 { Classes as BlueprintClasses } from "@blueprintjs/core";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
@@ -36,8 +37,8 @@ interface HandleExtensionProps
 
 export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {}
 export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {}
-
-export type HandleDefaultProps = HandleProps | HandleNextProps;
+export interface HandleV12Props extends HandleExtensionProps, ReactFlowHandleV12Props {}
+export type HandleDefaultProps = HandleProps | HandleNextProps | HandleV12Props;
 
 export const HandleDefault = memo(
     ({ flowVersion, data, tooltip, children, category, intent, ...handleProps }: HandleDefaultProps) => {
@@ -126,16 +127,23 @@ export const HandleDefault = memo(
         switch (flowVersionCheck) {
             case "legacy":
                 return (
-                    <HandleLegacy ref={handleDefaultRef} {...handleConfig}>
+                    <HandleLegacy ref={handleDefaultRef} {...(handleConfig as HandleProps)}>
                         {handleContent}
                     </HandleLegacy>
                 );
             case "next":
                 return (
-                    <HandleNext ref={handleDefaultRef} {...handleConfig}>
+                    <HandleNext ref={handleDefaultRef} {...(handleConfig as HandleNextProps)}>
                         {handleContent}
                     </HandleNext>
                 );
+            case "v12":
+                return (
+                    <HandleV12 ref={handleDefaultRef} {...(handleConfig as HandleV12Props)}>
+                        {handleContent}
+                    </HandleV12>
+                );
+
             default:
                 return <></>;
         }