chore(react): use OnReconnet from system

packages/react/src/index.ts

@@ -107,6 +107,7 @@ export {
   type ConnectionInProgress,
   type NoConnection,
   type NodeConnection,
+  type OnReconnect,
 } from '@xyflow/system';
 
 // we need this workaround to prevent a duplicate identifier error

packages/react/src/types/component-props.ts

@@ -20,6 +20,7 @@ import type {
   OnError,
   ColorMode,
   SnapGrid,
+  OnReconnect,
 } from '@xyflow/system';
 
 import type {
@@ -29,7 +30,6 @@ import type {
   Node,
   Edge,
   ConnectionLineComponent,
-  OnReconnect,
   OnInit,
   DefaultEdgeOptions,
   FitViewOptions,

packages/react/src/types/edges.ts

@@ -8,12 +8,12 @@ import type {
   SmoothStepPathOptions,
   DefaultEdgeOptionsBase,
   HandleType,
-  Connection,
   ConnectionLineType,
   Handle,
   EdgePosition,
   StepPathOptions,
   OnError,
+  OnReconnect,
   FinalConnectionState,
 } from '@xyflow/system';
 
@@ -233,8 +233,6 @@ export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'tar
  */
 export type SimpleBezierEdgeProps = EdgeComponentProps;
 
-export type OnReconnect<EdgeType extends Edge = Edge> = (oldEdge: EdgeType, newConnection: Connection) => void;
-
 /**
  * If you want to render a custom component for connection lines, you can set the
  * `connectionLineComponent` prop on the [`<ReactFlow />`](/api-reference/react-flow#connection-connectionLineComponent)

packages/system/src/types/general.ts

@@ -81,7 +81,7 @@ export type OnConnect = (connection: Connection) => void;
 export type OnConnectEnd = (event: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => void;
 
 export type OnReconnect<EdgeType extends EdgeBase = EdgeBase> = (oldEdge: EdgeType, newConnection: Connection) => void;
-export type OnRecoonnectStart<EdgeType extends EdgeBase = EdgeBase> = (
+export type OnReconnectStart<EdgeType extends EdgeBase = EdgeBase> = (
   event: MouseEvent | TouchEvent,
   edge: EdgeType,
   handleType: HandleType