chore(react): use connection state generics internally

examples/react/src/examples/Figma/index.tsx

@@ -3,19 +3,7 @@ import { ReactFlow, Background, BackgroundVariant, Node, Edge, SelectionMode, Co
 const MULTI_SELECT_KEY = ['Meta', 'Shift'];
 
 const initialNodes: Node[] = [
-  {
-    id: '1',
-    type: 'input',
-    data: {
-      label: (
-        <>
-          <input defaultValue="hallo"></input>
-        </>
-      ),
-    },
-    position: { x: 250, y: 5 },
-    className: 'light',
-  },
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
   { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },

packages/react/src/types/store.ts

@@ -78,7 +78,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
   userSelectionActive: boolean;
   userSelectionRect: SelectionRect | null;
 
-  connection: ConnectionState;
+  connection: ConnectionState<InternalNode<NodeType>>;
   connectionMode: ConnectionMode;
   connectionClickStartHandle: (Pick<Handle, 'nodeId' | 'id'> & Required<Pick<Handle, 'type'>>) | null;
 
@@ -163,7 +163,7 @@ export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
   setTranslateExtent: (translateExtent: CoordinateExtent) => void;
   setNodeExtent: (nodeExtent: CoordinateExtent) => void;
   cancelConnection: () => void;
-  updateConnection: UpdateConnection;
+  updateConnection: UpdateConnection<InternalNode<NodeType>>;
   reset: () => void;
   triggerNodeChanges: (changes: NodeChange<NodeType>[]) => void;
   triggerEdgeChanges: (changes: EdgeChange<EdgeType>[]) => void;

packages/system/src/types/general.ts

@@ -173,7 +173,9 @@ export type ConnectionState<NodeType extends InternalNodeBase = InternalNodeBase
   | ConnectionInProgress<NodeType>
   | NoConnection;
 
-export type UpdateConnection = (params: ConnectionState) => void;
+export type UpdateConnection<NodeType extends InternalNodeBase = InternalNodeBase> = (
+  params: ConnectionState<NodeType>
+) => void;
 
 export type ColorModeClass = 'light' | 'dark';
 export type ColorMode = ColorModeClass | 'system';