Merge branch 'next-release' into fix/selection-rect

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/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 = {

packages/core/src/utils/graph.ts

@@ -243,3 +243,4 @@ export const getTransformForBounds = (
 export const getD3Transition = (selection: D3Selection<Element, unknown, null, undefined>, duration = 0) => {
   return selection.transition().duration(duration);
 };
+

packages/minimap/src/MiniMap.tsx

@@ -39,7 +39,6 @@ const selector = (s: ReactFlowState) => {
 const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
 
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
-
 function MiniMap({
   style,
   className,
@@ -54,6 +53,7 @@ function MiniMap({
   onNodeClick,
   pannable = false,
   zoomable = false,
+  ariaLabel = 'React Flow mini map',
 }: MiniMapProps) {
   const store = useStoreApi();
   const svg = useRef<SVGSVGElement>(null);
@@ -156,7 +156,7 @@ function MiniMap({
         ref={svg}
         onClick={onSvgClick}
       >
-        <title id={labelledBy}>React Flow mini map</title>
+        {ariaLabel && <title id={labelledBy}>{ariaLabel}</title>}
         {nodes.map((node) => (
           <MiniMapNode
             key={node.id}

packages/minimap/src/types.ts

@@ -16,4 +16,5 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   onNodeClick?: (event: MouseEvent, node: Node<NodeData>) => void;
   pannable?: boolean;
   zoomable?: boolean;
+  ariaLabel?: string | null;
 };