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

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 { useStore, useStoreApi } from '../../store';
-import useReactFlow from '../../hooks/useReactFlow';
+import {
+  useStore,
+  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 }) => (
-  <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
+export const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({
+  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"
-            title="zoom in"
-            aria-label="zoom in"
+            className='react-flow__controls-zoomin'
+            title='zoom in'
+            aria-label='zoom in'
           >
             <PlusIcon />
           </ControlButton>
           <ControlButton
             onClick={onZoomOutHandler}
-            className="react-flow__controls-zoomout"
-            title="zoom out"
-            aria-label="zoom out"
+            className='react-flow__controls-zoomout'
+            title='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"
-          aria-label="fit view"
+          title='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"
-          aria-label="toggle interactivity"
+          title='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> {}