chore(types): add tsdocs

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

@@ -1,11 +1,20 @@
 import { CSSProperties } from 'react';
 
+/**
+ * The three variants are exported as an enum for convenience. You can either import
+ * the enum and use it like `BackgroundVariant.Lines` or you can use the raw string
+ * value directly.
+ * @public
+ */
 export enum BackgroundVariant {
   Lines = 'lines',
   Dots = 'dots',
   Cross = 'cross',
 }
 
+/**
+ * @expand
+ */
 export type BackgroundProps = {
   id?: string;
   /** Color of the pattern */

packages/react/src/additional-components/Controls/ControlButton.tsx

@@ -4,7 +4,7 @@ import type { ControlButtonProps } from './types';
 
 /**
  * You can add buttons to the control panel by using the `<ControlButton />` component
- *and pass it as a child to the [`<Controls />`](/api-reference/components/controls) component.
+ * and pass it as a child to the [`<Controls />`](/api-reference/components/controls) component.
  *
  * @public
  * @example

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

@@ -127,7 +127,7 @@ ControlsComponent.displayName = 'Controls';
 
 /**
  * The `<Controls />` component renders a small panel that contains convenient
- *buttons to zoom in, zoom out, fit the view, and lock the viewport.
+ * buttons to zoom in, zoom out, fit the view, and lock the viewport.
  *
  * @public
  * @example
@@ -143,8 +143,7 @@ ControlsComponent.displayName = 'Controls';
  *}
  *```
  *
- * @remarks To extend or customise the controls, you can use the [`<ControlButton />`](/api-reference/components/control-button)
- *component
+ * @remarks To extend or customise the controls, you can use the [`<ControlButton />`](/api-reference/components/control-button) component
  *
  */
 export const Controls = memo(ControlsComponent);

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];
-      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 (
@@ -180,8 +180,8 @@ MiniMapComponent.displayName = 'MiniMap';
 
 /**
  * The `<MiniMap />` component can be used to render an overview of your flow. It
- *renders each node as an SVG element and visualizes where the current viewport is
- *in relation to the rest of the flow.
+ * renders each node as an SVG element and visualizes where the current viewport is
+ * in relation to the rest of the flow.
  *
  * @public
  * @example

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

@@ -58,6 +58,11 @@ export type MiniMapNodes<NodeType extends Node = Node> = Pick<
   onClick?: (event: MouseEvent, nodeId: string) => void;
 };
 
+/**
+ * The props that are passed to the MiniMapNode component
+ *
+ * @public
+ */
 export type MiniMapNodeProps = {
   id: string;
   x: number;

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

@@ -5,7 +5,7 @@ import type { NodeResizerProps } from './types';
 
 /**
  * The `<NodeResizer />` component can be used to add a resize functionality to your
- *nodes. It renders draggable controls around the node to resize in all directions.
+ * nodes. It renders draggable controls around the node to resize in all directions.
  * @public
  *
  * @example

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

@@ -40,7 +40,7 @@ const storeSelector = (state: ReactFlowState) => ({
 
 /**
  * This component can render a toolbar or tooltip to one side of a custom node. This
- *toolbar doesn't scale with the viewport so that the content is always visible.
+ * toolbar doesn't scale with the viewport so that the content is always visible.
  *
  * @public
  * @example
@@ -70,9 +70,8 @@ const storeSelector = (state: ReactFlowState) => ({
  *export default memo(CustomNode);
  *```
  * @remarks By default, the toolbar is only visible when a node is selected. If multiple
- *nodes are selected it will not be visible to prevent overlapping toolbars or
- *clutter. You can override this behavior by setting the `isVisible` prop to
- *`true`.
+ * nodes are selected it will not be visible to prevent overlapping toolbars or
+ * clutter. You can override this behavior by setting the `isVisible` prop to `true`.
  */
 export function NodeToolbar({
   nodeId,