@xyflow/react 12.10.0 → 12.10.2

package/dist/esm/additional-components/MiniMap/MiniMap.d.ts

@@ -17,7 +17,7 @@ declare namespace MiniMapComponent {
  *
  *export default function Flow() {
  *  return (
- *    <ReactFlow nodes={[...]]} edges={[...]]}>
+ *    <ReactFlow nodes={[...]} edges={[...]}>
  *      <MiniMap nodeStrokeWidth={3} />
  *    </ReactFlow>
  *  );

package/dist/esm/additional-components/MiniMap/MiniMapNodes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MiniMapNodes.d.ts","sourceRoot":"","sources":["../../../src/additional-components/MiniMap/MiniMapNodes.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,IAAI,iBAAiB,EAA6C,MAAM,SAAS,CAAC;AAQ5G,iBAAS,YAAY,CAAC,QAAQ,SAAS,IAAI,EAAE,EAC3C,eAAe,EACf,SAAS,EACT,aAAkB,EAClB,gBAAoB,EACpB,eAAe,EAKf,aAAa,EAAE,aAA2B,EAC1C,OAAO,GACR,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CAiC7B;wBAgEoC,OAAO,YAAY;AAAxD,wBAAyD"}
+{"version":3,"file":"MiniMapNodes.d.ts","sourceRoot":"","sources":["../../../src/additional-components/MiniMap/MiniMapNodes.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,IAAI,iBAAiB,EAA6C,MAAM,SAAS,CAAC;AAQ5G,iBAAS,YAAY,CAAC,QAAQ,SAAS,IAAI,EAAE,EAC3C,eAAe,EACf,SAAS,EACT,aAAkB,EAClB,gBAAoB,EACpB,eAAe,EAKf,aAAa,EAAE,aAA2B,EAC1C,OAAO,GACR,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CAiC7B;wBAqEoC,OAAO,YAAY;AAAxD,wBAAyD"}

package/dist/esm/components/EdgeWrapper/EdgeUpdateAnchors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeUpdateAnchors.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeWrapper/EdgeUpdateAnchors.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,YAAY,EAKlB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGhE,KAAK,sBAAsB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IAC1D,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC/C,eAAe,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IACrD,WAAW,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC;IACvD,gBAAgB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,CAAC;IACjE,cAAc,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC7D,cAAc,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,GAAG,YAAY,CAAC;AAEjB,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC9D,eAAe,EACf,eAAe,EACf,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,cAAc,GACf,EAAE,sBAAsB,CAAC,QAAQ,CAAC,2CAuGlC"}
+{"version":3,"file":"EdgeUpdateAnchors.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeWrapper/EdgeUpdateAnchors.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,YAAY,EAKlB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGhE,KAAK,sBAAsB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IAC1D,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC/C,eAAe,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IACrD,WAAW,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC;IACvD,gBAAgB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,CAAC;IACjE,cAAc,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC7D,cAAc,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,GAAG,YAAY,CAAC;AAEjB,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC9D,eAAe,EACf,eAAe,EACf,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,cAAc,GACf,EAAE,sBAAsB,CAAC,QAAQ,CAAC,2CAqGlC"}

package/dist/esm/components/NodesSelection/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NodesSelection/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAqB,KAAK,UAAU,EAAsB,MAAM,OAAO,CAAC;AAS/E,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,mBAAmB,CAAC,QAAQ,IAAI;IAC1C,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAeF,wBAAgB,cAAc,CAAC,QAAQ,SAAS,IAAI,EAAE,EACpD,sBAAsB,EACtB,cAAc,EACd,mBAAmB,GACpB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,kDA6D/B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NodesSelection/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAqB,KAAK,UAAU,EAAsB,MAAM,OAAO,CAAC;AAS/E,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,mBAAmB,CAAC,QAAQ,IAAI;IAC1C,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAeF,wBAAgB,cAAc,CAAC,QAAQ,SAAS,IAAI,EAAE,EACpD,sBAAsB,EACtB,cAAc,EACd,mBAAmB,GACpB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,kDAgE/B"}

package/dist/esm/components/StoreUpdater/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAkB,cAAc,EAAkB,MAAM,aAAa,CAAC;AAI9F,QAAA,MAAM,sBAAsB,q/BA2DlB,CAAC;AAEX,KAAK,sBAAsB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CACvF,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAClC,sBAAsB,CACvB,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AA+BF,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EACrF,KAAK,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAyD7C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAkB,cAAc,EAAkB,MAAM,aAAa,CAAC;AAI9F,QAAA,MAAM,sBAAsB,q/BA2DlB,CAAC;AAEX,KAAK,sBAAsB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CACvF,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAClC,sBAAsB,CACvB,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AA+BF,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EACrF,KAAK,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,QA8D7C"}

package/dist/esm/container/ZoomPane/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ZoomPane/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CACvB,iBAAiB,EACjB,eAAe,GAAG,kBAAkB,GAAG,uBAAuB,GAAG,iBAAiB,GAAG,qBAAqB,CAC3G,GAAG;IACF,oBAAoB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAQF,wBAAgB,QAAQ,CAAC,EACvB,iBAAiB,EACjB,YAAmB,EACnB,WAAkB,EAClB,WAAmB,EACnB,gBAAsB,EACtB,eAAsC,EACtC,iBAAwB,EACxB,SAAgB,EAChB,eAAe,EACf,eAAe,EACf,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAuB,EACvB,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,EAAE,aAAa,2CA2Gf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ZoomPane/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CACvB,iBAAiB,EACjB,eAAe,GAAG,kBAAkB,GAAG,uBAAuB,GAAG,iBAAiB,GAAG,qBAAqB,CAC3G,GAAG;IACF,oBAAoB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAQF,wBAAgB,QAAQ,CAAC,EACvB,iBAAiB,EACjB,YAAmB,EACnB,WAAkB,EAClB,WAAmB,EACnB,gBAAsB,EACtB,eAAsC,EACtC,iBAAwB,EACxB,SAAgB,EAChB,eAAe,EACf,eAAe,EACf,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAuB,EACvB,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,EAAE,aAAa,2CA4Gf"}

package/dist/esm/hooks/useDrag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../src/hooks/useDrag.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpE,KAAK,aAAa,GAAG;IACnB,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAgB,EAChB,eAAe,EACf,cAAc,EACd,MAAM,EACN,YAAY,EACZ,iBAAiB,GAClB,EAAE,aAAa,WA2Cf"}
+{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../src/hooks/useDrag.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpE,KAAK,aAAa,GAAG;IACnB,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAgB,EAChB,eAAe,EACf,cAAc,EACd,MAAM,EACN,YAAY,EACZ,iBAAiB,GAClB,EAAE,aAAa,WA4Cf"}

package/dist/esm/hooks/useNodesData.d.ts

@@ -1,3 +1,4 @@
+import { DistributivePick } from '@xyflow/system';
 import type { Node } from '../types';
 /**
  * This hook lets you subscribe to changes of a specific nodes `data` object.
@@ -19,8 +20,8 @@ import type { Node } from '../types';
  */
 export declare function useNodesData<NodeType extends Node = Node>(
 /** The id of the node to get the data from. */
-nodeId: string): Pick<NodeType, 'id' | 'type' | 'data'> | null;
+nodeId: string): DistributivePick<NodeType, 'id' | 'type' | 'data'> | null;
 export declare function useNodesData<NodeType extends Node = Node>(
 /** The ids of the nodes to get the data from. */
-nodeIds: string[]): Pick<NodeType, 'id' | 'type' | 'data'>[];
+nodeIds: string[]): DistributivePick<NodeType, 'id' | 'type' | 'data'>[];
 //# sourceMappingURL=useNodesData.d.ts.map

