@xyflow/react 12.8.6 → 12.9.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2024 webkid GmbH
+Copyright (c) 2019-2025 webkid GmbH
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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

@@ -0,0 +1,26 @@
+import type { EdgeToolbarProps } from './types';
+/**
+ * This component can render a toolbar or tooltip to one side of a custom edge. This
+ * toolbar doesn't scale with the viewport so that the content stays the same size.
+ *
+ * @public
+ * @example
+ * ```jsx
+ * import { EdgeToolbar, BaseEdge, getBezierPath, type EdgeProps } from "@xyflow/react";
+ *
+ * export function CustomEdge({ id, data, ...props }: EdgeProps) {
+ *   const [edgePath, centerX, centerY] = getBezierPath(props);
+ *
+ *   return (
+ *     <>
+ *       <BaseEdge id={id} path={edgePath} />
+ *       <EdgeToolbar edgeId={id} x={centerX} y={centerY} isVisible>
+ *         <button onClick={() => console.log('edge', id, 'click')}}>Click me</button>
+ *       </EdgeToolbar>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function EdgeToolbar({ edgeId, x, y, children, className, style, isVisible, alignX, alignY, ...rest }: EdgeToolbarProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=EdgeToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeToolbar.d.ts","sourceRoot":"","sources":["../../../src/additional-components/EdgeToolbar/EdgeToolbar.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,CAAC,EACD,CAAC,EACD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,MAAiB,EACjB,MAAiB,EACjB,GAAG,IAAI,EACR,EAAE,gBAAgB,kDAgClB"}

package/dist/esm/additional-components/EdgeToolbar/index.d.ts

@@ -0,0 +1,3 @@
+export { EdgeToolbar } from './EdgeToolbar';
+export type { EdgeToolbarProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/additional-components/EdgeToolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/additional-components/EdgeToolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/esm/additional-components/EdgeToolbar/types.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { EdgeToolbarBaseProps } from '@xyflow/system';
+/**
+ * @inline
+ */
+export type EdgeToolbarProps = EdgeToolbarBaseProps & HTMLAttributes<HTMLDivElement> & {
+    /**
+     * An edge toolbar must be attached to an edge.
+     */
+    edgeId: string;
+    children?: ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/additional-components/EdgeToolbar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/EdgeToolbar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}

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

@@ -3,4 +3,5 @@ export * from './Controls';
 export * from './MiniMap';
 export * from './NodeResizer';
 export * from './NodeToolbar';
+export * from './EdgeToolbar';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/additional-components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/additional-components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

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

@@ -1,4 +1,6 @@
 import { JSX } from 'react';
 import type { Edge, EdgeWrapperProps } from '../../types';
-export declare function EdgeWrapper<EdgeType extends Edge = Edge>({ id, edgesFocusable, edgesReconnectable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, rfId, edgeTypes, noPanClassName, onError, disableKeyboardA11y, }: EdgeWrapperProps<EdgeType>): JSX.Element | null;
+declare function EdgeWrapper<EdgeType extends Edge = Edge>({ id, edgesFocusable, edgesReconnectable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, rfId, edgeTypes, noPanClassName, onError, disableKeyboardA11y, }: EdgeWrapperProps<EdgeType>): JSX.Element | null;
+declare const _default: typeof EdgeWrapper;
+export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeWrapper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8D,GAAG,EAAE,MAAM,OAAO,CAAC;AAexF,OAAO,KAAK,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,wBAAgB,WAAW,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACxD,EAAE,EACF,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,IAAI,EACJ,SAAS,EACT,cAAc,EACd,OAAO,EACP,mBAAmB,GACpB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAmOjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeWrapper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8D,GAAG,EAAQ,MAAM,OAAO,CAAC;AAe9F,OAAO,KAAK,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,iBAAS,WAAW,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACjD,EAAE,EACF,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,IAAI,EACJ,SAAS,EACT,cAAc,EACd,OAAO,EACP,mBAAmB,GACpB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAmOjD;wBAEmC,OAAO,WAAW;AAAtD,wBAAuD"}

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

@@ -1,3 +1,5 @@
 import type { Node, NodeWrapperProps } from '../../types';
