Merge branch 'main' into refactor/d3-drag

src/types/component-props.ts

@@ -1,4 +1,10 @@
-import React, { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
+import React, {
+  ButtonHTMLAttributes,
+  CSSProperties,
+  HTMLAttributes,
+  MouseEvent as ReactMouseEvent,
+  WheelEvent,
+} from 'react';
 
 import {
   OnSelectionChangeFunc,
@@ -118,6 +124,7 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   connectOnClick?: boolean;
   attributionPosition?: AttributionPosition;
   proOptions?: ProOptions;
+  elevateEdgesOnSelect?: boolean;
 }
 
 export type ReactFlowRefType = HTMLDivElement;
@@ -144,7 +151,7 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   onInteractiveChange?: (interactiveStatus: boolean) => void;
 }
 
-export interface ControlButtonProps extends HTMLAttributes<HTMLButtonElement> {}
+export interface ControlButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export interface BackgroundProps extends HTMLAttributes<SVGElement> {
   variant?: BackgroundVariant;

src/types/edges.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import React, { CSSProperties, ComponentType, HTMLAttributes, ReactNode } from 'react';
 import { Connection } from './general';
 import { HandleElement, HandleType } from './handles';
 import { Node } from './nodes';
@@ -101,8 +101,8 @@ export interface WrapEdgeProps<T = any> {
   style?: CSSProperties;
   source: string;
   target: string;
-  sourceHandleId: string | null;
-  targetHandleId: string | null;
+  sourceHandleId?: string | null;
+  targetHandleId?: string | null;
   sourceX: number;
   sourceY: number;
   targetX: number;
@@ -111,7 +111,7 @@ export interface WrapEdgeProps<T = any> {
   targetPosition: Position;
   elementsSelectable?: boolean;
   hidden?: boolean;
-  onEdgeUpdate: OnEdgeUpdateFunc;
+  onEdgeUpdate?: OnEdgeUpdateFunc;
   onContextMenu?: EdgeMouseHandler;
   onMouseEnter?: EdgeMouseHandler;
   onMouseMove?: EdgeMouseHandler;
@@ -162,7 +162,7 @@ export type ConnectionLineComponentProps = {
   sourceHandle?: HandleElement;
 };
 
-export type ConnectionLineComponent = React.ComponentType<ConnectionLineComponentProps>;
+export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps>;
 
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
 

src/types/general.ts

@@ -1,16 +1,18 @@
-import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
 
 import { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
 import { NodeChange, EdgeChange } from './changes';
-import { Node, NodeInternals, NodeDimensionUpdate, NodeDiffUpdate } from './nodes';
-import { Edge } from './edges';
+import { Node, NodeInternals, NodeDimensionUpdate, NodeDiffUpdate, NodeProps, WrapNodeProps } from './nodes';
+import { Edge, EdgeProps, WrapEdgeProps } from './edges';
 import { HandleType, StartHandle } from './handles';
 import { DefaultEdgeOptions } from '.';
 import { ReactFlowInstance } from './instance';
 
-export type NodeTypes = { [key: string]: ReactNode };
-export type EdgeTypes = NodeTypes;
+export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
+export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>> };
+export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
+export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>> };
 
 export type FitView = (fitViewOptions?: FitViewOptions) => void;