refactor(lib): use react 18

src/container/ReactFlow/Wrapper.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 
 import { Provider, createStore, useStoreApi } from '../../store';
 
-const Wrapper: FC = ({ children }) => {
+const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
   let isWrapped = true;
 
   try {

src/container/ReactFlow/index.tsx

@@ -13,7 +13,9 @@ import {
   ConnectionLineType,
   ConnectionMode,
   EdgeTypes,
+  EdgeTypesWrapped,
   NodeTypes,
+  NodeTypesWrapped,
   PanOnScrollMode,
   ReactFlowProps,
   ReactFlowRefType,
@@ -21,7 +23,7 @@ import {
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import GraphView from '../GraphView';
 import { createNodeTypes } from '../NodeRenderer/utils';
-import injectStyle, { useNodeOrEdgeTypes } from './utils';
+import { injectStyle, useNodeOrEdgeTypes } from './utils';
 import Wrapper from './Wrapper';
 
 if (__INJECT_STYLES__) {
@@ -29,13 +31,13 @@ if (__INJECT_STYLES__) {
   injectStyle(theme as unknown as string);
 }
 
-const defaultNodeTypes = {
+const defaultNodeTypes: NodeTypes = {
   input: InputNode,
   default: DefaultNode,
   output: OutputNode,
 };
 
-const defaultEdgeTypes = {
+const defaultEdgeTypes: EdgeTypes = {
   default: BezierEdge,
   straight: StraightEdge,
   step: StepEdge,
@@ -139,8 +141,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
     },
     ref
   ) => {
-    const nodeTypesParsed = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypes;
-    const edgeTypesParsed = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypes;
+    const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped;
+    const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
     const reactFlowClasses = cc(['react-flow', className]);
 
     return (
@@ -161,8 +163,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onNodeDragStart={onNodeDragStart}
             onNodeDrag={onNodeDrag}
             onNodeDragStop={onNodeDragStop}
-            nodeTypes={nodeTypesParsed}
-            edgeTypes={edgeTypesParsed}
+            nodeTypes={nodeTypesWrapped}
+            edgeTypes={edgeTypesWrapped}
             connectionLineType={connectionLineType}
             connectionLineStyle={connectionLineStyle}
             connectionLineComponent={connectionLineComponent}

src/container/ReactFlow/utils.ts

@@ -1,12 +1,12 @@
 import { useMemo, useRef } from 'react';
 import shallow from 'zustand/shallow';
 
-import { EdgeTypes, NodeTypes } from '../../types';
+import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
 import { CreateEdgeTypes } from '../EdgeRenderer/utils';
 import { CreateNodeTypes } from '../NodeRenderer/utils';
 
-export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypes;
-export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypes;
+export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
+export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any {
   const typesKeysRef = useRef<string[] | null>(null);
 
@@ -28,7 +28,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
   return typesParsed;
 }
 
-export default function injectStyle(css: string): void {
+export function injectStyle(css: string): void {
   if (!css || typeof document === 'undefined') return;
 
   const head = document.head || document.getElementsByTagName('head')[0];