Merge branch 'main' into refactor/react18

README.md

@@ -11,7 +11,7 @@
 ### Wire Your Ideas With React Flow!  
 A highly customizable React component for building interactive graphs and node-based editors.
 
-[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/6ZcAMJmJ) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing)
+[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing)
   
 </div>
 
@@ -29,7 +29,7 @@ A highly customizable React component for building interactive graphs and node-b
 ## Attribution
 
 React Flow includes a small attribution that links to the React Flow website. Per default the attribution is displayed in the bottom right corner. With the attribution we want to achieve that companies who are using React Flow in commercial applications finance the development of the library.
-We expect users who are using React Flow commercially to subscribe to React Flow Pro if they want to remove the attribution. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd).
+We expect users who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd).
 
 ## Installation
 

example/package-lock.json

@@ -27,7 +27,7 @@
     },
     "..": {
       "name": "react-flow-renderer",
-      "version": "10.0.9-next.0",
+      "version": "10.1.0",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.17.8",

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "react-flow-renderer",
-  "version": "10.1.1-next.1",
+  "version": "10.1.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-flow-renderer",
-      "version": "10.1.1-next.1",
+      "version": "10.1.2",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.17.8",
@@ -2817,9 +2817,9 @@
       }
     },
     "node_modules/async": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz",
-      "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz",
+      "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==",
       "dev": true
     },
     "node_modules/async-retry": {
@@ -9242,6 +9242,11 @@
         "safer-buffer": "^2.0.2",
         "tweetnacl": "~0.14.0"
       },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12316,9 +12321,9 @@
       "dev": true
     },
     "async": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz",
-      "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz",
+      "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==",
       "dev": true
     },
     "async-retry": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-renderer",
-  "version": "10.1.1-next.1",
+  "version": "10.1.2",
   "engines": {
     "node": ">=14"
   },

src/additional-components/Background/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, FC } from 'react';
+import React, { memo, FC, useEffect, useState, useRef } from 'react';
 import cc from 'classcat';
 
 import { useStore } from '../../store';
@@ -20,9 +20,16 @@ const Background: FC<BackgroundProps> = ({
   style,
   className,
 }) => {
+  const ref = useRef<SVGSVGElement>(null);
+  const [patternId, setPatternId] = useState<string | null>(null);
   const [x, y, scale] = useStore(transformSelector);
-  // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
-  const patternId = useMemo(() => `pattern-${Math.floor(Math.random() * 100000)}`, []);
+
+  useEffect(() => {
+    // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
+    const bgs = document.querySelectorAll('.react-flow__background');
+    const index = Array.from(bgs).findIndex((bg) => bg === ref.current);
+    setPatternId(`pattern-${index}`);
+  }, []);
 
   const bgClasses = cc(['react-flow__background', 'react-flow__container', className]);
   const scaledGap = gap * scale;
@@ -41,18 +48,23 @@ const Background: FC<BackgroundProps> = ({
         width: '100%',
         height: '100%',
       }}
+      ref={ref}
     >
-      <pattern
-        id={patternId}
-        x={xOffset}
-        y={yOffset}
-        width={scaledGap}
-        height={scaledGap}
-        patternUnits="userSpaceOnUse"
-      >
-        {path}
-      </pattern>
-      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
+      {patternId && (
+        <>
+          <pattern
+            id={patternId}
+            x={xOffset}
+            y={yOffset}
+            width={scaledGap}
+            height={scaledGap}
+            patternUnits="userSpaceOnUse"
+          >
+            {path}
+          </pattern>
+          <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
+        </>
+      )}
     </svg>
   );
 };