-export declare function NodeWrapper<NodeType extends Node>({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeClickDistance, onError, }: NodeWrapperProps<NodeType>): import("react/jsx-runtime").JSX.Element | null;
+declare function NodeWrapper<NodeType extends Node>({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeClickDistance, onError, }: NodeWrapperProps<NodeType>): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: typeof NodeWrapper;
+export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAgB,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAExE,wBAAgB,WAAW,CAAC,QAAQ,SAAS,IAAI,EAAE,EACjD,EAAE,EACF,OAAO,EACP,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,IAAI,EACJ,SAAS,EACT,iBAAiB,EACjB,OAAO,GACR,EAAE,gBAAgB,CAAC,QAAQ,CAAC,kDAgN5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAgB,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAExE,iBAAS,WAAW,CAAC,QAAQ,SAAS,IAAI,EAAE,EAC1C,EAAE,EACF,OAAO,EACP,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,IAAI,EACJ,SAAS,EACT,iBAAiB,EACjB,OAAO,GACR,EAAE,gBAAgB,CAAC,QAAQ,CAAC,kDAgN5B;wBAEmC,OAAO,WAAW;AAAtD,wBAAuD"}

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

@@ -1,5 +1,5 @@
 import type { Node, Edge, ReactFlowProps } from '../../types';
