From 54c69c7d8ee53641f6688f2eb2478b55e740b493 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 14 Mar 2024 15:08:39 +0100
Subject: [PATCH] fix(react): use fixedForwardRef function

---
 packages/react/src/components/Handle/index.tsx   | 4 ++--
 packages/react/src/container/ReactFlow/index.tsx | 5 +++--
 packages/react/src/types/general.ts              | 8 --------
 packages/react/src/utils/general.ts              | 9 +++++++++
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx
index f481b7ce..ee36d066 100644
--- a/packages/react/src/components/Handle/index.tsx
+++ b/packages/react/src/components/Handle/index.tsx
@@ -4,7 +4,6 @@ import {
   type TouchEvent as ReactTouchEvent,
   type ForwardedRef,
   memo,
-  forwardRef,
 } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
@@ -24,6 +23,7 @@ import {
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import { type ReactFlowState } from '../../types';
+import { fixedForwardRef } from '../../utils';
 
 export interface HandleComponentProps extends HandleProps, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {}
 
@@ -243,4 +243,4 @@ function HandleComponent(
 /**
  * The Handle component is a UI element that is used to connect nodes.
  */
-export const Handle = memo(forwardRef(HandleComponent));
+export const Handle = memo(fixedForwardRef(HandleComponent));
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index eb741684..eb6e3a1d 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef, type CSSProperties } from 'react';
+import { ForwardedRef, type CSSProperties } from 'react';
 import cc from 'classcat';
 import { ConnectionLineType, PanOnScrollMode, SelectionMode, infiniteExtent, isMacOs } from '@xyflow/system';
 
@@ -11,6 +11,7 @@ import { GraphView } from '../GraphView';
 import { Wrapper } from './Wrapper';
 import type { Edge, Node, ReactFlowProps } from '../../types';
 import { defaultViewport as initViewport, defaultNodeOrigin } from './init-values';
+import { fixedForwardRef } from '../../utils/general';
 
 const wrapperStyle: CSSProperties = {
   width: '100%',
@@ -286,4 +287,4 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
   );
 }
 
-export default forwardRef(ReactFlow);
+export default fixedForwardRef(ReactFlow);
diff --git a/packages/react/src/types/general.ts b/packages/react/src/types/general.ts
index 6f723237..302ffeee 100644
--- a/packages/react/src/types/general.ts
+++ b/packages/react/src/types/general.ts
@@ -16,14 +16,6 @@ import {
 
 import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps, NodeProps } from '.';
 
-// this is needed, to use generics + forwardRef
-declare module 'react' {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  function forwardRef<T, P = {}>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-
 export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<NodeType>[]) => void;
 export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
 
diff --git a/packages/react/src/utils/general.ts b/packages/react/src/utils/general.ts
index 2c2387fc..c9e3ae17 100644
--- a/packages/react/src/utils/general.ts
+++ b/packages/react/src/utils/general.ts
@@ -1,6 +1,7 @@
 import { isNodeBase, isEdgeBase } from '@xyflow/system';
 
 import type { Edge, Node } from '../types';
+import React from 'react';
 
 /**
  * Test whether an object is useable as a Node
@@ -21,3 +22,11 @@ export const isNode = <NodeType extends Node = Node>(element: unknown): element
  */
 export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
   isEdgeBase<EdgeType>(element);
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function fixedForwardRef<T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode
+): (props: P & React.RefAttributes<T>) => React.ReactNode {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return React.forwardRef(render) as any;
+}