Merge pull request #2537 from wbkd/release/11.2.0

Release: 11.2.0
2022-11-02 21:07:49 +01:00
parent 674127a3eb d54b6b8617
commit 0b80eadb4a
36 changed files with 1122 additions and 189 deletions
--- a/examples/vite-app/package.json
+++ b/examples/vite-app/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@reactflow/examples",
  "private": true,
-  "version": "0.0.2",
+  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port 3000 --open",
--- a/examples/vite-app/src/App/index.tsx
+++ b/examples/vite-app/src/App/index.tsx
@@ -10,11 +10,13 @@ import DefaultNodes from '../examples/DefaultNodes';
 import DragHandle from '../examples/DragHandle';
 import DragNDrop from '../examples/DragNDrop';
 import Edges from '../examples/Edges';
+import EdgeRenderer from '../examples/EdgeRenderer';
 import EdgeTypes from '../examples/EdgeTypes';
 import Empty from '../examples/Empty';
 import FloatingEdges from '../examples/FloatingEdges';
 import Hidden from '../examples/Hidden';
 import Interaction from '../examples/Interaction';
+import Intersection from '../examples/Intersection';
 import Layouting from '../examples/Layouting';
 import MultiFlows from '../examples/MultiFlows';
 import NestedNodes from '../examples/NestedNodes';
