fix: typesafety of Node and Edge changes

On some functions and type definitions related to Change Events,
the generics for the types Node and Edge were being lost.

This commit fixes those:
  - Functions
    - applyNodeChanges
    - applyEdgeChanges
  - Types
    - NodeChange
    - EdgeChange
    - OnNodesChange
    - OnEdgesChange

packages/react/src/types/changes.ts

@@ -44,13 +44,13 @@ export type NodeReplaceChange<NodeType extends Node = Node> = {
  * Union type of all possible node changes.
  * @public
  */
-export type NodeChange =
+export type NodeChange<NodeType extends Node = Node> =
   | NodeDimensionChange
   | NodePositionChange
   | NodeSelectionChange
   | NodeRemoveChange
-  | NodeAddChange
-  | NodeReplaceChange;
+  | NodeAddChange<NodeType>
+  | NodeReplaceChange<NodeType>;
 
 export type EdgeSelectionChange = NodeSelectionChange;
 export type EdgeRemoveChange = NodeRemoveChange;
@@ -64,4 +64,9 @@ export type EdgeReplaceChange<EdgeType extends Edge = Edge> = {
   item: EdgeType;
   type: 'replace';
 };
-export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeReplaceChange;
+
+export type EdgeChange<EdgeType extends Edge = Edge> =
+  | EdgeSelectionChange
+  | EdgeRemoveChange
+  | EdgeAddChange<EdgeType>
+  | EdgeReplaceChange<EdgeType>;

packages/react/src/types/general.ts

@@ -16,8 +16,8 @@ import {
 import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps } from '.';
 import { ComponentType } from 'react';
 
-export type OnNodesChange = (changes: NodeChange[]) => void;
-export type OnEdgesChange = (changes: EdgeChange[]) => void;
+export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<NodeType>[]) => void;
+export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
 
 export type OnNodesDelete = (nodes: Node[]) => void;
 export type OnEdgesDelete = (edges: Edge[]) => void;

packages/react/src/utils/changes.ts

@@ -188,7 +188,10 @@ function applyChange(change: any, element: any, elements: any[] = []): any {
       <ReactFLow nodes={nodes} edges={edges} onNodesChange={onNodesChange} />
     );
  */
-export function applyNodeChanges<NodeType extends Node = Node>(changes: NodeChange[], nodes: NodeType[]): NodeType[] {
+export function applyNodeChanges<NodeType extends Node = Node>(
+  changes: NodeChange<NodeType>[],
+  nodes: NodeType[]
+): NodeType[] {
   return applyChanges(changes, nodes) as NodeType[];
 }
 
@@ -212,7 +215,10 @@ export function applyNodeChanges<NodeType extends Node = Node>(changes: NodeChan
       <ReactFlow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
     );
  */
-export function applyEdgeChanges<EdgeType extends Edge = Edge>(changes: EdgeChange[], edges: EdgeType[]): EdgeType[] {
+export function applyEdgeChanges<EdgeType extends Edge = Edge>(
+  changes: EdgeChange<EdgeType>[],
+  edges: EdgeType[]
+): EdgeType[] {
   return applyChanges(changes, edges) as EdgeType[];
 }