@xyflow/react 12.4.1 → 12.4.3

package/dist/esm/components/Edges/EdgeText.d.ts

@@ -4,6 +4,32 @@ declare function EdgeTextComponent({ x, y, label, labelStyle, labelShowBg, label
 declare namespace EdgeTextComponent {
     var displayName: string;
 }
+/**
+ * You can use the `<EdgeText />` component as a helper component to display text
+ * within your custom edges.
+ *
+ *@public
+ *
+ *@example
+ *```jsx
+ *import { EdgeText } from '@xyflow/react';
+ *
+ *export function CustomEdgeLabel({ label }) {
+ *  return (
+ *    <EdgeText
+ *      x={100}
+ *      y={100}
+ *      label={label}
+ *      labelStyle={{ fill: 'white' }}
+ *      labelShowBg
+ *      labelBgStyle={{ fill: 'red' }}
+ *      labelBgPadding={[2, 4]}
+ *      labelBgBorderRadius={2}
+ *    />
+ *  );
+ *}
+ *```
+ */
 export declare const EdgeText: import("react").MemoExoticComponent<typeof EdgeTextComponent>;
 export {};
 //# sourceMappingURL=EdgeText.d.ts.map

package/dist/esm/components/Edges/EdgeText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeText.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/EdgeText.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,iBAAS,iBAAiB,CAAC,EACzB,CAAC,EACD,CAAC,EACD,KAAK,EACL,UAAe,EACf,WAAkB,EAClB,YAAiB,EACjB,cAAuB,EACvB,mBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,kDAqDf;kBAjEQ,iBAAiB;;;AAqE1B,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}
+{"version":3,"file":"EdgeText.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/EdgeText.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,iBAAS,iBAAiB,CAAC,EACzB,CAAC,EACD,CAAC,EACD,KAAK,EACL,UAAe,EACf,WAAkB,EAClB,YAAiB,EACjB,cAAuB,EACvB,mBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,kDAqDf;kBAjEQ,iBAAiB;;;AAqE1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}

package/dist/esm/components/Edges/SimpleBezierEdge.d.ts

@@ -9,6 +9,11 @@ export interface GetSimpleBezierPathParams {
     targetY: number;
     targetPosition?: Position;
 }
+/**
+ * The `getSimpleBezierPath` util returns everything you need to render a simple
+ * bezier edge between two nodes.
+ * @public
+ */
 export declare function getSimpleBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, }: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number];
 declare const SimpleBezierEdge: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, interactionWidth, }: SimpleBezierEdgeProps) => import("react/jsx-runtime").JSX.Element>;
 declare const SimpleBezierEdgeInternal: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, interactionWidth, }: SimpleBezierEdgeProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/esm/components/Edges/SimpleBezierEdge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleBezierEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/SimpleBezierEdge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAuB,MAAM,gBAAgB,CAAC;AAG/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAEzD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAkBD,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,OAAO,EACP,cAAgC,EAChC,OAAO,EACP,OAAO,EACP,cAA6B,GAC9B,EAAE,yBAAyB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAiC9G;AAyDD,QAAA,MAAM,gBAAgB,wPAlCf,qBAAqB,6CAkC0C,CAAC;AACvE,QAAA,MAAM,wBAAwB,wPAnCvB,qBAAqB,6CAmCiD,CAAC;AAK9E,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,CAAC"}
+{"version":3,"file":"SimpleBezierEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/SimpleBezierEdge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAuB,MAAM,gBAAgB,CAAC;AAG/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAEzD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAkBD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,OAAO,EACP,cAAgC,EAChC,OAAO,EACP,OAAO,EACP,cAA6B,GAC9B,EAAE,yBAAyB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAiC9G;AAyDD,QAAA,MAAM,gBAAgB,wPAlCf,qBAAqB,6CAkC0C,CAAC;AACvE,QAAA,MAAM,wBAAwB,wPAnCvB,qBAAqB,6CAmCiD,CAAC;AAK9E,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

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

@@ -1,11 +1,39 @@
 import { type HTMLAttributes } from 'react';
 import { type HandleProps as HandlePropsSystem, OnConnect } from '@xyflow/system';
-export interface HandleProps extends HandlePropsSystem, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+/**
+ * @expand
+ */
+export type HandleProps = HandlePropsSystem & Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
     /** Callback called when connection is made */
     onConnect?: OnConnect;
-}
+};
 /**
- * The Handle component is a UI element that is used to connect nodes.
+ * The `<Handle />` component is used in your [custom nodes](/learn/customization/custom-nodes)
+ * to define connection points.
+ *
+ *@public
+ *
+ *@example
+ *
+ *```jsx
+ *import { Handle, Position } from '@xyflow/react';
+ *
+ *export function CustomNode({ data }) {
+ *  return (
+ *    <>
+ *      <div style={{ padding: '10px 20px' }}>
+ *        {data.label}
+ *      </div>
+ *
+ *      <Handle type="target" position={Position.Left} />
+ *      <Handle type="source" position={Position.Right} />
+ *    </>
+ *  );
+ *};
+ *```
  */
