@xyflow/react 12.0.0-next.5 → 12.0.0-next.7

package/dist/esm/index.js

@@ -2,8 +2,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useMemo, useEffect, useRef, useState, useCallback, forwardRef, memo } from 'react';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getOutgoersBase, getIncomersBase, addEdgeBase, updateEdgeBase, getConnectedEdgesBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calcNextPosition, Position, isMouseEvent, XYHandle, getHostForElement, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, getBezierEdgeCenter, getBezierPath, getEdgeCenter, getNodesBounds, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol } from '@xyflow/system';
+import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calcNextPosition, Position, isMouseEvent, XYHandle, getHostForElement, addEdge, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol, updateEdge } from '@xyflow/system';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import { createPortal } from 'react-dom';
@@ -424,8 +424,8 @@ const useViewportHelper = () => {
                 const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
                 panZoom?.setViewport(viewport, { duration: options?.duration });
             },
-            screenToFlowPosition: (position) => {
-                const { transform, snapToGrid, snapGrid, domNode } = store.getState();
+            screenToFlowPosition: (position, options = { snapToGrid: true }) => {
+                const { transform, snapGrid, domNode } = store.getState();
                 if (!domNode) {
                     return position;
                 }
@@ -434,7 +434,7 @@ const useViewportHelper = () => {
                     x: position.x - domX,
                     y: position.y - domY,
                 };
-                return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
+                return pointToRendererPoint(correctedPosition, transform, options.snapToGrid, snapGrid);
             },
             flowToScreenPosition: (position) => {
                 const { transform, domNode } = store.getState();
@@ -496,97 +496,102 @@ function handleParentExpand(updatedElements, updateItem) {
 // When you drag a node for example, React Flow will send a position change update.
 // This function then applies the changes and returns the updated elements.
 function applyChanges(changes, elements) {
-    // we need this hack to handle the setNodes and setEdges function of the useReactFlow hook for controlled flows
-    if (changes.some((c) => c.type === 'reset')) {
-        return changes.filter((c) => c.type === 'reset').map((c) => c.item);
-    }
-    let remainingChanges = [];
     const updatedElements = [];
+    // By storing a map of changes for each element, we can a quick lookup as we
+    // iterate over the elements array!
+    const changesMap = new Map();
     for (const change of changes) {
         if (change.type === 'add') {
             updatedElements.push(change.item);
+            continue;
         }
-        else {
-            remainingChanges.push(change);
+        else if (change.type === 'remove' || change.type === 'replace') {
+            // For a 'remove' change we can safely ignore any other changes queued for
+            // the same element, it's going to be removed anyway!
+            changesMap.set(change.id, [change]);
         }
-    }
-    for (const item of elements) {
-        const nextChanges = [];
-        const _remainingChanges = [];
-        for (const change of remainingChanges) {
-            if (change.id === item.id) {
-                nextChanges.push(change);
+        else {
+            const elementChanges = changesMap.get(change.id);
+            if (elementChanges) {
+                // If we have some changes queued already, we can do a mutable update of
+                // that array and save ourselves some copying.
+                elementChanges.push(change);
             }
             else {
-                _remainingChanges.push(change);
+                changesMap.set(change.id, [change]);
             }
         }
-        remainingChanges = _remainingChanges;
-        if (nextChanges.length === 0) {
-            updatedElements.push(item);
+    }
+    for (const element of elements) {
+        const changes = changesMap.get(element.id);
+        // When there are no changes for an element we can just push it unmodified,
+        // no need to copy it.
+        if (!changes) {
+            updatedElements.push(element);
             continue;
         }
-        const updateItem = { ...item };
-        let isDeletion = false;
-        for (const currentChange of nextChanges) {
-            if (currentChange) {
-                switch (currentChange.type) {
-                    case 'select': {
-                        updateItem.selected = currentChange.selected;
-                        break;
-                    }
-                    case 'position': {
-                        if (typeof currentChange.position !== 'undefined') {
-                            updateItem.position = currentChange.position;
-                        }
-                        if (typeof currentChange.positionAbsolute !== 'undefined') {
-                            if (!updateItem.computed) {
-                                updateItem.computed = {};
-                            }
-                            updateItem.computed.positionAbsolute = currentChange.positionAbsolute;
-                        }
-                        if (typeof currentChange.dragging !== 'undefined') {
-                            updateItem.dragging = currentChange.dragging;
-                        }
-                        if (updateItem.expandParent) {
-                            handleParentExpand(updatedElements, updateItem);
-                        }
-                        break;
-                    }
-                    case 'dimensions': {
-                        if (typeof currentChange.dimensions !== 'undefined') {
-                            if (!updateItem.computed) {
-                                updateItem.computed = {};
-                            }
-                            updateItem.computed.width = currentChange.dimensions.width;
-                            updateItem.computed.height = currentChange.dimensions.height;
-                            // this is needed for the node resizer to work
-                            if (currentChange.resizing) {
-                                updateItem.width = currentChange.dimensions.width;
-                                updateItem.height = currentChange.dimensions.height;
-                            }
-                        }
-                        if (typeof currentChange.resizing === 'boolean') {
-                            updateItem.resizing = currentChange.resizing;
-                        }
-                        if (updateItem.expandParent) {
-                            handleParentExpand(updatedElements, updateItem);
-                        }
-                        break;
-                    }
-                    case 'remove': {
-                        isDeletion = true;
-                        continue;
-                    }
-                }
-            }
+        // If we have a 'remove' change queued, it'll be the only change in the array
+        if (changes[0].type === 'remove') {
+            continue;
+        }
+        if (changes[0].type === 'replace') {
+            updatedElements.push({ ...changes[0].item });
+            continue;
         }
-        if (!isDeletion) {
-            updatedElements.push(updateItem);
+        // For other types of changes, we want to start with a shallow copy of the
+        // object so React knows this element has changed. Sequential changes will
+        /// each _mutate_ this object, so there's only ever one copy.
+        const updatedElement = { ...element };
+        for (const change of changes) {
+            applyChange(change, updatedElement, elements);
         }
+        updatedElements.push(updatedElement);
     }
     return updatedElements;
 }
+// Applies a single change to an element. This is a *mutable* update.
+function applyChange(change, element, elements = []) {
+    switch (change.type) {
+        case 'select': {
+            element.selected = change.selected;
+            break;
+        }
+        case 'position': {
+            if (typeof change.position !== 'undefined') {
+                element.position = change.position;
+            }
+            if (typeof change.positionAbsolute !== 'undefined') {
+                element.computed ??= {};
+                element.computed.positionAbsolute = change.positionAbsolute;
+            }
+            if (typeof change.dragging !== 'undefined') {
+                element.dragging = change.dragging;
+            }
+            if (element.expandParent) {
+                handleParentExpand(elements, element);
+            }
+            break;
+        }
+        case 'dimensions': {
+            if (typeof change.dimensions !== 'undefined') {
+                element.computed ??= {};
+                element.computed.width = change.dimensions.width;
+                element.computed.height = change.dimensions.height;
+                if (change.resizing) {
+                    element.width = change.dimensions.width;
+                    element.height = change.dimensions.height;
+                }
+            }
+            if (typeof change.resizing === 'boolean') {
+                element.resizing = change.resizing;
+            }
+            if (element.expandParent) {
+                handleParentExpand(elements, element);
+            }
+            break;
+        }
+    }
+}
 /**
  * Drop in function that applies node changes to an array of nodes.
  * @public
@@ -655,6 +660,26 @@ function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false)
     }
     return changes;
 }
+function getElementsDiffChanges({ items = [], lookup, }) {
+    const changes = [];
+    const itemsLookup = new Map(items.map((item) => [item.id, item]));
+    for (const item of items) {
+        const storeItem = lookup.get(item.id);
+        if (storeItem !== undefined && storeItem !== item) {
+            changes.push({ id: item.id, item: item, type: 'replace' });
+        }
+        if (storeItem === undefined) {
+            changes.push({ item: item, type: 'add' });
+        }
+    }
+    for (const [id] of lookup) {
+        const nextNode = itemsLookup.get(id);
+        if (nextNode === undefined) {
+            changes.push({ id, type: 'remove' });
+        }
+    }
+    return changes;
+}
 
 /**
  * Test whether an object is useable as a Node
@@ -663,7 +688,7 @@ function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false)
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Node
  */
-const isNode = (isNodeBase);
+const isNode = (element) => isNodeBase(element);
 /**
  * Test whether an object is useable as an Edge
  * @public
@@ -671,50 +696,7 @@ const isNode = (isNodeBase);
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Edge
  */
-const isEdge = (isEdgeBase);
-/**
- * Pass in a node, and get connected nodes where edge.source === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the source is the given node
- */
-const getOutgoers = (getOutgoersBase);
-/**
- * Pass in a node, and get connected nodes where edge.target === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the target is the given node
- */
-const getIncomers = (getIncomersBase);
-/**
- * This util is a convenience function to add a new Edge to an array of edges
- * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
- * @public
- * @param edgeParams - Either an Edge or a Connection you want to add
- * @param edges -  The array of all current edges
- * @returns A new array of edges with the new edge added
- */
-const addEdge = (addEdgeBase);
-/**
- * A handy utility to update an existing Edge with new properties
- * @param oldEdge - The edge you want to update
- * @param newConnection - The new connection you want to update the edge with
- * @param edges - The array of all current edges
- * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
- * @returns the updated edges array
- */
-const updateEdge = (updateEdgeBase);
-/**
- * Get all connecting edges for a given set of nodes
- * @param nodes - Nodes you want to get the connected edges for
- * @param edges - All edges
- * @returns Array of edges that connect any of the given nodes with each other
- */
-const getConnectedEdges = (getConnectedEdgesBase);
+const isEdge = (element) => isEdgeBase(element);
 
 /**
  * Hook for accessing the ReactFlow instance.
@@ -739,31 +721,50 @@ function useReactFlow() {
         const { edges = [] } = store.getState();
         return edges.find((e) => e.id === id);
     }, []);
+    // this is used to handle multiple syncronous setNodes calls
+    const setNodesData = useRef();
+    const setNodesTimeout = useRef();
     const setNodes = useCallback((payload) => {
-        const { nodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
-        const nextNodes = typeof payload === 'function' ? payload(nodes) : payload;
-        if (hasDefaultNodes) {
-            setNodes(nextNodes);
-        }
-        else if (onNodesChange) {
-            const changes = nextNodes.length === 0
-                ? nodes.map((node) => ({ type: 'remove', id: node.id }))
-                : nextNodes.map((node) => ({ item: node, type: 'reset' }));
-            onNodesChange(changes);
-        }
+        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
+        const nextNodes = typeof payload === 'function' ? payload(setNodesData.current || nodes) : payload;
+        setNodesData.current = nextNodes;
+        if (setNodesTimeout.current) {
+            clearTimeout(setNodesTimeout.current);
+        }
+        // if there are multiple synchronous setNodes calls, we only want to call onNodesChange once
+        // for this, we use a timeout to wait for the last call and store updated nodes in setNodesData
+        // this is not perfect, but should work in most cases
+        setNodesTimeout.current = setTimeout(() => {
+            if (hasDefaultNodes) {
+                setNodes(nextNodes);
+            }
+            else if (onNodesChange) {
+                const changes = getElementsDiffChanges({ items: setNodesData.current, lookup: nodeLookup });
+                onNodesChange(changes);
+            }
+            setNodesData.current = undefined;
+        }, 0);
     }, []);
+    // this is used to handle multiple syncronous setEdges calls
+    const setEdgesData = useRef();
+    const setEdgesTimeout = useRef();
     const setEdges = useCallback((payload) => {
-        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
-        const nextEdges = typeof payload === 'function' ? payload(edges) : payload;
-        if (hasDefaultEdges) {
-            setEdges(nextEdges);
-        }
-        else if (onEdgesChange) {
-            const changes = nextEdges.length === 0
-                ? edges.map((edge) => ({ type: 'remove', id: edge.id }))
-                : nextEdges.map((edge) => ({ item: edge, type: 'reset' }));
-            onEdgesChange(changes);
+        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
+        const nextEdges = typeof payload === 'function' ? payload(setEdgesData.current || edges) : payload;
+        setEdgesData.current = nextEdges;
+        if (setEdgesTimeout.current) {
+            clearTimeout(setEdgesTimeout.current);
         }
+        setEdgesTimeout.current = setTimeout(() => {
+            if (hasDefaultEdges) {
+                setEdges(nextEdges);
+            }
+            else if (onEdgesChange) {
+                const changes = getElementsDiffChanges({ items: nextEdges, lookup: edgeLookup });
+                onEdgesChange(changes);
+            }
+            setEdgesData.current = undefined;
+        }, 0);
     }, []);
     const addNodes = useCallback((payload) => {
         const nodes = Array.isArray(payload) ? payload : [payload];
@@ -801,8 +802,8 @@ function useReactFlow() {
             },
         };
     }, []);
-    const deleteElements = useCallback(async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [], onBeforeDelete }) => {
-        const { nodes, edges, hasDefaultNodes, hasDefaultEdges, onNodesDelete, onEdgesDelete, onNodesChange, onEdgesChange, onDelete, } = store.getState();
+    const deleteElements = useCallback(async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
+        const { nodes, edges, hasDefaultNodes, hasDefaultEdges, onNodesDelete, onEdgesDelete, onNodesChange, onEdgesChange, onDelete, onBeforeDelete, } = store.getState();
         const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
             nodesToRemove,
             edgesToRemove,
@@ -814,9 +815,8 @@ function useReactFlow() {
         const hasMatchingNodes = matchingNodes.length > 0;
         if (hasMatchingEdges) {
             if (hasDefaultEdges) {
-                store.setState({
-                    edges: edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id)),
-                });
+                const nextEdges = edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id));
+                store.getState().setEdges(nextEdges);
             }
             onEdgesDelete?.(matchingEdges);
             onEdgesChange?.(matchingEdges.map((edge) => ({
@@ -826,9 +826,8 @@ function useReactFlow() {
         }
         if (hasMatchingNodes) {
             if (hasDefaultNodes) {
-                store.setState({
-                    nodes: nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id)),
-                });
+                const nextNodes = nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id));
+                store.getState().setNodes(nextNodes);
             }
             onNodesDelete?.(matchingNodes);
             onNodesChange?.(matchingNodes.map((node) => ({ id: node.id, type: 'remove' })));
@@ -841,6 +840,9 @@ function useReactFlow() {
     const getNodeRect = useCallback((nodeOrRect) => {
         const isRect = isRectObject(nodeOrRect);
         const node = isRect ? null : store.getState().nodeLookup.get(nodeOrRect.id);
+        if (!isRect && !node) {
+            return [null, null, isRect];
+        }
         const nodeRect = isRect ? nodeOrRect : nodeToRect(node);
         return [nodeRect, node, isRect];
     }, []);
@@ -934,8 +936,8 @@ function useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode, }) {
     const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
     useEffect(() => {
         if (deleteKeyPressed) {
-            const { edges, nodes, onBeforeDelete } = store.getState();
-            deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected), onBeforeDelete });
+            const { edges, nodes } = store.getState();
+            deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected) });
             store.setState({ nodesSelectionActive: false });
         }
     }, [deleteKeyPressed]);
@@ -1345,9 +1347,9 @@ const useNodeId = () => {
 };
 
 const selector$i = (s) => ({
-    connectionStartHandle: s.connectionStartHandle,
     connectOnClick: s.connectOnClick,
     noPanClassName: s.noPanClassName,
+    rfId: s.rfId,
 });
 const connectingSelector = (nodeId, handleId, type) => (state) => {
     const { connectionStartHandle: startHandle, connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, } = state;
@@ -1362,7 +1364,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
     const isTarget = type === 'target';
     const store = useStoreApi();
     const nodeId = useNodeId();
-    const { connectOnClick, noPanClassName } = useStore(selector$i, shallow);
+    const { connectOnClick, noPanClassName, rfId } = useStore(selector$i, shallow);
     const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type), shallow);
     if (!nodeId) {
         store.getState().onError?.('010', errorMessages['error010']());
@@ -1398,6 +1400,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
                 isTarget,
                 handleId,
                 nodeId,
+                flowId: currentStore.rfId,
                 panBy: currentStore.panBy,
                 cancelConnection: currentStore.cancelConnection,
                 onConnectStart: currentStore.onConnectStart,
@@ -1416,7 +1419,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
         }
     };
     const onClick = (event) => {
-        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, } = store.getState();
+        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, rfId: flowId, } = store.getState();
         if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) {
             return;
         }
@@ -1438,6 +1441,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
             fromHandleId: connectionClickStartHandle.handleId || null,
             fromType: connectionClickStartHandle.type,
             isValidConnection: isValidConnectionHandler,
+            flowId,
             doc,
             lib,
         });
@@ -1447,7 +1451,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
         onClickConnectEnd?.(event);
         store.setState({ connectionClickStartHandle: null });
     };
-    return (jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${nodeId}-${handleId}-${type}`, className: cc([
+    return (jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${rfId}-${nodeId}-${handleId}-${type}`, className: cc([
             'react-flow__handle',
             `react-flow__handle-${position}`,
             'nodrag',
@@ -2095,7 +2099,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
         if (event.button !== 0) {
             return;
         }
-        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodes, panBy, updateConnection, } = store.getState();
+        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodes, rfId: flowId, panBy, updateConnection, } = store.getState();
         const nodeId = isSourceHandle ? edge.target : edge.source;
         const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
         const handleType = isSourceHandle ? 'target' : 'source';
@@ -2118,6 +2122,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
             isTarget,
             edgeUpdaterType: handleType,
             lib,
+            flowId,
             cancelConnection,
             panBy,
             isValidConnection,
@@ -3120,7 +3125,7 @@ const selector$3 = (s) => ({
     minZoomReached: s.transform[2] <= s.minZoom,
     maxZoomReached: s.transform[2] >= s.maxZoom,
 });
-function ControlsComponent({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', }) {
+function ControlsComponent({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', 'aria-label': ariaLabel = 'React Flow controls', }) {
     const store = useStoreApi();
     const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector$3, shallow);
     const { zoomIn, zoomOut, fitView } = useReactFlow();
@@ -3144,7 +3149,7 @@ function ControlsComponent({ style, showZoom = true, showFitView = true, showInt
         });
         onInteractiveChange?.(!isInteractive);
     };
-    return (jsxs(Panel, { className: cc(['react-flow__controls', className]), position: position, style: style, "data-testid": "rf__controls", children: [showZoom && (jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] })), showFitView && (jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) })), showInteractive && (jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) })), children] }));
+    return (jsxs(Panel, { className: cc(['react-flow__controls', className]), position: position, style: style, "data-testid": "rf__controls", "aria-label": ariaLabel, children: [showZoom && (jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] })), showFitView && (jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) })), showInteractive && (jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) })), children] }));
 }
 ControlsComponent.displayName = 'Controls';
 const Controls = memo(ControlsComponent);
@@ -3456,4 +3461,4 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     return (jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest, "data-id": nodes.reduce((acc, node) => `${acc}${node.id} `, '').trim(), children: children }) }));
 }
 
-export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, addEdge, applyEdgeChanges, applyNodeChanges, getConnectedEdges, getIncomers, getOutgoers, getSimpleBezierPath, handleParentExpand, isEdge, isNode, updateEdge, useConnection, useEdges, useEdgesState, useHandleConnections, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
+export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, handleParentExpand, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };