chore(types): cleanup

packages/background/src/types.ts

@@ -6,7 +6,7 @@ export enum BackgroundVariant {
   Cross = 'cross',
 }
 
-export interface BackgroundProps {
+export type BackgroundProps = {
   color?: string;
   className?: string;
   gap?: number | [number, number];
@@ -14,4 +14,4 @@ export interface BackgroundProps {
   lineWidth?: number;
   variant?: BackgroundVariant;
   style?: CSSProperties;
-}
+};

packages/controls/src/ControlButton.tsx

@@ -1,18 +1,10 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import cc from 'classcat';
 
-import { ControlButtonProps } from './types';
+import type { ControlButtonProps } from './types';
 
-const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({
+const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({ children, className, ...rest }) => (
-  children,
+  <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
-  className,
-  ...rest
-}) => (
-  <button
-    type="button"
-    className={cc(['react-flow__controls-button', className])}
-    {...rest}
-  >
     {children}
   </button>
 );

packages/controls/src/Controls.tsx

@@ -1,6 +1,8 @@
-import { memo, FC, useEffect, useState, PropsWithChildren } from 'react';
+import { memo, useEffect, useState } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import cc from 'classcat';
-import { useStore, useStoreApi, useReactFlow, ReactFlowState, Panel } from '@reactflow/core';
+import { useStore, useStoreApi, useReactFlow, Panel } from '@reactflow/core';
+import type { ReactFlowState } from '@reactflow/core';
 
 import PlusIcon from './Icons/Plus';
 import MinusIcon from './Icons/Minus';
@@ -9,7 +11,7 @@ import LockIcon from './Icons/Lock';
 import UnlockIcon from './Icons/Unlock';
 import ControlButton from './ControlButton';
 
-import { ControlProps } from './types';
+import type { ControlProps } from './types';
 
 const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
 

packages/controls/src/types.ts

@@ -1,7 +1,7 @@
-import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import type { ButtonHTMLAttributes, HTMLAttributes } from 'react';
-import { FitViewOptions, PanelPosition } from '@reactflow/core';
+import type { FitViewOptions, PanelPosition } from '@reactflow/core';
 
-export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
+export type ControlProps = HTMLAttributes<HTMLDivElement> & {
   showZoom?: boolean;
   showFitView?: boolean;
   showInteractive?: boolean;
@@ -11,6 +11,6 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   onFitView?: () => void;
   onInteractiveChange?: (interactiveStatus: boolean) => void;
   position?: PanelPosition;
-}
+};
 
 export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;

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

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import { useStore } from '../../hooks/useStore';
-import { ReactFlowState } from '../../types';
+import type { ReactFlowState } from '../../types';
 
 const style: CSSProperties = { display: 'none' };
 const ariaLiveStyle: CSSProperties = {

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

@@ -1,5 +1,5 @@
 import Panel from '../Panel';
-import { PanelPosition, ProOptions } from '../../types';
+import type { PanelPosition, ProOptions } from '../../types';
 
 type AttributionProps = {
   proOptions?: ProOptions;

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

@@ -4,9 +4,10 @@ import shallow from 'zustand/shallow';
 import { useStore } from '../../hooks/useStore';
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
-import { ConnectionLineType, ConnectionLineComponent, HandleType, Position, ReactFlowStore } from '../../types';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 import { internalsSymbol } from '../../utils';
+import type { ConnectionLineComponent, HandleType, ReactFlowStore } from '../../types';
+import { Position, ConnectionLineType } from '../../types';
 
 type ConnectionLineProps = {
   connectionNodeId: string;

packages/core/src/components/Edges/BaseEdge.tsx

@@ -1,5 +1,5 @@
 import EdgeText from './EdgeText';
-import { BaseEdgeProps } from '../../types';
+import type { BaseEdgeProps } from '../../types';
 
 const BaseEdge = ({
   path,

packages/core/src/components/Edges/BezierEdge.tsx

@@ -2,7 +2,8 @@ import { memo } from 'react';
 
 import BaseEdge from './BaseEdge';
 import { getBezierEdgeCenter } from './utils';
-import { BezierEdgeProps, Position } from '../../types';
+import { Position } from '../../types';
+import type { BezierEdgeProps } from '../../types';
 
 export interface GetBezierPathParams {
   sourceX: number;

packages/core/src/components/Edges/EdgeAnchor.tsx

@@ -1,4 +1,4 @@
-import { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react';
+import type { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react';
 import cc from 'classcat';
 
 import { Position } from '../../types';

packages/core/src/components/Edges/EdgeText.tsx

@@ -1,4 +1,5 @@
-import { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react';
+import { memo, useRef, useState, useEffect } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import cc from 'classcat';
 
 import { EdgeTextProps, Rect } from '../../types';

packages/core/src/components/Edges/SimpleBezierEdge.tsx

@@ -1,7 +1,9 @@
 import { memo } from 'react';
-import { EdgeProps, Position } from '../../types';
+
 import BaseEdge from './BaseEdge';
 import { getBezierEdgeCenter } from './utils';
+import { Position } from '../../types';
+import type { EdgeProps } from '../../types';
 
 export interface GetSimpleBezierPathParams {
   sourceX: number;

packages/core/src/components/Edges/SmoothStepEdge.tsx

@@ -1,8 +1,9 @@
 import { memo } from 'react';
 
-import { SmoothStepEdgeProps, Position, XYPosition } from '../../types';
 import BaseEdge from './BaseEdge';
 import { getEdgeCenter } from './utils';
+import { Position } from '../../types';
+import type { SmoothStepEdgeProps, XYPosition } from '../../types';
 
 export interface GetSmoothStepPathParams {
   sourceX: number;

packages/core/src/components/Edges/StepEdge.tsx

@@ -1,7 +1,7 @@
 import { memo, useMemo } from 'react';
 
-import { SmoothStepEdgeProps } from '../../types';
 import SmoothStepEdge from './SmoothStepEdge';
+import type { SmoothStepEdgeProps } from '../../types';
 
 const StepEdge = memo((props: SmoothStepEdgeProps) => (
   <SmoothStepEdge

packages/core/src/components/Edges/StraightEdge.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
 
 import BaseEdge from './BaseEdge';
-import { EdgeProps } from '../../types';
 import { getEdgeCenter } from './utils';
+import type { EdgeProps } from '../../types';
 
 export type GetStraightPathParams = {
   sourceX: number;

packages/core/src/components/Edges/utils.ts

@@ -1,7 +1,7 @@
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
 
-import { Edge, MarkerType, ReactFlowState } from '../../types';
+import type { Edge, MarkerType, ReactFlowState } from '../../types';
 
 export const getMarkerEnd = (markerType?: MarkerType, markerEndId?: string): string => {
   if (typeof markerEndId !== 'undefined' && markerEndId) {

packages/core/src/components/Edges/wrapEdge.tsx

@@ -1,4 +1,5 @@
-import { memo, ComponentType, useState, useMemo, KeyboardEvent, useRef } from 'react';
+import { memo, useState, useMemo, useRef } from 'react';
+import type { ComponentType, KeyboardEvent } from 'react';
 import cc from 'classcat';
 
 import { useStoreApi } from '../../hooks/useStore';
@@ -7,8 +8,8 @@ import { handleMouseDown } from '../Handle/handler';
 import { EdgeAnchor } from './EdgeAnchor';
 import { getMarkerId } from '../../utils/graph';
 import { getMouseHandler } from './utils';
-import { EdgeProps, WrapEdgeProps, Connection } from '../../types';
 import { elementSelectionKeys } from '../../utils';
+import type { EdgeProps, WrapEdgeProps, Connection } from '../../types';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
   const EdgeWrapper = ({

packages/core/src/components/Handle/handler.ts

@@ -1,8 +1,9 @@
-import { MouseEvent as ReactMouseEvent } from 'react';
+import type { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
 
 import { getHostForElement } from '../../utils';
-import { OnConnect, ConnectionMode, Connection, HandleType, ReactFlowState } from '../../types';
+import { ConnectionMode } from '../../types';
+import type { OnConnect, Connection, HandleType, ReactFlowState } from '../../types';
 
 type ValidConnectionFunc = (connection: Connection) => boolean;
 

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

@@ -4,10 +4,11 @@ import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import NodeIdContext from '../../contexts/NodeIdContext';
-import { HandleProps, Connection, ReactFlowState, Position } from '../../types';
 import { checkElementBelowIsValid, handleMouseDown } from './handler';
 import { getHostForElement } from '../../utils';
 import { addEdge } from '../../utils/graph';
+import { Position } from '../../types';
+import type { HandleProps, Connection, ReactFlowState } from '../../types';
 
 const alwaysValid = () => true;
 

packages/core/src/components/Nodes/DefaultNode.tsx

@@ -1,7 +1,8 @@
 import { memo } from 'react';
 
 import Handle from '../../components/Handle';
-import { NodeProps, Position } from '../../types';
+import { Position } from '../../types';
+import type { NodeProps } from '../../types';
 
 const DefaultNode = ({
   data,

packages/core/src/components/Nodes/InputNode.tsx

@@ -1,7 +1,8 @@
 import { memo } from 'react';
 
 import Handle from '../../components/Handle';
-import { NodeProps, Position } from '../../types';
+import { Position } from '../../types';
+import type { NodeProps } from '../../types';
 
 const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
   <>

packages/core/src/components/Nodes/OutputNode.tsx

@@ -1,7 +1,8 @@
 import { memo } from 'react';
 
 import Handle from '../../components/Handle';
-import { NodeProps, Position } from '../../types';
+import { Position } from '../../types';
+import type { NodeProps } from '../../types';
 
 const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
   <>

packages/core/src/components/Nodes/utils.ts

@@ -1,8 +1,9 @@
 import { MouseEvent } from 'react';
 import { StoreApi } from 'zustand';
 
-import { HandleElement, Node, NodeOrigin, Position, ReactFlowState } from '../../types';
 import { getDimensions } from '../../utils';
+import { Position } from '../../types';
+import type { HandleElement, Node, NodeOrigin, ReactFlowState } from '../../types';
 
 export const getHandleBounds = (
   selector: string,

packages/core/src/components/Nodes/wrapNode.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef, memo, ComponentType, MouseEvent, KeyboardEvent } from 'react';
+import { useEffect, useRef, memo } from 'react';
+import type { ComponentType, MouseEvent, KeyboardEvent } from 'react';
 import cc from 'classcat';
 
 import { useStoreApi } from '../../hooks/useStore';
@@ -7,8 +8,8 @@ import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions';
 import useDrag from '../../hooks/useDrag';
 import useUpdateNodePositions from '../../hooks/useUpdateNodePositions';
 import { getMouseHandler, handleNodeClick } from './utils';
-import { NodeProps, WrapNodeProps, XYPosition } from '../../types';
 import { elementSelectionKeys } from '../../utils';
+import type { NodeProps, WrapNodeProps, XYPosition } from '../../types';
 
 export const arrowKeyDiffs: Record<string, XYPosition> = {
   ArrowUp: { x: 0, y: -1 },

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

@@ -3,16 +3,17 @@
  * made a selection with on or several nodes
  */
 
-import { memo, useRef, MouseEvent, KeyboardEvent, useEffect } from 'react';
+import { memo, useRef, useEffect } from 'react';
+import type { MouseEvent, KeyboardEvent } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import { Node, ReactFlowState } from '../../types';
 import { getRectOfNodes } from '../../utils/graph';
 import useDrag from '../../hooks/useDrag';
 import { arrowKeyDiffs } from '../Nodes/wrapNode';
 import useUpdateNodePositions from '../../hooks/useUpdateNodePositions';
+import type { Node, ReactFlowState } from '../../types';
 
 export interface NodesSelectionProps {
   onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;

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

@@ -1,8 +1,8 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import cc from 'classcat';
 
-import { PanelPosition, ReactFlowState } from '../../types';
 import { useStore } from '../../hooks/useStore';
+import type { PanelPosition, ReactFlowState } from '../../types';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
   position: PanelPosition;

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

@@ -1,9 +1,10 @@
-import { FC, PropsWithChildren, useRef } from 'react';
+import { useRef } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { StoreApi } from 'zustand';
 
 import { Provider } from '../../contexts/RFStoreContext';
 import { createRFStore } from '../../store';
-import { ReactFlowState } from '../../types';
+import type { ReactFlowState } from '../../types';
 
 const ReactFlowProvider: FC<PropsWithChildren> = ({ children }) => {
   const storeRef = useRef<StoreApi<ReactFlowState> | null>(null);

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

@@ -1,8 +1,8 @@
 import { memo, useEffect } from 'react';
 import shallow from 'zustand/shallow';
 
-import { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '../../types';
 import { useStore, useStoreApi } from '../../hooks/useStore';
+import type { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '../../types';
 
 type SelectionListenerProps = {
   onSelectionChange?: OnSelectionChangeFunc;

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

@@ -3,7 +3,7 @@ import { StoreApi } from 'zustand';
 import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '../../types';
+import type { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '../../types';
 
 type StoreUpdaterProps = Pick<
   ReactFlowProps,

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

@@ -7,8 +7,8 @@ import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges } from '../../utils/changes';
-import { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types';
 import { getConnectedEdges, getNodesInside } from '../../utils/graph';
+import type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types';
 
 type SelectionRect = Rect & {
   startX: number;

packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -1,16 +1,18 @@
 import { memo, useCallback } from 'react';
 
 import { useStore } from '../../hooks/useStore';
-import { EdgeMarker, ReactFlowState } from '../../types';
 import { getMarkerId } from '../../utils/graph';
 import { useMarkerSymbol } from './MarkerSymbols';
-interface MarkerProps extends EdgeMarker {
+import type { EdgeMarker, ReactFlowState } from '../../types';
+
+type MarkerProps = EdgeMarker & {
   id: string;
-}
+};
-interface MarkerDefinitionsProps {
+
+type MarkerDefinitionsProps = {
   defaultColor: string;
   rfId?: string;
-}
+};
 
 const Marker = ({
   id,

packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
-import { MarkerType, EdgeMarker } from '../../types';
+
 import { devWarn } from '../../utils';
+import { MarkerType } from '../../types';
+import type { EdgeMarker } from '../../types';
 
 type SymbolProps = Omit<EdgeMarker, 'type'>;
 

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

@@ -8,39 +8,39 @@ import ConnectionLine from '../../components/ConnectionLine/index';
 import MarkerDefinitions from './MarkerDefinitions';
 import { getEdgePositions, getHandle, getNodeData } from './utils';
 
-import { Position, Edge, ConnectionMode, ReactFlowState } from '../../types';
 import { GraphViewProps } from '../GraphView';
 import { devWarn } from '../../utils';
+import { ConnectionMode, Position } from '../../types';
+import type { Edge, ReactFlowState } from '../../types';
 
-interface EdgeRendererProps
+type EdgeRendererProps = Pick<
-  extends Pick<
+  GraphViewProps,
-    GraphViewProps,
+  | 'edgeTypes'
-    | 'edgeTypes'
+  | 'connectionLineType'
-    | 'connectionLineType'
+  | 'connectionLineType'
-    | 'connectionLineType'
+  | 'connectionLineStyle'
-    | 'connectionLineStyle'
+  | 'connectionLineComponent'
-    | 'connectionLineComponent'
+  | 'connectionLineContainerStyle'
-    | 'connectionLineContainerStyle'
+  | 'connectionLineContainerStyle'
-    | 'connectionLineContainerStyle'
+  | 'onEdgeClick'
-    | 'onEdgeClick'
+  | 'onEdgeDoubleClick'
-    | 'onEdgeDoubleClick'
+  | 'defaultMarkerColor'
-    | 'defaultMarkerColor'
+  | 'onlyRenderVisibleElements'
-    | 'onlyRenderVisibleElements'
+  | 'onEdgeUpdate'
-    | 'onEdgeUpdate'
+  | 'onEdgeContextMenu'
-    | 'onEdgeContextMenu'
+  | 'onEdgeMouseEnter'
-    | 'onEdgeMouseEnter'
+  | 'onEdgeMouseMove'
-    | 'onEdgeMouseMove'
+  | 'onEdgeMouseLeave'
-    | 'onEdgeMouseLeave'
+  | 'onEdgeUpdateStart'
-    | 'onEdgeUpdateStart'
+  | 'onEdgeUpdateEnd'
-    | 'onEdgeUpdateEnd'
+  | 'edgeUpdaterRadius'
-    | 'edgeUpdaterRadius'
+  | 'noPanClassName'
-    | 'noPanClassName'
+  | 'elevateEdgesOnSelect'
-    | 'elevateEdgesOnSelect'
+  | 'rfId'
-    | 'rfId'
+  | 'disableKeyboardA11y'
-    | 'disableKeyboardA11y'
+> & {
-  > {
   elevateEdgesOnSelect: boolean;
-}
+};
 
 const selector = (s: ReactFlowState) => ({
   connectionNodeId: s.connectionNodeId,

packages/core/src/container/EdgeRenderer/utils.ts

@@ -1,19 +1,20 @@
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
+
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
-import {
+import { internalsSymbol, rectToBox } from '../../utils';
+import { Position } from '../../types';
+import type {
   EdgeProps,
   EdgeTypes,
   EdgeTypesWrapped,
   HandleElement,
   NodeHandleBounds,
   Node,
-  Position,
   Rect,
   Transform,
   XYPosition,
 } from '../../types';
-import { internalsSymbol, rectToBox } from '../../utils';
 
 export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
 

packages/core/src/container/FlowRenderer/Pane.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 import cc from 'classcat';
 
 import { useStore } from '../../hooks/useStore';

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

@@ -1,4 +1,5 @@
-import { memo, ReactNode, WheelEvent, MouseEvent } from 'react';
+import { memo } from 'react';
+import type { ReactNode, WheelEvent, MouseEvent } from 'react';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
@@ -8,8 +9,7 @@ import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
 import Pane from './Pane';
-
+import type { ReactFlowState } from '../../types';
-import { ReactFlowState } from '../../types';
 
 export type FlowRendererProps = Omit<
   GraphViewProps,

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

@@ -5,39 +5,35 @@ import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import ViewportWrapper from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
-import {
+import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types';
-  NodeTypesWrapped,
-  EdgeTypesWrapped,
-  ConnectionLineType,
-  KeyCode,
-  ReactFlowProps,
-  Viewport,
-  CoordinateExtent,
-  NodeOrigin,
-} from '../../types';
 
-export interface GraphViewProps
+export type GraphViewProps = Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> &
-  extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> {
+  Required<
-  nodeTypes: NodeTypesWrapped;
+    Pick<
-  edgeTypes: EdgeTypesWrapped;
+      ReactFlowProps,
-  selectionKeyCode: KeyCode | null;
+      | 'selectionKeyCode'
-  deleteKeyCode: KeyCode | null;
+      | 'deleteKeyCode'
-  multiSelectionKeyCode: KeyCode | null;
+      | 'multiSelectionKeyCode'
-  connectionLineType: ConnectionLineType;
+      | 'connectionLineType'
-  onlyRenderVisibleElements: boolean;
+      | 'onlyRenderVisibleElements'
-  translateExtent: CoordinateExtent;
+      | 'translateExtent'
-  minZoom: number;
+      | 'minZoom'
-  maxZoom: number;
+      | 'maxZoom'
-  defaultMarkerColor: string;
+      | 'defaultMarkerColor'
-  selectNodesOnDrag: boolean;
+      | 'selectNodesOnDrag'
-  noDragClassName: string;
+      | 'noDragClassName'
-  noWheelClassName: string;
+      | 'noDragClassName'
-  noPanClassName: string;
+      | 'noWheelClassName'
-  defaultViewport: Viewport;
+      | 'noPanClassName'
-  rfId: string;
+      | 'defaultViewport'
-  disableKeyboardA11y: boolean;
+      | 'disableKeyboardA11y'
-  nodeOrigin: NodeOrigin;
+      | 'nodeOrigin'
-}
+    >
+  > & {
+    nodeTypes: NodeTypesWrapped;
+    edgeTypes: EdgeTypesWrapped;
+    rfId: string;
+  };
 
 const GraphView = ({
   nodeTypes,

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

@@ -1,4 +1,5 @@
-import { memo, useMemo, ComponentType, useEffect, useRef } from 'react';
+import { memo, useMemo, useEffect, useRef } from 'react';
+import type { ComponentType } from 'react';
 import shallow from 'zustand/shallow';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
@@ -6,8 +7,9 @@ import { useStore } from '../../hooks/useStore';
 import { clampPosition, devWarn, internalsSymbol } from '../../utils';
 import { containerStyle } from '../../styles';
 import { GraphViewProps } from '../GraphView';
-import { Position, ReactFlowState, WrapNodeProps } from '../../types';
 import { getPositionWithOrigin } from './utils';
+import { Position } from '../../types';
+import type { ReactFlowState, WrapNodeProps } from '../../types';
 
 type NodeRendererProps = Pick<
   GraphViewProps,

packages/core/src/container/NodeRenderer/utils.ts

@@ -1,12 +1,12 @@
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
 
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import GroupNode from '../../components/Nodes/GroupNode';
 import wrapNode from '../../components/Nodes/wrapNode';
-import { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types';
 import { devWarn } from '../../utils';
+import type { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types';
 
 export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
 

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

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 
 import { useStoreApi } from '../../hooks/useStore';
 import ReactFlowProvider from '../../components/ReactFlowProvider';

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

@@ -1,4 +1,5 @@
-import { CSSProperties, forwardRef } from 'react';
+import { forwardRef } from 'react';
+import type { CSSProperties } from 'react';
 import cc from 'classcat';
 
 import Attribution from '../../components/Attribution';
@@ -9,27 +10,24 @@ import OutputNode from '../../components/Nodes/OutputNode';
 import GroupNode from '../../components/Nodes/GroupNode';
 import SelectionListener from '../../components/SelectionListener';
 import StoreUpdater from '../../components/StoreUpdater';
-
+import A11yDescriptions from '../../components/A11yDescriptions';
-import {
+import { createEdgeTypes } from '../EdgeRenderer/utils';
-  ConnectionLineType,
+import { createNodeTypes } from '../NodeRenderer/utils';
-  ConnectionMode,
+import GraphView from '../GraphView';
+import Wrapper from './Wrapper';
+import { infiniteExtent } from '../../store/initialState';
+import { useNodeOrEdgeTypes } from './utils';
+import { ConnectionLineType, ConnectionMode, PanOnScrollMode } from '../../types';
+import type {
   EdgeTypes,
   EdgeTypesWrapped,
   NodeOrigin,
   NodeTypes,
   NodeTypesWrapped,
-  PanOnScrollMode,
   ReactFlowProps,
   ReactFlowRefType,
   Viewport,
 } from '../../types';
-import { createEdgeTypes } from '../EdgeRenderer/utils';
-import GraphView from '../GraphView';
-import { createNodeTypes } from '../NodeRenderer/utils';
-import { useNodeOrEdgeTypes } from './utils';
-import Wrapper from './Wrapper';
-import A11yDescriptions from '../../components/A11yDescriptions';
-import { infiniteExtent } from '../../store/initialState';
 
 const defaultNodeTypes: NodeTypes = {
   input: InputNode,

packages/core/src/container/ReactFlow/utils.ts

@@ -1,10 +1,10 @@
 import { useMemo, useRef } from 'react';
 import shallow from 'zustand/shallow';
 
-import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
 import { devWarn } from '../../utils';
 import { CreateEdgeTypes } from '../EdgeRenderer/utils';
 import { CreateNodeTypes } from '../NodeRenderer/utils';
+import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
 
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;

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

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { useStore } from '../../hooks/useStore';
-import { ReactFlowState } from '../../types';
+import type { ReactFlowState } from '../../types';
 
 const selector = (s: ReactFlowState) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 

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

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useRef } from 'react';
-import { D3ZoomEvent, zoom, zoomIdentity } from 'd3-zoom';
+import { zoom, zoomIdentity } from 'd3-zoom';
+import type { D3ZoomEvent } from 'd3-zoom';
 import { select, pointer } from 'd3-selection';
 import shallow from 'zustand/shallow';
 
@@ -8,9 +9,10 @@ import { clamp } from '../../utils';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import { FlowRendererProps } from '../FlowRenderer';
 import { containerStyle } from '../../styles';
-import { Viewport, PanOnScrollMode, ReactFlowState } from '../../types';
+import type { FlowRendererProps } from '../FlowRenderer';
+import { PanOnScrollMode } from '../../types';
+import type { Viewport, ReactFlowState } from '../../types';
 
 type ZoomPaneProps = Omit<
   FlowRendererProps,

packages/core/src/hooks/useDrag/index.ts

@@ -1,12 +1,13 @@
-import { RefObject, useEffect, useRef, MouseEvent, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
+import type { RefObject, MouseEvent } from 'react';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
 import type { D3DragEvent, SubjectPosition } from 'd3';
 
 import { useStoreApi } from '../../hooks/useStore';
-import { NodeDragItem, Node, SelectionDragHandler } from '../../types';
 import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils';
 import { handleNodeClick } from '../../components/Nodes/utils';
+import type { NodeDragItem, Node, SelectionDragHandler } from '../../types';
 
 export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
 export type UseDragData = { dx: number; dy: number };

packages/core/src/hooks/useDrag/utils.ts

@@ -1,7 +1,7 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 
-import { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types';
 import { clampPosition, devWarn } from '../../utils';
+import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types';
 
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
   if (!node.parentNode) {

packages/core/src/hooks/useEdges.ts

@@ -1,5 +1,5 @@
 import { useStore } from '../hooks/useStore';
-import { Edge, ReactFlowState } from '../types';
+import type { Edge, ReactFlowState } from '../types';
 
 const edgesSelector = (state: ReactFlowState) => state.edges;
 

packages/core/src/hooks/useGlobalKeyHandler.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useStoreApi } from '../hooks/useStore';
 import useKeyPress from './useKeyPress';
 import { getConnectedEdges } from '../utils/graph';
-import { KeyCode, NodeChange, Node } from '../types';
+import type { KeyCode, NodeChange, Node } from '../types';
 
 interface HookParams {
   deleteKeyCode: KeyCode | null;

packages/core/src/hooks/useKeyPress.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 
-import { KeyCode } from '../types';
+import type { KeyCode } from '../types';
 
 type Keys = Array<string>;
 type PressedKeys = Set<string>;

packages/core/src/hooks/useNodes.ts

@@ -1,5 +1,5 @@
 import { useStore } from '../hooks/useStore';
-import { Node, ReactFlowState } from '../types';
+import type { Node, ReactFlowState } from '../types';
 
 const nodesSelector = (state: ReactFlowState) => Array.from(state.nodeInternals.values());
 

packages/core/src/hooks/useNodesEdgesState.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useCallback, SetStateAction, Dispatch } from 'react';
+import { useState, useCallback } from 'react';
+import type { SetStateAction, Dispatch } from 'react';
 
 import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';
-import { Node, NodeChange, Edge, EdgeChange } from '../types';
+import type { Node, NodeChange, Edge, EdgeChange } from '../types';
 
 type ApplyChanges<ItemType, ChangesType> = (changes: ChangesType[], items: ItemType[]) => ItemType[];
 type OnChange<ChangesType> = (changes: ChangesType[]) => void;

packages/core/src/hooks/useNodesInitialized.ts

@@ -1,6 +1,6 @@
-import { ReactFlowState } from '../types';
 import { internalsSymbol } from '../utils';
 import { useStore } from './useStore';
+import type { ReactFlowState } from '../types';
 
 const selector = (s: ReactFlowState) => {
   if (s.nodeInternals.size === 0) {

packages/core/src/hooks/useOnInitHandler.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 import useReactFlow from './useReactFlow';
-import { OnInit } from '../types';
+import type { OnInit } from '../types';
 
 function useOnInitHandler(onInit: OnInit | undefined) {
   const rfInstance = useReactFlow();

packages/core/src/hooks/useReactFlow.ts

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from '../hooks/useStore';
-import {
+import type {
   ReactFlowInstance,
   Instance,
   NodeAddChange,

packages/core/src/hooks/useResizeHandler.ts

@@ -1,4 +1,5 @@
-import { useEffect, MutableRefObject } from 'react';
+import { useEffect } from 'react';
+import type { MutableRefObject } from 'react';
 
 import { useStoreApi } from '../hooks/useStore';
 import { devWarn, getDimensions } from '../utils';

packages/core/src/hooks/useStore.ts

@@ -1,8 +1,9 @@
 import { useContext, useMemo } from 'react';
-import { StoreApi, useStore as useZustandStore } from 'zustand';
+import { useStore as useZustandStore } from 'zustand';
+import type { StoreApi } from 'zustand';
 
 import StoreContext from '../contexts/RFStoreContext';
-import { ReactFlowState } from '../types';
+import type { ReactFlowState } from '../types';
 
 const errorMessage =
   '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#100';

packages/core/src/hooks/useUpdateNodeInternals.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { useStoreApi } from '../hooks/useStore';
-import { UpdateNodeInternals } from '../types';
+import type { UpdateNodeInternals } from '../types';
 
 function useUpdateNodeInternals(): UpdateNodeInternals {
   const store = useStoreApi();

packages/core/src/hooks/useUpdateNodePositions.ts

@@ -2,8 +2,7 @@ import { useCallback } from 'react';
 
 import { useStoreApi } from '../hooks/useStore';
 import { calcNextPosition } from './useDrag/utils';
-
+import type { XYPosition } from '../types';
-import { XYPosition } from '../types';
 
 function useUpdateNodePositions() {
   const store = useStoreApi();

packages/core/src/hooks/useViewport.ts

@@ -1,7 +1,7 @@
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../hooks/useStore';
-import { Viewport, ReactFlowState } from '../types';
+import type { Viewport, ReactFlowState } from '../types';
 
 const viewportSelector = (state: ReactFlowState) => ({
   x: state.transform[0],

packages/core/src/hooks/useViewportHelper.ts

@@ -4,8 +4,8 @@ import shallow from 'zustand/shallow';
 
 import { useStoreApi, useStore } from '../hooks/useStore';
 import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph';
-import { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types';
 import { fitView as fitViewStore } from '../store/utils';
+import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};

packages/core/src/hooks/useVisibleEdges.ts

@@ -2,8 +2,8 @@ import { useCallback } from 'react';
 
 import { useStore } from '../hooks/useStore';
 import { isEdgeVisible } from '../container/EdgeRenderer/utils';
-import { ReactFlowState, NodeInternals, Edge } from '../types';
 import { internalsSymbol, isNumeric } from '../utils';
+import type { ReactFlowState, NodeInternals, Edge } from '../types';
 
 const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
 

packages/core/src/hooks/useVisibleNodes.ts

@@ -2,8 +2,7 @@ import { useCallback } from 'react';
 
 import { useStore } from '../hooks/useStore';
 import { getNodesInside } from '../utils/graph';
-
+import type { ReactFlowState } from '../types';
-import { ReactFlowState } from '../types';
 
 function useVisibleNodes(onlyRenderVisible: boolean) {
   const nodes = useStore(

packages/core/src/store/index.ts

@@ -1,8 +1,11 @@
 import { createStore } from 'zustand';
 
 import { clampPosition, getDimensions, internalsSymbol } from '../utils';
-import { applyNodeChanges } from '../utils/changes';
+import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
-import {
+import { getHandleBounds } from '../components/Nodes/utils';
+import { createNodeInternals, fitView, updateNodesAndEdgesSelections } from './utils';
+import initialState from './initialState';
+import type {
   ReactFlowState,
   Node,
   Edge,
@@ -15,10 +18,6 @@ import {
   NodeDragItem,
   UnselectNodesAndEdgesParams,
 } from '../types';
-import { getHandleBounds } from '../components/Nodes/utils';
-import { createSelectionChange, getSelectionChanges } from '../utils/changes';
-import { createNodeInternals, fitView, updateNodesAndEdgesSelections } from './utils';
-import initialState from './initialState';
 
 const createRFStore = () =>
   createStore<ReactFlowState>((set, get) => ({

packages/core/src/store/initialState.ts

@@ -1,4 +1,5 @@
-import { CoordinateExtent, ReactFlowStore, ConnectionMode } from '../types';
+import { ConnectionMode } from '../types';
+import type { CoordinateExtent, ReactFlowStore } from '../types';
 
 export const infiniteExtent: CoordinateExtent = [
   [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],

packages/core/src/store/utils.ts

@@ -1,9 +1,9 @@
 import { zoomIdentity } from 'd3-zoom';
-import { StoreApi } from 'zustand';
+import type { StoreApi } from 'zustand';
 
 import { internalsSymbol, isNumeric } from '../utils';
 import { getD3Transition, getRectOfNodes, getTransformForBounds } from '../utils/graph';
-import {
+import type {
   Edge,
   EdgeSelectionChange,
   Node,

packages/core/src/styles/index.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 export const containerStyle: CSSProperties = {
   position: 'absolute',

packages/core/src/types/changes.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { XYPosition, Dimensions } from './utils';
+import type { XYPosition, Dimensions } from './utils';
-import { Node } from './nodes';
+import type { Node } from './nodes';
-import { Edge } from './edges';
+import type { Edge } from './edges';
 
 export type NodeDimensionChange = {
   id: string;

packages/core/src/types/component-props.ts

@@ -1,6 +1,6 @@
-import React, { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
+import type { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
 
-import {
+import type {
   OnSelectionChangeFunc,
   NodeTypes,
   EdgeTypes,
@@ -33,19 +33,17 @@ import {
   SelectionDragHandler,
   Viewport,
   NodeOrigin,
+  EdgeMouseHandler,
+  HandleType,
 } from '.';
-import { HandleType } from './handles';
 
-export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
+export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   nodes?: Node[];
   edges?: Edge[];
   defaultNodes?: Node[];
   defaultEdges?: Edge[];
   defaultEdgeOptions?: DefaultEdgeOptions;
-  onNodesChange?: OnNodesChange;
-  onEdgesChange?: OnEdgesChange;
   onNodeClick?: NodeMouseHandler;
-  onEdgeClick?: (event: React.MouseEvent, node: Edge) => void;
   onNodeDoubleClick?: NodeMouseHandler;
   onNodeMouseEnter?: NodeMouseHandler;
   onNodeMouseMove?: NodeMouseHandler;
@@ -54,8 +52,23 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   onNodeDragStart?: NodeDragHandler;
   onNodeDrag?: NodeDragHandler;
   onNodeDragStop?: NodeDragHandler;
+  onEdgeClick?: (event: ReactMouseEvent, node: Edge) => void;
+  onEdgeUpdate?: OnEdgeUpdateFunc;
+  onEdgeContextMenu?: EdgeMouseHandler;
+  onEdgeMouseEnter?: EdgeMouseHandler;
+  onEdgeMouseMove?: EdgeMouseHandler;
+  onEdgeMouseLeave?: EdgeMouseHandler;
+  onEdgeDoubleClick?: EdgeMouseHandler;
+  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
+  onNodesChange?: OnNodesChange;
+  onEdgesChange?: OnEdgesChange;
   onNodesDelete?: OnNodesDelete;
   onEdgesDelete?: OnEdgesDelete;
+  onSelectionDragStart?: SelectionDragHandler;
+  onSelectionDrag?: SelectionDragHandler;
+  onSelectionDragStop?: SelectionDragHandler;
+  onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
   onConnect?: OnConnect;
   onConnectStart?: OnConnectStart;
   onConnectEnd?: OnConnectEnd;
@@ -66,10 +79,6 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   onMoveStart?: OnMoveStart;
   onMoveEnd?: OnMoveEnd;
   onSelectionChange?: OnSelectionChangeFunc;
-  onSelectionDragStart?: SelectionDragHandler;
-  onSelectionDrag?: SelectionDragHandler;
-  onSelectionDragStop?: SelectionDragHandler;
-  onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
   onPaneScroll?: (event?: WheelEvent) => void;
   onPaneClick?: (event: ReactMouseEvent) => void;
   onPaneContextMenu?: (event: ReactMouseEvent) => void;
@@ -78,11 +87,11 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   onPaneMouseLeave?: (event: ReactMouseEvent) => void;
   nodeTypes?: NodeTypes;
   edgeTypes?: EdgeTypes;
-  connectionMode?: ConnectionMode;
   connectionLineType?: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
   connectionLineComponent?: ConnectionLineComponent;
   connectionLineContainerStyle?: CSSProperties;
+  connectionMode?: ConnectionMode;
   deleteKeyCode?: KeyCode | null;
   selectionKeyCode?: KeyCode | null;
   multiSelectionKeyCode?: KeyCode | null;
@@ -112,14 +121,6 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   panOnScrollSpeed?: number;
   panOnScrollMode?: PanOnScrollMode;
   zoomOnDoubleClick?: boolean;
-  onEdgeUpdate?: OnEdgeUpdateFunc;
-  onEdgeContextMenu?: (event: ReactMouseEvent, edge: Edge) => void;
-  onEdgeMouseEnter?: (event: ReactMouseEvent, edge: Edge) => void;
-  onEdgeMouseMove?: (event: ReactMouseEvent, edge: Edge) => void;
-  onEdgeMouseLeave?: (event: ReactMouseEvent, edge: Edge) => void;
-  onEdgeDoubleClick?: (event: ReactMouseEvent, edge: Edge) => void;
-  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
   edgeUpdaterRadius?: number;
   noDragClassName?: string;
   noWheelClassName?: string;
@@ -131,6 +132,6 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   proOptions?: ProOptions;
   elevateEdgesOnSelect?: boolean;
   disableKeyboardA11y?: boolean;
-}
+};
 
 export type ReactFlowRefType = HTMLDivElement;

packages/core/src/types/edges.ts

@@ -1,9 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { CSSProperties, ComponentType, HTMLAttributes, ReactNode } from 'react';
+import type { CSSProperties, ComponentType, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent } from 'react';
-import { Connection } from './general';
+
-import { HandleElement, HandleType } from './handles';
+import { Position } from '.';
-import { Node } from './nodes';
+import type { Connection, HandleElement, HandleType, Node } from '.';
-import { Position } from './utils';
+
+type EdgeLabelOptions = {
+  label?: string | ReactNode;
+  labelStyle?: CSSProperties;
+  labelShowBg?: boolean;
+  labelBgStyle?: CSSProperties;
+  labelBgPadding?: [number, number];
+  labelBgBorderRadius?: number;
+};
 
 // interface for the user edge items
 type DefaultEdge<T = any> = {
@@ -13,12 +21,6 @@ type DefaultEdge<T = any> = {
   target: string;
   sourceHandle?: string | null;
   targetHandle?: string | null;
-  label?: string | ReactNode;
-  labelStyle?: CSSProperties;
-  labelShowBg?: boolean;
-  labelBgStyle?: CSSProperties;
-  labelBgPadding?: [number, number];
-  labelBgBorderRadius?: number;
   style?: CSSProperties;
   animated?: boolean;
   hidden?: boolean;
@@ -34,7 +36,7 @@ type DefaultEdge<T = any> = {
   ariaLabel?: string;
   interactionWidth?: number;
   focusable?: boolean;
-};
+} & EdgeLabelOptions;
 
 export type SmoothStepPathOptions = {
   offset?: number;
@@ -62,55 +64,7 @@ export type DefaultEdgeOptions = Omit<
   'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode'
 >;
 
-// props that get passed to a custom edge
+export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
-export type EdgeProps<T = any> = {
-  id: string;
-  source: string;
-  target: string;
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-  selected?: boolean;
-  animated?: boolean;
-  sourcePosition: Position;
-  targetPosition: Position;
-  label?: string | ReactNode;
-  labelStyle?: CSSProperties;
-  labelShowBg?: boolean;
-  labelBgStyle?: CSSProperties;
-  labelBgPadding?: [number, number];
-  labelBgBorderRadius?: number;
-  style?: CSSProperties;
-  data?: T;
-  sourceHandleId?: string | null;
-  targetHandleId?: string | null;
-  markerStart?: string;
-  markerEnd?: string;
-  // @TODO: how can we get better types for pathOptions?
-  pathOptions?: any;
-  interactionWidth?: number;
-};
-
-export type BaseEdgeProps = Pick<
-  EdgeProps,
-  | 'label'
-  | 'labelStyle'
-  | 'labelShowBg'
-  | 'labelBgStyle'
-  | 'labelBgPadding'
-  | 'labelBgBorderRadius'
-  | 'style'
-  | 'markerStart'
-  | 'markerEnd'
-  | 'interactionWidth'
-> & {
-  labelX: number;
-  labelY: number;
-  path: string;
-};
-
-export type EdgeMouseHandler = (event: React.MouseEvent, edge: Edge) => void;
 
 export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> & {
   onClick?: EdgeMouseHandler;
@@ -130,30 +84,57 @@ export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandl
   onMouseMove?: EdgeMouseHandler;
   onMouseLeave?: EdgeMouseHandler;
   edgeUpdaterRadius?: number;
-  onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
   onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
   rfId?: string;
   isFocusable: boolean;
   pathOptions?: BezierPathOptions | SmoothStepPathOptions;
 };
 
-export interface SmoothStepEdgeProps<T = any> extends EdgeProps<T> {
+// props that get passed to a custom edge
-  pathOptions?: SmoothStepPathOptions;
+export type EdgeProps<T = any> = Pick<
-}
+  Edge<T>,
+  'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'
+> &
+  Pick<
+    WrapEdgeProps,
+    | 'sourceX'
+    | 'sourceY'
+    | 'targetX'
+    | 'targetY'
+    | 'sourcePosition'
+    | 'targetPosition'
+    | 'sourceHandleId'
+    | 'targetHandleId'
+    | 'interactionWidth'
+  > &
+  EdgeLabelOptions & {
+    markerStart?: string;
+    markerEnd?: string;
+    // @TODO: how can we get better types for pathOptions?
+    pathOptions?: any;
+  };
 
-export interface BezierEdgeProps<T = any> extends EdgeProps<T> {
+export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd' | 'interactionWidth'> &
+  EdgeLabelOptions & {
+    labelX: number;
+    labelY: number;
+    path: string;
+  };
+
+export type SmoothStepEdgeProps<T = any> = EdgeProps<T> & {
+  pathOptions?: SmoothStepPathOptions;
+};
+
+export type BezierEdgeProps<T = any> = EdgeProps<T> & {
   pathOptions?: BezierPathOptions;
-}
+};
-export interface EdgeTextProps extends HTMLAttributes<SVGElement> {
+
-  x: number;
+export type EdgeTextProps = HTMLAttributes<SVGElement> &
-  y: number;
+  EdgeLabelOptions & {
-  label?: string | ReactNode;
+    x: number;
-  labelStyle?: CSSProperties;
+    y: number;
-  labelShowBg?: boolean;
+  };
-  labelBgStyle?: CSSProperties;
-  labelBgPadding?: [number, number];
-  labelBgBorderRadius?: number;
-}
 
 export enum ConnectionLineType {
   Bezier = 'default',
@@ -180,7 +161,7 @@ export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps
 
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
 
-export interface EdgeMarker {
+export type EdgeMarker = {
   type: MarkerType;
   color?: string;
   width?: number;
@@ -188,7 +169,7 @@ export interface EdgeMarker {
   markerUnits?: string;
   orient?: string;
   strokeWidth?: number;
-}
+};
 
 export type EdgeMarkerType = string | EdgeMarker;
 

packages/core/src/types/general.ts

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
+import type { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
 import type { Selection as D3Selection, ZoomBehavior } from 'd3';
 
-import { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
+import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
-import { NodeChange, EdgeChange } from './changes';
+import type { NodeChange, EdgeChange } from './changes';
-import {
+import type {
   Node,
   NodeInternals,
   NodeDimensionUpdate,
@@ -15,10 +15,10 @@ import {
   SelectionDragHandler,
   NodeOrigin,
 } from './nodes';
-import { Edge, EdgeProps, WrapEdgeProps } from './edges';
+import type { Edge, EdgeProps, WrapEdgeProps } from './edges';
-import { HandleType, StartHandle } from './handles';
+import type { HandleType, StartHandle } from './handles';
-import { DefaultEdgeOptions } from '.';
+import type { DefaultEdgeOptions } from '.';
-import { ReactFlowInstance } from './instance';
+import type { ReactFlowInstance } from './instance';
 
 export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
 export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>> };
@@ -115,7 +115,7 @@ export type UnselectNodesAndEdgesParams = {
 
 export type OnViewportChange = (viewport: Viewport) => void;
 
-export interface ViewportHelperFunctions {
+export type ViewportHelperFunctions = {
   zoomIn: ZoomInOut;
   zoomOut: ZoomInOut;
   zoomTo: ZoomTo;
@@ -127,7 +127,7 @@ export interface ViewportHelperFunctions {
   fitBounds: FitBounds;
   project: Project;
   viewportInitialized: boolean;
-}
+};
 
 export type ReactFlowStore = {
   rfId: string;

packages/core/src/types/handles.ts

@@ -1,5 +1,4 @@
-import { XYPosition, Position, Dimensions } from './utils';
+import type { XYPosition, Position, Dimensions, OnConnect, Connection } from '.';
-import { OnConnect, Connection } from './general';
 
 export type HandleType = 'source' | 'target';
 

packages/core/src/types/instance.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-namespace */
-import { ViewportHelperFunctions, Viewport } from './general';
+import { ViewportHelperFunctions, Viewport, Node, Edge } from '.';
-import { Node } from './nodes';
-import { Edge } from './edges';
 
 export type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
   nodes: Node<NodeData>[];

packages/core/src/types/nodes.ts

@@ -1,20 +1,19 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
+import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
 
-import { XYPosition, Position, CoordinateExtent } from './utils';
-import { HandleElement } from './handles';
 import { internalsSymbol } from '../utils';
+import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
 
 // interface for the user node items
-export interface Node<T = any> {
+export type Node<T = any> = {
   id: string;
   position: XYPosition;
   data: T;
   type?: string;
   style?: CSSProperties;
   className?: string;
-  targetPosition?: Position;
   sourcePosition?: Position;
+  targetPosition?: Position;
   hidden?: boolean;
   selected?: boolean;
   dragging?: boolean;
@@ -39,64 +38,50 @@ export interface Node<T = any> {
     handleBounds?: NodeHandleBounds;
     isParent?: boolean;
   };
-}
+};
-
-// props that get passed to a custom node
-export interface NodeProps<T = any> {
-  id: string;
-  type: string;
-  data: T;
-  selected: boolean;
-  isConnectable: boolean;
-  xPos: number;
-  yPos: number;
-  dragging: boolean;
-  zIndex: number;
-  targetPosition?: Position;
-  sourcePosition?: Position;
-  dragHandle?: string;
-}
 
 export type NodeMouseHandler = (event: ReactMouseEvent, node: Node) => void;
 export type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void;
 export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void;
 
-export interface WrapNodeProps<T = any> {
+export type WrapNodeProps<T = any> = Pick<
-  id: string;
+  Node<T>,
-  type: string;
+  'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel'
-  data: T;
+> &
-  selected: boolean;
+  Required<Pick<Node<T>, 'selected' | 'type' | 'zIndex'>> & {
-  isConnectable: boolean;
+    isConnectable: boolean;
-  xPos: number;
+    xPos: number;
-  yPos: number;
+    yPos: number;
-  xPosOrigin: number;
+    xPosOrigin: number;
-  yPosOrigin: number;
+    yPosOrigin: number;
-  initialized: boolean;
+    initialized: boolean;
-  isSelectable: boolean;
+    isSelectable: boolean;
-  isDraggable: boolean;
+    isDraggable: boolean;
-  isFocusable: boolean;
+    isFocusable: boolean;
-  selectNodesOnDrag: boolean;
+    selectNodesOnDrag: boolean;
-  onClick?: NodeMouseHandler;
+    onClick?: NodeMouseHandler;
-  onDoubleClick?: NodeMouseHandler;
+    onDoubleClick?: NodeMouseHandler;
-  onMouseEnter?: NodeMouseHandler;
+    onMouseEnter?: NodeMouseHandler;
-  onMouseMove?: NodeMouseHandler;
+    onMouseMove?: NodeMouseHandler;
-  onMouseLeave?: NodeMouseHandler;
+    onMouseLeave?: NodeMouseHandler;
-  onContextMenu?: NodeMouseHandler;
+    onContextMenu?: NodeMouseHandler;
-  style?: CSSProperties;
+    resizeObserver: ResizeObserver | null;
-  className?: string;
+    isParent: boolean;
-  sourcePosition: Position;
+    noDragClassName: string;
-  targetPosition: Position;
+    noPanClassName: string;
-  hidden?: boolean;
+    rfId: string;
-  resizeObserver: ResizeObserver | null;
+    disableKeyboardA11y: boolean;
-  dragHandle?: string;
+  };
-  zIndex: number;
+
-  isParent: boolean;
+// props that get passed to a custom node
-  noDragClassName: string;
+export type NodeProps<T = any> = Pick<
-  noPanClassName: string;
+  WrapNodeProps<T>,
-  rfId: string;
+  'id' | 'data' | 'dragHandle' | 'type' | 'selected' | 'isConnectable' | 'xPos' | 'yPos' | 'zIndex'
-  disableKeyboardA11y: boolean;
+> & {
-  ariaLabel?: string;
+  dragging: boolean;
-}
+  targetPosition?: Position;
+  sourcePosition?: Position;
+};
 
 export type NodeHandleBounds = {
   source: HandleElement[] | null;

packages/core/src/utils/changes.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Node, Edge, EdgeChange, NodeChange } from '../types';
+import type { Node, Edge, EdgeChange, NodeChange } from '../types';
 
 function handleParentExpand(res: any[], updateItem: any) {
   const parent = res.find((e) => e.id === updateItem.parentNode);

packages/core/src/utils/graph.ts

@@ -2,7 +2,7 @@
 import type { Selection as D3Selection } from 'd3';
 
 import { boxToRect, clamp, devWarn, getBoundsOfBoxes, rectToBox } from '../utils';
-import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';
+import type { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>
   'id' in element && 'source' in element && 'target' in element;

packages/core/src/utils/index.ts

@@ -1,4 +1,4 @@
-import { Dimensions, XYPosition, CoordinateExtent, Box, Rect } from '../types';
+import type { Dimensions, XYPosition, CoordinateExtent, Box, Rect } from '../types';
 
 export const getDimensions = (node: HTMLDivElement): Dimensions => ({
   width: node.offsetWidth,

packages/minimap/src/MiniMap.tsx

@@ -2,10 +2,11 @@
 import { memo } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
-import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@reactflow/core';
+import { useStore, getRectOfNodes, getBoundsOfRects, Panel } from '@reactflow/core';
+import type { ReactFlowState, Rect } from '@reactflow/core';
 
 import MiniMapNode from './MiniMapNode';
-import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
+import type { MiniMapProps, GetMiniMapNodeAttribute } from './types';
 
 declare const window: any;
 

packages/minimap/src/MiniMapNode.tsx

@@ -1,4 +1,5 @@
-import { memo, CSSProperties } from 'react';
+import { memo } from 'react';
+import type { CSSProperties } from 'react';
 import cc from 'classcat';
 
 interface MiniMapNodeProps {

packages/minimap/src/types.ts

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
-import { Node, PanelPosition } from '@reactflow/core';
+import type { Node, PanelPosition } from '@reactflow/core';
 
 export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
 
-export interface MiniMapProps<NodeData = any> extends HTMLAttributes<SVGSVGElement> {
+export type MiniMapProps<NodeData = any> = HTMLAttributes<SVGSVGElement> & {
   nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
   nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
   nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
@@ -12,4 +12,4 @@ export interface MiniMapProps<NodeData = any> extends HTMLAttributes<SVGSVGEleme
   nodeStrokeWidth?: number;
   maskColor?: string;
   position?: PanelPosition;
-}
+};