feat(react): infer node types from passed nodes

2024-01-24 18:25:31 +01:00
parent 8983d64397
commit a345b2670b
15 changed files with 364 additions and 354 deletions
@@ -7,10 +7,10 @@ import { GraphViewProps } from '../GraphView';
 import { ZoomPane } from '../ZoomPane';
 import { Pane } from '../Pane';
 import { NodesSelection } from '../../components/NodesSelection';
-import type { ReactFlowState } from '../../types';
+import type { ReactFlowState, Node } from '../../types';

-export type FlowRendererProps = Omit<
-  GraphViewProps,
+export type FlowRendererProps<NodeType extends Node> = Omit<
+  GraphViewProps<NodeType>,
  | 'snapToGrid'
  | 'nodeTypes'
  | 'edgeTypes'
@@ -32,7 +32,7 @@ const selector = (s: ReactFlowState) => {
  return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
 };

-const FlowRendererComponent = ({
+function FlowRendererComponent<NodeType extends Node>({
  children,
  onPaneClick,
  onPaneMouseEnter,
@@ -68,7 +68,7 @@ const FlowRendererComponent = ({
  disableKeyboardA11y,
  onViewportChange,
  isControlledViewport,
-}: FlowRendererProps) => {
+}: FlowRendererProps<NodeType>) {
  const { nodesSelectionActive, userSelectionActive } = useStore(selector);
  const selectionKeyPressed = useKeyPress(selectionKeyCode);
  const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
@@ -125,8 +125,8 @@ const FlowRendererComponent = ({
      </Pane>
    </ZoomPane>
  );
-};
+}

 FlowRendererComponent.displayName = 'FlowRenderer';

-export const FlowRenderer = memo(FlowRendererComponent);
+export const FlowRenderer = memo(FlowRendererComponent) as typeof FlowRendererComponent;
@@ -8,15 +8,15 @@ import { useOnInitHandler } from '../../hooks/useOnInitHandler';
 import { useViewportSync } from '../../hooks/useViewportSync';
 import { ConnectionLineWrapper } from '../../components/ConnectionLine';
 import { useNodeOrEdgeTypesWarning } from './useNodeOrEdgeTypesWarning';
-import type { ReactFlowProps } from '../../types';
+import type { Node, ReactFlowProps } from '../../types';

-export type GraphViewProps = Omit<
-  ReactFlowProps,
+export type GraphViewProps<NodeType extends Node = Node> = Omit<
+  ReactFlowProps<NodeType>,
  'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'elevateEdgesOnSelect'
 > &
  Required<
    Pick<
-      ReactFlowProps,
+      ReactFlowProps<NodeType>,
      | 'selectionKeyCode'
      | 'deleteKeyCode'
      | 'multiSelectionKeyCode'
@@ -38,7 +38,7 @@ export type GraphViewProps = Omit<
    rfId: string;
  };

-function GraphViewComponent({
+function GraphViewComponent<NodeType extends Node = Node>({
  nodeTypes,
  edgeTypes,
  onInit,
@@ -102,7 +102,7 @@ function GraphViewComponent({
  rfId,
  viewport,
  onViewportChange,
-}: GraphViewProps) {
+}: GraphViewProps<NodeType>) {
  useNodeOrEdgeTypesWarning(nodeTypes);
  useNodeOrEdgeTypesWarning(edgeTypes);

@@ -110,7 +110,7 @@ function GraphViewComponent({
  useViewportSync(viewport);

  return (
-    <FlowRenderer
+    <FlowRenderer<NodeType>
      onPaneClick={onPaneClick}
      onPaneMouseEnter={onPaneMouseEnter}
      onPaneMouseMove={onPaneMouseMove}
@@ -174,7 +174,7 @@ function GraphViewComponent({
        />
        <div className="react-flow__edgelabel-renderer" />
        <div className="react-flow__viewport-portal" />
-        <NodeRenderer
+        <NodeRenderer<NodeType>
          nodeTypes={nodeTypes}
          onNodeClick={onNodeClick}
          onNodeDoubleClick={onNodeDoubleClick}
@@ -197,4 +197,4 @@ function GraphViewComponent({

 GraphViewComponent.displayName = 'GraphView';

-export const GraphView = memo(GraphViewComponent);
+export const GraphView = memo(GraphViewComponent) as typeof GraphViewComponent;
@@ -7,10 +7,10 @@ import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
 import { useResizeObserver } from './useResizeObserver';
 import { NodeWrapper } from '../../components/NodeWrapper';
-import type { ReactFlowState } from '../../types';
+import type { Node, ReactFlowState } from '../../types';

-export type NodeRendererProps = Pick<
-  GraphViewProps,
+export type NodeRendererProps<NodeType extends Node> = Pick<
+  GraphViewProps<NodeType>,
  | 'onNodeClick'
  | 'onNodeDoubleClick'
  | 'onNodeMouseEnter'
@@ -35,7 +35,7 @@ const selector = (s: ReactFlowState) => ({
  onError: s.onError,
 });

-const NodeRendererComponent = (props: NodeRendererProps) => {
+function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<NodeType>) {
  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector, shallow);
  const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
  const resizeObserver = useResizeObserver();
@@ -67,7 +67,7 @@ const NodeRendererComponent = (props: NodeRendererProps) => {
          //   moved into `NodeComponentWrapper`. This ensures they are
          //   memorized – so if `NodeRenderer` *has* to rerender, it only
          //   needs to regenerate the list of nodes, nothing else.
-          <NodeWrapper
+          <NodeWrapper<NodeType>
            key={nodeId}
            id={nodeId}
            nodeTypes={props.nodeTypes}
@@ -94,8 +94,8 @@ const NodeRendererComponent = (props: NodeRendererProps) => {
      })}
    </div>
  );
-};
+}

 NodeRendererComponent.displayName = 'NodeRenderer';

-export const NodeRenderer = memo(NodeRendererComponent);
+export const NodeRenderer = memo(NodeRendererComponent) as typeof NodeRendererComponent;
@@ -1,4 +1,4 @@
-import { forwardRef, type CSSProperties } from 'react';
+import { ForwardedRef, forwardRef, type CSSProperties } from 'react';
 import cc from 'classcat';
 import {
  ConnectionLineType,
@@ -17,7 +17,7 @@ import { StoreUpdater } from '../../components/StoreUpdater';
 import { useColorModeClass } from '../../hooks/useColorModeClass';
 import { GraphView } from '../GraphView';
 import { Wrapper } from './Wrapper';
-import type { ReactFlowProps, ReactFlowRefType } from '../../types';
+import type { ReactFlowProps, ReactFlowRefType, Node } from '../../types';

 export const initNodeOrigin: NodeOrigin = [0, 0];
 const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
@@ -30,272 +30,276 @@ const wrapperStyle: CSSProperties = {
  zIndex: 0,
 };

-const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
-  (
-    {
-      nodes,
-      edges,
-      defaultNodes,
-      defaultEdges,
-      className,
-      nodeTypes,
-      edgeTypes,
-      onNodeClick,
-      onEdgeClick,
-      onInit,
-      onMove,
-      onMoveStart,
-      onMoveEnd,
-      onConnect,
-      onConnectStart,
-      onConnectEnd,
-      onClickConnectStart,
-      onClickConnectEnd,
-      onNodeMouseEnter,
-      onNodeMouseMove,
-      onNodeMouseLeave,
-      onNodeContextMenu,
-      onNodeDoubleClick,
-      onNodeDragStart,
-      onNodeDrag,
-      onNodeDragStop,
-      onNodesDelete,
-      onEdgesDelete,
-      onDelete,
-      onSelectionChange,
-      onSelectionDragStart,
-      onSelectionDrag,
-      onSelectionDragStop,
-      onSelectionContextMenu,
-      onSelectionStart,
-      onSelectionEnd,
-      onBeforeDelete,
-      connectionMode,
-      connectionLineType = ConnectionLineType.Bezier,
-      connectionLineStyle,
-      connectionLineComponent,
-      connectionLineContainerStyle,
-      deleteKeyCode = 'Backspace',
-      selectionKeyCode = 'Shift',
-      selectionOnDrag = false,
-      selectionMode = SelectionMode.Full,
-      panActivationKeyCode = 'Space',
-      multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control',
-      zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control',
-      snapToGrid,
-      snapGrid,
-      onlyRenderVisibleElements = false,
-      selectNodesOnDrag,
-      nodesDraggable,
-      nodesConnectable,
-      nodesFocusable,
-      nodeOrigin = initNodeOrigin,
-      edgesFocusable,
-      edgesUpdatable,
-      elementsSelectable = true,
-      defaultViewport = initDefaultViewport,
-      minZoom = 0.5,
-      maxZoom = 2,
-      translateExtent = infiniteExtent,
-      preventScrolling = true,
-      nodeExtent,
-      defaultMarkerColor = '#b1b1b7',
-      zoomOnScroll = true,
-      zoomOnPinch = true,
-      panOnScroll = false,
-      panOnScrollSpeed = 0.5,
-      panOnScrollMode = PanOnScrollMode.Free,
-      zoomOnDoubleClick = true,
-      panOnDrag = true,
-      onPaneClick,
-      onPaneMouseEnter,
-      onPaneMouseMove,
-      onPaneMouseLeave,
-      onPaneScroll,
-      onPaneContextMenu,
-      children,
-      onEdgeUpdate,
-      onEdgeContextMenu,
-      onEdgeDoubleClick,
-      onEdgeMouseEnter,
-      onEdgeMouseMove,
-      onEdgeMouseLeave,
-      onEdgeUpdateStart,
-      onEdgeUpdateEnd,
-      edgeUpdaterRadius = 10,
-      onNodesChange,
-      onEdgesChange,
-      noDragClassName = 'nodrag',
-      noWheelClassName = 'nowheel',
-      noPanClassName = 'nopan',
-      fitView,
-      fitViewOptions,
-      connectOnClick,
-      attributionPosition,
-      proOptions,
-      defaultEdgeOptions,
-      elevateNodesOnSelect,
-      elevateEdgesOnSelect,
-      disableKeyboardA11y = false,
-      autoPanOnConnect,
-      autoPanOnNodeDrag,
-      connectionRadius,
-      isValidConnection,
-      onError,
-      style,
-      id,
-      nodeDragThreshold,
-      viewport,
-      onViewportChange,
-      width,
-      height,
-      colorMode = 'light',
-      ...rest
-    },
-    ref
-  ) => {
-    const rfId = id || '1';
-    const colorModeClassName = useColorModeClass(colorMode);
+declare module 'react' {
+  function forwardRef<T, P = Record<string, never>>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactNode | null
+  ): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
+}

-    return (
-      <div
-        {...rest}
-        style={{ ...style, ...wrapperStyle }}
-        ref={ref}
-        className={cc(['react-flow', className, colorModeClassName])}
-        data-testid="rf__wrapper"
-        id={id}
-      >
-        <Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
-          <GraphView
-            onInit={onInit}
-            onNodeClick={onNodeClick}
-            onEdgeClick={onEdgeClick}
-            onNodeMouseEnter={onNodeMouseEnter}
-            onNodeMouseMove={onNodeMouseMove}
-            onNodeMouseLeave={onNodeMouseLeave}
-            onNodeContextMenu={onNodeContextMenu}
-            onNodeDoubleClick={onNodeDoubleClick}
-            nodeTypes={nodeTypes}
-            edgeTypes={edgeTypes}
-            connectionLineType={connectionLineType}
-            connectionLineStyle={connectionLineStyle}
-            connectionLineComponent={connectionLineComponent}
-            connectionLineContainerStyle={connectionLineContainerStyle}
-            selectionKeyCode={selectionKeyCode}
-            selectionOnDrag={selectionOnDrag}
-            selectionMode={selectionMode}
-            deleteKeyCode={deleteKeyCode}
-            multiSelectionKeyCode={multiSelectionKeyCode}
-            panActivationKeyCode={panActivationKeyCode}
-            zoomActivationKeyCode={zoomActivationKeyCode}
-            onlyRenderVisibleElements={onlyRenderVisibleElements}
-            defaultViewport={defaultViewport}
-            translateExtent={translateExtent}
-            minZoom={minZoom}
-            maxZoom={maxZoom}
-            preventScrolling={preventScrolling}
-            zoomOnScroll={zoomOnScroll}
-            zoomOnPinch={zoomOnPinch}
-            zoomOnDoubleClick={zoomOnDoubleClick}
-            panOnScroll={panOnScroll}
-            panOnScrollSpeed={panOnScrollSpeed}
-            panOnScrollMode={panOnScrollMode}
-            panOnDrag={panOnDrag}
-            onPaneClick={onPaneClick}
-            onPaneMouseEnter={onPaneMouseEnter}
-            onPaneMouseMove={onPaneMouseMove}
-            onPaneMouseLeave={onPaneMouseLeave}
-            onPaneScroll={onPaneScroll}
-            onPaneContextMenu={onPaneContextMenu}
-            onSelectionContextMenu={onSelectionContextMenu}
-            onSelectionStart={onSelectionStart}
-            onSelectionEnd={onSelectionEnd}
-            onEdgeUpdate={onEdgeUpdate}
-            onEdgeContextMenu={onEdgeContextMenu}
-            onEdgeDoubleClick={onEdgeDoubleClick}
-            onEdgeMouseEnter={onEdgeMouseEnter}
-            onEdgeMouseMove={onEdgeMouseMove}
-            onEdgeMouseLeave={onEdgeMouseLeave}
-            onEdgeUpdateStart={onEdgeUpdateStart}
-            onEdgeUpdateEnd={onEdgeUpdateEnd}
-            edgeUpdaterRadius={edgeUpdaterRadius}
-            defaultMarkerColor={defaultMarkerColor}
-            noDragClassName={noDragClassName}
-            noWheelClassName={noWheelClassName}
-            noPanClassName={noPanClassName}
-            rfId={rfId}
-            disableKeyboardA11y={disableKeyboardA11y}
-            nodeOrigin={nodeOrigin}
-            nodeExtent={nodeExtent}
-            viewport={viewport}
-            onViewportChange={onViewportChange}
-          />
-          <StoreUpdater
-            nodes={nodes}
-            edges={edges}
-            defaultNodes={defaultNodes}
-            defaultEdges={defaultEdges}
-            onConnect={onConnect}
-            onConnectStart={onConnectStart}
-            onConnectEnd={onConnectEnd}
-            onClickConnectStart={onClickConnectStart}
-            onClickConnectEnd={onClickConnectEnd}
-            nodesDraggable={nodesDraggable}
-            nodesConnectable={nodesConnectable}
-            nodesFocusable={nodesFocusable}
-            edgesFocusable={edgesFocusable}
-            edgesUpdatable={edgesUpdatable}
-            elementsSelectable={elementsSelectable}
-            elevateNodesOnSelect={elevateNodesOnSelect}
-            elevateEdgesOnSelect={elevateEdgesOnSelect}
-            minZoom={minZoom}
-            maxZoom={maxZoom}
-            nodeExtent={nodeExtent}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            snapToGrid={snapToGrid}
-            snapGrid={snapGrid}
-            connectionMode={connectionMode}
-            translateExtent={translateExtent}
-            connectOnClick={connectOnClick}
-            defaultEdgeOptions={defaultEdgeOptions}
-            fitView={fitView}
-            fitViewOptions={fitViewOptions}
-            onNodesDelete={onNodesDelete}
-            onEdgesDelete={onEdgesDelete}
-            onDelete={onDelete}
-            onNodeDragStart={onNodeDragStart}
-            onNodeDrag={onNodeDrag}
-            onNodeDragStop={onNodeDragStop}
-            onSelectionDrag={onSelectionDrag}
-            onSelectionDragStart={onSelectionDragStart}
-            onSelectionDragStop={onSelectionDragStop}
-            onMove={onMove}
-            onMoveStart={onMoveStart}
-            onMoveEnd={onMoveEnd}
-            noPanClassName={noPanClassName}
-            nodeOrigin={nodeOrigin}
-            rfId={rfId}
-            autoPanOnConnect={autoPanOnConnect}
-            autoPanOnNodeDrag={autoPanOnNodeDrag}
-            onError={onError}
-            connectionRadius={connectionRadius}
-            isValidConnection={isValidConnection}
-            selectNodesOnDrag={selectNodesOnDrag}
-            nodeDragThreshold={nodeDragThreshold}
-            onBeforeDelete={onBeforeDelete}
-          />
-          <SelectionListener onSelectionChange={onSelectionChange} />
-          {children}
-          <Attribution proOptions={proOptions} position={attributionPosition} />
-          <A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} />
-        </Wrapper>
-      </div>
-    );
-  }
-);
+function ReactFlow<NodeType extends Node = Node>(
+  {
+    nodes,
+    edges,
+    defaultNodes,
+    defaultEdges,
+    className,
+    nodeTypes,
+    edgeTypes,
+    onNodeClick,
+    onEdgeClick,
+    onInit,
+    onMove,
+    onMoveStart,
+    onMoveEnd,
+    onConnect,
+    onConnectStart,
+    onConnectEnd,
+    onClickConnectStart,
+    onClickConnectEnd,
+    onNodeMouseEnter,
+    onNodeMouseMove,
+    onNodeMouseLeave,
+    onNodeContextMenu,
+    onNodeDoubleClick,
+    onNodeDragStart,
+    onNodeDrag,
+    onNodeDragStop,
+    onNodesDelete,
+    onEdgesDelete,
+    onDelete,
+    onSelectionChange,
+    onSelectionDragStart,
+    onSelectionDrag,
+    onSelectionDragStop,
+    onSelectionContextMenu,
+    onSelectionStart,
+    onSelectionEnd,
+    onBeforeDelete,
+    connectionMode,
+    connectionLineType = ConnectionLineType.Bezier,
+    connectionLineStyle,
+    connectionLineComponent,
+    connectionLineContainerStyle,
+    deleteKeyCode = 'Backspace',
+    selectionKeyCode = 'Shift',
+    selectionOnDrag = false,
+    selectionMode = SelectionMode.Full,
+    panActivationKeyCode = 'Space',
+    multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control',
+    zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control',
+    snapToGrid,
+    snapGrid,
+    onlyRenderVisibleElements = false,
+    selectNodesOnDrag,
+    nodesDraggable,
+    nodesConnectable,
+    nodesFocusable,
+    nodeOrigin = initNodeOrigin,
+    edgesFocusable,
+    edgesUpdatable,
+    elementsSelectable = true,
+    defaultViewport = initDefaultViewport,
+    minZoom = 0.5,
+    maxZoom = 2,
+    translateExtent = infiniteExtent,
+    preventScrolling = true,
+    nodeExtent,
+    defaultMarkerColor = '#b1b1b7',
+    zoomOnScroll = true,
+    zoomOnPinch = true,
+    panOnScroll = false,
+    panOnScrollSpeed = 0.5,
+    panOnScrollMode = PanOnScrollMode.Free,
+    zoomOnDoubleClick = true,
+    panOnDrag = true,
+    onPaneClick,
+    onPaneMouseEnter,
+    onPaneMouseMove,
+    onPaneMouseLeave,
+    onPaneScroll,
+    onPaneContextMenu,
+    children,
+    onEdgeUpdate,
+    onEdgeContextMenu,
+    onEdgeDoubleClick,
+    onEdgeMouseEnter,
+    onEdgeMouseMove,
+    onEdgeMouseLeave,
+    onEdgeUpdateStart,
+    onEdgeUpdateEnd,
+    edgeUpdaterRadius = 10,
+    onNodesChange,
+    onEdgesChange,
+    noDragClassName = 'nodrag',
+    noWheelClassName = 'nowheel',
+    noPanClassName = 'nopan',
+    fitView,
+    fitViewOptions,
+    connectOnClick,
+    attributionPosition,
+    proOptions,
+    defaultEdgeOptions,
+    elevateNodesOnSelect,
+    elevateEdgesOnSelect,
+    disableKeyboardA11y = false,
+    autoPanOnConnect,
+    autoPanOnNodeDrag,
+    connectionRadius,
+    isValidConnection,
+    onError,
+    style,
+    id,
+    nodeDragThreshold,
+    viewport,
+    onViewportChange,
+    width,
+    height,
+    colorMode = 'light',
+    ...rest
+  }: ReactFlowProps<NodeType>,
+  ref: ForwardedRef<ReactFlowRefType>
+) {
+  const rfId = id || '1';
+  const colorModeClassName = useColorModeClass(colorMode);

-ReactFlow.displayName = 'ReactFlow';
+  return (
+    <div
+      {...rest}
+      style={{ ...style, ...wrapperStyle }}
+      ref={ref}
+      className={cc(['react-flow', className, colorModeClassName])}
+      data-testid="rf__wrapper"
+      id={id}
+    >
+      <Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
+        <GraphView<NodeType>
+          onInit={onInit}
+          onNodeClick={onNodeClick}
+          onEdgeClick={onEdgeClick}
+          onNodeMouseEnter={onNodeMouseEnter}
+          onNodeMouseMove={onNodeMouseMove}
+          onNodeMouseLeave={onNodeMouseLeave}
+          onNodeContextMenu={onNodeContextMenu}
+          onNodeDoubleClick={onNodeDoubleClick}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          connectionLineType={connectionLineType}
+          connectionLineStyle={connectionLineStyle}
+          connectionLineComponent={connectionLineComponent}
+          connectionLineContainerStyle={connectionLineContainerStyle}
+          selectionKeyCode={selectionKeyCode}
+          selectionOnDrag={selectionOnDrag}
+          selectionMode={selectionMode}
+          deleteKeyCode={deleteKeyCode}
+          multiSelectionKeyCode={multiSelectionKeyCode}
+          panActivationKeyCode={panActivationKeyCode}
+          zoomActivationKeyCode={zoomActivationKeyCode}
+          onlyRenderVisibleElements={onlyRenderVisibleElements}
+          defaultViewport={defaultViewport}
+          translateExtent={translateExtent}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          preventScrolling={preventScrolling}
+          zoomOnScroll={zoomOnScroll}
+          zoomOnPinch={zoomOnPinch}
+          zoomOnDoubleClick={zoomOnDoubleClick}
+          panOnScroll={panOnScroll}
+          panOnScrollSpeed={panOnScrollSpeed}
+          panOnScrollMode={panOnScrollMode}
+          panOnDrag={panOnDrag}
+          onPaneClick={onPaneClick}
+          onPaneMouseEnter={onPaneMouseEnter}
+          onPaneMouseMove={onPaneMouseMove}
+          onPaneMouseLeave={onPaneMouseLeave}
+          onPaneScroll={onPaneScroll}
+          onPaneContextMenu={onPaneContextMenu}
+          onSelectionContextMenu={onSelectionContextMenu}
+          onSelectionStart={onSelectionStart}
+          onSelectionEnd={onSelectionEnd}
+          onEdgeUpdate={onEdgeUpdate}
+          onEdgeContextMenu={onEdgeContextMenu}
+          onEdgeDoubleClick={onEdgeDoubleClick}
+          onEdgeMouseEnter={onEdgeMouseEnter}
+          onEdgeMouseMove={onEdgeMouseMove}
+          onEdgeMouseLeave={onEdgeMouseLeave}
+          onEdgeUpdateStart={onEdgeUpdateStart}
+          onEdgeUpdateEnd={onEdgeUpdateEnd}
+          edgeUpdaterRadius={edgeUpdaterRadius}
+          defaultMarkerColor={defaultMarkerColor}
+          noDragClassName={noDragClassName}
+          noWheelClassName={noWheelClassName}
+          noPanClassName={noPanClassName}
+          rfId={rfId}
+          disableKeyboardA11y={disableKeyboardA11y}
+          nodeOrigin={nodeOrigin}
+          nodeExtent={nodeExtent}
+          viewport={viewport}
+          onViewportChange={onViewportChange}
+        />
+        <StoreUpdater
+          nodes={nodes}
+          edges={edges}
+          defaultNodes={defaultNodes}
+          defaultEdges={defaultEdges}
+          onConnect={onConnect}
+          onConnectStart={onConnectStart}
+          onConnectEnd={onConnectEnd}
+          onClickConnectStart={onClickConnectStart}
+          onClickConnectEnd={onClickConnectEnd}
+          nodesDraggable={nodesDraggable}
+          nodesConnectable={nodesConnectable}
+          nodesFocusable={nodesFocusable}
+          edgesFocusable={edgesFocusable}
+          edgesUpdatable={edgesUpdatable}
+          elementsSelectable={elementsSelectable}
+          elevateNodesOnSelect={elevateNodesOnSelect}
+          elevateEdgesOnSelect={elevateEdgesOnSelect}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          nodeExtent={nodeExtent}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          snapToGrid={snapToGrid}
+          snapGrid={snapGrid}
+          connectionMode={connectionMode}
+          translateExtent={translateExtent}
+          connectOnClick={connectOnClick}
+          defaultEdgeOptions={defaultEdgeOptions}
+          fitView={fitView}
+          fitViewOptions={fitViewOptions}
+          onNodesDelete={onNodesDelete}
+          onEdgesDelete={onEdgesDelete}
+          onDelete={onDelete}
+          onNodeDragStart={onNodeDragStart}
+          onNodeDrag={onNodeDrag}
+          onNodeDragStop={onNodeDragStop}
+          onSelectionDrag={onSelectionDrag}
+          onSelectionDragStart={onSelectionDragStart}
+          onSelectionDragStop={onSelectionDragStop}
+          onMove={onMove}
+          onMoveStart={onMoveStart}
+          onMoveEnd={onMoveEnd}
+          noPanClassName={noPanClassName}
+          nodeOrigin={nodeOrigin}
+          rfId={rfId}
+          autoPanOnConnect={autoPanOnConnect}
+          autoPanOnNodeDrag={autoPanOnNodeDrag}
+          onError={onError}
+          connectionRadius={connectionRadius}
+          isValidConnection={isValidConnection}
+          selectNodesOnDrag={selectNodesOnDrag}
+          nodeDragThreshold={nodeDragThreshold}
+          onBeforeDelete={onBeforeDelete}
+        />
+        <SelectionListener onSelectionChange={onSelectionChange} />
+        {children}
+        <Attribution proOptions={proOptions} position={attributionPosition} />
+        <A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} />
+      </Wrapper>
+    </div>
+  );
+}

-export default ReactFlow;
+export default forwardRef(ReactFlow) as <T extends Node = Node>(
+  props: ReactFlowProps<T> & { ref?: React.ForwardedRef<HTMLUListElement> }
+) => ReturnType<typeof ReactFlow>;