@xyflow/react 12.4.2 → 12.4.4

package/dist/umd/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/umd/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/umd/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/umd/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/umd/components/SelectionListener/index.d.ts

@@ -1,7 +1,7 @@
-import type { OnSelectionChangeFunc } from '../../types';
-type SelectionListenerProps = {
-    onSelectionChange?: OnSelectionChangeFunc;
+import type { OnSelectionChangeFunc, Node, Edge } from '../../types';
+type SelectionListenerProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+    onSelectionChange?: OnSelectionChangeFunc<NodeType, EdgeType>;
 };
-export declare function SelectionListener({ onSelectionChange }: SelectionListenerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SelectionListener<NodeType extends Node = Node, EdgeType extends Edge = Edge>({ onSelectionChange, }: SelectionListenerProps<NodeType, EdgeType>): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/umd/components/SelectionListener/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionListener/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAkB,qBAAqB,EAAc,MAAM,aAAa,CAAC;AAErF,KAAK,sBAAsB,GAAG;IAC5B,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;CAC3C,CAAC;AAgDF,wBAAgB,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,EAAE,sBAAsB,kDAQ9E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionListener/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAkB,qBAAqB,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAErF,KAAK,sBAAsB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IACxF,iBAAiB,CAAC,EAAE,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;CAC/D,CAAC;AAkDF,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC5F,iBAAiB,GAClB,EAAE,sBAAsB,CAAC,QAAQ,EAAE,QAAQ,CAAC,kDAQ5C"}

package/dist/umd/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/umd/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/umd/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/umd/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/umd/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/umd/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/umd/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/umd/container/ReactFlow/index.d.ts

@@ -1,5 +1,25 @@
 /// <reference types="react" />
 import type { Edge, Node, ReactFlowProps } from '../../types';
-declare const _default: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: ReactFlowProps<NodeType, EdgeType> & import("react").RefAttributes<HTMLDivElement>) => JSX.Element;
+/**
+ * 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>) => import("react").JSX.Element;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/dist/umd/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/umd/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/umd/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/umd/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/umd/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/umd/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/umd/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/umd/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/umd/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/umd/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/umd/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/umd/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/umd/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({
+ *    handleType: '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/umd/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/umd/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/umd/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"}

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

@@ -1,11 +1,23 @@
 import type { Node } from '../types';
 /**
- * Hook for receiving data of one or multiple nodes
+ * This hook lets you subscribe to changes of a specific nodes `data` object.
  *
  * @public
  * @param nodeId - The id (or ids) of the node to get the data from
- * @param guard - Optional guard function to narrow down the node type
  * @returns An object (or array of object) with {id, type, data} representing each node
+ *
+ * @example
+ *
+ *```jsx
+ *import { useNodesData } from '@xyflow/react';
+ *
+ *export default function() {
+ *  const nodeData = useNodesData('nodeId-1');
+ *  const nodesData = useNodesData(['nodeId-1', 'nodeId-2']);
+ *
+ *  return null;
+ *}
+ *```
  */
 export declare function useNodesData<NodeType extends Node = Node>(nodeId: string): Pick<NodeType, 'id' | 'type' | 'data'> | null;
 export declare function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): Pick<NodeType, 'id' | 'type' | 'data'>[];

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

@@ -1 +1 @@
-{"version":3,"file":"useNodesData.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesData.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACvD,MAAM,EAAE,MAAM,GACb,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;AACjD,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC"}
+{"version":3,"file":"useNodesData.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesData.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACvD,MAAM,EAAE,MAAM,GACb,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;AACjD,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC"}

package/dist/umd/hooks/useNodesEdgesState.d.ts

@@ -1,19 +1,79 @@
 import { type Dispatch, type SetStateAction } from 'react';
 import type { Node, Edge, OnNodesChange, OnEdgesChange } from '../types';
 /**
- * Hook for managing the state of nodes - should only be used for prototyping / simple use cases.
+ * This hook makes it easy to prototype a controlled flow where you manage the
+ * state of nodes and edges outside the `ReactFlowInstance`. You can think of it
+ * like React's `useState` hook with an additional helper callback.
  *
  * @public
  * @param initialNodes
  * @returns an array [nodes, setNodes, onNodesChange]
+ * @example
+ *
+ *```tsx
+ *import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';
+ *
+ *const initialNodes = [];
+ *const initialEdges = [];
+ *
+ *export default function () {
+ *  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+ *  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+ *
+ *  return (
+ *    <ReactFlow
+ *      nodes={nodes}
+ *      edges={edges}
+ *      onNodesChange={onNodesChange}
+ *      onEdgesChange={onEdgesChange}
+ *    />
+ *  );
+ *}
+ *```
+ *
+ * @remarks This hook was created to make prototyping easier and our documentation
+ * examples clearer. Although it is OK to use this hook in production, in
+ * practice you may want to use a more sophisticated state management solution
+ * like Zustand {@link https://reactflow.dev/docs/guides/state-management/} instead.
+ *
  */
 export declare function useNodesState<NodeType extends Node>(initialNodes: NodeType[]): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, OnNodesChange<NodeType>];
 /**
- * Hook for managing the state of edges - should only be used for prototyping / simple use cases.
+ * This hook makes it easy to prototype a controlled flow where you manage the
+ * state of nodes and edges outside the `ReactFlowInstance`. You can think of it
+ * like React's `useState` hook with an additional helper callback.
  *
  * @public
  * @param initialEdges
  * @returns an array [edges, setEdges, onEdgesChange]
+ * @example
+ *
+ *```tsx
+ *import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';
+ *
+ *const initialNodes = [];
+ *const initialEdges = [];
+ *
+ *export default function () {
+ *  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+ *  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+ *
+ *  return (
+ *    <ReactFlow
+ *      nodes={nodes}
+ *      edges={edges}
+ *      onNodesChange={onNodesChange}
+ *      onEdgesChange={onEdgesChange}
+ *    />
+ *  );
+ *}
+ *```
+ *
+ * @remarks This hook was created to make prototyping easier and our documentation
+ * examples clearer. Although it is OK to use this hook in production, in
+ * practice you may want to use a more sophisticated state management solution
+ * like Zustand {@link https://reactflow.dev/docs/guides/state-management/} instead.
+ *
  */
 export declare function useEdgesState<EdgeType extends Edge = Edge>(initialEdges: EdgeType[]): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, OnEdgesChange<EdgeType>];
 //# sourceMappingURL=useNodesEdgesState.d.ts.map

package/dist/umd/hooks/useNodesEdgesState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodesEdgesState.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesEdgesState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGlF,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzE;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,EACjD,YAAY,EAAE,QAAQ,EAAE,GACvB,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAQ7E;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACxD,YAAY,EAAE,QAAQ,EAAE,GACvB,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAQ7E"}
+{"version":3,"file":"useNodesEdgesState.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesEdgesState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGlF,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,EACjD,YAAY,EAAE,QAAQ,EAAE,GACvB,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAQ7E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACxD,YAAY,EAAE,QAAQ,EAAE,GACvB,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAQ7E"}