Merge branch 'main' into feat/interactive-minimap

README.md

@@ -91,7 +91,7 @@ function Flow() {
 
 Before you can start developing please make sure that you have [pnpm](https://pnpm.io/) installed (`npm i -g pnpm`). Then install the dependencies using pnpm: `pnpm install`.
 
-For local development, you can use `pnpm dev`.
+Run `pnpm build` once and then you can use `pnpm dev` for local development.
 
 ## Testing
 

examples/vite-app/src/App/index.tsx

@@ -37,6 +37,7 @@ import UseKeyPress from '../examples/UseKeyPress';
 import EdgeRouting from '../examples/EdgeRouting';
 import CancelConnection from '../examples/CancelConnection';
 import InteractiveMinimap from '../examples/InteractiveMinimap';
+import UseOnSelectionChange from '../examples/UseOnSelectionChange';
 
 interface IRoute {
   name: string;
@@ -205,6 +206,11 @@ const routes: IRoute[] = [
     path: '/update-node',
     component: UpdateNode,
   },
+  {
+    name: 'useOnSelectionChange',
+    path: '/use-on-selection-change',
+    component: UseOnSelectionChange,
+  },
   {
     name: 'useReactFlow',
     path: '/usereactflow',

examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx

@@ -0,0 +1,36 @@
+import React, { useState, memo, FC, useMemo, CSSProperties } from 'react';
+import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow';
+
+const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
+
+const CustomNode: FC<NodeProps> = ({ id }) => {
+  const [handleCount, setHandleCount] = useState(1);
+  const updateNodeInternals = useUpdateNodeInternals();
+
+  const handles = useMemo(
+    () =>
+      Array.from({ length: handleCount }, (x, i) => {
+        const handleId = `handle-${i}`;
+        return <Handle key={handleId} type="source" position={Position.Right} id={handleId} style={{ top: 10 * i }} />;
+      }),
+    [handleCount]
+  );
+
+  return (
+    <div style={nodeStyles}>
+      <Handle type="target" position={Position.Left} />
+      <div>output handle count: {handleCount}</div>
+      <button
+        onClick={() => {
+          setHandleCount((c) => c + 1);
+          updateNodeInternals(id);
+        }}
+      >
+        add handle
+      </button>
+      {handles}
+    </div>
+  );
+};
+
+export default memo(CustomNode);

examples/vite-app/src/examples/UseOnSelectionChange/index.tsx

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import ReactFlow, {
+  addEdge,
+  ReactFlowProvider,
+  Node,
+  Connection,
+  Edge,
+  useNodesState,
+  useEdgesState,
+  useOnSelectionChange,
+  OnSelectionChangeParams,
+} from 'reactflow';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'default',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+  },
+];
+
+const SelectionLogger = () => {
+  const onChange = useCallback(({ nodes, edges }: OnSelectionChangeParams) => {
+    console.log(nodes, edges);
+  }, []);
+
+  useOnSelectionChange({
+    onChange,
+  });
+
+  return null;
+};
+
+const Flow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+    />
+  );
+};
+
+const WrappedFlow = () => (
+  <ReactFlowProvider>
+    <Flow />
+    <SelectionLogger />
+  </ReactFlowProvider>
+);
+
+export default WrappedFlow;

package.json

@@ -16,8 +16,8 @@
     "clean": "pnpm -r --parallel exec rimraf dist .turbo"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.4.6",
+    "@changesets/changelog-github": "^0.4.7",
-    "@changesets/cli": "^2.24.3",
+    "@changesets/cli": "^2.25.0",
     "@preconstruct/cli": "^2.2.1",
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",

packages/background/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @reactflow/background
 
+## 11.0.3
+
+### Patch Changes
+
+- cleanup types
+- cleanup rf id handling
+- Updated dependencies:
+  - @reactflow/core@11.1.2
+
+## 11.0.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @reactflow/core@11.1.1
+
 ## 11.0.1
 
 ### Patch Changes