package/dist/esm/hooks/useNodesData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodesData.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesData.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI;AACvD,+CAA+C;AAC/C,MAAM,EAAE,MAAM,GACb,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;AACjD,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI;AACvD,iDAAiD;AACjD,OAAO,EAAE,MAAM,EAAE,GAChB,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC"}
+{"version":3,"file":"useNodesData.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesData.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAmB,MAAM,gBAAgB,CAAC;AAGnE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI;AACvD,+CAA+C;AAC/C,MAAM,EAAE,MAAM,GACb,gBAAgB,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;AAC7D,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI;AACvD,iDAAiD;AACjD,OAAO,EAAE,MAAM,EAAE,GAChB,gBAAgB,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC"}

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo, forwardRef, useEffect, useRef, useState, useLayoutEffect, useCallback, memo } from 'react';
+import { createContext, useContext, useMemo, forwardRef, useEffect, useLayoutEffect, useRef, useState, useCallback, memo } from 'react';
 import cc from 'classcat';
 import { errorMessages, mergeAriaLabelConfig, infiniteExtent, isInputDOMNode, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getNodesBounds, withResolvers, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, areSetsEqual, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, defaultAriaLabelConfig, updateNodeInternals, updateAbsolutePositions, getHandlePosition, handleExpandParent, panBy, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform, getEdgeToolbarTransform } from '@xyflow/system';
 export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, reconnectEdge } from '@xyflow/system';
