@xyflow/react 12.5.3 → 12.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/dist/base.css +2 -2
  2. package/dist/esm/additional-components/Background/types.d.ts +9 -9
  3. package/dist/esm/additional-components/Background/types.d.ts.map +1 -1
  4. package/dist/esm/additional-components/MiniMap/MiniMapNodes.d.ts.map +1 -1
  5. package/dist/esm/additional-components/MiniMap/types.d.ts +65 -19
  6. package/dist/esm/additional-components/MiniMap/types.d.ts.map +1 -1
  7. package/dist/esm/additional-components/NodeResizer/NodeResizeControl.d.ts.map +1 -1
  8. package/dist/esm/additional-components/NodeResizer/types.d.ts +37 -18
  9. package/dist/esm/additional-components/NodeResizer/types.d.ts.map +1 -1
  10. package/dist/esm/additional-components/NodeToolbar/types.d.ts +6 -5
  11. package/dist/esm/additional-components/NodeToolbar/types.d.ts.map +1 -1
  12. package/dist/esm/components/Edges/SimpleBezierEdge.d.ts +10 -0
  13. package/dist/esm/components/Edges/SimpleBezierEdge.d.ts.map +1 -1
  14. package/dist/esm/components/Panel/index.d.ts +5 -5
  15. package/dist/esm/components/Panel/index.d.ts.map +1 -1
  16. package/dist/esm/contexts/NodeIdContext.d.ts +1 -1
  17. package/dist/esm/hooks/useConnection.d.ts +4 -0
  18. package/dist/esm/hooks/useConnection.d.ts.map +1 -1
  19. package/dist/esm/hooks/useEdges.d.ts +1 -1
  20. package/dist/esm/hooks/useHandleConnections.d.ts +8 -8
  21. package/dist/esm/hooks/useHandleConnections.d.ts.map +1 -1
  22. package/dist/esm/hooks/useInternalNode.d.ts +2 -2
  23. package/dist/esm/hooks/useKeyPress.d.ts +23 -4
  24. package/dist/esm/hooks/useKeyPress.d.ts.map +1 -1
  25. package/dist/esm/hooks/useNodeConnections.d.ts +6 -6
  26. package/dist/esm/hooks/useNodeConnections.d.ts.map +1 -1
  27. package/dist/esm/hooks/useNodes.d.ts +1 -1
  28. package/dist/esm/hooks/useNodesData.d.ts +7 -5
  29. package/dist/esm/hooks/useNodesData.d.ts.map +1 -1
  30. package/dist/esm/hooks/useNodesEdgesState.d.ts +32 -6
  31. package/dist/esm/hooks/useNodesEdgesState.d.ts.map +1 -1
  32. package/dist/esm/hooks/useNodesInitialized.d.ts +3 -2
  33. package/dist/esm/hooks/useNodesInitialized.d.ts.map +1 -1
  34. package/dist/esm/hooks/useOnSelectionChange.d.ts +1 -2
  35. package/dist/esm/hooks/useOnSelectionChange.d.ts.map +1 -1
  36. package/dist/esm/hooks/useOnViewportChange.d.ts +5 -6
  37. package/dist/esm/hooks/useOnViewportChange.d.ts.map +1 -1
  38. package/dist/esm/hooks/useReactFlow.d.ts +0 -2
  39. package/dist/esm/hooks/useReactFlow.d.ts.map +1 -1
  40. package/dist/esm/hooks/useStore.d.ts +8 -5
  41. package/dist/esm/hooks/useStore.d.ts.map +1 -1
  42. package/dist/esm/hooks/useUpdateNodeInternals.d.ts +5 -4
  43. package/dist/esm/hooks/useUpdateNodeInternals.d.ts.map +1 -1
  44. package/dist/esm/hooks/useViewport.d.ts +3 -3
  45. package/dist/esm/index.js +103 -74
  46. package/dist/esm/index.mjs +103 -74
  47. package/dist/esm/types/component-props.d.ts +234 -116
  48. package/dist/esm/types/component-props.d.ts.map +1 -1
  49. package/dist/esm/types/edges.d.ts +26 -8
  50. package/dist/esm/types/edges.d.ts.map +1 -1
  51. package/dist/esm/types/general.d.ts +11 -6
  52. package/dist/esm/types/general.d.ts.map +1 -1
  53. package/dist/esm/types/instance.d.ts +23 -8
  54. package/dist/esm/types/instance.d.ts.map +1 -1
  55. package/dist/esm/utils/changes.d.ts +6 -6
  56. package/dist/esm/utils/general.d.ts +11 -7
  57. package/dist/esm/utils/general.d.ts.map +1 -1
  58. package/dist/style.css +2 -2
  59. package/dist/umd/additional-components/Background/types.d.ts +9 -9
  60. package/dist/umd/additional-components/Background/types.d.ts.map +1 -1
  61. package/dist/umd/additional-components/MiniMap/MiniMapNodes.d.ts.map +1 -1
  62. package/dist/umd/additional-components/MiniMap/types.d.ts +65 -19
  63. package/dist/umd/additional-components/MiniMap/types.d.ts.map +1 -1
  64. package/dist/umd/additional-components/NodeResizer/NodeResizeControl.d.ts.map +1 -1
  65. package/dist/umd/additional-components/NodeResizer/types.d.ts +37 -18
  66. package/dist/umd/additional-components/NodeResizer/types.d.ts.map +1 -1
  67. package/dist/umd/additional-components/NodeToolbar/types.d.ts +6 -5
  68. package/dist/umd/additional-components/NodeToolbar/types.d.ts.map +1 -1
  69. package/dist/umd/components/Edges/SimpleBezierEdge.d.ts +10 -0
  70. package/dist/umd/components/Edges/SimpleBezierEdge.d.ts.map +1 -1
  71. package/dist/umd/components/Panel/index.d.ts +5 -5
  72. package/dist/umd/components/Panel/index.d.ts.map +1 -1
  73. package/dist/umd/contexts/NodeIdContext.d.ts +1 -1
  74. package/dist/umd/hooks/useConnection.d.ts +4 -0
  75. package/dist/umd/hooks/useConnection.d.ts.map +1 -1
  76. package/dist/umd/hooks/useEdges.d.ts +1 -1
  77. package/dist/umd/hooks/useHandleConnections.d.ts +8 -8
  78. package/dist/umd/hooks/useHandleConnections.d.ts.map +1 -1
  79. package/dist/umd/hooks/useInternalNode.d.ts +2 -2
  80. package/dist/umd/hooks/useKeyPress.d.ts +23 -4
  81. package/dist/umd/hooks/useKeyPress.d.ts.map +1 -1
  82. package/dist/umd/hooks/useNodeConnections.d.ts +6 -6
  83. package/dist/umd/hooks/useNodeConnections.d.ts.map +1 -1
  84. package/dist/umd/hooks/useNodes.d.ts +1 -1
  85. package/dist/umd/hooks/useNodesData.d.ts +7 -5
  86. package/dist/umd/hooks/useNodesData.d.ts.map +1 -1
  87. package/dist/umd/hooks/useNodesEdgesState.d.ts +32 -6
  88. package/dist/umd/hooks/useNodesEdgesState.d.ts.map +1 -1
  89. package/dist/umd/hooks/useNodesInitialized.d.ts +3 -2
  90. package/dist/umd/hooks/useNodesInitialized.d.ts.map +1 -1
  91. package/dist/umd/hooks/useOnSelectionChange.d.ts +1 -2
  92. package/dist/umd/hooks/useOnSelectionChange.d.ts.map +1 -1
  93. package/dist/umd/hooks/useOnViewportChange.d.ts +5 -6
  94. package/dist/umd/hooks/useOnViewportChange.d.ts.map +1 -1
  95. package/dist/umd/hooks/useReactFlow.d.ts +0 -2
  96. package/dist/umd/hooks/useReactFlow.d.ts.map +1 -1
  97. package/dist/umd/hooks/useStore.d.ts +8 -5
  98. package/dist/umd/hooks/useStore.d.ts.map +1 -1
  99. package/dist/umd/hooks/useUpdateNodeInternals.d.ts +5 -4
  100. package/dist/umd/hooks/useUpdateNodeInternals.d.ts.map +1 -1
  101. package/dist/umd/hooks/useViewport.d.ts +3 -3
  102. package/dist/umd/index.js +2 -2
  103. package/dist/umd/types/component-props.d.ts +234 -116
  104. package/dist/umd/types/component-props.d.ts.map +1 -1
  105. package/dist/umd/types/edges.d.ts +26 -8
  106. package/dist/umd/types/edges.d.ts.map +1 -1
  107. package/dist/umd/types/general.d.ts +11 -6
  108. package/dist/umd/types/general.d.ts.map +1 -1
  109. package/dist/umd/types/instance.d.ts +23 -8
  110. package/dist/umd/types/instance.d.ts.map +1 -1
  111. package/dist/umd/utils/changes.d.ts +6 -6
  112. package/dist/umd/utils/general.d.ts +11 -7
  113. package/dist/umd/utils/general.d.ts.map +1 -1
  114. package/package.json +4 -4