packages/background/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/background",
-  "version": "11.0.1",
+  "version": "11.0.3",
   "description": "Background component with different variants for React Flow",
   "keywords": [
     "react",
@@ -17,7 +17,9 @@
   "main": "dist/umd/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "dev": "rollup --config node:@reactflow/rollup-config --watch",
     "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production",

packages/background/src/Background.tsx

@@ -18,7 +18,7 @@ const defaultSize = {
   [BackgroundVariant.Cross]: 6,
 };
 
-const selector = (s: ReactFlowState) => ({ transform: s.transform, rfId: s.rfId });
+const selector = (s: ReactFlowState) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
 
 function Background({
   variant = BackgroundVariant.Dots,
@@ -32,7 +32,7 @@ function Background({
   className,
 }: BackgroundProps) {
   const ref = useRef<SVGSVGElement>(null);
-  const { transform, rfId } = useStore(selector, shallow);
+  const { transform, patternId } = useStore(selector, shallow);
   const patternColor = color || defaultColor[variant];
   const patternSize = size || defaultSize[variant];
   const isDots = variant === BackgroundVariant.Dots;
@@ -61,7 +61,7 @@ function Background({
       ref={ref}
     >
       <pattern
-        id={rfId}
+        id={patternId}
         x={transform[0] % scaledGap[0]}
         y={transform[1] % scaledGap[1]}
         width={scaledGap[0]}
@@ -75,7 +75,7 @@ function Background({
           <LinePattern dimensions={patternDimensions} color={patternColor} lineWidth={lineWidth} />
         )}
       </pattern>
-      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${rfId})`} />
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
     </svg>
   );
 }

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/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @reactflow/controls
 
+## 11.0.3
+
+### Patch Changes
+
+- cleanup types
+- Updated dependencies:
+  - @reactflow/core@11.1.2
+
+## 11.0.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @reactflow/core@11.1.1
+
 ## 11.0.1
 
 ### Patch Changes

packages/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/controls",
-  "version": "11.0.1",
+  "version": "11.0.3",
   "description": "Component to control the viewport of a React Flow instance",
   "keywords": [
     "react",
@@ -17,7 +17,9 @@
   "main": "dist/umd/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",

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/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @reactflow/core
 
+## 11.1.2
+
+### Patch Changes
+
+- make pro options acc type optional
+- cleanup types
+- fix rf id handling
+- always render nodes when dragging=true
+- don't apply animations to helper edge
+
+## 11.1.1
+
+### Patch Changes
+
+- [`c44413d`](https://github.com/wbkd/react-flow/commit/c44413d816604ae2d6ad81ed227c3dfde1a7bd8a) Thanks [@moklick](https://github.com/moklick)! - chore(panel): dont break user selection above panel
+- [`48c402c`](https://github.com/wbkd/react-flow/commit/48c402c4d3bd9e16dc91cd4c549324e57b6d5c57) Thanks [@moklick](https://github.com/moklick)! - refactor(aria-descriptions): render when disableKeyboardA11y is true
+- [`3a1a365`](https://github.com/wbkd/react-flow/commit/3a1a365a63fc4564d9a8d96309908986fcc86f95) Thanks [@moklick](https://github.com/moklick)! - fix(useOnSelectionChange): repair hook closes #2484
+- [`5d35094`](https://github.com/wbkd/react-flow/commit/5d350942d33ded626b3387206f0b0dee368efdfb) Thanks [@neo](https://github.com/neo)! - Add css files as sideEffects
+
 ## 11.1.0
 
 ### Minor Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/core",
-  "version": "11.1.0",
+  "version": "11.1.2",
   "description": "Core components and util functions of React Flow.",
   "keywords": [
     "react",
@@ -17,7 +17,9 @@
   "main": "dist/umd/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "license": "MIT",
   "publishConfig": {
     "access": "public"

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 = {
@@ -17,25 +17,32 @@ const ariaLiveStyle: CSSProperties = {
 
 export const ARIA_NODE_DESC_KEY = 'react-flow__node-desc';
 export const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc';
-export const ARIA_LIVE_MESSAGE = 'react-flow__arai-live';
+export const ARIA_LIVE_MESSAGE = 'react-flow__aria-live';
 
 const selector = (s: ReactFlowState) => s.ariaLiveMessage;
 
-function A11yDescriptions({ rfId }: { rfId: string }) {
+function AriaLiveMessage({ rfId }: { rfId: string }) {
   const ariaLiveMessage = useStore(selector);
 
+  return (
+    <div id={`${ARIA_LIVE_MESSAGE}-${rfId}`} aria-live="assertive" aria-atomic="true" style={ariaLiveStyle}>
+      {ariaLiveMessage}
+    </div>
+  );
+}
+
+function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) {
   return (
     <>
       <div id={`${ARIA_NODE_DESC_KEY}-${rfId}`} style={style}>
-        Press enter or space to select a node. You can then use the arrow keys to move the node around, press delete to
+        Press enter or space to select a node.
-        remove it and press escape to cancel.
+        {!disableKeyboardA11y && 'You can then use the arrow keys to move the node around.'} Press delete to remove it
+        and escape to cancel.{' '}
       </div>
       <div id={`${ARIA_EDGE_DESC_KEY}-${rfId}`} style={style}>
-        Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.
+        Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
-      </div>
-      <div id={`${ARIA_LIVE_MESSAGE}-${rfId}`} aria-live="assertive" aria-atomic="true" style={ariaLiveStyle}>
-        {ariaLiveMessage}
       </div>
+      {!disableKeyboardA11y && <AriaLiveMessage rfId={rfId} />}
     </>
   );
 }

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,
@@ -26,7 +26,15 @@ const BaseEdge = ({
         markerEnd={markerEnd}
         markerStart={markerStart}
       />
-      {interactionWidth && <path d={path} fill="none" strokeOpacity={0} strokeWidth={interactionWidth} />}
+      {interactionWidth && (
+        <path
+          d={path}
+          fill="none"
+          strokeOpacity={0}
+          strokeWidth={interactionWidth}
+          className="react-flow__edge-interaction"
+        />
+      )}
       {label ? (
         <EdgeText
           x={labelX}

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,18 +1,26 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import cc from 'classcat';
 
-import { PanelPosition } from '../../types';
+import { useStore } from '../../hooks/useStore';
+import type { PanelPosition, ReactFlowState } from '../../types';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
   position: PanelPosition;
   children: ReactNode;
 };
 
-function Panel({ position, children, className, ...rest }: PanelProps) {
+const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all');
+
+function Panel({ position, children, className, style, ...rest }: PanelProps) {
+  const pointerEvents = useStore(selector);
   const positionClasses = `${position}`.split('-');
 
   return (
-    <div className={cc(['react-flow__panel', className, ...positionClasses])} {...rest}>
+    <div
+      className={cc(['react-flow__panel', className, ...positionClasses])}
+      style={{ ...style, pointerEvents }}
+      {...rest}
+    >
       {children}
     </div>
   );

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,12 +1,12 @@
 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';
 
-interface SelectionListenerProps {
+type SelectionListenerProps = {
-  onSelectionChange: OnSelectionChangeFunc;
+  onSelectionChange?: OnSelectionChangeFunc;
-}
+};
 
 const selector = (s: ReactFlowState) => ({
   selectedNodes: Array.from(s.nodeInternals.values()).filter((n) => n.selected),
@@ -15,30 +15,42 @@ const selector = (s: ReactFlowState) => ({
 
 type SelectorSlice = ReturnType<typeof selector>;
 
-function areEqual(objA: SelectorSlice, objB: SelectorSlice) {
+const selectId = (obj: Node | Edge) => obj.id;
-  const selectedNodeIdsA = objA.selectedNodes.map((n: Node) => n.id);
-  const selectedNodeIdsB = objB.selectedNodes.map((n: Node) => n.id);
 
-  const selectedEdgeIdsA = objA.selectedEdges.map((e: Edge) => e.id);
+function areEqual(a: SelectorSlice, b: SelectorSlice) {
-  const selectedEdgeIdsB = objB.selectedEdges.map((e: Edge) => e.id);
+  return (
-
+    shallow(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) &&
-  return shallow(selectedNodeIdsA, selectedNodeIdsB) && shallow(selectedEdgeIdsA, selectedEdgeIdsB);
+    shallow(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId))
+  );
 }
 
 // This is just a helper component for calling the onSelectionChange listener.
 // @TODO: Now that we have the onNodesChange and on EdgesChange listeners, do we still need this component?
-function SelectionListener({ onSelectionChange }: SelectionListenerProps) {
+const SelectionListener = memo(({ onSelectionChange }: SelectionListenerProps) => {
   const store = useStoreApi();
   const { selectedNodes, selectedEdges } = useStore(selector, areEqual);
 
   useEffect(() => {
     const params = { nodes: selectedNodes, edges: selectedEdges };
-
+    onSelectionChange?.(params);
-    onSelectionChange(params);
     store.getState().onSelectionChange?.(params);
-  }, [selectedNodes, selectedEdges]);
+  }, [selectedNodes, selectedEdges, onSelectionChange]);
+
+  return null;
+});
+
+SelectionListener.displayName = 'SelectionListener';
+
+const changeSelector = (s: ReactFlowState) => !!s.onSelectionChange;
+
+function Wrapper({ onSelectionChange }: SelectionListenerProps) {
+  const storeHasSelectionChange = useStore(changeSelector);
+
+  if (onSelectionChange || storeHasSelectionChange) {
+    return <SelectionListener onSelectionChange={onSelectionChange} />;
+  }
 
   return null;
 }
 
-export default memo(SelectionListener);
+export default Wrapper;

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,
@@ -44,8 +44,7 @@ type StoreUpdaterProps = Pick<
   | 'onSelectionDragStop'
   | 'noPanClassName'
   | 'nodeOrigin'
-  | 'id'
+> & { rfId: string };
->;
 
 const selector = (s: ReactFlowState) => ({
   setNodes: s.setNodes,
@@ -117,7 +116,7 @@ const StoreUpdater = ({
   onSelectionDragStop,
   noPanClassName,
   nodeOrigin,
-  id,
+  rfId,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -169,7 +168,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('onSelectionDragStop', onSelectionDragStop, store.setState);
   useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState);
   useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState);
-  useDirectStoreUpdater('rfId', id, store.setState);
+  useDirectStoreUpdater('rfId', rfId, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);

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,
@@ -156,13 +154,14 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       elevateEdgesOnSelect = false,
       disableKeyboardA11y = false,
       style,
-      id = '1',
+      id,
       ...rest
     },
     ref
   ) => {
     const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped;
     const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
+    const rfId = id || '1';
 
     return (
       <div
@@ -171,6 +170,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
         ref={ref}
         className={cc(['react-flow', className])}
         data-testid="rf__wrapper"
+        id={id}
       >
         <Wrapper>
           <GraphView
@@ -230,7 +230,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             noWheelClassName={noWheelClassName}
             noPanClassName={noPanClassName}
             elevateEdgesOnSelect={elevateEdgesOnSelect}
-            rfId={id}
+            rfId={rfId}
             disableKeyboardA11y={disableKeyboardA11y}
             nodeOrigin={nodeOrigin}
             nodeExtent={nodeExtent}
@@ -273,12 +273,12 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onSelectionDragStop={onSelectionDragStop}
             noPanClassName={noPanClassName}
             nodeOrigin={nodeOrigin}
-            id={id}
+            rfId={rfId}
           />
-          {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
+          <SelectionListener onSelectionChange={onSelectionChange} />
           {children}
           <Attribution proOptions={proOptions} position={attributionPosition} />
-          {!disableKeyboardA11y && <A11yDescriptions rfId={id} />}
+          <A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} />
         </Wrapper>
       </div>
     );

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/styles/init.css

@@ -56,6 +56,11 @@
     animation: dashdraw 0.5s linear infinite;
   }
 
+  &.animated path.react-flow__edge-interaction {
+    stroke-dasharray: none;
+    animation: none;
+  }
+
   &.inactive {
     pointer-events: none;
   }

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;
@@ -242,6 +242,6 @@ export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;
 export type PanelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 
 export type ProOptions = {
-  account: string;
+  account?: string;
   hideAttribution: boolean;
 };

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;
@@ -188,7 +188,7 @@ export const getNodesInside = (
     const area = (width || 0) * (height || 0);
     const isVisible = notInitialized || partiallyVisible || overlappingArea >= area;
 
-    if (isVisible) {
+    if (isVisible || node.dragging) {
       visibleNodes.push(node);
     }
   });

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/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @reactflow/minimap
 
+## 11.0.3
+
+### Patch Changes
+
+- cleanup types
+- Updated dependencies:
+  - @reactflow/core@11.1.2
+
+## 11.0.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @reactflow/core@11.1.1
+
 ## 11.0.1
 
 ### Patch Changes

packages/minimap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/minimap",
-  "version": "11.0.1",
+  "version": "11.0.3",
   "description": "Minimap component for React Flow.",
   "keywords": [
     "react",
@@ -17,7 +17,9 @@
   "main": "dist/umd/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "publishConfig": {
     "access": "public"
   },

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;
-}
+};

packages/reactflow/CHANGELOG.md

@@ -1,5 +1,37 @@
 # reactflow
 
+## 11.1.2
+
+Housekeeping release with some fixes and some cleanups for the types.
+
+### Patch Changes
+
+- make pro options acc type optional
+- cleanup types
+- fix rf id handling
+- always render nodes when dragging=true
+- don't apply animations to helper edge
+- Updated dependencies:
+  - @reactflow/core@11.1.2
+  - @reactflow/background@11.0.3
+  - @reactflow/controls@11.0.3
+  - @reactflow/minimap@11.0.3
+
+## 11.1.1
+
+### Patch Changes
+
+- [`c44413d`](https://github.com/wbkd/react-flow/commit/c44413d816604ae2d6ad81ed227c3dfde1a7bd8a) Thanks [@moklick](https://github.com/moklick)! - chore(panel): dont break user selection above panel
+- [`48c402c`](https://github.com/wbkd/react-flow/commit/48c402c4d3bd9e16dc91cd4c549324e57b6d5c57) Thanks [@moklick](https://github.com/moklick)! - refactor(aria-descriptions): render when disableKeyboardA11y is true
+- [`3a1a365`](https://github.com/wbkd/react-flow/commit/3a1a365a63fc4564d9a8d96309908986fcc86f95) Thanks [@moklick](https://github.com/moklick)! - fix(useOnSelectionChange): repair hook closes #2484
+- [`5d35094`](https://github.com/wbkd/react-flow/commit/5d350942d33ded626b3387206f0b0dee368efdfb) Thanks [@neo](https://github.com/neo)! - Add css files as sideEffects
+
+- Updated dependencies:
+  - @reactflow/background@11.0.2
+  - @reactflow/core@11.1.1
+  - @reactflow/controls@11.0.2
+  - @reactflow/minimap@11.0.2
+
 ## 11.1.0
 
 ### Minor Changes

packages/reactflow/README.md

@@ -24,11 +24,13 @@ A highly customizable React component for building interactive graphs and node-b
 - **Plugin Components:** [Background](https://reactflow.dev/docs/api/plugin-components/background), [MiniMap](https://reactflow.dev/docs/api/plugin-components/minimap) and [Controls](https://reactflow.dev/docs/api/plugin-components/controls)
 - **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/)
 
-## Commercial Usage / Attribution
+## Commercial Usage
 
-React Flow includes a small attribution that links to the React Flow website. **We expect companies who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution.** By subscribing you get access to other exclusive services like advanced examples, individual support or prioritized bug reports. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd).
+**Are you using React Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟
 
-You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/faq).
+**Are you using React Flow at your organization and making money from it?** Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the [React Flow Pro website](https://pro.reactflow.dev) or through [Github Sponsors](https://github.com/sponsors/wbkd).
+
+You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/info).
 
 ## Installation
 
@@ -43,9 +45,31 @@ npm install reactflow
 This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props).
 
 ```jsx
-import ReactFlow, { MiniMap, Controls } from 'reactflow';
+import { useCallback } from 'react';
+import ReactFlow, {
+  MiniMap,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+} from 'reactflow';
+
+import 'reactflow/dist/style.css';
+
+const initialNodes = [
+  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
+  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
+];
+
+const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
+
+function Flow() {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
-function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
   return (
     <ReactFlow
       nodes={nodes}
@@ -56,6 +80,7 @@ function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
     >
       <MiniMap />
       <Controls />
+      <Background />
     </ReactFlow>
   );
 }

packages/reactflow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactflow",
-  "version": "11.1.0",
+  "version": "11.1.2",
   "description": "A highly customizable React library for building node-based editors and interactive flow charts",
   "keywords": [
     "react",
@@ -17,7 +17,9 @@
   "main": "dist/umd/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",

pnpm-lock.yaml

@@ -4,8 +4,8 @@ importers:
 
   .:
     specifiers:
-      '@changesets/changelog-github': ^0.4.6
+      '@changesets/changelog-github': ^0.4.7
-      '@changesets/cli': ^2.24.3
+      '@changesets/cli': ^2.25.0
       '@preconstruct/cli': ^2.2.1
       '@typescript-eslint/eslint-plugin': latest
       '@typescript-eslint/parser': latest
@@ -29,8 +29,8 @@ importers:
       turbo: ^1.5.3
       typescript: ^4.8.3
     devDependencies:
-      '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.6
+      '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7
-      '@changesets/cli': registry.npmjs.org/@changesets/cli/2.24.4
+      '@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0
       '@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1
       '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0_jdrczqv3ll7udvbunca43w7rz4
       '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha
@@ -40,7 +40,7 @@ importers:
       eslint: registry.npmjs.org/eslint/8.23.1
       eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1
       eslint-plugin-prettier: registry.npmjs.org/eslint-plugin-prettier/4.2.1_cabrci5exjdaojcvd6xoxgeowu
-      eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.31.8_eslint@8.23.1
+      eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.31.9_eslint@8.23.1
       postcss: registry.npmjs.org/postcss/8.4.16
       postcss-cli: registry.npmjs.org/postcss-cli/10.0.0_postcss@8.4.16
       postcss-combine-duplicated-selectors: registry.npmjs.org/postcss-combine-duplicated-selectors/10.0.3_postcss@8.4.16
@@ -655,16 +655,16 @@ packages:
       to-fast-properties: registry.npmjs.org/to-fast-properties/2.0.0
     dev: true
 
-  registry.npmjs.org/@changesets/apply-release-plan/6.1.0:
+  registry.npmjs.org/@changesets/apply-release-plan/6.1.1:
-    resolution: {integrity: sha512-fMNBUAEc013qaA4KUVjdwgYMmKrf5Mlgf6o+f97MJVNzVnikwpWY47Lc3YR1jhC874Fonn5MkjkWK9DAZsdQ5g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.0.tgz}
+    resolution: {integrity: sha512-LaQiP/Wf0zMVR0HNrLQAjz3rsNsr0d/RlnP6Ef4oi8VafOwnY1EoWdK4kssuUJGgNgDyHpomS50dm8CU3D7k7g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.1.tgz}
     name: '@changesets/apply-release-plan'
-    version: 6.1.0
+    version: 6.1.1
     dependencies:
       '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
-      '@changesets/config': registry.npmjs.org/@changesets/config/2.1.1
+      '@changesets/config': registry.npmjs.org/@changesets/config/2.2.0
       '@changesets/get-version-range-type': registry.npmjs.org/@changesets/get-version-range-type/0.3.2
-      '@changesets/git': registry.npmjs.org/@changesets/git/1.4.1
+      '@changesets/git': registry.npmjs.org/@changesets/git/1.5.0
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
       '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3
       detect-indent: registry.npmjs.org/detect-indent/6.1.0
       fs-extra: registry.npmjs.org/fs-extra/7.0.1
@@ -675,59 +675,59 @@ packages:
       semver: registry.npmjs.org/semver/5.7.1
     dev: true
 
-  registry.npmjs.org/@changesets/assemble-release-plan/5.2.1:
+  registry.npmjs.org/@changesets/assemble-release-plan/5.2.2:
-    resolution: {integrity: sha512-d6ckasOWlKF9Mzs82jhl6TKSCgVvfLoUK1ERySrTg2TQJdrVUteZue6uEIYUTA7SgMu67UOSwol6R9yj1nTdjw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.1.tgz}
+    resolution: {integrity: sha512-B1qxErQd85AeZgZFZw2bDKyOfdXHhG+X5S+W3Da2yCem8l/pRy4G/S7iOpEcMwg6lH8q2ZhgbZZwZ817D+aLuQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.2.tgz}
     name: '@changesets/assemble-release-plan'
-    version: 5.2.1
+    version: 5.2.2
     dependencies:
       '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
       '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4
-      '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.3
+      '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.4
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
       '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3
       semver: registry.npmjs.org/semver/5.7.1
     dev: true
 
-  registry.npmjs.org/@changesets/changelog-git/0.1.12:
+  registry.npmjs.org/@changesets/changelog-git/0.1.13:
-    resolution: {integrity: sha512-Xv2CPjTBmwjl8l4ZyQ3xrsXZMq8WafPUpEonDpTmcb24XY8keVzt7ZSCJuDz035EiqrjmDKDhODoQ6XiHudlig==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.12.tgz}
+    resolution: {integrity: sha512-zvJ50Q+EUALzeawAxax6nF2WIcSsC5PwbuLeWkckS8ulWnuPYx8Fn/Sjd3rF46OzeKA8t30loYYV6TIzp4DIdg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.13.tgz}
     name: '@changesets/changelog-git'
-    version: 0.1.12
+    version: 0.1.13
     dependencies:
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
     dev: true
 
-  registry.npmjs.org/@changesets/changelog-github/0.4.6:
+  registry.npmjs.org/@changesets/changelog-github/0.4.7:
-    resolution: {integrity: sha512-ahR/+o3OPodzfG9kucEMU/tEtBgwy6QoJiWi1sDBPme8n3WjT6pBlbhqNYpWAJKilomwfjBGY0MTUTs6r9d1RQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-github/-/changelog-github-0.4.6.tgz}
+    resolution: {integrity: sha512-UUG5sKwShs5ha1GFnayUpZNcDGWoY7F5XxhOEHS62sDPOtoHQZsG3j1nC5RxZ3M1URHA321cwVZHeXgu99Y3ew==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-github/-/changelog-github-0.4.7.tgz}
     name: '@changesets/changelog-github'
-    version: 0.4.6
+    version: 0.4.7
     dependencies:
       '@changesets/get-github-info': registry.npmjs.org/@changesets/get-github-info/0.5.1
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
       dotenv: registry.npmjs.org/dotenv/8.6.0
     transitivePeerDependencies:
       - encoding
     dev: true
 
-  registry.npmjs.org/@changesets/cli/2.24.4:
+  registry.npmjs.org/@changesets/cli/2.25.0:
-    resolution: {integrity: sha512-87JSwMv38zS3QW3062jXZYLsCNRtA08wa7vt3VnMmkGLfUMn2TTSfD+eSGVnKPJ/ycDCvAcCDnrv/B+gSX5KVA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/cli/-/cli-2.24.4.tgz}
+    resolution: {integrity: sha512-Svu5KD2enurVHGEEzCRlaojrHjVYgF9srmMP9VQSy9c1TspX6C9lDPpulsSNIjYY9BuU/oiWpjBgR7RI9eQiAA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/cli/-/cli-2.25.0.tgz}
     name: '@changesets/cli'
-    version: 2.24.4
+    version: 2.25.0
     hasBin: true
     dependencies:
       '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
-      '@changesets/apply-release-plan': registry.npmjs.org/@changesets/apply-release-plan/6.1.0
+      '@changesets/apply-release-plan': registry.npmjs.org/@changesets/apply-release-plan/6.1.1
-      '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.1
+      '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.2
-      '@changesets/changelog-git': registry.npmjs.org/@changesets/changelog-git/0.1.12
+      '@changesets/changelog-git': registry.npmjs.org/@changesets/changelog-git/0.1.13
-      '@changesets/config': registry.npmjs.org/@changesets/config/2.1.1
+      '@changesets/config': registry.npmjs.org/@changesets/config/2.2.0
       '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4
-      '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.3
+      '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.4
-      '@changesets/get-release-plan': registry.npmjs.org/@changesets/get-release-plan/3.0.14
+      '@changesets/get-release-plan': registry.npmjs.org/@changesets/get-release-plan/3.0.15
-      '@changesets/git': registry.npmjs.org/@changesets/git/1.4.1
+      '@changesets/git': registry.npmjs.org/@changesets/git/1.5.0
       '@changesets/logger': registry.npmjs.org/@changesets/logger/0.0.5
-      '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.12
+      '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.13
-      '@changesets/read': registry.npmjs.org/@changesets/read/0.5.7
+      '@changesets/read': registry.npmjs.org/@changesets/read/0.5.8
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
-      '@changesets/write': registry.npmjs.org/@changesets/write/0.2.0
+      '@changesets/write': registry.npmjs.org/@changesets/write/0.2.1
       '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3
       '@types/is-ci': registry.npmjs.org/@types/is-ci/3.0.0
       '@types/semver': registry.npmjs.org/@types/semver/6.2.3
@@ -749,15 +749,15 @@ packages:
       tty-table: registry.npmjs.org/tty-table/4.1.6
     dev: true
 
-  registry.npmjs.org/@changesets/config/2.1.1:
+  registry.npmjs.org/@changesets/config/2.2.0:
-    resolution: {integrity: sha512-nSRINMqHpdtBpNVT9Eh9HtmLhOwOTAeSbaqKM5pRmGfsvyaROTBXV84ujF9UsWNlV71YxFbxTbeZnwXSGQlyTw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/config/-/config-2.1.1.tgz}
+    resolution: {integrity: sha512-GGaokp3nm5FEDk/Fv2PCRcQCOxGKKPRZ7prcMqxEr7VSsG75MnChQE8plaW1k6V8L2bJE+jZWiRm19LbnproOw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/config/-/config-2.2.0.tgz}
     name: '@changesets/config'
-    version: 2.1.1
+    version: 2.2.0
     dependencies:
       '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4
-      '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.3
+      '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.4
       '@changesets/logger': registry.npmjs.org/@changesets/logger/0.0.5
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
       '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3
       fs-extra: registry.npmjs.org/fs-extra/7.0.1
       micromatch: registry.npmjs.org/micromatch/4.0.5
@@ -771,12 +771,12 @@ packages:
       extendable-error: registry.npmjs.org/extendable-error/0.1.7
     dev: true
 
-  registry.npmjs.org/@changesets/get-dependents-graph/1.3.3:
+  registry.npmjs.org/@changesets/get-dependents-graph/1.3.4:
-    resolution: {integrity: sha512-h4fHEIt6X+zbxdcznt1e8QD7xgsXRAXd2qzLlyxoRDFSa6SxJrDAUyh7ZUNdhjBU4Byvp4+6acVWVgzmTy4UNQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.3.tgz}
+    resolution: {integrity: sha512-+C4AOrrFY146ydrgKOo5vTZfj7vetNu1tWshOID+UjPUU9afYGDXI8yLnAeib1ffeBXV3TuGVcyphKpJ3cKe+A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.4.tgz}
     name: '@changesets/get-dependents-graph'
-    version: 1.3.3
+    version: 1.3.4
     dependencies:
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
       '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3
       chalk: registry.npmjs.org/chalk/2.4.2
       fs-extra: registry.npmjs.org/fs-extra/7.0.1
@@ -794,17 +794,17 @@ packages:
       - encoding
     dev: true
 
-  registry.npmjs.org/@changesets/get-release-plan/3.0.14:
+  registry.npmjs.org/@changesets/get-release-plan/3.0.15:
-    resolution: {integrity: sha512-xzSfeyIOvUnbqMuQXVKTYUizreWQfICwoQpvEHoePVbERLocc1tPo5lzR7dmVCFcaA/DcnbP6mxyioeq+JuzSg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.14.tgz}
+    resolution: {integrity: sha512-W1tFwxE178/en+zSj/Nqbc3mvz88mcdqUMJhRzN1jDYqN3QI4ifVaRF9mcWUU+KI0gyYEtYR65tour690PqTcA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.15.tgz}
     name: '@changesets/get-release-plan'
-    version: 3.0.14
+    version: 3.0.15
     dependencies:
       '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
-      '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.1
+      '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.2
-      '@changesets/config': registry.npmjs.org/@changesets/config/2.1.1
+      '@changesets/config': registry.npmjs.org/@changesets/config/2.2.0
-      '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.12
+      '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.13
-      '@changesets/read': registry.npmjs.org/@changesets/read/0.5.7
+      '@changesets/read': registry.npmjs.org/@changesets/read/0.5.8
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
       '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3
     dev: true
 
@@ -814,14 +814,14 @@ packages:
     version: 0.3.2
     dev: true
 
-  registry.npmjs.org/@changesets/git/1.4.1:
+  registry.npmjs.org/@changesets/git/1.5.0:
-    resolution: {integrity: sha512-GWwRXEqBsQ3nEYcyvY/u2xUK86EKAevSoKV/IhELoZ13caZ1A1TSak/71vyKILtzuLnFPk5mepP5HjBxr7lZ9Q==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/git/-/git-1.4.1.tgz}
+    resolution: {integrity: sha512-Xo8AT2G7rQJSwV87c8PwMm6BAc98BnufRMsML7m7Iw8Or18WFvFmxqG5aOL5PBvhgq9KrKvaeIBNIymracSuHg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/git/-/git-1.5.0.tgz}
     name: '@changesets/git'
-    version: 1.4.1
+    version: 1.5.0
     dependencies:
       '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
       '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
       '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3
       is-subdir: registry.npmjs.org/is-subdir/1.2.0
       spawndamnit: registry.npmjs.org/spawndamnit/2.0.0
@@ -835,37 +835,37 @@ packages:
       chalk: registry.npmjs.org/chalk/2.4.2
     dev: true
 
-  registry.npmjs.org/@changesets/parse/0.3.14:
+  registry.npmjs.org/@changesets/parse/0.3.15:
-    resolution: {integrity: sha512-SWnNVyC9vz61ueTbuxvA6b4HXcSx2iaWr2VEa37lPg1Vw+cEyQp7lOB219P7uow1xFfdtIEEsxbzXnqLAAaY8w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/parse/-/parse-0.3.14.tgz}
+    resolution: {integrity: sha512-3eDVqVuBtp63i+BxEWHPFj2P1s3syk0PTrk2d94W9JD30iG+OER0Y6n65TeLlY8T2yB9Fvj6Ev5Gg0+cKe/ZUA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/parse/-/parse-0.3.15.tgz}
     name: '@changesets/parse'
-    version: 0.3.14
+    version: 0.3.15
     dependencies:
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
       js-yaml: registry.npmjs.org/js-yaml/3.14.1
     dev: true
 
-  registry.npmjs.org/@changesets/pre/1.0.12:
+  registry.npmjs.org/@changesets/pre/1.0.13:
-    resolution: {integrity: sha512-RFzWYBZx56MtgMesXjxx7ymyI829/rcIw/41hvz3VJPnY8mDscN7RJyYu7Xm7vts2Fcd+SRcO0T/Ws3I1/6J7g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/pre/-/pre-1.0.12.tgz}
+    resolution: {integrity: sha512-jrZc766+kGZHDukjKhpBXhBJjVQMied4Fu076y9guY1D3H622NOw8AQaLV3oQsDtKBTrT2AUFjt9Z2Y9Qx+GfA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/pre/-/pre-1.0.13.tgz}
     name: '@changesets/pre'
-    version: 1.0.12
+    version: 1.0.13
     dependencies:
       '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
       '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
       '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3
       fs-extra: registry.npmjs.org/fs-extra/7.0.1
     dev: true
 
-  registry.npmjs.org/@changesets/read/0.5.7:
+  registry.npmjs.org/@changesets/read/0.5.8:
-    resolution: {integrity: sha512-Iteg0ccTPpkJ+qFzY97k7qqdVE5Kz30TqPo9GibpBk2g8tcLFUqf+Qd0iXPLcyhUZpPL1U6Hia1gINHNKIKx4g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/read/-/read-0.5.7.tgz}
+    resolution: {integrity: sha512-eYaNfxemgX7f7ELC58e7yqQICW5FB7V+bd1lKt7g57mxUrTveYME+JPaBPpYx02nP53XI6CQp6YxnR9NfmFPKw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/read/-/read-0.5.8.tgz}
     name: '@changesets/read'
-    version: 0.5.7
+    version: 0.5.8
     dependencies:
       '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
-      '@changesets/git': registry.npmjs.org/@changesets/git/1.4.1
+      '@changesets/git': registry.npmjs.org/@changesets/git/1.5.0
       '@changesets/logger': registry.npmjs.org/@changesets/logger/0.0.5
-      '@changesets/parse': registry.npmjs.org/@changesets/parse/0.3.14
+      '@changesets/parse': registry.npmjs.org/@changesets/parse/0.3.15
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
       chalk: registry.npmjs.org/chalk/2.4.2
       fs-extra: registry.npmjs.org/fs-extra/7.0.1
       p-filter: registry.npmjs.org/p-filter/2.1.0
@@ -877,19 +877,19 @@ packages:
     version: 4.1.0
     dev: true
 
-  registry.npmjs.org/@changesets/types/5.1.0:
+  registry.npmjs.org/@changesets/types/5.2.0:
-    resolution: {integrity: sha512-uUByGATZCdaPkaO9JkBsgGDjEvHyY2Sb0e/J23+cwxBi5h0fxpLF/HObggO/Fw8T2nxK6zDfJbPsdQt5RwYFJA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/types/-/types-5.1.0.tgz}
+    resolution: {integrity: sha512-km/66KOqJC+eicZXsm2oq8A8bVTSpkZJ60iPV/Nl5Z5c7p9kk8xxh6XGRTlnludHldxOOfudhnDN2qPxtHmXzA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/types/-/types-5.2.0.tgz}
     name: '@changesets/types'
-    version: 5.1.0
+    version: 5.2.0
     dev: true
 
-  registry.npmjs.org/@changesets/write/0.2.0:
+  registry.npmjs.org/@changesets/write/0.2.1:
-    resolution: {integrity: sha512-iKHqGYXZvneRzRfvEBpPqKfpGELOEOEP63MKdM/SdSRon40rsUijkTmsGCHT1ueLi3iJPZPmYuZJvjjKrMzumA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/write/-/write-0.2.0.tgz}
+    resolution: {integrity: sha512-KUd49nt2fnYdGixIqTi1yVE1nAoZYUMdtB3jBfp77IMqjZ65hrmZE5HdccDlTeClZN0420ffpnfET3zzeY8pdw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/write/-/write-0.2.1.tgz}
     name: '@changesets/write'
-    version: 0.2.0
+    version: 0.2.1
     dependencies:
       '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
-      '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0
+      '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0
       fs-extra: registry.npmjs.org/fs-extra/7.0.1
       human-id: registry.npmjs.org/human-id/1.0.2
       prettier: registry.npmjs.org/prettier/2.7.1
@@ -1755,7 +1755,7 @@ packages:
       eslint: registry.npmjs.org/eslint/8.23.1
       ignore: registry.npmjs.org/ignore/5.2.0
       regexpp: registry.npmjs.org/regexpp/3.2.0
-      semver: registry.npmjs.org/semver/7.3.7
+      semver: registry.npmjs.org/semver/7.3.8
       tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3
       typescript: registry.npmjs.org/typescript/4.8.3
     transitivePeerDependencies:
@@ -1842,7 +1842,7 @@ packages:
       debug: registry.npmjs.org/debug/4.3.4
       globby: registry.npmjs.org/globby/11.1.0
       is-glob: registry.npmjs.org/is-glob/4.0.3
-      semver: registry.npmjs.org/semver/7.3.7
+      semver: registry.npmjs.org/semver/7.3.8
       tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3
       typescript: registry.npmjs.org/typescript/4.8.3
     transitivePeerDependencies:
@@ -2020,7 +2020,7 @@ packages:
     dependencies:
       call-bind: registry.npmjs.org/call-bind/1.0.2
       define-properties: registry.npmjs.org/define-properties/1.1.4
-      es-abstract: registry.npmjs.org/es-abstract/1.20.3
+      es-abstract: registry.npmjs.org/es-abstract/1.20.4
       get-intrinsic: registry.npmjs.org/get-intrinsic/1.1.3
       is-string: registry.npmjs.org/is-string/1.0.7
     dev: true
@@ -2040,7 +2040,7 @@ packages:
     dependencies:
       call-bind: registry.npmjs.org/call-bind/1.0.2
       define-properties: registry.npmjs.org/define-properties/1.1.4
-      es-abstract: registry.npmjs.org/es-abstract/1.20.3
+      es-abstract: registry.npmjs.org/es-abstract/1.20.4
       es-shim-unscopables: registry.npmjs.org/es-shim-unscopables/1.0.0
     dev: true
 
@@ -2052,7 +2052,7 @@ packages:
     dependencies:
       call-bind: registry.npmjs.org/call-bind/1.0.2
       define-properties: registry.npmjs.org/define-properties/1.1.4
-      es-abstract: registry.npmjs.org/es-abstract/1.20.3
+      es-abstract: registry.npmjs.org/es-abstract/1.20.4
       es-shim-unscopables: registry.npmjs.org/es-shim-unscopables/1.0.0
     dev: true
 
@@ -3032,10 +3032,10 @@ packages:
       is-arrayish: registry.npmjs.org/is-arrayish/0.2.1
     dev: true
 
-  registry.npmjs.org/es-abstract/1.20.3:
+  registry.npmjs.org/es-abstract/1.20.4:
-    resolution: {integrity: sha512-AyrnaKVpMzljIdwjzrj+LxGmj8ik2LckwXacHqrJJ/jxz6dDDBcZ7I7nlHM0FvEW8MfbWJwOd+yT2XzYW49Frw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.3.tgz}
+    resolution: {integrity: sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz}
     name: es-abstract
-    version: 1.20.3
+    version: 1.20.4
     engines: {node: '>= 0.4'}
     dependencies:
       call-bind: registry.npmjs.org/call-bind/1.0.2
@@ -3425,6 +3425,32 @@ packages:
       string.prototype.matchall: registry.npmjs.org/string.prototype.matchall/4.0.7
     dev: true
 
+  registry.npmjs.org/eslint-plugin-react/7.31.9_eslint@8.23.1:
+    resolution: {integrity: sha512-vrVJwusIw4L99lyfXjtCw8HWdloajsiYslMavogrBe2Gl8gr95TJsJnOMRasN4b4N24I3XuJf6aAV6MhyGmjqw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.9.tgz}
+    id: registry.npmjs.org/eslint-plugin-react/7.31.9
+    name: eslint-plugin-react
+    version: 7.31.9
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+    dependencies:
+      array-includes: registry.npmjs.org/array-includes/3.1.5
+      array.prototype.flatmap: registry.npmjs.org/array.prototype.flatmap/1.3.0
+      doctrine: registry.npmjs.org/doctrine/2.1.0
+      eslint: registry.npmjs.org/eslint/8.23.1
+      estraverse: registry.npmjs.org/estraverse/5.3.0
+      jsx-ast-utils: registry.npmjs.org/jsx-ast-utils/3.3.3
+      minimatch: registry.npmjs.org/minimatch/3.1.2
+      object.entries: registry.npmjs.org/object.entries/1.1.5
+      object.fromentries: registry.npmjs.org/object.fromentries/2.0.5
+      object.hasown: registry.npmjs.org/object.hasown/1.1.1
+      object.values: registry.npmjs.org/object.values/1.1.5
+      prop-types: registry.npmjs.org/prop-types/15.8.1
+      resolve: registry.npmjs.org/resolve/2.0.0-next.4
+      semver: registry.npmjs.org/semver/6.3.0
+      string.prototype.matchall: registry.npmjs.org/string.prototype.matchall/4.0.7
+    dev: true
+
   registry.npmjs.org/eslint-plugin-turbo/0.0.4_eslint@8.23.1:
     resolution: {integrity: sha512-dfmYE/iPvoJInQq+5E/0mj140y/rYwKtzZkn3uVK8+nvwC5zmWKQ6ehMWrL4bYBkGzSgpOndZM+jOXhPQ2m8Cg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-0.0.4.tgz}
     id: registry.npmjs.org/eslint-plugin-turbo/0.0.4
@@ -3974,7 +4000,7 @@ packages:
     dependencies:
       call-bind: registry.npmjs.org/call-bind/1.0.2
       define-properties: registry.npmjs.org/define-properties/1.1.4
-      es-abstract: registry.npmjs.org/es-abstract/1.20.3
+      es-abstract: registry.npmjs.org/es-abstract/1.20.4
       functions-have-names: registry.npmjs.org/functions-have-names/1.2.3
     dev: true
 
@@ -5304,7 +5330,7 @@ packages:
     dependencies:
       call-bind: registry.npmjs.org/call-bind/1.0.2
       define-properties: registry.npmjs.org/define-properties/1.1.4
-      es-abstract: registry.npmjs.org/es-abstract/1.20.3
+      es-abstract: registry.npmjs.org/es-abstract/1.20.4
     dev: true
 
   registry.npmjs.org/object.fromentries/2.0.5:
@@ -5315,7 +5341,7 @@ packages:
     dependencies:
       call-bind: registry.npmjs.org/call-bind/1.0.2
       define-properties: registry.npmjs.org/define-properties/1.1.4
-      es-abstract: registry.npmjs.org/es-abstract/1.20.3
+      es-abstract: registry.npmjs.org/es-abstract/1.20.4
     dev: true
 
   registry.npmjs.org/object.hasown/1.1.1:
@@ -5324,7 +5350,7 @@ packages:
     version: 1.1.1
     dependencies:
       define-properties: registry.npmjs.org/define-properties/1.1.4
-      es-abstract: registry.npmjs.org/es-abstract/1.20.3
+      es-abstract: registry.npmjs.org/es-abstract/1.20.4
     dev: true
 
   registry.npmjs.org/object.values/1.1.5:
@@ -5335,7 +5361,7 @@ packages:
     dependencies:
       call-bind: registry.npmjs.org/call-bind/1.0.2
       define-properties: registry.npmjs.org/define-properties/1.1.4
-      es-abstract: registry.npmjs.org/es-abstract/1.20.3
+      es-abstract: registry.npmjs.org/es-abstract/1.20.4
     dev: true
 
   registry.npmjs.org/once/1.4.0:
@@ -6226,6 +6252,16 @@ packages:
       lru-cache: registry.npmjs.org/lru-cache/6.0.0
     dev: true
 
+  registry.npmjs.org/semver/7.3.8:
+    resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/semver/-/semver-7.3.8.tgz}
+    name: semver
+    version: 7.3.8
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: registry.npmjs.org/lru-cache/6.0.0
+    dev: true
+
   registry.npmjs.org/serialize-javascript/4.0.0:
     resolution: {integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz}
     name: serialize-javascript
@@ -6503,7 +6539,7 @@ packages:
     dependencies:
       call-bind: registry.npmjs.org/call-bind/1.0.2
       define-properties: registry.npmjs.org/define-properties/1.1.4
-      es-abstract: registry.npmjs.org/es-abstract/1.20.3
+      es-abstract: registry.npmjs.org/es-abstract/1.20.4
       get-intrinsic: registry.npmjs.org/get-intrinsic/1.1.3
       has-symbols: registry.npmjs.org/has-symbols/1.0.3
       internal-slot: registry.npmjs.org/internal-slot/1.0.3
@@ -6518,7 +6554,7 @@ packages:
     dependencies:
       call-bind: registry.npmjs.org/call-bind/1.0.2
       define-properties: registry.npmjs.org/define-properties/1.1.4
-      es-abstract: registry.npmjs.org/es-abstract/1.20.3
+      es-abstract: registry.npmjs.org/es-abstract/1.20.4
     dev: true
 
   registry.npmjs.org/string.prototype.trimstart/1.0.5:
@@ -6528,7 +6564,7 @@ packages:
     dependencies:
       call-bind: registry.npmjs.org/call-bind/1.0.2
       define-properties: registry.npmjs.org/define-properties/1.1.4
-      es-abstract: registry.npmjs.org/es-abstract/1.20.3
+      es-abstract: registry.npmjs.org/es-abstract/1.20.4
     dev: true
 
   registry.npmjs.org/strip-ansi/6.0.1: