chore(ts-docs): add annotations for edges

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

@@ -10,37 +10,38 @@ const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__e
  * Edges are SVG-based. If you want to render more complex labels you can use the
  * `<EdgeLabelRenderer />` component to access a div based renderer. This component
  * is a portal that renders the label in a `<div />` that is positioned on top of
- * the edges. You can see an example usage of the component in the [edge label renderer](/examples/edges/edge-label-renderer) example.
+ * the edges. You can see an example usage of the component in the
+ * [edge label renderer example](/examples/edges/edge-label-renderer).
  * @public
  *
  * @example
- *```jsx
+ * ```jsx
- *import React from 'react';
+ * import React from 'react';
- *import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';
+ * import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';
  *
- *export function CustomEdge({ id, data, ...props }) {
+ * export function CustomEdge({ id, data, ...props }) {
- *  const [edgePath, labelX, labelY] = getBezierPath(props);
+ *   const [edgePath, labelX, labelY] = getBezierPath(props);
  *
- *  return (
+ *   return (
- *    <>
+ *     <>
- *      <BaseEdge id={id} path={edgePath} />
+ *       <BaseEdge id={id} path={edgePath} />
- *      <EdgeLabelRenderer>
+ *       <EdgeLabelRenderer>
- *        <div
+ *         <div
- *          style={{
+ *           style={{
- *            position: 'absolute',
+ *             position: 'absolute',
- *            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+ *             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
- *            background: '#ffcc00',
+ *             background: '#ffcc00',
- *            padding: 10,
+ *             padding: 10,
- *        }}
+ *         }}
- *          className="nodrag nopan"
+ *           className="nodrag nopan"
- *        >
+ *         >
- *         {data.label}
+ *          {data.label}
- *        </div>
+ *         </div>
- *      </EdgeLabelRenderer>
+ *       </EdgeLabelRenderer>
- *    </>
+ *     </>
- *  );
+ *   );
- *};
+ * };
- *```
+ * ```
  *
  * @remarks The `<EdgeLabelRenderer />` has no pointer events by default. If you want to
  * add mouse interactions you need to set the style `pointerEvents: all` and add

packages/react/src/components/Edges/BezierEdge.tsx

@@ -61,7 +61,34 @@ function createBezierEdge(params: { isInternal: boolean }) {
   );
 }
 
+/**
+ * Component that can be used inside a custom edge to render a bezier curve.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { BezierEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <BezierEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const BezierEdge = createBezierEdge({ isInternal: false });
+
+/**
+ * @internal
+ */
 const BezierEdgeInternal = createBezierEdge({ isInternal: true });
 
 BezierEdge.displayName = 'BezierEdge';

packages/react/src/components/Edges/EdgeAnchor.tsx

@@ -27,6 +27,9 @@ export interface EdgeAnchorProps extends SVGAttributes<SVGGElement> {
 
 const EdgeUpdaterClassName = 'react-flow__edgeupdater';
 
+/**
+ * @internal
+ */
 export function EdgeAnchor({
   position,
   centerX,

packages/react/src/components/Edges/EdgeText.tsx

@@ -77,26 +77,26 @@ EdgeTextComponent.displayName = 'EdgeText';
  * You can use the `<EdgeText />` component as a helper component to display text
  * within your custom edges.
  *
- *@public
+ * @public
  *
- *@example
+ * @example
- *```jsx
+ * ```jsx
- *import { EdgeText } from '@xyflow/react';
+ * import { EdgeText } from '@xyflow/react';
  *
- *export function CustomEdgeLabel({ label }) {
+ * export function CustomEdgeLabel({ label }) {
- *  return (
+ *   return (
- *    <EdgeText
+ *     <EdgeText
- *      x={100}
+ *       x={100}
- *      y={100}
+ *       y={100}
- *      label={label}
+ *       label={label}
- *      labelStyle={{ fill: 'white' }}
+ *       labelStyle={{ fill: 'white' }}
- *      labelShowBg
+ *       labelShowBg
- *      labelBgStyle={{ fill: 'red' }}
+ *       labelBgStyle={{ fill: 'red' }}
- *      labelBgPadding={[2, 4]}
+ *       labelBgPadding={[2, 4]}
- *      labelBgBorderRadius={2}
+ *       labelBgBorderRadius={2}
- *    />
+ *     />
- *  );
+ *   );
- *}
+ * }
  *```
  */
 export const EdgeText = memo(EdgeTextComponent);

packages/react/src/components/Edges/SmoothStepEdge.tsx

@@ -62,7 +62,34 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
   );
 }
 
+/**
+ * Component that can be used inside a custom edge to render a smooth step edge.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { SmoothStepEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <SmoothStepEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const SmoothStepEdge = createSmoothStepEdge({ isInternal: false });
+
+/**
+ * @internal
+ */
 const SmoothStepEdgeInternal = createSmoothStepEdge({ isInternal: true });
 
 SmoothStepEdge.displayName = 'SmoothStepEdge';

packages/react/src/components/Edges/StepEdge.tsx

@@ -21,7 +21,34 @@ function createStepEdge(params: { isInternal: boolean }) {
   });
 }
 
+/**
+ * Component that can be used inside a custom edge to render a step edge.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { StepEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <StepEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const StepEdge = createStepEdge({ isInternal: false });
+
+/**
+ * @internal
+ */
 const StepEdgeInternal = createStepEdge({ isInternal: true });
 
 StepEdge.displayName = 'StepEdge';

packages/react/src/components/Edges/StraightEdge.tsx

@@ -50,7 +50,32 @@ function createStraightEdge(params: { isInternal: boolean }) {
   );
 }
 
+/**
+ * Component that can be used inside a custom edge to render a straight line.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { StraightEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY }) {
+ *   return (
+ *     <StraightEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const StraightEdge = createStraightEdge({ isInternal: false });
+
+/**
+ * @internal
+ */
 const StraightEdgeInternal = createStraightEdge({ isInternal: true });
 
 StraightEdge.displayName = 'StraightEdge';