-declare const reactFlowFieldsToTrack: readonly ["nodes", "edges", "defaultNodes", "defaultEdges", "onConnect", "onConnectStart", "onConnectEnd", "onClickConnectStart", "onClickConnectEnd", "nodesDraggable", "autoPanOnNodeFocus", "nodesConnectable", "nodesFocusable", "edgesFocusable", "edgesReconnectable", "elevateNodesOnSelect", "elevateEdgesOnSelect", "minZoom", "maxZoom", "nodeExtent", "onNodesChange", "onEdgesChange", "elementsSelectable", "connectionMode", "snapGrid", "snapToGrid", "translateExtent", "connectOnClick", "defaultEdgeOptions", "fitView", "fitViewOptions", "onNodesDelete", "onEdgesDelete", "onDelete", "onNodeDrag", "onNodeDragStart", "onNodeDragStop", "onSelectionDrag", "onSelectionDragStart", "onSelectionDragStop", "onMoveStart", "onMove", "onMoveEnd", "noPanClassName", "nodeOrigin", "autoPanOnConnect", "autoPanOnNodeDrag", "onError", "connectionRadius", "isValidConnection", "selectNodesOnDrag", "nodeDragThreshold", "connectionDragThreshold", "onBeforeDelete", "debug", "autoPanSpeed", "paneClickDistance", "ariaLabelConfig"];
+declare const reactFlowFieldsToTrack: readonly ["nodes", "edges", "defaultNodes", "defaultEdges", "onConnect", "onConnectStart", "onConnectEnd", "onClickConnectStart", "onClickConnectEnd", "nodesDraggable", "autoPanOnNodeFocus", "nodesConnectable", "nodesFocusable", "edgesFocusable", "edgesReconnectable", "elevateNodesOnSelect", "elevateEdgesOnSelect", "minZoom", "maxZoom", "nodeExtent", "onNodesChange", "onEdgesChange", "elementsSelectable", "connectionMode", "snapGrid", "snapToGrid", "translateExtent", "connectOnClick", "defaultEdgeOptions", "fitView", "fitViewOptions", "onNodesDelete", "onEdgesDelete", "onDelete", "onNodeDrag", "onNodeDragStart", "onNodeDragStop", "onSelectionDrag", "onSelectionDragStart", "onSelectionDragStop", "onMoveStart", "onMove", "onMoveEnd", "noPanClassName", "nodeOrigin", "autoPanOnConnect", "autoPanOnNodeDrag", "onError", "connectionRadius", "isValidConnection", "selectNodesOnDrag", "nodeDragThreshold", "connectionDragThreshold", "onBeforeDelete", "debug", "autoPanSpeed", "ariaLabelConfig"];
 type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];
 type StoreUpdaterProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Pick<ReactFlowProps<NodeType, EdgeType>, ReactFlowFieldsToTrack> & {
     rfId: string;

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,4/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;AAiCF,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EACrF,KAAK,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,QA2D7C"}
+{"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,u+BA0DlB,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/FlowRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,KAAK,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CAChE,cAAc,CAAC,QAAQ,CAAC,EACtB,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,GACV,oBAAoB,GACpB,8BAA8B,GAC9B,gBAAgB,GAChB,2BAA2B,GAC3B,mBAAmB,GACnB,oBAAoB,GACpB,MAAM,GACN,mBAAmB,CACtB,GAAG;IACF,oBAAoB,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAQF,iBAAS,qBAAqB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC3D,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,WAAW,EAAE,YAAY,EACzB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,eAAe,EACf,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,GACrB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CA6D7B;kBAlGQ,qBAAqB;;;AAsG9B,eAAO,MAAM,YAAY,EAAkC,OAAO,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/FlowRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,KAAK,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CAChE,cAAc,CAAC,QAAQ,CAAC,EACtB,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,GACV,oBAAoB,GACpB,8BAA8B,GAC9B,gBAAgB,GAChB,2BAA2B,GAC3B,mBAAmB,GACnB,oBAAoB,GACpB,MAAM,GACN,mBAAmB,CACtB,GAAG;IACF,oBAAoB,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAQF,iBAAS,qBAAqB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC3D,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,WAAW,EAAE,YAAY,EACzB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,eAAe,EACf,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,GACrB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CA+D7B;kBApGQ,qBAAqB;;;AAwG9B,eAAO,MAAM,YAAY,EAAkC,OAAO,qBAAqB,CAAC"}

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

@@ -1,13 +1,11 @@
-/**
- * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
- */
 import { type ReactNode } from 'react';
 import type { ReactFlowProps } from '../../types';
 type PaneProps = {
     isSelecting: boolean;
     selectionKeyPressed: boolean;
     children: ReactNode;
+    paneClickDistance: number;
 } & Partial<Pick<ReactFlowProps, 'selectionMode' | 'panOnDrag' | 'onSelectionStart' | 'onSelectionEnd' | 'onPaneClick' | 'onPaneContextMenu' | 'onPaneScroll' | 'onPaneMouseEnter' | 'onPaneMouseMove' | 'onPaneMouseLeave' | 'selectionOnDrag'>>;
-export declare function Pane({ isSelecting, selectionKeyPressed, selectionMode, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }: PaneProps): import("react/jsx-runtime").JSX.Element;
+export declare function Pane({ isSelecting, selectionKeyPressed, selectionMode, panOnDrag, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }: PaneProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/Pane/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,aAAa,CAAC;AAElE,KAAK,SAAS,GAAG;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,OAAO,CACT,IAAI,CACF,cAAc,EACZ,eAAe,GACf,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,GACb,mBAAmB,GACnB,cAAc,GACd,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CACpB,CACF,CAAC;AAqBF,wBAAgB,IAAI,CAAC,EACnB,WAAW,EACX,mBAAmB,EACnB,aAAkC,EAClC,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,QAAQ,GACT,EAAE,SAAS,2CAyMX"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/Pane/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,aAAa,CAAC;AAElE,KAAK,SAAS,GAAG;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CACT,IAAI,CACF,cAAc,EACZ,eAAe,GACf,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,GACb,mBAAmB,GACnB,cAAc,GACd,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CACpB,CACF,CAAC;AAqBF,wBAAgB,IAAI,CAAC,EACnB,WAAW,EACX,mBAAmB,EACnB,aAAkC,EAClC,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,QAAQ,GACT,EAAE,SAAS,2CA+NX"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAyT9D;;;;;;;;;;;;;;;;;;;GAmBG;yBAhUgB,QAAQ,SAAS,IAAI,SAAS,QAAQ,SAAS,IAAI;AAiUtE,wBAA0C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAwT9D;;;;;;;;;;;;;;;;;;;GAmBG;yBA/TgB,QAAQ,SAAS,IAAI,SAAS,QAAQ,SAAS,IAAI;AAgUtE,wBAA0C"}

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

@@ -1,7 +1,7 @@
 import type { FlowRendererProps } from '../FlowRenderer';
-type ZoomPaneProps = Omit<FlowRendererProps, 'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName' | 'disableKeyboardA11y' | 'selectionOnDrag'> & {
+type ZoomPaneProps = Omit<FlowRendererProps, 'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName' | 'disableKeyboardA11y'> & {
     isControlledViewport: boolean;
 };
-export declare function ZoomPane({ onPaneContextMenu, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, }: ZoomPaneProps): import("react/jsx-runtime").JSX.Element;
+export declare function ZoomPane({ onPaneContextMenu, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag, }: ZoomPaneProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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,EACf,eAAe,GACf,kBAAkB,GAClB,uBAAuB,GACvB,iBAAiB,GACjB,qBAAqB,GACrB,iBAAiB,CACpB,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,GAClB,EAAE,aAAa,2CAwGf"}
+{"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"}

package/dist/esm/index.js

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useMemo, forwardRef, useEffect, useRef, useState, useLayoutEffect, 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, handleExpandParent, panBy, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
+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, 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';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
@@ -238,7 +238,6 @@ const reactFlowFieldsToTrack = [
     'onBeforeDelete',
     'debug',
     'autoPanSpeed',
-    'paneClickDistance',
     'ariaLabelConfig',
 ];
 // rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
@@ -252,7 +251,6 @@ const selector$l = (s) => ({
     setNodeExtent: s.setNodeExtent,
     reset: s.reset,
     setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
-    setPaneClickDistance: s.setPaneClickDistance,
 });
 const initPrevValues = {
     /*
@@ -267,10 +265,9 @@ const initPrevValues = {
     elementsSelectable: true,
     noPanClassName: 'nopan',
     rfId: '1',
-    paneClickDistance: 0,
 };
 function StoreUpdater(props) {
-    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance, } = useStore(selector$l, shallow);
+    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$l, shallow);
     const store = useStoreApi();
     useEffect(() => {
         setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
@@ -302,8 +299,6 @@ function StoreUpdater(props) {
                 setTranslateExtent(fieldValue);
             else if (fieldName === 'nodeExtent')
                 setNodeExtent(fieldValue);
-            else if (fieldName === 'paneClickDistance')
-                setPaneClickDistance(fieldValue);
             else if (fieldName === 'ariaLabelConfig')
                 store.setState({ ariaLabelConfig: mergeAriaLabelConfig(fieldValue) });
             // Renamed fields
@@ -1281,7 +1276,7 @@ const selector$j = (s) => ({
     lib: s.lib,
     connectionInProgress: s.connection.inProgress,
 });
-function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, }) {
+function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag, }) {
     const store = useStoreApi();
     const zoomPane = useRef(null);
     const { userSelectionActive, lib, connectionInProgress } = useStore(selector$j, shallow);
@@ -1302,7 +1297,6 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
                 maxZoom,
                 translateExtent,
                 viewport: defaultViewport,
-                paneClickDistance,
                 onDraggingChange: (paneDragging) => store.setState({ paneDragging }),
                 onPanZoomStart: (event, vp) => {
                     const { onViewportChangeStart, onMoveStart } = store.getState();
@@ -1349,6 +1343,8 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
             lib,
             onTransformChange,
             connectionInProgress,
+            selectionOnDrag,
+            paneClickDistance,
         });
     }, [
         onPaneContextMenu,
@@ -1367,6 +1363,8 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
         lib,
         onTransformChange,
         connectionInProgress,
+        selectionOnDrag,
+        paneClickDistance,
     ]);
     return (jsx("div", { className: "react-flow__renderer", ref: zoomPane, style: containerStyle, children: children }));
 }
@@ -1402,17 +1400,16 @@ const selector$h = (s) => ({
     connectionInProgress: s.connection.inProgress,
     dragging: s.paneDragging,
 });
-function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) {
+function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) {
     const store = useStoreApi();
     const { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore(selector$h, shallow);
-    const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
+    const isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive);
     const container = useRef(null);
     const containerBounds = useRef();
     const selectedNodeIds = useRef(new Set());
     const selectedEdgeIds = useRef(new Set());
     // Used to prevent click events when the user lets go of the selectionKey during a selection
     const selectionInProgress = useRef(false);
-    const selectionStarted = useRef(false);
     const onClick = (event) => {
         // We prevent click events when the user let go of the selectionKey during a selection
         // We also prevent click events when a connection is in progress
@@ -1432,21 +1429,29 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         onPaneContextMenu?.(event);
     };
     const onWheel = onPaneScroll ? (event) => onPaneScroll(event) : undefined;
-    const onPointerDown = (event) => {
+    const onClickCapture = (event) => {
+        if (selectionInProgress.current) {
+            event.stopPropagation();
+            selectionInProgress.current = false;
+        }
+    };
+    // We are using capture here in order to prevent other pointer events
+    // to be able to create a selection above a node or an edge
+    const onPointerDownCapture = (event) => {
         const { resetSelectedElements, domNode } = store.getState();
         containerBounds.current = domNode?.getBoundingClientRect();
-        if (!elementsSelectable ||
-            !isSelecting ||
-            event.button !== 0 ||
-            event.target !== container.current ||
-            !containerBounds.current) {
+        if (!containerBounds.current)
+            return;
+        const eventTargetIsContainer = event.target === container.current;
+        // if a child element has the 'nokey' class, we don't want to swallow the event and don't start a selection
+        const isNoKeyEvent = !eventTargetIsContainer && !!event.target.closest('.nokey');
+        const isSelectionActive = (selectionOnDrag && eventTargetIsContainer) || selectionKeyPressed;
+        if (isNoKeyEvent || !isSelecting || !isSelectionActive || event.button !== 0 || !event.isPrimary) {
             return;
         }
         event.target?.setPointerCapture?.(event.pointerId);
-        selectionStarted.current = true;
         selectionInProgress.current = false;
         const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
-        resetSelectedElements();
         store.setState({
             userSelectionRect: {
                 width: 0,
@@ -1457,16 +1462,35 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
                 y,
             },
         });
-        onSelectionStart?.(event);
+        if (!eventTargetIsContainer) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        if (paneClickDistance === 0 || selectionKeyPressed) {
+            resetSelectedElements();
+            onSelectionStart?.(event);
+            selectionInProgress.current = true;
+        }
     };
     const onPointerMove = (event) => {
-        const { userSelectionRect, transform, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions, } = store.getState();
+        const { userSelectionRect, transform, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions, resetSelectedElements, } = store.getState();
         if (!containerBounds.current || !userSelectionRect) {
             return;
         }
-        selectionInProgress.current = true;
         const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
         const { startX, startY } = userSelectionRect;
+        if (!selectionInProgress.current &&
+            event.target === container.current &&
+            !selectionKeyPressed &&
+            paneClickDistance > 0) {
+            const distance = Math.hypot(mouseX - startX, mouseY - startY);
+            if (distance <= paneClickDistance) {
+                return;
+            }
+            resetSelectedElements();
+            onSelectionStart?.(event);
+        }
+        selectionInProgress.current = true;
         const nextUserSelectRect = {
             startX,
             startY,
@@ -1507,16 +1531,15 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         });
     };
     const onPointerUp = (event) => {
-        if (event.button !== 0 || !selectionStarted.current) {
+        if (event.button !== 0) {
             return;
         }
         event.target?.releasePointerCapture?.(event.pointerId);
-        const { userSelectionRect } = store.getState();
         /*
          * We only want to trigger click functions when in selection mode if
          * the user did not move the mouse.
          */
-        if (!userSelectionActive && userSelectionRect && event.target === container.current) {
+        if (!userSelectionActive && event.target === container.current && store.getState().userSelectionRect) {
             onClick?.(event);
         }
         store.setState({
@@ -1524,18 +1547,12 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
             userSelectionRect: null,
             nodesSelectionActive: selectedNodeIds.current.size > 0,
         });
-        onSelectionEnd?.(event);
-        /*
-         * If the user kept holding the selectionKey during the selection,
-         * we need to reset the selectionInProgress, so the next click event is not prevented
-         */
-        if (selectionKeyPressed || selectionOnDrag) {
-            selectionInProgress.current = false;
+        if (selectionInProgress.current) {
+            onSelectionEnd?.(event);
         }
-        selectionStarted.current = false;
     };
     const draggable = panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0));
-    return (jsxs("div", { className: cc(['react-flow__pane', { draggable, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? undefined : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: hasActiveSelection ? undefined : onPaneMouseEnter, onPointerDown: hasActiveSelection ? onPointerDown : onPaneMouseMove, onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove, onPointerUp: hasActiveSelection ? onPointerUp : undefined, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children, jsx(UserSelection, {})] }));
+    return (jsxs("div", { className: cc(['react-flow__pane', { draggable, dragging, selection: isSelecting }]), onClick: isSelectionEnabled ? undefined : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: isSelectionEnabled ? undefined : onPaneMouseEnter, onPointerMove: isSelectionEnabled ? onPointerMove : onPaneMouseMove, onPointerUp: isSelectionEnabled ? onPointerUp : undefined, onPointerDownCapture: isSelectionEnabled ? onPointerDownCapture : undefined, onClickCapture: isSelectionEnabled ? onClickCapture : undefined, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children, jsx(UserSelection, {})] }));
 }
 
 /*
@@ -1974,7 +1991,7 @@ function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPane
     const _selectionOnDrag = selectionOnDrag && panOnDrag !== true;
     const isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag;
     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, paneClickDistance: paneClickDistance, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, selectionKeyPressed: selectionKeyPressed, selectionOnDrag: _selectionOnDrag, children: [children, nodesSelectionActive && (jsx(NodesSelection, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
+    return (jsx(ZoomPane, { onPaneContextMenu: onPaneContextMenu, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, zoomOnDoubleClick: zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, zoomActivationKeyCode: zoomActivationKeyCode, preventScrolling: preventScrolling, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, onViewportChange: onViewportChange, isControlledViewport: isControlledViewport, paneClickDistance: paneClickDistance, selectionOnDrag: _selectionOnDrag, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, selectionKeyPressed: selectionKeyPressed, paneClickDistance: paneClickDistance, selectionOnDrag: _selectionOnDrag, children: [children, nodesSelectionActive && (jsx(NodesSelection, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
 }
 FlowRendererComponent.displayName = 'FlowRenderer';
 const FlowRenderer = memo(FlowRendererComponent);
@@ -2218,6 +2235,7 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
             ...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, onFocus: isFocusable ? onFocus : undefined, role: node.ariaRole ?? (isFocusable ? 'group' : undefined), "aria-roledescription": "node", "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, ...node.domAttributes, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { id: id, data: node.data, type: nodeType, positionAbsoluteX: internals.positionAbsolute.x, positionAbsoluteY: internals.positionAbsolute.y, selected: node.selected ?? false, selectable: isSelectable, draggable: isDraggable, deletable: node.deletable ?? true, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: internals.z, parentId: node.parentId, ...nodeDimensions }) }) }));
 }
+var NodeWrapper$1 = memo(NodeWrapper);
 
 const selector$b = (s) => ({
     nodesDraggable: s.nodesDraggable,
@@ -2257,7 +2275,7 @@ function NodeRendererComponent(props) {
              *   memorized – so if `NodeRenderer` *has* to rerender, it only
              *   needs to regenerate the list of nodes, nothing else.
              */
-            jsx(NodeWrapper, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver: resizeObserver, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, elementsSelectable: elementsSelectable, nodeClickDistance: props.nodeClickDistance, onError: onError }, nodeId));
+            jsx(NodeWrapper$1, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver: resizeObserver, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, elementsSelectable: elementsSelectable, nodeClickDistance: props.nodeClickDistance, onError: onError }, nodeId));
         }) }));
 }
 NodeRendererComponent.displayName = 'NodeRenderer';
