@xyflow/react 12.0.0-next.9 → 12.0.0

package/dist/esm/index.mjs

@@ -1,9 +1,9 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo, useEffect, useRef, useState, useCallback, useLayoutEffect, forwardRef, memo } from 'react';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, 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, devWarn, 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 { errorMessages, infiniteExtent, isInputDOMNode, getFitViewNodes, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, clampPosition, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, 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, reconnectEdge } from '@xyflow/system';
+import { createContext, useContext, useMemo, useEffect, useRef, useState, forwardRef, useLayoutEffect, useCallback, memo } from 'react';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import { createPortal } from 'react-dom';
@@ -19,6 +19,10 @@ const zustandErrorMessage = errorMessages['error001']();
  * @param selector
  * @param equalityFn
  * @returns The selected state slice
+ *
+ * @example
+ * const nodes = useStore((state: ReactFlowState<MyNodeType>) => state.nodes);
+ *
  */
 function useStore(selector, equalityFn) {
     const store = useContext(StoreContext);
@@ -27,7 +31,7 @@ function useStore(selector, equalityFn) {
     }
     return useStoreWithEqualityFn(store, selector, equalityFn);
 }
-const useStoreApi = () => {
+function useStoreApi() {
     const store = useContext(StoreContext);
     if (store === null) {
         throw new Error(zustandErrorMessage);
@@ -36,9 +40,8 @@ const useStoreApi = () => {
         getState: store.getState,
         setState: store.setState,
         subscribe: store.subscribe,
-        destroy: store.destroy,
     }), [store]);
-};
+}
 
 const style = { display: 'none' };
 const ariaLiveStyle = {
@@ -55,18 +58,18 @@ const ariaLiveStyle = {
 const ARIA_NODE_DESC_KEY = 'react-flow__node-desc';
 const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc';
 const ARIA_LIVE_MESSAGE = 'react-flow__aria-live';
-const selector$q = (s) => s.ariaLiveMessage;
+const selector$p = (s) => s.ariaLiveMessage;
 function AriaLiveMessage({ rfId }) {
-    const ariaLiveMessage = useStore(selector$q);
+    const ariaLiveMessage = useStore(selector$p);
     return (jsx("div", { id: `${ARIA_LIVE_MESSAGE}-${rfId}`, "aria-live": "assertive", "aria-atomic": "true", style: ariaLiveStyle, children: ariaLiveMessage }));
 }
 function A11yDescriptions({ rfId, disableKeyboardA11y }) {
     return (jsxs(Fragment, { children: [jsxs("div", { id: `${ARIA_NODE_DESC_KEY}-${rfId}`, style: style, children: ["Press enter or space to select a node.", !disableKeyboardA11y && 'You can then use the arrow keys to move the node around.', " Press delete to remove it and escape to cancel.", ' '] }), jsx("div", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style: style, children: "Press enter or space to select an edge. You can then press delete to remove it or escape to cancel." }), !disableKeyboardA11y && jsx(AriaLiveMessage, { rfId: rfId })] }));
 }
 
-const selector$p = (s) => (s.userSelectionActive ? 'none' : 'all');
+const selector$o = (s) => (s.userSelectionActive ? 'none' : 'all');
 function Panel({ position = 'top-left', children, className, style, ...rest }) {
-    const pointerEvents = useStore(selector$p);
+    const pointerEvents = useStore(selector$o);
     const positionClasses = `${position}`.split('-');
     return (jsx("div", { className: cc(['react-flow__panel', className, ...positionClasses]), style: { ...style, pointerEvents }, ...rest, children: children }));
 }
@@ -78,10 +81,21 @@ function Attribution({ proOptions, position = 'bottom-right' }) {
     return (jsx(Panel, { position: position, className: "react-flow__attribution", "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev", children: jsx("a", { href: "https://reactflow.dev", target: "_blank", rel: "noopener noreferrer", "aria-label": "React Flow attribution", children: "React Flow" }) }));
 }
 
-const selector$o = (s) => ({
-    selectedNodes: s.nodes.filter((n) => n.selected),
-    selectedEdges: s.edges.filter((e) => e.selected),
-});
+const selector$n = (s) => {
+    const selectedNodes = [];
+    const selectedEdges = [];
+    for (const [, node] of s.nodeLookup) {
+        if (node.selected) {
+            selectedNodes.push(node.internals.userNode);
+        }
+    }
+    for (const [, edge] of s.edgeLookup) {
+        if (edge.selected) {
+            selectedEdges.push(edge);
+        }
+    }
+    return { selectedNodes, selectedEdges };
+};
 const selectId = (obj) => obj.id;
 function areEqual(a, b) {
     return (shallow(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) &&
@@ -89,7 +103,7 @@ function areEqual(a, b) {
 }
 function SelectionListenerInner({ onSelectionChange }) {
     const store = useStoreApi();
-    const { selectedNodes, selectedEdges } = useStore(selector$o, areEqual);
+    const { selectedNodes, selectedEdges } = useStore(selector$n, areEqual);
     useEffect(() => {
         const params = { nodes: selectedNodes, edges: selectedEdges };
         onSelectionChange?.(params);
@@ -129,7 +143,7 @@ const reactFlowFieldsToTrack = [
     'nodesConnectable',
     'nodesFocusable',
     'edgesFocusable',
-    'edgesUpdatable',
+    'edgesReconnectable',
     'elevateNodesOnSelect',
     'elevateEdgesOnSelect',
     'minZoom',
@@ -168,10 +182,13 @@ const reactFlowFieldsToTrack = [
     'selectNodesOnDrag',
     'nodeDragThreshold',
     'onBeforeDelete',
+    'debug',
+    'autoPanSpeed',
+    'paneClickDistance',
 ];
 // rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
 const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'];
-const selector$n = (s) => ({
+const selector$m = (s) => ({
     setNodes: s.setNodes,
     setEdges: s.setEdges,
     setMinZoom: s.setMinZoom,
@@ -180,6 +197,7 @@ const selector$n = (s) => ({
     setNodeExtent: s.setNodeExtent,
     reset: s.reset,
     setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
+    setPaneClickDistance: s.setPaneClickDistance,
 });
 const initPrevValues = {
     // these are values that are also passed directly to other components
@@ -192,9 +210,10 @@ const initPrevValues = {
     elementsSelectable: true,
     noPanClassName: 'nopan',
     rfId: '1',
+    paneClickDistance: 0,
 };
 function StoreUpdater(props) {
-    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$n, shallow);
+    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance, } = useStore(selector$m, shallow);
     const store = useStoreApi();
     useEffect(() => {
         setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
@@ -226,6 +245,8 @@ function StoreUpdater(props) {
                 setTranslateExtent(fieldValue);
             else if (fieldName === 'nodeExtent')
                 setNodeExtent(fieldValue);
+            else if (fieldName === 'paneClickDistance')
+                setPaneClickDistance(fieldValue);
             // Renamed fields
             else if (fieldName === 'fitView')
                 store.setState({ fitViewOnInit: fieldValue });
@@ -351,10 +372,12 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
             target?.addEventListener('keydown', downHandler);
             target?.addEventListener('keyup', upHandler);
             window.addEventListener('blur', resetHandler);
+            window.addEventListener('contextmenu', resetHandler);
             return () => {
                 target?.removeEventListener('keydown', downHandler);
                 target?.removeEventListener('keyup', upHandler);
                 window.removeEventListener('blur', resetHandler);
+                window.removeEventListener('contextmenu', resetHandler);
             };
         }
     }, [keyCode, setKeyPressed]);
@@ -375,7 +398,6 @@ function useKeyOrCode(eventCode, keysToWatch) {
     return keysToWatch.includes(eventCode) ? 'code' : 'key';
 }
 
-const selector$m = (s) => !!s.panZoom;
 /**
  * Hook for getting viewport helper functions.
  *
@@ -384,54 +406,74 @@ const selector$m = (s) => !!s.panZoom;
  */
 const useViewportHelper = () => {
     const store = useStoreApi();
-    const panZoomInitialized = useStore(selector$m);
-    const viewportHelperFunctions = useMemo(() => {
+    return useMemo(() => {
         return {
-            zoomIn: (options) => store.getState().panZoom?.scaleBy(1.2, { duration: options?.duration }),
-            zoomOut: (options) => store.getState().panZoom?.scaleBy(1 / 1.2, { duration: options?.duration }),
-            zoomTo: (zoomLevel, options) => store.getState().panZoom?.scaleTo(zoomLevel, { duration: options?.duration }),
+            zoomIn: (options) => {
+                const { panZoom } = store.getState();
+                return panZoom ? panZoom.scaleBy(1.2, { duration: options?.duration }) : Promise.resolve(false);
+            },
+            zoomOut: (options) => {
+                const { panZoom } = store.getState();
+                return panZoom ? panZoom.scaleBy(1 / 1.2, { duration: options?.duration }) : Promise.resolve(false);
+            },
+            zoomTo: (zoomLevel, options) => {
+                const { panZoom } = store.getState();
+                return panZoom ? panZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(false);
+            },
             getZoom: () => store.getState().transform[2],
-            setViewport: (viewport, options) => {
+            setViewport: async (viewport, options) => {
                 const { transform: [tX, tY, tZoom], panZoom, } = store.getState();
-                panZoom?.setViewport({
+                if (!panZoom) {
+                    return Promise.resolve(false);
+                }
+                await panZoom.setViewport({
                     x: viewport.x ?? tX,
                     y: viewport.y ?? tY,
                     zoom: viewport.zoom ?? tZoom,
                 }, { duration: options?.duration });
+                return Promise.resolve(true);
             },
             getViewport: () => {
                 const [x, y, zoom] = store.getState().transform;
                 return { x, y, zoom };
             },
             fitView: (options) => {
-                const { nodes, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
+                const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState();
+                const fitViewNodes = getFitViewNodes(nodeLookup, options);
                 return panZoom
                     ? fitView({
-                        nodes,
+                        nodes: fitViewNodes,
                         width,
                         height,
-                        nodeOrigin,
                         minZoom,
                         maxZoom,
                         panZoom,
                     }, options)
-                    : false;
+                    : Promise.resolve(false);
             },
-            setCenter: (x, y, options) => {
+            setCenter: async (x, y, options) => {
                 const { width, height, maxZoom, panZoom } = store.getState();
                 const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;
                 const centerX = width / 2 - x * nextZoom;
                 const centerY = height / 2 - y * nextZoom;
-                panZoom?.setViewport({
+                if (!panZoom) {
+                    return Promise.resolve(false);
+                }
+                await panZoom.setViewport({
                     x: centerX,
                     y: centerY,
                     zoom: nextZoom,
                 }, { duration: options?.duration });
+                return Promise.resolve(true);
             },
-            fitBounds: (bounds, options) => {
+            fitBounds: async (bounds, options) => {
                 const { width, height, minZoom, maxZoom, panZoom } = store.getState();
                 const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
-                panZoom?.setViewport(viewport, { duration: options?.duration });
+                if (!panZoom) {
+                    return Promise.resolve(false);
+                }
+                await panZoom.setViewport(viewport, { duration: options?.duration });
+                return Promise.resolve(true);
             },
             screenToFlowPosition: (clientPosition, options = { snapToGrid: true }) => {
                 const { transform, snapGrid, domNode } = store.getState();
@@ -457,48 +499,10 @@ const useViewportHelper = () => {
                     y: rendererPosition.y + domY,
                 };
             },
-            viewportInitialized: panZoomInitialized,
         };
-    }, [panZoomInitialized]);
-    return viewportHelperFunctions;
+    }, []);
 };
 
-function handleParentExpand(updatedElements, updateItem) {
-    for (const [index, item] of updatedElements.entries()) {
-        if (item.id === updateItem.parentNode) {
-            const parent = { ...item };
-            parent.computed ??= {};
-            const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
-            const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
-            if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
-                parent.width = parent.width ?? parent.computed.width;
-                parent.height = parent.height ?? parent.computed.height;
-                if (extendWidth > 0) {
-                    parent.width += extendWidth;
-                }
-                if (extendHeight > 0) {
-                    parent.height += extendHeight;
-                }
-                if (updateItem.position.x < 0) {
-                    const xDiff = Math.abs(updateItem.position.x);
-                    parent.position.x = parent.position.x - xDiff;
-                    parent.width += xDiff;
-                    updateItem.position.x = 0;
-                }
-                if (updateItem.position.y < 0) {
-                    const yDiff = Math.abs(updateItem.position.y);
-                    parent.position.y = parent.position.y - yDiff;
-                    parent.height += yDiff;
-                    updateItem.position.y = 0;
-                }
-                parent.computed.width = parent.width;
-                parent.computed.height = parent.height;
-                updatedElements[index] = parent;
-            }
-            break;
-        }
-    }
-}
 // This function applies changes to nodes or edges that are triggered by React Flow internally.
 // 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.
@@ -550,14 +554,14 @@ function applyChanges(changes, elements) {
         /// each _mutate_ this object, so there's only ever one copy.
         const updatedElement = { ...element };
         for (const change of changes) {
-            applyChange(change, updatedElement, updatedElements);
+            applyChange(change, updatedElement);
         }
         updatedElements.push(updatedElement);
     }
     return updatedElements;
 }
 // Applies a single change to an element. This is a *mutable* update.
-function applyChange(change, element, elements = []) {
+function applyChange(change, element) {
     switch (change.type) {
         case 'select': {
             element.selected = change.selected;
@@ -567,24 +571,17 @@ function applyChange(change, element, elements = []) {
             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.measured ??= {};
+                element.measured.width = change.dimensions.width;
+                element.measured.height = change.dimensions.height;
+                if (change.setAttributes) {
                     element.width = change.dimensions.width;
                     element.height = change.dimensions.height;
                 }
@@ -592,9 +589,6 @@ function applyChange(change, element, elements = []) {
             if (typeof change.resizing === 'boolean') {
                 element.resizing = change.resizing;
             }
-            if (element.expandParent) {
-                handleParentExpand(elements, element);
-            }
             break;
         }
     }
@@ -654,8 +648,8 @@ function createSelectionChange(id, selected) {
 }
 function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false) {
     const changes = [];
-    for (const item of items) {
-        const willBeSelected = selectedIds.has(item.id);
+    for (const [id, item] of items) {
+        const willBeSelected = selectedIds.has(id);
         // we don't want to set all items to selected=false on the first selection
         if (!(item.selected === undefined && !willBeSelected) && item.selected !== willBeSelected) {
             if (mutateItem) {
@@ -673,7 +667,8 @@ 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);
+        const lookupItem = lookup.get(item.id);
+        const storeItem = lookupItem?.internals?.userNode ?? lookupItem;
         if (storeItem !== undefined && storeItem !== item) {
             changes.push({ id: item.id, item: item, type: 'replace' });
         }
@@ -689,6 +684,12 @@ function getElementsDiffChanges({ items = [], lookup, }) {
     }
     return changes;
 }
+function elementToRemoveChange(item) {
+    return {
+        id: item.id,
+        type: 'remove',
+    };
+}
 
 /**
  * Test whether an object is useable as a Node
@@ -706,246 +707,293 @@ const isNode = (element) => isNodeBase(element);
  * @returns A boolean indicating whether the element is an Edge
  */
 const isEdge = (element) => isEdgeBase(element);
+// eslint-disable-next-line @typescript-eslint/ban-types
+function fixedForwardRef(render) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return forwardRef(render);
+}
+
+// we need this hook to prevent a warning when using react-flow in SSR
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 /**
- * Hook for accessing the ReactFlow instance.
+ * This hook returns a queue that can be used to batch updates.
  *
- * @public
- * @returns ReactFlowInstance
+ * @param runQueue - a function that gets called when the queue is flushed
+ * @internal
+ *
+ * @returns a Queue object
  */
-function useReactFlow() {
-    const viewportHelper = useViewportHelper();
-    const store = useStoreApi();
-    const getNodes = useCallback(() => {
-        return store.getState().nodes.map((n) => ({ ...n }));
-    }, []);
-    const getNode = useCallback((id) => {
-        return store.getState().nodeLookup.get(id);
-    }, []);
-    const getEdges = useCallback(() => {
-        const { edges = [] } = store.getState();
-        return edges.map((e) => ({ ...e }));
-    }, []);
-    const getEdge = useCallback((id) => {
-        const { edges = [] } = store.getState();
-        return edges.find((e) => e.id === id);
-    }, []);
-    // A reference of all the batched updates to process before the next render. We
-    // want a mutable reference here so multiple synchronous calls to `setNodes` etc
-    // can be batched together.
-    const setElementsQueue = useRef({ nodes: [], edges: [] });
+function useQueue(runQueue) {
     // Because we're using a ref above, we need some way to let React know when to
     // actually process the queue. We flip this bit of state to `true` any time we
     // mutate the queue and then flip it back to `false` after flushing the queue.
-    const [shouldFlushQueue, setShouldFlushQueue] = useState(false);
+    const [shouldFlush, setShouldFlush] = useState(false);
+    // A reference of all the batched updates to process before the next render. We
+    // want a reference here so multiple synchronous calls to `setNodes` etc can be
+    // batched together.
+    const [queue] = useState(() => createQueue(() => setShouldFlush(true)));
     // Layout effects are guaranteed to run before the next render which means we
     // shouldn't run into any issues with stale state or weird issues that come from
     // rendering things one frame later than expected (we used to use `setTimeout`).
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         // Because we need to flip the state back to false after flushing, this should
         // trigger the hook again (!). If the hook is being run again we know that any
         // updates should have been processed by now and we can safely clear the queue
         // and bail early.
-        if (!shouldFlushQueue) {
-            setElementsQueue.current = { nodes: [], edges: [] };
+        if (!shouldFlush) {
+            queue.reset();
             return;
         }
-        if (setElementsQueue.current.nodes.length) {
-            const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
-            // This is essentially an `Array.reduce` in imperative clothing. Processing
-            // this queue is a relatively hot path so we'd like to avoid the overhead of
-            // array methods where we can.
-            let next = nodes;
-            for (const payload of setElementsQueue.current.nodes) {
-                next = typeof payload === 'function' ? payload(next) : payload;
-            }
-            if (hasDefaultNodes) {
-                setNodes(next);
-            }
-            else if (onNodesChange) {
-                onNodesChange(getElementsDiffChanges({
-                    items: next,
-                    lookup: nodeLookup,
-                }));
-            }
-            setElementsQueue.current.nodes = [];
-        }
-        if (setElementsQueue.current.edges.length) {
-            const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
-            let next = edges;
-            for (const payload of setElementsQueue.current.edges) {
-                next = typeof payload === 'function' ? payload(next) : payload;
-            }
-            if (hasDefaultEdges) {
-                setEdges(next);
-            }
-            else if (onEdgesChange) {
-                onEdgesChange(getElementsDiffChanges({
-                    items: next,
-                    lookup: edgeLookup,
-                }));
-            }
-            setElementsQueue.current.edges = [];
+        const queueItems = queue.get();
+        if (queueItems.length) {
+            runQueue(queueItems);
+            queue.reset();
         }
         // Beacuse we're using reactive state to trigger this effect, we need to flip
         // it back to false.
-        setShouldFlushQueue(false);
-    }, [shouldFlushQueue]);
-    const setNodes = useCallback((payload) => {
-        setElementsQueue.current.nodes.push(payload);
-        setShouldFlushQueue(true);
-    }, []);
-    const setEdges = useCallback((payload) => {
-        setElementsQueue.current.edges.push(payload);
-        setShouldFlushQueue(true);
-    }, []);
-    const addNodes = useCallback((payload) => {
-        const newNodes = Array.isArray(payload) ? payload : [payload];
-        // Queueing a functional update means that we won't worry about other calls
-        // to `setNodes` that might happen elsewhere.
-        setElementsQueue.current.nodes.push((nodes) => [...nodes, ...newNodes]);
-        setShouldFlushQueue(true);
-    }, []);
-    const addEdges = useCallback((payload) => {
-        const newEdges = Array.isArray(payload) ? payload : [payload];
-        setElementsQueue.current.edges.push((edges) => [...edges, ...newEdges]);
-        setShouldFlushQueue(true);
-    }, []);
-    const toObject = useCallback(() => {
-        const { nodes = [], edges = [], transform } = store.getState();
-        const [x, y, zoom] = transform;
-        return {
-            nodes: nodes.map((n) => ({ ...n })),
-            edges: edges.map((e) => ({ ...e })),
-            viewport: {
-                x,
-                y,
-                zoom,
-            },
-        };
-    }, []);
-    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,
-            nodes,
-            edges,
-            onBeforeDelete,
-        });
-        const hasMatchingEdges = matchingEdges.length > 0;
-        const hasMatchingNodes = matchingNodes.length > 0;
-        if (hasMatchingEdges) {
-            if (hasDefaultEdges) {
-                const nextEdges = edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id));
-                store.getState().setEdges(nextEdges);
-            }
-            onEdgesDelete?.(matchingEdges);
-            onEdgesChange?.(matchingEdges.map((edge) => ({
-                id: edge.id,
-                type: 'remove',
-            })));
-        }
-        if (hasMatchingNodes) {
-            if (hasDefaultNodes) {
-                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' })));
-        }
-        if (hasMatchingNodes || hasMatchingEdges) {
-            onDelete?.({ nodes: matchingNodes, edges: matchingEdges });
+        setShouldFlush(false);
+    }, [shouldFlush]);
+    return queue;
+}
+function createQueue(cb) {
+    let queue = [];
+    return {
+        get: () => queue,
+        reset: () => {
+            queue = [];
+        },
+        push: (item) => {
+            queue.push(item);
+            cb();
+        },
+    };
+}
+
+const BatchContext = createContext(null);
+/**
+ * This is a context provider that holds and processes the node and edge update queues
+ * that are needed to handle setNodes, addNodes, setEdges and addEdges.
+ *
+ * @internal
+ */
+function BatchProvider({ children, }) {
+    const store = useStoreApi();
+    const nodeQueueHandler = useCallback((queueItems) => {
+        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
+        // This is essentially an `Array.reduce` in imperative clothing. Processing
+        // this queue is a relatively hot path so we'd like to avoid the overhead of
+        // array methods where we can.
+        let next = nodes;
+        for (const payload of queueItems) {
+            next = typeof payload === 'function' ? payload(next) : payload;
+        }
+        if (hasDefaultNodes) {
+            setNodes(next);
+        }
+        else if (onNodesChange) {
+            onNodesChange(getElementsDiffChanges({
+                items: next,
+                lookup: nodeLookup,
+            }));
         }
-        return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
-    }, []);
-    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];
     }, []);
-    const getIntersectingNodes = useCallback((nodeOrRect, partially = true, nodes) => {
-        const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
-        if (!nodeRect) {
-            return [];
+    const nodeQueue = useQueue(nodeQueueHandler);
+    const edgeQueueHandler = useCallback((queueItems) => {
+        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
+        let next = edges;
+        for (const payload of queueItems) {
+            next = typeof payload === 'function' ? payload(next) : payload;
         }
-        return (nodes || store.getState().nodes).filter((n) => {
-            if (!isRect && (n.id === node.id || !n.computed?.positionAbsolute)) {
-                return false;
-            }
-            const currNodeRect = nodeToRect(n);
-            const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
-            const partiallyVisible = partially && overlappingArea > 0;
-            return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
-        });
-    }, []);
-    const isNodeIntersecting = useCallback((nodeOrRect, area, partially = true) => {
-        const [nodeRect] = getNodeRect(nodeOrRect);
-        if (!nodeRect) {
-            return false;
+        if (hasDefaultEdges) {
+            setEdges(next);
+        }
+        else if (onEdgesChange) {
+            onEdgesChange(getElementsDiffChanges({
+                items: next,
+                lookup: edgeLookup,
+            }));
         }
-        const overlappingArea = getOverlappingArea(nodeRect, area);
-        const partiallyVisible = partially && overlappingArea > 0;
-        return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
     }, []);
-    const updateNode = useCallback((id, nodeUpdate, options = { replace: true }) => {
-        setNodes((prevNodes) => prevNodes.map((node) => {
-            if (node.id === id) {
-                const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node) : nodeUpdate;
-                return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
-            }
-            return node;
-        }));
-    }, [setNodes]);
-    const updateNodeData = useCallback((id, dataUpdate, options = { replace: false }) => {
-        updateNode(id, (node) => {
-            const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
-            return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
-        }, options);
-    }, [updateNode]);
-    return useMemo(() => {
+    const edgeQueue = useQueue(edgeQueueHandler);
+    const value = useMemo(() => ({ nodeQueue, edgeQueue }), []);
+    return jsx(BatchContext.Provider, { value: value, children: children });
+}
+function useBatchContext() {
+    const batchContext = useContext(BatchContext);
+    if (!batchContext) {
+        throw new Error('useBatchContext must be used within a BatchProvider');
+    }
+    return batchContext;
+}
+
+const selector$l = (s) => !!s.panZoom;
+/**
+ * Hook for accessing the ReactFlow instance.
+ *
+ * @public
+ * @returns ReactFlowInstance
+ */
+function useReactFlow() {
+    const viewportHelper = useViewportHelper();
+    const store = useStoreApi();
+    const batchContext = useBatchContext();
+    const viewportInitialized = useStore(selector$l);
+    const generalHelper = useMemo(() => {
+        const getInternalNode = (id) => store.getState().nodeLookup.get(id);
+        const setNodes = (payload) => {
+            batchContext.nodeQueue.push(payload);
+        };
+        const setEdges = (payload) => {
+            batchContext.edgeQueue.push(payload);
+        };
+        const getNodeRect = (node) => {
+            const { nodeLookup, nodeOrigin } = store.getState();
+            const nodeToUse = isNode(node) ? node : nodeLookup.get(node.id);
+            const position = nodeToUse.parentId
+                ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, nodeOrigin)
+                : nodeToUse.position;
+            const nodeWithPosition = {
+                id: nodeToUse.id,
+                position,
+                width: nodeToUse.measured?.width ?? nodeToUse.width,
+                height: nodeToUse.measured?.height ?? nodeToUse.height,
+                data: nodeToUse.data,
+            };
+            return nodeToRect(nodeWithPosition);
+        };
+        const updateNode = (id, nodeUpdate, options = { replace: false }) => {
+            setNodes((prevNodes) => prevNodes.map((node) => {
+                if (node.id === id) {
+                    const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node) : nodeUpdate;
+                    return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
+                }
+                return node;
+            }));
+        };
+        const updateEdge = (id, edgeUpdate, options = { replace: false }) => {
+            setEdges((prevEdges) => prevEdges.map((edge) => {
+                if (edge.id === id) {
+                    const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge) : edgeUpdate;
+                    return options.replace && isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
+                }
+                return edge;
+            }));
+        };
         return {
-            ...viewportHelper,
-            getNodes,
-            getNode,
-            getEdges,
-            getEdge,
+            getNodes: () => store.getState().nodes.map((n) => ({ ...n })),
+            getNode: (id) => getInternalNode(id)?.internals.userNode,
+            getInternalNode,
+            getEdges: () => {
+                const { edges = [] } = store.getState();
+                return edges.map((e) => ({ ...e }));
+            },
+            getEdge: (id) => store.getState().edgeLookup.get(id),
             setNodes,
             setEdges,
-            addNodes,
-            addEdges,
-            toObject,
-            deleteElements,
-            getIntersectingNodes,
-            isNodeIntersecting,
+            addNodes: (payload) => {
+                const newNodes = Array.isArray(payload) ? payload : [payload];
+                batchContext.nodeQueue.push((nodes) => [...nodes, ...newNodes]);
+            },
+            addEdges: (payload) => {
+                const newEdges = Array.isArray(payload) ? payload : [payload];
+                batchContext.edgeQueue.push((edges) => [...edges, ...newEdges]);
+            },
+            toObject: () => {
+                const { nodes = [], edges = [], transform } = store.getState();
+                const [x, y, zoom] = transform;
+                return {
+                    nodes: nodes.map((n) => ({ ...n })),
+                    edges: edges.map((e) => ({ ...e })),
+                    viewport: {
+                        x,
+                        y,
+                        zoom,
+                    },
+                };
+            },
+            deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
+                const { nodes, edges, onNodesDelete, onEdgesDelete, triggerNodeChanges, triggerEdgeChanges, onDelete, onBeforeDelete, } = store.getState();
+                const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
+                    nodesToRemove,
+                    edgesToRemove,
+                    nodes,
+                    edges,
+                    onBeforeDelete,
+                });
+                const hasMatchingEdges = matchingEdges.length > 0;
+                const hasMatchingNodes = matchingNodes.length > 0;
+                if (hasMatchingEdges) {
+                    const edgeChanges = matchingEdges.map(elementToRemoveChange);
+                    onEdgesDelete?.(matchingEdges);
+                    triggerEdgeChanges(edgeChanges);
+                }
+                if (hasMatchingNodes) {
+                    const nodeChanges = matchingNodes.map(elementToRemoveChange);
+                    onNodesDelete?.(matchingNodes);
+                    triggerNodeChanges(nodeChanges);
+                }
+                if (hasMatchingNodes || hasMatchingEdges) {
+                    onDelete?.({ nodes: matchingNodes, edges: matchingEdges });
+                }
+                return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
+            },
+            getIntersectingNodes: (nodeOrRect, partially = true, nodes) => {
+                const isRect = isRectObject(nodeOrRect);
+                const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+                const hasNodesOption = nodes !== undefined;
+                if (!nodeRect) {
+                    return [];
+                }
+                return (nodes || store.getState().nodes).filter((n) => {
+                    const internalNode = store.getState().nodeLookup.get(n.id);
+                    if (internalNode && !isRect && (n.id === nodeOrRect.id || !internalNode.internals.positionAbsolute)) {
+                        return false;
+                    }
+                    const currNodeRect = nodeToRect(hasNodesOption ? n : internalNode);
+                    const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
+                    const partiallyVisible = partially && overlappingArea > 0;
+                    return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
+                });
+            },
+            isNodeIntersecting: (nodeOrRect, area, partially = true) => {
+                const isRect = isRectObject(nodeOrRect);
+                const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+                if (!nodeRect) {
+                    return false;
+                }
+                const overlappingArea = getOverlappingArea(nodeRect, area);
+                const partiallyVisible = partially && overlappingArea > 0;
+                return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
+            },
             updateNode,
-            updateNodeData,
+            updateNodeData: (id, dataUpdate, options = { replace: false }) => {
+                updateNode(id, (node) => {
+                    const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
+                    return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
+                }, options);
+            },
+            updateEdge,
+            updateEdgeData: (id, dataUpdate, options = { replace: false }) => {
+                updateEdge(id, (edge) => {
+                    const nextData = typeof dataUpdate === 'function' ? dataUpdate(edge) : dataUpdate;
+                    return options.replace ? { ...edge, data: nextData } : { ...edge, data: { ...edge.data, ...nextData } };
+                }, options);
+            },
         };
-    }, [
-        viewportHelper,
-        getNodes,
-        getNode,
-        getEdges,
-        getEdge,
-        setNodes,
-        setEdges,
-        addNodes,
-        addEdges,
-        toObject,
-        deleteElements,
-        getIntersectingNodes,
-        isNodeIntersecting,
-        updateNode,
-        updateNodeData,
-    ]);
+    }, []);
+    return useMemo(() => {
+        return {
+            ...generalHelper,
+            ...viewportHelper,
+            viewportInitialized,
+        };
+    }, [viewportInitialized]);
 }
 
 const selected = (item) => item.selected;
 const deleteKeyOptions = { actInsideInputWithModifier: false };
+const win$1 = typeof window !== 'undefined' ? window : undefined;
 /**
  * Hook for handling global key events.
  *
@@ -955,7 +1003,7 @@ function useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode, }) {
     const store = useStoreApi();
     const { deleteElements } = useReactFlow();
     const deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions);
-    const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
+    const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode, { target: win$1 });
     useEffect(() => {
         if (deleteKeyPressed) {
             const { edges, nodes } = store.getState();
@@ -1009,14 +1057,14 @@ const containerStyle = {
     left: 0,
 };
 
-const selector$l = (s) => ({
+const selector$k = (s) => ({
     userSelectionActive: s.userSelectionActive,
     lib: s.lib,
 });
-function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, }) {
+function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, }) {
     const store = useStoreApi();
     const zoomPane = useRef(null);
-    const { userSelectionActive, lib } = useStore(selector$l, shallow);
+    const { userSelectionActive, lib } = useStore(selector$k, shallow);
     const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
     const panZoom = useRef();
     useResizeHandler(zoomPane);
@@ -1028,6 +1076,7 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
                 maxZoom,
                 translateExtent,
                 viewport: defaultViewport,
+                paneClickDistance,
                 onTransformChange: (transform) => {
                     onViewportChange?.({ x: transform[0], y: transform[1], zoom: transform[2] });
                     if (!isControlledViewport) {
@@ -1098,12 +1147,12 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
     return (jsx("div", { className: "react-flow__renderer", ref: zoomPane, style: containerStyle, children: children }));
 }
 
-const selector$k = (s) => ({
+const selector$j = (s) => ({
     userSelectionActive: s.userSelectionActive,
     userSelectionRect: s.userSelectionRect,
 });
 function UserSelection() {
-    const { userSelectionActive, userSelectionRect } = useStore(selector$k, shallow);
+    const { userSelectionActive, userSelectionRect } = useStore(selector$j, shallow);
     const isActive = userSelectionActive && userSelectionRect;
     if (!isActive) {
         return null;
@@ -1123,24 +1172,33 @@ const wrapHandler = (handler, containerRef) => {
         handler?.(event);
     };
 };
-const selector$j = (s) => ({
+const selector$i = (s) => ({
     userSelectionActive: s.userSelectionActive,
     elementsSelectable: s.elementsSelectable,
     dragging: s.paneDragging,
 });
-function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) {
+function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) {
     const container = useRef(null);
     const store = useStoreApi();
     const prevSelectedNodesCount = useRef(0);
     const prevSelectedEdgesCount = useRef(0);
     const containerBounds = useRef();
-    const { userSelectionActive, elementsSelectable, dragging } = useStore(selector$j, shallow);
+    const edgeIdLookup = useRef(new Map());
+    const { userSelectionActive, elementsSelectable, dragging } = useStore(selector$i, shallow);
+    const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
+    // Used to prevent click events when the user lets go of the selectionKey during a selection
+    const selectionInProgress = useRef(false);
     const resetUserSelection = () => {
         store.setState({ userSelectionActive: false, userSelectionRect: null });
         prevSelectedNodesCount.current = 0;
         prevSelectedEdgesCount.current = 0;
     };
     const onClick = (event) => {
+        // We prevent click events when the user let go of the selectionKey during a selection
+        if (selectionInProgress.current) {
+            selectionInProgress.current = false;
+            return;
+        }
         onPaneClick?.(event);
         store.getState().resetSelectedElements();
         store.setState({ nodesSelectionActive: false });
@@ -1153,9 +1211,10 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         onPaneContextMenu?.(event);
     };
     const onWheel = onPaneScroll ? (event) => onPaneScroll(event) : undefined;
-    const onMouseDown = (event) => {
-        const { resetSelectedElements, domNode } = store.getState();
+    const onPointerDown = (event) => {
+        const { resetSelectedElements, domNode, edgeLookup } = store.getState();
         containerBounds.current = domNode?.getBoundingClientRect();
+        container.current?.setPointerCapture(event.pointerId);
         if (!elementsSelectable ||
             !isSelecting ||
             event.button !== 0 ||
@@ -1163,6 +1222,11 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
             !containerBounds.current) {
             return;
         }
+        edgeIdLookup.current = new Map();
+        for (const [id, edge] of edgeLookup) {
+            edgeIdLookup.current.set(edge.source, edgeIdLookup.current.get(edge.source)?.add(id) || new Set([id]));
+            edgeIdLookup.current.set(edge.target, edgeIdLookup.current.get(edge.target)?.add(id) || new Set([id]));
+        }
         const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
         resetSelectedElements();
         store.setState({
@@ -1177,55 +1241,55 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         });
         onSelectionStart?.(event);
     };
-    const onMouseMove = (event) => {
-        const { userSelectionRect, edges, transform, nodeOrigin, nodes, onNodesChange, onEdgesChange } = store.getState();
-        if (!isSelecting || !containerBounds.current || !userSelectionRect) {
+    const onPointerMove = (event) => {
+        const { userSelectionRect, edgeLookup, transform, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = store.getState();
+        if (!containerBounds.current || !userSelectionRect) {
             return;
         }
-        store.setState({ userSelectionActive: true, nodesSelectionActive: false });
-        const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
-        const startX = userSelectionRect.startX ?? 0;
-        const startY = userSelectionRect.startY ?? 0;
+        selectionInProgress.current = true;
+        const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
+        const { startX, startY } = userSelectionRect;
         const nextUserSelectRect = {
-            ...userSelectionRect,
-            x: mousePos.x < startX ? mousePos.x : startX,
-            y: mousePos.y < startY ? mousePos.y : startY,
-            width: Math.abs(mousePos.x - startX),
-            height: Math.abs(mousePos.y - startY),
+            startX,
+            startY,
+            x: mouseX < startX ? mouseX : startX,
+            y: mouseY < startY ? mouseY : startY,
+            width: Math.abs(mouseX - startX),
+            height: Math.abs(mouseY - startY),
         };
-        const selectedNodes = getNodesInside(nodes, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true, nodeOrigin);
+        const selectedNodes = getNodesInside(nodeLookup, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true);
         const selectedEdgeIds = new Set();
         const selectedNodeIds = new Set();
         for (const selectedNode of selectedNodes) {
             selectedNodeIds.add(selectedNode.id);
-            for (const edge of edges) {
-                if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
-                    selectedEdgeIds.add(edge.id);
+            const edgeIds = edgeIdLookup.current.get(selectedNode.id);
+            if (edgeIds) {
+                for (const edgeId of edgeIds) {
+                    selectedEdgeIds.add(edgeId);
                 }
             }
         }
         if (prevSelectedNodesCount.current !== selectedNodeIds.size) {
             prevSelectedNodesCount.current = selectedNodeIds.size;
-            const changes = getSelectionChanges(nodes, selectedNodeIds, true);
-            if (changes.length) {
-                onNodesChange?.(changes);
-            }
+            const changes = getSelectionChanges(nodeLookup, selectedNodeIds, true);
+            triggerNodeChanges(changes);
         }
         if (prevSelectedEdgesCount.current !== selectedEdgeIds.size) {
             prevSelectedEdgesCount.current = selectedEdgeIds.size;
-            const changes = getSelectionChanges(edges, selectedEdgeIds);
-            if (changes.length) {
-                onEdgesChange?.(changes);
-            }
+            const changes = getSelectionChanges(edgeLookup, selectedEdgeIds);
+            triggerEdgeChanges(changes);
         }
         store.setState({
             userSelectionRect: nextUserSelectRect,
+            userSelectionActive: true,
+            nodesSelectionActive: false,
         });
     };
-    const onMouseUp = (event) => {
+    const onPointerUp = (event) => {
         if (event.button !== 0) {
             return;
         }
+        container.current?.releasePointerCapture(event.pointerId);
         const { userSelectionRect } = store.getState();
         // We only want to trigger click functions when in selection mode if
         // the user did not move the mouse.
@@ -1235,16 +1299,13 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
         resetUserSelection();
         onSelectionEnd?.(event);
-    };
-    const onMouseLeave = (event) => {
-        if (userSelectionActive) {
-            store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
-            onSelectionEnd?.(event);
+        // If the user kept holding the selectionKey during the selection,
+        // we need to reset the selectionInProgress, so the next click event is not prevented
+        if (selectionKeyPressed) {
+            selectionInProgress.current = false;
         }
-        resetUserSelection();
     };
-    const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
-    return (jsxs("div", { className: cc(['react-flow__pane', { dragging, selection: isSelecting }]), onClick: hasActiveSelection ? undefined : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onMouseEnter: hasActiveSelection ? undefined : onPaneMouseEnter, onMouseDown: hasActiveSelection ? onMouseDown : undefined, onMouseMove: hasActiveSelection ? onMouseMove : onPaneMouseMove, onMouseUp: hasActiveSelection ? onMouseUp : undefined, onMouseLeave: hasActiveSelection ? onMouseLeave : onPaneMouseLeave, ref: container, style: containerStyle, children: [children, jsx(UserSelection, {})] }));
+    return (jsxs("div", { className: cc(['react-flow__pane', { draggable: panOnDrag, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? undefined : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: hasActiveSelection ? undefined : onPaneMouseEnter, onPointerDown: hasActiveSelection ? onPointerDown : onPaneMouseMove, onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove, onPointerUp: hasActiveSelection ? onPointerUp : undefined, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children, jsx(UserSelection, {})] }));
 }
 
 // this handler is called by
@@ -1278,31 +1339,28 @@ function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, n
     const [dragging, setDragging] = useState(false);
     const xyDrag = useRef();
     useEffect(() => {
-        if (nodeRef?.current) {
-            xyDrag.current = XYDrag({
-                domNode: nodeRef.current,
-                getStoreItems: () => store.getState(),
-                onNodeMouseDown: (id) => {
-                    handleNodeClick({
-                        id,
-                        store,
-                        nodeRef,
-                    });
-                },
-                onDragStart: () => {
-                    setDragging(true);
-                },
-                onDragStop: () => {
-                    setDragging(false);
-                },
-            });
-        }
+        xyDrag.current = XYDrag({
+            getStoreItems: () => store.getState(),
+            onNodeMouseDown: (id) => {
+                handleNodeClick({
+                    id,
+                    store,
+                    nodeRef,
+                });
+            },
+            onDragStart: () => {
+                setDragging(true);
+            },
+            onDragStop: () => {
+                setDragging(false);
+            },
+        });
     }, []);
     useEffect(() => {
         if (disabled) {
             xyDrag.current?.destroy();
         }
-        else {
+        else if (nodeRef.current) {
             xyDrag.current?.update({
                 noDragClassName,
                 handleSelector,
@@ -1328,36 +1386,38 @@ const selectedAndDraggable = (nodesDraggable) => (n) => n.selected && (n.draggab
 function useMoveSelectedNodes() {
     const store = useStoreApi();
     const moveSelectedNodes = useCallback((params) => {
-        const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin, } = store.getState();
-        const selectedNodes = nodes.filter(selectedAndDraggable(nodesDraggable));
+        const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } = store.getState();
+        const nodeUpdates = new Map();
+        const isSelected = selectedAndDraggable(nodesDraggable);
         // by default a node moves 5px on each key press
         // if snap grid is enabled, we use that for the velocity
         const xVelo = snapToGrid ? snapGrid[0] : 5;
         const yVelo = snapToGrid ? snapGrid[1] : 5;
         const xDiff = params.direction.x * xVelo * params.factor;
         const yDiff = params.direction.y * yVelo * params.factor;
-        const nodeUpdates = selectedNodes.map((node) => {
-            if (node.computed?.positionAbsolute) {
-                let nextPosition = {
-                    x: node.computed.positionAbsolute.x + xDiff,
-                    y: node.computed.positionAbsolute.y + yDiff,
-                };
-                if (snapToGrid) {
-                    nextPosition = snapPosition(nextPosition, snapGrid);
-                }
-                const { position, positionAbsolute } = calculateNodePosition({
-                    nodeId: node.id,
-                    nextPosition,
-                    nodeLookup,
-                    nodeExtent,
-                    nodeOrigin,
-                    onError,
-                });
-                node.position = position;
-                node.computed.positionAbsolute = positionAbsolute;
+        for (const [, node] of nodeLookup) {
+            if (!isSelected(node)) {
+                continue;
             }
-            return node;
-        });
+            let nextPosition = {
+                x: node.internals.positionAbsolute.x + xDiff,
+                y: node.internals.positionAbsolute.y + yDiff,
+            };
+            if (snapToGrid) {
+                nextPosition = snapPosition(nextPosition, snapGrid);
+            }
+            const { position, positionAbsolute } = calculateNodePosition({
+                nodeId: node.id,
+                nextPosition,
+                nodeLookup,
+                nodeExtent,
+                nodeOrigin,
+                onError,
+            });
+            node.position = position;
+            node.internals.positionAbsolute = positionAbsolute;
+            nodeUpdates.set(node.id, node);
+        }
         updateNodePositions(nodeUpdates);
     }, []);
     return moveSelectedNodes;
@@ -1371,26 +1431,33 @@ const useNodeId = () => {
     return nodeId;
 };
 
-const selector$i = (s) => ({
+const selector$h = (s) => ({
     connectOnClick: s.connectOnClick,
     noPanClassName: s.noPanClassName,
     rfId: s.rfId,
 });
 const connectingSelector = (nodeId, handleId, type) => (state) => {
-    const { connectionStartHandle: startHandle, connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, } = state;
+    const { connectionClickStartHandle: clickHandle, connectionMode, connection } = state;
+    const { fromHandle, toHandle, isValid } = connection;
+    const connectingTo = toHandle?.nodeId === nodeId && toHandle?.id === handleId && toHandle?.type === type;
     return {
-        connecting: (startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type) ||
-            (endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type),
-        clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type,
+        connectingFrom: fromHandle?.nodeId === nodeId && fromHandle?.id === handleId && fromHandle?.type === type,
+        connectingTo,
+        clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.id === handleId && clickHandle?.type === type,
+        isPossibleEndHandle: connectionMode === ConnectionMode.Strict
+            ? fromHandle?.type !== type
+            : nodeId !== fromHandle?.nodeId || handleId !== fromHandle?.id,
+        connectionInProcess: !!fromHandle,
+        valid: connectingTo && isValid,
     };
 };
-const HandleComponent = forwardRef(({ type = 'source', position = Position.Top, isValidConnection, isConnectable = true, isConnectableStart = true, isConnectableEnd = true, id, onConnect, children, className, onMouseDown, onTouchStart, ...rest }, ref) => {
+function HandleComponent({ type = 'source', position = Position.Top, isValidConnection, isConnectable = true, isConnectableStart = true, isConnectableEnd = true, id, onConnect, children, className, onMouseDown, onTouchStart, ...rest }, ref) {
     const handleId = id || null;
     const isTarget = type === 'target';
     const store = useStoreApi();
     const nodeId = useNodeId();
-    const { connectOnClick, noPanClassName, rfId } = useStore(selector$i, shallow);
-    const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type), shallow);
+    const { connectOnClick, noPanClassName, rfId } = useStore(selector$h, shallow);
+    const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow);
     if (!nodeId) {
         store.getState().onError?.('010', errorMessages['error010']());
     }
@@ -1420,7 +1487,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
                 connectionMode: currentStore.connectionMode,
                 connectionRadius: currentStore.connectionRadius,
                 domNode: currentStore.domNode,
-                nodes: currentStore.nodes,
+                nodeLookup: currentStore.nodeLookup,
                 lib: currentStore.lib,
                 isTarget,
                 handleId,
@@ -1434,6 +1501,8 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
                 onConnect: onConnectExtended,
                 isValidConnection: isValidConnection || currentStore.isValidConnection,
                 getTransform: () => store.getState().transform,
+                getFromHandle: () => store.getState().connection.fromHandle,
+                autoPanSpeed: currentStore.autoPanSpeed,
             });
         }
         if (isMouseTriggered) {
@@ -1450,7 +1519,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
         }
         if (!connectionClickStartHandle) {
             onClickConnectStart?.(event.nativeEvent, { nodeId, handleId, handleType: type });
-            store.setState({ connectionClickStartHandle: { nodeId, type, handleId } });
+            store.setState({ connectionClickStartHandle: { nodeId, type, id: handleId } });
             return;
         }
         const doc = getHostForElement(event.target);
@@ -1463,7 +1532,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
             },
             connectionMode,
             fromNodeId: connectionClickStartHandle.nodeId,
-            fromHandleId: connectionClickStartHandle.handleId || null,
+            fromHandleId: connectionClickStartHandle.id || null,
             fromType: connectionClickStartHandle.type,
             isValidConnection: isValidConnectionHandler,
             flowId,
@@ -1488,17 +1557,22 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
                 connectable: isConnectable,
                 connectablestart: isConnectableStart,
                 connectableend: isConnectableEnd,
-                connecting: clickConnecting,
-                // this class is used to style the handle when the user is connecting
-                connectionindicator: isConnectable && ((isConnectableStart && !connecting) || (isConnectableEnd && connecting)),
+                clickconnecting: clickConnecting,
+                connectingfrom: connectingFrom,
+                connectingto: connectingTo,
+                valid,
+                // shows where you can start a connection from
+                // and where you can end it while connecting
+                connectionindicator: isConnectable &&
+                    (!connectionInProcess || isPossibleEndHandle) &&
+                    (connectionInProcess ? isConnectableEnd : isConnectableStart),
             },
         ]), onMouseDown: onPointerDown, onTouchStart: onPointerDown, onClick: connectOnClick ? onClick : undefined, ref: ref, ...rest, children: children }));
-});
-HandleComponent.displayName = 'Handle';
+}
 /**
- * The Handle component is the part of a node that can be used to connect nodes.
+ * The Handle component is a UI element that is used to connect nodes.
  */
-const Handle = memo(HandleComponent);
+const Handle = memo(fixedForwardRef(HandleComponent));
 
 function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }) {
     return (jsxs(Fragment, { children: [data?.label, jsx(Handle, { type: "source", position: sourcePosition, isConnectable: isConnectable })] }));
@@ -1528,20 +1602,33 @@ const builtinNodeTypes = {
     output: OutputNode,
     group: GroupNode,
 };
+function getNodeInlineStyleDimensions(node) {
+    if (node.internals.handleBounds === undefined) {
+        return {
+            width: node.width ?? node.initialWidth ?? node.style?.width,
+            height: node.height ?? node.initialHeight ?? node.style?.height,
+        };
+    }
+    return {
+        width: node.width ?? node.style?.width,
+        height: node.height ?? node.style?.height,
+    };
+}
 
-const selector$h = (s) => {
-    const selectedNodes = s.nodes.filter((n) => n.selected);
-    const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
+const selector$g = (s) => {
+    const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
+        filter: (node) => !!node.selected,
+    });
     return {
-        width,
-        height,
+        width: isNumeric(width) ? width : null,
+        height: isNumeric(height) ? height : null,
         userSelectionActive: s.userSelectionActive,
         transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]}) translate(${x}px,${y}px)`,
     };
 };
-function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }) {
+function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y, }) {
     const store = useStoreApi();
-    const { width, height, transformString, userSelectionActive } = useStore(selector$h, shallow);
+    const { width, height, transformString, userSelectionActive } = useStore(selector$g, shallow);
     const moveSelectedNodes = useMoveSelectedNodes();
     const nodeRef = useRef(null);
     useEffect(() => {
@@ -1579,25 +1666,26 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
             } }) }));
 }
 
-const selector$g = (s) => {
+const win = typeof window !== 'undefined' ? window : undefined;
+const selector$f = (s) => {
     return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
 };
-const FlowRendererComponent = ({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }) => {
-    const { nodesSelectionActive, userSelectionActive } = useStore(selector$g);
-    const selectionKeyPressed = useKeyPress(selectionKeyCode);
-    const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
+function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }) {
+    const { nodesSelectionActive, userSelectionActive } = useStore(selector$f);
+    const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
+    const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });
     const panOnDrag = panActivationKeyPressed || _panOnDrag;
     const panOnScroll = panActivationKeyPressed || _panOnScroll;
     const isSelecting = selectionKeyPressed || userSelectionActive || (selectionOnDrag && panOnDrag !== true);
     useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
-    return (jsx(ZoomPane, { onPaneContextMenu: onPaneContextMenu, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, zoomOnDoubleClick: zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, zoomActivationKeyCode: zoomActivationKeyCode, preventScrolling: preventScrolling, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, onViewportChange: onViewportChange, isControlledViewport: isControlledViewport, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, children: [children, nodesSelectionActive && (jsx(NodesSelection, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
-};
+    return (jsx(ZoomPane, { onPaneContextMenu: onPaneContextMenu, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, zoomOnDoubleClick: zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, zoomActivationKeyCode: zoomActivationKeyCode, preventScrolling: preventScrolling, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, onViewportChange: onViewportChange, isControlledViewport: isControlledViewport, paneClickDistance: paneClickDistance, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, selectionKeyPressed: selectionKeyPressed, children: [children, nodesSelectionActive && (jsx(NodesSelection, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
+}
 FlowRendererComponent.displayName = 'FlowRenderer';
 const FlowRenderer = memo(FlowRendererComponent);
 
-const selector$f = (onlyRenderVisible) => (s) => {
+const selector$e = (onlyRenderVisible) => (s) => {
     return onlyRenderVisible
-        ? getNodesInside(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map((node) => node.id)
+        ? getNodesInside(s.nodeLookup, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map((node) => node.id)
         : Array.from(s.nodeLookup.keys());
 };
 /**
@@ -1608,55 +1696,97 @@ const selector$f = (onlyRenderVisible) => (s) => {
  * @returns array with visible node ids
  */
 function useVisibleNodeIds(onlyRenderVisible) {
-    const nodeIds = useStore(useCallback(selector$f(onlyRenderVisible), [onlyRenderVisible]), shallow);
+    const nodeIds = useStore(useCallback(selector$e(onlyRenderVisible), [onlyRenderVisible]), shallow);
     return nodeIds;
 }
 
-const selector$e = (s) => s.updateNodeDimensions;
+const selector$d = (s) => s.updateNodeInternals;
 function useResizeObserver() {
-    const updateNodeDimensions = useStore(selector$e);
-    const resizeObserverRef = useRef();
-    const resizeObserver = useMemo(() => {
+    const updateNodeInternals = useStore(selector$d);
+    const [resizeObserver] = useState(() => {
         if (typeof ResizeObserver === 'undefined') {
             return null;
         }
-        const observer = new ResizeObserver((entries) => {
+        return new ResizeObserver((entries) => {
             const updates = new Map();
             entries.forEach((entry) => {
                 const id = entry.target.getAttribute('data-id');
                 updates.set(id, {
                     id,
                     nodeElement: entry.target,
-                    forceUpdate: true,
+                    force: true,
                 });
             });
-            updateNodeDimensions(updates);
+            updateNodeInternals(updates);
         });
-        resizeObserverRef.current = observer;
-        return observer;
-    }, []);
+    });
     useEffect(() => {
         return () => {
-            resizeObserverRef?.current?.disconnect();
+            resizeObserver?.disconnect();
         };
-    }, []);
+    }, [resizeObserver]);
     return resizeObserver;
 }
 
-function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeExtent, nodeOrigin, onError, }) {
-    const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
+/**
+ * Hook to handle the resize observation + internal updates for the passed node.
+ *
+ * @internal
+ * @returns nodeRef - reference to the node element
+ */
+function useNodeObserver({ node, nodeType, hasDimensions, resizeObserver, }) {
+    const store = useStoreApi();
+    const nodeRef = useRef(null);
+    const observedNode = useRef(null);
+    const prevSourcePosition = useRef(node.sourcePosition);
+    const prevTargetPosition = useRef(node.targetPosition);
+    const prevType = useRef(nodeType);
+    const isInitialized = hasDimensions && !!node.internals.handleBounds;
+    useEffect(() => {
+        if (nodeRef.current && !node.hidden && (!isInitialized || observedNode.current !== nodeRef.current)) {
+            if (observedNode.current) {
+                resizeObserver?.unobserve(observedNode.current);
+            }
+            resizeObserver?.observe(nodeRef.current);
+            observedNode.current = nodeRef.current;
+        }
+    }, [isInitialized, node.hidden]);
+    useEffect(() => {
+        return () => {
+            if (observedNode.current) {
+                resizeObserver?.unobserve(observedNode.current);
+                observedNode.current = null;
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (nodeRef.current) {
+            // when the user programmatically changes the source or handle position, we need to update the internals
+            // to make sure the edges are updated correctly
+            const typeChanged = prevType.current !== nodeType;
+            const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
+            const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
+            if (typeChanged || sourcePosChanged || targetPosChanged) {
+                prevType.current = nodeType;
+                prevSourcePosition.current = node.sourcePosition;
+                prevTargetPosition.current = node.targetPosition;
+                store
+                    .getState()
+                    .updateNodeInternals(new Map([[node.id, { id: node.id, nodeElement: nodeRef.current, force: true }]]));
+            }
+        }
+    }, [node.id, nodeType, node.sourcePosition, node.targetPosition]);
+    return nodeRef;
+}
+
+function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeExtent, onError, }) {
+    const { node, internals, isParent } = useStore((s) => {
         const node = s.nodeLookup.get(id);
-        const positionAbsolute = nodeExtent
-            ? clampPosition(node.computed?.positionAbsolute, nodeExtent)
-            : node.computed?.positionAbsolute || { x: 0, y: 0 };
+        const isParent = s.parentLookup.has(id);
         return {
             node,
-            // we are mutating positionAbsolute, z and isParent attributes for sub flows
-            // so we we need to force a re-render when some change
-            positionAbsoluteX: positionAbsolute.x,
-            positionAbsoluteY: positionAbsolute.y,
-            zIndex: node[internalsSymbol]?.z ?? 0,
-            isParent: !!node[internalsSymbol]?.isParent,
+            internals: node.internals,
+            isParent,
         };
     }, shallow);
     let nodeType = node.type || 'default';
@@ -1671,51 +1801,8 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
     const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
     const store = useStoreApi();
-    const nodeRef = useRef(null);
-    const prevSourcePosition = useRef(node.sourcePosition);
-    const prevTargetPosition = useRef(node.targetPosition);
-    const prevType = useRef(nodeType);
-    const width = node.width ?? undefined;
-    const height = node.height ?? undefined;
-    const computedWidth = node.computed?.width;
-    const computedHeight = node.computed?.height;
-    const initialized = (!!computedWidth && !!computedHeight) || (!!width && !!height);
-    const hasHandleBounds = !!node[internalsSymbol]?.handleBounds;
-    const moveSelectedNodes = useMoveSelectedNodes();
-    useEffect(() => {
-        return () => {
-            if (nodeRef.current) {
-                resizeObserver?.unobserve(nodeRef.current);
-            }
-        };
-    }, []);
-    useEffect(() => {
-        if (nodeRef.current && !node.hidden) {
-            const currNode = nodeRef.current;
-            if (!initialized || !hasHandleBounds) {
-                resizeObserver?.unobserve(currNode);
-                resizeObserver?.observe(currNode);
-            }
-        }
-    }, [node.hidden, initialized, hasHandleBounds]);
-    useEffect(() => {
-        // when the user programmatically changes the source or handle position, we re-initialize the node
-        const typeChanged = prevType.current !== nodeType;
-        const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
-        const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
-        if (nodeRef.current && (typeChanged || sourcePosChanged || targetPosChanged)) {
-            if (typeChanged) {
-                prevType.current = nodeType;
-            }
-            if (sourcePosChanged) {
-                prevSourcePosition.current = node.sourcePosition;
-            }
-            if (targetPosChanged) {
-                prevTargetPosition.current = node.targetPosition;
-            }
-            store.getState().updateNodeDimensions(new Map([[id, { id, nodeElement: nodeRef.current, forceUpdate: true }]]));
-        }
-    }, [id, nodeType, node.sourcePosition, node.targetPosition]);
+    const hasDimensions = nodeHasDimensions(node);
+    const nodeRef = useNodeObserver({ node, nodeType, hasDimensions, resizeObserver });
     const dragging = useDrag({
         nodeRef,
         disabled: node.hidden || !isDraggable,
@@ -1724,22 +1811,32 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
         nodeId: id,
         isSelectable,
     });
+    const moveSelectedNodes = useMoveSelectedNodes();
     if (node.hidden) {
         return null;
     }
-    const positionAbsoluteOrigin = getPositionWithOrigin({
-        x: positionAbsoluteX,
-        y: positionAbsoluteY,
-        width: computedWidth ?? width ?? 0,
-        height: computedHeight ?? height ?? 0,
-        origin: node.origin || nodeOrigin,
-    });
+    const nodeDimensions = getNodeDimensions(node);
+    const inlineDimensions = getNodeInlineStyleDimensions(node);
+    // TODO: clamping should happen earlier
+    const clampedPosition = nodeExtent
+        ? clampPosition(internals.positionAbsolute, nodeExtent)
+        : internals.positionAbsolute;
     const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
-    const onMouseEnterHandler = onMouseEnter ? (event) => onMouseEnter(event, { ...node }) : undefined;
-    const onMouseMoveHandler = onMouseMove ? (event) => onMouseMove(event, { ...node }) : undefined;
-    const onMouseLeaveHandler = onMouseLeave ? (event) => onMouseLeave(event, { ...node }) : undefined;
-    const onContextMenuHandler = onContextMenu ? (event) => onContextMenu(event, { ...node }) : undefined;
-    const onDoubleClickHandler = onDoubleClick ? (event) => onDoubleClick(event, { ...node }) : undefined;
+    const onMouseEnterHandler = onMouseEnter
+        ? (event) => onMouseEnter(event, { ...internals.userNode })
+        : undefined;
+    const onMouseMoveHandler = onMouseMove
+        ? (event) => onMouseMove(event, { ...internals.userNode })
+        : undefined;
+    const onMouseLeaveHandler = onMouseLeave
+        ? (event) => onMouseLeave(event, { ...internals.userNode })
+        : undefined;
+    const onContextMenuHandler = onContextMenu
+        ? (event) => onContextMenu(event, { ...internals.userNode })
+        : undefined;
+    const onDoubleClickHandler = onDoubleClick
+        ? (event) => onDoubleClick(event, { ...internals.userNode })
+        : undefined;
     const onSelectNodeHandler = (event) => {
         const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
         if (isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0)) {
@@ -1752,11 +1849,11 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
             });
         }
         if (onClick) {
-            onClick(event, { ...node });
+            onClick(event, { ...internals.userNode });
         }
     };
     const onKeyDown = (event) => {
-        if (isInputDOMNode(event.nativeEvent)) {
+        if (isInputDOMNode(event.nativeEvent) || disableKeyboardA11y) {
             return;
         }
         if (elementSelectionKeys.includes(event.key) && isSelectable) {
@@ -1768,14 +1865,11 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
                 nodeRef,
             });
         }
-        else if (!disableKeyboardA11y &&
-            isDraggable &&
-            node.selected &&
-            Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
+        else if (isDraggable && node.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
             store.setState({
                 ariaLiveMessage: `Moved selected node ${event.key
                     .replace('Arrow', '')
-                    .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
+                    .toLowerCase()}. New position, x: ${~~clampedPosition.x}, y: ${~~clampedPosition.y}`,
             });
             moveSelectedNodes({
                 direction: arrowKeyDiffs[event.key],
@@ -1795,28 +1889,28 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
                 selected: node.selected,
                 selectable: isSelectable,
                 parent: isParent,
+                draggable: isDraggable,
                 dragging,
             },
         ]), ref: nodeRef, style: {
-            zIndex,
-            transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
+            zIndex: internals.z,
+            transform: `translate(${clampedPosition.x}px,${clampedPosition.y}px)`,
             pointerEvents: hasPointerEvents ? 'all' : 'none',
-            visibility: initialized ? 'visible' : 'hidden',
+            visibility: hasDimensions ? 'visible' : 'hidden',
             ...node.style,
-            width: width ?? node.style?.width,
-            height: height ?? node.style?.height,
-        }, "data-id": id, "data-testid": `rf__node-${id}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { id: id, data: node.data, type: nodeType, width: computedWidth, height: computedHeight, positionAbsoluteX: positionAbsoluteX, positionAbsoluteY: positionAbsoluteY, selected: node.selected, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: zIndex }) }) }));
+            ...inlineDimensions,
+        }, "data-id": id, "data-testid": `rf__node-${id}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { id: id, data: node.data, type: nodeType, positionAbsoluteX: clampedPosition.x, positionAbsoluteY: clampedPosition.y, selected: node.selected, selectable: isSelectable, draggable: isDraggable, deletable: node.deletable ?? true, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: internals.z, parentId: node.parentId, ...nodeDimensions }) }) }));
 }
 
-const selector$d = (s) => ({
+const selector$c = (s) => ({
     nodesDraggable: s.nodesDraggable,
     nodesConnectable: s.nodesConnectable,
     nodesFocusable: s.nodesFocusable,
     elementsSelectable: s.elementsSelectable,
     onError: s.onError,
 });
-const NodeRendererComponent = (props) => {
-    const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$d, shallow);
+function NodeRendererComponent(props) {
+    const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$c, shallow);
     const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
     const resizeObserver = useResizeObserver();
     return (jsx("div", { className: "react-flow__nodes", style: containerStyle, children: nodeIds.map((nodeId) => {
@@ -1844,9 +1938,9 @@ const NodeRendererComponent = (props) => {
             //   moved into `NodeComponentWrapper`. This ensures they are
             //   memorized – so if `NodeRenderer` *has* to rerender, it only
             //   needs to regenerate the list of nodes, nothing else.
-            jsx(NodeWrapper, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, nodeOrigin: props.nodeOrigin, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver: resizeObserver, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, elementsSelectable: elementsSelectable, onError: onError }, nodeId));
+            jsx(NodeWrapper, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver: resizeObserver, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, elementsSelectable: elementsSelectable, onError: onError }, nodeId));
         }) }));
-};
+}
 NodeRendererComponent.displayName = 'NodeRenderer';
 const NodeRenderer = memo(NodeRendererComponent);
 
@@ -1948,21 +2042,22 @@ var MarkerDefinitions$1 = memo(MarkerDefinitions);
 function EdgeTextComponent({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgStyle = {}, labelBgPadding = [2, 4], labelBgBorderRadius = 2, children, className, ...rest }) {
     const [edgeTextBbox, setEdgeTextBbox] = useState({ x: 1, y: 0, width: 0, height: 0 });
     const edgeTextClasses = cc(['react-flow__edge-textwrapper', className]);
-    const onEdgeTextRefChange = useCallback((edgeRef) => {
-        if (edgeRef === null)
-            return;
-        const textBbox = edgeRef.getBBox();
-        setEdgeTextBbox({
-            x: textBbox.x,
-            y: textBbox.y,
-            width: textBbox.width,
-            height: textBbox.height,
-        });
-    }, []);
+    const edgeTextRef = useRef(null);
+    useEffect(() => {
+        if (edgeTextRef.current) {
+            const textBbox = edgeTextRef.current.getBBox();
+            setEdgeTextBbox({
+                x: textBbox.x,
+                y: textBbox.y,
+                width: textBbox.width,
+                height: textBbox.height,
+            });
+        }
+    }, [label]);
     if (typeof label === 'undefined' || !label) {
         return null;
     }
-    return (jsxs("g", { transform: `translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`, className: edgeTextClasses, visibility: edgeTextBbox.width ? 'visible' : 'hidden', ...rest, children: [labelShowBg && (jsx("rect", { width: edgeTextBbox.width + 2 * labelBgPadding[0], x: -labelBgPadding[0], y: -labelBgPadding[1], height: edgeTextBbox.height + 2 * labelBgPadding[1], className: "react-flow__edge-textbg", style: labelBgStyle, rx: labelBgBorderRadius, ry: labelBgBorderRadius })), jsx("text", { className: "react-flow__edge-text", y: edgeTextBbox.height / 2, dy: "0.3em", ref: onEdgeTextRefChange, style: labelStyle, children: label }), children] }));
+    return (jsxs("g", { transform: `translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`, className: edgeTextClasses, visibility: edgeTextBbox.width ? 'visible' : 'hidden', ...rest, children: [labelShowBg && (jsx("rect", { width: edgeTextBbox.width + 2 * labelBgPadding[0], x: -labelBgPadding[0], y: -labelBgPadding[1], height: edgeTextBbox.height + 2 * labelBgPadding[1], className: "react-flow__edge-textbg", style: labelBgStyle, rx: labelBgBorderRadius, ry: labelBgBorderRadius })), jsx("text", { className: "react-flow__edge-text", y: edgeTextBbox.height / 2, dy: "0.3em", ref: edgeTextRef, style: labelStyle, children: label }), children] }));
 }
 EdgeTextComponent.displayName = 'EdgeText';
 const EdgeText = memo(EdgeTextComponent);
@@ -2133,25 +2228,25 @@ function EdgeAnchor({ position, centerX, centerY, radius = 10, onMouseDown, onMo
     return (jsx("circle", { onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseOut: onMouseOut, className: cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`]), cx: shiftX(centerX, radius, position), cy: shiftY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent" }));
 }
 
