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

.gitignore

@@ -9,4 +9,5 @@ dist
 stats.html
 .eslintcache
 .idea
-.yarn
+.yarn
+.log

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 onInit = (reactFlowInstance: ReactFlowInstance) =>
-const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge, handleType: HandleType) =>
+  reactFlowInstance.fitView();
-  console.log(`start update ${handleType} handle`, edge);
+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);

packages/controls/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@react-flow/controls",
+  "version": "11.0.0",
+  "description": "A component that controls the viewport of React Flow",
+  "main": "dist/react-flow-controls.cjs.js",
+  "module": "dist/react-flow-controls.esm.js",
+  "license": "MIT",
+  "dependencies": {
+    "@react-flow/core": "11.0.0"
+  },
+  "peerDependencies": {
+    "classcat": "^5.0.3",
+    "react": "^18.2.0"
+  }
+}

packages/controls/src/Controls.tsx

@@ -1,8 +1,11 @@
 import React, { memo, FC, useEffect, useState, PropsWithChildren } from 'react';
 import cc from 'classcat';
-
+import {
-import { useStore, useStoreApi } from '../../store';
+  useStore,
-import useReactFlow from '../../hooks/useReactFlow';
+  useStoreApi,
+  useReactFlow,
+  ReactFlowState,
+} from '@react-flow/core';
 
 import PlusIcon from './Icons/Plus';
 import MinusIcon from './Icons/Minus';
@@ -10,15 +13,24 @@ import FitviewIcon from './Icons/FitView';
 import LockIcon from './Icons/Lock';
 import UnlockIcon from './Icons/Unlock';
 
-import { ControlProps, ControlButtonProps, ReactFlowState } from '../../types';
+import { ControlProps, ControlButtonProps } from './types';
 
-export const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({ children, className, ...rest }) => (
+export const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({
-  <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
+  children,
+  className,
+  ...rest
+}) => (
+  <button
+    type='button'
+    className={cc(['react-flow__controls-button', className])}
+    {...rest}
+  >
     {children}
   </button>
 );
 
-const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
+const isInteractiveSelector = (s: ReactFlowState) =>
+  s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
 
 const Controls: FC<PropsWithChildren<ControlProps>> = ({
   style,
@@ -77,17 +89,17 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
         <>
           <ControlButton
             onClick={onZoomInHandler}
-            className="react-flow__controls-zoomin"
+            className='react-flow__controls-zoomin'
-            title="zoom in"
+            title='zoom in'
-            aria-label="zoom in"
+            aria-label='zoom in'
           >
             <PlusIcon />
           </ControlButton>
           <ControlButton
             onClick={onZoomOutHandler}
-            className="react-flow__controls-zoomout"
+            className='react-flow__controls-zoomout'
-            title="zoom out"
+            title='zoom out'
-            aria-label="zoom out"
+            aria-label='zoom out'
           >
             <MinusIcon />
           </ControlButton>
@@ -95,20 +107,20 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
       )}
       {showFitView && (
         <ControlButton
-          className="react-flow__controls-fitview"
+          className='react-flow__controls-fitview'
           onClick={onFitViewHandler}
-          title="fit view"
+          title='fit view'
-          aria-label="fit view"
+          aria-label='fit view'
         >
           <FitviewIcon />
         </ControlButton>
       )}
       {showInteractive && (
         <ControlButton
-          className="react-flow__controls-interactive"
+          className='react-flow__controls-interactive'
           onClick={onToggleInteractivity}
-          title="toggle interactivity"
+          title='toggle interactivity'
-          aria-label="toggle interactivity"
+          aria-label='toggle interactivity'
         >
           {isInteractive ? <UnlockIcon /> : <LockIcon />}
         </ControlButton>

packages/controls/src/index.tsx

@@ -0,0 +1,2 @@
+export { default as default } from './Controls';
+export * from './types';

packages/controls/src/types.ts

@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import { FitViewOptions } from '@react-flow/core';
+
+export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
+  showZoom?: boolean;
+  showFitView?: boolean;
+  showInteractive?: boolean;
+  fitViewOptions?: FitViewOptions;
+  onZoomIn?: () => void;
+  onZoomOut?: () => void;
+  onFitView?: () => void;
+  onInteractiveChange?: (interactiveStatus: boolean) => void;
+}
+
+export interface ControlButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {}

packages/core/src/additional-components/index.ts

@@ -1,5 +0,0 @@
-// These components are not used by React Flow directly
-// They can be added as children of a React Flow component
-
-export { default as Controls, ControlButton } from './Controls';
-export { default as ReactFlowProvider } from './ReactFlowProvider';

packages/core/src/index.ts

@@ -17,7 +17,6 @@ export {
   getSimpleBezierCenter as getSimpleBezierEdgeCenter,
 } from './components/Edges/SimpleBezierEdge';
 export { default as SmoothStepEdge, getSmoothStepPath } from './components/Edges/SmoothStepEdge';
-export * from './additional-components';
 
 export { internalsSymbol } from './utils';
 export {
@@ -33,6 +32,7 @@ export {
 } from './utils/graph';
 export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils';
+export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 
 export { default as useReactFlow } from './hooks/useReactFlow';
 export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';

packages/core/src/types/component-props.ts

@@ -134,16 +134,3 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export type ReactFlowRefType = HTMLDivElement;
-
-export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
-  showZoom?: boolean;
-  showFitView?: boolean;
-  showInteractive?: boolean;
-  fitViewOptions?: FitViewOptions;
-  onZoomIn?: () => void;
-  onZoomOut?: () => void;
-  onFitView?: () => void;
-  onInteractiveChange?: (interactiveStatus: boolean) => void;
-}
-
-export interface ControlButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}