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

package/dist/base.css

@@ -127,8 +127,8 @@
     outline: none;
   }
 .react-flow__edge.selected .react-flow__edge-path,
-  .react-flow__edge:focus .react-flow__edge-path,
-  .react-flow__edge:focus-visible .react-flow__edge-path {
+  .react-flow__edge.selectable:focus .react-flow__edge-path,
+  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
     stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
   }
 .react-flow__edge-textwrapper {
@@ -356,17 +356,3 @@ svg.react-flow__connectionline {
   background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
   border: var(--xy-selection-border, var(--xy-selection-border-default));
 }
-.react-flow {
-  --edge-label-background-color-default: #ffffff;
-  --edge-label-color-default: inherit;
-}
-.react-flow.dark {
-  --edge-label-background-color-default: #141414;
-  --edge-label-color-default: #f8f8f8;
-}
-.react-flow__edge-textbg {
-  fill: var(--edge-label-background-color, var(--edge-label-background-color-default));
-}
-.react-flow__edge-text {
-  fill: var(--edge-label-color, var(--edge-label-color-default));
-}

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

@@ -1 +1 @@
-{"version":3,"file":"MiniMap.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/MiniMap/MiniMap.tsx"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA2B5C,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,EACT,eAAe,EACf,SAAS,EACT,aAAkB,EAClB,gBAAoB,EACpB,eAAe,EAGf,aAAa,EACb,SAAS,EACT,eAAwB,EACxB,eAAmB,EACnB,QAAyB,EACzB,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,SAAiC,EACjC,UAAU,EACV,QAAa,EACb,WAAe,GAChB,EAAE,YAAY,2CA6Gd;kBApIQ,gBAAgB;;;AAwIzB,eAAO,MAAM,OAAO,8DAAyB,CAAC"}
+{"version":3,"file":"MiniMap.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/MiniMap/MiniMap.tsx"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA4B5C,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,EACT,eAAe,EACf,SAAS,EACT,aAAkB,EAClB,gBAAoB,EACpB,eAAe,EAGf,aAAa,EACb,SAAS,EACT,eAAwB,EACxB,eAAmB,EACnB,QAAyB,EACzB,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,SAAiC,EACjC,UAAU,EACV,QAAa,EACb,WAAe,GAChB,EAAE,YAAY,2CA6Gd;kBApIQ,gBAAgB;;;AAwIzB,eAAO,MAAM,OAAO,8DAAyB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/EdgeWrapper/index.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,SAAS,EACT,cAAc,EACd,OAAO,GACR,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+NvC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/EdgeWrapper/index.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,SAAS,EACT,cAAc,EACd,OAAO,GACR,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAgOvC"}

package/dist/esm/components/Handle/index.d.ts

@@ -1,5 +1,9 @@
 import { HTMLAttributes } from 'react';
 import { type HandleProps } from '@xyflow/system';
-export type HandleComponentProps = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;
-export declare const Handle: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, "id"> & import("react").RefAttributes<HTMLDivElement>>>;
+export interface HandleComponentProps extends HandleProps, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+}
+/**
+ * The Handle component is the part of a node that can be used to connect nodes.
+ */
+export declare const Handle: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<HandleComponentProps & import("react").RefAttributes<HTMLDivElement>>>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/Handle/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAQ,cAAc,EAA4E,MAAM,OAAO,CAAC;AAGvH,OAAO,EAOL,KAAK,WAAW,EAGjB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,CAAC;AAuM5F,eAAO,MAAM,MAAM,0LAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/Handle/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAQ,cAAc,EAA4E,MAAM,OAAO,CAAC;AAGvH,OAAO,EAOL,KAAK,WAAW,EAGjB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,WAAW,oBAAqB,SAAQ,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC;CAAG;AAuMxG;;GAEG;AACH,eAAO,MAAM,MAAM,sJAAwB,CAAC"}

package/dist/esm/container/EdgeRenderer/MarkerDefinitions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkerDefinitions.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx"],"names":[],"mappings":";AAOA,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;;;;;AAgFF,wBAAuC"}
+{"version":3,"file":"MarkerDefinitions.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx"],"names":[],"mappings":";AAMA,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;;;;;AAgFF,wBAAuC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/container/FlowRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM9C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,cAAc,EACZ,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,GACV,oBAAoB,GACpB,8BAA8B,GAC9B,gBAAgB,GAChB,2BAA2B,GAC3B,mBAAmB,GACnB,oBAAoB,GACpB,MAAM,GACN,YAAY,CACf,GAAG;IACF,oBAAoB,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAqGF,eAAO,MAAM,YAAY;knBA7DtB,iBAAiB;;EA6DmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/container/FlowRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM9C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,cAAc,EACZ,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,GACV,oBAAoB,GACpB,8BAA8B,GAC9B,gBAAgB,GAChB,2BAA2B,GAC3B,mBAAmB,GACnB,oBAAoB,GACpB,MAAM,GACN,YAAY,CACf,GAAG;IACF,oBAAoB,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAuGF,eAAO,MAAM,YAAY;knBA7DtB,iBAAiB;;EA6DmC,CAAC"}

package/dist/esm/container/ReactFlow/index.d.ts

@@ -1,120 +1,7 @@
-import { type CSSProperties } from 'react';
-import { ConnectionLineType, PanOnScrollMode, SelectionMode, type NodeOrigin, type Viewport } from '@xyflow/system';
+/// <reference types="react" />
+import { type NodeOrigin } from '@xyflow/system';
+import type { ReactFlowProps } from '../../types';
 export declare const initNodeOrigin: NodeOrigin;
-declare const ReactFlow: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onError"> & {
-    nodes?: import("../../types").Node<any, string | undefined>[] | undefined;
-    edges?: import("../../types").Edge<any>[] | undefined;
-    defaultNodes?: import("../../types").Node<any, string | undefined>[] | undefined;
-    defaultEdges?: import("../../types").Edge<any>[] | undefined;
-    defaultEdgeOptions?: import("../../types").DefaultEdgeOptions | undefined;
-    onNodeClick?: import("../../types").NodeMouseHandler | undefined;
-    onNodeDoubleClick?: import("../../types").NodeMouseHandler | undefined;
-    onNodeMouseEnter?: import("../../types").NodeMouseHandler | undefined;
-    onNodeMouseMove?: import("../../types").NodeMouseHandler | undefined;
-    onNodeMouseLeave?: import("../../types").NodeMouseHandler | undefined;
-    onNodeContextMenu?: import("../../types").NodeMouseHandler | undefined;
-    onNodeDragStart?: import("../../types").NodeDragHandler | undefined;
-    onNodeDrag?: import("../../types").NodeDragHandler | undefined;
-    onNodeDragStop?: import("../../types").NodeDragHandler | undefined;
-    onEdgeClick?: ((event: import("react").MouseEvent<Element, MouseEvent>, edge: import("../../types").Edge<any>) => void) | undefined;
-    onEdgeContextMenu?: import("../../types").EdgeMouseHandler | undefined;
-    onEdgeMouseEnter?: import("../../types").EdgeMouseHandler | undefined;
-    onEdgeMouseMove?: import("../../types").EdgeMouseHandler | undefined;
-    onEdgeMouseLeave?: import("../../types").EdgeMouseHandler | undefined;
-    onEdgeDoubleClick?: import("../../types").EdgeMouseHandler | undefined;
-    onEdgeUpdateStart?: ((event: import("react").MouseEvent<Element, MouseEvent>, edge: import("../../types").Edge<any>, handleType: import("@xyflow/system").HandleType) => void) | undefined;
-    onEdgeUpdateEnd?: ((event: MouseEvent | TouchEvent, edge: import("../../types").Edge<any>, handleType: import("@xyflow/system").HandleType) => void) | undefined;
-    onEdgeUpdate?: import("../../types").OnEdgeUpdateFunc<any> | undefined;
-    onNodesChange?: import("../../types").OnNodesChange<import("../../types").Node<any, string | undefined>> | undefined;
-    onEdgesChange?: import("../../types").OnEdgesChange<import("../../types").Edge<any>> | undefined;
-    onNodesDelete?: import("../../types").OnNodesDelete | undefined;
-    onEdgesDelete?: import("../../types").OnEdgesDelete | undefined;
-    onDelete?: import("../../types").OnDelete | undefined;
-    onSelectionDragStart?: import("../../types").SelectionDragHandler | undefined;
-    onSelectionDrag?: import("../../types").SelectionDragHandler | undefined;
-    onSelectionDragStop?: import("../../types").SelectionDragHandler | undefined;
-    onSelectionStart?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    onSelectionEnd?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    onSelectionContextMenu?: ((event: import("react").MouseEvent<Element, MouseEvent>, nodes: import("../../types").Node<any, string | undefined>[]) => void) | undefined;
-    onConnect?: import("@xyflow/system").OnConnect | undefined;
-    onConnectStart?: import("@xyflow/system").OnConnectStart | undefined;
-    onConnectEnd?: import("@xyflow/system").OnConnectEnd | undefined;
-    onClickConnectStart?: import("@xyflow/system").OnConnectStart | undefined;
-    onClickConnectEnd?: import("@xyflow/system").OnConnectEnd | undefined;
-    onInit?: import("../../types").OnInit<import("../../types").Node<any, string | undefined>, import("../../types").Edge<any>> | undefined;
-    onMove?: import("@xyflow/system").OnMove | undefined;
-    onMoveStart?: import("@xyflow/system").OnMove | undefined;
-    onMoveEnd?: import("@xyflow/system").OnMove | undefined;
-    onSelectionChange?: import("../../types").OnSelectionChangeFunc | undefined;
-    onPaneScroll?: ((event?: import("react").WheelEvent<Element> | undefined) => void) | undefined;
-    onPaneClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    onPaneContextMenu?: ((event: MouseEvent | import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    onPaneMouseEnter?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    onPaneMouseMove?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    onPaneMouseLeave?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    onBeforeDelete?: import("@xyflow/system").OnBeforeDelete | undefined;
-    nodeTypes?: import("../../types").NodeTypes | undefined;
-    edgeTypes?: import("../../types").EdgeTypes | undefined;
-    connectionLineType?: ConnectionLineType | undefined;
-    connectionLineStyle?: CSSProperties | undefined;
-    connectionLineComponent?: import("../../types").ConnectionLineComponent | undefined;
-    connectionLineContainerStyle?: CSSProperties | undefined;
-    connectionMode?: import("@xyflow/system").ConnectionMode | undefined;
-    deleteKeyCode?: import("@xyflow/system").KeyCode | null | undefined;
-    selectionKeyCode?: import("@xyflow/system").KeyCode | null | undefined;
-    selectionOnDrag?: boolean | undefined;
-    selectionMode?: SelectionMode | undefined;
-    panActivationKeyCode?: import("@xyflow/system").KeyCode | null | undefined;
-    multiSelectionKeyCode?: import("@xyflow/system").KeyCode | null | undefined;
-    zoomActivationKeyCode?: import("@xyflow/system").KeyCode | null | undefined;
-    snapToGrid?: boolean | undefined;
-    snapGrid?: import("@xyflow/system").SnapGrid | undefined;
-    onlyRenderVisibleElements?: boolean | undefined;
-    nodesDraggable?: boolean | undefined;
-    nodesConnectable?: boolean | undefined;
-    nodesFocusable?: boolean | undefined;
-    nodeOrigin?: NodeOrigin | undefined;
-    edgesFocusable?: boolean | undefined;
-    edgesUpdatable?: boolean | undefined;
-    elementsSelectable?: boolean | undefined;
-    selectNodesOnDrag?: boolean | undefined;
-    panOnDrag?: boolean | number[] | undefined;
-    minZoom?: number | undefined;
-    maxZoom?: number | undefined;
-    viewport?: Viewport | undefined;
-    defaultViewport?: Viewport | undefined;
-    onViewportChange?: ((viewport: Viewport) => void) | undefined;
-    translateExtent?: import("@xyflow/system").CoordinateExtent | undefined;
-    preventScrolling?: boolean | undefined;
-    nodeExtent?: import("@xyflow/system").CoordinateExtent | undefined;
-    defaultMarkerColor?: string | undefined;
-    zoomOnScroll?: boolean | undefined;
-    zoomOnPinch?: boolean | undefined;
-    panOnScroll?: boolean | undefined;
-    panOnScrollSpeed?: number | undefined;
-    panOnScrollMode?: PanOnScrollMode | undefined;
-    zoomOnDoubleClick?: boolean | undefined;
-    edgeUpdaterRadius?: number | undefined;
-    noDragClassName?: string | undefined;
-    noWheelClassName?: string | undefined;
-    noPanClassName?: string | undefined;
-    fitView?: boolean | undefined;
-    fitViewOptions?: import("../../types").FitViewOptions | undefined;
-    connectOnClick?: boolean | undefined;
-    attributionPosition?: import("@xyflow/system").PanelPosition | undefined;
-    proOptions?: import("@xyflow/system").ProOptions | undefined;
-    elevateNodesOnSelect?: boolean | undefined;
-    elevateEdgesOnSelect?: boolean | undefined;
-    disableKeyboardA11y?: boolean | undefined;
-    autoPanOnNodeDrag?: boolean | undefined;
-    autoPanOnConnect?: boolean | undefined;
-    connectionRadius?: number | undefined;
-    onError?: import("@xyflow/system").OnError | undefined;
-    isValidConnection?: import("@xyflow/system").IsValidConnection | undefined;
-    nodeDragThreshold?: number | undefined;
-    width?: number | undefined;
-    height?: number | undefined;
-    colorMode?: import("@xyflow/system").ColorMode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+declare const ReactFlow: import("react").ForwardRefExoticComponent<ReactFlowProps & import("react").RefAttributes<HTMLDivElement>>;
 export default ReactFlow;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/container/ReactFlow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,aAAa,EAGb,KAAK,UAAU,EACf,KAAK,QAAQ,EACd,MAAM,gBAAgB,CAAC;AAWxB,eAAO,MAAM,cAAc,EAAE,UAAmB,CAAC;AAWjD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAwQd,CAAC;AAIF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/container/ReactFlow/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAML,KAAK,UAAU,EAEhB,MAAM,gBAAgB,CAAC;AASxB,OAAO,KAAK,EAAE,cAAc,EAAoB,MAAM,aAAa,CAAC;AAEpE,eAAO,MAAM,cAAc,EAAE,UAAmB,CAAC;AAWjD,QAAA,MAAM,SAAS,2GAwQd,CAAC;AAIF,eAAe,SAAS,CAAC"}

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

@@ -1,14 +1,20 @@
 import type { ReactFlowStore } from '../types/store';
-/**
- * Hook for accessing the ongoing connection.
- *
- * @public
- * @returns ongoing connection: startHandle, endHandle, status, position
- */
-export declare function useConnection(): {
+type UseConnectionResult = {
+    /** The start handle where the user interaction started or null */
     startHandle: ReactFlowStore['connectionStartHandle'];
+    /** The target handle that's inside the connection radius or null  */
     endHandle: ReactFlowStore['connectionEndHandle'];
+    /** The current connection status 'valid', 'invalid' or null*/
     status: ReactFlowStore['connectionStatus'];
+    /** The current connection position or null */
     position: ReactFlowStore['connectionPosition'] | null;
 };
+/**
+ * Hook for accessing the ongoing connection.
+ *
+ * @public
+ * @returns ongoing connection
+ */
+export declare function useConnection(): UseConnectionResult;
+export {};
 //# sourceMappingURL=useConnection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useConnection.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useConnection.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AASrD;;;;;GAKG;AACH,wBAAgB,aAAa,IAAI;IAC/B,WAAW,EAAE,cAAc,CAAC,uBAAuB,CAAC,CAAC;IACrD,SAAS,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;IACjD,MAAM,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC3C,QAAQ,EAAE,cAAc,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;CACvD,CAIA"}
+{"version":3,"file":"useConnection.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useConnection.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AASrD,KAAK,mBAAmB,GAAG;IACzB,kEAAkE;IAClE,WAAW,EAAE,cAAc,CAAC,uBAAuB,CAAC,CAAC;IACrD,qEAAqE;IACrE,SAAS,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;IACjD,8DAA8D;IAC9D,MAAM,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC3C,8CAA8C;IAC9C,QAAQ,EAAE,cAAc,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,aAAa,IAAI,mBAAmB,CAInD"}

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

@@ -1,6 +1,6 @@
 import { type RefObject } from 'react';
 type UseDragParams = {
-    nodeRef: RefObject<Element>;
+    nodeRef: RefObject<HTMLDivElement>;
     disabled?: boolean;
     noDragClassName?: string;
     handleSelector?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../packages/react/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,OAAO,CAAC,CAAC;IAC5B,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;CACxB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAgB,EAChB,eAAe,EACf,cAAc,EACd,MAAM,EACN,YAAY,GACb,EAAE,aAAa,WA6Cf"}
+{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../packages/react/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;CACxB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAgB,EAChB,eAAe,EACf,cAAc,EACd,MAAM,EACN,YAAY,GACb,EAAE,aAAa,WA6Cf"}

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

@@ -7,7 +7,7 @@ type useHandleConnectionsParams = {
     onDisconnect?: (connections: Connection[]) => void;
 };
 /**
- *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ * Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
  *
  * @public
  * @param param.type - handle type 'source' or 'target'

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

@@ -1 +1 @@
-{"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAgBF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,0BAA2C,GAAG,OAAO,CAIjG"}
+{"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAsBF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,0BAA2C,GAAG,OAAO,CAIjG"}

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

@@ -6,7 +6,7 @@ export type UseOnSelectionChangeOptions = {
  * Hook for registering an onSelectionChange handler.
  *
  * @public
- * @params params.onChange - The handler to register
+ * @param params.onChange - The handler to register
  */
 export declare function useOnSelectionChange({ onChange }: UseOnSelectionChangeOptions): void;
 //# sourceMappingURL=useOnSelectionChange.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useUpdateNodePositions.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useUpdateNodePositions.ts"],"names":[],"mappings":"AASA;;;;;GAKG;AACH,wBAAgB,sBAAsB,aAGS;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,OAAO,CAAA;CAAE,UA8C/F"}
+{"version":3,"file":"useUpdateNodePositions.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useUpdateNodePositions.ts"],"names":[],"mappings":"AASA;;;;;GAKG;AACH,wBAAgB,sBAAsB,aAGS;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,OAAO,CAAA;CAAE,UAqD/F"}

package/dist/esm/index.d.ts

@@ -30,6 +30,6 @@ export { applyNodeChanges, applyEdgeChanges, handleParentExpand } from './utils/
 export { isNode, isEdge } from './utils/general';
 export * from './additional-components';
 export * from './types';
-export { type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, type ConnectionStatus, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type IsValidConnection, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeProps, type NodeOrigin, type OnNodeDrag, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type HandleType, type OnBeforeDelete, type ShouldResize, type OnResizeStart, type OnResize, type OnResizeEnd, type ControlPosition, type ControlLinePosition, type ResizeControlVariant, } from '@xyflow/system';
+export { type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, type ConnectionStatus, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type IsValidConnection, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeProps, type NodeOrigin, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type HandleType, type ShouldResize, type OnResizeStart, type OnResize, type OnResizeEnd, type ControlPosition, type ControlLinePosition, type ResizeControlVariant, } from '@xyflow/system';
 export { type GetBezierPathParams, getBezierEdgeCenter, getBezierPath, getEdgeCenter, type GetSmoothStepPathParams, getSmoothStepPath, type GetStraightPathParams, getStraightPath, getViewportForBounds, getNodesBounds, getIncomers, getOutgoers, addEdge, updateEdge, getConnectedEdges, internalsSymbol, } from '@xyflow/system';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/react/src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/react/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,KAAK,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AACnG,OAAO,EAAE,oBAAoB,EAAE,KAAK,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AACtG,OAAO,EAAE,mBAAmB,EAAE,KAAK,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AACnG,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzF,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEjD,cAAc,yBAAyB,CAAC;AAExC,cAAc,SAAS,CAAC;AAGxB,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,kBAAkB,EAClB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,UAAU,EACV,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,eAAe,EACf,KAAK,6BAA6B,EAClC,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,aAAa,EACb,KAAK,aAAa,EAClB,KAAK,OAAO,EACZ,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,QAAQ,EACR,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,IAAI,EACT,KAAK,GAAG,EACR,KAAK,SAAS,EACd,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,KAAK,mBAAmB,EACxB,mBAAmB,EACnB,aAAa,EACb,aAAa,EACb,KAAK,uBAAuB,EAC5B,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,eAAe,EACf,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,WAAW,EACX,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,eAAe,GAChB,MAAM,gBAAgB,CAAC"}

package/dist/esm/index.js

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useMemo, useEffect, useRef, useState, useCallback, forwardRef, memo } from 'react';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calcNextPosition, Position, isMouseEvent, XYHandle, getHostForElement, addEdge, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
+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 { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
@@ -424,25 +424,25 @@ const useViewportHelper = () => {
                 const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
                 panZoom?.setViewport(viewport, { duration: options?.duration });
             },
-            screenToFlowPosition: (position, options = { snapToGrid: true }) => {
+            screenToFlowPosition: (clientPosition, options = { snapToGrid: true }) => {
                 const { transform, snapGrid, domNode } = store.getState();
                 if (!domNode) {
-                    return position;
+                    return clientPosition;
                 }
                 const { x: domX, y: domY } = domNode.getBoundingClientRect();
                 const correctedPosition = {
-                    x: position.x - domX,
-                    y: position.y - domY,
+                    x: clientPosition.x - domX,
+                    y: clientPosition.y - domY,
                 };
                 return pointToRendererPoint(correctedPosition, transform, options.snapToGrid, snapGrid);
             },
-            flowToScreenPosition: (position) => {
+            flowToScreenPosition: (flowPosition) => {
                 const { transform, domNode } = store.getState();
                 if (!domNode) {
-                    return position;
+                    return flowPosition;
                 }
                 const { x: domX, y: domY } = domNode.getBoundingClientRect();
-                const rendererPosition = rendererPointToPoint(position, transform);
+                const rendererPosition = rendererPointToPoint(flowPosition, transform);
                 return {
                     x: rendererPosition.x + domX,
                     y: rendererPosition.y + domY,
@@ -458,9 +458,7 @@ function handleParentExpand(updatedElements, updateItem) {
     for (const [index, item] of updatedElements.entries()) {
         if (item.id === updateItem.parentNode) {
             const parent = { ...item };
-            if (!parent.computed) {
-                parent.computed = {};
-            }
+            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) {
@@ -543,7 +541,7 @@ 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, elements);
+            applyChange(change, updatedElement, updatedElements);
         }
         updatedElements.push(updatedElement);
     }
@@ -1264,7 +1262,7 @@ function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, n
                     handleNodeClick({
                         id,
                         store,
-                        nodeRef: nodeRef,
+                        nodeRef,
                     });
                 },
                 onDragStart: () => {
@@ -1306,7 +1304,7 @@ const selectedAndDraggable = (nodesDraggable) => (n) => n.selected && (n.draggab
 function useUpdateNodePositions() {
     const store = useStoreApi();
     const updatePositions = useCallback((params) => {
-        const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions } = store.getState();
+        const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin, } = store.getState();
         const selectedNodes = nodes.filter(selectedAndDraggable(nodesDraggable));
         // by default a node moves 5px on each key press, or 20px if shift is pressed
         // if snap grid is enabled, we use that for the velocity.
@@ -1318,17 +1316,21 @@ function useUpdateNodePositions() {
         const nodeUpdates = selectedNodes.map((node) => {
             if (node.computed?.positionAbsolute) {
                 let nextPosition = {
-                    x: node.computed?.positionAbsolute.x + xDiff,
-                    y: node.computed?.positionAbsolute.y + yDiff,
+                    x: node.computed.positionAbsolute.x + xDiff,
+                    y: node.computed.positionAbsolute.y + yDiff,
                 };
                 if (snapToGrid) {
                     nextPosition = snapPosition(nextPosition, snapGrid);
                 }
-                const { positionAbsolute, position } = calcNextPosition(node, nextPosition, nodes, nodeExtent, undefined, onError);
+                const { position, positionAbsolute } = calculateNodePosition({
+                    nodeId: node.id,
+                    nextPosition,
+                    nodeLookup,
+                    nodeExtent,
+                    nodeOrigin,
+                    onError,
+                });
                 node.position = position;
-                if (!node.computed) {
-                    node.computed = {};
-                }
                 node.computed.positionAbsolute = positionAbsolute;
             }
             return node;
@@ -1470,6 +1472,9 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
         ]), 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.
+ */
 const Handle = memo(HandleComponent);
 
 function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }) {
@@ -1503,7 +1508,7 @@ const builtinNodeTypes = {
 
 const selector$h = (s) => {
     const selectedNodes = s.nodes.filter((n) => n.selected);
-    const { width, height, x, y } = getNodesBounds(selectedNodes, s.nodeOrigin);
+    const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
     return {
         width,
         height,
@@ -1552,14 +1557,16 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
             } }) }));
 }
 
-const selector$g = (s) => s.nodesSelectionActive;
+const selector$g = (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 = useStore(selector$g);
+    const { nodesSelectionActive, userSelectionActive } = useStore(selector$g);
     const selectionKeyPressed = useKeyPress(selectionKeyCode);
     const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
     const panOnDrag = panActivationKeyPressed || _panOnDrag;
     const panOnScroll = panActivationKeyPressed || _panOnScroll;
-    const isSelecting = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true);
+    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 }))] }) }));
 };
