refactor(lib): use react 18

src/types/edges.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import React, { CSSProperties, ComponentType, HTMLAttributes, ReactNode } from 'react';
 import { Connection } from './general';
 import { HandleElement, HandleType } from './handles';
 import { Node } from './nodes';
@@ -101,8 +101,8 @@ export interface WrapEdgeProps<T = any> {
   style?: CSSProperties;
   source: string;
   target: string;
-  sourceHandleId: string | null;
-  targetHandleId: string | null;
+  sourceHandleId?: string | null;
+  targetHandleId?: string | null;
   sourceX: number;
   sourceY: number;
   targetX: number;
@@ -111,7 +111,7 @@ export interface WrapEdgeProps<T = any> {
   targetPosition: Position;
   elementsSelectable?: boolean;
   hidden?: boolean;
-  onEdgeUpdate: OnEdgeUpdateFunc;
+  onEdgeUpdate?: OnEdgeUpdateFunc;
   onContextMenu?: EdgeMouseHandler;
   onMouseEnter?: EdgeMouseHandler;
   onMouseMove?: EdgeMouseHandler;
@@ -162,7 +162,7 @@ export type ConnectionLineComponentProps = {
   sourceHandle?: HandleElement;
 };
 
-export type ConnectionLineComponent = React.ComponentType<ConnectionLineComponentProps>;
+export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps>;
 
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
 

src/types/general.ts

@@ -1,16 +1,18 @@
-import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
 
 import { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
 import { NodeChange, EdgeChange } from './changes';
-import { Node, NodeInternals, NodeDimensionUpdate, NodeDiffUpdate } from './nodes';
-import { Edge } from './edges';
+import { Node, NodeInternals, NodeDimensionUpdate, NodeDiffUpdate, NodeProps, WrapNodeProps } from './nodes';
+import { Edge, EdgeProps, WrapEdgeProps } from './edges';
 import { HandleType, StartHandle } from './handles';
 import { DefaultEdgeOptions } from '.';
 import { ReactFlowInstance } from './instance';
 
-export type NodeTypes = { [key: string]: ReactNode };
-export type EdgeTypes = NodeTypes;
+export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
+export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>> };
+export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
+export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>> };
 
 export type FitView = (fitViewOptions?: FitViewOptions) => void;