-function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleId, sourceHandleId, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, setUpdating, setUpdateHover, }) {
+function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, targetHandleId, sourceHandleId, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onReconnect, onReconnectStart, onReconnectEnd, setReconnecting, setUpdateHover, }) {
     const store = useStoreApi();
     const handleEdgeUpdater = (event, isSourceHandle) => {
         // avoid triggering edge updater if mouse btn is not left
         if (event.button !== 0) {
             return;
         }
-        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodes, rfId: flowId, panBy, updateConnection, } = store.getState();
+        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodeLookup, rfId: flowId, panBy, updateConnection, } = store.getState();
         const nodeId = isSourceHandle ? edge.target : edge.source;
         const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
         const handleType = isSourceHandle ? 'target' : 'source';
         const isTarget = isSourceHandle;
-        setUpdating(true);
-        onEdgeUpdateStart?.(event, edge, handleType);
-        const _onEdgeUpdateEnd = (evt) => {
-            setUpdating(false);
-            onEdgeUpdateEnd?.(evt, edge, handleType);
+        setReconnecting(true);
+        onReconnectStart?.(event, edge, handleType);
+        const _onReconnectEnd = (evt) => {
+            setReconnecting(false);
+            onReconnectEnd?.(evt, edge, handleType);
         };
-        const onConnectEdge = (connection) => onEdgeUpdate?.(edge, connection);
+        const onConnectEdge = (connection) => onReconnect?.(edge, connection);
         XYHandle.onPointerDown(event.nativeEvent, {
             autoPanOnConnect,
             connectionMode,
@@ -2159,7 +2254,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
             domNode,
             handleId,
             nodeId,
-            nodes,
+            nodeLookup,
             isTarget,
             edgeUpdaterType: handleType,
             lib,
@@ -2170,19 +2265,20 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
             onConnect: onConnectEdge,
             onConnectStart,
             onConnectEnd,
-            onEdgeUpdateEnd: _onEdgeUpdateEnd,
+            onReconnectEnd: _onReconnectEnd,
             updateConnection,
             getTransform: () => store.getState().transform,
+            getFromHandle: () => store.getState().connection.fromHandle,
         });
     };
