chore(types): add tsdocs

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -113,16 +113,16 @@ function MiniMapComponent<NodeType extends Node = Node>({
 
   const onSvgClick = onClick
     ? (event: MouseEvent) => {
-        const [x, y] = minimapInstance.current?.pointer(event) || [0, 0];
+      const [x, y] = minimapInstance.current?.pointer(event) || [0, 0];
-        onClick(event, { x, y });
+      onClick(event, { x, y });
-      }
+    }
     : undefined;
 
   const onSvgNodeClick = onNodeClick
     ? useCallback((event: MouseEvent, nodeId: string) => {
-        const node = store.getState().nodeLookup.get(nodeId)!;
+      const node = store.getState().nodeLookup.get(nodeId)!;
-        onNodeClick(event, node);
+      onNodeClick(event, node);
-      }, [])
+    }, [])
     : undefined;
 
   return (

packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx

@@ -109,7 +109,7 @@ export function NodeToolbar({
   const isActive =
     typeof isVisible === 'boolean'
       ? isVisible
-      : nodes.size === 1 && nodes.values().next().value.selected && selectedNodesCount === 1;
+      : nodes.size === 1 && nodes.values().next().value?.selected && selectedNodesCount === 1;
 
   if (!isActive || !nodes.size) {
     return null;

packages/react/src/types/edges.ts

@@ -33,7 +33,7 @@ export type EdgeLabelOptions = {
 
 /**
  * An `Edge` is the complete description with everything React Flow needs
- *to know in order to render it.
+ * to know in order to render it.
  * @public
  */
 export type Edge<
@@ -97,9 +97,8 @@ export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
 
 /**
  * Many properties on an [`Edge`](/api-reference/types/edge) are optional. When a new edge is created,
- *the properties that are not provided will be filled in with the default values
+ * the properties that are not provided will be filled in with the default values
- *passed to the `defaultEdgeOptions` prop of the [`<ReactFlow />`](/api-reference/react-flow#defaultedgeoptions)
+ * passed to the `defaultEdgeOptions` prop of the [`<ReactFlow />`](/api-reference/react-flow#defaultedgeoptions) component.
- *component.
  */
 export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
 
@@ -111,7 +110,7 @@ export type EdgeTextProps = SVGAttributes<SVGElement> &
 
 /**
  * When you implement a custom edge it is wrapped in a component that enables some
- *basic functionality. The `EdgeProps` type is the props that are passed to this.
+ * basic functionality. The `EdgeProps` type is the props that are passed to this.
  * @public
  * @expand
  */
@@ -199,8 +198,8 @@ export type OnReconnect<EdgeType extends Edge = Edge> = (oldEdge: EdgeType, newC
 
 /**
  * If you want to render a custom component for connection lines, you can set the
- *`connectionLineComponent` prop on the [`<ReactFlow />`](/api-reference/react-flow#connection-connectionLineComponent)
+ * `connectionLineComponent` prop on the [`<ReactFlow />`](/api-reference/react-flow#connection-connectionLineComponent)
- *component. The `ConnectionLineComponentProps` are passed to your custom component.
+ * component. The `ConnectionLineComponentProps` are passed to your custom component.
  *
  * @public
  */

packages/react/src/types/general.ts

@@ -18,11 +18,44 @@ import {
 
 import type { Node, Edge, ReactFlowInstance, EdgeProps, NodeProps } from '.';
 
+/**
+ * This type can be used to type the `onNodesChange` function with a custom node type.
+ *
+ * @public
+ *
+ * @example
+ *
+ * ```ts
+ * const onNodesChange: OnNodesChange<MyNodeType> = useCallback((changes) => {
+ *  setNodes((nodes) => applyNodeChanges(nodes, changes));
+ * },[]);
+ * ```
+ */
 export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<NodeType>[]) => void;
+
+/**
+ * This type can be used to type the `onEdgesChange` function with a custom edge type.
+ *
+ * @public
+ *
+ * @example
+ *
+ * ```ts
+ * const onEdgesChange: OnEdgesChange<MyEdgeType> = useCallback((changes) => {
+ *  setEdges((edges) => applyEdgeChanges(edges, changes));
+ * },[]);
+ * ```
+ */
 export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
 
 export type OnNodesDelete<NodeType extends Node = Node> = (nodes: NodeType[]) => void;
 export type OnEdgesDelete<EdgeType extends Edge = Edge> = (edges: EdgeType[]) => void;
+
+/**
+ * This type can be used to type the `onDelete` function with a custom node and edge type.
+ *
+ * @public
+ */
 export type OnDelete<NodeType extends Node = Node, EdgeType extends Edge = Edge> = (params: {
   nodes: NodeType[];
   edges: EdgeType[];
@@ -39,6 +72,7 @@ export type NodeTypes = Record<
     }
   >
 >;
+
 export type EdgeTypes = Record<
   string,
   ComponentType<

packages/react/src/types/instance.ts

@@ -13,6 +13,9 @@ export type DeleteElementsOptions = {
   edges?: (Edge | { id: Edge['id'] })[];
 };
 
+/**
+ * @inline
+ */
 export type GeneralHelpers<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
   /**
    * Returns nodes.
@@ -219,9 +222,9 @@ export type GeneralHelpers<NodeType extends Node = Node, EdgeType extends Edge =
 
 /**
  * The `ReactFlowInstance` provides a collection of methods to query and manipulate
- *the internal state of your flow. You can get an instance by using the
+ * the internal state of your flow. You can get an instance by using the
- *[`useReactFlow`](/api-reference/hooks/use-react-flow) hook or attaching a listener to the
+ * [`useReactFlow`](/api-reference/hooks/use-react-flow) hook or attaching a listener
- *[`onInit`](/api-reference/react-flow#event-oninit) event.
+ * to the [`onInit`](/api-reference/react-flow#event-oninit) event.
  *
  * @public
  */

packages/react/src/types/nodes.ts

@@ -5,8 +5,9 @@ import { NodeTypes } from './general';
 
 /**
  * The `Node` type represents everything React Flow needs to know about a given node.
- * Many of these properties can be manipulated both by React Flow or by you, but
+ * Whenever you want to update a certain attribute of a node, you need to create a new
- * some such as `width` and `height` should be considered read-only.
+ * node object.
+ *
  * @public
  */
 export type Node<
@@ -21,8 +22,8 @@ export type Node<
 
 /**
  * The `InternalNode` type is identical to the base [`Node`](/api-references/types/node)
- * type but is extended with some additional properties used internall by React
+ * type but is extended with some additional properties used internally.
- * Flow. Some functions and callbacks that return nodes may return an `InternalNode`.
+ * Some functions and callbacks that return nodes may return an `InternalNode`.
  *
  * @public
  */
@@ -59,6 +60,17 @@ export type NodeWrapperProps<NodeType extends Node> = {
   nodeClickDistance?: number;
 };
 
+/**
+ * The `BuiltInNode` type represents the built-in node types that are available in React Flow.
+ * You can use this type to extend your custom node type if you still want ot use the built-in ones.
+ *
+ * @public
+ * @example
+ * ```ts
+ * type CustomNode = Node<{ value: number }, 'custom'>;
+ * type MyAppNode = CustomNode | BuiltInNode;
+ * ```
+ */
 export type BuiltInNode =
   | Node<{ label: string }, 'input' | 'output' | 'default'>
   | Node<Record<string, never>, 'group'>;

packages/react/src/utils/changes.ts

@@ -147,8 +147,6 @@ function applyChange(change: any, element: any): any {
 /**
  * Drop in function that applies node changes to an array of nodes.
  * @public
- * @remarks Various events on the <ReactFlow /> component can produce an {@link NodeChange} that describes how to update the edges of your flow in some way.
- *If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.
  * @param changes - Array of changes to apply
  * @param nodes - Array of nodes to apply the changes to
  * @returns Array of updated nodes
@@ -172,6 +170,10 @@ function applyChange(change: any, element: any): any {
  *  );
  *}
  *```
+ * @remarks Various events on the <ReactFlow /> component can produce an {@link NodeChange}
+ * that describes how to update the edges of your flow in some way.
+ * If you don't need any custom behaviour, this util can be used to take an array
+ * of these changes and apply them to your edges.
  */
 export function applyNodeChanges<NodeType extends Node = Node>(
   changes: NodeChange<NodeType>[],
@@ -183,13 +185,10 @@ export function applyNodeChanges<NodeType extends Node = Node>(
 /**
  * Drop in function that applies edge changes to an array of edges.
  * @public
- * @remarks Various events on the <ReactFlow /> component can produce an {@link EdgeChange} that describes how to update the edges of your flow in some way.
- *If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.
  * @param changes - Array of changes to apply
  * @param edges - Array of edge to apply the changes to
  * @returns Array of updated edges
  * @example
- *
  * ```tsx
  *import { useState, useCallback } from 'react';
  *import { ReactFlow, applyEdgeChanges } from '@xyflow/react';
@@ -209,6 +208,10 @@ export function applyNodeChanges<NodeType extends Node = Node>(
  *  );
  *}
  *```
+ * @remarks Various events on the <ReactFlow /> component can produce an {@link EdgeChange}
+ * that describes how to update the edges of your flow in some way.
+ * If you don't need any custom behaviour, this util can be used to take an array
+ * of these changes and apply them to your edges.
  */
 export function applyEdgeChanges<EdgeType extends Edge = Edge>(
   changes: EdgeChange<EdgeType>[],