@@ -3,11 +3,9 @@ import type { Node } from '../types';
3
3
  * This hook lets you subscribe to changes of a specific nodes `data` object.
4
4
  *
5
5
  * @public
6
- * @param nodeId - The id (or ids) of the node to get the data from
7
- * @returns An object (or array of object) with {id, type, data} representing each node
6
+ * @returns An object (or array of object) with `id`, `type`, `data` representing each node.
8
7
  *
9
8
  * @example
10
- *
11
9
  *```jsx
12
10
  *import { useNodesData } from '@xyflow/react';
13
11
  *
@@ -19,6 +17,10 @@ import type { Node } from '../types';
19
17
  *}
20
18
  *```
21
19
  */
22
- export declare function useNodesData<NodeType extends Node = Node>(nodeId: string): Pick<NodeType, 'id' | 'type' | 'data'> | null;
23
- export declare function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): Pick<NodeType, 'id' | 'type' | 'data'>[];
20
+ export declare function useNodesData<NodeType extends Node = Node>(
21
+ /** The id of the node to get the data from. */
22
+ nodeId: string): Pick<NodeType, 'id' | 'type' | 'data'> | null;
23
+ export declare function useNodesData<NodeType extends Node = Node>(
24
+ /** The ids of the nodes to get the data from. */
25
+ nodeIds: string[]): Pick<NodeType, 'id' | 'type' | 'data'>[];
24
26
  //# sourceMappingURL=useNodesData.d.ts.map