-    const onEdgeUpdaterSourceMouseDown = (event) => handleEdgeUpdater(event, true);
-    const onEdgeUpdaterTargetMouseDown = (event) => handleEdgeUpdater(event, false);
-    const onEdgeUpdaterMouseEnter = () => setUpdateHover(true);
-    const onEdgeUpdaterMouseOut = () => setUpdateHover(false);
-    return (jsxs(Fragment, { children: [(isUpdatable === 'source' || isUpdatable === true) && (jsx(EdgeAnchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: edgeUpdaterRadius, onMouseDown: onEdgeUpdaterSourceMouseDown, onMouseEnter: onEdgeUpdaterMouseEnter, onMouseOut: onEdgeUpdaterMouseOut, type: "source" })), (isUpdatable === 'target' || isUpdatable === true) && (jsx(EdgeAnchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: edgeUpdaterRadius, onMouseDown: onEdgeUpdaterTargetMouseDown, onMouseEnter: onEdgeUpdaterMouseEnter, onMouseOut: onEdgeUpdaterMouseOut, type: "target" }))] }));
+    const onReconnectSourceMouseDown = (event) => handleEdgeUpdater(event, true);
+    const onReconnectTargetMouseDown = (event) => handleEdgeUpdater(event, false);
+    const onReconnectMouseEnter = () => setUpdateHover(true);
+    const onReconnectMouseOut = () => setUpdateHover(false);
+    return (jsxs(Fragment, { children: [(isReconnectable === 'source' || isReconnectable === true) && (jsx(EdgeAnchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: reconnectRadius, onMouseDown: onReconnectSourceMouseDown, onMouseEnter: onReconnectMouseEnter, onMouseOut: onReconnectMouseOut, type: "source" })), (isReconnectable === 'target' || isReconnectable === true) && (jsx(EdgeAnchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: reconnectRadius, onMouseDown: onReconnectTargetMouseDown, onMouseEnter: onReconnectMouseEnter, onMouseOut: onReconnectMouseOut, type: "target" }))] }));
 }
 
