chore(hooks): tsdoc update

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

@@ -90,4 +90,57 @@ function BackgroundComponent({
 
 BackgroundComponent.displayName = 'Background';
 
+/**
+ * The `<Background />` component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and cross.
+ *
+ * @example
+ *
+ * A simple example of how to use the Background component.
+ *
+ * ```tsx
+ * import { useState } from 'react';
+ * import { ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
+ *
+ * export default function Flow() {
+ *   return (
+ *     <ReactFlow defaultNodes={[...]} defaultEdges={[...]}>
+ *       <Background color="#ccc" variant={BackgroundVariant.Dots} />
+ *     </ReactFlow>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ *
+ * In this example you can see how to combine multiple backgrounds
+ *
+ * ```tsx
+ * import { ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
+ * import '@xyflow/react/dist/style.css';
+ *
+ * export default function Flow() {
+ *   return (
+ *     <ReactFlow defaultNodes={[...]} defaultEdges={[...]}>
+ *       <Background
+ *         id="1"
+ *         gap={10}
+ *         color="#f1f1f1"
+ *         variant={BackgroundVariant.Lines}
+ *       />
+ *       <Background
+ *         id="2"
+ *         gap={100}
+ *         color="#ccc"
+ *         variant={BackgroundVariant.Lines}
+ *       />
+ *     </ReactFlow>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ *
+ * When combining multiple <Background /> components it’s important to give each of them a unique id prop!
+ *
+ */
 export const Background = memo(BackgroundComponent);

packages/react/src/additional-components/Background/types.ts

@@ -24,7 +24,8 @@ export type BackgroundProps = {
   offset?: number | [number, number];
   /** Line width of the Line pattern */
   lineWidth?: number;
-  /** Variant of the pattern
+  /**
+   * Variant of the pattern
    * @example BackgroundVariant.Lines, BackgroundVariant.Dots, BackgroundVariant.Cross
    * 'lines', 'dots', 'cross'
    */

packages/react/src/additional-components/Controls/types.ts

@@ -20,7 +20,8 @@ export type ControlProps = {
   onFitView?: () => void;
   /** Callback when interactivity is toggled */
   onInteractiveChange?: (interactiveStatus: boolean) => void;
-  /** Position of the controls on the pane
+  /**
+   * Position of the controls on the pane
    * @example PanelPosition.TopLeft, PanelPosition.TopRight,
    * PanelPosition.BottomLeft, PanelPosition.BottomRight
    */

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

@@ -44,8 +44,10 @@ function MiniMapComponent<NodeType extends Node = Node>({
   nodeClassName = '',
   nodeBorderRadius = 5,
   nodeStrokeWidth,
-  // We need to rename the prop to be `CapitalCase` so that JSX will render it as
-  // a component properly.
+  /*
+   * We need to rename the prop to be `CapitalCase` so that JSX will render it as
+   * a component properly.
+   */
   nodeComponent,
   bgColor,
   maskColor,
@@ -111,16 +113,16 @@ function MiniMapComponent<NodeType extends Node = Node>({
 
   const onSvgClick = onClick
     ? (event: MouseEvent) => {
-        const [x, y] = minimapInstance.current?.pointer(event) || [0, 0];
-        onClick(event, { x, y });
-      }
+      const [x, y] = minimapInstance.current?.pointer(event) || [0, 0];
+      onClick(event, { x, y });
+    }
     : undefined;
 
   const onSvgNodeClick = onNodeClick
     ? useCallback((event: MouseEvent, nodeId: string) => {
-        const node = store.getState().nodeLookup.get(nodeId)!;
-        onNodeClick(event, node);
-      }, [])
+      const node = store.getState().nodeLookup.get(nodeId)!;
+      onNodeClick(event, node);
+    }, [])
     : undefined;
 
   return (

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

@@ -21,8 +21,10 @@ function MiniMapNodes<NodeType extends Node>({
   nodeClassName = '',
   nodeBorderRadius = 5,
   nodeStrokeWidth,
-  // We need to rename the prop to be `CapitalCase` so that JSX will render it as
-  // a component properly.
+  /*
+   * We need to rename the prop to be `CapitalCase` so that JSX will render it as
+   * a component properly.
+   */
   nodeComponent: NodeComponent = MiniMapNode,
   onClick,
 }: MiniMapNodesProps<NodeType>) {
@@ -36,11 +38,13 @@ function MiniMapNodes<NodeType extends Node>({
   return (
     <>
       {nodeIds.map((nodeId) => (
-        // The split of responsibilities between MiniMapNodes and
-        // NodeComponentWrapper may appear weird. However, it’s designed to
-        // minimize the cost of updates when individual nodes change.
-        //
-        // For more details, see a similar commit in `NodeRenderer/index.tsx`.
+        /*
+         * The split of responsibilities between MiniMapNodes and
+         * NodeComponentWrapper may appear weird. However, it’s designed to
+         * minimize the cost of updates when individual nodes change.
+         * 
+         * For more details, see a similar commit in `NodeRenderer/index.tsx`.
+         */
         <NodeComponentWrapper<NodeType>
           key={nodeId}
           id={nodeId}

packages/react/src/additional-components/MiniMap/types.ts

@@ -27,7 +27,8 @@ export type MiniMapProps<NodeType extends Node = Node> = Omit<HTMLAttributes<SVG
   maskStrokeColor?: string;
   /** Stroke width of mask representing viewport */
   maskStrokeWidth?: number;
-  /** Position of minimap on pane
+  /**
+   * Position of minimap on pane
    * @example PanelPosition.TopLeft, PanelPosition.TopRight,
    * PanelPosition.BottomLeft, PanelPosition.BottomRight
    */

packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx

@@ -99,8 +99,10 @@ function ResizeControl({
             const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
             changes.push(...parentExpandChanges);
 
-            // when the parent was expanded by the child node, its position will be clamped at
-            // 0,0 when node origin is 0,0 and to width, height if it's 1,1
+            /*
+             * when the parent was expanded by the child node, its position will be clamped at
+             * 0,0 when node origin is 0,0 and to width, height if it's 1,1
+             */
             nextPosition.x = change.x ? Math.max(origin[0] * width, change.x) : undefined;
             nextPosition.y = change.y ? Math.max(origin[1] * height, change.y) : undefined;
           }

packages/react/src/additional-components/NodeResizer/types.ts

@@ -10,7 +10,8 @@ import type {
 } from '@xyflow/system';
 
 export type NodeResizerProps = {
-  /** Id of the node it is resizing
+  /**
+   * Id of the node it is resizing
    * @remarks optional if used inside custom node
    */
   nodeId?: string;
@@ -60,12 +61,14 @@ export type ResizeControlProps = Pick<
   | 'onResize'
   | 'onResizeEnd'
 > & {
-  /** Position of the control
+  /**
+   * Position of the control
    * @example ControlPosition.TopLeft, ControlPosition.TopRight,
    * ControlPosition.BottomLeft, ControlPosition.BottomRight
    */
   position?: ControlPosition;
-  /** Variant of the control
+  /**
+   * Variant of the control
    * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
    */
   variant?: ResizeControlVariant;

packages/react/src/additional-components/NodeToolbar/types.ts

@@ -6,14 +6,16 @@ export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
   nodeId?: string | string[];
   /** If true, node toolbar is visible even if node is not selected */
   isVisible?: boolean;
-  /** Position of the toolbar relative to the node
+  /**
+   * Position of the toolbar relative to the node
    * @example Position.TopLeft, Position.TopRight,
    * Position.BottomLeft, Position.BottomRight
    */
   position?: Position;
   /** Offset the toolbar from the node */
   offset?: number;
-  /** Align the toolbar relative to the node
+  /**
+   * Align the toolbar relative to the node
    * @example Align.Start, Align.Center, Align.End
    */
   align?: Align;