Merge branch 'main' into refactor/d3-drag

example/src/Basic/index.tsx

@@ -24,6 +24,8 @@ const initialEdges: Edge[] = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
+const defaultEdgeOptions = { zIndex: 0 };
+
 const BasicFlow = () => {
   const instance = useReactFlow();
 
@@ -60,10 +62,10 @@ const BasicFlow = () => {
       onNodeClick={onNodeClick}
       onNodeDragStop={onNodeDragStop}
       className="react-flow-basic-example"
-      defaultZoom={1.5}
       minZoom={0.2}
       maxZoom={4}
       fitView
+      defaultEdgeOptions={defaultEdgeOptions}
     >
       <Background variant={BackgroundVariant.Lines} />
 

example/src/Undirectional/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import React, { MouseEvent, useCallback } from 'react';
 
 import ReactFlow, {
   useReactFlow,
@@ -189,7 +189,7 @@ const UpdateNodeInternalsFlow = () => {
     setEdges((els) => updateEdge(oldEdge, newConnection, els));
 
   const onPaneClick = useCallback(
-    (evt) =>
+    (evt: MouseEvent) =>
       setNodes((nds) =>
         nds.concat({
           id: getId(),
@@ -198,7 +198,7 @@ const UpdateNodeInternalsFlow = () => {
           data: null,
         })
       ),
-    [project]
+    [project, setNodes]
   );
 
   return (

example/src/UseReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, MouseEvent } from 'react';
 
 import ReactFlow, {
   Node,
@@ -36,7 +36,7 @@ const UseZoomPanHelperFlow = () => {
   const { project, setCenter, zoomIn, zoomOut, fitView, addNodes, setNodes: setNodesHook } = useReactFlow();
 
   const onPaneClick = useCallback(
-    (evt) => {
+    (evt: MouseEvent) => {
       const projectedPosition = project({ x: evt.clientX, y: evt.clientY - 40 });
 
       setNodes((nds) =>
@@ -53,8 +53,8 @@ const UseZoomPanHelperFlow = () => {
   );
 
   const onNodeClick = useCallback(
-    (_, element) => {
-      const { x, y } = element.position;
+    (_: MouseEvent, node: Node) => {
+      const { x, y } = node.position;
       setCenter(x, y, { zoom: 1, duration: 1200 });
     },
     [setCenter]
@@ -72,9 +72,7 @@ const UseZoomPanHelperFlow = () => {
     addNodes(newNode);
   }, [addNodes]);
 
-  const onResetNodes = useCallback(() => {
-    setNodesHook(initialNodes);
-  }, [setNodesHook]);
+  const onResetNodes = useCallback(() => setNodesHook(initialNodes), [setNodesHook]);
 
   return (
     <ReactFlow

example/src/UseUpdateNodeInternals/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, CSSProperties } from 'react';
+import { useCallback, CSSProperties, MouseEvent } from 'react';
 
 import ReactFlow, {
   NodeTypes,
@@ -44,7 +44,7 @@ const UpdateNodeInternalsFlow = () => {
   const { project } = useReactFlow();
 
   const onPaneClick = useCallback(
-    (evt) =>
+    (evt: MouseEvent) =>
       setNodes((nds) =>
         nds.concat({
           id: getId(),
@@ -54,7 +54,7 @@ const UpdateNodeInternalsFlow = () => {
           sourcePosition: Position.Right,
         })
       ),
-    [project]
+    [project, setNodes]
   );
 
   const toggleHandleCount = useCallback(() => {
@@ -63,7 +63,7 @@ const UpdateNodeInternalsFlow = () => {
         return { ...node, data: { ...node.data, handleCount: node.data?.handleCount === 1 ? 2 : 1 } };
       })
     );
-  }, []);
+  }, [setNodes]);
 
   const toggleHandlePosition = useCallback(() => {
     setNodes((nds) =>
@@ -71,7 +71,7 @@ const UpdateNodeInternalsFlow = () => {
         return { ...node, data: { ...node.data, handlePosition: node.data?.handlePosition === 0 ? 1 : 0 } };
       })
     );
-  }, []);
+  }, [setNodes]);
 
   const updateNode = useCallback(() => updateNodeInternals('1'), [updateNodeInternals]);
 

example/src/index.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+
 import Basic from './Basic';
 import ControlledUncontrolled from './ControlledUncontrolled';
 import CustomConnectionLine from './CustomConnectionLine';
@@ -187,7 +188,10 @@ const Header = () => {
   );
 };
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+root.render(
   <BrowserRouter>
     <Header />
     <Routes>
@@ -195,6 +199,5 @@ ReactDOM.render(
         <Route path={route.path} key={route.path} element={<route.component />} />
       ))}
     </Routes>
-  </BrowserRouter>,
-  document.getElementById('root')
+  </BrowserRouter>
 );