-function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, edgeUpdaterRadius, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, rfId, edgeTypes, noPanClassName, onError, }) {
+function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, rfId, edgeTypes, noPanClassName, onError, disableKeyboardA11y, }) {
     let edge = useStore((s) => s.edgeLookup.get(id));
     const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
     edge = defaultEdgeOptions ? { ...defaultEdgeOptions, ...edge } : edge;
@@ -2194,12 +2290,12 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
         EdgeComponent = builtinEdgeTypes.default;
     }
     const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
-    const isUpdatable = typeof onEdgeUpdate !== 'undefined' &&
-        (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
+    const isReconnectable = typeof onReconnect !== 'undefined' &&
+        (edge.reconnectable || (edgesReconnectable && typeof edge.reconnectable === 'undefined'));
     const isSelectable = !!(edge.selectable || (elementsSelectable && typeof edge.selectable === 'undefined'));
     const edgeRef = useRef(null);
     const [updateHover, setUpdateHover] = useState(false);
-    const [updating, setUpdating] = useState(false);
+    const [reconnecting, setReconnecting] = useState(false);
     const store = useStoreApi();
     const { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore(useCallback((store) => {
         const sourceNode = store.nodeLookup.get(edge.source);
@@ -2233,7 +2329,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
     }, [edge.source, edge.target, edge.sourceHandle, edge.targetHandle, edge.selected, edge.zIndex]), shallow);
     const markerStartUrl = useMemo(() => (edge.markerStart ? `url('#${getMarkerId(edge.markerStart, rfId)}')` : undefined), [edge.markerStart, rfId]);
     const markerEndUrl = useMemo(() => (edge.markerEnd ? `url('#${getMarkerId(edge.markerEnd, rfId)}')` : undefined), [edge.markerEnd, rfId]);
-    if (edge.hidden || !sourceX || !sourceY || !targetX || !targetY) {
+    if (edge.hidden || sourceX === null || sourceY === null || targetX === null || targetY === null) {
         return null;
     }
     const onEdgeClick = (event) => {
@@ -2278,7 +2374,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
         }
         : undefined;
     const onKeyDown = (event) => {
-        if (elementSelectionKeys.includes(event.key) && isSelectable) {
+        if (!disableKeyboardA11y && elementSelectionKeys.includes(event.key) && isSelectable) {
             const { unselectNodesAndEdges, addSelectedEdges } = store.getState();
             const unselect = event.key === 'Escape';
             if (unselect) {
@@ -2302,31 +2398,31 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
                     updating: updateHover,
                     selectable: isSelectable,
                 },
-            ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : 'img', "data-id": id, "data-testid": `rf__edge-${id}`, "aria-label": edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined, ref: edgeRef, children: [!updating && (jsx(EdgeComponent, { id: id, source: edge.source, target: edge.target, selected: edge.selected, animated: edge.animated, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, data: edge.data, style: edge.style, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: 'pathOptions' in edge ? edge.pathOptions : undefined, interactionWidth: edge.interactionWidth })), isUpdatable && (jsx(EdgeUpdateAnchors, { edge: edge, isUpdatable: isUpdatable, edgeUpdaterRadius: edgeUpdaterRadius, onEdgeUpdate: onEdgeUpdate, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, setUpdateHover: setUpdateHover, setUpdating: setUpdating, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle }))] }) }));
+            ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : 'img', "data-id": id, "data-testid": `rf__edge-${id}`, "aria-label": edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined, ref: edgeRef, children: [!reconnecting && (jsx(EdgeComponent, { id: id, source: edge.source, target: edge.target, type: edge.type, selected: edge.selected, animated: edge.animated, selectable: isSelectable, deletable: edge.deletable ?? true, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, data: edge.data, style: edge.style, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: 'pathOptions' in edge ? edge.pathOptions : undefined, interactionWidth: edge.interactionWidth })), isReconnectable && (jsx(EdgeUpdateAnchors, { edge: edge, isReconnectable: isReconnectable, reconnectRadius: reconnectRadius, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, setUpdateHover: setUpdateHover, setReconnecting: setReconnecting, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle }))] }) }));
 }
 