-export declare const Handle: import("react").MemoExoticComponent<(props: HandleProps & import("react").RefAttributes<HTMLDivElement>) => JSX.Element>;
+export declare const Handle: import("react").MemoExoticComponent<(props: HandlePropsSystem & Omit<HTMLAttributes<HTMLDivElement>, "id"> & {
+    /** Callback called when connection is made */
+    onConnect?: OnConnect | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Handle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAOL,KAAK,WAAW,IAAI,iBAAiB,EAIrC,SAAS,EAGV,MAAM,gBAAgB,CAAC;AAOxB,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC;IAChG,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAwND;;GAEG;AACH,eAAO,MAAM,MAAM,0HAAyC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Handle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAOL,KAAK,WAAW,IAAI,iBAAiB,EAIrC,SAAS,EAGV,MAAM,gBAAgB,CAAC;AAOxB;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,GAAG;IAC3C,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AA0NJ;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM;IArPf,8CAA8C;;kEAqPU,CAAC"}

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

@@ -1,3 +1,3 @@
 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, nodeExtent, nodeClickDistance, onError, }: NodeWrapperProps<NodeType>): import("react/jsx-runtime").JSX.Element | null;
+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;
 //# 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":"AAmBA,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,UAAU,EACV,iBAAiB,EACjB,OAAO,GACR,EAAE,gBAAgB,CAAC,QAAQ,CAAC,kDAkL5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/index.tsx"],"names":[],"mappings":"AAmBA,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,kDAoL5B"}

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

@@ -1 +1 @@
-{"version":3,"file":"useNodeObserver.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/useNodeObserver.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,cAAc,GACf,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;CACvC,2DAiDA"}
+{"version":3,"file":"useNodeObserver.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/useNodeObserver.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,cAAc,GACf,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;CACvC,2DAmDA"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMjD,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAKpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAK9B,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACvE,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC3B;IACD,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC,CAYA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMjD,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAKpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAK9B,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACvE,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC3B;IACC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC,CAYF"}

package/dist/esm/components/Nodes/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Nodes/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGxC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMlD,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,QAAgB,EAChB,OAAO,GACR,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE;QACL,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;QAC/C,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;KAChD,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACrC,QAkBA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Nodes/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGxC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAQlD,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,QAAgB,EAChB,OAAO,GACR,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE;QACL,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;QAC/C,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;KAChD,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACrC,QAkBA"}

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

@@ -1,15 +1,43 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import type { PanelPosition } from '@xyflow/system';
+/**
+ * @expand
+ */
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
-    /** Set position of the panel
-     * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+    /**
+     * The position of the panel
      */
     position?: PanelPosition;
     children: ReactNode;
 };
+/**
+ * The `<Panel />` component helps you position content above the viewport.
+ * It is used internally by the [`<MiniMap />`](/api-reference/components/minimap)
+ * and [`<Controls />`](/api-reference/components/controls) components.
+ *
+ * @public
+ *
+ * @example
+ * ```jsx
+ *import { ReactFlow, Background, Panel } from '@xyflow/react';
+ *
+ *export default function Flow() {
+ *  return (
+ *    <ReactFlow nodes={[]} fitView>
+ *      <Panel position="top-left">top-left</Panel>
+ *      <Panel position="top-center">top-center</Panel>
+ *      <Panel position="top-right">top-right</Panel>
+ *      <Panel position="bottom-left">bottom-left</Panel>
+ *      <Panel position="bottom-center">bottom-center</Panel>
+ *      <Panel position="bottom-right">bottom-right</Panel>
+ *    </ReactFlow>
+ *  );
+ *}
+ *```
+ */
 export declare const Panel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    /** Set position of the panel
-     * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+    /**
+     * The position of the panel
      */
     position?: PanelPosition | undefined;
     children: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAKpD,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAIF,eAAO,MAAM,KAAK;IAThB;;OAEG;;cAEO,SAAS;kDAqBpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAKpD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,KAAK;IAlChB;;OAEG;;cAEO,SAAS;kDA8CpB,CAAC"}

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

