@xyflow/react 12.0.0-next.13 → 12.0.0-next.15

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, nodeToRect, isRectObject, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getNodesBounds, clampPosition, getNodeDimensions, nodeHasDimensions, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionLineType, updateConnectionLookup, adoptUserNodes, devWarn, updateNodeDimensions, updateAbsolutePositions, handleParentExpand, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, getInternalNodesBounds, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
+import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, evaluateAbsolutePosition, nodeToRect, isRectObject, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, nodeHasDimensions, getNodeDimensions, clampPosition, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionLineType, updateConnectionLookup, adoptUserNodes, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodesBounds, getNodeToolbarTransform } from '@xyflow/system';
 export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, updateEdge } from '@xyflow/system';
 import { createContext, useContext, useMemo, useEffect, useRef, useState, forwardRef, useLayoutEffect, useCallback, memo } from 'react';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
@@ -40,7 +40,6 @@ function useStoreApi() {
         getState: store.getState,
         setState: store.setState,
         subscribe: store.subscribe,
-        destroy: store.destroy,
     }), [store]);
 }
 
@@ -82,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: Array.from(s.nodeLookup.values()).filter((n) => n.selected),
-    selectedEdges: s.edges.filter((e) => e.selected),
-});
+const selector$o = (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)) &&
@@ -548,7 +558,7 @@ function applyChange(change, element) {
                 element.measured ??= {};
                 element.measured.width = change.dimensions.width;
                 element.measured.height = change.dimensions.height;
-                if (change.resizing) {
+                if (change.setAttributes) {
                     element.width = change.dimensions.width;
                     element.height = change.dimensions.height;
                 }
@@ -615,8 +625,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) {
@@ -692,10 +702,7 @@ function useReactFlow() {
         const { edges = [] } = store.getState();
         return edges.map((e) => ({ ...e }));
     }, []);
-    const getEdge = useCallback((id) => {
-        const { edges = [] } = store.getState();
-        return edges.find((e) => e.id === id);
-    }, []);
+    const getEdge = useCallback((id) => store.getState().edgeLookup.get(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.
@@ -825,13 +832,25 @@ function useReactFlow() {
         }
         return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
     }, []);
-    const getNodeRect = useCallback(({ id }) => {
-        const internalNode = store.getState().nodeLookup.get(id);
-        return internalNode ? nodeToRect(internalNode) : null;
+    const getNodeRect = useCallback((node) => {
+        const { nodeLookup, nodeOrigin } = store.getState();
+        const nodeToUse = isNode(node) ? node : nodeLookup.get(node.id);
+        const position = nodeToUse.parentId
+            ? evaluateAbsolutePosition(nodeToUse.position, 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 getIntersectingNodes = useCallback((nodeOrRect, partially = true, nodes) => {
         const isRect = isRectObject(nodeOrRect);
         const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+        const hasNodesOption = nodes !== undefined;
         if (!nodeRect) {
             return [];
         }
@@ -840,7 +859,7 @@ function useReactFlow() {
             if (internalNode && !isRect && (n.id === nodeOrRect.id || !internalNode.internals.positionAbsolute)) {
                 return false;
             }
-            const currNodeRect = nodeToRect(n);
+            const currNodeRect = nodeToRect(hasNodesOption ? n : internalNode);
             const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
             const partiallyVisible = partially && overlappingArea > 0;
             return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
@@ -856,7 +875,7 @@ function useReactFlow() {
         const partiallyVisible = partially && overlappingArea > 0;
         return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
     }, []);
-    const updateNode = useCallback((id, nodeUpdate, options = { replace: true }) => {
+    const updateNode = useCallback((id, nodeUpdate, options = { replace: false }) => {
         setNodes((prevNodes) => prevNodes.map((node) => {
             if (node.id === id) {
                 const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node) : nodeUpdate;
@@ -1100,6 +1119,7 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
     const prevSelectedNodesCount = useRef(0);
     const prevSelectedEdgesCount = useRef(0);
     const containerBounds = useRef();
+    const edgeIdLookup = useRef(new Map());
     const { userSelectionActive, elementsSelectable, dragging } = useStore(selector$j, shallow);
     const resetUserSelection = () => {
         store.setState({ userSelectionActive: false, userSelectionRect: null });
@@ -1120,7 +1140,7 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
     };
     const onWheel = onPaneScroll ? (event) => onPaneScroll(event) : undefined;
     const onMouseDown = (event) => {
-        const { resetSelectedElements, domNode } = store.getState();
+        const { resetSelectedElements, domNode, edgeLookup } = store.getState();
         containerBounds.current = domNode?.getBoundingClientRect();
         if (!elementsSelectable ||
             !isSelecting ||
@@ -1129,6 +1149,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({
@@ -1148,24 +1173,24 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         if (!isSelecting || !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;
+        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(nodeLookup, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true, nodeOrigin);
         const selectedEdgeIds = new Set();
         const selectedNodeIds = new Set();
         for (const selectedNode of selectedNodes) {
             selectedNodeIds.add(selectedNode.id);
-            for (const [edgeId, edge] of edgeLookup) {
-                if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
+            const edgeIds = edgeIdLookup.current.get(selectedNode.id);
+            if (edgeIds) {
+                for (const edgeId of edgeIds) {
                     selectedEdgeIds.add(edgeId);
                 }
             }
@@ -1182,6 +1207,8 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         }
         store.setState({
             userSelectionRect: nextUserSelectRect,
+            userSelectionActive: true,
+            nodesSelectionActive: false,
         });
     };
     const onMouseUp = (event) => {
@@ -1288,7 +1315,7 @@ function useMoveSelectedNodes() {
     const store = useStoreApi();
     const moveSelectedNodes = useCallback((params) => {
         const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } = store.getState();
-        const nodeUpdates = [];
+        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
@@ -1317,7 +1344,7 @@ function useMoveSelectedNodes() {
             });
             node.position = position;
             node.internals.positionAbsolute = positionAbsolute;
-            nodeUpdates.push(node);
+            nodeUpdates.set(node.id, node);
         }
         updateNodePositions(nodeUpdates);
     }, []);
@@ -1515,13 +1542,10 @@ function getNodeInlineStyleDimensions(node) {
 }
 
 const selector$h = (s) => {
-    const selectedNodes = [];
-    for (const [, node] of s.nodeLookup) {
-        if (node.selected) {
-            selectedNodes.push(node);
-        }
-    }
-    const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
+    const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
+        nodeOrigin: s.nodeOrigin,
+        filter: (node) => !!node.selected,
+    });
     return {
         width,
         height,
@@ -1602,15 +1626,14 @@ function useVisibleNodeIds(onlyRenderVisible) {
     return nodeIds;
 }
 
-const selector$e = (s) => s.updateNodeDimensions;
+const selector$e = (s) => s.updateNodeInternals;
 function useResizeObserver() {
-    const updateNodeDimensions = useStore(selector$e);
-    const resizeObserverRef = useRef();
-    const resizeObserver = useMemo(() => {
+    const updateNodeInternals = useStore(selector$e);
+    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');
@@ -1619,33 +1642,76 @@ function useResizeObserver() {
                     nodeElement: entry.target,
                 });
             });
-            updateNodeDimensions(updates);
+            updateNodeInternals(updates);
         });
-        resizeObserverRef.current = observer;
-        return observer;
-    }, []);
+    });
     useEffect(() => {
         return () => {
-            resizeObserverRef?.current?.disconnect();
+            resizeObserver?.disconnect();
         };
-    }, []);
+    }, [resizeObserver]);
     return resizeObserver;
 }
 
+/**
+ * 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 && !node.hidden;
+    useEffect(() => {
+        if (nodeRef.current && (!isInitialized || observedNode.current !== nodeRef.current)) {
+            if (observedNode.current) {
+                resizeObserver?.unobserve(observedNode.current);
+            }
+            resizeObserver?.observe(nodeRef.current);
+            observedNode.current = nodeRef.current;
+        }
+    }, [isInitialized]);
+    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, nodeOrigin, onError, }) {
-    const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
+    const { node, internals, isParent } = useStore((s) => {
         const node = s.nodeLookup.get(id);
-        const positionAbsolute = nodeExtent
-            ? clampPosition(node.internals.positionAbsolute, nodeExtent)
-            : node.internals.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.internals.z,
-            isParent: node.internals.isParent,
+            internals: node.internals,
+            isParent,
         };
     }, shallow);
     let nodeType = node.type || 'default';
@@ -1660,50 +1726,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 nodeDimensions = getNodeDimensions(node);
-    const inlineDimensions = getNodeInlineStyleDimensions(node);
-    const initialized = nodeHasDimensions(node);
-    const hasHandleBounds = !!node.internals.handleBounds;
-    const moveSelectedNodes = useMoveSelectedNodes();
-    useEffect(() => {
-        const currNode = nodeRef.current;
-        return () => {
-            if (currNode) {
-                resizeObserver?.unobserve(currNode);
-            }
-        };
-    }, []);
-    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, force: 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,
@@ -1712,12 +1736,17 @@ 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,
+    const nodeDimensions = getNodeDimensions(node);
+    const inlineDimensions = getNodeInlineStyleDimensions(node);
+    const clampedPosition = nodeExtent
+        ? clampPosition(internals.positionAbsolute, nodeExtent)
+        : internals.positionAbsolute;
+    const positionWithOrigin = getPositionWithOrigin({
+        ...clampedPosition,
         ...nodeDimensions,
         origin: node.origin || nodeOrigin,
     });
@@ -1759,7 +1788,7 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
             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],
@@ -1783,13 +1812,13 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
                 dragging,
             },
         ]), ref: nodeRef, style: {
-            zIndex,
-            transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
+            zIndex: internals.z,
+            transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
             pointerEvents: hasPointerEvents ? 'all' : 'none',
-            visibility: initialized ? 'visible' : 'hidden',
+            visibility: hasDimensions ? 'visible' : 'hidden',
             ...node.style,
             ...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: positionAbsoluteX, positionAbsoluteY: positionAbsoluteY, selected: node.selected, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: zIndex, ...nodeDimensions }) }) }));
+        }, "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, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: internals.z, ...nodeDimensions }) }) }));
 }
 
 const selector$d = (s) => ({
@@ -2364,7 +2393,7 @@ const ConnectionLine = ({ nodeId, handleType, style, type = ConnectionLineType.B
         toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
         connectionMode: s.connectionMode,
     }), [nodeId]), shallow);
-    const fromHandleBounds = fromNode?.internals?.handleBounds;
+    const fromHandleBounds = fromNode?.internals.handleBounds;
     let handleBounds = fromHandleBounds?.[handleType];
     if (connectionMode === ConnectionMode.Loose) {
         handleBounds = handleBounds ? handleBounds : fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'];
@@ -2375,8 +2404,8 @@ const ConnectionLine = ({ nodeId, handleType, style, type = ConnectionLineType.B
     const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
     const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.measured.width ?? 0) / 2;
     const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.measured.height ?? 0;
-    const fromX = (fromNode.internals.positionAbsolute.x ?? 0) + fromHandleX;
-    const fromY = (fromNode.internals.positionAbsolute.y ?? 0) + fromHandleY;
+    const fromX = fromNode.internals.positionAbsolute.x + fromHandleX;
+    const fromY = fromNode.internals.positionAbsolute.y + fromHandleY;
     const fromPosition = fromHandle?.position;
     const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
     if (!fromPosition || !toPosition) {
@@ -2460,20 +2489,23 @@ const GraphView = memo(GraphViewComponent);
 
 const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, } = {}) => {
     const nodeLookup = new Map();
+    const parentLookup = new Map();
     const connectionLookup = new Map();
     const edgeLookup = new Map();
     const storeEdges = defaultEdges ?? edges ?? [];
     const storeNodes = defaultNodes ?? nodes ?? [];
     updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
-    adoptUserNodes(storeNodes, nodeLookup, {
+    adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
         nodeOrigin: [0, 0],
         elevateNodesOnSelect: false,
     });
     let transform = [0, 0, 1];
     if (fitView && width && height) {
-        const nodesWithDimensions = storeNodes.filter((node) => (node.width || node.initialWidth) && (node.height || node.initialHeight));
         // @todo users nodeOrigin should be used here
-        const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
+        const bounds = getInternalNodesBounds(nodeLookup, {
+            nodeOrigin: [0, 0],
+            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];
     }
@@ -2484,6 +2516,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         transform,
         nodes: storeNodes,
         nodeLookup,
+        parentLookup,
         edges: storeEdges,
         edgeLookup,
         connectionLookup,
@@ -2538,17 +2571,17 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     };
 };
 
-const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, }) => createWithEqualityFn((set, get) => ({
+const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, }) => createWithEqualityFn((set, get) => ({
     ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, 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.
-        adoptUserNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
+        adoptUserNodes(nodes, nodeLookup, parentLookup, { nodeOrigin, elevateNodesOnSelect, checkEquality: true });
         set({ nodes });
     },
     setEdges: (edges) => {
@@ -2571,10 +2604,10 @@ 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, nodeLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug, } = get();
-        const changes = updateNodeDimensions(updates, nodeLookup, domNode, nodeOrigin);
-        if (changes.length === 0) {
+    updateNodeInternals: (updates) => {
+        const { onNodesChange, fitView, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug, } = get();
+        const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin);
+        if (!updatedInternals) {
             return;
         }
         updateAbsolutePositions(nodeLookup, { nodeOrigin });
@@ -2600,33 +2633,34 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
         }
     },
     updateNodePositions: (nodeDragItems, dragging = false) => {
-        const { nodeLookup } = get();
-        const triggerChangeNodes = [];
-        const changes = nodeDragItems.map((node) => {
+        const parentExpandChildren = [];
+        const changes = [];
+        for (const [id, dragItem] of nodeDragItems) {
             // @todo add expandParent to drag item so that we can get rid of the look up here
-            const internalNode = nodeLookup.get(node.id);
             const change = {
-                id: node.id,
+                id,
                 type: 'position',
-                position: node.position,
+                position: dragItem.position,
                 dragging,
             };
-            if (internalNode?.expandParent && change.position) {
-                triggerChangeNodes.push({
-                    ...internalNode,
-                    position: change.position,
-                    internals: {
-                        ...internalNode.internals,
-                        positionAbsolute: node.internals.positionAbsolute,
+            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);
             }
-            return change;
-        });
-        if (triggerChangeNodes.length > 0) {
-            const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
+            changes.push(change);
+        }
+        if (parentExpandChildren.length > 0) {
+            const { nodeLookup, parentLookup } = get();
+            const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
             changes.push(...parentExpandChanges);
         }
         get().triggerNodeChanges(changes);
@@ -2761,20 +2795,17 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
     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, children, }) {
+    const [store] = useState(() => createStore({
+        nodes,
+        edges,
+        defaultNodes,
+        defaultEdges,
+        width,
+        height,
+        fitView,
+    }));
+    return jsx(Provider$1, { value: store, children: children });
 }
 
 function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, }) {
@@ -2828,7 +2859,7 @@ 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) => {
@@ -2837,7 +2868,7 @@ function useUpdateNodeInternals() {
                 updates.set(updateId, { id: updateId, nodeElement, force: true });
             }
         });
-        requestAnimationFrame(() => updateNodeDimensions(updates));
+        requestAnimationFrame(() => updateNodeInternals(updates));
     }, []);
 }
 
@@ -3193,7 +3224,7 @@ nodeComponent: NodeComponent = MiniMapNode, onClick, }) {
 function NodeComponentWrapperInner({ id, nodeOrigin, 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 } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
         return {
             node,
             x,
@@ -3333,24 +3364,43 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                     };
                 },
                 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 child = {
+                            id: node.id,
+                            parentId: node.parentId,
+                            rect: {
+                                width: change.width ?? node.measured.width,
+                                height: change.height ?? node.measured.height,
+                                ...evaluateAbsolutePosition({
+                                    x: change.x ?? node.position.x,
+                                    y: change.y ?? node.position.y,
+                                }, node.parentId, nodeLookup, node.origin ?? nodeOrigin),
+                            },
+                        };
+                        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
+                        nextPosition.x = change.x ? Math.max(0, change.x) : undefined;
+                        nextPosition.y = change.y ? Math.max(0, 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,
@@ -3470,7 +3520,7 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
         return null;
     }
     const nodeRect = getNodesBounds(nodes, { nodeOrigin });
-    const zIndex = Math.max(...nodes.map((node) => (node.internals?.z || 1) + 1));
+    const zIndex = Math.max(...nodes.map((node) => node.internals.z + 1));
     const wrapperStyle = {
         position: 'absolute',
         transform: getNodeToolbarTransform(nodeRect, viewport, position, offset, align),