@@ -2896,6 +2914,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
                 },
             ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: edge.ariaRole ?? (isFocusable ? 'group' : 'img'), "aria-roledescription": "edge", "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, ...edge.domAttributes, children: [!reconnecting && (jsx(EdgeComponent, { id: id, source: edge.source, target: edge.target, type: edge.type, selected: edge.selected, animated: edge.animated, selectable: isSelectable, deletable: edge.deletable ?? true, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, data: edge.data, style: edge.style, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: 'pathOptions' in edge ? edge.pathOptions : undefined, interactionWidth: edge.interactionWidth })), isReconnectable && (jsx(EdgeUpdateAnchors, { edge: edge, isReconnectable: isReconnectable, reconnectRadius: reconnectRadius, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, setUpdateHover: setUpdateHover, setReconnecting: setReconnecting }))] }) }));
 }
+var EdgeWrapper$1 = memo(EdgeWrapper);
 
 const selector$a = (s) => ({
     edgesFocusable: s.edgesFocusable,
@@ -2908,7 +2927,7 @@ function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements,
     const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector$a, shallow);
     const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
     return (jsxs("div", { className: "react-flow__edges", children: [jsx(MarkerDefinitions$1, { defaultColor: defaultMarkerColor, rfId: rfId }), edgeIds.map((id) => {
-                return (jsx(EdgeWrapper, { id: id, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, noPanClassName: noPanClassName, onReconnect: onReconnect, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, reconnectRadius: reconnectRadius, onDoubleClick: onEdgeDoubleClick, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, rfId: rfId, onError: onError, edgeTypes: edgeTypes, disableKeyboardA11y: disableKeyboardA11y }, id));
+                return (jsx(EdgeWrapper$1, { id: id, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, noPanClassName: noPanClassName, onReconnect: onReconnect, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, reconnectRadius: reconnectRadius, onDoubleClick: onEdgeDoubleClick, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, rfId: rfId, onError: onError, edgeTypes: edgeTypes, disableKeyboardA11y: disableKeyboardA11y }, id));
             })] }));
 }
 EdgeRendererComponent.displayName = 'EdgeRenderer';