@@ -13,5 +13,39 @@ export type ReactFlowProviderProps = {
     nodeExtent?: CoordinateExtent;
     children: ReactNode;
 };
+/**
+ * The `<ReactFlowProvider />` component is a [context provider](https://react.dev/learn/passing-data-deeply-with-context#)
+ * that makes it possible to access a flow's internal state outside of the
+ * [`<ReactFlow />`](/api-reference/react-flow) component. Many of the hooks we
+ * provide rely on this component to work.
+ * @public
+ *
+ * @example
+ * ```tsx
+ *import { ReactFlow, ReactFlowProvider, useNodes } from '@xyflow/react'
+ *
+ *export default function Flow() {
+ *  return (
+ *    <ReactFlowProvider>
+ *      <ReactFlow nodes={...} edges={...} />
+ *      <Sidebar />
+ *    </ReactFlowProvider>
+ *  );
+ *}
+ *
+ *function Sidebar() {
+ *  // This hook will only work if the component it's used in is a child of a
+ *  // <ReactFlowProvider />.
+ *  const nodes = useNodes()
+ *
+ *  return <aside>do something with nodes</aside>;
+ *}
+ *```
+ *
+ * @remarks If you're using a router and want your flow's state to persist across routes,
+ * it's vital that you place the `<ReactFlowProvider />` component _outside_ of
+ * your router. If you have multiple flows on the same page you will need to use a separate
+ * `<ReactFlowProvider />` for each flow.
+ */
 export declare function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, nodeOrigin, nodeExtent, children, }: ReactFlowProviderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReactFlowProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,YAAY,EACZ,YAAY,EACZ,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE,sBAAsB,2CAoBxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReactFlowProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,YAAY,EACZ,YAAY,EACZ,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE,sBAAsB,2CAoBxB"}

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

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

@@ -1,4 +1,29 @@
 import type { ReactNode } from 'react';
+/**
+ * The `<ViewportPortal />` component can be used to add components to the same viewport
+ * of the flow where nodes and edges are rendered. This is useful when you want to render
+ * your own components that are adhere to the same coordinate system as the nodes & edges
+ * and are also affected by zooming and panning
+ * @public
+ * @example
+ *
+ * ```jsx
+ *import React from 'react';
+ *import { ViewportPortal } from '@xyflow/react';
+ *
+ *export default function () {
+ *  return (
+ *    <ViewportPortal>
+ *      <div
+ *        style={{ transform: 'translate(100px, 100px)', position: 'absolute' }}
+ *      >
+ *        This div is positioned at [100, 100] on the flow.
+ *      </div>
+ *    </ViewportPortal>
+ *  );
+ *}
+ *```
+ */
 export declare function ViewportPortal({ children }: {
     children: ReactNode;
 }): import("react").ReactPortal | null;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ViewportPortal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,sCAQnE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ViewportPortal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,sCAQnE"}

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

