chore(hooks): tsdoc update

packages/react/src/components/BatchProvider/index.tsx

@@ -30,9 +30,11 @@ export function BatchProvider<NodeType extends Node = Node, EdgeType extends Edg
   const nodeQueueHandler = useCallback((queueItems: QueueItem<NodeType>[]) => {
     const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
 
-    // This is essentially an `Array.reduce` in imperative clothing. Processing
-    // this queue is a relatively hot path so we'd like to avoid the overhead of
-    // array methods where we can.
+    /*
+     * This is essentially an `Array.reduce` in imperative clothing. Processing
+     * this queue is a relatively hot path so we'd like to avoid the overhead of
+     * array methods where we can.
+     */
     let next = nodes as NodeType[];
     for (const payload of queueItems) {
       next = typeof payload === 'function' ? payload(next) : payload;

packages/react/src/components/BatchProvider/useQueue.ts

@@ -12,21 +12,27 @@ import { Queue, QueueItem } from './types';
  * @returns a Queue object
  */
 export function useQueue<T>(runQueue: (items: QueueItem<T>[]) => void) {
-  // Because we're using a ref above, we need some way to let React know when to
-  // actually process the queue. We increment this number any time we mutate the
-  // queue, creating a new state to trigger the layout effect below.
-  // Using a boolean dirty flag here instead would lead to issues related to
-  // automatic batching. (https://github.com/xyflow/xyflow/issues/4779)
+  /*
+   * Because we're using a ref above, we need some way to let React know when to
+   * actually process the queue. We increment this number any time we mutate the
+   * queue, creating a new state to trigger the layout effect below.
+   * Using a boolean dirty flag here instead would lead to issues related to
+   * automatic batching. (https://github.com/xyflow/xyflow/issues/4779)
+   */
   const [serial, setSerial] = useState(BigInt(0));
 
-  // A reference of all the batched updates to process before the next render. We
-  // want a reference here so multiple synchronous calls to `setNodes` etc can be
-  // batched together.
+  /*
+   * A reference of all the batched updates to process before the next render. We
+   * want a reference here so multiple synchronous calls to `setNodes` etc can be
+   * batched together.
+   */
   const [queue] = useState(() => createQueue<T>(() => setSerial(n => n + BigInt(1))));
 
-  // Layout effects are guaranteed to run before the next render which means we
-  // shouldn't run into any issues with stale state or weird issues that come from
-  // rendering things one frame later than expected (we used to use `setTimeout`).
+  /*
+   * Layout effects are guaranteed to run before the next render which means we
+   * shouldn't run into any issues with stale state or weird issues that come from
+   * rendering things one frame later than expected (we used to use `setTimeout`).
+   */
   useIsomorphicLayoutEffect(() => {
     const queueItems = queue.get();
 

packages/react/src/components/EdgeWrapper/index.tsx

@@ -136,28 +136,28 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
 
   const onEdgeDoubleClick = onDoubleClick
     ? (event: React.MouseEvent) => {
-        onDoubleClick(event, { ...edge });
-      }
+      onDoubleClick(event, { ...edge });
+    }
     : undefined;
   const onEdgeContextMenu = onContextMenu
     ? (event: React.MouseEvent) => {
-        onContextMenu(event, { ...edge });
-      }
+      onContextMenu(event, { ...edge });
+    }
     : undefined;
   const onEdgeMouseEnter = onMouseEnter
     ? (event: React.MouseEvent) => {
-        onMouseEnter(event, { ...edge });
-      }
+      onMouseEnter(event, { ...edge });
+    }
     : undefined;
   const onEdgeMouseMove = onMouseMove
     ? (event: React.MouseEvent) => {
-        onMouseMove(event, { ...edge });
-      }
+      onMouseMove(event, { ...edge });
+    }
     : undefined;
   const onEdgeMouseLeave = onMouseLeave
     ? (event: React.MouseEvent) => {
-        onMouseLeave(event, { ...edge });
-      }
+      onMouseLeave(event, { ...edge });
+    }
     : undefined;
 
   const onKeyDown = (event: KeyboardEvent) => {

packages/react/src/components/Edges/index.ts

@@ -1,6 +1,8 @@
-// We distinguish between internal and exported edges
-// The internal edges are used directly like custom edges and always get an id, source and target props
-// If you import an edge from the library, the id is optional and source and target are not used at all
+/*
+ * We distinguish between internal and exported edges
+ * The internal edges are used directly like custom edges and always get an id, source and target props
+ * If you import an edge from the library, the id is optional and source and target are not used at all
+ */
 
 export { SimpleBezierEdge, SimpleBezierEdgeInternal } from './SimpleBezierEdge';
 export { SmoothStepEdge, SmoothStepEdgeInternal } from './SmoothStepEdge';

packages/react/src/components/Handle/index.tsx

@@ -228,8 +228,10 @@ function HandleComponent(
           connectingfrom: connectingFrom,
           connectingto: connectingTo,
           valid,
-          // shows where you can start a connection from
-          // and where you can end it while connecting
+          /*
+           * shows where you can start a connection from
+           * and where you can end it while connecting
+           */
           connectionindicator:
             isConnectable &&
             (!connectionInProcess || isPossibleEndHandle) &&

packages/react/src/components/NodeWrapper/index.tsx

@@ -108,8 +108,10 @@ export function NodeWrapper<NodeType extends Node>({
     const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
 
     if (isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0)) {
-      // this handler gets called by XYDrag on drag start when selectNodesOnDrag=true
-      // here we only need to call it when selectNodesOnDrag=false
+      /*
+       * this handler gets called by XYDrag on drag start when selectNodesOnDrag=true
+       * here we only need to call it when selectNodesOnDrag=false
+       */
       handleNodeClick({
         id,
         store,

packages/react/src/components/NodeWrapper/useNodeObserver.ts

@@ -49,8 +49,10 @@ export function useNodeObserver({
 
   useEffect(() => {
     if (nodeRef.current) {
-      // when the user programmatically changes the source or handle position, we need to update the internals
-      // to make sure the edges are updated correctly
+      /*
+       * when the user programmatically changes the source or handle position, we need to update the internals
+       * to make sure the edges are updated correctly
+       */
       const typeChanged = prevType.current !== nodeType;
       const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
       const targetPosChanged = prevTargetPosition.current !== node.targetPosition;

packages/react/src/components/NodeWrapper/utils.tsx

@@ -23,9 +23,9 @@ export const builtinNodeTypes: NodeTypes = {
 export function getNodeInlineStyleDimensions<NodeType extends Node = Node>(
   node: InternalNode<NodeType>
 ): {
-  width: number | string | undefined;
-  height: number | string | undefined;
-} {
+    width: number | string | undefined;
+    height: number | string | undefined;
+  } {
   if (node.internals.handleBounds === undefined) {
     return {
       width: node.width ?? node.initialWidth ?? node.style?.width,

packages/react/src/components/Nodes/utils.ts

@@ -4,10 +4,12 @@ import { errorMessages } from '@xyflow/system';
 
 import type { ReactFlowState } from '../../types';
 
-// this handler is called by
-// 1. the click handler when node is not draggable or selectNodesOnDrag = false
-// or
-// 2. the on drag start handler when node is draggable and selectNodesOnDrag = true
+/*
+ * this handler is called by
+ * 1. the click handler when node is not draggable or selectNodesOnDrag = false
+ * or
+ * 2. the on drag start handler when node is draggable and selectNodesOnDrag = true
+ */
 export function handleNodeClick({
   id,
   store,

packages/react/src/components/NodesSelection/index.tsx

@@ -61,9 +61,9 @@ export function NodesSelection<NodeType extends Node>({
 
   const onContextMenu = onSelectionContextMenu
     ? (event: MouseEvent) => {
-        const selectedNodes = store.getState().nodes.filter((n) => n.selected);
-        onSelectionContextMenu(event, selectedNodes);
-      }
+      const selectedNodes = store.getState().nodes.filter((n) => n.selected);
+      onSelectionContextMenu(event, selectedNodes);
+    }
     : undefined;
 
   const onKeyDown = (event: KeyboardEvent) => {

packages/react/src/components/Panel/index.tsx

@@ -6,7 +6,8 @@ import { useStore } from '../../hooks/useStore';
 import type { ReactFlowState } from '../../types';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
-  /** Set position of the panel
+  /**
+   * Set position of the panel
    * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
    */
   position?: PanelPosition;

packages/react/src/components/StoreUpdater/index.tsx

@@ -94,9 +94,11 @@ const selector = (s: ReactFlowState) => ({
 });
 
 const initPrevValues = {
-  // these are values that are also passed directly to other components
-  // than the StoreUpdater. We can reduce the number of setStore calls
-  // by setting the same values here as prev fields.
+  /*
+   * these are values that are also passed directly to other components
+   * than the StoreUpdater. We can reduce the number of setStore calls
+   * by setting the same values here as prev fields.
+   */
   translateExtent: infiniteExtent,
   nodeOrigin: defaultNodeOrigin,
   minZoom: 0.5,