-const selector$c = (s) => ({
+const selector$b = (s) => ({
     width: s.width,
     height: s.height,
     edgesFocusable: s.edgesFocusable,
-    edgesUpdatable: s.edgesUpdatable,
+    edgesReconnectable: s.edgesReconnectable,
     elementsSelectable: s.elementsSelectable,
     connectionMode: s.connectionMode,
     onError: s.onError,
 });
-function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes, noPanClassName, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, edgeUpdaterRadius, onEdgeDoubleClick, onEdgeUpdateStart, onEdgeUpdateEnd, }) {
-    const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector$c, shallow);
+function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes, noPanClassName, onReconnect, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, reconnectRadius, onEdgeDoubleClick, onReconnectStart, onReconnectEnd, disableKeyboardA11y, }) {
+    const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector$b, shallow);
     const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
     return (jsxs("div", { className: "react-flow__edges", children: [jsx(MarkerDefinitions$1, { defaultColor: defaultMarkerColor, rfId: rfId }), edgeIds.map((id) => {
-                return (jsx(EdgeWrapper, { id: id, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, elementsSelectable: elementsSelectable, noPanClassName: noPanClassName, onEdgeUpdate: onEdgeUpdate, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, edgeUpdaterRadius: edgeUpdaterRadius, onDoubleClick: onEdgeDoubleClick, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, rfId: rfId, onError: onError, edgeTypes: edgeTypes }, id));
+                return (jsx(EdgeWrapper, { id: id, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, noPanClassName: noPanClassName, onReconnect: onReconnect, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, reconnectRadius: reconnectRadius, onDoubleClick: onEdgeDoubleClick, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, rfId: rfId, onError: onError, edgeTypes: edgeTypes, disableKeyboardA11y: disableKeyboardA11y }, id));
             })] }));
 }
 EdgeRendererComponent.displayName = 'EdgeRenderer';
 const EdgeRenderer = memo(EdgeRendererComponent);
 