@@ -1 +1 @@
-{"version":3,"file":"MarkerDefinitions.d.ts","sourceRoot":"","sources":["../../../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"}
+{"version":3,"file":"MarkerDefinitions.d.ts","sourceRoot":"","sources":["../../../src/container/EdgeRenderer/MarkerDefinitions.tsx"],"names":[],"mappings":";AAMA,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;;;;;AAkFF,wBAAuC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/NodeRenderer/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,IAAI,IAAI,CACzD,cAAc,CAAC,QAAQ,CAAC,EACtB,aAAa,GACb,mBAAmB,GACnB,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,2BAA2B,GAC3B,gBAAgB,GAChB,iBAAiB,GACjB,MAAM,GACN,qBAAqB,GACrB,YAAY,GACZ,WAAW,GACX,mBAAmB,CACtB,CAAC;AAUF,iBAAS,qBAAqB,CAAC,QAAQ,SAAS,IAAI,EAAE,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CA2DvF;kBA3DQ,qBAAqB;;;AA+D9B,eAAO,MAAM,YAAY,8BAA8D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/NodeRenderer/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,IAAI,IAAI,CACzD,cAAc,CAAC,QAAQ,CAAC,EACtB,aAAa,GACb,mBAAmB,GACnB,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,2BAA2B,GAC3B,gBAAgB,GAChB,iBAAiB,GACjB,MAAM,GACN,qBAAqB,GACrB,YAAY,GACZ,WAAW,GACX,mBAAmB,CACtB,CAAC;AAUF,iBAAS,qBAAqB,CAAC,QAAQ,SAAS,IAAI,EAAE,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CA6DvF;kBA7DQ,qBAAqB;;;AAiE9B,eAAO,MAAM,YAAY,8BAA8D,CAAC"}

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;AAoBF,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,2CAoMX"}
+{"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;AAoBF,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,2CAwMX"}

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

@@ -1 +1 @@
-{"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/Wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,2CAwBA"}
+{"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/Wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,2CA0BA"}

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

@@ -1,5 +1,25 @@
 /// <reference types="react" />
 import type { Edge, Node, ReactFlowProps } from '../../types';
+/**
+ * The `<ReactFlow />` component is the heart of your React Flow application.
+ * It renders your nodes and edges and handles user interaction
+ *
+ * @public
+ *
+ * @example
+ * ```tsx
+ *import { ReactFlow } from '@xyflow/react'
+ *
+ *export default function Flow() {
+ *  return (<ReactFlow
+ *    nodes={...}
+ *    edges={...}
+ *    onNodesChange={...}
+ *    ...
+ *  />);
+ *}
+ *```
+ */
 declare const _default: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: ReactFlowProps<NodeType, EdgeType> & import("react").RefAttributes<HTMLDivElement>) => JSX.Element;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

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;;AAoS9D,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;AA+S9D;;;;;;;;;;;;;;;;;;;GAmBG;;AACH,wBAA0C"}

package/dist/esm/contexts/NodeIdContext.d.ts

@@ -2,6 +2,34 @@
 export declare const NodeIdContext: import("react").Context<string | null>;
 export declare const Provider: import("react").Provider<string | null>;
 export declare const Consumer: import("react").Consumer<string | null>;
+/**
+ * You can use this hook to get the id of the node it is used inside. It is useful
+ * if you need the node's id deeper in the render tree but don't want to manually
+ * drill down the id as a prop.
+ *
+ * @public
+ * @returns id of the node
+ *
+ * @example
+ *```jsx
+ *import { useNodeId } from '@xyflow/react';
+ *
+ *export default function CustomNode() {
+ *  return (
+ *    <div>
+ *      <span>This node has an id of </span>
+ *      <NodeIdDisplay />
+ *    </div>
+ *  );
+ *}
+ *
+ *function NodeIdDisplay() {
+ *  const nodeId = useNodeId();
+ *
+ *  return <span>{nodeId}</span>;
+ *}
+ *```
+ */
 export declare const useNodeId: () => string | null;
 export default NodeIdContext;
 //# sourceMappingURL=NodeIdContext.d.ts.map

