Refactor: CSS handling (#2344)

* refactor(css): only load base styles, add css task, cleanup exports
* style(base): add edge label bg
* refactor(css): use css-utils
* feat(core): add Panel component
* refactor(background): cleanup
* refactor(css-handling): cleanup

examples/nextjs/package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "yarn run copystyles && next dev",
+    "copystyles": "cp ../../packages/core/src/styles/theme-default.css ./styles/theme-default.css",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -23,6 +24,9 @@
   "devDependencies": {
     "@types/dagre": "^0.7.47",
     "eslint": "8.19.0",
-    "eslint-config-next": "12.2.2"
+    "eslint-config-next": "12.2.2",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-nested": "^5.0.6",
+    "postcss-preset-env": "^7.7.2"
   }
 }

examples/nextjs/pages/Backgrounds/index.tsx

@@ -1,12 +1,14 @@
 import React, { FC } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   Node,
   ReactFlowProvider,
   useNodesState,
 } from '@react-flow/core';
 
-import Background, {
+import {
+  Background,
   BackgroundProps,
   BackgroundVariant,
 } from '@react-flow/background';

examples/nextjs/pages/ControlledUncontrolled/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-
-import ReactFlow, {
+import {
+  ReactFlow,
   useReactFlow,
   Node,
   Edge,
@@ -8,8 +8,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
 } from '@react-flow/core';
-
-import Background, { BackgroundVariant } from '@react-flow/background';
+import { Background, BackgroundVariant } from '@react-flow/background';
 
 const defaultNodes: Node[] = [
   {

examples/nextjs/pages/CustomConnectionLine/index.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Node,
   addEdge,
   Connection,
@@ -7,8 +8,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
 } from '@react-flow/core';
-
-import Background, { BackgroundVariant } from '@react-flow/background';
+import { Background, BackgroundVariant } from '@react-flow/background';
 
 import ConnectionLine from './ConnectionLine';
 

examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx

@@ -1,12 +1,11 @@
 import React, { memo, FC, CSSProperties } from 'react';
-
 import {
   Handle,
   Position,
   NodeProps,
   Connection,
   Edge,
-} from '@react-flow/core';
+} from '@react-flow/renderer';
 
 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
@@ -23,7 +22,7 @@ const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
   return (
     <>
       <Handle
-        type='target'
+        type="target"
         position={Position.Left}
         style={targetHandleStyle}
         onConnect={onConnect}
@@ -32,15 +31,15 @@ const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
         Custom Color Picker Node: <strong>{data.color}</strong>
       </div>
       <input
-        className='nodrag'
-        type='color'
+        className="nodrag"
+        type="color"
         onChange={data.onChange}
         defaultValue={data.color}
       />
       <Handle
-        type='source'
+        type="source"
         position={Position.Right}
-        id='a'
+        id="a"
         style={sourceHandleStyleA}
         isConnectable={isConnectable}
         onMouseDown={(e) => {
@@ -48,9 +47,9 @@ const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
         }}
       />
       <Handle
-        type='source'
+        type="source"
         position={Position.Right}
-        id='b'
+        id="b"
         style={sourceHandleStyleB}
         isConnectable={isConnectable}
       />

examples/nextjs/pages/CustomNode/index.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect, MouseEvent } from 'react';
-import { ChangeEvent } from 'react';
-
-import ReactFlow, {
+import React, { useState, useEffect, MouseEvent, ChangeEvent } from 'react';
+import {
+  ReactFlow,
+  MiniMap,
+  Controls,
   addEdge,
   Node,
   ReactFlowInstance,
@@ -10,10 +11,7 @@ import ReactFlow, {
   Connection,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
-
-import MiniMap from '@react-flow/minimap';
-import Controls from '@react-flow/controls';
+} from '@react-flow/renderer';
 
 import ColorSelectorNode from './ColorSelectorNode';
 

examples/nextjs/pages/DefaultNodes/index.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-
-import ReactFlow, {
+import {
+  ReactFlow,
   useReactFlow,
   Node,
   Edge,
   ReactFlowProvider,
 } from '@react-flow/core';
-
-import Background, { BackgroundVariant } from '@react-flow/background';
+import { Background, BackgroundVariant } from '@react-flow/background';
 
 const defaultNodes: Node[] = [
   {

examples/nextjs/pages/DragHandle/index.tsx

@@ -1,5 +1,6 @@
 import React, { MouseEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Node,
   Edge,
   useNodesState,

examples/nextjs/pages/DragNDrop/index.tsx

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

examples/nextjs/pages/EdgeTypes/index.tsx

@@ -3,18 +3,18 @@
  */
 import React from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
   addEdge,
   ReactFlowInstance,
   Connection,
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
-
-import Background from '@react-flow/background';
-import Controls from '@react-flow/controls';
-import MiniMap from '@react-flow/minimap';
+} from '@react-flow/renderer';
 
 import { getElements } from './utils';
 
@@ -44,10 +44,10 @@ const EdgeTypesFlow = () => {
       onConnect={onConnect}
       minZoom={0.2}
       zoomOnScroll={false}
-      selectionKeyCode='a+s'
+      selectionKeyCode="a+s"
       multiSelectionKeyCode={multiSelectionKeyCode}
       deleteKeyCode={deleteKeyCode}
-      zoomActivationKeyCode='z'
+      zoomActivationKeyCode="z"
     >
       <MiniMap />
       <Controls />

examples/nextjs/pages/Edges/index.tsx

@@ -1,19 +1,18 @@
 import React, { MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  Controls,
+  Background,
+  ReactFlow,
+  MiniMap,
   addEdge,
   Connection,
   Edge,
   EdgeTypes,
   MarkerType,
   Node,
-  ReactFlowInstance,
   useEdgesState,
   useNodesState,
-} from '@react-flow/core';
-
-import Controls from '@react-flow/controls';
-import Background from '@react-flow/background';
-import MiniMap from '@react-flow/minimap';
+} from '@react-flow/renderer';
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';

examples/nextjs/pages/Empty/index.tsx

@@ -1,6 +1,10 @@
-import React, { MouseEvent, CSSProperties } from 'react';
+import React, { MouseEvent, CSSProperties, useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  Controls,
   addEdge,
   Node,
   Connection,
@@ -8,10 +12,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from '@react-flow/core';
-
-import Controls from '@react-flow/controls';
-import Background, { BackgroundVariant } from '@react-flow/background';
+} from '@react-flow/renderer';
 
 const onInit = (reactFlowInstance: ReactFlowInstance) =>
   console.log('flow loaded:', reactFlowInstance);
@@ -30,8 +31,10 @@ const EmptyFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const onConnect = (params: Connection | Edge) =>
-    setEdges((els) => addEdge(params, els));
+  const onConnect = useCallback(
+    (params: Connection | Edge) => setEdges((els) => addEdge(params, els)),
+    [setEdges]
+  );
   const addRandomNode = () => {
     const nodeId = (nodes.length + 1).toString();
     const newNode: Node = {
@@ -60,7 +63,7 @@ const EmptyFlow = () => {
       <Controls />
       <Background variant={BackgroundVariant.Lines} />
 
-      <button type='button' onClick={addRandomNode} style={buttonStyle}>
+      <button type="button" onClick={addRandomNode} style={buttonStyle}>
         add node
       </button>
     </ReactFlow>

examples/nextjs/pages/FloatingEdges/index.tsx

@@ -1,15 +1,15 @@
 import React, { useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
+  Background,
   addEdge,
   ReactFlowInstance,
   EdgeTypes,
   Connection,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
-
-import Background from '@react-flow/background';
+} from '@react-flow/renderer';
 
 import styles from './style.module.css';
 

examples/nextjs/pages/Hidden/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Connection,
   Edge,
@@ -9,8 +10,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
-import Controls from '@react-flow/controls';
-import MiniMap from '@react-flow/minimap';
+import { Controls } from '@react-flow/controls';
+import { MiniMap } from '@react-flow/minimap';
 
 const initialNodes: Node[] = [
   {
@@ -85,14 +86,14 @@ const HiddenFlow = () => {
 
       <div style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
         <div>
-          <label htmlFor='ishidden'>
+          <label htmlFor="ishidden">
             isHidden
             <input
-              id='ishidden'
-              type='checkbox'
+              id="ishidden"
+              type="checkbox"
               checked={isHidden}
               onChange={(event) => setIsHidden(event.target.checked)}
-              className='react-flow__ishidden'
+              className="react-flow__ishidden"
             />
           </label>
         </div>

examples/nextjs/pages/Interaction/index.tsx

@@ -3,7 +3,8 @@ import React, {
   MouseEvent as ReactMouseEvent,
   WheelEvent,
 } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Connection,
@@ -14,8 +15,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
-import Controls from '@react-flow/controls';
-import MiniMap from '@react-flow/minimap';
+import { Controls } from '@react-flow/controls';
+import { MiniMap } from '@react-flow/minimap';
 
 const initialNodes: Node[] = [
   {
@@ -102,151 +103,151 @@ const InteractionFlow = () => {
 
       <div style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
         <div>
-          <label htmlFor='draggable'>
+          <label htmlFor="draggable">
             nodesDraggable
             <input
-              id='draggable'
-              type='checkbox'
+              id="draggable"
+              type="checkbox"
               checked={isDraggable}
               onChange={(event) => setIsDraggable(event.target.checked)}
-              className='react-flow__draggable'
+              className="react-flow__draggable"
             />
           </label>
         </div>
         <div>
-          <label htmlFor='connectable'>
+          <label htmlFor="connectable">
             nodesConnectable
             <input
-              id='connectable'
-              type='checkbox'
+              id="connectable"
+              type="checkbox"
               checked={isConnectable}
               onChange={(event) => setIsConnectable(event.target.checked)}
-              className='react-flow__connectable'
+              className="react-flow__connectable"
             />
           </label>
         </div>
         <div>
-          <label htmlFor='selectable'>
+          <label htmlFor="selectable">
             elementsSelectable
             <input
-              id='selectable'
-              type='checkbox'
+              id="selectable"
+              type="checkbox"
               checked={isSelectable}
               onChange={(event) => setIsSelectable(event.target.checked)}
-              className='react-flow__selectable'
+              className="react-flow__selectable"
             />
           </label>
         </div>
         <div>
-          <label htmlFor='zoomonscroll'>
+          <label htmlFor="zoomonscroll">
             zoomOnScroll
             <input
-              id='zoomonscroll'
-              type='checkbox'
+              id="zoomonscroll"
+              type="checkbox"
               checked={zoomOnScroll}
               onChange={(event) => setZoomOnScroll(event.target.checked)}
-              className='react-flow__zoomonscroll'
+              className="react-flow__zoomonscroll"
             />
           </label>
         </div>
         <div>
-          <label htmlFor='zoomonpinch'>
+          <label htmlFor="zoomonpinch">
             zoomOnPinch
             <input
-              id='zoomonpinch'
-              type='checkbox'
+              id="zoomonpinch"
+              type="checkbox"
               checked={zoomOnPinch}
               onChange={(event) => setZoomOnPinch(event.target.checked)}
-              className='react-flow__zoomonpinch'
+              className="react-flow__zoomonpinch"
             />
           </label>
         </div>
         <div>
-          <label htmlFor='panonscroll'>
+          <label htmlFor="panonscroll">
             panOnScroll
             <input
-              id='panonscroll'
-              type='checkbox'
+              id="panonscroll"
+              type="checkbox"
               checked={panOnScroll}
               onChange={(event) => setPanOnScroll(event.target.checked)}
-              className='react-flow__panonscroll'
+              className="react-flow__panonscroll"
             />
           </label>
         </div>
         <div>
-          <label htmlFor='panonscrollmode'>
+          <label htmlFor="panonscrollmode">
             panOnScrollMode
             <select
-              id='panonscrollmode'
+              id="panonscrollmode"
               value={panOnScrollMode}
               onChange={(event) =>
                 setPanOnScrollMode(event.target.value as PanOnScrollMode)
               }
-              className='react-flow__panonscrollmode'
+              className="react-flow__panonscrollmode"
             >
-              <option value='free'>free</option>
-              <option value='horizontal'>horizontal</option>
-              <option value='vertical'>vertical</option>
+              <option value="free">free</option>
+              <option value="horizontal">horizontal</option>
+              <option value="vertical">vertical</option>
             </select>
           </label>
         </div>
         <div>
-          <label htmlFor='zoomondbl'>
+          <label htmlFor="zoomondbl">
             zoomOnDoubleClick
             <input
-              id='zoomondbl'
-              type='checkbox'
+              id="zoomondbl"
+              type="checkbox"
               checked={zoomOnDoubleClick}
               onChange={(event) => setZoomOnDoubleClick(event.target.checked)}
-              className='react-flow__zoomondbl'
+              className="react-flow__zoomondbl"
             />
           </label>
         </div>
         <div>
-          <label htmlFor='panondrag'>
+          <label htmlFor="panondrag">
             panOnDrag
             <input
-              id='panondrag'
-              type='checkbox'
+              id="panondrag"
+              type="checkbox"
               checked={panOnDrag}
               onChange={(event) => setPanOnDrag(event.target.checked)}
-              className='react-flow__panondrag'
+              className="react-flow__panondrag"
             />
           </label>
         </div>
         <div>
-          <label htmlFor='capturezoompaneclick'>
+          <label htmlFor="capturezoompaneclick">
             capture onPaneClick
             <input
-              id='capturezoompaneclick'
-              type='checkbox'
+              id="capturezoompaneclick"
+              type="checkbox"
               checked={captureZoomClick}
               onChange={(event) => setCaptureZoomClick(event.target.checked)}
-              className='react-flow__capturezoompaneclick'
+              className="react-flow__capturezoompaneclick"
             />
           </label>
         </div>
         <div>
-          <label htmlFor='capturezoompanescroll'>
+          <label htmlFor="capturezoompanescroll">
             capture onPaneScroll
             <input
-              id='capturezoompanescroll'
-              type='checkbox'
+              id="capturezoompanescroll"
+              type="checkbox"
               checked={captureZoomScroll}
               onChange={(event) => setCaptureZoomScroll(event.target.checked)}
-              className='react-flow__capturezoompanescroll'
+              className="react-flow__capturezoompanescroll"
             />
           </label>
         </div>
         <div>
-          <label htmlFor='captureelementclick'>
+          <label htmlFor="captureelementclick">
             capture onElementClick
             <input
-              id='captureelementclick'
-              type='checkbox'
+              id="captureelementclick"
+              type="checkbox"
               checked={captureElementClick}
               onChange={(event) => setCaptureElementClick(event.target.checked)}
-              className='react-flow__captureelementclick'
+              className="react-flow__captureelementclick"
             />
           </label>
         </div>

examples/nextjs/pages/Layouting/index.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback } from 'react';
-import ReactFlow, {
+import {
+  Controls,
+  ReactFlow,
   ReactFlowProvider,
   addEdge,
   Connection,
@@ -9,9 +11,8 @@ import ReactFlow, {
   useEdgesState,
   MarkerType,
   EdgeMarker,
-} from '@react-flow/core';
+} from '@react-flow/renderer';
 
-import Controls from '@react-flow/controls';
 import dagre from 'dagre';
 
 import initialItems from './initial-elements';

examples/nextjs/pages/MultiFlows/index.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
+  Background,
   addEdge,
   Node,
   Edge,
@@ -9,9 +11,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   MarkerType,
-} from '@react-flow/core';
-
-import Background from '@react-flow/background';
+} from '@react-flow/renderer';
 
 import styles from './multiflows.module.css';
 
@@ -79,8 +79,8 @@ const Flow: FC<{ id: string }> = ({ id }) => {
 
 const MultiFlows: FC = () => (
   <div className={styles.multiflows}>
-    <Flow id='flow-a' />
-    <Flow id='flow-b' />
+    <Flow id="flow-a" />
+    <Flow id="flow-b" />
   </div>
 );
 

examples/nextjs/pages/NestedNodes/index.tsx

@@ -1,6 +1,9 @@
 import React, { useState, MouseEvent, useCallback } from 'react';
-
-import ReactFlow, {
+import {
+  Controls,
+  MiniMap,
+  Background,
+  ReactFlow,
   addEdge,
   useNodesState,
   useEdgesState,
@@ -8,11 +11,7 @@ import ReactFlow, {
   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';
+} from '@react-flow/renderer';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) =>
   console.log('drag stop', node);
@@ -105,9 +104,12 @@ const NestedFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onConnect = useCallback((connection: Connection) => {
-    setEdges((eds) => addEdge(connection, eds));
-  }, []);
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      setEdges((eds) => addEdge(connection, eds));
+    },
+    [setEdges]
+  );
   const onInit = useCallback(
     (reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance),
     []

examples/nextjs/pages/NodeTypeChange/index.tsx

@@ -1,6 +1,7 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Position,
@@ -42,8 +43,10 @@ const buttonStyle: CSSProperties = {
 const NodeTypeChangeFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) =>
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback(
+    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges]
+  );
   const changeType = () => {
     setNodes((nds) =>
       nds.map((node) => {

examples/nextjs/pages/NodeTypesObjectChange/index.tsx

@@ -1,6 +1,7 @@
-import React, { useState, CSSProperties, FC } from 'react';
+import React, { useState, CSSProperties, FC, useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Position,
@@ -65,10 +66,12 @@ const nodeTypesObjects: NodeTypesObject = {
 
 const NodeTypeChangeFlow = () => {
   const [nodeTypesId, setNodeTypesId] = useState<string>('a');
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const onConnect = (params: Connection | Edge) =>
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback(
+    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges]
+  );
   const changeType = () => setNodeTypesId((nt) => (nt === 'a' ? 'b' : 'a'));
 
   return (

examples/nextjs/pages/Overview/index.tsx

@@ -4,7 +4,8 @@ import React, {
   useCallback,
 } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Viewport,
@@ -17,9 +18,9 @@ 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';
+import { Controls } from '@react-flow/controls';
+import { Background } from '@react-flow/background';
+import { MiniMap } from '@react-flow/minimap';
 
 const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
   console.log('drag start', node, nodes);

examples/nextjs/pages/Provider/index.tsx

@@ -1,5 +1,7 @@
-import React, { MouseEvent } from 'react';
-import ReactFlow, {
+import React, { MouseEvent, useCallback } from 'react';
+import {
+  ReactFlow,
+  Controls,
   ReactFlowProvider,
   addEdge,
   Node,
@@ -9,8 +11,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from '@react-flow/core';
-import Controls from '@react-flow/controls';
+} from '@react-flow/renderer';
 
 import Sidebar from './Sidebar';
 
@@ -40,8 +41,10 @@ const initialEdges: Edge[] = [
 const ProviderFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Edge | Connection) =>
-    setEdges((els) => addEdge(params, els));
+  const onConnect = useCallback(
+    (params: Edge | Connection) => setEdges((els) => addEdge(params, els)),
+    [setEdges]
+  );
 
   return (
     <div className={styles.providerflow}>

examples/nextjs/pages/SaveRestore/index.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   ReactFlowProvider,
   Node,
   addEdge,
@@ -8,7 +9,6 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
 } from '@react-flow/core';
-
 import Controls from './Controls';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/Stress/index.tsx

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

examples/nextjs/pages/Subflow/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, MouseEvent, useCallback } from 'react';
-
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Edge,
@@ -10,10 +10,9 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
 } from '@react-flow/core';
-
-import Controls from '@react-flow/controls';
-import Background from '@react-flow/background';
-import MiniMap from '@react-flow/minimap';
+import { Controls } from '@react-flow/controls';
+import { Background } from '@react-flow/background';
+import { MiniMap } from '@react-flow/minimap';
 
 import DebugNode from './DebugNode';
 

examples/nextjs/pages/Switch/index.tsx

@@ -1,5 +1,6 @@
 import React, { MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Connection,

examples/nextjs/pages/TouchDevice/index.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Node,
   Edge,
   useNodesState,

examples/nextjs/pages/Undirectional/index.tsx

@@ -1,6 +1,7 @@
 import React, { MouseEvent, useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   useReactFlow,
   NodeTypes,
   addEdge,

examples/nextjs/pages/UpdatableEdge/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   updateEdge,
   addEdge,
   applyNodeChanges,
@@ -13,7 +14,7 @@ import ReactFlow, {
   HandleType,
 } from '@react-flow/core';
 
-import Controls from '@react-flow/controls';
+import { Controls } from '@react-flow/controls';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/UpdateNode/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Node,
   Edge,
   useNodesState,

examples/nextjs/pages/UseReactFlow/index.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, MouseEvent, useEffect } from 'react';
-
-import ReactFlow, {
+import {
+  Background,
+  MiniMap,
+  ReactFlow,
   Node,
   addEdge,
   useReactFlow,
@@ -9,10 +11,7 @@ import ReactFlow, {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
-
-import Background from '@react-flow/background';
-import MiniMap from '@react-flow/minimap';
+} from '@react-flow/renderer';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/UseUpdateNodeInternals/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, CSSProperties, MouseEvent } from 'react';
-
-import ReactFlow, {
+import {
+  ReactFlow,
   NodeTypes,
   addEdge,
   useReactFlow,
@@ -13,6 +13,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
 } from '@react-flow/core';
+
 import CustomNode from './CustomNode';
 
 const initialHandleCount = 1;
@@ -47,8 +48,10 @@ const getId = (): string => `${id++}`;
 const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const onConnect = (params: Edge | Connection) =>
-    setEdges((els) => addEdge(params, els));
+  const onConnect = useCallback(
+    (params: Edge | Connection) => setEdges((els) => addEdge(params, els)),
+    [setEdges]
+  );
 
   const updateNodeInternals = useUpdateNodeInternals();
   const { project } = useReactFlow();

examples/nextjs/pages/Validation/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useCallback, useState } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Handle,
   Connection,
@@ -28,7 +29,7 @@ const CustomInput: FC<NodeProps> = () => (
   <>
     <div>Only connectable with B</div>
     <Handle
-      type='source'
+      type="source"
       position={Position.Right}
       isValidConnection={isValidConnection}
     />
@@ -38,13 +39,13 @@ const CustomInput: FC<NodeProps> = () => (
 const CustomNode: FC<NodeProps> = ({ id }) => (
   <>
     <Handle
-      type='target'
+      type="target"
       position={Position.Left}
       isValidConnection={isValidConnection}
     />
     <div>{id}</div>
     <Handle
-      type='source'
+      type="source"
       position={Position.Right}
       isValidConnection={isValidConnection}
     />

examples/nextjs/pages/_app.tsx

@@ -2,6 +2,13 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import '../styles/globals.css';
 
+// Unfortunately this doesn't work because preconsruct clears the dist folder and there is
+// no way to hook into the watch process to copy the files back to the dist folder
+// import '@react-flow/core/dist/theme-default.css';
+
+// this is a workaround for testing the theme. See explanation above.
+// import '../styles/theme-default.css';
+
 const routes = [
   '/',
   '/Backgrounds',

examples/nextjs/pages/index.tsx

@@ -1,15 +1,16 @@
 import React, { MouseEvent } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   ReactFlowProvider,
   Node,
   Edge,
   useReactFlow,
 } from '@react-flow/core';
 
-import Minimap from '@react-flow/minimap';
-import Background, { BackgroundVariant } from '@react-flow/background';
-import Controls from '@react-flow/controls';
+import { MiniMap } from '@react-flow/minimap';
+import { Background, BackgroundVariant } from '@react-flow/background';
+import { Controls } from '@react-flow/controls';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) =>
@@ -95,7 +96,7 @@ const BasicFlow = () => {
       selectNodesOnDrag={false}
     >
       <Background variant={BackgroundVariant.Lines} />
-      <Minimap />
+      <MiniMap />
       <Controls />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>

examples/nextjs/pages/theme-default.css

@@ -0,0 +1,111 @@
+.react-flow__edge {
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+
+    .react-flow__edge-path {
+      stroke: #555;
+    }
+  }
+
+  &.animated path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  &.updating {
+    .react-flow__edge-path {
+      stroke: #777;
+    }
+  }
+}
+
+.react-flow__edge-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+
+.react-flow__edge-text {
+  font-size: 10px;
+}
+
+.react-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+
+.react-flow__node {
+  cursor: grab;
+}
+
+.react-flow__node-default,
+.react-flow__node-input,
+.react-flow__node-output,
+.react-flow__node-group {
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  background: #fff;
+  border-color: #1a192b;
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    box-shadow: 0 0 0 0.5px #1a192b;
+    outline: none;
+  }
+
+  .react-flow__handle {
+    background: #1a192b;
+  }
+}
+
+.react-flow__node-default.selectable,
+.react-flow__node-input.selectable,
+.react-flow__node-output.selectable,
+.react-flow__node-group.selectable {
+  &:hover {
+    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+  }
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.5px #1a192b;
+  }
+}
+
+.react-flow__node-group {
+  background: rgba(240, 240, 240, 0.25);
+  border-color: #1a192b;
+}
+
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.react-flow__handle {
+  width: 6px;
+  height: 6px;
+  background: #555;
+  border: 1px solid white;
+  border-radius: 100%;
+
+  &.connectable {
+    cursor: crosshair;
+  }
+}

examples/nextjs/postcss.config.json

@@ -0,0 +1,18 @@
+{
+  "plugins": [
+    "postcss-nested",
+    "postcss-flexbugs-fixes",
+    [
+      "postcss-preset-env",
+      {
+        "autoprefixer": {
+          "flexbox": "no-2009"
+        },
+        "stage": 3,
+        "features": {
+          "custom-properties": false
+        }
+      }
+    ]
+  ]
+}

examples/nextjs/styles/theme-default.css

@@ -0,0 +1,106 @@
+.react-flow__edge {
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+
+    .react-flow__edge-path {
+      stroke: #555;
+    }
+  }
+
+  &.animated path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  &.updating {
+    .react-flow__edge-path {
+      stroke: #777;
+    }
+  }
+}
+
+.react-flow__edge-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+
+.react-flow__edge-text {
+  font-size: 10px;
+}
+
+.react-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+
+.react-flow__node-default,
+.react-flow__node-input,
+.react-flow__node-output,
+.react-flow__node-group {
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #1a192b;
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    box-shadow: 0 0 0 0.5px #1a192b;
+    outline: none;
+  }
+
+  .react-flow__handle {
+    background: #1a192b;
+  }
+}
+
+.react-flow__node-default.selectable,
+.react-flow__node-input.selectable,
+.react-flow__node-output.selectable,
+.react-flow__node-group.selectable {
+  &:hover {
+    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+  }
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.5px #1a192b;
+  }
+}
+
+.react-flow__node-group {
+  background: rgba(240, 240, 240, 0.25);
+  border-color: #1a192b;
+}
+
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.react-flow__handle {
+  width: 6px;
+  height: 6px;
+  background: #555;
+  border: 1px solid white;
+  border-radius: 100%;
+
+  &.connectable {
+    cursor: crosshair;
+  }
+}