@@ -1884,18 +1891,21 @@ const Marker = ({ id, type, color, width = 12.5, height = 12.5, markerUnits = 's
     }
     return (jsx("marker", { className: "react-flow__arrowhead", id: id, markerWidth: `${width}`, markerHeight: `${height}`, viewBox: "-10 -10 20 20", markerUnits: markerUnits, orient: orient, refX: "0", refY: "0", children: jsx(Symbol, { color: color, strokeWidth: strokeWidth }) }));
 };
-const markerSelector = ({ defaultColor, rfId }) => (s) => {
-    const markers = createMarkerIds(s.edges, { id: rfId, defaultColor });
-    return markers;
-};
-const markersEqual = (a, b) => 
-// the id includes all marker options, so we just need to look at that part of the marker
-!(a.length !== b.length || a.some((m, i) => m.id !== b[i].id));
 // when you have multiple flows on a page and you hide the first one, the other ones have no markers anymore
 // when they do have markers with the same ids. To prevent this the user can pass a unique id to the react flow wrapper
 // that we can then use for creating our unique marker ids
 const MarkerDefinitions = ({ defaultColor, rfId }) => {
-    const markers = useStore(useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), markersEqual);
+    const edges = useStore((s) => s.edges);
+    const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
+    const markers = useMemo(() => {
+        const markers = createMarkerIds(edges, {
+            id: rfId,
+            defaultColor,
+            defaultMarkerStart: defaultEdgeOptions?.markerStart,
+            defaultMarkerEnd: defaultEdgeOptions?.markerEnd,
+        });
+        return markers;
+    }, [edges, defaultEdgeOptions, rfId, defaultColor]);
     if (!markers.length) {
         return null;
     }
