feat(node-toolbar): use z-index of the node for the toolbar

packages/node-toolbar/src/NodeToolbar.tsx

@@ -1,5 +1,14 @@
 import { useCallback, CSSProperties } from 'react';
-import { Node, ReactFlowState, useStore, getRectOfNodes, Transform, Rect, Position } from '@reactflow/core';
+import {
+  Node,
+  ReactFlowState,
+  useStore,
+  getRectOfNodes,
+  Transform,
+  Rect,
+  Position,
+  internalsSymbol,
+} from '@reactflow/core';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
@@ -13,7 +22,8 @@ const nodeEqualityFn = (a: SelectedNode, b: SelectedNode) =>
   a?.positionAbsolute?.y === b?.positionAbsolute?.y &&
   a?.width === b?.width &&
   a?.height === b?.height &&
-  a?.selected === b?.selected;
+  a?.selected === b?.selected &&
+  a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z;
 
 const transformSelector = (state: ReactFlowState) => state.transform;
 
@@ -68,6 +78,7 @@ function NodeToolbar({
 
   const wrapperStyle: CSSProperties = {
     transform: getTransform(nodeRect, transform, position, offset),
+    zIndex: node[internalsSymbol]?.z,
     ...style,
   };
 

packages/node-toolbar/src/NodeToolbarPortal.tsx

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