@@ -1 +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;;;;;;;;;;;;;;;;;;;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"}
1
+ {"version":3,"file":"useNodesData.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesData.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI;AACvD,+CAA+C;AAC/C,MAAM,EAAE,MAAM,GACb,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;AACjD,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI;AACvD,iDAAiD;AACjD,OAAO,EAAE,MAAM,EAAE,GAChB,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC"}
@@ -6,8 +6,16 @@ import type { Node, Edge, OnNodesChange, OnEdgesChange } from '../types';
6
6
  * like React's `useState` hook with an additional helper callback.
7
7
  *
8
8
  * @public
9
- * @param initialNodes
10
- * @returns an array [nodes, setNodes, onNodesChange]
9
+ * @returns
10
+ * - `nodes`: The current array of nodes. You might pass this directly to the `nodes` prop of your
11
+ * `<ReactFlow />` component, or you may want to manipulate it first to perform some layouting,
12
+ * for example.
13
+ * - `setNodes`: A function that you can use to update the nodes. You can pass it a new array of
14
+ * nodes or a callback that receives the current array of nodes and returns a new array of nodes.
15
+ * This is the same as the second element of the tuple returned by React's `useState` hook.
16
+ * - `onNodesChange`: A handy callback that can take an array of `NodeChanges` and update the nodes
17
+ * state accordingly. You'll typically pass this directly to the `onNodesChange` prop of your
18
+ * `<ReactFlow />` component.
11
19
  * @example
