fix(react) added internal edge components, to make id, source, handle optional on exported edges

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

@@ -1,11 +1,12 @@
 import { memo } from 'react';
-import { Position, getBezierPath } from '@xyflow/system';
+import { type Optional, Position, getBezierPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { BezierEdgeProps } from '../../types';
 
 const BezierEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -23,7 +24,7 @@ const BezierEdge = memo(
     markerStart,
     pathOptions,
     interactionWidth,
-  }: BezierEdgeProps) => {
+  }: Optional<BezierEdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getBezierPath({
       sourceX,
       sourceY,
@@ -36,6 +37,7 @@ const BezierEdge = memo(
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}

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

@@ -0,0 +1,59 @@
+import { memo } from 'react';
+import { Position, getBezierPath } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { BezierEdgeProps } from '../../types';
+
+const BezierEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+    pathOptions,
+    interactionWidth,
+  }: BezierEdgeProps) => {
+    const [path, labelX, labelY] = getBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      curvature: pathOptions?.curvature,
+    });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+BezierEdge.displayName = 'BezierEdge';
+
+export default BezierEdge;

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

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Position, getBezierEdgeCenter } from '@xyflow/system';
+import { type Optional, Position, getBezierEdgeCenter } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { EdgeProps } from '../../types';
@@ -73,6 +73,7 @@ export function getSimpleBezierPath({
 
 const SimpleBezierEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -89,7 +90,7 @@ const SimpleBezierEdge = memo(
     markerEnd,
     markerStart,
     interactionWidth,
-  }: EdgeProps) => {
+  }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getSimpleBezierPath({
       sourceX,
       sourceY,
@@ -101,6 +102,7 @@ const SimpleBezierEdge = memo(
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}

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

@@ -0,0 +1,124 @@
+import { memo } from 'react';
+import { Position, getBezierEdgeCenter } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { EdgeProps } from '../../types';
+
+export interface GetSimpleBezierPathParams {
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+}
+
+interface GetControlParams {
+  pos: Position;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] {
+  if (pos === Position.Left || pos === Position.Right) {
+    return [0.5 * (x1 + x2), y1];
+  }
+
+  return [x1, 0.5 * (y1 + y2)];
+}
+
+export function getSimpleBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
+  const [sourceControlX, sourceControlY] = getControl({
+    pos: sourcePosition,
+    x1: sourceX,
+    y1: sourceY,
+    x2: targetX,
+    y2: targetY,
+  });
+  const [targetControlX, targetControlY] = getControl({
+    pos: targetPosition,
+    x1: targetX,
+    y1: targetY,
+    x2: sourceX,
+    y2: sourceY,
+  });
+  const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourceControlX,
+    sourceControlY,
+    targetControlX,
+    targetControlY,
+  });
+
+  return [
+    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
+    labelX,
+    labelY,
+    offsetX,
+    offsetY,
+  ];
+}
+
+const SimpleBezierEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+    interactionWidth,
+  }: EdgeProps) => {
+    const [path, labelX, labelY] = getSimpleBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+    });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+SimpleBezierEdge.displayName = 'SimpleBezierEdge';
+
+export default SimpleBezierEdge;

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

@@ -1,11 +1,12 @@
 import { memo } from 'react';
-import { Position, getSmoothStepPath } from '@xyflow/system';
+import { type Optional, Position, getSmoothStepPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
 const SmoothStepEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -23,7 +24,7 @@ const SmoothStepEdge = memo(
     markerStart,
     pathOptions,
     interactionWidth,
-  }: SmoothStepEdgeProps) => {
+  }: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getSmoothStepPath({
       sourceX,
       sourceY,
@@ -37,6 +38,7 @@ const SmoothStepEdge = memo(
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}

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

@@ -0,0 +1,60 @@
+import { memo } from 'react';
+import { Position, getSmoothStepPath } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { SmoothStepEdgeProps } from '../../types';
+
+const SmoothStepEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    markerEnd,
+    markerStart,
+    pathOptions,
+    interactionWidth,
+  }: SmoothStepEdgeProps) => {
+    const [path, labelX, labelY] = getSmoothStepPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      borderRadius: pathOptions?.borderRadius,
+      offset: pathOptions?.offset,
+    });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+SmoothStepEdge.displayName = 'SmoothStepEdge';
+
+export default SmoothStepEdge;

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

@@ -1,9 +1,10 @@
 import { memo, useMemo } from 'react';
+import { Optional } from '@xyflow/system';
 
 import SmoothStepEdge from './SmoothStepEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
-const StepEdge = memo((props: SmoothStepEdgeProps) => (
+const StepEdge = memo((props: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => (
   <SmoothStepEdge
     {...props}
     pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}

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

@@ -0,0 +1,15 @@
+import { memo, useMemo } from 'react';
+
+import SmoothStepEdgeInternal from './SmoothStepEdgeInternal';
+import type { SmoothStepEdgeProps } from '../../types';
+
+const StepEdge = memo((props: SmoothStepEdgeProps) => (
+  <SmoothStepEdgeInternal
+    {...props}
+    pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
+  />
+));
+
+StepEdge.displayName = 'StepEdge';
+
+export default StepEdge;

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

@@ -1,11 +1,12 @@
 import { memo } from 'react';
-import { getStraightPath } from '@xyflow/system';
+import { type Optional, getStraightPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { EdgeProps } from '../../types';
 
 const StraightEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -20,11 +21,12 @@ const StraightEdge = memo(
     markerEnd,
     markerStart,
     interactionWidth,
-  }: EdgeProps) => {
+  }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}

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

@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import { getStraightPath } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { EdgeProps } from '../../types';
+
+const StraightEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+    interactionWidth,
+  }: EdgeProps) => {
+    const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+StraightEdge.displayName = 'StraightEdge';
+
+export default StraightEdge;

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

@@ -0,0 +1,5 @@
+export { default as SimpleBezierEdge } from './SimpleBezierEdgeInternal';
+export { default as SmoothStepEdge } from './SmoothStepEdgeInternal';
+export { default as StepEdge } from './StepEdgeInternal';
+export { default as StraightEdge } from './StraightEdgeInternal';
+export { default as BezierEdge } from './BezierEdgeInternal';

packages/react/src/container/EdgeRenderer/utils.ts

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
 import wrapEdge from '../../components/Edges/wrapEdge';
 import type { EdgeProps, EdgeTypes, EdgeTypesWrapped } from '../../types';
 

packages/react/src/container/ReactFlow/index.tsx

@@ -12,7 +12,7 @@ import {
 } from '@xyflow/system';
 
 import Attribution from '../../components/Attribution';
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';