Merge branch 'main' into feat/hooks

examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx

@@ -1,30 +1,33 @@
-import React, { memo, FC, useMemo, CSSProperties } from 'react';
-import { Handle, Position, NodeProps } from '@react-flow/bundle';
+import React, { useState, memo, FC, useMemo, CSSProperties } from 'react';
+import { Handle, Position, NodeProps, useUpdateNodeInternals } from '@react-flow/bundle';
 
 const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
 
-const CustomNode: FC<NodeProps> = ({ data }) => {
+const CustomNode: FC<NodeProps> = ({ id }) => {
+  const [handleCount, setHandleCount] = useState(1);
+  const updateNodeInternals = useUpdateNodeInternals();
+
   const handles = useMemo(
     () =>
-      Array.from({ length: data.handleCount }, (x, i) => {
+      Array.from({ length: handleCount }, (x, i) => {
         const handleId = `handle-${i}`;
-        return (
-          <Handle
-            key={handleId}
-            type="source"
-            position={Position.Right}
-            id={handleId}
-            style={{ top: 10 * i + data.handlePosition * 10 }}
-          />
-        );
+        return <Handle key={handleId} type="source" position={Position.Right} id={handleId} style={{ top: 10 * i }} />;
       }),
-    [data.handleCount, data.handlePosition]
+    [handleCount]
   );
 
   return (
     <div style={nodeStyles}>
       <Handle type="target" position={Position.Left} />
-      <div>output handle count: {data.handleCount}</div>
+      <div>output handle count: {handleCount}</div>
+      <button
+        onClick={() => {
+          setHandleCount((c) => c + 1);
+          updateNodeInternals(id);
+        }}
+      >
+        add handle
+      </button>
       {handles}
     </div>
   );