@@ -172,6 +172,9 @@ function SelectionListener({ onSelectionChange, }) {
     return null;
 }
 
+// we need this hook to prevent a warning when using react-flow in SSR
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 const defaultNodeOrigin = [0, 0];
 const defaultViewport = { x: 0, y: 0, zoom: 1 };
 
@@ -270,7 +273,12 @@ const initPrevValues = {
 function StoreUpdater(props) {
     const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$l, shallow);
     const store = useStoreApi();
-    useEffect(() => {
+    // We use layout effects here so that the store is always populated before
+    // any child useEffect or useLayoutEffect fires. With regular useEffect, the
+    // cleanup calls reset() which empties the store, and child effects can run
+    // before the new mount effect repopulates it — causing children to read
+    // empty nodeLookup/nodes/edges during a <ReactFlow> remount.
+    useIsomorphicLayoutEffect(() => {
         setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
         return () => {
             // when we reset the store we also need to reset the previous fields
@@ -279,7 +287,7 @@ function StoreUpdater(props) {
         };
     }, []);
     const previousFields = useRef(initPrevValues);
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         for (const fieldName of fieldsToTrack) {
             const fieldValue = props[fieldName];
             const previousFieldValue = previousFields.current[fieldName];
@@ -502,15 +510,15 @@ const useViewportHelper = () => {
         return {
             zoomIn: (options) => {
                 const { panZoom } = store.getState();
-                return panZoom ? panZoom.scaleBy(1.2, { duration: options?.duration }) : Promise.resolve(false);
+                return panZoom ? panZoom.scaleBy(1.2, options) : Promise.resolve(false);
             },
             zoomOut: (options) => {
                 const { panZoom } = store.getState();
-                return panZoom ? panZoom.scaleBy(1 / 1.2, { duration: options?.duration }) : Promise.resolve(false);
+                return panZoom ? panZoom.scaleBy(1 / 1.2, options) : Promise.resolve(false);
             },
             zoomTo: (zoomLevel, options) => {
                 const { panZoom } = store.getState();
-                return panZoom ? panZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(false);
+                return panZoom ? panZoom.scaleTo(zoomLevel, options) : Promise.resolve(false);
             },
             getZoom: () => store.getState().transform[2],
             setViewport: async (viewport, options) => {
@@ -868,9 +876,6 @@ function fixedForwardRef(render) {
     return forwardRef(render);
 }
 
-// we need this hook to prevent a warning when using react-flow in SSR
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
 /**
  * This hook returns a queue that can be used to batch updates.
  *
@@ -1301,7 +1306,7 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
                 maxZoom,
                 translateExtent,
                 viewport: defaultViewport,
-                onDraggingChange: (paneDragging) => store.setState({ paneDragging }),
+                onDraggingChange: (paneDragging) => store.setState((prevState) => prevState.paneDragging === paneDragging ? prevState : { paneDragging }),
                 onPanZoomStart: (event, vp) => {
                     const { onViewportChangeStart, onMoveStart } = store.getState();
                     onMoveStart?.(event, vp);
@@ -1605,23 +1610,21 @@ function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, n
         });
     }, []);
     useEffect(() => {
-        if (disabled) {
-            xyDrag.current?.destroy();
-        }
-        else if (nodeRef.current) {
-            xyDrag.current?.update({
-                noDragClassName,
-                handleSelector,
-                domNode: nodeRef.current,
-                isSelectable,
-                nodeId,
-                nodeClickDistance,
-            });
-            return () => {
-                xyDrag.current?.destroy();
-            };
+        if (disabled || !nodeRef.current || !xyDrag.current) {
+            return;
         }
-    }, [noDragClassName, handleSelector, disabled, isSelectable, nodeRef, nodeId]);
+        xyDrag.current.update({
+            noDragClassName,
+            handleSelector,
+            domNode: nodeRef.current,
+            isSelectable,
+            nodeId,
+            nodeClickDistance,
+        });
+        return () => {
+            xyDrag.current?.destroy();
+        };
+    }, [noDragClassName, handleSelector, disabled, isSelectable, nodeRef, nodeId, nodeClickDistance]);
     return dragging;
 }
 
@@ -1777,10 +1780,10 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
                 panBy: currentStore.panBy,
                 cancelConnection: currentStore.cancelConnection,
                 onConnectStart: currentStore.onConnectStart,
-                onConnectEnd: currentStore.onConnectEnd,
+                onConnectEnd: (...args) => store.getState().onConnectEnd?.(...args),
                 updateConnection: currentStore.updateConnection,
                 onConnect: onConnectExtended,
-                isValidConnection: isValidConnection || currentStore.isValidConnection,
+                isValidConnection: isValidConnection || ((...args) => store.getState().isValidConnection?.(...args) ?? true),
                 getTransform: () => store.getState().transform,
                 getFromHandle: () => store.getState().connection.fromHandle,
                 autoPanSpeed: currentStore.autoPanSpeed,
@@ -1948,10 +1951,12 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
             });
         }
     }, [disableKeyboardA11y]);
+    const shouldRender = !userSelectionActive && width !== null && height !== null;
     useDrag({
         nodeRef,
+        disabled: !shouldRender,
     });
-    if (userSelectionActive || !width || !height) {
+    if (!shouldRender) {
         return null;
     }
     const onContextMenu = onSelectionContextMenu
@@ -2746,7 +2751,7 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, so
         if (event.button !== 0) {
             return;
         }
-        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodeLookup, rfId: flowId, panBy, updateConnection, } = store.getState();
+        const { autoPanOnConnect, domNode, connectionMode, connectionRadius, lib, onConnectStart, cancelConnection, nodeLookup, rfId: flowId, panBy, updateConnection, } = store.getState();
         const isTarget = oppositeHandle.type === 'target';
         const _onReconnectEnd = (evt, connectionState) => {
             setReconnecting(false);
@@ -2772,10 +2777,10 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, so
             flowId,
             cancelConnection,
             panBy,
-            isValidConnection,
+            isValidConnection: (...args) => store.getState().isValidConnection?.(...args) ?? true,
             onConnect: onConnectEdge,
             onConnectStart: _onConnectStart,
-            onConnectEnd,
+            onConnectEnd: (...args) => store.getState().onConnectEnd?.(...args),
             onReconnectEnd: _onReconnectEnd,
             updateConnection,
             getTransform: () => store.getState().transform,
@@ -3134,7 +3139,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     const storeNodeOrigin = nodeOrigin ?? [0, 0];
     const storeNodeExtent = nodeExtent ?? infiniteExtent;
     updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
-    const nodesInitialized = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
+    const { nodesInitialized } = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
         nodeOrigin: storeNodeOrigin,
         nodeExtent: storeNodeExtent,
         zIndexMode,
@@ -3252,7 +3257,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             zIndexMode,
         }),
         setNodes: (nodes) => {
-            const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued, zIndexMode } = get();
+            const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued, zIndexMode, nodesSelectionActive, } = get();
             /*
              * setNodes() is called exclusively in response to user actions:
              * - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
@@ -3261,19 +3266,26 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
              * When this happens, we take the note objects passed by the user and extend them with fields
              * relevant for internal React Flow operations.
              */
-            const nodesInitialized = adoptUserNodes(nodes, nodeLookup, parentLookup, {
+            const { nodesInitialized, hasSelectedNodes } = adoptUserNodes(nodes, nodeLookup, parentLookup, {
                 nodeOrigin,
                 nodeExtent,
                 elevateNodesOnSelect,
                 checkEquality: true,
                 zIndexMode,
             });
+            const nextNodesSelectionActive = nodesSelectionActive && hasSelectedNodes;
             if (fitViewQueued && nodesInitialized) {
                 resolveFitView();
-                set({ nodes, nodesInitialized, fitViewQueued: false, fitViewOptions: undefined });
+                set({
+                    nodes,
+                    nodesInitialized,
+                    fitViewQueued: false,
+                    fitViewOptions: undefined,
+                    nodesSelectionActive: nextNodesSelectionActive
+                });
             }
             else {
-                set({ nodes, nodesInitialized });
+                set({ nodes, nodesInitialized, nodesSelectionActive: nextNodesSelectionActive });
             }
         },
         setEdges: (edges) => {
@@ -3294,7 +3306,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             }
         },
         /*
-         * Every node gets registerd at a ResizeObserver. Whenever a node
+         * Every node gets registered at a ResizeObserver. Whenever a node
          * changes its dimensions, this function is called to measure the
          * new dimensions and update the nodes.
          */
@@ -3416,8 +3428,12 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             const { edges: storeEdges, nodes: storeNodes, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
             const nodesToUnselect = nodes ? nodes : storeNodes;
             const edgesToUnselect = edges ? edges : storeEdges;
-            const nodeChanges = nodesToUnselect.map((n) => {
-                const internalNode = nodeLookup.get(n.id);
+            const nodeChanges = [];
+            for (const node of nodesToUnselect) {
+                if (!node.selected) {
+                    continue; // skip changing nodes that are not selected
+                }
+                const internalNode = nodeLookup.get(node.id);
                 if (internalNode) {
                     /*
                      * we need to unselect the internal node that was selected previously before we
@@ -3425,9 +3441,15 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
                      */
                     internalNode.selected = false;
                 }
-                return createSelectionChange(n.id, false);
-            });
-            const edgeChanges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
+                nodeChanges.push(createSelectionChange(node.id, false));
+            }
+            const edgeChanges = [];
+            for (const edge of edgesToUnselect) {
+                if (!edge.selected) {
+                    continue; // skip changing edges that are not selected
+                }
+                edgeChanges.push(createSelectionChange(edge.id, false));
+            }
             triggerNodeChanges(nodeChanges);
             triggerEdgeChanges(edgeChanges);
         },
@@ -3581,7 +3603,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
         e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
         onScroll?.(e);
     }, [onScroll]);
-    return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, role: "application", children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, zIndexMode: zIndexMode, 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, nodeClickDistance: nodeClickDistance, 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, autoPanOnNodeFocus: autoPanOnNodeFocus, 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, connectionDragThreshold: connectionDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug, ariaLabelConfig: ariaLabelConfig, zIndexMode: zIndexMode }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
+    return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, role: "application", children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, zIndexMode: zIndexMode, children: [jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, autoPanOnNodeFocus: autoPanOnNodeFocus, 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, connectionDragThreshold: connectionDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug, ariaLabelConfig: ariaLabelConfig, zIndexMode: zIndexMode }), 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, nodeClickDistance: nodeClickDistance, 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(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
 }
 /**
  * The `<ReactFlow />` component is the heart of your React Flow application.
@@ -4092,7 +4114,7 @@ function useHandleConnections({ type, id, nodeId, onConnect, onDisconnect, }) {
     const prevConnections = useRef(null);
     const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}-${type}${id ? `-${id}` : ''}`), areConnectionMapsEqual);
     useEffect(() => {
-        // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts
+        // @todo discuss if onConnect/onDisconnect should be called when the component mounts/unmounts
         if (prevConnections.current && prevConnections.current !== connections) {
             const _connections = connections ?? new Map();
             handleConnectionChange(prevConnections.current, _connections, onDisconnect);
@@ -4490,12 +4512,15 @@ nodeComponent: NodeComponent = MiniMapNode, onClick, }) {
 }
 function NodeComponentWrapperInner({ id, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
     const { node, x, y, width, height } = useStore((s) => {
-        const { internals } = s.nodeLookup.get(id);
-        const node = internals.userNode;
-        const { x, y } = internals.positionAbsolute;
-        const { width, height } = getNodeDimensions(node);
+        const node = s.nodeLookup.get(id);
+        if (!node) {
+            return { node: undefined, x: 0, y: 0, width: 0, height: 0 };
+        }
+        const userNode = node.internals.userNode;
+        const { x, y } = node.internals.positionAbsolute;
+        const { width, height } = getNodeDimensions(userNode);
         return {
-            node,
+            node: userNode,
             x,
             y,
             width,
@@ -4622,7 +4647,7 @@ MiniMapComponent.displayName = 'MiniMap';
  *
  *export default function Flow() {
  *  return (
- *    <ReactFlow nodes={[...]]} edges={[...]]}>
+ *    <ReactFlow nodes={[...]} edges={[...]}>
  *      <MiniMap nodeStrokeWidth={3} />
  *    </ReactFlow>
  *  );