12
20
  *
13
21
  *```tsx
@@ -37,15 +45,29 @@ import type { Node, Edge, OnNodesChange, OnEdgesChange } from '../types';
37
45
  * like Zustand {@link https://reactflow.dev/docs/guides/state-management/} instead.
38
46
  *
39
47
  */
40
- export declare function useNodesState<NodeType extends Node>(initialNodes: NodeType[]): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, OnNodesChange<NodeType>];
48
+ export declare function useNodesState<NodeType extends Node>(initialNodes: NodeType[]): [
49
+ nodes: NodeType[],
50
+ setNodes: Dispatch<SetStateAction<NodeType[]>>,
51
+ onNodesChange: OnNodesChange<NodeType>
52
+ ];
41
53
  /**
42
54
  * This hook makes it easy to prototype a controlled flow where you manage the
43
55
  * state of nodes and edges outside the `ReactFlowInstance`. You can think of it
44
56
  * like React's `useState` hook with an additional helper callback.
45
57
  *
46
58
  * @public
47
- * @param initialEdges
48
- * @returns an array [edges, setEdges, onEdgesChange]
59
+ * @returns
60
+ * - `edges`: The current array of edges. You might pass this directly to the `edges` prop of your
61
+ * `<ReactFlow />` component, or you may want to manipulate it first to perform some layouting,
62
+ * for example.
63
+ *
64
+ * - `setEdges`: A function that you can use to update the edges. You can pass it a new array of
65
+ * edges or a callback that receives the current array of edges and returns a new array of edges.
66
+ * This is the same as the second element of the tuple returned by React's `useState` hook.
67
+ *
68
+ * - `onEdgesChange`: A handy callback that can take an array of `EdgeChanges` and update the edges
69
+ * state accordingly. You'll typically pass this directly to the `onEdgesChange` prop of your
70
+ * `<ReactFlow />` component.
49
71
  * @example
50
72
  *
51
73
  *```tsx
@@ -75,5 +97,9 @@ export declare function useNodesState<NodeType extends Node>(initialNodes: NodeT
75
97
  * like Zustand {@link https://reactflow.dev/docs/guides/state-management/} instead.
76
98
  *
77
99
  */
78
- export declare function useEdgesState<EdgeType extends Edge = Edge>(initialEdges: EdgeType[]): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, OnEdgesChange<EdgeType>];
100
+ export declare function useEdgesState<EdgeType extends Edge = Edge>(initialEdges: EdgeType[]): [
101
+ edges: EdgeType[],
102
+ setEdges: Dispatch<SetStateAction<EdgeType[]>>,
103
+ onEdgesChange: OnEdgesChange<EdgeType>
104
+ ];
79
105
  //# sourceMappingURL=useNodesEdgesState.d.ts.map
@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,EACjD,YAAY,EAAE,QAAQ,EAAE,GACvB;IAED,KAAK,EAAE,QAAQ,EAAE;IACjB,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC9C,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAC;CACvC,CAQA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACxD,YAAY,EAAE,QAAQ,EAAE,GACvB;IAED,KAAK,EAAE,QAAQ,EAAE;IACjB,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC9C,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAC;CACvC,CAQA"}
@@ -1,4 +1,5 @@
1
1
  export type UseNodesInitializedOptions = {
2
+ /** @default false */
2
3
  includeHiddenNodes?: boolean;
3
4
  };
4
5
  /**
@@ -7,8 +8,8 @@ export type UseNodesInitializedOptions = {
7
8
  *`false` and then `true` again once the node has been measured.
8
9
  *
9
10
  * @public
10
- * @param options.includeHiddenNodes - defaults to false
11
- * @returns boolean indicating whether all nodes are initialized
11
+ * @returns Whether or not the nodes have been initialized by the `<ReactFlow />` component and
12
+ * given a width and height.
12
13
  *
13
14
  * @example
14
15
  * ```jsx
@@ -1 +1 @@
1
- {"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAkBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,0BAER,GACA,OAAO,CAIT"}
1
+ {"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,qBAAqB;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAkBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,0BAER,GACA,OAAO,CAIT"}
@@ -1,5 +1,6 @@
1
1
  import type { OnSelectionChangeFunc, Node, Edge } from '../types';
2
2
  export type UseOnSelectionChangeOptions<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
3
+ /** The handler to register. */
3
4
  onChange: OnSelectionChangeFunc<NodeType, EdgeType>;
4
5
  };
