feat(packages): add interactive minimap

2022-10-09 19:55:25 +02:00
parent 4aa742f6f2
commit d057a1cd34
14 changed files with 527 additions and 49 deletions
--- a/examples/vite-app/package.json
+++ b/examples/vite-app/package.json
@@ -19,7 +19,8 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
-    "reactflow": "workspace:*"
+    "reactflow": "workspace:*",
+    "@reactflow/interactive-minimap": "workspace:*"
  },
  "devDependencies": {
    "@cypress/skip-test": "^2.6.1",
--- a/examples/vite-app/src/App/index.tsx
+++ b/examples/vite-app/src/App/index.tsx
@@ -36,6 +36,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';

 interface IRoute {
  name: string;
@@ -124,6 +125,11 @@ const routes: IRoute[] = [
    path: '/interaction',
    component: Interaction,
  },
+  {
+    name: 'Interactive Minimap',
+    path: '/interactive-minimap',
+    component: InteractiveMinimap,
+  },
  {
    name: 'Layouting',
    path: '/layouting',
--- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
+++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
@@ -0,0 +1,121 @@
+import { MouseEvent } from 'react';
+import ReactFlow, {
+  Background,
+  BackgroundVariant,
+  Controls,
+  ReactFlowProvider,
+  Node,
+  Edge,
+  useReactFlow,
+} from 'reactflow';
+import { MiniMap } from '@reactflow/interactive-minimap';
+
+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',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+    className: 'light',
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 100, y: 100 },
+    className: 'light',
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3' },
+    position: { x: 400, y: 100 },
+    className: 'light',
+  },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 400, y: 200 },
+    className: 'light',
+  },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+];
+
+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;
+      })
+    );
+  };
+
+  return (
+    <ReactFlow
+      defaultNodes={initialNodes}
+      defaultEdges={initialEdges}
+      onNodeClick={onNodeClick}
+      onNodeDragStop={onNodeDragStop}
+      onNodeDrag={onNodeDrag}
+      className="react-flow-basic-example"
+      minZoom={0.2}
+      maxZoom={4}
+      fitView
+      defaultEdgeOptions={defaultEdgeOptions}
+      selectNodesOnDrag={false}
+    >
+      <Background variant={BackgroundVariant.Dots} />
+      <MiniMap />
+      <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/packages/interactive-minimap/.eslintrc.js
+++ b/packages/interactive-minimap/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@reactflow/eslint-config'],
+};
--- a/packages/interactive-minimap/CHANGELOG.md
+++ b/packages/interactive-minimap/CHANGELOG.md
@@ -0,0 +1,42 @@
+# @reactflow/minimap
+
+## 11.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]:
+  - @reactflow/core@11.1.0
+
+## 11.0.0
+
+### Major Changes
+
+- **Better [Accessibility](/docs/guides/accessibility)**
+  - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard.
+  - `aria-` default attributes for all elements and controllable via `ariaLabel` options
+  - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop
+- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact
+- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145
+- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184
+- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting.
+- **New background pattern**: `BackgroundVariant.Cross` variant
+- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component
+- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component
+- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node
+- **Deletable option** for Nodes and edges
+- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave`
+- **Edge `pathOptions`** for `smoothstep` and `default` edges
+- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning
+- **Pane moveable** with middle mouse button
+- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false)
+- **[`<BaseEdge />`](/docs/api/edges/base-edge) component** that makes it easier to build custom edges
+- **[Separately installable packages](/docs/overview/packages/)**
+  - @reactflow/core
+  - @reactflow/background
+  - @reactflow/controls
+  - @reactflow/minimap
+
+### Patch Changes
+
+- Updated dependencies:
+  - @reactflow/core@11.0.0
--- a/packages/interactive-minimap/README.md
+++ b/packages/interactive-minimap/README.md
@@ -0,0 +1,10 @@
+# @reactflow/minimap
+
+Mini map component for React Flow.
+
+## Installation 
+
+```sh 
+npm install @reactflow/minimap
+```
+
--- a/packages/interactive-minimap/package.json
+++ b/packages/interactive-minimap/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "@reactflow/interactive-minimap",
+  "version": "0.0.1-alpha.0",
+  "description": "Interactive Minimap component for React Flow.",
+  "keywords": [
+    "react",
+    "node-based UI",
+    "graph",
+    "diagram",
+    "workflow",
+    "react-flow"
+  ],
+  "files": [
+    "dist"
+  ],
+  "source": "src/index.tsx",
+  "main": "dist/umd/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wbkd/react-flow.git",
+    "directory": "packages/interactive-minimap"
+  },
+  "scripts": {
+    "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch",
+    "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production && npm run css",
+    "css": "postcss src/*.css --config ../../tooling/postcss-config/postcss.config.js --dir dist",
+    "css-watch": "pnpm css --watch",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.18.9",
+    "@reactflow/core": "workspace:*",
+    "classcat": "^5.0.3",
+    "zustand": "^4.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@reactflow/eslint-config": "workspace:^0.0.0",
+    "@reactflow/rollup-config": "workspace:*",
+    "@reactflow/tsconfig": "workspace:*",
+    "@types/node": "^18.7.16",
+    "@types/react": "^18.0.19",
+    "react": "^18.2.0",
+    "typescript": "^4.8.3"
+  },
+  "rollup": {
+    "globals": {
+      "zustand": "Zustand",
+      "zustand/shallow": "zustandShallow",
+      "classcat": "cc"
+    },
+    "name": "ReactFlowMinimap"
+  }
+}
--- a/packages/interactive-minimap/src/MiniMap.tsx
+++ b/packages/interactive-minimap/src/MiniMap.tsx
@@ -0,0 +1,121 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { memo, useEffect, useRef } from 'react';
+import cc from 'classcat';
+import shallow from 'zustand/shallow';
+import { zoom, D3ZoomEvent } from 'd3-zoom';
+import { select } from 'd3-selection';
+import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@reactflow/core';
+
+import MiniMapNode from './MiniMapNode';
+import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
+
+declare const window: any;
+
+const defaultWidth = 200;
+const defaultHeight = 150;
+
+const selector = (s: ReactFlowState) => {
+  const nodes = Array.from(s.nodeInternals.values());
+  const viewBB: Rect = {
+    x: -s.transform[0] / s.transform[2],
+    y: -s.transform[1] / s.transform[2],
+    width: s.width / s.transform[2],
+    height: s.height / s.transform[2],
+  };
+
+  return {
+    nodes: nodes.filter((node) => !node.hidden && node.width && node.height),
+    viewBB,
+    boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB,
+    rfId: s.rfId,
+  };
+};
+
+const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
+
+const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
+
+function MiniMap({
+  style,
+  className,
+  nodeStrokeColor = '#555',
+  nodeColor = '#fff',
+  nodeClassName = '',
+  nodeBorderRadius = 5,
+  nodeStrokeWidth = 2,
+  maskColor = 'rgb(240, 242, 243, 0.7)',
+  position = 'bottom-right',
+}: MiniMapProps) {
+  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;
+  const nodeColorFunc = getAttrFunction(nodeColor);
+  const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
+  const nodeClassNameFunc = getAttrFunction(nodeClassName);
+  const scaledWidth = boundingRect.width / elementWidth;
+  const scaledHeight = boundingRect.height / elementHeight;
+  const viewScale = Math.max(scaledWidth, scaledHeight);
+  const viewWidth = viewScale * elementWidth;
+  const viewHeight = viewScale * elementHeight;
+  const offset = 5 * viewScale;
+  const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
+  const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
+  const width = viewWidth + offset * 2;
+  const height = viewHeight + offset * 2;
+  const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
+  const labelledBy = `${ARIA_LABEL_KEY}-${rfId}`;
+
+  useEffect(() => {
+    const d3ZoomInstance = zoom();
+    const selection = select(svg.current as Element).call(d3ZoomInstance);
+
+    d3ZoomInstance.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+      console.log(event);
+    });
+  }, []);
+
+  return (
+    <Panel position={position} style={style} className={cc(['react-flow__minimap', className])}>
+      <svg
+        width={elementWidth}
+        height={elementHeight}
+        viewBox={`${x} ${y} ${width} ${height}`}
+        role="img"
+        aria-labelledby={labelledBy}
+        ref={svg}
+      >
+        <title id={labelledBy}>React Flow mini map</title>
+        {nodes.map((node) => {
+          return (
+            <MiniMapNode
+              key={node.id}
+              x={node.positionAbsolute?.x ?? 0}
+              y={node.positionAbsolute?.y ?? 0}
+              width={node.width!}
+              height={node.height!}
+              style={node.style}
+              className={nodeClassNameFunc(node)}
+              color={nodeColorFunc(node)}
+              borderRadius={nodeBorderRadius}
+              strokeColor={nodeStrokeColorFunc(node)}
+              strokeWidth={nodeStrokeWidth}
+              shapeRendering={shapeRendering}
+            />
+          );
+        })}
+        <path
+          className="react-flow__minimap-mask"
+          d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
+          fill={maskColor}
+          fillRule="evenodd"
+        />
+      </svg>
+    </Panel>
+  );
+}
+
+MiniMap.displayName = 'MiniMap';
+
+export default memo(MiniMap);
--- a/packages/interactive-minimap/src/MiniMapNode.tsx
+++ b/packages/interactive-minimap/src/MiniMapNode.tsx
@@ -0,0 +1,53 @@
+import { memo, CSSProperties } from 'react';
+import cc from 'classcat';
+
+interface MiniMapNodeProps {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  borderRadius: number;
+  className: string;
+  color: string;
+  shapeRendering: string;
+  strokeColor: string;
+  strokeWidth: number;
+  style?: CSSProperties;
+}
+
+const MiniMapNode = ({
+  x,
+  y,
+  width,
+  height,
+  style,
+  color,
+  strokeColor,
+  strokeWidth,
+  className,
+  borderRadius,
+  shapeRendering,
+}: MiniMapNodeProps) => {
+  const { background, backgroundColor } = style || {};
+  const fill = (color || background || backgroundColor) as string;
+
+  return (
+    <rect
+      className={cc(['react-flow__minimap-node', className])}
+      x={x}
+      y={y}
+      rx={borderRadius}
+      ry={borderRadius}
+      width={width}
+      height={height}
+      fill={fill}
+      stroke={strokeColor}
+      strokeWidth={strokeWidth}
+      shapeRendering={shapeRendering}
+    />
+  );
+};
+
+MiniMapNode.displayName = 'MiniMapNode';
+
+export default memo(MiniMapNode);
--- a/packages/interactive-minimap/src/index.tsx
+++ b/packages/interactive-minimap/src/index.tsx
@@ -0,0 +1,2 @@
+export { default as MiniMap } from './MiniMap';
+export * from './types';
--- a/packages/interactive-minimap/src/style.css
+++ b/packages/interactive-minimap/src/style.css
@@ -0,0 +1,3 @@
+.react-flow__minimap {
+  background-color: #fff;
+}
--- a/packages/interactive-minimap/src/types.ts
+++ b/packages/interactive-minimap/src/types.ts
@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { HTMLAttributes } from 'react';
+import { Node, PanelPosition } from '@reactflow/core';
+
+export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
+
+export interface MiniMapProps<NodeData = any> extends HTMLAttributes<SVGSVGElement> {
+  nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
+  nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
+  nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
+  nodeBorderRadius?: number;
+  nodeStrokeWidth?: number;
+  maskColor?: string;
+  position?: PanelPosition;
+}
--- a/packages/interactive-minimap/tsconfig.json
+++ b/packages/interactive-minimap/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "@reactflow/tsconfig/react.json",
+  "display": "@reactflow/minimap",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,8 +32,8 @@ importers:
      '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.6
      '@changesets/cli': registry.npmjs.org/@changesets/cli/2.24.4
      '@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1
-      '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.38.0_wsb62dxj2oqwgas4kadjymcmry
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha
+      '@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
      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
@@ -57,6 +57,7 @@ importers:
  examples/vite-app:
    specifiers:
      '@cypress/skip-test': ^2.6.1
+      '@reactflow/interactive-minimap': workspace:*
      '@types/react': ^18.0.17
      '@types/react-dom': ^18.0.6
      '@vitejs/plugin-react': ^2.1.0
@@ -73,6 +74,7 @@ importers:
      typescript: ^4.8.3
      vite: ^3.1.0
    dependencies:
+      '@reactflow/interactive-minimap': link:../../packages/interactive-minimap
      classcat: registry.npmjs.org/classcat/5.0.4
      dagre: registry.npmjs.org/dagre/0.8.5
      localforage: registry.npmjs.org/localforage/1.10.0
@@ -178,6 +180,33 @@ importers:
      react: registry.npmjs.org/react/18.2.0
      typescript: registry.npmjs.org/typescript/4.8.3

+  packages/interactive-minimap:
+    specifiers:
+      '@babel/runtime': ^7.18.9
+      '@reactflow/core': workspace:*
+      '@reactflow/eslint-config': workspace:^0.0.0
+      '@reactflow/rollup-config': workspace:*
+      '@reactflow/tsconfig': workspace:*
+      '@types/node': ^18.7.16
+      '@types/react': ^18.0.19
+      classcat: ^5.0.3
+      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
+      classcat: registry.npmjs.org/classcat/5.0.4
+      zustand: registry.npmjs.org/zustand/4.1.1_react@18.2.0
+    devDependencies:
+      '@reactflow/eslint-config': link:../../tooling/eslint-config
+      '@reactflow/rollup-config': link:../../tooling/rollup-config
+      '@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
+      react: registry.npmjs.org/react/18.2.0
+      typescript: registry.npmjs.org/typescript/4.8.3
+
  packages/minimap:
    specifiers:
      '@babel/runtime': ^7.18.9
@@ -1704,11 +1733,11 @@ packages:
    dev: true
    optional: true

-  registry.npmjs.org/@typescript-eslint/eslint-plugin/5.38.0_wsb62dxj2oqwgas4kadjymcmry:
-    resolution: {integrity: sha512-GgHi/GNuUbTOeoJiEANi0oI6fF3gBQc3bGFYj40nnAPCbhrtEDf2rjBmefFadweBmO1Du1YovHeDP2h5JLhtTQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.38.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.38.0
+  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
    name: '@typescript-eslint/eslint-plugin'
-    version: 5.38.0
+    version: 5.39.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      '@typescript-eslint/parser': ^5.0.0
@@ -1718,10 +1747,10 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.38.0
-      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.38.0_irgkl5vooow2ydyo6aokmferha
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha
+      '@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
      debug: registry.npmjs.org/debug/4.3.4
      eslint: registry.npmjs.org/eslint/8.23.1
      ignore: registry.npmjs.org/ignore/5.2.0
@@ -1733,11 +1762,11 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.38.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/parser/5.38.0
+  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
    name: '@typescript-eslint/parser'
-    version: 5.38.0
+    version: 5.39.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 +1775,9 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.38.0
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3
+      '@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
      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 +1785,21 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/scope-manager/5.38.0:
-    resolution: {integrity: sha512-ByhHIuNyKD9giwkkLqzezZ9y5bALW8VNY6xXcP+VxoH4JBDKjU5WNnsiD4HJdglHECdV+lyaxhvQjTUbRboiTA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.38.0.tgz}
+  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}
    name: '@typescript-eslint/scope-manager'
-    version: 5.38.0
+    version: 5.39.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.38.0
+      '@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
    dev: true

-  registry.npmjs.org/@typescript-eslint/type-utils/5.38.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-iZq5USgybUcj/lfnbuelJ0j3K9dbs1I3RICAJY9NZZpDgBYXmuUlYQGzftpQA9wC8cKgtS6DASTvF3HrXwwozA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.38.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/type-utils/5.38.0
+  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
    name: '@typescript-eslint/type-utils'
-    version: 5.38.0
+    version: 5.39.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: '*'
@@ -1779,8 +1808,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha
+      '@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
      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 +1818,18 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/types/5.38.0:
-    resolution: {integrity: sha512-HHu4yMjJ7i3Cb+8NUuRCdOGu2VMkfmKyIJsOr9PfkBVYLYrtMCK/Ap50Rpov+iKpxDTfnqvDbuPLgBE5FwUNfA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.38.0.tgz}
+  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}
    name: '@typescript-eslint/types'
-    version: 5.38.0
+    version: 5.39.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3:
-    resolution: {integrity: sha512-6P0RuphkR+UuV7Avv7MU3hFoWaGcrgOdi8eTe1NwhMp2/GjUJoODBTRWzlHpZh6lFOaPmSvgxGlROa0Sg5Zbyg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.38.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0
+  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
    name: '@typescript-eslint/typescript-estree'
-    version: 5.38.0
+    version: 5.39.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      typescript: '*'
@@ -1808,8 +1837,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.38.0
+      '@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
      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,19 +1849,19 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-6sdeYaBgk9Fh7N2unEXGz+D+som2QCQGPAf1SxrkEr+Z32gMreQ0rparXTNGRRfYUWk/JzbGdcM8NSSd6oqnTA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.38.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/utils/5.38.0
+  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
    name: '@typescript-eslint/utils'
-    version: 5.38.0
+    version: 5.39.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.38.0
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3
+      '@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
      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
@@ -1841,13 +1870,13 @@ packages:
      - typescript
    dev: true

-  registry.npmjs.org/@typescript-eslint/visitor-keys/5.38.0:
-    resolution: {integrity: sha512-MxnrdIyArnTi+XyFLR+kt/uNAcdOnmT+879os7qDRI+EYySR4crXJq9BXPfRzzLGq0wgxkwidrCJ9WCAoacm1w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.38.0.tgz}
+  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}
    name: '@typescript-eslint/visitor-keys'
-    version: 5.38.0
+    version: 5.39.0
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0
      eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0
    dev: true