refactor(examples): update types of some examples

cypress/support/commands.js

@@ -24,10 +24,10 @@
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-
 Cypress.Commands.add('drag', (selector, { x, y }) => {
-  return cy.get(selector)
-    .trigger('mousedown', { which: 1 })
-    .trigger('mousemove', { clientX: x, clientY: y })
+  return cy
+    .get(selector)
+    .trigger('mousedown', { which: 1, force: true })
+    .trigger('mousemove', { clientX: x, clientY: y, force: true })
     .trigger('mouseup', { force: true });
 });

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]);
 

package-lock.json

@@ -28,6 +28,7 @@
         "@rollup/plugin-replace": "^4.0.0",
         "@types/d3": "^7.1.0",
         "@types/react": "^18.0.1",
+        "@types/react-dom": "^18.0.2",
         "@types/resize-observer-browser": "^0.1.7",
         "autoprefixer": "^10.4.2",
         "babel-preset-react-app": "^10.0.1",
@@ -2593,6 +2594,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-dom": {
+      "version": "18.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.2.tgz",
+      "integrity": "sha512-UxeS+Wtj5bvLRREz9tIgsK4ntCuLDo0EcAcACgw3E+9wE8ePDr9uQpq53MfcyxyIS55xJ+0B6mDS8c4qkkHLBg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resize-observer-browser": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz",
@@ -12145,6 +12155,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-dom": {
+      "version": "18.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.2.tgz",
+      "integrity": "sha512-UxeS+Wtj5bvLRREz9tIgsK4ntCuLDo0EcAcACgw3E+9wE8ePDr9uQpq53MfcyxyIS55xJ+0B6mDS8c4qkkHLBg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resize-observer-browser": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz",

package.json

@@ -63,6 +63,7 @@
     "@rollup/plugin-replace": "^4.0.0",
     "@types/d3": "^7.1.0",
     "@types/react": "^18.0.1",
+    "@types/react-dom": "^18.0.2",
     "@types/resize-observer-browser": "^0.1.7",
     "autoprefixer": "^10.4.2",
     "babel-preset-react-app": "^10.0.1",