5
6
  /**
@@ -8,8 +9,6 @@ export type UseOnSelectionChangeOptions<NodeType extends Node = Node, EdgeType e
8
9
  *_either_ nodes or edges changes.
9
10
  *
10
11
  * @public
11
- * @param params.onChange - The handler to register
12
- *
13
12
  * @example
14
13
  * ```jsx
15
14
  *import { useState } from 'react';
@@ -1 +1 @@
1
- {"version":3,"file":"useOnSelectionChange.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnSelectionChange.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAElE,MAAM,MAAM,2BAA2B,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IACpG,QAAQ,EAAE,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;CACrD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC/F,QAAQ,GACT,EAAE,2BAA2B,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAYjD"}
1
+ {"version":3,"file":"useOnSelectionChange.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnSelectionChange.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAElE,MAAM,MAAM,2BAA2B,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IACpG,+BAA+B;IAC/B,QAAQ,EAAE,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;CACrD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC/F,QAAQ,GACT,EAAE,2BAA2B,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAYjD"}
@@ -1,19 +1,18 @@
1
1
  import type { OnViewportChange } from '@xyflow/system';
2
2
  export type UseOnViewportChangeOptions = {
3
+ /** Gets called when the viewport starts changing. */
3
4
  onStart?: OnViewportChange;
5
+ /** Gets called when the viewport changes. */
4
6
  onChange?: OnViewportChange;
7
+ /** Gets called when the viewport stops changing. */
5
8
  onEnd?: OnViewportChange;
6
9
  };