@@ -36,6 +38,7 @@ import Validation from '../examples/Validation';
 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 {
@@ -95,6 +98,11 @@ const routes: IRoute[] = [
    path: '/edges',
    component: Edges,
  },
+  {
+    name: 'Edge Renderer',
+    path: '/edge-renderer',
+    component: EdgeRenderer,
+  },
  {
    name: 'Edge Types',
    path: '/edge-types',
@@ -125,6 +133,16 @@ const routes: IRoute[] = [
    path: '/interaction',
    component: Interaction,
  },
+  {
+    name: 'Intersection',
+    path: '/intersection',
+    component: Intersection,
+  },
+  {
+    name: 'Interactive Minimap',
+    path: '/interactive-minimap',
+    component: InteractiveMinimap,
+  },
  {
    name: 'Layouting',
    path: '/layouting',
--- a/examples/vite-app/src/examples/Basic/index.tsx
+++ b/examples/vite-app/src/examples/Basic/index.tsx
@@ -106,7 +106,7 @@ const BasicFlow = () => {
        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
          toggle classnames
        </button>
-        <button onClick={logToObject}>toObject</button>
+        <button onClick={logToObject} style={{ marginRight: 5 }}>toObject</button>
      </div>
    </ReactFlow>
  );
--- a/examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx
+++ b/examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx
@@ -0,0 +1,61 @@
+import { FC, MouseEvent } from 'react';
+import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore, ReactFlowStore } from 'reactflow';
+
+const CustomEdge: FC<EdgeProps> = ({
+  id,
+  source,
+  target,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+}) => {
+  const isConnectedNodeDragging = useStore((s) =>
+    Array.from(s.nodeInternals.values()).find((n) => n.dragging && (target === n.id || source === n.id))
+  );
+
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const onClick = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    console.log('click', data.text);
+  };
+
+  return (
+    <>
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
+
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            background: '#ffcc00',
+            padding: 10,
+            zIndex: isConnectedNodeDragging ? 10 : 0,
+            pointerEvents: 'all',
+          }}
+          className="nodrag nopan"
+        >
+          {data.text}
+          <input style={{ display: 'block' }} />
+          <button onClick={onClick}>send</button>
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+};
+
+export default CustomEdge;
--- a/examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx
+++ b/examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx
@@ -0,0 +1,51 @@
+import { FC } from 'react';
+import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow';
+
+const CustomEdge: FC<EdgeProps> = ({
+  id,
+  source,
+  target,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+}) => {
+  const isConnectedNodeDragging = useStore((s) =>
+    Array.from(s.nodeInternals.values()).find((n) => n.dragging && (target === n.id || source === n.id))
+  );
+
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <>
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
+
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            background: 'white',
+            border: '1px solid #555',
+            padding: 5,
+            zIndex: isConnectedNodeDragging ? 10 : 0,
+          }}
+        >
+          {data.text}
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+};
+
+export default CustomEdge;
--- a/examples/vite-app/src/examples/EdgeRenderer/index.tsx
+++ b/examples/vite-app/src/examples/EdgeRenderer/index.tsx
@@ -0,0 +1,206 @@
+import React, { MouseEvent, useCallback } from 'react';
+import ReactFlow, {
+  Controls,
+  Background,
+  MiniMap,
+  addEdge,
+  Connection,
+  Edge,
+  EdgeTypes,
+  MarkerType,
+  Node,
+  useEdgesState,
+  useNodesState,
+} from 'reactflow';
+
+import CustomEdge from './CustomEdge';
+import CustomEdge2 from './CustomEdge2';
+
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
+const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('dblclick', edge);
+const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('enter', edge);
+const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('move', edge);
+const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('leave', edge);
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Input 1' },
+    position: { x: 250, y: 0 },
+  },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
+  { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
+  { id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
+  { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
+  { id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
+  {
+    id: '6',
+    type: 'output',
+    data: { label: 'Output 6' },
+    position: { x: 50, y: 550 },
+  },
+  {
+    id: '7',
+    type: 'output',
+    data: { label: 'Output 7' },
+    position: { x: 250, y: 550 },
+  },
+  {
+    id: '8',
+    type: 'output',
+    data: { label: 'Output 8' },
+    position: { x: 525, y: 600 },
+  },
+  {
+    id: '9',
+    type: 'output',
+    data: { label: 'Output 9' },
+    position: { x: 675, y: 500 },
+  },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    label: 'bezier edge (default)',
+    className: 'normal-edge',
+  },
+  {
+    id: 'e2-2a',
+    source: '2',
+    target: '2a',
+    type: 'smoothstep',
+    label: 'smoothstep edge',
+  },
+  {
+    id: 'e2a-2b',
+    source: '2a',
+    target: '2b',
+    type: 'simplebezier',
+    label: 'simple bezier edge',
+  },
+  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
+  {
+    id: 'e3-4',
+    source: '3',
+    target: '4',
+    type: 'straight',
+    label: 'straight edge',
+  },
+  {
+    id: 'e3-3a',
+    source: '3',
+    target: '3a',
+    type: 'straight',
+    label: 'label only edge',
+    style: { stroke: 'none' },
+  },
+  {
+    id: 'e3-5',
+    source: '4',
+    target: '5',
+    animated: true,
+    label: 'animated styled edge',
+    style: { stroke: 'red' },
+  },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    label: 'label with styled bg',
+    labelBgPadding: [8, 4],
+    labelBgBorderRadius: 4,
+    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-8',
+    source: '5',
+    target: '8',
+    type: 'custom',
+    data: { text: 'custom edge' },
+  },
+  {
+    id: 'e5-9',
+    source: '5',
+    target: '9',
+    type: 'custom2',
+    data: { text: 'custom edge 2' },
+  },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    label: (
+      <>
+        <tspan>i am using</tspan>
+        <tspan dy={10} x={0}>
+          {'<tspan>'}
+        </tspan>
+      </>
+    ),
+    labelStyle: { fill: 'red', fontWeight: 700 },
+    style: { stroke: '#ffcc00' },
+    markerEnd: {
+      type: MarkerType.Arrow,
+      color: '#FFCC00',
+      markerUnits: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+      strokeWidth: 2,
+    },
+    markerStart: {
+      type: MarkerType.ArrowClosed,
+      color: '#FFCC00',
+      orient: 'auto-start-reverse',
+      markerUnits: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+    },
+  },
+];
+
+const edgeTypes: EdgeTypes = {
+  custom: CustomEdge,
+  custom2: CustomEdge2,
+};
+
+const EdgesFlow = () => {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
+      onConnect={onConnect}
+      onNodeDragStop={onNodeDragStop}
+      snapToGrid={true}
+      edgeTypes={edgeTypes}
+      onEdgeClick={onEdgeClick}
+      onEdgeDoubleClick={onEdgeDoubleClick}
+      onEdgeMouseEnter={onEdgeMouseEnter}
+      onEdgeMouseMove={onEdgeMouseMove}
+      onEdgeMouseLeave={onEdgeMouseLeave}
+    >
+      <MiniMap />
+      <Controls />
+      <Background />
+    </ReactFlow>
+  );
+};
+
+export default EdgesFlow;
--- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
+++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
@@ -0,0 +1,165 @@
+import { MouseEvent, useCallback } from 'react';
+import ReactFlow, {
+  MiniMap,
+  Background,
+  BackgroundVariant,
+  Controls,
+  ReactFlowProvider,
+  Node,
+  Edge,
+  useReactFlow,
+  XYPosition,
+} from 'reactflow';
+
+const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    data: { label: 'Node 1' },
+    position: { x: 0, y: 0 },
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 0, y: 200 },
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3' },
+    position: { x: 200, y: 0 },
+  },
+
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 1000, y: 0 },
+  },
+  {
+    id: '5',
+    data: { label: 'Node 5' },
+    position: { x: 1000, y: 200 },
+  },
+  {
+    id: '6',
+    data: { label: 'Node 6' },
+    position: { x: 800, y: 0 },
+  },
+
+  {
+    id: '7',
+    data: { label: 'Node 4' },
+    position: { x: 0, y: 1000 },
+  },
+  {
+    id: '8',
+    data: { label: 'Node 5' },
+    position: { x: 0, y: 800 },
+  },
+  {
+    id: '9',
+    data: { label: 'Node 6' },
+    position: { x: 200, y: 1000 },
+  },
+
+  {
+    id: '10',
+    data: { label: 'Node 4' },
+    position: { x: 1000, y: 1000 },
+  },
+  {
+    id: '11',
+    data: { label: 'Node 5' },
+    position: { x: 800, y: 1000 },
+  },
+  {
+    id: '12',
+    data: { label: 'Node 6' },
+    position: { x: 1000, y: 800 },
+  },
+];
+
+const initialEdges: Edge[] = [];
+
+const defaultEdgeOptions = { zIndex: 0 };
+
+const BasicFlow = () => {
+  const instance = useReactFlow();
+
+  const updatePos = () => {
+    instance.setNodes((nodes) =>
+      nodes.map((node) => {
+        node.position = {
+          x: Math.random() * 400,
+          y: Math.random() * 400,
+        };
+
+        return node;
+      })
+    );
+  };
+
+  const logToObject = () => console.log(instance.toObject());
+  const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 });
+
+  const toggleClassnames = () => {
+    instance.setNodes((nodes) =>
+      nodes.map((node) => {
+        node.className = node.className === 'light' ? 'dark' : 'light';
+
+        return node;
+      })
+    );
+  };
+
+  const onMiniMapClick = useCallback((event: MouseEvent, pos: XYPosition) => {
+    console.log(pos);
+  }, []);
+
+  const onMiniMapNodeClick = useCallback((event: MouseEvent, node: Node) => {
+    console.log(node);
+  }, []);
+
+  return (
+    <ReactFlow
+      defaultNodes={initialNodes}
+      defaultEdges={initialEdges}
+      onNodeClick={onNodeClick}
+      onNodeDragStop={onNodeDragStop}
+      onNodeDrag={onNodeDrag}
+      className="react-flow-basic-example"
+      minZoom={0.2}
+      maxZoom={4}
+      defaultEdgeOptions={defaultEdgeOptions}
+      selectNodesOnDrag={false}
+      fitView
+    >
+      <Background variant={BackgroundVariant.Dots} />
+      <MiniMap onClick={onMiniMapClick} onNodeClick={onMiniMapNodeClick} pannable zoomable />
+      <Controls />
+
+      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
+        <button onClick={resetTransform} style={{ marginRight: 5 }}>
+          reset transform
+        </button>
+        <button onClick={updatePos} style={{ marginRight: 5 }}>
+          change pos
+        </button>
+        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
+          toggle classnames
+        </button>
+        <button onClick={logToObject}>toObject</button>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <BasicFlow />
+    </ReactFlowProvider>
+  );
+}
--- a/examples/vite-app/src/examples/Intersection/index.tsx
+++ b/examples/vite-app/src/examples/Intersection/index.tsx
@@ -0,0 +1,104 @@
+import { useCallback, MouseEvent } from 'react';
+import ReactFlow, {
+  MiniMap,
+  Background,
+  Controls,
+  ReactFlowProvider,
+  Node,
+  Edge,
+  useReactFlow,
+  useNodesState,
+} from 'reactflow';
+
+import './style.css';
+
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 0, y: 0 },
+    className: 'light',
+    style: {
+      width: 200,
+      height: 100,
+    },
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 0, y: 150 },
+    className: 'light',
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3' },
+    position: { x: 250, y: 0 },
+    className: 'light',
+  },
+  {
+    id: '4',
+    data: { label: 'Node' },
+    position: { x: 350, y: 150 },
+    style: {
+      width: 50,
+      height: 50,
+    },
+    className: 'light',
+  },
+];
+
+const initialEdges: Edge[] = [];
+
+const defaultEdgeOptions = { zIndex: 0 };
+
+const BasicFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const { getIntersectingNodes, isNodeIntersecting } = useReactFlow();
+
+  const onNodeDrag = useCallback((_: MouseEvent, node: Node) => {
+    const intersections = getIntersectingNodes(node).map((n) => n.id);
+    const isIntersecting = isNodeIntersecting(node, { x: 0, y: 0, width: 100, height: 100 });
+
+    console.log(isIntersecting);
+
+    setNodes((ns) =>
+      ns.map((n) => ({
+        ...n,
+        className: intersections.includes(n.id) ? 'highlight' : '',
+      }))
+    );
+  }, []);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={initialEdges}
+      onNodesChange={onNodesChange}
+      onNodeClick={onNodeClick}
+      onNodeDragStop={onNodeDragStop}
+      onNodeDrag={onNodeDrag}
+      className="react-flow-basic-example"
+      minZoom={0.2}
+      maxZoom={4}
+      fitView
+      defaultEdgeOptions={defaultEdgeOptions}
+      selectNodesOnDrag={false}
+    >
+      <Background />
+      <MiniMap />
+      <Controls />
+    </ReactFlow>
+  );
+};
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <BasicFlow />
+    </ReactFlowProvider>
+  );
+}
--- a/examples/vite-app/src/examples/Intersection/style.css
+++ b/examples/vite-app/src/examples/Intersection/style.css
@@ -0,0 +1,4 @@
+.react-flow__node.highlight {
+  background-color: #ff5050;
+  color: white;
+}
--- a/examples/vite-app/src/examples/NestedNodes/index.tsx
+++ b/examples/vite-app/src/examples/NestedNodes/index.tsx
@@ -160,7 +160,7 @@ const NestedFlow = () => {
      maxZoom={4}
      onlyRenderVisibleElements={false}
    >
-      <MiniMap />
+      <MiniMap pannable />
      <Controls />
      <Background />

--- a/examples/vite-app/src/examples/UseReactFlow/index.tsx
+++ b/examples/vite-app/src/examples/UseReactFlow/index.tsx
@@ -43,6 +43,7 @@ const initialNodes: Node[] = [
 const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
+  // { id: 'e3-4', source: '3', target: '4' }
 ];

 let id = 5;
@@ -64,6 +65,7 @@ const UseZoomPanHelperFlow = () => {
    addEdges,
    getNodes,
    getEdges,
+    deleteElements
  } = useReactFlow();

  const onPaneClick = useCallback(
@@ -111,6 +113,16 @@ const UseZoomPanHelperFlow = () => {
    console.log('edges', getEdges());
  }, [getNodes, getEdges]);

+  const deleteSelectedElements = useCallback(() => {
+    const selectedNodes = nodes.filter(node => node.selected);
+    const selectedEdges = edges.filter(edge => edge.selected);
+    deleteElements({ nodes: selectedNodes, edges: selectedEdges });
+  }, [deleteElements, nodes, edges])
+
+  const deleteSomeElements = useCallback(() => {
+    deleteElements({ nodes: [{ id: '2' }], edges: [{ id: 'e1-3' }] })
+  }, [])
+
  useEffect(() => {
    addEdges({ id: 'e3-4', source: '3', target: '4' });
  }, [addEdges]);
@@ -137,6 +149,8 @@ const UseZoomPanHelperFlow = () => {
        <button onClick={onAddNode}>add node</button>
        <button onClick={onResetNodes}>reset nodes</button>
        <button onClick={logNodes}>useNodes</button>
+        <button onClick={deleteSelectedElements}>deleteSelectedElements</button>
+        <button onClick={deleteSomeElements}>deleteSomeElements</button>
      </div>
      <Background />
      <MiniMap />
--- a/packages/background/CHANGELOG.md
+++ b/packages/background/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @reactflow/background

+## 11.0.4
+
+### Patch Changes
+
+- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]:
+  - @reactflow/core@11.2.0
+
 ## 11.0.3

 ### Patch Changes
--- a/packages/background/package.json
+++ b/packages/background/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/background",
-  "version": "11.0.3",
+  "version": "11.0.4",
  "description": "Background component with different variants for React Flow",
  "keywords": [
    "react",
--- a/packages/controls/CHANGELOG.md
+++ b/packages/controls/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @reactflow/controls

+## 11.0.4
+
+### Patch Changes
+
+- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]:
+  - @reactflow/core@11.2.0
+
 ## 11.0.3

 ### Patch Changes
--- a/packages/controls/package.json
+++ b/packages/controls/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/controls",
-  "version": "11.0.3",
+  "version": "11.0.4",
  "description": "Component to control the viewport of a React Flow instance",
  "keywords": [
    "react",
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,21 @@
 # @reactflow/core

+## 11.2.0
+
+### Minor Changes
+
+- [#2535](https://github.com/wbkd/react-flow/pull/2535) [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948) Thanks [@moklick](https://github.com/moklick)! - Feat: Add edge label renderer
+
+- [#2536](https://github.com/wbkd/react-flow/pull/2536) [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e) Thanks [@pengfu](https://github.com/pengfu)! - Feat: add deleteElements helper function
+
+- [#2539](https://github.com/wbkd/react-flow/pull/2539) [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931) Thanks [@moklick](https://github.com/moklick)! - Feat: add intersection helpers
+
+- [#2530](https://github.com/wbkd/react-flow/pull/2530) [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21) Thanks [@moklick](https://github.com/moklick)! - Feat: Add pan and zoom to mini map
+
+### Patch Changes
+
+- [#2538](https://github.com/wbkd/react-flow/pull/2538) [`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc) Thanks [@neo](https://github.com/neo)! - Refactor: put React Flow in isolated stacking context
+
 ## 11.1.2

 ### Patch Changes
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/core",
-  "version": "11.1.2",
+  "version": "11.2.0",
  "description": "Core components and util functions of React Flow.",
  "keywords": [
    "react",
@@ -58,6 +58,7 @@
    "@reactflow/tsconfig": "workspace:*",
    "@types/node": "^18.7.16",
    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
    "react": "^18.2.0",
    "typescript": "^4.8.3"
  },
--- a/packages/core/src/components/EdgeLabelRenderer/index.tsx
+++ b/packages/core/src/components/EdgeLabelRenderer/index.tsx
@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+function EdgeLabelRenderer({ children }: { children: ReactNode }) {
+  const wrapperRef = useRef(document.getElementById('edgelabel-portal'));
+
+  if (!wrapperRef.current) {
+    return null;
+  }
+
+  return createPortal(children, wrapperRef.current);
+}
+
+export default EdgeLabelRenderer;
--- a/packages/core/src/container/GraphView/index.tsx
+++ b/packages/core/src/container/GraphView/index.tsx
@@ -158,6 +158,8 @@ const GraphView = ({
          disableKeyboardA11y={disableKeyboardA11y}
          rfId={rfId}
        />
+        <div className="react-flow__edgelabel-renderer" id="edgelabel-portal" />
+
        <NodeRenderer
          nodeTypes={nodeTypes}
          onNodeClick={onNodeClick}
--- a/packages/core/src/container/ReactFlow/index.tsx
+++ b/packages/core/src/container/ReactFlow/index.tsx
@@ -51,8 +51,9 @@ const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
 const wrapperStyle: CSSProperties = {
  width: '100%',
  height: '100%',
-  position: 'relative',
  overflow: 'hidden',
+  position: 'relative',
+  zIndex: 0,
 };

 const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
--- a/packages/core/src/container/ZoomPane/index.tsx
+++ b/packages/core/src/container/ZoomPane/index.tsx
@@ -173,9 +173,12 @@ const ZoomPane = ({
  useEffect(() => {
    if (d3Zoom) {
      d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+        if (!event.sourceEvent) {
+          return null;
+        }
+
        const { onViewportChangeStart } = store.getState();
        isZoomingOrPanning.current = true;
-
        if (event.sourceEvent?.type === 'mousedown') {
          store.setState({ paneDragging: true });
        }
@@ -194,6 +197,9 @@ const ZoomPane = ({
  useEffect(() => {
    if (d3Zoom) {
      d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+        if (!event.sourceEvent) {
+          return null;
+        }
        const { onViewportChangeEnd } = store.getState();

        isZoomingOrPanning.current = false;
--- a/packages/core/src/hooks/useGlobalKeyHandler.ts
+++ b/packages/core/src/hooks/useGlobalKeyHandler.ts
@@ -2,9 +2,8 @@ import { useEffect } from 'react';

 import { useStoreApi } from '../hooks/useStore';
 import useKeyPress from './useKeyPress';
-import { getConnectedEdges } from '../utils/graph';
-import type { KeyCode, NodeChange, Node } from '../types';
-
+import type { KeyCode } from '../types';
+import useReactFlow from './useReactFlow';
 interface HookParams {
  deleteKeyCode: KeyCode | null;
  multiSelectionKeyCode: KeyCode | null;
@@ -12,87 +11,18 @@ interface HookParams {

 export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
  const store = useStoreApi();
+  const { deleteElements } = useReactFlow();
+
  const deleteKeyPressed = useKeyPress(deleteKeyCode);
  const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);

  useEffect(() => {
-    if (!deleteKeyPressed) {
-      return;
-    }
-
-    const {
-      nodeInternals,
-      edges,
-      hasDefaultNodes,
-      hasDefaultEdges,
-      onNodesDelete,
-      onEdgesDelete,
-      onNodesChange,
-      onEdgesChange,
-    } = store.getState();
-    const nodes = Array.from(nodeInternals.values());
-    const nodesToRemove = nodes.reduce<Node[]>((res, node) => {
-      const parentSelected = !node.selected && node.parentNode && res.find((n) => n.id === node.parentNode);
-      const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
-      if (deletable && (node.selected || parentSelected)) {
-        res.push(node);
-      }
-
-      return res;
-    }, []);
-    const deletableEdges = edges.filter((e) => (typeof e.deletable === 'boolean' ? e.deletable : true));
-    const selectedEdges = deletableEdges.filter((e) => e.selected);
-
-    if (nodesToRemove || selectedEdges) {
-      const connectedEdges = getConnectedEdges(nodesToRemove, deletableEdges);
-      const edgesToRemove = [...selectedEdges, ...connectedEdges];
-      const edgeIdsToRemove = edgesToRemove.reduce<string[]>((res, edge) => {
-        if (!res.includes(edge.id)) {
-          res.push(edge.id);
-        }
-        return res;
-      }, []);
-
-      if (hasDefaultEdges || hasDefaultNodes) {
-        if (hasDefaultEdges) {
-          store.setState({
-            edges: edges.filter((e) => !edgeIdsToRemove.includes(e.id)),
-          });
-        }
-
-        if (hasDefaultNodes) {
-          nodesToRemove.forEach((node) => {
-            nodeInternals.delete(node.id);
-          });
-
-          store.setState({
-            nodeInternals: new Map(nodeInternals),
-          });
-        }
-      }
-
-      if (edgeIdsToRemove.length > 0) {
-        onEdgesDelete?.(edgesToRemove);
-
-        if (onEdgesChange) {
-          onEdgesChange(
-            edgeIdsToRemove.map((id) => ({
-              id,
-              type: 'remove',
-            }))
-          );
-        }
-      }
-
-      if (nodesToRemove.length > 0) {
-        onNodesDelete?.(nodesToRemove);
-
-        if (onNodesChange) {
-          const nodeChanges: NodeChange[] = nodesToRemove.map((n) => ({ id: n.id, type: 'remove' }));
-          onNodesChange(nodeChanges);
-        }
-      }
-
+    if (deleteKeyPressed) {
+      const { nodeInternals, edges } = store.getState();
+      const nodes = Array.from(nodeInternals.values());
+      const selectedNodes = nodes.filter((node) => node.selected);
+      const selectedEdges = edges.filter((edge) => edge.selected);
+      deleteElements({nodes: selectedNodes, edges: selectedEdges});
      store.setState({ nodesSelectionActive: false });
    }
  }, [deleteKeyPressed]);
--- a/packages/core/src/hooks/useReactFlow.ts
+++ b/packages/core/src/hooks/useReactFlow.ts
@@ -11,7 +11,12 @@ import type {
  EdgeResetChange,
  NodeRemoveChange,
  EdgeRemoveChange,
+  NodeChange,
+  Node,
+  Rect,
 } from '../types';
+import { getConnectedEdges } from '../utils/graph';
+import { getOverlappingArea, isRectObject, nodeToRect } from '../utils';

 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {
@@ -111,6 +116,140 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
    };
  }, []);

+  const deleteElements = useCallback<Instance.DeleteElements>(({ nodes: nodesDeleted, edges: edgesDeleted }) => {
+    const {
+      nodeInternals,
+      edges,
+      hasDefaultNodes,
+      hasDefaultEdges,
+      onNodesDelete,
+      onEdgesDelete,
+      onNodesChange,
+      onEdgesChange,
+    } = store.getState();
+    const nodes = Array.from(nodeInternals.values());
+    const nodeIds = (nodesDeleted || []).map((node) => node.id);
+    const edgeIds = (edgesDeleted || []).map((edge) => edge.id);
+    const nodesToRemove = nodes.reduce<Node[]>((res, node) => {
+      const parentHit = !nodeIds.includes(node.id) && node.parentNode && res.find((n) => n.id === node.parentNode);
+      const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
+      if (deletable && (nodeIds.includes(node.id) || parentHit)) {
+        res.push(node);
+      }
+
+      return res;
+    }, []);
+    const deletableEdges = edges.filter((e) => (typeof e.deletable === 'boolean' ? e.deletable : true));
+    const initialHitEdges = deletableEdges.filter((e) => edgeIds.includes(e.id));
+    if (nodesToRemove || initialHitEdges) {
+      const connectedEdges = getConnectedEdges(nodesToRemove, deletableEdges);
+      const edgesToRemove = [...initialHitEdges, ...connectedEdges];
+      const edgeIdsToRemove = edgesToRemove.reduce<string[]>((res, edge) => {
+        if (!res.includes(edge.id)) {
+          res.push(edge.id);
+        }
+        return res;
+      }, []);
+
+      if (hasDefaultEdges || hasDefaultNodes) {
+        if (hasDefaultEdges) {
+          store.setState({
+            edges: edges.filter((e) => !edgeIdsToRemove.includes(e.id)),
+          });
+        }
+
+        if (hasDefaultNodes) {
+          nodesToRemove.forEach((node) => {
+            nodeInternals.delete(node.id);
+          });
+
+          store.setState({
+            nodeInternals: new Map(nodeInternals),
+          });
+        }
+      }
+
+      if (edgeIdsToRemove.length > 0) {
+        onEdgesDelete?.(edgesToRemove);
+
+        if (onEdgesChange) {
+          onEdgesChange(
+            edgeIdsToRemove.map((id) => ({
+              id,
+              type: 'remove',
+            }))
+          );
+        }
+      }
+
+      if (nodesToRemove.length > 0) {
+        onNodesDelete?.(nodesToRemove);
+
+        if (onNodesChange) {
+          const nodeChanges: NodeChange[] = nodesToRemove.map((n) => ({ id: n.id, type: 'remove' }));
+          onNodesChange(nodeChanges);
+        }
+      }
+    }
+  }, []);
+
+  const getNodeRect = useCallback(
+    (
+      nodeOrRect: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect
+    ): [Rect | null, Node<NodeData> | null | undefined, boolean] => {
+      const isRect = isRectObject(nodeOrRect);
+      const node = isRect ? null : store.getState().nodeInternals.get(nodeOrRect.id);
+
+      if (!isRect && !node) {
+        [null, null, isRect];
+      }
+
+      const nodeRect = isRect ? nodeOrRect : nodeToRect(node!);
+
+      return [nodeRect, node, isRect];
+    },
+    []
+  );
+
+  const getIntersectingNodes = useCallback<Instance.GetIntersectingNodes<NodeData>>(
+    (nodeOrRect, partially = true, nodes) => {
+      const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
+
+      if (!nodeRect) {
+        return [];
+      }
+
+      return (nodes || Array.from(store.getState().nodeInternals.values())).filter((n) => {
+        if (!isRect && (n.id === node!.id || !n.positionAbsolute)) {
+          return false;
+        }
+
+        const currNodeRect = nodeToRect(n);
+        const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
+        const partiallyVisible = partially && overlappingArea > 0;
+
+        return partiallyVisible || overlappingArea >= nodeOrRect.width! * nodeOrRect.height!;
+      });
+    },
+    []
+  );
+
+  const isNodeIntersecting = useCallback<Instance.IsNodeIntersecting<NodeData>>(
+    (nodeOrRect, area, partially = true) => {
+      const [nodeRect] = getNodeRect(nodeOrRect);
+
+      if (!nodeRect) {
+        return false;
+      }
+
+      const overlappingArea = getOverlappingArea(nodeRect, area);
+      const partiallyVisible = partially && overlappingArea > 0;
+
+      return partiallyVisible || overlappingArea >= nodeOrRect.width! * nodeOrRect.height!;
+    },
+    []
+  );
+
  return useMemo(() => {
    return {
      ...viewportHelper,
@@ -123,6 +262,23 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
      addNodes,
      addEdges,
      toObject,
+      deleteElements,
+      getIntersectingNodes,
+      isNodeIntersecting,
    };
-  }, [viewportHelper, getNodes, getNode, getEdges, getEdge, setNodes, setEdges, addNodes, addEdges, toObject]);
+  }, [
+    viewportHelper,
+    getNodes,
+    getNode,
+    getEdges,
+    getEdge,
+    setNodes,
+    setEdges,
+    addNodes,
+    addEdges,
+    toObject,
+    deleteElements,
+    getIntersectingNodes,
+    isNodeIntersecting,
+  ]);
 }
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -24,6 +24,7 @@ export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { getMarkerEnd } from './components/Edges/utils';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel } from './components/Panel';
+export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';

 export { default as useReactFlow } from './hooks/useReactFlow';
 export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';
--- a/packages/core/src/styles/init.css
+++ b/packages/core/src/styles/init.css
@@ -220,3 +220,10 @@
    stroke-dashoffset: 10;
  }
 }
+
+.react-flow__edgelabel-renderer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
--- a/packages/core/src/types/instance.ts
+++ b/packages/core/src/types/instance.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-namespace */
-import { ViewportHelperFunctions, Viewport, Node, Edge } from '.';
+import { ViewportHelperFunctions, Viewport, Node, Edge, Rect } from '.';

 export type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
  nodes: Node<NodeData>[];
@@ -8,6 +8,10 @@ export type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
  viewport: Viewport;
 };

+export type DeleteElementsOptions = {
+  nodes?: (Partial<Node> & { id: Node['id'] })[];
+  edges?: (Partial<Edge> & { id: Edge['id'] })[];
+};
 export namespace Instance {
  export type GetNodes<NodeData> = () => Node<NodeData>[];
  export type SetNodes<NodeData> = (
@@ -22,6 +26,17 @@ export namespace Instance {
  export type GetEdge<EdgeData> = (id: string) => Edge<EdgeData> | undefined;
  export type AddEdges<EdgeData> = (payload: Edge<EdgeData>[] | Edge<EdgeData>) => void;
  export type ToObject<NodeData = any, EdgeData = any> = () => ReactFlowJsonObject<NodeData, EdgeData>;
+  export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => void;
+  export type GetIntersectingNodes<NodeData> = (
+    node: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect,
+    partially?: boolean,
+    nodes?: Node<NodeData>[]
+  ) => Node<NodeData>[];
+  export type IsNodeIntersecting<NodeData> = (
+    node: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect,
+    area: Rect,
+    partially?: boolean
+  ) => boolean;
 }

 export type ReactFlowInstance<NodeData = any, EdgeData = any> = {
@@ -34,5 +49,8 @@ export type ReactFlowInstance<NodeData = any, EdgeData = any> = {
  addEdges: Instance.AddEdges<EdgeData>;
  getEdge: Instance.GetEdge<EdgeData>;
  toObject: Instance.ToObject<NodeData, EdgeData>;
+  deleteElements: Instance.DeleteElements;
+  getIntersectingNodes: Instance.GetIntersectingNodes<NodeData>;
+  isNodeIntersecting: Instance.IsNodeIntersecting<NodeData>;
  viewportInitialized: boolean;
 } & Omit<ViewportHelperFunctions, 'initialized'>;
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { Selection as D3Selection } from 'd3';

-import { boxToRect, clamp, devWarn, getBoundsOfBoxes, rectToBox } from '../utils';
+import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectToBox } from '../utils';
 import type { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';

 export const isEdge = (element: Node | Connection | Edge): element is Edge =>
@@ -161,12 +161,12 @@ export const getNodesInside = (
  // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
  excludeNonSelectableNodes = false
 ): Node[] => {
-  const rBox = rectToBox({
+  const paneRect = {
    x: (rect.x - tx) / tScale,
    y: (rect.y - ty) / tScale,
    width: rect.width / tScale,
    height: rect.height / tScale,
-  });
+  };

  const visibleNodes: Node[] = [];

@@ -177,10 +177,8 @@ export const getNodesInside = (
      return false;
    }

-    const nBox = rectToBox({ ...positionAbsolute, width: width || 0, height: height || 0 });
-    const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x));
-    const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));
-    const overlappingArea = Math.ceil(xOverlap * yOverlap);
+    const nodeRect = { ...positionAbsolute, width: width || 0, height: height || 0 };
+    const overlappingArea = getOverlappingArea(paneRect, nodeRect);
    const notInitialized =
      typeof width === 'undefined' || typeof height === 'undefined' || width === null || height === null;

--- a/packages/core/src/utils/index.ts
+++ b/packages/core/src/utils/index.ts
@@ -1,4 +1,4 @@
-import type { Dimensions, XYPosition, CoordinateExtent, Box, Rect } from '../types';
+import type { Dimensions, Node, XYPosition, CoordinateExtent, Box, Rect } from '../types';

 export const getDimensions = (node: HTMLDivElement): Dimensions => ({
  width: node.offsetWidth,
@@ -36,9 +36,25 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
  height: y2 - y,
 });

+export const nodeToRect = (node: Node): Rect => ({
+  ...(node.positionAbsolute || { x: 0, y: 0 }),
+  width: node.width || 0,
+  height: node.height || 0,
+});
+
 export const getBoundsOfRects = (rect1: Rect, rect2: Rect): Rect =>
  boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));

+export const getOverlappingArea = (rectA: Rect, rectB: Rect): number => {
+  const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x));
+  const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y));
+
+  return Math.ceil(xOverlap * yOverlap);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isRectObject = (obj: any): obj is Rect => !!obj.width && !!obj.height && !!obj.x && !!obj.y;
+
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const isNumeric = (n: any): n is number => !isNaN(n) && isFinite(n);

--- a/packages/minimap/CHANGELOG.md
+++ b/packages/minimap/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @reactflow/minimap

+## 11.1.0
+
+### Minor Changes
+
+- [#2530](https://github.com/wbkd/react-flow/pull/2530) [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21) Thanks [@moklick](https://github.com/moklick)! - Feat: Add pan and zoom to mini map
+
+### Patch Changes
+
+- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]:
+  - @reactflow/core@11.2.0
+
 ## 11.0.3

 ### Patch Changes
--- a/packages/minimap/package.json
+++ b/packages/minimap/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/minimap",
-  "version": "11.0.3",
+  "version": "11.1.0",
  "description": "Minimap component for React Flow.",
  "keywords": [
    "react",
@@ -40,7 +40,11 @@
  "dependencies": {
    "@babel/runtime": "^7.18.9",
    "@reactflow/core": "workspace:*",
+    "@types/d3-selection": "^3.0.3",
+    "@types/d3-zoom": "^3.0.1",
    "classcat": "^5.0.3",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
    "zustand": "^4.1.1"
  },
  "peerDependencies": {
--- a/packages/minimap/src/MiniMap.tsx
+++ b/packages/minimap/src/MiniMap.tsx
@@ -1,8 +1,13 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { memo } from 'react';
+import { memo, useEffect, useRef } from 'react';
+import type { MouseEvent } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
-import { useStore, getRectOfNodes, getBoundsOfRects, Panel } from '@reactflow/core';
+import { zoom, zoomIdentity } from 'd3-zoom';
+import type { D3ZoomEvent } from 'd3-zoom';
+import { select, pointer } from 'd3-selection';
+import { useStore, getRectOfNodes, Panel, getBoundsOfRects, useStoreApi } from '@reactflow/core';
 import type { ReactFlowState, Rect } from '@reactflow/core';

 import MiniMapNode from './MiniMapNode';
@@ -37,14 +42,20 @@ const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 function MiniMap({
  style,
  className,
-  nodeStrokeColor = '#555',
-  nodeColor = '#fff',
+  nodeStrokeColor = 'transparent',
+  nodeColor = '#e2e2e2',
  nodeClassName = '',
  nodeBorderRadius = 5,
  nodeStrokeWidth = 2,
-  maskColor = 'rgb(240, 242, 243, 0.7)',
+  maskColor = 'rgb(240, 240, 240, 0.6)',
  position = 'bottom-right',
+  onClick,
+  onNodeClick,
+  pannable = false,
+  zoomable = false,
 }: MiniMapProps) {
+  const store = useStoreApi();
+  const svg = useRef<SVGSVGElement>(null);
  const { boundingRect, viewBB, nodes, rfId } = useStore(selector, shallow);
  const elementWidth = (style?.width as number) ?? defaultWidth;
  const elementHeight = (style?.height as number) ?? defaultHeight;
@@ -63,6 +74,75 @@ function MiniMap({
  const height = viewHeight + offset * 2;
  const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
  const labelledBy = `${ARIA_LABEL_KEY}-${rfId}`;
+  const viewScaleRef = useRef(0);
+
+  viewScaleRef.current = viewScale;
+
+  useEffect(() => {
+    if (svg.current) {
+      const selection = select(svg.current as Element);
+
+      const zoomHandler = (event: D3ZoomEvent<SVGSVGElement, any>) => {
+        const { transform, d3Selection, d3Zoom } = store.getState();
+
+        if (event.sourceEvent.type !== 'wheel' || !d3Selection || !d3Zoom) {
+          return;
+        }
+
+        const pinchDelta =
+          -event.sourceEvent.deltaY *
+          (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
+          10;
+        const zoom = transform[2] * Math.pow(2, pinchDelta);
+
+        d3Zoom.scaleTo(d3Selection, zoom);
+      };
+
+      const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
+        const { transform, d3Selection, d3Zoom } = store.getState();
+
+        if (event.sourceEvent.type !== 'mousemove' || !d3Selection || !d3Zoom) {
+          return;
+        }
+
+        // @TODO: how to calculate the correct next position? Math.max(1, transform[2]) is a workaround.
+        const position = {
+          x: transform[0] - event.sourceEvent.movementX * viewScaleRef.current * Math.max(1, transform[2]),
+          y: transform[1] - event.sourceEvent.movementY * viewScaleRef.current * Math.max(1, transform[2]),
+        };
+
+        const nextTransform = zoomIdentity.translate(position.x, position.y).scale(transform[2]);
+
+        d3Zoom.transform(d3Selection, nextTransform);
+      };
+
+      const zoomAndPanHandler = zoom()
+        // @ts-ignore
+        .on('zoom', pannable ? panHandler : null)
+        // @ts-ignore
+        .on('zoom.wheel', zoomable ? zoomHandler : null);
+
+      selection.call(zoomAndPanHandler);
+
+      return () => {
+        selection.on('zoom', null);
+      };
+    }
+  }, [pannable, zoomable]);
+
+  const onSvgClick = onClick
+    ? (event: MouseEvent) => {
+        const rfCoord = pointer(event);
+        onClick(event, { x: rfCoord[0], y: rfCoord[1] });
+      }
+    : undefined;
+
+  const onSvgNodeClick = onNodeClick
+    ? (event: MouseEvent, nodeId: string) => {
+        const node = store.getState().nodeInternals.get(nodeId)!;
+        onNodeClick(event, node);
+      }
+    : undefined;

  return (
    <Panel position={position} style={style} className={cc(['react-flow__minimap', className])}>
@@ -72,6 +152,8 @@ function MiniMap({
        viewBox={`${x} ${y} ${width} ${height}`}
        role="img"
        aria-labelledby={labelledBy}
+        ref={svg}
+        onClick={onSvgClick}
      >
        <title id={labelledBy}>React Flow mini map</title>
        {nodes.map((node) => {
@@ -89,6 +171,8 @@ function MiniMap({
              strokeColor={nodeStrokeColorFunc(node)}
              strokeWidth={nodeStrokeWidth}
              shapeRendering={shapeRendering}
+              onClick={onSvgNodeClick}
+              id={node.id}
            />
          );
        })}
--- a/packages/minimap/src/MiniMapNode.tsx
+++ b/packages/minimap/src/MiniMapNode.tsx
@@ -1,8 +1,9 @@
 import { memo } from 'react';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, MouseEvent } from 'react';
 import cc from 'classcat';

 interface MiniMapNodeProps {
+  id: string;
  x: number;
  y: number;
  width: number;
@@ -14,9 +15,11 @@ interface MiniMapNodeProps {
  strokeColor: string;
  strokeWidth: number;
  style?: CSSProperties;
+  onClick?: (event: MouseEvent, id: string) => void;
 }

 const MiniMapNode = ({
+  id,
  x,
  y,
  width,
@@ -28,6 +31,7 @@ const MiniMapNode = ({
  className,
  borderRadius,
  shapeRendering,
+  onClick,
 }: MiniMapNodeProps) => {
  const { background, backgroundColor } = style || {};
  const fill = (color || background || backgroundColor) as string;
@@ -45,6 +49,7 @@ const MiniMapNode = ({
      stroke={strokeColor}
      strokeWidth={strokeWidth}
      shapeRendering={shapeRendering}
+      onClick={onClick ? (event) => onClick(event, id) : undefined}
    />
  );
 };
--- a/packages/minimap/src/types.ts
+++ b/packages/minimap/src/types.ts
@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { HTMLAttributes } from 'react';
-import type { Node, PanelPosition } from '@reactflow/core';
+import type { HTMLAttributes, MouseEvent } from 'react';
+import type { Node, PanelPosition, XYPosition } from '@reactflow/core';

 export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;

-export type MiniMapProps<NodeData = any> = HTMLAttributes<SVGSVGElement> & {
+export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, 'onClick'> & {
  nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
  nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
  nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
@@ -12,4 +12,8 @@ export type MiniMapProps<NodeData = any> = HTMLAttributes<SVGSVGElement> & {
  nodeStrokeWidth?: number;
  maskColor?: string;
  position?: PanelPosition;
+  onClick?: (event: MouseEvent, position: XYPosition) => void;
+  onNodeClick?: (event: MouseEvent, node: Node<NodeData>) => void;
+  pannable?: boolean;
+  zoomable?: boolean;
 };
--- a/packages/reactflow/CHANGELOG.md
+++ b/packages/reactflow/CHANGELOG.md
@@ -1,5 +1,27 @@
 # reactflow

+## 11.2.0
+
+### Minor Changes
+
+- [#2535](https://github.com/wbkd/react-flow/pull/2535) [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948) Thanks [@moklick](https://github.com/moklick)! - Feat: Add edge label renderer
+
+- [#2536](https://github.com/wbkd/react-flow/pull/2536) [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e) Thanks [@pengfu](https://github.com/pengfu)! - Feat: add deleteElements helper function
+
+- [#2539](https://github.com/wbkd/react-flow/pull/2539) [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931) Thanks [@moklick](https://github.com/moklick)! - Feat: add intersection helpers
+
+- [#2530](https://github.com/wbkd/react-flow/pull/2530) [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21) Thanks [@moklick](https://github.com/moklick)! - Feat: Add pan and zoom to mini map
+
+### Patch Changes
+
+- [#2538](https://github.com/wbkd/react-flow/pull/2538) [`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc) Thanks [@neo](https://github.com/neo)! - Refactor: put React Flow in isolated stacking context
+
+- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]:
+  - @reactflow/core@11.2.0
+  - @reactflow/minimap@11.1.0
+  - @reactflow/background@11.0.4
+  - @reactflow/controls@11.0.4
+
 ## 11.1.2

 Housekeeping release with some fixes and some cleanups for the types.
--- a/packages/reactflow/package.json
+++ b/packages/reactflow/package.json
@@ -1,6 +1,6 @@
 {
  "name": "reactflow",
-  "version": "11.1.2",
+  "version": "11.2.0",
  "description": "A highly customizable React library for building node-based editors and interactive flow charts",
  "keywords": [
    "react",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,15 +32,15 @@ importers:
      '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7
      '@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
+      '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.42.0_dcn2ddfkdgyby36a3kmqplwxkq
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.42.0_irgkl5vooow2ydyo6aokmferha
      autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.16
      concurrently: registry.npmjs.org/concurrently/7.4.0
      cypress: registry.npmjs.org/cypress/10.7.0
      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.9_eslint@8.23.1
+      eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.31.10_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
@@ -152,6 +152,7 @@ importers:
      '@types/d3-zoom': ^3.0.1
      '@types/node': ^18.7.16
      '@types/react': ^18.0.17
+      '@types/react-dom': ^18.0.6
      classcat: ^5.0.3
      d3-drag: ^3.0.0
      d3-selection: ^3.0.0
@@ -175,6 +176,7 @@ importers:
      '@reactflow/tsconfig': link:../../tooling/tsconfig
      '@types/node': registry.npmjs.org/@types/node/18.7.16
      '@types/react': registry.npmjs.org/@types/react/18.0.19
+      '@types/react-dom': registry.npmjs.org/@types/react-dom/18.0.6
      react: registry.npmjs.org/react/18.2.0
      typescript: registry.npmjs.org/typescript/4.8.3

@@ -185,16 +187,24 @@ importers:
      '@reactflow/eslint-config': workspace:^0.0.0
      '@reactflow/rollup-config': workspace:*
      '@reactflow/tsconfig': workspace:*
+      '@types/d3-selection': ^3.0.3
+      '@types/d3-zoom': ^3.0.1
      '@types/node': ^18.7.16
      '@types/react': ^18.0.19
      classcat: ^5.0.3
+      d3-selection: ^3.0.0
+      d3-zoom: ^3.0.0
      react: ^18.2.0
      typescript: ^4.8.3
      zustand: ^4.1.1
    dependencies:
      '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
      '@reactflow/core': link:../core
+      '@types/d3-selection': registry.npmjs.org/@types/d3-selection/3.0.3
+      '@types/d3-zoom': registry.npmjs.org/@types/d3-zoom/3.0.1
      classcat: registry.npmjs.org/classcat/5.0.4
+      d3-selection: registry.npmjs.org/d3-selection/3.0.0
+      d3-zoom: registry.npmjs.org/d3-zoom/3.0.0
      zustand: registry.npmjs.org/zustand/4.1.1_react@18.2.0
    devDependencies:
      '@reactflow/eslint-config': link:../../tooling/eslint-config
@@ -242,7 +252,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-config-turbo: registry.npmjs.org/eslint-config-turbo/0.0.4_eslint@8.23.1
-      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.10_eslint@8.23.1

  tooling/rollup-config:
    specifiers:
@@ -1682,6 +1692,12 @@ packages:
    version: 6.2.3
    dev: true

+  registry.npmjs.org/@types/semver/7.3.13:
+    resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz}
+    name: '@types/semver'
+    version: 7.3.13
+    dev: true
+
  registry.npmjs.org/@types/sinonjs__fake-timers/8.1.1:
    resolution: {integrity: sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz}
    name: '@types/sinonjs__fake-timers'
@@ -1704,11 +1720,11 @@ packages:
    dev: true
    optional: true

-  registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0_jdrczqv3ll7udvbunca43w7rz4:
-    resolution: {integrity: sha512-xVfKOkBm5iWMNGKQ2fwX5GVgBuHmZBO1tCRwXmY5oAIsPscfwm2UADDuNB8ZVYCtpQvJK4xpjrK7jEhcJ0zY9A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.39.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0
+  registry.npmjs.org/@typescript-eslint/eslint-plugin/5.42.0_dcn2ddfkdgyby36a3kmqplwxkq:
+    resolution: {integrity: sha512-5TJh2AgL6+wpL8H/GTSjNb4WrjKoR2rqvFxR/DDTqYNk6uXn8BJMEcncLSpMbf/XV1aS0jAjYwn98uvVCiAywQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.42.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.42.0
    name: '@typescript-eslint/eslint-plugin'
-    version: 5.39.0
+    version: 5.42.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      '@typescript-eslint/parser': ^5.0.0
@@ -1718,13 +1734,14 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0
-      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.39.0_irgkl5vooow2ydyo6aokmferha
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.42.0_irgkl5vooow2ydyo6aokmferha
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.42.0
+      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.42.0_irgkl5vooow2ydyo6aokmferha
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.42.0_irgkl5vooow2ydyo6aokmferha
      debug: registry.npmjs.org/debug/4.3.4
      eslint: registry.npmjs.org/eslint/8.23.1
      ignore: registry.npmjs.org/ignore/5.2.0
+      natural-compare-lite: registry.npmjs.org/natural-compare-lite/1.4.0
      regexpp: registry.npmjs.org/regexpp/3.2.0
      semver: registry.npmjs.org/semver/7.3.8
      tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3
@@ -1733,11 +1750,11 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-PhxLjrZnHShe431sBAGHaNe6BDdxAASDySgsBCGxcBecVCi8NQWxQZMcizNA4g0pN51bBAn/FUfkWG3SDVcGlA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.39.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/parser/5.39.0
+  registry.npmjs.org/@typescript-eslint/parser/5.42.0_irgkl5vooow2ydyo6aokmferha:
+    resolution: {integrity: sha512-Ixh9qrOTDRctFg3yIwrLkgf33AHyEIn6lhyf5cCfwwiGtkWhNpVKlEZApi3inGQR/barWnY7qY8FbGKBO7p3JA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.42.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/parser/5.42.0
    name: '@typescript-eslint/parser'
-    version: 5.39.0
+    version: 5.42.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -1746,9 +1763,9 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.42.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.42.0_typescript@4.8.3
      debug: registry.npmjs.org/debug/4.3.4
      eslint: registry.npmjs.org/eslint/8.23.1
      typescript: registry.npmjs.org/typescript/4.8.3
@@ -1756,21 +1773,21 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0:
-    resolution: {integrity: sha512-/I13vAqmG3dyqMVSZPjsbuNQlYS082Y7OMkwhCfLXYsmlI0ca4nkL7wJ/4gjX70LD4P8Hnw1JywUVVAwepURBw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.39.0.tgz}
+  registry.npmjs.org/@typescript-eslint/scope-manager/5.42.0:
+    resolution: {integrity: sha512-l5/3IBHLH0Bv04y+H+zlcLiEMEMjWGaCX6WyHE5Uk2YkSGAMlgdUPsT/ywTSKgu9D1dmmKMYgYZijObfA39Wow==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.42.0.tgz}
    name: '@typescript-eslint/scope-manager'
-    version: 5.39.0
+    version: 5.42.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.42.0
    dev: true

-  registry.npmjs.org/@typescript-eslint/type-utils/5.39.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-KJHJkOothljQWzR3t/GunL0TPKY+fGJtnpl+pX+sJ0YiKTz3q2Zr87SGTmFqsCMFrLt5E0+o+S6eQY0FAXj9uA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.39.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/type-utils/5.39.0
+  registry.npmjs.org/@typescript-eslint/type-utils/5.42.0_irgkl5vooow2ydyo6aokmferha:
+    resolution: {integrity: sha512-HW14TXC45dFVZxnVW8rnUGnvYyRC0E/vxXShFCthcC9VhVTmjqOmtqj6H5rm9Zxv+ORxKA/1aLGD7vmlLsdlOg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.42.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/type-utils/5.42.0
    name: '@typescript-eslint/type-utils'
-    version: 5.39.0
+    version: 5.42.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: '*'
@@ -1779,8 +1796,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.42.0_typescript@4.8.3
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.42.0_irgkl5vooow2ydyo6aokmferha
      debug: registry.npmjs.org/debug/4.3.4
      eslint: registry.npmjs.org/eslint/8.23.1
      tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3
@@ -1789,18 +1806,18 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/types/5.39.0:
-    resolution: {integrity: sha512-gQMZrnfEBFXK38hYqt8Lkwt8f4U6yq+2H5VDSgP/qiTzC8Nw8JO3OuSUOQ2qW37S/dlwdkHDntkZM6SQhKyPhw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.39.0.tgz}
+  registry.npmjs.org/@typescript-eslint/types/5.42.0:
+    resolution: {integrity: sha512-t4lzO9ZOAUcHY6bXQYRuu+3SSYdD9TS8ooApZft4WARt4/f2Cj/YpvbTe8A4GuhT4bNW72goDMOy7SW71mZwGw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.42.0.tgz}
    name: '@typescript-eslint/types'
-    version: 5.39.0
+    version: 5.42.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3:
-    resolution: {integrity: sha512-qLFQP0f398sdnogJoLtd43pUgB18Q50QSA+BTE5h3sUxySzbWDpTSdgt4UyxNSozY/oDK2ta6HVAzvGgq8JYnA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.39.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0
+  registry.npmjs.org/@typescript-eslint/typescript-estree/5.42.0_typescript@4.8.3:
+    resolution: {integrity: sha512-2O3vSq794x3kZGtV7i4SCWZWCwjEtkWfVqX4m5fbUBomOsEOyd6OAD1qU2lbvV5S8tgy/luJnOYluNyYVeOTTg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.42.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.42.0
    name: '@typescript-eslint/typescript-estree'
-    version: 5.39.0
+    version: 5.42.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      typescript: '*'
@@ -1808,8 +1825,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.42.0
      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
@@ -1820,34 +1837,36 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-+DnY5jkpOpgj+EBtYPyHRjXampJfC0yUZZzfzLuUWVZvCuKqSdJVC8UhdWipIw7VKNTfwfAPiOWzYkAwuIhiAg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.39.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/utils/5.39.0
+  registry.npmjs.org/@typescript-eslint/utils/5.42.0_irgkl5vooow2ydyo6aokmferha:
+    resolution: {integrity: sha512-JZ++3+h1vbeG1NUECXQZE3hg0kias9kOtcQr3+JVQ3whnjvKuMyktJAAIj6743OeNPnGBmjj7KEmiDL7qsdnCQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.42.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/utils/5.42.0
    name: '@typescript-eslint/utils'
-    version: 5.39.0
+    version: 5.42.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
    dependencies:
      '@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3
+      '@types/semver': registry.npmjs.org/@types/semver/7.3.13
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.42.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.42.0_typescript@4.8.3
      eslint: registry.npmjs.org/eslint/8.23.1
      eslint-scope: registry.npmjs.org/eslint-scope/5.1.1
      eslint-utils: registry.npmjs.org/eslint-utils/3.0.0_eslint@8.23.1
+      semver: registry.npmjs.org/semver/7.3.8
    transitivePeerDependencies:
      - supports-color
      - typescript
    dev: true

-  registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0:
-    resolution: {integrity: sha512-yyE3RPwOG+XJBLrhvsxAidUgybJVQ/hG8BhiJo0k8JSAYfk/CshVcxf0HwP4Jt7WZZ6vLmxdo1p6EyN3tzFTkg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.39.0.tgz}
+  registry.npmjs.org/@typescript-eslint/visitor-keys/5.42.0:
+    resolution: {integrity: sha512-QHbu5Hf/2lOEOwy+IUw0GoSCuAzByTAWWrOTKzTzsotiUnWFpuKnXcAhC9YztAf2EElQ0VvIK+pHJUPkM0q7jg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.42.0.tgz}
    name: '@typescript-eslint/visitor-keys'
-    version: 5.39.0
+    version: 5.42.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
      eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0
    dev: true

@@ -3370,37 +3389,11 @@ packages:
      prettier-linter-helpers: registry.npmjs.org/prettier-linter-helpers/1.0.0
    dev: true

-  registry.npmjs.org/eslint-plugin-react/7.31.8_eslint@8.23.1:
-    resolution: {integrity: sha512-5lBTZmgQmARLLSYiwI71tiGVTLUuqXantZM6vlSY39OaDSV0M7+32K5DnLkmFrwTe+Ksz0ffuLUC91RUviVZfw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.8.tgz}
-    id: registry.npmjs.org/eslint-plugin-react/7.31.8
+  registry.npmjs.org/eslint-plugin-react/7.31.10_eslint@8.23.1:
+    resolution: {integrity: sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz}
+    id: registry.npmjs.org/eslint-plugin-react/7.31.10
    name: eslint-plugin-react
-    version: 7.31.8
-    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-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
+    version: 7.31.10
    engines: {node: '>=4'}
    peerDependencies:
      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
@@ -5174,6 +5167,12 @@ packages:
    hasBin: true
    dev: true

+  registry.npmjs.org/natural-compare-lite/1.4.0:
+    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz}
+    name: natural-compare-lite
+    version: 1.4.0
+    dev: true
+
  registry.npmjs.org/natural-compare/1.4.0:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz}
    name: natural-compare