-const selector$b = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
+const selector$a = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 function Viewport({ children }) {
-    const transform = useStore(selector$b);
+    const transform = useStore(selector$a);
     return (jsx("div", { className: "react-flow__viewport xyflow__viewport react-flow__container", style: { transform }, children: children }));
 }
 
@@ -2346,7 +2442,7 @@ function useOnInitHandler(onInit) {
     }, [onInit, rfInstance.viewportInitialized]);
 }
 
-const selector$a = (state) => state.panZoom?.syncViewport;
+const selector$9 = (state) => state.panZoom?.syncViewport;
 /**
  * Hook for syncing the viewport with the panzoom instance.
  *
@@ -2354,7 +2450,7 @@ const selector$a = (state) => state.panZoom?.syncViewport;
  * @param viewport
  */
 function useViewportSync(viewport) {
-    const syncViewport = useStore(selector$a);
+    const syncViewport = useStore(selector$9);
     const store = useStoreApi();
     useEffect(() => {
         if (viewport) {
@@ -2365,130 +2461,140 @@ function useViewportSync(viewport) {
     return null;
 }
 
-const oppositePosition = {
-    [Position.Left]: Position.Right,
-    [Position.Right]: Position.Left,
-    [Position.Top]: Position.Bottom,
-    [Position.Bottom]: Position.Top,
+const selector$8 = (s) => {
+    return s.connection.inProgress
+        ? { ...s.connection, to: pointToRendererPoint(s.connection.to, s.transform) }
+        : { ...s.connection };
 };
-const ConnectionLine = ({ nodeId, handleType, style, type = ConnectionLineType.Bezier, CustomComponent, connectionStatus, }) => {
-    const { fromNode, handleId, toX, toY, connectionMode } = useStore(useCallback((s) => ({
-        fromNode: s.nodeLookup.get(nodeId),
-        handleId: s.connectionStartHandle?.handleId,
-        toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
-        toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
-        connectionMode: s.connectionMode,
-    }), [nodeId]), shallow);
-    const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
-    let handleBounds = fromHandleBounds?.[handleType];
-    if (connectionMode === ConnectionMode.Loose) {
-        handleBounds = handleBounds ? handleBounds : fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'];
-    }
-    if (!fromNode || !handleBounds) {
+/**
+ * Hook for accessing the connection state.
+ *
+ * @public
+ * @returns ConnectionState
+ */
+function useConnection() {
+    return useStore(selector$8, shallow);
+}
+
+const selector$7 = (s) => ({
+    nodesConnectable: s.nodesConnectable,
+    isValid: s.connection.isValid,
+    inProgress: s.connection.inProgress,
+    width: s.width,
+    height: s.height,
+});
+function ConnectionLineWrapper({ containerStyle, style, type, component }) {
+    const { nodesConnectable, width, height, isValid, inProgress } = useStore(selector$7, shallow);
+    const renderConnection = !!(width && nodesConnectable && inProgress);
+    if (!renderConnection) {
         return null;
     }
-    const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
-    const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.computed?.width ?? 0) / 2;
-    const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.computed?.height ?? 0;
-    const fromX = (fromNode.computed?.positionAbsolute?.x ?? 0) + fromHandleX;
-    const fromY = (fromNode.computed?.positionAbsolute?.y ?? 0) + fromHandleY;
-    const fromPosition = fromHandle?.position;
-    const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
-    if (!fromPosition || !toPosition) {
-        return null;
+    return (jsx("svg", { style: containerStyle, width: width, height: height, className: "react-flow__connectionline react-flow__container", children: jsx("g", { className: cc(['react-flow__connection', getConnectionStatus(isValid)]), children: jsx(ConnectionLine, { style: style, type: type, CustomComponent: component, isValid: isValid }) }) }));
+}
+const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }) => {
+    const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection();
+    if (!inProgress) {
+        return;
     }
     if (CustomComponent) {
-        return (jsx(CustomComponent, { connectionLineType: type, connectionLineStyle: style, fromNode: fromNode, fromHandle: fromHandle, fromX: fromX, fromY: fromY, toX: toX, toY: toY, fromPosition: fromPosition, toPosition: toPosition, connectionStatus: connectionStatus }));
+        return (jsx(CustomComponent, { connectionLineType: type, connectionLineStyle: style, fromNode: fromNode, fromHandle: fromHandle, fromX: from.x, fromY: from.y, toX: to.x, toY: to.y, fromPosition: fromPosition, toPosition: toPosition, connectionStatus: getConnectionStatus(isValid), toNode: toNode, toHandle: toHandle }));
     }
-    let dAttr = '';
+    let path = '';
     const pathParams = {
-        sourceX: fromX,
-        sourceY: fromY,
+        sourceX: from.x,
+        sourceY: from.y,
         sourcePosition: fromPosition,
-        targetX: toX,
-        targetY: toY,
+        targetX: to.x,
+        targetY: to.y,
         targetPosition: toPosition,
     };
-    if (type === ConnectionLineType.Bezier) {
-        // we assume the destination position is opposite to the source position
-        [dAttr] = getBezierPath(pathParams);
-    }
-    else if (type === ConnectionLineType.Step) {
-        [dAttr] = getSmoothStepPath({
-            ...pathParams,
-            borderRadius: 0,
-        });
-    }
-    else if (type === ConnectionLineType.SmoothStep) {
-        [dAttr] = getSmoothStepPath(pathParams);
-    }
-    else if (type === ConnectionLineType.SimpleBezier) {
-        [dAttr] = getSimpleBezierPath(pathParams);
-    }
-    else {
-        dAttr = `M${fromX},${fromY} ${toX},${toY}`;
+    switch (type) {
+        case ConnectionLineType.Bezier:
+            [path] = getBezierPath(pathParams);
+            break;
+        case ConnectionLineType.SimpleBezier:
+            [path] = getSimpleBezierPath(pathParams);
+            break;
+        case ConnectionLineType.Step:
+            [path] = getSmoothStepPath({
+                ...pathParams,
+                borderRadius: 0,
+            });
+            break;
+        case ConnectionLineType.SmoothStep:
+            [path] = getSmoothStepPath(pathParams);
+            break;
+        default:
+            [path] = getStraightPath(pathParams);
     }
-    return jsx("path", { d: dAttr, fill: "none", className: "react-flow__connection-path", style: style });
+    return jsx("path", { d: path, fill: "none", className: "react-flow__connection-path", style: style });
 };
 ConnectionLine.displayName = 'ConnectionLine';
-const selector$9 = (s) => ({
-    nodeId: s.connectionStartHandle?.nodeId,
-    handleType: s.connectionStartHandle?.type,
-    nodesConnectable: s.nodesConnectable,
-    connectionStatus: s.connectionStatus,
-    width: s.width,
-    height: s.height,
-});
-function ConnectionLineWrapper({ containerStyle, style, type, component }) {
-    const { nodeId, handleType, nodesConnectable, width, height, connectionStatus } = useStore(selector$9, shallow);
-    const isValid = !!(nodeId && handleType && width && nodesConnectable);
-    if (!isValid) {
-        return null;
-    }
-    return (jsx("svg", { style: containerStyle, width: width, height: height, className: "react-flow__connectionline react-flow__container", children: jsx("g", { className: cc(['react-flow__connection', connectionStatus]), children: jsx(ConnectionLine, { nodeId: nodeId, handleType: handleType, style: style, type: type, CustomComponent: component, connectionStatus: connectionStatus }) }) }));
-}
 
 const emptyTypes = {};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes = emptyTypes) {
-    const updateCount = useRef(0);
+    const typesRef = useRef(nodeOrEdgeTypes);
     const store = useStoreApi();
     useEffect(() => {
         if (process.env.NODE_ENV === 'development') {
-            if (updateCount.current > 1) {
-                store.getState().onError?.('002', errorMessages['error002']());
+            const usedKeys = new Set([...Object.keys(typesRef.current), ...Object.keys(nodeOrEdgeTypes)]);
+            for (const key of usedKeys) {
+                if (typesRef.current[key] !== nodeOrEdgeTypes[key]) {
+                    store.getState().onError?.('002', errorMessages['error002']());
+                    break;
+                }
             }
-            updateCount.current += 1;
+            typesRef.current = nodeOrEdgeTypes;
         }
     }, [nodeOrEdgeTypes]);
 }
 
-function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, edgeUpdaterRadius, onEdgeUpdateStart, onEdgeUpdateEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId, viewport, onViewportChange, }) {
+function useStylesLoadedWarning() {
+    const store = useStoreApi();
+    const checked = useRef(false);
+    useEffect(() => {
+        if (process.env.NODE_ENV === 'development') {
+            if (!checked.current) {
+                const pane = document.querySelector('.react-flow__pane');
+                if (pane && !(window.getComputedStyle(pane).zIndex === '1')) {
+                    store.getState().onError?.('013', errorMessages['error013']('react'));
+                }
+                checked.current = true;
+            }
+        }
+    }, []);
+}
+
+function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange, }) {
     useNodeOrEdgeTypesWarning(nodeTypes);
     useNodeOrEdgeTypesWarning(edgeTypes);
+    useStylesLoadedWarning();
     useOnInitHandler(onInit);
     useViewportSync(viewport);
-    return (jsx(FlowRenderer, { onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, deleteKeyCode: deleteKeyCode, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, onSelectionContextMenu: onSelectionContextMenu, preventScrolling: preventScrolling, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, onViewportChange: onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeUpdate: onEdgeUpdate, onlyRenderVisibleElements: onlyRenderVisibleElements, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, rfId: rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx("div", { className: "react-flow__viewport-portal" }), jsx(NodeRenderer, { nodeTypes: nodeTypes, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onlyRenderVisibleElements: onlyRenderVisibleElements, noPanClassName: noPanClassName, noDragClassName: noDragClassName, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, rfId: rfId })] }) }));
+    return (jsx(FlowRenderer, { onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, paneClickDistance: paneClickDistance, deleteKeyCode: deleteKeyCode, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, onSelectionContextMenu: onSelectionContextMenu, preventScrolling: preventScrolling, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, onViewportChange: onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onlyRenderVisibleElements: onlyRenderVisibleElements, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, rfId: rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onlyRenderVisibleElements: onlyRenderVisibleElements, noPanClassName: noPanClassName, noDragClassName: noDragClassName, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, rfId: rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) }));
 }
 GraphViewComponent.displayName = 'GraphView';
 const GraphView = memo(GraphViewComponent);
 