7
10
  /**
8
11
  * The `useOnViewportChange` hook lets you listen for changes to the viewport such
9
- *as panning and zooming. You can provide a callback for each phase of a viewport
10
- *change: `onStart`, `onChange`, and `onEnd`.
12
+ * as panning and zooming. You can provide a callback for each phase of a viewport
13
+ * change: `onStart`, `onChange`, and `onEnd`.
11
14
  *
12
15
  * @public
13
- * @param params.onStart - gets called when the viewport starts changing
14
- * @param params.onChange - gets called when the viewport changes
15
- * @param params.onEnd - gets called when the viewport stops changing
16
- *
17
16
  * @example
18
17
  * ```jsx
19
18
  *import { useCallback } from 'react';
@@ -1 +1 @@
1
- {"version":3,"file":"useOnViewportChange.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnViewportChange.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,0BAA0B,QAc3F"}
1
+ {"version":3,"file":"useOnViewportChange.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnViewportChange.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,MAAM,MAAM,0BAA0B,GAAG;IACvC,qDAAqD;IACrD,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,oDAAoD;IACpD,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,0BAA0B,QAc3F"}
@@ -3,8 +3,6 @@ import type { ReactFlowInstance, Node, Edge } from '../types';
3
3
  * This hook returns a ReactFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow.
4
4
  *
5
5
  * @public
6
- * @returns ReactFlowInstance
7
- *
8
6
  * @example
9
7
  * ```jsx
10
8
  *import { useCallback, useState } from 'react';
@@ -1 +1 @@
1
- {"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,iBAAiB,EACjB,IAAI,EACJ,IAAI,EAKL,MAAM,UAAU,CAAC;AAIlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAiPA"}
1
+ {"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,iBAAiB,EACjB,IAAI,EACJ,IAAI,EAKL,MAAM,UAAU,CAAC;AAIlB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAiPA"}
@@ -5,9 +5,13 @@ import type { Edge, Node, ReactFlowState } from '../types';
5
5
  * state management library, so you should check out their docs for more details.
6
6
  *
7
7
  * @public
8
- * @param selector
9
- * @param equalityFn
10
- * @returns The selected state slice
8
+ * @param selector - A selector function that returns a slice of the flow's internal state.
9
+ * Extracting or transforming just the state you need is a good practice to avoid unnecessary
10
+ * re-renders.
11
+ * @param equalityFn - A function to compare the previous and next value. This is incredibly useful
12
+ * for preventing unnecessary re-renders. Good sensible defaults are using `Object.is` or importing
13
+ * `zustand/shallow`, but you can be as granular as you like.
14
+ * @returns The selected state slice.
11
15
  *
12
16
  * @example
13
17
  * ```ts
@@ -22,8 +26,7 @@ declare function useStore<StateSlice = unknown>(selector: (state: ReactFlowState
22
26
  /**
23
27
  * In some cases, you might need to access the store directly. This hook returns the store object which can be used on demand to access the state or dispatch actions.
24
28
  *
25
- * @returns The store object
26
- *
29
+ * @returns The store object.
27
30
  * @example
28
31
  * ```ts
29
32
  * const store = useStoreApi();
@@ -1 +1 @@
1
- {"version":3,"file":"useStore.d.ts","sourceRoot":"","sources":["../../src/hooks/useStore.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAI3D;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,QAAQ,CAAC,UAAU,GAAG,OAAO,EACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,UAAU,EAC/C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,KAAK,OAAO,cASvD;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,WAAW,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI;;;;EAiB9E;AAED,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}
1
+ {"version":3,"file":"useStore.d.ts","sourceRoot":"","sources":["../../src/hooks/useStore.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAI3D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,QAAQ,CAAC,UAAU,GAAG,OAAO,EACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,UAAU,EAC/C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,KAAK,OAAO,cASvD;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,WAAW,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI;;;;EAiB9E;AAED,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}
@@ -1,12 +1,13 @@
1
1
  import type { UpdateNodeInternals } from '@xyflow/system';
2
2
  /**
3
3
  * When you programmatically add or remove handles to a node or update a node's
4
- *handle position, you need to let React Flow know about it using this hook. This
5
- *will update the internal dimensions of the node and properly reposition handles
6
- *on the canvas if necessary.
4
+ * handle position, you need to let React Flow know about it using this hook. This
5
+ * will update the internal dimensions of the node and properly reposition handles
6
+ * on the canvas if necessary.
7
7
  *
8
8
  * @public
9
- * @returns function for updating node internals
9
+ * @returns Use this function to tell React Flow to update the internal state of one or more nodes
10
+ * that you have changed programmatically.
10
11
  *
11
12
  * @example
12
13
  * ```jsx
@@ -1 +1 @@
1
- {"version":3,"file":"useUpdateNodeInternals.d.ts","sourceRoot":"","sources":["../../src/hooks/useUpdateNodeInternals.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAsB,MAAM,gBAAgB,CAAC;AAI9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,sBAAsB,IAAI,mBAAmB,CAkB5D"}
1
+ {"version":3,"file":"useUpdateNodeInternals.d.ts","sourceRoot":"","sources":["../../src/hooks/useUpdateNodeInternals.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAsB,MAAM,gBAAgB,CAAC;AAI9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,sBAAsB,IAAI,mBAAmB,CAkB5D"}
@@ -1,11 +1,11 @@
1
1
  import type { Viewport } from '@xyflow/system';
2
2
  /**
3
3
  * The `useViewport` hook is a convenient way to read the current state of the
4
- *{@link Viewport} in a component. Components that use this hook
5
- *will re-render **whenever the viewport changes**.
4
+ * {@link Viewport} in a component. Components that use this hook
5
+ * will re-render **whenever the viewport changes**.
6
6
  *
7
7
  * @public
8
- * @returns The current viewport
8
+ * @returns The current viewport.
9
9
  *
10
10
  * @example
11
11
  *