diff --git a/.changeset/twenty-cobras-teach.md b/.changeset/twenty-cobras-teach.md
new file mode 100644
index 00000000..4f923bc6
--- /dev/null
+++ b/.changeset/twenty-cobras-teach.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+fix: improve TSDoc comments for `Edge`, `BaseEdgeProps` and `ConnectionLineComponentProps`
diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index 8fddf865..9d601037 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -50,6 +50,11 @@ export type Edge<
EdgeLabelOptions & {
style?: CSSProperties;
className?: string;
+ /**
+ * Determines whether the edge can be updated by dragging the source or target to a new node.
+ * This property will override the default set by the `edgesReconnectable` prop on the
+ * `` component.
+ */
reconnectable?: boolean | HandleType;
focusable?: boolean;
};
@@ -109,15 +114,11 @@ export type EdgeWrapperProps = {
*/
export type DefaultEdgeOptions = DefaultEdgeOptionsBase;
-export type EdgeTextProps = SVGAttributes &
+export type EdgeTextProps = Omit, 'x' | 'y'> &
EdgeLabelOptions & {
- /**
- * The x position where the label should be rendered.
- */
+ /** The x position where the label should be rendered. */
x: number;
- /**
- * The y position where the label should be rendered.
- */
+ /** The y position where the label should be rendered. */
y: number;
};
@@ -147,11 +148,12 @@ export type EdgeProps = Pick<
* @public
* @expand
*/
-export type BaseEdgeProps = Omit, 'd'> &
+export type BaseEdgeProps = Omit, 'd' | 'path'> &
EdgeLabelOptions & {
/**
* The width of the invisible area around the edge that the user can interact with. This is
* useful for making the edge easier to click or hover over.
+ * @default 20
*/
interactionWidth?: number;
/** The x position of edge label */
@@ -233,7 +235,9 @@ export type OnReconnect = (oldEdge: EdgeType, newC
export type ConnectionLineComponentProps = {
connectionLineStyle?: CSSProperties;
connectionLineType: ConnectionLineType;
+ /** The node the connection line originates from. */
fromNode: InternalNode;
+ /** The handle on the `fromNode` that the connection line originates from. */
fromHandle: Handle;
fromX: number;
fromY: number;
@@ -241,6 +245,10 @@ export type ConnectionLineComponentProps = {
toY: number;
fromPosition: Position;
toPosition: Position;
+ /**
+ * If there is an `isValidConnection` callback, this prop will be set to `"valid"` or `"invalid"`
+ * based on the return value of that callback. Otherwise, it will be `null`.
+ */
connectionStatus: 'valid' | 'invalid' | null;
toNode: InternalNode | null;
toHandle: Handle | null;