From fe5337d1b83b7ea6ab1bb7893cf92996739ee27f Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 22 Feb 2022 21:23:22 +0100
Subject: [PATCH] refactor(keys): accept null as key #1463

---
 example/src/Overview/index.tsx    | 1 +
 package-lock.json                 | 4 ++--
 package.json                      | 2 +-
 src/container/GraphView/index.tsx | 6 +++---
 src/hooks/useGlobalKeyHandler.ts  | 4 ++--
 src/types/component-props.ts      | 6 +++---
 6 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/example/src/Overview/index.tsx b/example/src/Overview/index.tsx
index 795c75b0..3723e075 100644
--- a/example/src/Overview/index.tsx
+++ b/example/src/Overview/index.tsx
@@ -200,6 +200,7 @@ const OverviewFlow = () => {
       maxZoom={Infinity}
       onNodesDelete={onNodesDelete}
       onEdgesDelete={onEdgesDelete}
+      deleteKeyCode={null}
     >
       <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
       <Controls />
diff --git a/package-lock.json b/package-lock.json
index f03378e1..b252acf8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-flow-renderer",
-  "version": "10.0.0-next.42",
+  "version": "10.0.0-next.43",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-flow-renderer",
-      "version": "10.0.0-next.42",
+      "version": "10.0.0-next.43",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.16.7",
diff --git a/package.json b/package.json
index 51f2d283..44be5db6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-flow-renderer",
-  "version": "10.0.0-next.42",
+  "version": "10.0.0-next.43",
   "engines": {
     "node": ">=12"
   },
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 79c69e62..8d3c2107 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -10,9 +10,9 @@ import { NodeTypes, EdgeTypes, ConnectionLineType, KeyCode, ReactFlowProps } fro
 export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges'> {
   nodeTypes: NodeTypes;
   edgeTypes: EdgeTypes;
-  selectionKeyCode: KeyCode;
-  deleteKeyCode: KeyCode;
-  multiSelectionKeyCode: KeyCode;
+  selectionKeyCode: KeyCode | null;
+  deleteKeyCode: KeyCode | null;
+  multiSelectionKeyCode: KeyCode | null;
   connectionLineType: ConnectionLineType;
   onlyRenderVisibleElements: boolean;
   defaultZoom: number;
diff --git a/src/hooks/useGlobalKeyHandler.ts b/src/hooks/useGlobalKeyHandler.ts
index 3b979a86..1dff6db1 100644
--- a/src/hooks/useGlobalKeyHandler.ts
+++ b/src/hooks/useGlobalKeyHandler.ts
@@ -7,8 +7,8 @@ import { getConnectedEdges } from '../utils/graph';
 import { EdgeChange, KeyCode, NodeChange, ReactFlowState } from '../types';
 
 interface HookParams {
-  deleteKeyCode: KeyCode;
-  multiSelectionKeyCode: KeyCode;
+  deleteKeyCode: KeyCode | null;
+  multiSelectionKeyCode: KeyCode | null;
 }
 
 const selector = (s: ReactFlowState) => ({
diff --git a/src/types/component-props.ts b/src/types/component-props.ts
index f2e658bb..fa915184 100644
--- a/src/types/component-props.ts
+++ b/src/types/component-props.ts
@@ -74,9 +74,9 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   connectionLineType?: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
   connectionLineComponent?: ConnectionLineComponent;
-  deleteKeyCode?: KeyCode;
-  selectionKeyCode?: KeyCode;
-  multiSelectionKeyCode?: KeyCode;
+  deleteKeyCode?: KeyCode | null;
+  selectionKeyCode?: KeyCode | null;
+  multiSelectionKeyCode?: KeyCode | null;
   zoomActivationKeyCode?: KeyCode;
   snapToGrid?: boolean;
   snapGrid?: [number, number];