refactor(controls): move controls into own package and replace in examples

examples/nextjs/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@preconstruct/next": "^4.0.0",
     "@react-flow/background": "11.0.0",
+    "@react-flow/controls": "11.0.0",
     "@react-flow/core": "11.0.0",
     "@react-flow/minimap": "11.0.0",
     "dagre": "^0.8.5",

examples/nextjs/pages/CustomNode/index.tsx

@@ -3,7 +3,6 @@ import { ChangeEvent } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Controls,
   Node,
   ReactFlowInstance,
   Position,
@@ -14,6 +13,7 @@ import ReactFlow, {
 } from '@react-flow/core';
 
 import MiniMap from '@react-flow/minimap';
+import Controls from '@react-flow/controls';
 
 import ColorSelectorNode from './ColorSelectorNode';
 

examples/nextjs/pages/DragNDrop/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, DragEvent } from 'react';
 import ReactFlow, {
   ReactFlowProvider,
   addEdge,
-  Controls,
   ReactFlowInstance,
   Connection,
   Edge,
@@ -10,6 +9,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
 } from '@react-flow/core';
+import Controls from '@react-flow/controls';
 
 import Sidebar from './Sidebar';
 

examples/nextjs/pages/EdgeTypes/index.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 
 import ReactFlow, {
   addEdge,
-  Controls,
   ReactFlowInstance,
   Connection,
   Edge,
@@ -14,7 +13,7 @@ import ReactFlow, {
 } from '@react-flow/core';
 
 import Background from '@react-flow/background';
-
+import Controls from '@react-flow/controls';
 import MiniMap from '@react-flow/minimap';
 
 import { getElements } from './utils';

examples/nextjs/pages/Edges/index.tsx

@@ -2,7 +2,6 @@ import React, { MouseEvent } from 'react';
 import ReactFlow, {
   addEdge,
   Connection,
-  Controls,
   Edge,
   EdgeTypes,
   MarkerType,
@@ -12,8 +11,8 @@ import ReactFlow, {
   useNodesState,
 } from '@react-flow/core';
 
+import Controls from '@react-flow/controls';
 import Background from '@react-flow/background';
-
 import MiniMap from '@react-flow/minimap';
 
 import CustomEdge from './CustomEdge';

examples/nextjs/pages/Empty/index.tsx

@@ -2,7 +2,6 @@ import React, { MouseEvent, CSSProperties } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Controls,
   Node,
   Connection,
   Edge,
@@ -11,6 +10,7 @@ import ReactFlow, {
   ReactFlowInstance,
 } from '@react-flow/core';
 
+import Controls from '@react-flow/controls';
 import Background, { BackgroundVariant } from '@react-flow/background';
 
 const onInit = (reactFlowInstance: ReactFlowInstance) =>

examples/nextjs/pages/Hidden/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Controls,
   Connection,
   Edge,
   Node,
@@ -10,6 +9,7 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Controls from '@react-flow/controls';
 import MiniMap from '@react-flow/minimap';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/Interaction/index.tsx

@@ -5,7 +5,6 @@ import React, {
 } from 'react';
 import ReactFlow, {
   addEdge,
-  Controls,
   Node,
   Connection,
   Edge,
@@ -15,6 +14,7 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Controls from '@react-flow/controls';
 import MiniMap from '@react-flow/minimap';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/Layouting/index.tsx

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 import ReactFlow, {
   ReactFlowProvider,
   addEdge,
-  Controls,
   Connection,
   CoordinateExtent,
   Position,
@@ -11,6 +10,8 @@ import ReactFlow, {
   MarkerType,
   EdgeMarker,
 } from '@react-flow/core';
+
+import Controls from '@react-flow/controls';
 import dagre from 'dagre';
 
 import initialItems from './initial-elements';

examples/nextjs/pages/NestedNodes/index.tsx

@@ -4,13 +4,13 @@ import ReactFlow, {
   addEdge,
   useNodesState,
   useEdgesState,
-  Controls,
   Node,
   Edge,
   ReactFlowInstance,
   Connection,
 } from '@react-flow/core';
 
+import Controls from '@react-flow/controls';
 import MiniMap from '@react-flow/minimap';
 import Background from '@react-flow/background';
 

examples/nextjs/pages/Overview/index.tsx

@@ -6,7 +6,6 @@ import React, {
 
 import ReactFlow, {
   addEdge,
-  Controls,
   Node,
   Viewport,
   SnapGrid,
@@ -18,6 +17,7 @@ import ReactFlow, {
   OnSelectionChangeParams,
 } from '@react-flow/core';
 
+import Controls from '@react-flow/controls';
 import Background from '@react-flow/background';
 import MiniMap from '@react-flow/minimap';
 

examples/nextjs/pages/Provider/index.tsx

@@ -3,7 +3,6 @@ import ReactFlow, {
   ReactFlowProvider,
   addEdge,
   Node,
-  Controls,
   Connection,
   Edge,
   ConnectionMode,
@@ -11,6 +10,7 @@ import ReactFlow, {
   useEdgesState,
   ReactFlowInstance,
 } from '@react-flow/core';
+import Controls from '@react-flow/controls';
 
 import Sidebar from './Sidebar';
 

examples/nextjs/pages/Stress/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, CSSProperties, useCallback } from 'react';
 import ReactFlow, {
-  Controls,
   ReactFlowInstance,
   Edge,
   Node,
@@ -12,6 +11,7 @@ import ReactFlow, {
   EdgeChange,
 } from '@react-flow/core';
 
+import Controls from '@react-flow/controls';
 import Background from '@react-flow/background';
 import MiniMap from '@react-flow/minimap';
 

examples/nextjs/pages/Subflow/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, MouseEvent, useCallback } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Controls,
   Node,
   Edge,
   ReactFlowInstance,
@@ -12,6 +11,7 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Controls from '@react-flow/controls';
 import Background from '@react-flow/background';
 import MiniMap from '@react-flow/minimap';
 

examples/nextjs/pages/UpdatableEdge/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useCallback } from 'react';
 import ReactFlow, {
-  Controls,
   updateEdge,
   addEdge,
   applyNodeChanges,
@@ -14,6 +13,8 @@ import ReactFlow, {
   HandleType,
 } from '@react-flow/core';
 
+import Controls from '@react-flow/controls';
+
 const initialNodes: Node[] = [
   {
     id: '1',
@@ -48,15 +49,26 @@ const initialNodes: Node[] = [
       ),
     },
     position: { x: 400, y: 100 },
-    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
+    style: {
+      background: '#D6D5E6',
+      color: '#333',
+      border: '1px solid #222138',
+      width: 180,
+    },
   },
 ];
 
-const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }];
+const initialEdges = [
+  { id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' },
+];
 
-const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
-const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge, handleType: HandleType) =>
-  console.log(`start update ${handleType} handle`, edge);
+const onInit = (reactFlowInstance: ReactFlowInstance) =>
+  reactFlowInstance.fitView();
+const onEdgeUpdateStart = (
+  _: React.MouseEvent,
+  edge: Edge,
+  handleType: HandleType
+) => console.log(`start update ${handleType} handle`, edge);
 const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge, handleType: HandleType) =>
   console.log(`end update ${handleType} handle`, edge);
 
@@ -65,7 +77,8 @@ const UpdatableEdge = () => {
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setEdges((els) => updateEdge(oldEdge, newConnection, els));
-  const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els));
+  const onConnect = (connection: Connection) =>
+    setEdges((els) => addEdge(connection, els));
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     console.log(changes);