refactor(packages) support react 17 and 18

packages/core/src/components/StoreUpdater/index.tsx

@@ -42,6 +42,7 @@ type StoreUpdaterProps = Pick<
   | 'onSelectionDragStop'
   | 'noPanClassName'
   | 'nodeOrigin'
+  | 'id'
 >;
 
 const selector = (s: ReactFlowState) => ({
@@ -112,6 +113,7 @@ const StoreUpdater = ({
   onSelectionDragStop,
   noPanClassName,
   nodeOrigin,
+  id,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -161,6 +163,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('onSelectionDragStop', onSelectionDragStop, store.setState);
   useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState);
   useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState);
+  useDirectStoreUpdater('rfId', id, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);

packages/core/src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, forwardRef, useId } from 'react';
+import { CSSProperties, forwardRef } from 'react';
 import cc from 'classcat';
 
 import Attribution from '../../components/Attribution';
@@ -154,13 +154,13 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       elevateEdgesOnSelect = false,
       disableKeyboardA11y = false,
       style,
+      id = '1',
       ...rest
     },
     ref
   ) => {
     const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped;
     const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
-    const rfId = useId();
 
     return (
       <div
@@ -228,7 +228,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             noWheelClassName={noWheelClassName}
             noPanClassName={noPanClassName}
             elevateEdgesOnSelect={elevateEdgesOnSelect}
-            rfId={rfId}
+            rfId={id}
             disableKeyboardA11y={disableKeyboardA11y}
             nodeOrigin={nodeOrigin}
             nodeExtent={nodeExtent}
@@ -269,11 +269,12 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onSelectionDragStop={onSelectionDragStop}
             noPanClassName={noPanClassName}
             nodeOrigin={nodeOrigin}
+            id={id}
           />
           {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
           {children}
           <Attribution proOptions={proOptions} position={attributionPosition} />
-          {!disableKeyboardA11y && <A11yDescriptions rfId={rfId} />}
+          {!disableKeyboardA11y && <A11yDescriptions rfId={id} />}
         </Wrapper>
       </div>
     );

packages/core/src/store/initialState.ts

@@ -6,6 +6,7 @@ export const infiniteExtent: CoordinateExtent = [
 ];
 
 const initialState: ReactFlowStore = {
+  rfId: '1',
   width: 0,
   height: 0,
   transform: [0, 0, 1],

packages/core/src/types/general.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
-import { Selection as D3Selection, ZoomBehavior } from 'd3';
+import { Selection as D3Selection } from 'd3-selection';
+import { ZoomBehavior } from 'd3-zoom';
 
 import { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
 import { NodeChange, EdgeChange } from './changes';
@@ -130,6 +131,7 @@ export interface ViewportHelperFunctions {
 }
 
 export type ReactFlowStore = {
+  rfId: string;
   width: number;
   height: number;
   transform: Transform;

packages/core/src/utils/graph.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Selection as D3Selection } from 'd3';
+import { Selection as D3Selection } from 'd3-selection';
 
 import { boxToRect, clamp, devWarn, getBoundsOfBoxes, rectToBox } from '../utils';
 import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';