feat(selection): disable pane movement when selection is dragged

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "react-flow-renderer",
-  "version": "10.0.0-next.14",
+  "version": "10.0.0-next.17",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-flow-renderer",
-      "version": "10.0.0-next.14",
+      "version": "10.0.0-next.17",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.15.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-renderer",
-  "version": "10.0.0-next.14",
+  "version": "10.0.0-next.17",
   "engines": {
     "node": ">=12"
   },

src/components/NodesSelection/index.tsx

@@ -5,6 +5,7 @@
 
 import React, { useMemo, useCallback, useRef, MouseEvent } from 'react';
 import ReactDraggable, { DraggableData } from 'react-draggable';
+import cc from 'classcat';
 
 import { useStore } from '../../store';
 import { Node, ReactFlowState } from '../../types';
@@ -14,6 +15,7 @@ export interface NodesSelectionProps {
   onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
+  noPanClassName?: string;
 }
 // @TODO: work with nodeInternals instead of converting it to an array
 const selector = (s: ReactFlowState) => ({
@@ -33,6 +35,7 @@ export default ({
   onSelectionDrag,
   onSelectionDragStop,
   onSelectionContextMenu,
+  noPanClassName,
 }: NodesSelectionProps) => {
   const { transform, selectedNodesBbox, selectionActive, selectedNodes, snapToGrid, snapGrid, updateNodePosition } =
     useStore(selector);
@@ -105,7 +108,7 @@ export default ({
   }
 
   return (
-    <div className="react-flow__nodesselection react-flow__container" style={style}>
+    <div className={cc(['react-flow__nodesselection', 'react-flow__container', noPanClassName])} style={style}>
       <ReactDraggable
         scale={tScale}
         grid={grid}

src/container/FlowRenderer/index.tsx

@@ -122,6 +122,7 @@ const FlowRenderer = ({
           onSelectionDrag={onSelectionDrag}
           onSelectionDragStop={onSelectionDragStop}
           onSelectionContextMenu={onSelectionContextMenu}
+          noPanClassName={noPanClassName}
         />
       )}
       <div