From b41b111af60ea0dfc3a6ef7f1a190b8dcf1f1ef4 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 10 Jul 2024 12:04:23 +0200
Subject: [PATCH] chore(react): use connection state generics internally

---
 examples/react/src/examples/Figma/index.tsx | 14 +-------------
 packages/react/src/types/store.ts           |  4 ++--
 packages/system/src/types/general.ts        |  4 +++-
 3 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/examples/react/src/examples/Figma/index.tsx b/examples/react/src/examples/Figma/index.tsx
index f51219df..6780b6cb 100644
--- a/examples/react/src/examples/Figma/index.tsx
+++ b/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' },
diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts
index 66bf3c44..8ddd2ff8 100644
--- a/packages/react/src/types/store.ts
+++ b/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;
diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts
index becbe4af..1af0b930 100644
--- a/packages/system/src/types/general.ts
+++ b/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';