Merge pull request #2559 from wbkd/next-release

Next release

examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx

@@ -0,0 +1,63 @@
+import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from 'reactflow';
+import * as simpleflow from '../../fixtures/simpleflow';
+
+function CustomEdge(props: EdgeProps) {
+  const [path, labelX, labelY] = getSmoothStepPath(props);
+  return (
+    <>
+      <BaseEdge path={path} labelX={labelX} labelY={labelY} />
+      <EdgeLabelRenderer>
+        <div className="label">{props.id}</div>
+      </EdgeLabelRenderer>
+    </>
+  );
+}
+
+const simpleflow1 = { ...simpleflow };
+simpleflow1.edges = [...simpleflow1.edges];
+simpleflow1.edges[0] = { ...simpleflow1.edges[0], id: 'edge1' };
+
+const simpleflow2 = { ...simpleflow };
+simpleflow2.edges = [...simpleflow2.edges];
+simpleflow2.edges[0] = { ...simpleflow2.edges[0], id: 'edge2' };
+
+describe('<ReactFlow />: Multiple Instances', () => {
+  describe('render EdgeLabelRenderer', () => {
+    beforeEach(() => {
+      cy.mount(
+        <>
+          <ReactFlowProvider>
+            <ReactFlow
+              defaultNodes={simpleflow1.nodes}
+              edgeTypes={{ default: CustomEdge }}
+              defaultEdges={simpleflow1.edges}
+            />
+          </ReactFlowProvider>
+          <ReactFlowProvider>
+            <ReactFlow
+              defaultNodes={simpleflow2.nodes}
+              edgeTypes={{ default: CustomEdge }}
+              defaultEdges={simpleflow2.edges}
+            />
+          </ReactFlowProvider>
+        </>
+      );
+    });
+
+    it('Each ReactFlow instance has one edge label in EdgeLabelRenderer', () => {
+      cy.get('.react-flow__edgelabel-renderer').should('have.length', 2);
+
+      cy.get('.react-flow__edgelabel-renderer')
+        .eq(0)
+        .within(() => {
+          cy.get('.label').should('have.length', 1).should('contain.text', 'edge1');
+        });
+
+      cy.get('.react-flow__edgelabel-renderer')
+        .eq(1)
+        .within(() => {
+          cy.get('.label').should('have.length', 1).should('contain.text', 'edge2');
+        });
+    });
+  });
+});

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

@@ -40,6 +40,7 @@ import EdgeRouting from '../examples/EdgeRouting';
 import CancelConnection from '../examples/CancelConnection';
 import InteractiveMinimap from '../examples/InteractiveMinimap';
 import UseOnSelectionChange from '../examples/UseOnSelectionChange';
