refactor(keys): accept null as key #1463

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 />

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",

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"
   },

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;
+  selectionKeyCode: KeyCode | null;
-  deleteKeyCode: KeyCode;
+  deleteKeyCode: KeyCode | null;
-  multiSelectionKeyCode: KeyCode;
+  multiSelectionKeyCode: KeyCode | null;
   connectionLineType: ConnectionLineType;
   onlyRenderVisibleElements: boolean;
   defaultZoom: number;

src/hooks/useGlobalKeyHandler.ts

@@ -7,8 +7,8 @@ import { getConnectedEdges } from '../utils/graph';
 import { EdgeChange, KeyCode, NodeChange, ReactFlowState } from '../types';
 
 interface HookParams {
-  deleteKeyCode: KeyCode;
+  deleteKeyCode: KeyCode | null;
-  multiSelectionKeyCode: KeyCode;
+  multiSelectionKeyCode: KeyCode | null;
 }
 
 const selector = (s: ReactFlowState) => ({

src/types/component-props.ts

@@ -74,9 +74,9 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   connectionLineType?: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
   connectionLineComponent?: ConnectionLineComponent;
-  deleteKeyCode?: KeyCode;
+  deleteKeyCode?: KeyCode | null;
-  selectionKeyCode?: KeyCode;
+  selectionKeyCode?: KeyCode | null;
-  multiSelectionKeyCode?: KeyCode;
+  multiSelectionKeyCode?: KeyCode | null;
   zoomActivationKeyCode?: KeyCode;
   snapToGrid?: boolean;
   snapGrid?: [number, number];