@@ -3414,9 +3433,6 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             get().panZoom?.setTranslateExtent(translateExtent);
             set({ translateExtent });
         },
-        setPaneClickDistance: (clickDistance) => {
-            get().panZoom?.setClickDistance(clickDistance);
-        },
         resetSelectedElements: () => {
             const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();
             if (!elementsSelectable) {
@@ -3551,7 +3567,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, 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, paneClickDistance: paneClickDistance, debug: debug, ariaLabelConfig: ariaLabelConfig }), 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, 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 }), 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.
@@ -4843,4 +4859,48 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     return (jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest, "data-id": nodesArray.reduce((acc, node) => `${acc}${node.id} `, '').trim(), children: children }) }));
 }
 
-export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, MiniMapNode, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
+const zoomSelector = (state) => state.transform[2];
+/**
+ * This component can render a toolbar or tooltip to one side of a custom edge. This
+ * toolbar doesn't scale with the viewport so that the content stays the same size.
+ *
+ * @public
+ * @example
+ * ```jsx
+ * import { EdgeToolbar, BaseEdge, getBezierPath, type EdgeProps } from "@xyflow/react";
+ *
+ * export function CustomEdge({ id, data, ...props }: EdgeProps) {
+ *   const [edgePath, centerX, centerY] = getBezierPath(props);
+ *
+ *   return (
+ *     <>
+ *       <BaseEdge id={id} path={edgePath} />
+ *       <EdgeToolbar edgeId={id} x={centerX} y={centerY} isVisible>
+ *         <button onClick={() => console.log('edge', id, 'click')}}>Click me</button>
+ *       </EdgeToolbar>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+function EdgeToolbar({ edgeId, x, y, children, className, style, isVisible, alignX = 'center', alignY = 'center', ...rest }) {
+    const edgeSelector = useCallback((state) => state.edgeLookup.get(edgeId), [edgeId]);
+    const edge = useStore(edgeSelector, shallow);
+    const isActive = typeof isVisible === 'boolean' ? isVisible : edge?.selected;
+    const zoom = useStore(zoomSelector);
+    if (!isActive) {
+        return null;
+    }
+    const zIndex = (edge?.zIndex ?? 0) + 1;
+    const transform = getEdgeToolbarTransform(x, y, zoom, alignX, alignY);
+    return (jsx(EdgeLabelRenderer, { children: jsx("div", { style: {
+                position: 'absolute',
+                transform,
+                zIndex,
+                pointerEvents: 'all',
+                transformOrigin: '0 0',
+                ...style,
+            }, className: cc(['react-flow__edge-toolbar', className]), "data-id": edge?.id ?? '', ...rest, children: children }) }));
+}
+
+export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, EdgeToolbar, Handle, MiniMap, MiniMapNode, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };