refactor(figma-controls): update prop names and types

packages/core/src/container/FlowRenderer/index.tsx

@@ -43,8 +43,8 @@ const FlowRenderer = ({
   onMoveStart,
   onMoveEnd,
   selectionKeyCode,
-  selectBoxOnDrag,
-  selectBoxMode,
+  selectionOnDrag,
+  selectionMode,
   onSelectionStart,
   onSelectionEnd,
   multiSelectionKeyCode,
@@ -67,29 +67,13 @@ const FlowRenderer = ({
   noPanClassName,
   disableKeyboardA11y,
 }: FlowRendererProps) => {
-  const store = useStoreApi();
   const nodesSelectionActive = useStore(selector);
   const selectionKeyPressed = useKeyPress(selectionKeyCode);
 
-  const isSelectionMode = selectionKeyPressed || (selectBoxOnDrag && panOnDrag !== true);
+  const isSelectionMode = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true);
 
   useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
 
-  const onClick = (event: MouseEvent) => {
-    onPaneClick?.(event);
-    store.getState().resetSelectedElements();
-    store.setState({ nodesSelectionActive: false });
-  };
-
-  const onContextMenu = (event: MouseEvent) => {
-    if (panOnDrag === 'RightClick') {
-      event.preventDefault();
-    } else {
-      onPaneContextMenu?.(event);
-    }
-  };
-  const onWheel = onPaneScroll ? (event: WheelEvent) => onPaneScroll(event) : undefined;
-
   return (
     <ZoomPane
       onMove={onMove}
@@ -116,14 +100,15 @@ const FlowRenderer = ({
       <UserSelection
         onSelectionStart={onSelectionStart}
         onSelectionEnd={onSelectionEnd}
-        onClick={onClick}
-        onMouseEnter={onPaneMouseEnter}
-        onMouseMove={onPaneMouseMove}
-        onMouseLeave={onPaneMouseLeave}
-        onContextMenu={onContextMenu}
-        onWheel={onWheel}
+        onPaneClick={onPaneClick}
+        onPaneMouseEnter={onPaneMouseEnter}
+        onPaneMouseMove={onPaneMouseMove}
+        onPaneMouseLeave={onPaneMouseLeave}
+        onPaneContextMenu={onPaneContextMenu}
+        onPaneScroll={onPaneScroll}
+        panOnDrag={panOnDrag}
         isSelectionMode={!!isSelectionMode}
-        selectBoxMode={selectBoxMode}
+        selectionMode={selectionMode}
       >
         {children}
         {nodesSelectionActive && (

packages/core/src/container/GraphView/index.tsx

@@ -58,8 +58,8 @@ const GraphView = ({
   connectionLineComponent,
   connectionLineContainerStyle,
   selectionKeyCode,
-  selectBoxOnDrag,
-  selectBoxMode,
+  selectionOnDrag,
+  selectionMode,
   multiSelectionKeyCode,
   zoomActivationKeyCode,
   deleteKeyCode,
@@ -114,8 +114,8 @@ const GraphView = ({
       onPaneScroll={onPaneScroll}
       deleteKeyCode={deleteKeyCode}
       selectionKeyCode={selectionKeyCode}
-      selectBoxOnDrag={selectBoxOnDrag}
-      selectBoxMode={selectBoxMode}
+      selectionOnDrag={selectionOnDrag}
+      selectionMode={selectionMode}
       onSelectionStart={onSelectionStart}
       onSelectionEnd={onSelectionEnd}
       multiSelectionKeyCode={multiSelectionKeyCode}

packages/core/src/container/ReactFlow/index.tsx

@@ -17,7 +17,7 @@ import GraphView from '../GraphView';
 import Wrapper from './Wrapper';
 import { infiniteExtent } from '../../store/initialState';
 import { useNodeOrEdgeTypes } from './utils';
-import { ConnectionLineType, ConnectionMode, PanOnScrollMode } from '../../types';
+import { ConnectionLineType, ConnectionMode, PanOnScrollMode, SelectionMode } from '../../types';
 import type {
   EdgeTypes,
   EdgeTypesWrapped,
@@ -101,8 +101,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       connectionLineContainerStyle,
       deleteKeyCode = 'Backspace',
       selectionKeyCode = 'Shift',
-      selectBoxOnDrag = false,
-      selectBoxMode = 'Contained',
+      selectionOnDrag = false,
+      selectionMode = SelectionMode.Contained,
       multiSelectionKeyCode = 'Meta',
       zoomActivationKeyCode = 'Meta',
       snapToGrid = false,
@@ -197,8 +197,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             connectionLineComponent={connectionLineComponent}
             connectionLineContainerStyle={connectionLineContainerStyle}
             selectionKeyCode={selectionKeyCode}
-            selectBoxOnDrag={selectBoxOnDrag}
-            selectBoxMode={selectBoxMode}
+            selectionOnDrag={selectionOnDrag}
+            selectionMode={selectionMode}
             deleteKeyCode={deleteKeyCode}
             multiSelectionKeyCode={multiSelectionKeyCode}
             zoomActivationKeyCode={zoomActivationKeyCode}

packages/core/src/container/ZoomPane/index.tsx

@@ -21,7 +21,7 @@ type ZoomPaneProps = Omit<
   | 'multiSelectionKeyCode'
   | 'noDragClassName'
   | 'disableKeyboardA11y'
-  | 'selectBoxOnDrag'
+  | 'selectionOnDrag'
 >;
 
 const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean =>