refactor(react/edges): simplify edge creation

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

@@ -1,61 +1,70 @@
 import { memo } from 'react';
-import { type Optional, Position, getBezierPath } from '@xyflow/system';
+import { Position, getBezierPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { BezierEdgeProps } from '../../types';
 
-const BezierEdge = memo(
+function createBezierEdge(params: { isInternal: boolean }) {
-  ({
+  // eslint-disable-next-line react/display-name
-    id,
+  return memo(
-    sourceX,
+    ({
-    sourceY,
+      id,
-    targetX,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    pathOptions,
-    interactionWidth,
-  }: Optional<BezierEdgeProps, 'id' | 'source' | 'target'>) => {
-    const [path, labelX, labelY] = getBezierPath({
       sourceX,
       sourceY,
-      sourcePosition,
       targetX,
       targetY,
-      targetPosition,
+      sourcePosition = Position.Bottom,
-      curvature: pathOptions?.curvature,
+      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 (
+      const _id = params.isInternal ? undefined : id;
-      <BaseEdge
+
-        id={id}
+      return (
-        path={path}
+        <BaseEdge
-        labelX={labelX}
+          id={_id}
-        labelY={labelY}
+          path={path}
-        label={label}
+          labelX={labelX}
-        labelStyle={labelStyle}
+          labelY={labelY}
-        labelShowBg={labelShowBg}
+          label={label}
-        labelBgStyle={labelBgStyle}
+          labelStyle={labelStyle}
-        labelBgPadding={labelBgPadding}
+          labelShowBg={labelShowBg}
-        labelBgBorderRadius={labelBgBorderRadius}
+          labelBgStyle={labelBgStyle}
-        style={style}
+          labelBgPadding={labelBgPadding}
-        markerEnd={markerEnd}
+          labelBgBorderRadius={labelBgBorderRadius}
-        markerStart={markerStart}
+          style={style}
-        interactionWidth={interactionWidth}
+          markerEnd={markerEnd}
-      />
+          markerStart={markerStart}
-    );
+          interactionWidth={interactionWidth}
-  }
+        />
-);
+      );
+    }
+  );
+}
+
+const BezierEdge = createBezierEdge({ isInternal: false });
+const BezierEdgeInternal = createBezierEdge({ isInternal: true });
 
 BezierEdge.displayName = 'BezierEdge';
+BezierEdgeInternal.displayName = 'BezierEdgeInternal';
 
-export default BezierEdge;
+export { BezierEdge, BezierEdgeInternal };

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

@@ -1,59 +0,0 @@
-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,8 +1,8 @@
 import { memo } from 'react';
-import { type Optional, Position, getBezierEdgeCenter } from '@xyflow/system';
+import { Position, getBezierEdgeCenter } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
-import type { EdgeProps } from '../../types';
+import type { SimpleBezierEdgeProps } from '../../types';
 
 export interface GetSimpleBezierPathParams {
   sourceX: number;
@@ -71,56 +71,65 @@ export function getSimpleBezierPath({
   ];
 }
 
-const SimpleBezierEdge = memo(
+function createSimpleBezierEdge(params: { isInternal: boolean }) {
-  ({
+  // eslint-disable-next-line react/display-name
-    id,
+  return memo(
-    sourceX,
+    ({
-    sourceY,
+      id,
-    targetX,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    interactionWidth,
-  }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
-    const [path, labelX, labelY] = getSimpleBezierPath({
       sourceX,
       sourceY,
-      sourcePosition,
       targetX,
       targetY,
-      targetPosition,
+      sourcePosition = Position.Bottom,
-    });
+      targetPosition = Position.Top,
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      markerEnd,
+      markerStart,
+      interactionWidth,
+    }: SimpleBezierEdgeProps) => {
+      const [path, labelX, labelY] = getSimpleBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+      });
 
-    return (
+      const _id = params.isInternal ? undefined : id;
-      <BaseEdge
+
-        id={id}
+      return (
-        path={path}
+        <BaseEdge
-        labelX={labelX}
+          id={_id}
-        labelY={labelY}
+          path={path}
-        label={label}
+          labelX={labelX}
-        labelStyle={labelStyle}
+          labelY={labelY}
-        labelShowBg={labelShowBg}
+          label={label}
-        labelBgStyle={labelBgStyle}
+          labelStyle={labelStyle}
-        labelBgPadding={labelBgPadding}
+          labelShowBg={labelShowBg}
-        labelBgBorderRadius={labelBgBorderRadius}
+          labelBgStyle={labelBgStyle}
-        style={style}
+          labelBgPadding={labelBgPadding}
-        markerEnd={markerEnd}
+          labelBgBorderRadius={labelBgBorderRadius}
-        markerStart={markerStart}
+          style={style}
-        interactionWidth={interactionWidth}
+          markerEnd={markerEnd}
-      />
+          markerStart={markerStart}
-    );
+          interactionWidth={interactionWidth}
-  }
+        />
-);
+      );
+    }
+  );
+}
+
+const SimpleBezierEdge = createSimpleBezierEdge({ isInternal: false });
+const SimpleBezierEdgeInternal = createSimpleBezierEdge({ isInternal: true });
 
 SimpleBezierEdge.displayName = 'SimpleBezierEdge';
+SimpleBezierEdgeInternal.displayName = 'SimpleBezierEdgeInternal';
 
-export default SimpleBezierEdge;
+export { SimpleBezierEdge, SimpleBezierEdgeInternal };

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

@@ -1,124 +0,0 @@
-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,62 +1,71 @@
 import { memo } from 'react';
-import { type Optional, Position, getSmoothStepPath } from '@xyflow/system';
+import { Position, getSmoothStepPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
-const SmoothStepEdge = memo(
+function createSmoothStepEdge(params: { isInternal: boolean }) {
-  ({
+  // eslint-disable-next-line react/display-name
-    id,
+  return memo(
-    sourceX,
+    ({
-    sourceY,
+      id,
-    targetX,
-    targetY,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    markerEnd,
-    markerStart,
-    pathOptions,
-    interactionWidth,
-  }: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => {
-    const [path, labelX, labelY] = getSmoothStepPath({
       sourceX,
       sourceY,
-      sourcePosition,
       targetX,
       targetY,
-      targetPosition,
+      label,
-      borderRadius: pathOptions?.borderRadius,
+      labelStyle,
-      offset: pathOptions?.offset,
+      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 (
+      const _id = params.isInternal ? undefined : id;
-      <BaseEdge
+
-        id={id}
+      return (
-        path={path}
+        <BaseEdge
-        labelX={labelX}
+          id={_id}
-        labelY={labelY}
+          path={path}
-        label={label}
+          labelX={labelX}
-        labelStyle={labelStyle}
+          labelY={labelY}
-        labelShowBg={labelShowBg}
+          label={label}
-        labelBgStyle={labelBgStyle}
+          labelStyle={labelStyle}
-        labelBgPadding={labelBgPadding}
+          labelShowBg={labelShowBg}
-        labelBgBorderRadius={labelBgBorderRadius}
+          labelBgStyle={labelBgStyle}
-        style={style}
+          labelBgPadding={labelBgPadding}
-        markerEnd={markerEnd}
+          labelBgBorderRadius={labelBgBorderRadius}
-        markerStart={markerStart}
+          style={style}
-        interactionWidth={interactionWidth}
+          markerEnd={markerEnd}
-      />
+          markerStart={markerStart}
-    );
+          interactionWidth={interactionWidth}
-  }
+        />
-);
+      );
+    }
+  );
+}
+
+const SmoothStepEdge = createSmoothStepEdge({ isInternal: false });
+const SmoothStepEdgeInternal = createSmoothStepEdge({ isInternal: true });
 
 SmoothStepEdge.displayName = 'SmoothStepEdge';
+SmoothStepEdgeInternal.displayName = 'SmoothStepEdgeInternal';
 
-export default SmoothStepEdge;
+export { SmoothStepEdge, SmoothStepEdgeInternal };

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

@@ -1,60 +0,0 @@
-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,16 +1,30 @@
 import { memo, useMemo } from 'react';
-import { Optional } from '@xyflow/system';
 
-import SmoothStepEdge from './SmoothStepEdge';
+import { SmoothStepEdge } from './SmoothStepEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
-const StepEdge = memo((props: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => (
+function createStepEdge(params: { isInternal: boolean }) {
-  <SmoothStepEdge
+  // eslint-disable-next-line react/display-name
-    {...props}
+  return memo(({ id, ...props }: SmoothStepEdgeProps) => {
-    pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
+    const _id = params.isInternal ? undefined : id;
-  />
+
-));
+    return (
+      <SmoothStepEdge
+        {...props}
+        id={_id}
+        pathOptions={useMemo(
+          () => ({ borderRadius: 0, offset: props.pathOptions?.offset }),
+          [props.pathOptions?.offset]
+        )}
+      />
+    );
+  });
+}
+
+const StepEdge = createStepEdge({ isInternal: false });
+const StepEdgeInternal = createStepEdge({ isInternal: true });
 
 StepEdge.displayName = 'StepEdge';
+StepEdgeInternal.displayName = 'StepEdgeInternal';
 
-export default StepEdge;
+export { StepEdge, StepEdgeInternal };

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

@@ -1,15 +0,0 @@
-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

@@ -4,47 +4,56 @@ import { type Optional, getStraightPath } from '@xyflow/system';
 import BaseEdge from './BaseEdge';
 import type { EdgeProps } from '../../types';
 
-const StraightEdge = memo(
+function createStraightEdge(params: { isInternal: boolean }) {
-  ({
+  // eslint-disable-next-line react/display-name
-    id,
+  return memo(
-    sourceX,
+    ({
-    sourceY,
+      id,
-    targetX,
+      sourceX,
-    targetY,
+      sourceY,
-    label,
+      targetX,
-    labelStyle,
+      targetY,
-    labelShowBg,
+      label,
-    labelBgStyle,
+      labelStyle,
-    labelBgPadding,
+      labelShowBg,
-    labelBgBorderRadius,
+      labelBgStyle,
-    style,
+      labelBgPadding,
-    markerEnd,
+      labelBgBorderRadius,
-    markerStart,
+      style,
-    interactionWidth,
+      markerEnd,
-  }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
+      markerStart,
-    const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+      interactionWidth,
+    }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
+      const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
-    return (
+      const _id = params.isInternal ? undefined : id;
-      <BaseEdge
+
-        id={id}
+      return (
-        path={path}
+        <BaseEdge
-        labelX={labelX}
+          id={_id}
-        labelY={labelY}
+          path={path}
-        label={label}
+          labelX={labelX}
-        labelStyle={labelStyle}
+          labelY={labelY}
-        labelShowBg={labelShowBg}
+          label={label}
-        labelBgStyle={labelBgStyle}
+          labelStyle={labelStyle}
-        labelBgPadding={labelBgPadding}
+          labelShowBg={labelShowBg}
-        labelBgBorderRadius={labelBgBorderRadius}
+          labelBgStyle={labelBgStyle}
-        style={style}
+          labelBgPadding={labelBgPadding}
-        markerEnd={markerEnd}
+          labelBgBorderRadius={labelBgBorderRadius}
-        markerStart={markerStart}
+          style={style}
-        interactionWidth={interactionWidth}
+          markerEnd={markerEnd}
-      />
+          markerStart={markerStart}
-    );
+          interactionWidth={interactionWidth}
-  }
+        />
-);
+      );
+    }
+  );
+}
+
+const StraightEdge = createStraightEdge({ isInternal: false });
+const StraightEdgeInternal = createStraightEdge({ isInternal: true });
 
 StraightEdge.displayName = 'StraightEdge';
+StraightEdgeInternal.displayName = 'StraightEdgeInternal';
 
-export default StraightEdge;
+export { StraightEdge, StraightEdgeInternal };

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

@@ -1,48 +0,0 @@
-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/index.ts

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

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

@@ -1,5 +0,0 @@
-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,12 @@
 import type { ComponentType } from 'react';
 
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
+import {
+  BezierEdgeInternal,
+  SmoothStepEdgeInternal,
+  StepEdgeInternal,
+  StraightEdgeInternal,
+  SimpleBezierEdgeInternal,
+} from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
 import type { EdgeProps, EdgeTypes, EdgeTypesWrapped } from '../../types';
 
@@ -8,18 +14,18 @@ export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
 
 export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
   const standardTypes: EdgeTypesWrapped = {
-    default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeProps>),
+    default: wrapEdge((edgeTypes.default || BezierEdgeInternal) as ComponentType<EdgeProps>),
-    straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeProps>),
+    straight: wrapEdge((edgeTypes.bezier || StraightEdgeInternal) as ComponentType<EdgeProps>),
-    step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>),
+    step: wrapEdge((edgeTypes.step || StepEdgeInternal) as ComponentType<EdgeProps>),
-    smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType<EdgeProps>),
+    smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdgeInternal) as ComponentType<EdgeProps>),
-    simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdge) as ComponentType<EdgeProps>),
+    simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdgeInternal) as ComponentType<EdgeProps>),
   };
 
   const wrappedTypes = {} as EdgeTypesWrapped;
   const specialTypes: EdgeTypesWrapped = Object.keys(edgeTypes)
     .filter((k) => !['default', 'bezier'].includes(k))
     .reduce((res, key) => {
-      res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeProps>);
+      res[key] = wrapEdge((edgeTypes[key] || BezierEdgeInternal) as ComponentType<EdgeProps>);
 
       return res;
     }, wrappedTypes);

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

@@ -12,7 +12,13 @@ import {
 } from '@xyflow/system';
 
 import Attribution from '../../components/Attribution';
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
+import {
+  BezierEdgeInternal,
+  SmoothStepEdgeInternal,
+  StepEdgeInternal,
+  StraightEdgeInternal,
+  SimpleBezierEdgeInternal,
+} from '../../components/Edges';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
@@ -33,11 +39,11 @@ const defaultNodeTypes: NodeTypes = {
 };
 
 const defaultEdgeTypes: EdgeTypes = {
-  default: BezierEdge,
+  default: BezierEdgeInternal,
-  straight: StraightEdge,
+  straight: StraightEdgeInternal,
-  step: StepEdge,
+  step: StepEdgeInternal,
-  smoothstep: SmoothStepEdge,
+  smoothstep: SmoothStepEdgeInternal,
-  simplebezier: SimpleBezierEdge,
+  simplebezier: SimpleBezierEdgeInternal,
 };
 
 const initNodeOrigin: NodeOrigin = [0, 0];

packages/react/src/index.ts

@@ -1,11 +1,11 @@
 export { default as ReactFlow } from './container/ReactFlow';
 export { default as Handle } from './components/Handle';
 export { default as EdgeText } from './components/Edges/EdgeText';
-export { default as StraightEdge } from './components/Edges/StraightEdge';
+export { StraightEdge } from './components/Edges/StraightEdge';
-export { default as StepEdge } from './components/Edges/StepEdge';
+export { StepEdge } from './components/Edges/StepEdge';
-export { default as BezierEdge } from './components/Edges/BezierEdge';
+export { BezierEdge } from './components/Edges/BezierEdge';
-export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge';
+export { SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge';
-export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge';
+export { SmoothStepEdge } from './components/Edges/SmoothStepEdge';
 export { default as BaseEdge } from './components/Edges/BaseEdge';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel, type PanelProps } from './components/Panel';

packages/react/src/types/edges.ts

@@ -13,6 +13,7 @@ import type {
   HandleElement,
   ConnectionStatus,
   EdgePosition,
+  Optional,
 } from '@xyflow/system';
 
 import { Node } from '.';
@@ -100,14 +101,20 @@ export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd
     path: string;
   };
 
-export type SmoothStepEdgeProps<T = any> = EdgeProps<T> & {
+export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
+
+export type StraightEdgeProps<T = any> = EdgeComponentProps<T>;
+
+export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: SmoothStepPathOptions;
 };
 
-export type BezierEdgeProps<T = any> = EdgeProps<T> & {
+export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: BezierPathOptions;
 };
 
+export type SimpleBezierEdgeProps<T = any> = EdgeComponentProps<T>;
+
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
 
 export type ConnectionLineComponentProps = {