-const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, } = {}) => {
+const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, } = {}) => {
     const nodeLookup = new Map();
+    const parentLookup = new Map();
     const connectionLookup = new Map();
     const edgeLookup = new Map();
     const storeEdges = defaultEdges ?? edges ?? [];
     const storeNodes = defaultNodes ?? nodes ?? [];
+    const storeNodeOrigin = nodeOrigin ?? [0, 0];
     updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
-    const nextNodes = adoptUserProvidedNodes(storeNodes, nodeLookup, {
-        nodeOrigin: [0, 0],
+    adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
+        nodeOrigin: storeNodeOrigin,
         elevateNodesOnSelect: false,
     });
     let transform = [0, 0, 1];
     if (fitView && width && height) {
-        const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
-        // @todo users nodeOrigin should be used here
-        const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
+        const bounds = getInternalNodesBounds(nodeLookup, {
+            filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
+        });
         const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
         transform = [x, y, zoom];
     }
@@ -2497,8 +2603,9 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         width: 0,
         height: 0,
         transform,
-        nodes: nextNodes,
+        nodes: storeNodes,
         nodeLookup,
+        parentLookup,
         edges: storeEdges,
         edgeLookup,
         connectionLookup,
@@ -2514,13 +2621,11 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         nodesSelectionActive: false,
         userSelectionActive: false,
         userSelectionRect: null,
-        connectionPosition: { x: 0, y: 0 },
-        connectionStatus: null,
         connectionMode: ConnectionMode.Strict,
         domNode: null,
         paneDragging: false,
         noPanClassName: 'nopan',
-        nodeOrigin: [0, 0],
+        nodeOrigin: storeNodeOrigin,
         nodeDragThreshold: 1,
         snapGrid: [15, 15],
         snapToGrid: false,
@@ -2528,7 +2633,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         nodesConnectable: true,
         nodesFocusable: true,
         edgesFocusable: true,
-        edgesUpdatable: true,
+        edgesReconnectable: true,
         elementsSelectable: true,
         elevateNodesOnSelect: true,
         elevateEdgesOnSelect: false,
@@ -2537,33 +2642,34 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         fitViewOnInitOptions: undefined,
         selectNodesOnDrag: true,
         multiSelectionActive: false,
-        connectionStartHandle: null,
-        connectionEndHandle: null,
+        connection: { ...initialConnection },
         connectionClickStartHandle: null,
         connectOnClick: true,
         ariaLiveMessage: '',
         autoPanOnConnect: true,
         autoPanOnNodeDrag: true,
+        autoPanSpeed: 15,
         connectionRadius: 20,
         onError: devWarn,
         isValidConnection: undefined,
         onSelectionChangeHandlers: [],
         lib: 'react',
+        debug: false,
     };
 };
 
-const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, }) => createWithEqualityFn((set, get) => ({
-    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, defaultNodes, defaultEdges }),
+const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, nodeOrigin, }) => createWithEqualityFn((set, get) => ({
+    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, nodeOrigin, defaultNodes, defaultEdges }),
     setNodes: (nodes) => {
-        const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
+        const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
         // setNodes() is called exclusively in response to user actions:
         // - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
         // - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
         //
         // When this happens, we take the note objects passed by the user and extend them with fields
         // relevant for internal React Flow operations.
-        const nodesWithInternalData = adoptUserProvidedNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
-        set({ nodes: nodesWithInternalData });
+        adoptUserNodes(nodes, nodeLookup, parentLookup, { nodeOrigin, elevateNodesOnSelect, checkEquality: true });
+        set({ nodes });
     },
     setEdges: (edges) => {
         const { connectionLookup, edgeLookup } = get();
@@ -2585,26 +2691,19 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
     // Every node gets registerd at a ResizeObserver. Whenever a node
     // changes its dimensions, this function is called to measure the
     // new dimensions and update the nodes.
-    updateNodeDimensions: (updates) => {
-        const { onNodesChange, fitView, nodes, nodeLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, } = get();
-        const changes = [];
-        const updatedNodes = updateNodeDimensions(updates, nodes, nodeLookup, domNode, nodeOrigin, (id, dimensions) => {
-            changes.push({
-                id: id,
-                type: 'dimensions',
-                dimensions,
-            });
-        });
-        if (!updatedNodes) {
+    updateNodeInternals: (updates) => {
+        const { triggerNodeChanges, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug, fitViewSync, } = get();
+        const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin);
+        if (!updatedInternals) {
             return;
         }
-        const nextNodes = updateAbsolutePositions(updatedNodes, nodeLookup, nodeOrigin);
+        updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin });
         // we call fitView once initially after all dimensions are set
         let nextFitViewDone = fitViewDone;
         if (!fitViewDone && fitViewOnInit) {
-            nextFitViewDone = fitView(nextNodes, {
+            nextFitViewDone = fitViewSync({
                 ...fitViewOnInitOptions,
-                nodes: fitViewOnInitOptions?.nodes || nextNodes,
+                nodes: fitViewOnInitOptions?.nodes,
             });
         }
         // here we are cirmumventing the onNodesChange handler
@@ -2612,63 +2711,91 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
         // has not provided an onNodesChange handler.
         // Nodes are only rendered if they have a width and height
         // attribute which they get from this handler.
-        set({ nodes: nextNodes, fitViewDone: nextFitViewDone });
+        set({ fitViewDone: nextFitViewDone });
         if (changes?.length > 0) {
-            onNodesChange?.(changes);
+            if (debug) {
+                console.log('React Flow: trigger node changes', changes);
+            }
+            triggerNodeChanges?.(changes);
         }
     },
     updateNodePositions: (nodeDragItems, dragging = false) => {
-        const changes = nodeDragItems.map((node) => {
+        const parentExpandChildren = [];
+        const changes = [];
+        for (const [id, dragItem] of nodeDragItems) {
             const change = {
-                id: node.id,
+                id,
                 type: 'position',
-                position: node.position,
-                positionAbsolute: node.computed?.positionAbsolute,
+                position: dragItem.position,
                 dragging,
             };
-            return change;
-        });
+            if (dragItem?.expandParent && dragItem?.parentId && change.position) {
+                parentExpandChildren.push({
+                    id,
+                    parentId: dragItem.parentId,
+                    rect: {
+                        ...dragItem.internals.positionAbsolute,
+                        width: dragItem.measured.width,
+                        height: dragItem.measured.height,
+                    },
+                });
+                change.position.x = Math.max(0, change.position.x);
+                change.position.y = Math.max(0, change.position.y);
+            }
+            changes.push(change);
+        }
+        if (parentExpandChildren.length > 0) {
+            const { nodeLookup, parentLookup, nodeOrigin } = get();
+            const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
+            changes.push(...parentExpandChanges);
+        }
         get().triggerNodeChanges(changes);
     },
     triggerNodeChanges: (changes) => {
-        const { onNodesChange, setNodes, nodes, hasDefaultNodes } = get();
+        const { onNodesChange, setNodes, nodes, hasDefaultNodes, debug } = get();
         if (changes?.length) {
             if (hasDefaultNodes) {
                 const updatedNodes = applyNodeChanges(changes, nodes);
                 setNodes(updatedNodes);
             }
+            if (debug) {
+                console.log('React Flow: trigger node changes', changes);
+            }
             onNodesChange?.(changes);
         }
     },
     triggerEdgeChanges: (changes) => {
-        const { onEdgesChange, setEdges, edges, hasDefaultEdges } = get();
+        const { onEdgesChange, setEdges, edges, hasDefaultEdges, debug } = get();
         if (changes?.length) {
             if (hasDefaultEdges) {
                 const updatedEdges = applyEdgeChanges(changes, edges);
                 setEdges(updatedEdges);
             }
+            if (debug) {
+                console.log('React Flow: trigger edge changes', changes);
+            }
             onEdgesChange?.(changes);
         }
     },
     addSelectedNodes: (selectedNodeIds) => {
-        const { multiSelectionActive, edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+        const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
         if (multiSelectionActive) {
             const nodeChanges = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
             triggerNodeChanges(nodeChanges);
             return;
         }
-        triggerNodeChanges(getSelectionChanges(nodes, new Set([...selectedNodeIds]), true));
-        triggerEdgeChanges(getSelectionChanges(edges));
+        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set([...selectedNodeIds]), true));
+        triggerEdgeChanges(getSelectionChanges(edgeLookup));
     },
     addSelectedEdges: (selectedEdgeIds) => {
-        const { multiSelectionActive, edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+        const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
         if (multiSelectionActive) {
             const changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
             triggerEdgeChanges(changedEdges);
             return;
         }
-        triggerEdgeChanges(getSelectionChanges(edges, new Set([...selectedEdgeIds])));
-        triggerNodeChanges(getSelectionChanges(nodes, new Set(), true));
+        triggerEdgeChanges(getSelectionChanges(edgeLookup, new Set([...selectedEdgeIds])));
+        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set(), true));
     },
     unselectNodesAndEdges: ({ nodes, edges } = {}) => {
         const { edges: storeEdges, nodes: storeNodes, triggerNodeChanges, triggerEdgeChanges } = get();
@@ -2696,6 +2823,9 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
         get().panZoom?.setTranslateExtent(translateExtent);
         set({ translateExtent });
     },
+    setPaneClickDistance: (clickDistance) => {
+        get().panZoom?.setClickDistance(clickDistance);
+    },
     resetSelectedElements: () => {
         const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
         const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
@@ -2704,82 +2834,91 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
         triggerEdgeChanges(edgeChanges);
     },
     setNodeExtent: (nodeExtent) => {
-        const { nodes } = get();
+        const { nodeLookup } = get();
+        for (const [, node] of nodeLookup) {
+            const positionAbsolute = clampPosition(node.position, nodeExtent);
+            nodeLookup.set(node.id, {
+                ...node,
+                internals: {
+                    ...node.internals,
+                    positionAbsolute,
+                },
+            });
+        }
         set({
             nodeExtent,
-            nodes: nodes.map((node) => {
-                const positionAbsolute = clampPosition(node.position, nodeExtent);
-                return {
-                    ...node,
-                    computed: {
-                        ...node.computed,
-                        positionAbsolute,
-                    },
-                };
-            }),
         });
     },
     panBy: (delta) => {
         const { transform, width, height, panZoom, translateExtent } = get();
         return panBy({ delta, panZoom, transform, translateExtent, width, height });
     },
-    fitView: (nodes, options) => {
-        const { panZoom, width, height, minZoom, maxZoom, nodeOrigin } = get();
+    fitView: (options) => {
+        const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
         if (!panZoom) {
-            return false;
+            return Promise.resolve(false);
         }
+        const fitViewNodes = getFitViewNodes(nodeLookup, options);
         return fitView({
-            nodes,
+            nodes: fitViewNodes,
             width,
             height,
             panZoom,
             minZoom,
             maxZoom,
-            nodeOrigin,
         }, options);
     },
-    cancelConnection: () => set({
-        connectionStatus: null,
-        connectionStartHandle: null,
-        connectionEndHandle: null,
-    }),
-    updateConnection: (params) => {
-        const { connectionStatus, connectionStartHandle, connectionEndHandle, connectionPosition } = get();
-        const currentConnection = {
-            connectionPosition: params.connectionPosition ?? connectionPosition,
-            connectionStatus: params.connectionStatus ?? connectionStatus,
-            connectionStartHandle: params.connectionStartHandle ?? connectionStartHandle,
-            connectionEndHandle: params.connectionEndHandle ?? connectionEndHandle,
-        };
-        set(currentConnection);
+    // we can't call an asnychronous function in updateNodeInternals
+    // for that we created this sync version of fitView
+    fitViewSync: (options) => {
+        const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
+        if (!panZoom) {
+            return false;
+        }
+        const fitViewNodes = getFitViewNodes(nodeLookup, options);
+        fitView({
+            nodes: fitViewNodes,
+            width,
+            height,
+            panZoom,
+            minZoom,
+            maxZoom,
+        }, options);
+        return fitViewNodes.size > 0;
+    },
+    cancelConnection: () => {
+        set({
+            connection: { ...initialConnection },
+        });
+    },
+    updateConnection: (connection) => {
+        set({ connection });
     },
     reset: () => set({ ...getInitialState() }),
 }), Object.is);
 
-function ReactFlowProvider({ children, initialNodes, initialEdges, defaultNodes, defaultEdges, initialWidth, initialHeight, fitView, }) {
-    const storeRef = useRef(null);
-    if (!storeRef.current) {
-        storeRef.current = createRFStore({
-            nodes: initialNodes,
-            edges: initialEdges,
-            defaultNodes,
-            defaultEdges,
-            width: initialWidth,
-            height: initialHeight,
-            fitView,
-        });
-    }
-    return jsx(Provider$1, { value: storeRef.current, children: children });
+function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, nodeOrigin, children, }) {
+    const [store] = useState(() => createStore({
+        nodes,
+        edges,
+        defaultNodes,
+        defaultEdges,
+        width,
+        height,
+        fitView,
+        nodeOrigin,
+    }));
+    return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
 }
 