@@ -2259,6 +2269,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
                     animated: edge.animated,
                     inactive: !isSelectable && !onClick,
                     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 }))] }) }));
 }
@@ -2468,7 +2479,8 @@ const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {
     let transform = [0, 0, 1];
     if (fitView && width && height) {
         const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
-        const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
+        // @todo users nodeOrigin should be used here
+        const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
         const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
         transform = [x, y, zoom];
     }
@@ -2525,7 +2537,7 @@ const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {
         autoPanOnConnect: true,
         autoPanOnNodeDrag: true,
         connectionRadius: 20,
-        onError: () => null,
+        onError: devWarn,
         isValidConnection: undefined,
         onSelectionChangeHandlers: [],
         lib: 'react',
@@ -2948,7 +2960,7 @@ function useOnViewportChange({ onStart, onChange, onEnd }) {
  * Hook for registering an onSelectionChange handler.
  *
  * @public
- * @params params.onChange - The handler to register
+ * @param params.onChange - The handler to register
  */
 function useOnSelectionChange({ onChange }) {
     const store = useStoreApi();
@@ -2966,9 +2978,14 @@ const selector$6 = (options) => (s) => {
     if (s.nodes.length === 0) {
         return false;
     }
-    return s.nodes
-        .filter((n) => (options.includeHiddenNodes ? true : !n.hidden))
-        .every((n) => n[internalsSymbol]?.handleBounds !== undefined);
+    for (const node of s.nodes) {
+        if (options.includeHiddenNodes || !node.hidden) {
+            if (node[internalsSymbol]?.handleBounds === undefined) {
+                return false;
+            }
+        }
+    }
+    return true;
 };
 const defaultOptions = {
     includeHiddenNodes: false,
@@ -2986,7 +3003,7 @@ function useNodesInitialized(options = defaultOptions) {
 }
 
 /**
- *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ * Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
  *
  * @public
  * @param param.type - handle type 'source' or 'target'
@@ -3041,7 +3058,7 @@ const selector$5 = (s) => ({
  * Hook for accessing the ongoing connection.
  *
  * @public
- * @returns ongoing connection: startHandle, endHandle, status, position
+ * @returns ongoing connection
  */
 function useConnection() {
     const ongoingConnection = useStore(selector$5, shallow);
@@ -3214,7 +3231,7 @@ const selector$1 = (s) => {
     };
     return {
         viewBB,
-        boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, s.nodeOrigin), viewBB) : viewBB,
+        boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, { nodeOrigin: s.nodeOrigin }), viewBB) : viewBB,
         rfId: s.rfId,
         nodeOrigin: s.nodeOrigin,
         panZoom: s.panZoom,
@@ -3450,7 +3467,7 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     if (!isActive || !nodes.length) {
         return null;
     }
-    const nodeRect = getNodesBounds(nodes, nodeOrigin);
+    const nodeRect = getNodesBounds(nodes, { nodeOrigin });
     const zIndex = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
     const wrapperStyle = {
         position: 'absolute',