package/dist/esm/contexts/NodeIdContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeIdContext.d.ts","sourceRoot":"","sources":["../../src/contexts/NodeIdContext.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,aAAa,wCAAqC,CAAC;AAChE,eAAO,MAAM,QAAQ,yCAAyB,CAAC;AAC/C,eAAO,MAAM,QAAQ,yCAAyB,CAAC;AAE/C,eAAO,MAAM,SAAS,QAAO,MAAM,GAAG,IAGrC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"NodeIdContext.d.ts","sourceRoot":"","sources":["../../src/contexts/NodeIdContext.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,aAAa,wCAAqC,CAAC;AAChE,eAAO,MAAM,QAAQ,yCAAyB,CAAC;AAC/C,eAAO,MAAM,QAAQ,yCAAyB,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,SAAS,QAAO,MAAM,GAAG,IAGrC,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -1,9 +1,28 @@
 import { ConnectionState } from '@xyflow/system';
 import type { InternalNode, Node } from '../types';
 /**
- * Hook for accessing the connection state.
+ * The `useConnection` hook returns the current connection when there is an active
+ * connection interaction. If no connection interaction is active, it returns null
+ * for every property. A typical use case for this hook is to colorize handles
+ * based on a certain condition (e.g. if the connection is valid or not).
  *
  * @public
+ * @example
+ *
+ * ```tsx
+ *import { useConnection } from '@xyflow/react';
+ *
+ *function App() {
+ *  const connection = useConnection();
+ *
+ *  return (
+ *    <div> {connection ? `Someone is trying to make a connection from ${connection.fromNode} to this one.` : 'There are currently no incoming connections!'}
+ *
+ *   </div>
+ *   );
+ * }
+ * ```
+ *
  * @returns ConnectionState
  */
 export declare function useConnection<NodeType extends Node = Node, SelectorReturn = ConnectionState<InternalNode<NodeType>>>(connectionSelector?: (connection: ConnectionState<InternalNode<NodeType>>) => SelectorReturn): SelectorReturn;

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

@@ -1 +1 @@
-{"version":3,"file":"useConnection.d.ts","sourceRoot":"","sources":["../../src/hooks/useConnection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,gBAAgB,CAAC;AAGvE,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAqBnE;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,cAAc,GAAG,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAClH,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,KAAK,cAAc,GAC3F,cAAc,CAGhB"}
+{"version":3,"file":"useConnection.d.ts","sourceRoot":"","sources":["../../src/hooks/useConnection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,gBAAgB,CAAC;AAGvE,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAqBnE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,cAAc,GAAG,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAClH,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,KAAK,cAAc,GAC3F,cAAc,CAGhB"}

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

@@ -1,9 +1,21 @@
 import type { Edge } from '../types';
 /**
- * Hook for getting the current edges from the store.
+ * This hook returns an array of the current edges. Components that use this hook
+ * will re-render **whenever any edge changes**.
  *
  * @public
  * @returns An array of edges
+ *
+ * @example
+ * ```tsx
+ *import { useEdges } from '@xyflow/react';
+ *
+ *export default function () {
+ *  const edges = useEdges();
+ *
+ *  return <div>There are currently {edges.length} edges!</div>;
+ *}
+ *```
  */
 export declare function useEdges<EdgeType extends Edge = Edge>(): EdgeType[];
 //# sourceMappingURL=useEdges.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useEdges.d.ts","sourceRoot":"","sources":["../../src/hooks/useEdges.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAIrD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,EAAE,CAInE"}
+{"version":3,"file":"useEdges.d.ts","sourceRoot":"","sources":["../../src/hooks/useEdges.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAIrD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,EAAE,CAInE"}

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

@@ -1,10 +1,30 @@
 import type { InternalNode, Node } from '../types';
 /**
- * Hook for getting an internal node by id
+ * This hook returns the internal representation of a specific node.
+ * Components that use this hook will re-render **whenever the node changes**,
+ * including when a node is selected or moved.
  *
  * @public
  * @param id - id of the node
  * @returns array with visible node ids
+ *
+ * @example
+ * ```tsx
+ *import { useInternalNode } from '@xyflow/react';
+ *
+ *export default function () {
+ *  const internalNode = useInternalNode('node-1');
+ *  const absolutePosition = internalNode.internals.positionAbsolute;
+ *
+ *  return (
+ *    <div>
+ *      The absolute position of the node is at:
+ *      <p>x: {absolutePosition.x}</p>
+ *      <p>y: {absolutePosition.y}</p>
+ *    </div>
+ *  );
+ *}
+ *```
  */
 export declare function useInternalNode<NodeType extends Node = Node>(id: string): InternalNode<NodeType> | undefined;
 //# sourceMappingURL=useInternalNode.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useInternalNode.d.ts","sourceRoot":"","sources":["../../src/hooks/useInternalNode.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEnD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG,SAAS,CAO5G"}
+{"version":3,"file":"useInternalNode.d.ts","sourceRoot":"","sources":["../../src/hooks/useInternalNode.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG,SAAS,CAO5G"}

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

@@ -4,12 +4,30 @@ export type UseKeyPressOptions = {
     actInsideInputWithModifier?: boolean;
 };
 /**
- * Hook for handling key events.
+ * This hook lets you listen for specific key codes and tells you whether they are
+ * currently pressed or not.
  *
  * @public
  * @param param.keyCode - The key code (string or array of strings) to use
  * @param param.options - Options
  * @returns boolean
+ *
+ * @example
+ * ```tsx
+ *import { useKeyPress } from '@xyflow/react';
+ *
+ *export default function () {
+ *  const spacePressed = useKeyPress('Space');
+ *  const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);
+ *
+ *  return (
+ *    <div>
+ *     {spacePressed && <p>Space pressed!</p>}
+ *     {cmdAndSPressed && <p>Cmd + S pressed!</p>}
+ *    </div>
+ *  );
+ *}
+ *```
  */
 export declare function useKeyPress(keyCode?: KeyCode | null, options?: UseKeyPressOptions): boolean;
 //# sourceMappingURL=useKeyPress.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useKeyPress.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyPress.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC;IAC7D,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC,CAAC;AAIF;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAKzB,OAAO,GAAE,OAAO,GAAG,IAAW,EAC9B,OAAO,GAAE,kBAA6E,GACrF,OAAO,CAmGT"}
+{"version":3,"file":"useKeyPress.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyPress.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC;IAC7D,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAOzB,OAAO,GAAE,OAAO,GAAG,IAAW,EAC9B,OAAO,GAAE,kBAA6E,GACrF,OAAO,CAuGT"}

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

@@ -1 +1 @@
-{"version":3,"file":"useMoveSelectedNodes.d.ts","sourceRoot":"","sources":["../../src/hooks/useMoveSelectedNodes.ts"],"names":[],"mappings":"AACA,OAAO,EAAuC,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAQtF;;;;;GAKG;AACH,wBAAgB,oBAAoB,aAGa;IAAE,SAAS,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,UA+CzF"}
+{"version":3,"file":"useMoveSelectedNodes.d.ts","sourceRoot":"","sources":["../../src/hooks/useMoveSelectedNodes.ts"],"names":[],"mappings":"AACA,OAAO,EAAuC,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAQtF;;;;;GAKG;AACH,wBAAgB,oBAAoB,aAGa;IAAE,SAAS,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,UAiDzF"}

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

@@ -7,7 +7,7 @@ type UseNodeConnectionsParams = {
     onDisconnect?: (connections: Connection[]) => void;
 };
 /**
- * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
+ * This hook returns an array of connections on a specific node, handle type ('source', 'target') or handle ID.
  *
  * @public
  * @param param.id - node id - optional if called inside a custom node
@@ -16,6 +16,22 @@ type UseNodeConnectionsParams = {
  * @param param.onConnect - gets called when a connection is established
  * @param param.onDisconnect - gets called when a connection is removed
  * @returns an array with connections
+ *
+ * @example
+ * ```jsx
+ *import { useNodeConnections } from '@xyflow/react';
+ *
+ *export default function () {
+ *  const connections = useNodeConnections({
+ *    type: 'target',
+ *    handleId: 'my-handle',
+ *  });
+ *
+ *  return (
+ *    <div>There are currently {connections.length} incoming connections!</div>
+ *  );
+ *}
+ *```
  */
 export declare function useNodeConnections({ id, handleType, handleId, onConnect, onDisconnect, }?: UseNodeConnectionsParams): NodeConnection[];
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"useNodeConnections.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodeConnections.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,cAAc,EACd,UAAU,EAIX,MAAM,gBAAgB,CAAC;AAOxB,KAAK,wBAAwB,GAAG;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,EAAE,EACF,UAAU,EACV,QAAQ,EACR,SAAS,EACT,YAAY,GACb,GAAE,wBAA6B,GAAG,cAAc,EAAE,CA8BlD"}
+{"version":3,"file":"useNodeConnections.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodeConnections.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,cAAc,EACd,UAAU,EAIX,MAAM,gBAAgB,CAAC;AAOxB,KAAK,wBAAwB,GAAG;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,EAAE,EACF,UAAU,EACV,QAAQ,EACR,SAAS,EACT,YAAY,GACb,GAAE,wBAA6B,GAAG,cAAc,EAAE,CA8BlD"}

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

@@ -1,9 +1,22 @@
 import type { Node } from '../types';
 /**
- * Hook for getting the current nodes from the store.
+ * This hook returns an array of the current nodes. Components that use this hook
+ * will re-render **whenever any node changes**, including when a node is selected
+ * or moved.
  *
  * @public
  * @returns An array of nodes
+ *
+ * @example
+ * ```jsx
+ *import { useNodes } from '@xyflow/react';
+ *
+ *export default function() {
+ *  const nodes = useNodes();
+ *
+ *  return <div>There are currently {nodes.length} nodes!</div>;
+ *}
+ *```
  */
 export declare function useNodes<NodeType extends Node = Node>(): NodeType[];
 //# sourceMappingURL=useNodes.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useNodes.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodes.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAIrD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,EAAE,CAInE"}
+{"version":3,"file":"useNodes.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodes.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAIrD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,EAAE,CAInE"}