+import NodeToolbar from '../examples/NodeToolbar';
 
 interface IRoute {
   name: string;
@@ -168,6 +169,11 @@ const routes: IRoute[] = [
     path: '/nodetypesobject-change',
     component: NodeTypesObjectChange,
   },
+  {
+    name: 'NodeToolbar',
+    path: '/node-toolbar',
+    component: NodeToolbar,
+  },
   {
     name: 'Overview',
     path: '/overview',

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

@@ -8,6 +8,7 @@ import ReactFlow, {
   Node,
   Edge,
   useReactFlow,
+  NodeOrigin,
 } from 'reactflow';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
@@ -47,6 +48,8 @@ const initialEdges: Edge[] = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
+const nodeOrigin: NodeOrigin = [0.5, 0.5];
+
 const defaultEdgeOptions = { zIndex: 0 };
 
 const BasicFlow = () => {
@@ -91,6 +94,7 @@ const BasicFlow = () => {
       fitView
       defaultEdgeOptions={defaultEdgeOptions}
       selectNodesOnDrag={false}
+      nodeOrigin={nodeOrigin}
     >
       <Background variant={BackgroundVariant.Dots} />
       <MiniMap />
@@ -106,7 +110,9 @@ const BasicFlow = () => {
         <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
           toggle classnames
         </button>
-        <button onClick={logToObject} style={{ marginRight: 5 }}>toObject</button>
+        <button onClick={logToObject} style={{ marginRight: 5 }}>
+          toObject
+        </button>
       </div>
     </ReactFlow>
   );

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

@@ -0,0 +1,19 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps, NodeToolbar } from 'reactflow';
+
+const CustomNode: FC<NodeProps> = ({ id, data }) => {
+  return (
+    <>
+      <NodeToolbar nodeId={id} isVisible={data.toolbarVisible} position={data.toolbarPosition}>
+        <button>delete</button>
+        <button>copy</button>
+        <button>expand</button>
+      </NodeToolbar>
+      <div>{data.label}</div>
+      <Handle type="target" position={Position.Left} />
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(CustomNode);

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

@@ -0,0 +1,84 @@
+import ReactFlow, {
+  MiniMap,
+  Background,
+  BackgroundVariant,
+  Controls,
+  Node,
+  Edge,
+  NodeTypes,
+  Position,
+  NodeOrigin,
+} from 'reactflow';
+
+import CustomNode from './CustomNode';
+
+const nodeTypes: NodeTypes = {
+  custom: CustomNode,
+};
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'custom',
+    data: { label: 'toolbar top', toolbarPosition: Position.Top },
+    position: { x: 0, y: 50 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '2',
+    type: 'custom',
+    data: { label: 'toolbar right', toolbarPosition: Position.Right },
+    position: { x: 300, y: 0 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '3',
+    type: 'custom',
+    data: { label: 'toolbar bottom', toolbarPosition: Position.Bottom },
+    position: { x: 400, y: 100 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '4',
+    type: 'custom',
+    data: { label: 'toolbar left', toolbarPosition: Position.Left },
+    position: { x: 400, y: 200 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '5',
+    type: 'custom',
+    data: { label: 'toolbar always open', toolbarPosition: Position.Top, toolbarVisible: true },
+    position: { x: 0, y: 200 },
+    className: 'react-flow__node-default',
+  },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2' },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e1-4', source: '1', target: '4' },
+];
+
+const defaultEdgeOptions = { zIndex: 0 };
+const nodeOrigin: NodeOrigin = [0.5, 0.5];
+
+export default function NodeToolbarExample() {
+  return (
+    <ReactFlow
+      defaultNodes={initialNodes}
+      defaultEdges={initialEdges}
+      className="react-flow-node-toolbar-example"
+      minZoom={0.2}
+      maxZoom={4}
+      fitView
+      defaultEdgeOptions={defaultEdgeOptions}
+      nodeTypes={nodeTypes}
+      nodeOrigin={nodeOrigin}
+    >
+      <Background variant={BackgroundVariant.Dots} />
+      <MiniMap />
+      <Controls />
+    </ReactFlow>
+  );
+}

packages/background/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @reactflow/background
 
+## 11.0.5
+
+### Patch Changes
+
+- Updated dependencies [[`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7)]:
+  - @reactflow/core@11.3.0
+
 ## 11.0.4
 
 ### Patch Changes

packages/background/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/background",
-  "version": "11.0.4",
+  "version": "11.0.5",
   "description": "Background component with different variants for React Flow",
   "keywords": [
     "react",

packages/controls/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @reactflow/controls
 
+## 11.0.5
+
+### Patch Changes
+
+- Updated dependencies [[`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7)]:
+  - @reactflow/core@11.3.0
+
 ## 11.0.4
 
 ### Patch Changes

packages/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/controls",
-  "version": "11.0.4",
+  "version": "11.0.5",
   "description": "Component to control the viewport of a React Flow instance",
   "keywords": [
     "react",

packages/core/CHANGELOG.md

@@ -1,15 +1,25 @@
 # @reactflow/core
 
+## 11.3.0
+
+### Minor Changes
+
+- [#2563](https://github.com/wbkd/react-flow/pull/2563) [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd) Thanks [@chrtze](https://github.com/chrtze)! - Export a new component "NodeToolbar" that renders a fixed element attached to a node
+
+### Patch Changes
+
+- [#2561](https://github.com/wbkd/react-flow/pull/2561) [`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940) Thanks [@moklick](https://github.com/moklick)! - Fix multi selection and fitView when nodeOrigin is used
+- [#2560](https://github.com/wbkd/react-flow/pull/2560) [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd) Thanks [@neo](https://github.com/neo)! - Always elevate zIndex when node is selected
+- [#2573](https://github.com/wbkd/react-flow/pull/2573) [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967) Thanks [@moklick](https://github.com/moklick)! - Fix disappearing connection line for loose flows
+- [#2558](https://github.com/wbkd/react-flow/pull/2558) [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7) Thanks [@moklick](https://github.com/moklick)! - EdgeLabelRenderer: handle multiple instances on a page
+
 ## 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

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/core",
-  "version": "11.2.0",
+  "version": "11.3.0",
   "description": "Core components and util functions of React Flow.",
   "keywords": [
     "react",

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

@@ -7,7 +7,7 @@ import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 import { internalsSymbol } from '../../utils';
 import type { ConnectionLineComponent, HandleType, ReactFlowStore } from '../../types';
-import { Position, ConnectionLineType } from '../../types';
+import { Position, ConnectionLineType, ConnectionMode } from '../../types';
 
 type ConnectionLineProps = {
   connectionNodeId: string;
@@ -33,26 +33,33 @@ const ConnectionLine = ({
   isConnectable,
   CustomConnectionLineComponent,
 }: ConnectionLineProps) => {
-  const { fromNode, handleId, toX, toY } = useStore(
+  const { fromNode, handleId, toX, toY, connectionMode } = useStore(
     useCallback(
       (s: ReactFlowStore) => ({
         fromNode: s.nodeInternals.get(connectionNodeId),
         handleId: s.connectionHandleId,
         toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
         toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
+        connectionMode: s.connectionMode,
       }),
       [connectionNodeId]
     ),
     shallow
   );
   const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
+  let handleBounds = fromHandleBounds?.[connectionHandleType];
 
-  if (!fromNode || !isConnectable || !fromHandleBounds?.[connectionHandleType]) {
+  if (connectionMode === ConnectionMode.Loose) {
+    handleBounds = handleBounds
+      ? handleBounds
+      : fromHandleBounds?.[connectionHandleType === 'source' ? 'target' : 'source'];
+  }
+
+  if (!fromNode || !isConnectable || !handleBounds) {
     return null;
   }
 
-  const handleBound = fromHandleBounds[connectionHandleType]!;
-  const fromHandle = handleId ? handleBound.find((d) => d.id === handleId) : handleBound[0];
+  const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
   const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode?.width ?? 0) / 2;
   const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode?.height ?? 0;
   const fromX = (fromNode?.positionAbsolute?.x || 0) + fromHandleX;

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

@@ -1,15 +1,18 @@
-import { useRef } from 'react';
 import type { ReactNode } from 'react';
 import { createPortal } from 'react-dom';
+import { useStore } from '../../hooks/useStore';
+import { ReactFlowState } from '../../types';
+
+const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
 
 function EdgeLabelRenderer({ children }: { children: ReactNode }) {
-  const wrapperRef = useRef(document.getElementById('edgelabel-portal'));
+  const edgeLabelRenderer = useStore(selector);
 
-  if (!wrapperRef.current) {
+  if (!edgeLabelRenderer) {
     return null;
   }
 
-  return createPortal(children, wrapperRef.current);
+  return createPortal(children, edgeLabelRenderer);
 }
 
 export default EdgeLabelRenderer;

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

@@ -24,12 +24,11 @@ export interface NodesSelectionProps {
 const selector = (s: ReactFlowState) => ({
   transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`,
   userSelectionActive: s.userSelectionActive,
-  ...getRectOfNodes(Array.from(s.nodeInternals.values()).filter((n) => n.selected)),
 });
 
 const bboxSelector = (s: ReactFlowState) => {
   const selectedNodes = Array.from(s.nodeInternals.values()).filter((n) => n.selected);
-  return getRectOfNodes(selectedNodes);
+  return getRectOfNodes(selectedNodes, s.nodeOrigin);
 };
 
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {

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

@@ -101,9 +101,9 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
       height: Math.abs(mousePos.y - startY),
     };
 
-    const { nodeInternals, edges, transform, onNodesChange, onEdgesChange } = store.getState();
+    const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState();
     const nodes = Array.from(nodeInternals.values());
-    const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true);
+    const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true, nodeOrigin);
     const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id);
     const selectedNodeIds = selectedNodes.map((n) => n.id);
 

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

@@ -158,7 +158,7 @@ const GraphView = ({
           disableKeyboardA11y={disableKeyboardA11y}
           rfId={rfId}
         />
-        <div className="react-flow__edgelabel-renderer" id="edgelabel-portal" />
+        <div className="react-flow__edgelabel-renderer" />
 
         <NodeRenderer
           nodeTypes={nodeTypes}

packages/core/src/store/utils.ts

@@ -39,7 +39,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
   const parentNodes: ParentNodes = {};
 
   nodes.forEach((node) => {
-    const z = isNumeric(node.zIndex) ? node.zIndex : node.selected ? 1000 : 0;
+    const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? 1000 : 0);
     const currInternals = nodeInternals.get(node.id);
 
     const internals: Node = {
@@ -100,8 +100,18 @@ type InternalFitViewOptions = {
 } & FitViewOptions;
 
 export function fitView(get: StoreApi<ReactFlowState>['getState'], options: InternalFitViewOptions = {}) {
-  const { nodeInternals, width, height, minZoom, maxZoom, d3Zoom, d3Selection, fitViewOnInitDone, fitViewOnInit } =
-    get();
+  const {
+    nodeInternals,
+    width,
+    height,
+    minZoom,
+    maxZoom,
+    d3Zoom,
+    d3Selection,
+    fitViewOnInitDone,
+    fitViewOnInit,
+    nodeOrigin,
+  } = get();
 
   if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) {
     if (d3Zoom && d3Selection) {
@@ -112,7 +122,7 @@ export function fitView(get: StoreApi<ReactFlowState>['getState'], options: Inte
       const nodesInitialized = nodes.every((n) => n.width && n.height);
 
       if (nodes.length > 0 && nodesInitialized) {
-        const bounds = getRectOfNodes(nodes);
+        const bounds = getRectOfNodes(nodes, nodeOrigin);
         const [x, y, zoom] = getTransformForBounds(
           bounds,
           width,

packages/core/src/utils/graph.ts

@@ -2,7 +2,17 @@
 import type { Selection as D3Selection } from 'd3';
 
 import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectToBox } from '../utils';
-import type { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';
+import type {
+  Node,
+  Edge,
+  Connection,
+  EdgeMarkerType,
+  Transform,
+  XYPosition,
+  Rect,
+  NodeInternals,
+  NodeOrigin,
+} from '../types';
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>
   'id' in element && 'source' in element && 'target' in element;
@@ -131,22 +141,26 @@ export const pointToRendererPoint = (
   return position;
 };
 
-export const getRectOfNodes = (nodes: Node[]): Rect => {
+export const getRectOfNodes = (nodes: Node[], nodeOrigin: NodeOrigin = [0, 0]): Rect => {
   if (nodes.length === 0) {
     return { x: 0, y: 0, width: 0, height: 0 };
   }
 
   const box = nodes.reduce(
-    (currBox, { positionAbsolute, position, width, height }) =>
-      getBoundsOfBoxes(
+    (currBox, { positionAbsolute, position, width, height }) => {
+      const nodeX = positionAbsolute ? positionAbsolute.x : position.x;
+      const nodeY = positionAbsolute ? positionAbsolute.y : position.y;
+
+      return getBoundsOfBoxes(
         currBox,
         rectToBox({
-          x: positionAbsolute ? positionAbsolute.x : position.x,
-          y: positionAbsolute ? positionAbsolute.y : position.y,
+          x: nodeX - nodeOrigin[0] * (width || 0),
+          y: nodeY - nodeOrigin[1] * (height || 0),
           width: width || 0,
           height: height || 0,
         })
-      ),
+      );
+    },
     { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
   );
 
@@ -159,7 +173,8 @@ export const getNodesInside = (
   [tx, ty, tScale]: Transform = [0, 0, 1],
   partially = false,
   // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
-  excludeNonSelectableNodes = false
+  excludeNonSelectableNodes = false,
+  nodeOrigin: NodeOrigin = [0, 0]
 ): Node[] => {
   const paneRect = {
     x: (rect.x - tx) / tScale,
@@ -171,13 +186,18 @@ export const getNodesInside = (
   const visibleNodes: Node[] = [];
 
   nodeInternals.forEach((node) => {
-    const { positionAbsolute = { x: 0, y: 0 }, width, height, selectable = true } = node;
+    const { width, height, selectable = true, positionAbsolute = { x: 0, y: 0 } } = node;
 
     if (excludeNonSelectableNodes && !selectable) {
       return false;
     }
 
-    const nodeRect = { ...positionAbsolute, width: width || 0, height: height || 0 };
+    const nodeRect = {
+      x: positionAbsolute.x - nodeOrigin[0] * (width || 0),
+      y: positionAbsolute.y - nodeOrigin[1] * (height || 0),
+      width: width || 0,
+      height: height || 0,
+    };
     const overlappingArea = getOverlappingArea(paneRect, nodeRect);
     const notInitialized =
       typeof width === 'undefined' || typeof height === 'undefined' || width === null || height === null;
@@ -223,3 +243,4 @@ export const getTransformForBounds = (
 export const getD3Transition = (selection: D3Selection<Element, unknown, null, undefined>, duration = 0) => {
   return selection.transition().duration(duration);
 };
+

packages/minimap/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @reactflow/minimap
 
+## 11.2.0
+
+### Minor Changes
+
+- [#2562](https://github.com/wbkd/react-flow/pull/2562) [`d745aa33`](https://github.com/wbkd/react-flow/commit/d745aa33fcd1333e12929c862f9a3d6de53f7179) Thanks [@moklick](https://github.com/moklick)! - Add maskStrokeColor and maskStrokeWidth props
+- [#2545](https://github.com/wbkd/react-flow/pull/2545) [`8f63f751`](https://github.com/wbkd/react-flow/commit/8f63f751e302d3c935865760d2134350c31ab93f) Thanks [@chrtze](https://github.com/chrtze)! - add a new property "ariaLabel" to configure or remove the aria-label of the minimap component
+
+### Patch Changes
+
+- Updated dependencies [[`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7)]:
+  - @reactflow/core@11.3.0
+
 ## 11.1.0
 
 ### Minor Changes

packages/minimap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/minimap",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "description": "Minimap component for React Flow.",
   "keywords": [
     "react",

packages/minimap/src/MiniMap.tsx

@@ -30,15 +30,15 @@ const selector = (s: ReactFlowState) => {
   return {
     nodes: nodes.filter((node) => !node.hidden && node.width && node.height),
     viewBB,
-    boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB,
+    boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes, s.nodeOrigin), viewBB) : viewBB,
     rfId: s.rfId,
+    nodeOrigin: s.nodeOrigin,
   };
 };
 
 const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
 
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
-
 function MiniMap({
   style,
   className,
@@ -48,15 +48,18 @@ function MiniMap({
   nodeBorderRadius = 5,
   nodeStrokeWidth = 2,
   maskColor = 'rgb(240, 240, 240, 0.6)',
+  maskStrokeColor = 'none',
+  maskStrokeWidth = 1,
   position = 'bottom-right',
   onClick,
   onNodeClick,
   pannable = false,
   zoomable = false,
+  ariaLabel = 'React Flow mini map',
 }: MiniMapProps) {
   const store = useStoreApi();
   const svg = useRef<SVGSVGElement>(null);
-  const { boundingRect, viewBB, nodes, rfId } = useStore(selector, shallow);
+  const { boundingRect, viewBB, nodes, rfId, nodeOrigin } = useStore(selector, shallow);
   const elementWidth = (style?.width as number) ?? defaultWidth;
   const elementHeight = (style?.height as number) ?? defaultHeight;
   const nodeColorFunc = getAttrFunction(nodeColor);
@@ -155,33 +158,33 @@ function MiniMap({
         ref={svg}
         onClick={onSvgClick}
       >
-        <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}
-              onClick={onSvgNodeClick}
-              id={node.id}
-            />
-          );
-        })}
+        {ariaLabel && <title id={labelledBy}>{ariaLabel}</title>}
+        {nodes.map((node) => (
+          <MiniMapNode
+            key={node.id}
+            x={(node.positionAbsolute?.x ?? 0) - nodeOrigin[0] * (node.width ?? 0)}
+            y={(node.positionAbsolute?.y ?? 0) - nodeOrigin[1] * (node.height ?? 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}
+            onClick={onSvgNodeClick}
+            id={node.id}
+          />
+        ))}
         <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"
+          stroke={maskStrokeColor}
+          strokeWidth={maskStrokeWidth}
         />
       </svg>
     </Panel>

packages/minimap/src/types.ts

@@ -11,9 +11,12 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   nodeBorderRadius?: number;
   nodeStrokeWidth?: number;
   maskColor?: string;
+  maskStrokeColor?: string;
+  maskStrokeWidth?: number;
   position?: PanelPosition;
   onClick?: (event: MouseEvent, position: XYPosition) => void;
   onNodeClick?: (event: MouseEvent, node: Node<NodeData>) => void;
   pannable?: boolean;
   zoomable?: boolean;
+  ariaLabel?: string | null;
 };

packages/node-toolbar/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@reactflow/eslint-config'],
+};

packages/node-toolbar/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @reactflow/node-toolbar
+
+## 1.0.0
+
+### Major Changes
+
+- [#2563](https://github.com/wbkd/react-flow/pull/2563) [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd) Thanks [@chrtze](https://github.com/chrtze)! - Export a new component "NodeToolbar" that renders a fixed element attached to a node

packages/node-toolbar/README.md

@@ -0,0 +1,10 @@
+# @reactflow/node-toolbar
+
+A toolbar component for React Flow that can be attached to a node.
+
+## Installation 
+
+```sh 
+npm install @reactflow/node-toolbar
+```
+

packages/node-toolbar/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@reactflow/node-toolbar",
+  "version": "1.0.0",
+  "description": "A toolbar component for React Flow that can be attached to a node.",
+  "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": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wbkd/react-flow.git",
+    "directory": "packages/node-toolbar"
+  },
+  "scripts": {
+    "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch",
+    "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production",
+    "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",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "typescript": "^4.8.3"
+  },
+  "rollup": {
+    "globals": {
+      "zustand": "Zustand",
+      "zustand/shallow": "zustandShallow",
+      "classcat": "cc"
+    },
+    "name": "ReactFlowNodeToolbar"
+  }
+}

packages/node-toolbar/src/NodeToolbar.tsx

@@ -0,0 +1,100 @@
+import { useCallback, CSSProperties } from 'react';
+import {
+  Node,
+  ReactFlowState,
+  useStore,
+  getRectOfNodes,
+  Transform,
+  Rect,
+  Position,
+  internalsSymbol,
+} from '@reactflow/core';
+import cc from 'classcat';
+import shallow from 'zustand/shallow';
+
+import NodeToolbarPortal from './NodeToolbarPortal';
+import { NodeToolbarProps } from './types';
+
+type SelectedNode = Node | undefined;
+
+const nodeEqualityFn = (a: SelectedNode, b: SelectedNode) =>
+  a?.positionAbsolute?.x === b?.positionAbsolute?.x &&
+  a?.positionAbsolute?.y === b?.positionAbsolute?.y &&
+  a?.width === b?.width &&
+  a?.height === b?.height &&
+  a?.selected === b?.selected &&
+  a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z;
+
+const storeSelector = (state: ReactFlowState) => ({
+  transform: state.transform,
+  nodeOrigin: state.nodeOrigin,
+  selectedNodesCount: Array.from(state.nodeInternals.values()).filter((node) => node.selected).length,
+});
+
+function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number): string {
+  // position === Position.Top
+  let xPos = (nodeRect.x + nodeRect.width / 2) * transform[2] + transform[0];
+  let yPos = nodeRect.y * transform[2] + transform[1] - offset;
+  let xShift = -50;
+  let yShift = -100;
+
+  switch (position) {
+    case Position.Right:
+      xPos = (nodeRect.x + nodeRect.width) * transform[2] + transform[0] + offset;
+      yPos = (nodeRect.y + nodeRect.height / 2) * transform[2] + transform[1];
+      xShift = 0;
+      yShift = -50;
+      break;
+    case Position.Bottom:
+      yPos = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset;
+      yShift = 0;
+      break;
+    case Position.Left:
+      xPos = nodeRect.x * transform[2] + transform[0] - offset;
+      yPos = (nodeRect.y + nodeRect.height / 2) * transform[2] + transform[1];
+      xShift = -100;
+      yShift = -50;
+      break;
+  }
+
+  return `translate(${xPos}px, ${yPos}px) translate(${xShift}%, ${yShift}%)`;
+}
+
+function NodeToolbar({
+  nodeId,
+  children,
+  className,
+  style,
+  isVisible,
+  position = Position.Top,
+  offset = 10,
+  ...rest
+}: NodeToolbarProps) {
+  const nodeSelector = useCallback((state: ReactFlowState): SelectedNode => state.nodeInternals.get(nodeId), [nodeId]);
+  const node = useStore(nodeSelector, nodeEqualityFn);
+  const { transform, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
+  const isActive = typeof isVisible === 'boolean' ? isVisible : node?.selected && selectedNodesCount === 1;
+
+  if (!isActive || !node) {
+    return null;
+  }
+
+  const nodeRect: Rect = getRectOfNodes([node], nodeOrigin);
+
+  const wrapperStyle: CSSProperties = {
+    position: 'absolute',
+    transform: getTransform(nodeRect, transform, position, offset),
+    zIndex: (node[internalsSymbol]?.z || 1) + 1,
+    ...style,
+  };
+
+  return (
+    <NodeToolbarPortal>
+      <div style={wrapperStyle} className={cc(['react-flow__node-toolbar', className])} {...rest}>
+        {children}
+      </div>
+    </NodeToolbarPortal>
+  );
+}
+
+export default NodeToolbar;

packages/node-toolbar/src/NodeToolbarPortal.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { ReactFlowState, useStore } from '@reactflow/core';
+
+const selector = (state: ReactFlowState) => state.domNode?.querySelector('.react-flow__renderer');
+
+function NodeToolbarPortal({ children }: { children: ReactNode }) {
+  const wrapperRef = useStore(selector);
+
+  if (!wrapperRef) {
+    return null;
+  }
+
+  return createPortal(children, wrapperRef);
+}
+
+export default NodeToolbarPortal;

packages/node-toolbar/src/index.tsx

@@ -0,0 +1,2 @@
+export { default as NodeToolbar } from './NodeToolbar';
+export * from './types';

packages/node-toolbar/src/types.ts

@@ -0,0 +1,9 @@
+import { Position } from '@reactflow/core';
+import type { HTMLAttributes } from 'react';
+
+export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
+  nodeId: string;
+  isVisible?: boolean;
+  position?: Position;
+  offset?: number;
+};

packages/node-toolbar/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@reactflow/tsconfig/react.json",
+  "display": "@reactflow/node-toolbar",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

packages/reactflow/CHANGELOG.md

@@ -1,15 +1,34 @@
 # reactflow
 
+## 11.3.0
+
+### Minor Changes
+
+- [#2562](https://github.com/wbkd/react-flow/pull/2562) [`d745aa33`](https://github.com/wbkd/react-flow/commit/d745aa33fcd1333e12929c862f9a3d6de53f7179) Thanks [@moklick](https://github.com/moklick)! - Minimap: Add `maskStrokeColor` and `maskStrokeWidth` props
+- [#2563](https://github.com/wbkd/react-flow/pull/2563) [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd) Thanks [@chrtze](https://github.com/chrtze)! - Core: Add `<NodeToolbar />` component that renders a fixed element attached to a node
+- [#2545](https://github.com/wbkd/react-flow/pull/2545) [`8f63f751`](https://github.com/wbkd/react-flow/commit/8f63f751e302d3c935865760d2134350c31ab93f) Thanks [@chrtze](https://github.com/chrtze)! - Minimap: Add `ariaLabel` prop to configure or remove the aria-label
+
+### Patch Changes
+
+- [#2561](https://github.com/wbkd/react-flow/pull/2561) [`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940) Thanks [@moklick](https://github.com/moklick)! - Core: Fix multi selection and fitView when nodeOrigin is used
+- [#2560](https://github.com/wbkd/react-flow/pull/2560) [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd) Thanks [@neo](https://github.com/neo)! - Core: Always elevate zIndex when node is selected
+- [#2573](https://github.com/wbkd/react-flow/pull/2573) [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967) Thanks [@moklick](https://github.com/moklick)! - Core: Fix disappearing connection line for loose flows
+- [#2558](https://github.com/wbkd/react-flow/pull/2558) [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7) Thanks [@moklick](https://github.com/moklick)! - Core: Handle multiple instances on a page for EdgeLabelRenderer
+
+- Updated dependencies [[`d745aa33`](https://github.com/wbkd/react-flow/commit/d745aa33fcd1333e12929c862f9a3d6de53f7179), [`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`8f63f751`](https://github.com/wbkd/react-flow/commit/8f63f751e302d3c935865760d2134350c31ab93f), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7), [`c793433c`](https://github.com/wbkd/react-flow/commit/c793433cafc214281ae97c9a32f5ac2fe453c34f)]:
+  - @reactflow/minimap@11.2.0
+  - @reactflow/core@11.3.0
+  - @reactflow/node-toolbar@1.0.0
+  - @reactflow/background@11.0.5
+  - @reactflow/controls@11.0.5
+
 ## 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

packages/reactflow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactflow",
-  "version": "11.2.0",
+  "version": "11.3.0",
   "description": "A highly customizable React library for building node-based editors and interactive flow charts",
   "keywords": [
     "react",
@@ -38,7 +38,8 @@
     "@reactflow/background": "workspace:*",
     "@reactflow/controls": "workspace:*",
     "@reactflow/core": "workspace:*",
-    "@reactflow/minimap": "workspace:*"
+    "@reactflow/minimap": "workspace:*",
+    "@reactflow/node-toolbar": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -58,7 +59,8 @@
       "@reactflow/background": "ReactFlowBackground",
       "@reactflow/controls": "ReactFlowControls",
       "@reactflow/core": "ReactFlowCore",
-      "@reactflow/minimap": "ReactFlowMinimap"
+      "@reactflow/minimap": "ReactFlowMinimap",
+      "@reactflow/node-toolbar": "ReactFlowNodeToolbar"
     },
     "name": "ReactFlow"
   }

packages/reactflow/src/index.ts

@@ -2,5 +2,6 @@ export * from '@reactflow/core';
 export * from '@reactflow/minimap';
 export * from '@reactflow/controls';
 export * from '@reactflow/background';
+export * from '@reactflow/node-toolbar';
 
 export { ReactFlow as default } from '@reactflow/core';

pnpm-lock.yaml

@@ -32,8 +32,8 @@ 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.42.0_dcn2ddfkdgyby36a3kmqplwxkq
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.42.0_irgkl5vooow2ydyo6aokmferha
+      '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.43.0_nctdnn3gg3ldnbrjkdxid2oppm
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.43.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
@@ -215,6 +215,35 @@ importers:
       react: registry.npmjs.org/react/18.2.0
       typescript: registry.npmjs.org/typescript/4.8.3
 
+  packages/node-toolbar:
+    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
+      '@types/react-dom': ^18.0.6
+      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
+      '@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
+
   packages/reactflow:
     specifiers:
       '@reactflow/background': workspace:*
@@ -222,6 +251,7 @@ importers:
       '@reactflow/core': workspace:*
       '@reactflow/eslint-config': workspace:^0.0.0
       '@reactflow/minimap': workspace:*
+      '@reactflow/node-toolbar': workspace:*
       '@reactflow/rollup-config': workspace:*
       '@reactflow/tsconfig': workspace:*
       '@types/node': ^18.7.16
@@ -233,6 +263,7 @@ importers:
       '@reactflow/controls': link:../controls
       '@reactflow/core': link:../core
       '@reactflow/minimap': link:../minimap
+      '@reactflow/node-toolbar': link:../node-toolbar
     devDependencies:
       '@reactflow/eslint-config': link:../../tooling/eslint-config
       '@reactflow/rollup-config': link:../../tooling/rollup-config
@@ -1720,11 +1751,11 @@ packages:
     dev: true
     optional: true
 
-  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
+  registry.npmjs.org/@typescript-eslint/eslint-plugin/5.43.0_nctdnn3gg3ldnbrjkdxid2oppm:
+    resolution: {integrity: sha512-wNPzG+eDR6+hhW4yobEmpR36jrqqQv1vxBq5LJO3fBAktjkvekfr4BRl+3Fn1CM/A+s8/EiGUbOMDoYqWdbtXA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.43.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.43.0
     name: '@typescript-eslint/eslint-plugin'
-    version: 5.42.0
+    version: 5.43.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -1734,10 +1765,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@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
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.43.0_irgkl5vooow2ydyo6aokmferha
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.43.0
+      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.43.0_irgkl5vooow2ydyo6aokmferha
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.43.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
@@ -1750,11 +1781,11 @@ packages:
       - supports-color
     dev: true
 
-  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
+  registry.npmjs.org/@typescript-eslint/parser/5.43.0_irgkl5vooow2ydyo6aokmferha:
+    resolution: {integrity: sha512-2iHUK2Lh7PwNUlhFxxLI2haSDNyXvebBO9izhjhMoDC+S3XI9qt2DGFUsiJ89m2k7gGYch2aEpYqV5F/+nwZug==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.43.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/parser/5.43.0
     name: '@typescript-eslint/parser'
-    version: 5.42.0
+    version: 5.43.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -1763,9 +1794,9 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@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
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.43.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.43.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.43.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
@@ -1773,21 +1804,21 @@ packages:
       - supports-color
     dev: true
 
-  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}
+  registry.npmjs.org/@typescript-eslint/scope-manager/5.43.0:
+    resolution: {integrity: sha512-XNWnGaqAtTJsUiZaoiGIrdJYHsUOd3BZ3Qj5zKp9w6km6HsrjPk/TGZv0qMTWyWj0+1QOqpHQ2gZOLXaGA9Ekw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.43.0.tgz}
     name: '@typescript-eslint/scope-manager'
-    version: 5.42.0
+    version: 5.43.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@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
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.43.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.43.0
     dev: true
 
-  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
+  registry.npmjs.org/@typescript-eslint/type-utils/5.43.0_irgkl5vooow2ydyo6aokmferha:
+    resolution: {integrity: sha512-K21f+KY2/VvYggLf5Pk4tgBOPs2otTaIHy2zjclo7UZGLyFH86VfUOm5iq+OtDtxq/Zwu2I3ujDBykVW4Xtmtg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.43.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/type-utils/5.43.0
     name: '@typescript-eslint/type-utils'
-    version: 5.42.0
+    version: 5.43.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -1796,8 +1827,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@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
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.43.0_typescript@4.8.3
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.43.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
@@ -1806,18 +1837,18 @@ packages:
       - supports-color
     dev: true
 
-  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}
+  registry.npmjs.org/@typescript-eslint/types/5.43.0:
+    resolution: {integrity: sha512-jpsbcD0x6AUvV7tyOlyvon0aUsQpF8W+7TpJntfCUWU1qaIKu2K34pMwQKSzQH8ORgUrGYY6pVIh1Pi8TNeteg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.43.0.tgz}
     name: '@typescript-eslint/types'
-    version: 5.42.0
+    version: 5.43.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  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
+  registry.npmjs.org/@typescript-eslint/typescript-estree/5.43.0_typescript@4.8.3:
+    resolution: {integrity: sha512-BZ1WVe+QQ+igWal2tDbNg1j2HWUkAa+CVqdU79L4HP9izQY6CNhXfkNwd1SS4+sSZAP/EthI1uiCSY/+H0pROg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.43.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.43.0
     name: '@typescript-eslint/typescript-estree'
-    version: 5.42.0
+    version: 5.43.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -1825,8 +1856,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@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
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.43.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.43.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
@@ -1837,20 +1868,20 @@ packages:
       - supports-color
     dev: true
 
-  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
+  registry.npmjs.org/@typescript-eslint/utils/5.43.0_irgkl5vooow2ydyo6aokmferha:
+    resolution: {integrity: sha512-8nVpA6yX0sCjf7v/NDfeaOlyaIIqL7OaIGOWSPFqUKK59Gnumd3Wa+2l8oAaYO2lk0sO+SbWFWRSvhu8gLGv4A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.43.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/utils/5.43.0
     name: '@typescript-eslint/utils'
-    version: 5.42.0
+    version: 5.43.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
       '@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
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.43.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.43.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.43.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
@@ -1860,13 +1891,13 @@ packages:
       - typescript
     dev: true
 
-  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}
+  registry.npmjs.org/@typescript-eslint/visitor-keys/5.43.0:
+    resolution: {integrity: sha512-icl1jNH/d18OVHLfcwdL3bWUKsBeIiKYTGxMJCoGe7xFht+E4QgzOqoWYrU8XSLJWhVw8nTacbm03v23J/hFTg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.43.0.tgz}
     name: '@typescript-eslint/visitor-keys'
-    version: 5.42.0
+    version: 5.43.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.43.0
       eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0
     dev: true