-function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, }) {
+function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, }) {
     const isWrapped = useContext(StoreContext);
     if (isWrapped) {
         // we need to wrap it with a fragment because it's not allowed for children to be a ReactNode
         // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
         return jsx(Fragment, { children: children });
     }
-    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, children: children }));
+    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, nodeOrigin: nodeOrigin, children: children }));
 }
 
 const wrapperStyle = {
@@ -2789,25 +2928,25 @@ const wrapperStyle = {
     position: 'relative',
     zIndex: 0,
 };
-const ReactFlow = forwardRef(({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesUpdatable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, children, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', ...rest }, ref) => {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, ...rest }, ref) {
     const rfId = id || '1';
     const colorModeClassName = useColorModeClass(colorMode);
-    return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, width: width, height: height, fitView: fitView, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onEdgeUpdate: onEdgeUpdate, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
-});
-ReactFlow.displayName = 'ReactFlow';
+    return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, nodeOrigin: nodeOrigin, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
+}
+var index = fixedForwardRef(ReactFlow);
 
-const selector$8 = (s) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
+const selector$6 = (s) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
 function EdgeLabelRenderer({ children }) {
-    const edgeLabelRenderer = useStore(selector$8);
+    const edgeLabelRenderer = useStore(selector$6);
     if (!edgeLabelRenderer) {
         return null;
     }
     return createPortal(children, edgeLabelRenderer);
 }
 
-const selector$7 = (s) => s.domNode?.querySelector('.react-flow__viewport-portal');
+const selector$5 = (s) => s.domNode?.querySelector('.react-flow__viewport-portal');
 function ViewportPortal({ children }) {
-    const viewPortalDiv = useStore(selector$7);
+    const viewPortalDiv = useStore(selector$5);
     if (!viewPortalDiv) {
         return null;
     }
@@ -2823,16 +2962,16 @@ function ViewportPortal({ children }) {
 function useUpdateNodeInternals() {
     const store = useStoreApi();
     return useCallback((id) => {
-        const { domNode, updateNodeDimensions } = store.getState();
+        const { domNode, updateNodeInternals } = store.getState();
         const updateIds = Array.isArray(id) ? id : [id];
         const updates = new Map();
         updateIds.forEach((updateId) => {
             const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`);
             if (nodeElement) {
-                updates.set(updateId, { id: updateId, nodeElement, forceUpdate: true });
+                updates.set(updateId, { id: updateId, nodeElement, force: true });
             }
         });
-        requestAnimationFrame(() => updateNodeDimensions(updates));
+        requestAnimationFrame(() => updateNodeInternals(updates));
     }, []);
 }
 
@@ -2940,13 +3079,13 @@ function useOnSelectionChange({ onChange }) {
     }, [onChange]);
 }
 
-const selector$6 = (options) => (s) => {
-    if (s.nodes.length === 0) {
+const selector$4 = (options) => (s) => {
+    if (s.nodeLookup.size === 0) {
         return false;
     }
-    for (const node of s.nodes) {
-        if (options.includeHiddenNodes || !node.hidden) {
-            if (node[internalsSymbol]?.handleBounds === undefined) {
+    for (const [, { hidden, internals }] of s.nodeLookup) {
+        if (options.includeHiddenNodes || !hidden) {
+            if (internals.handleBounds === undefined || !nodeHasDimensions(internals.userNode)) {
                 return false;
             }
         }
@@ -2964,7 +3103,7 @@ const defaultOptions = {
  * @returns boolean indicating whether all nodes are initialized
  */
 function useNodesInitialized(options = defaultOptions) {
-    const initialized = useStore(selector$6(options));
+    const initialized = useStore(selector$4(options));
     return initialized;
 }
 
@@ -2999,36 +3138,34 @@ function useHandleConnections({ type, id = null, nodeId, onConnect, onDisconnect
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useNodesData(nodeIds) {
     const nodesData = useStore(useCallback((s) => {
-        if (!Array.isArray(nodeIds)) {
-            return s.nodeLookup.get(nodeIds)?.data || null;
-        }
         const data = [];
-        for (const nodeId of nodeIds) {
-            const nodeData = s.nodeLookup.get(nodeId)?.data;
-            if (nodeData) {
-                data.push(nodeData);
+        const isArrayOfIds = Array.isArray(nodeIds);
+        const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
+        for (const nodeId of _nodeIds) {
+            const node = s.nodeLookup.get(nodeId);
+            if (node) {
+                data.push({
+                    id: node.id,
+                    type: node.type,
+                    data: node.data,
+                });
             }
         }
-        return data;
-    }, [nodeIds]), shallow);
+        return isArrayOfIds ? data : data[0] ?? null;
+    }, [nodeIds]), shallowNodeData);
     return nodesData;
 }
 
-const selector$5 = (s) => ({
-    startHandle: s.connectionStartHandle,
-    endHandle: s.connectionEndHandle,
-    status: s.connectionStatus,
-    position: s.connectionStartHandle ? s.connectionPosition : null,
-});
 /**
- * Hook for accessing the ongoing connection.
+ * Hook for getting an internal node by id
  *
  * @public
- * @returns ongoing connection
+ * @param id - id of the node
+ * @returns array with visible node ids
  */
-function useConnection() {
-    const ongoingConnection = useStore(selector$5, shallow);
-    return ongoingConnection;
+function useInternalNode(id) {
+    const node = useStore(useCallback((s) => s.nodeLookup.get(id), [id]), shallow);
+    return node;
 }
 
 function LinePattern({ dimensions, lineWidth, variant, className }) {
@@ -3050,14 +3187,14 @@ const defaultSize = {
     [BackgroundVariant.Lines]: 1,
     [BackgroundVariant.Cross]: 6,
 };
-const selector$4 = (s) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
+const selector$3 = (s) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
 function BackgroundComponent({ id, variant = BackgroundVariant.Dots, 
 // only used for dots and cross
 gap = 20, 
 // only used for lines and cross
 size, lineWidth = 1, offset = 2, color, bgColor, style, className, patternClassName, }) {
     const ref = useRef(null);
-    const { transform, patternId } = useStore(selector$4, shallow);
+    const { transform, patternId } = useStore(selector$3, shallow);
     const patternSize = size || defaultSize[variant];
     const isDots = variant === BackgroundVariant.Dots;
     const isCross = variant === BackgroundVariant.Cross;
@@ -3103,14 +3240,14 @@ function ControlButton({ children, className, ...rest }) {
     return (jsx("button", { type: "button", className: cc(['react-flow__controls-button', className]), ...rest, children: children }));
 }
 
-const selector$3 = (s) => ({
+const selector$2 = (s) => ({
     isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
     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', 'aria-label': ariaLabel = 'React Flow controls', }) {
+function ControlsComponent({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', orientation = 'vertical', 'aria-label': ariaLabel = 'React Flow controls', }) {
     const store = useStoreApi();
-    const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector$3, shallow);
+    const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector$2, shallow);
     const { zoomIn, zoomOut, fitView } = useReactFlow();
     const onZoomInHandler = () => {
         zoomIn();
@@ -3132,7 +3269,8 @@ 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", "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] }));
+    const orientationClass = orientation === 'horizontal' ? 'horizontal' : 'vertical';
+    return (jsxs(Panel, { className: cc(['react-flow__controls', orientationClass, 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);
@@ -3148,15 +3286,13 @@ function MiniMapNodeComponent({ id, x, y, width, height, style, color, strokeCol
 }
 const MiniMapNode = memo(MiniMapNodeComponent);
 
-const selector$2 = (s) => s.nodeOrigin;
 const selectorNodeIds = (s) => s.nodes.map((node) => node.id);
-const getAttrFunction = (func) => (func instanceof Function ? func : () => func);
+const getAttrFunction = (func) => func instanceof Function ? func : () => func;
 function MiniMapNodes({ nodeStrokeColor, nodeColor, nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth, 
 // We need to rename the prop to be `CapitalCase` so that JSX will render it as
 // a component properly.
 nodeComponent: NodeComponent = MiniMapNode, onClick, }) {
     const nodeIds = useStore(selectorNodeIds, shallow);
-    const nodeOrigin = useStore(selector$2);
     const nodeColorFunc = getAttrFunction(nodeColor);
     const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
     const nodeClassNameFunc = getAttrFunction(nodeClassName);
@@ -3167,23 +3303,25 @@ nodeComponent: NodeComponent = MiniMapNode, onClick, }) {
         // minimize the cost of updates when individual nodes change.
         //
         // For more details, see a similar commit in `NodeRenderer/index.tsx`.
-        jsx(NodeComponentWrapper, { id: nodeId, nodeOrigin: nodeOrigin, nodeColorFunc: nodeColorFunc, nodeStrokeColorFunc: nodeStrokeColorFunc, nodeClassNameFunc: nodeClassNameFunc, nodeBorderRadius: nodeBorderRadius, nodeStrokeWidth: nodeStrokeWidth, NodeComponent: NodeComponent, onClick: onClick, shapeRendering: shapeRendering }, nodeId))) }));
+        jsx(NodeComponentWrapper, { id: nodeId, nodeColorFunc: nodeColorFunc, nodeStrokeColorFunc: nodeStrokeColorFunc, nodeClassNameFunc: nodeClassNameFunc, nodeBorderRadius: nodeBorderRadius, nodeStrokeWidth: nodeStrokeWidth, NodeComponent: NodeComponent, onClick: onClick, shapeRendering: shapeRendering }, nodeId))) }));
 }
-const NodeComponentWrapper = memo(function NodeComponentWrapper({ id, nodeOrigin, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
+function NodeComponentWrapperInner({ id, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
     const { node, x, y } = useStore((s) => {
         const node = s.nodeLookup.get(id);
-        const { x, y } = getNodePositionWithOrigin(node, node?.origin || nodeOrigin).positionAbsolute;
+        const { x, y } = node.internals.positionAbsolute;
         return {
             node,
             x,
             y,
         };
     }, shallow);
-    if (!node || node.hidden || !(node.computed?.width || node.width) || !(node.computed?.height || node.height)) {
+    if (!node || node.hidden || !nodeHasDimensions(node)) {
         return null;
     }
-    return (jsx(NodeComponent, { x: x, y: y, width: node.computed?.width ?? node.width ?? 0, height: node.computed?.height ?? node.height ?? 0, style: node.style, selected: !!node.selected, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering: shapeRendering, onClick: onClick, id: node.id }));
-});
+    const { width, height } = getNodeDimensions(node);
+    return (jsx(NodeComponent, { x: x, y: y, width: width, height: height, style: node.style, selected: !!node.selected, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering: shapeRendering, onClick: onClick, id: node.id }));
+}
+const NodeComponentWrapper = memo(NodeComponentWrapperInner);
 var MiniMapNodes$1 = memo(MiniMapNodes);
 
 const defaultWidth = 200;
@@ -3197,9 +3335,8 @@ const selector$1 = (s) => {
     };
     return {
         viewBB,
-        boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, { nodeOrigin: s.nodeOrigin }), viewBB) : viewBB,
+        boundingRect: s.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup), viewBB) : viewBB,
         rfId: s.rfId,
-        nodeOrigin: s.nodeOrigin,
         panZoom: s.panZoom,
         translateExtent: s.translateExtent,
         flowWidth: s.width,
@@ -3298,33 +3435,57 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                 domNode: resizeControlRef.current,
                 nodeId: id,
                 getStoreItems: () => {
-                    const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState();
+                    const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = store.getState();
                     return {
                         nodeLookup,
                         transform,
                         snapGrid,
                         snapToGrid,
+                        nodeOrigin,
                     };
                 },
                 onChange: (change, childChanges) => {
-                    const { triggerNodeChanges } = store.getState();
+                    const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState();
                     const changes = [];
-                    if (change.isXPosChange || change.isYPosChange) {
+                    const nextPosition = { x: change.x, y: change.y };
+                    const node = nodeLookup.get(id);
+                    if (node && node.expandParent && node.parentId) {
+                        const origin = node.origin ?? nodeOrigin;
+                        const width = change.width ?? node.measured.width;
+                        const height = change.height ?? node.measured.height;
+                        const child = {
+                            id: node.id,
+                            parentId: node.parentId,
+                            rect: {
+                                width,
+                                height,
+                                ...evaluateAbsolutePosition({
+                                    x: change.x ?? node.position.x,
+                                    y: change.y ?? node.position.y,
+                                }, { width, height }, node.parentId, nodeLookup, origin),
+                            },
+                        };
+                        const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
+                        changes.push(...parentExpandChanges);
+                        // when the parent was expanded by the child node, its position will be clamped at
+                        // 0,0 when node origin is 0,0 and to width, height if it's 1,1
+                        nextPosition.x = change.x ? Math.max(origin[0] * width, change.x) : undefined;
+                        nextPosition.y = change.y ? Math.max(origin[1] * height, change.y) : undefined;
+                    }
+                    if (nextPosition.x !== undefined && nextPosition.y !== undefined) {
                         const positionChange = {
                             id,
                             type: 'position',
-                            position: {
-                                x: change.x,
-                                y: change.y,
-                            },
+                            position: { ...nextPosition },
                         };
                         changes.push(positionChange);
                     }
-                    if (change.isWidthChange || change.isHeightChange) {
+                    if (change.width !== undefined && change.height !== undefined) {
                         const dimensionChange = {
                             id,
                             type: 'dimensions',
                             resizing: true,
+                            setAttributes: true,
                             dimensions: {
                                 width: change.width,
                                 height: change.height,
@@ -3403,55 +3564,61 @@ function NodeToolbarPortal({ children }) {
     return createPortal(children, wrapperRef);
 }
 
-const nodeEqualityFn = (a, b) => a?.computed?.positionAbsolute?.x !== b?.computed?.positionAbsolute?.x ||
-    a?.computed?.positionAbsolute?.y !== b?.computed?.positionAbsolute?.y ||
-    a?.computed?.width !== b?.computed?.width ||
-    a?.computed?.height !== b?.computed?.height ||
+const nodeEqualityFn = (a, b) => a?.internals.positionAbsolute.x !== b?.internals.positionAbsolute.x ||
+    a?.internals.positionAbsolute.y !== b?.internals.positionAbsolute.y ||
+    a?.measured.width !== b?.measured.width ||
+    a?.measured.height !== b?.measured.height ||
     a?.selected !== b?.selected ||
-    a?.[internalsSymbol]?.z !== b?.[internalsSymbol]?.z;
+    a?.internals.z !== b?.internals.z;
 const nodesEqualityFn = (a, b) => {
-    if (a.length !== b.length) {
+    if (a.size !== b.size) {
         return false;
     }
-    return !a.some((node, i) => nodeEqualityFn(node, b[i]));
+    for (const [key, node] of a) {
+        if (nodeEqualityFn(node, b.get(key))) {
+            return false;
+        }
+    }
+    return true;
 };
 const storeSelector = (state) => ({
-    viewport: {
-        x: state.transform[0],
-        y: state.transform[1],
-        zoom: state.transform[2],
-    },
-    nodeOrigin: state.nodeOrigin,
+    x: state.transform[0],
+    y: state.transform[1],
+    zoom: state.transform[2],
     selectedNodesCount: state.nodes.filter((node) => node.selected).length,
 });
 function NodeToolbar({ nodeId, children, className, style, isVisible, position = Position.Top, offset = 10, align = 'center', ...rest }) {
     const contextNodeId = useNodeId();
     const nodesSelector = useCallback((state) => {
         const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
-        return nodeIds.reduce((acc, id) => {
+        const internalNodes = nodeIds.reduce((res, id) => {
             const node = state.nodeLookup.get(id);
             if (node) {
-                acc.push(node);
+                res.set(node.id, node);
             }
-            return acc;
-        }, []);
+            return res;
+        }, new Map());
+        return internalNodes;
     }, [nodeId, contextNodeId]);
     const nodes = useStore(nodesSelector, nodesEqualityFn);
-    const { viewport, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
+    const { x, y, zoom, selectedNodesCount } = useStore(storeSelector, shallow);
     // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
-    const isActive = typeof isVisible === 'boolean' ? isVisible : nodes.length === 1 && nodes[0].selected && selectedNodesCount === 1;
-    if (!isActive || !nodes.length) {
+    const isActive = typeof isVisible === 'boolean'
+        ? isVisible
+        : nodes.size === 1 && nodes.values().next().value.selected && selectedNodesCount === 1;
+    if (!isActive || !nodes.size) {
         return null;
     }
-    const nodeRect = getNodesBounds(nodes, { nodeOrigin });
-    const zIndex = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
+    const nodeRect = getInternalNodesBounds(nodes);
+    const nodesArray = Array.from(nodes.values());
+    const zIndex = Math.max(...nodesArray.map((node) => node.internals.z + 1));
     const wrapperStyle = {
         position: 'absolute',
-        transform: getNodeToolbarTransform(nodeRect, viewport, position, offset, align),
+        transform: getNodeToolbarTransform(nodeRect, { x, y, zoom }, position, offset, align),
         zIndex,
         ...style,
     };
-    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 }) }));
+    return (jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest, "data-id": nodesArray.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, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, handleParentExpand, isEdge, isNode, 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, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };