From 23b3fb64c5c718bc30e2e287df448542c0a7a21d Mon Sep 17 00:00:00 2001
From: Matt Huggins <matt.huggins@gmail.com>
Date: Thu, 28 Nov 2024 17:17:58 -0600
Subject: [PATCH 1/9] feat: accept any `path` element attribute as a prop

---
 packages/react/src/components/Edges/BaseEdge.tsx     |  2 ++
 packages/react/src/components/Edges/BezierEdge.tsx   |  2 ++
 .../react/src/components/Edges/SimpleBezierEdge.tsx  |  2 ++
 .../react/src/components/Edges/SmoothStepEdge.tsx    |  2 ++
 packages/react/src/components/Edges/StraightEdge.tsx |  3 +++
 packages/react/src/types/edges.ts                    | 12 +++++-------
 6 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/Edges/BaseEdge.tsx b/packages/react/src/components/Edges/BaseEdge.tsx
index fab06220..d3d6999d 100644
--- a/packages/react/src/components/Edges/BaseEdge.tsx
+++ b/packages/react/src/components/Edges/BaseEdge.tsx
@@ -20,10 +20,12 @@ export function BaseEdge({
   markerStart,
   className,
   interactionWidth = 20,
+  ...props
 }: BaseEdgeProps) {
   return (
     <>
       <path
+        {...props}
         id={id}
         style={style}
         d={path}
diff --git a/packages/react/src/components/Edges/BezierEdge.tsx b/packages/react/src/components/Edges/BezierEdge.tsx
index 482f1fd8..5de1dce1 100644
--- a/packages/react/src/components/Edges/BezierEdge.tsx
+++ b/packages/react/src/components/Edges/BezierEdge.tsx
@@ -26,6 +26,7 @@ function createBezierEdge(params: { isInternal: boolean }) {
       markerStart,
       pathOptions,
       interactionWidth,
+      ...props
     }: BezierEdgeProps) => {
       const [path, labelX, labelY] = getBezierPath({
         sourceX,
@@ -41,6 +42,7 @@ function createBezierEdge(params: { isInternal: boolean }) {
 
       return (
         <BaseEdge
+          {...props}
           id={_id}
           path={path}
           labelX={labelX}
diff --git a/packages/react/src/components/Edges/SimpleBezierEdge.tsx b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
index b3378c48..85a2aa3a 100644
--- a/packages/react/src/components/Edges/SimpleBezierEdge.tsx
+++ b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
@@ -92,6 +92,7 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) {
       markerEnd,
       markerStart,
       interactionWidth,
+      ...props
     }: SimpleBezierEdgeProps) => {
       const [path, labelX, labelY] = getSimpleBezierPath({
         sourceX,
@@ -106,6 +107,7 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) {
 
       return (
         <BaseEdge
+          {...props}
           id={_id}
           path={path}
           labelX={labelX}
diff --git a/packages/react/src/components/Edges/SmoothStepEdge.tsx b/packages/react/src/components/Edges/SmoothStepEdge.tsx
index 1f6bcfd1..01e97499 100644
--- a/packages/react/src/components/Edges/SmoothStepEdge.tsx
+++ b/packages/react/src/components/Edges/SmoothStepEdge.tsx
@@ -26,6 +26,7 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
       markerStart,
       pathOptions,
       interactionWidth,
+      ...props
     }: SmoothStepEdgeProps) => {
       const [path, labelX, labelY] = getSmoothStepPath({
         sourceX,
@@ -42,6 +43,7 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
 
       return (
         <BaseEdge
+          {...props}
           id={_id}
           path={path}
           labelX={labelX}
diff --git a/packages/react/src/components/Edges/StraightEdge.tsx b/packages/react/src/components/Edges/StraightEdge.tsx
index 53d1ac29..102aa484 100644
--- a/packages/react/src/components/Edges/StraightEdge.tsx
+++ b/packages/react/src/components/Edges/StraightEdge.tsx
@@ -23,6 +23,7 @@ function createStraightEdge(params: { isInternal: boolean }) {
       markerEnd,
       markerStart,
       interactionWidth,
+      ...props
     }: StraightEdgeProps) => {
       const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
@@ -30,6 +31,7 @@ function createStraightEdge(params: { isInternal: boolean }) {
 
       return (
         <BaseEdge
+          {...props}
           id={_id}
           path={path}
           labelX={labelX}
@@ -44,6 +46,7 @@ function createStraightEdge(params: { isInternal: boolean }) {
           markerEnd={markerEnd}
           markerStart={markerStart}
           interactionWidth={interactionWidth}
+          {...props}
         />
       );
     }
diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index 8b0cebab..8ca672dc 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -92,6 +92,8 @@ export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
   disableKeyboardA11y?: boolean;
 };
 
+type BasePathAttributes = Omit<HTMLAttributes<SVGPathElement>, "d">;
+
 export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
 
 export type EdgeTextProps = HTMLAttributes<SVGElement> &
@@ -123,12 +125,9 @@ export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
  * BaseEdge component props
  * @public
  */
-export type BaseEdgeProps = EdgeLabelOptions & {
-  /** Unique id of edge */
-  id?: string;
+export type BaseEdgeProps = BasePathAttributes & EdgeLabelOptions & {
   /** Additional padding where interacting with an edge is still possible */
   interactionWidth?: number;
-  className?: string;
   /** The x position of edge label */
   labelX?: number;
   /** The y position of edge label */
@@ -143,14 +142,13 @@ export type BaseEdgeProps = EdgeLabelOptions & {
   markerEnd?: string;
   /** SVG path of the edge */
   path: string;
-  style?: CSSProperties;
 };
 
 /**
  * Helper type for edge components that get exported by the library
  * @public
  */
-export type EdgeComponentProps = EdgePosition &
+export type EdgeComponentProps = BasePathAttributes & EdgePosition &
   EdgeLabelOptions & {
     id?: EdgeProps['id'];
     markerStart?: EdgeProps['markerStart'];
@@ -187,7 +185,7 @@ export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
  * StraightEdge component props
  * @public
  */
-export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
+export type StraightEdgeProps = HTMLAttributes<SVGPathElement> & Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
 
 /**
  * SimpleBezier component props

From 106c2cf8e5e9a944ea7ea9a2558e26cb75f9ac93 Mon Sep 17 00:00:00 2001
From: Matt Huggins <matt.huggins@gmail.com>
Date: Thu, 28 Nov 2024 17:31:56 -0600
Subject: [PATCH 2/9] fixup! feat: accept any `path` element attribute as a
 prop

---
 .changeset/selfish-tables-tie.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/selfish-tables-tie.md

diff --git a/.changeset/selfish-tables-tie.md b/.changeset/selfish-tables-tie.md
new file mode 100644
index 00000000..6d4eb598
--- /dev/null
+++ b/.changeset/selfish-tables-tie.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/react': minor
+---
+
+Support all `path` element attributes in React edge components.

From ca66999634301bebe954a8fdd274f3654f7f59d8 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 2 Dec 2024 13:37:17 +0100
Subject: [PATCH 3/9] simplified prop drilling & improved changeset

---
 .changeset/selfish-tables-tie.md              |  2 +-
 .../react/src/components/Edges/BaseEdge.tsx   | 23 +++++++--
 .../react/src/components/Edges/BezierEdge.tsx | 30 +-----------
 .../src/components/Edges/SimpleBezierEdge.tsx | 30 +-----------
 .../src/components/Edges/SmoothStepEdge.tsx   | 30 +-----------
 .../src/components/Edges/StraightEdge.tsx     | 48 ++-----------------
 packages/react/src/types/edges.ts             | 48 ++++++++++---------
 7 files changed, 53 insertions(+), 158 deletions(-)

diff --git a/.changeset/selfish-tables-tie.md b/.changeset/selfish-tables-tie.md
index 6d4eb598..94d9db0b 100644
--- a/.changeset/selfish-tables-tie.md
+++ b/.changeset/selfish-tables-tie.md
@@ -2,4 +2,4 @@
 '@xyflow/react': minor
 ---
 
-Support all `path` element attributes in React edge components.
+Support passing `path` element attributes to BaseEdge component.
diff --git a/packages/react/src/components/Edges/BaseEdge.tsx b/packages/react/src/components/Edges/BaseEdge.tsx
index d3d6999d..ca7116a5 100644
--- a/packages/react/src/components/Edges/BaseEdge.tsx
+++ b/packages/react/src/components/Edges/BaseEdge.tsx
@@ -2,7 +2,7 @@ import { isNumeric } from '@xyflow/system';
 import cc from 'classcat';
 
 import { EdgeText } from './EdgeText';
-import type { BaseEdgeProps } from '../../types';
+import type { BaseEdgeProps, EdgeComponentWithPathOptions, EdgeProps } from '../../types';
 
 export function BaseEdge({
   id,
@@ -15,19 +15,34 @@ export function BaseEdge({
   labelBgStyle,
   labelBgPadding,
   labelBgBorderRadius,
-  style,
   markerEnd,
   markerStart,
   className,
   interactionWidth = 20,
   ...props
 }: BaseEdgeProps) {
+  // We are not allowed to pass these props to the path element otherwise we get a bunch of warnings
+  const {
+    animated,
+    selectable,
+    deletable,
+    data,
+    selected,
+    source,
+    target,
+    targetHandleId,
+    sourceHandleId,
+    targetPosition,
+    sourcePosition,
+    pathOptions,
+    ...restProps
+  } = props as EdgeComponentWithPathOptions<any> & EdgeProps;
+
   return (
     <>
       <path
-        {...props}
+        {...restProps}
         id={id}
-        style={style}
         d={path}
         fill="none"
         className={cc(['react-flow__edge-path', className])}
diff --git a/packages/react/src/components/Edges/BezierEdge.tsx b/packages/react/src/components/Edges/BezierEdge.tsx
index 5de1dce1..5a4a6e3d 100644
--- a/packages/react/src/components/Edges/BezierEdge.tsx
+++ b/packages/react/src/components/Edges/BezierEdge.tsx
@@ -15,17 +15,7 @@ function createBezierEdge(params: { isInternal: boolean }) {
       targetY,
       sourcePosition = Position.Bottom,
       targetPosition = Position.Top,
-      label,
-      labelStyle,
-      labelShowBg,
-      labelBgStyle,
-      labelBgPadding,
-      labelBgBorderRadius,
-      style,
-      markerEnd,
-      markerStart,
       pathOptions,
-      interactionWidth,
       ...props
     }: BezierEdgeProps) => {
       const [path, labelX, labelY] = getBezierPath({
@@ -40,25 +30,7 @@ function createBezierEdge(params: { isInternal: boolean }) {
 
       const _id = params.isInternal ? undefined : id;
 
-      return (
-        <BaseEdge
-          {...props}
-          id={_id}
-          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}
-        />
-      );
+      return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
     }
   );
 }
diff --git a/packages/react/src/components/Edges/SimpleBezierEdge.tsx b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
index 85a2aa3a..6aff362a 100644
--- a/packages/react/src/components/Edges/SimpleBezierEdge.tsx
+++ b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
@@ -82,16 +82,6 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) {
       targetY,
       sourcePosition = Position.Bottom,
       targetPosition = Position.Top,
-      label,
-      labelStyle,
-      labelShowBg,
-      labelBgStyle,
-      labelBgPadding,
-      labelBgBorderRadius,
-      style,
-      markerEnd,
-      markerStart,
-      interactionWidth,
       ...props
     }: SimpleBezierEdgeProps) => {
       const [path, labelX, labelY] = getSimpleBezierPath({
@@ -105,25 +95,7 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) {
 
       const _id = params.isInternal ? undefined : id;
 
-      return (
-        <BaseEdge
-          {...props}
-          id={_id}
-          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}
-        />
-      );
+      return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
     }
   );
 }
diff --git a/packages/react/src/components/Edges/SmoothStepEdge.tsx b/packages/react/src/components/Edges/SmoothStepEdge.tsx
index 01e97499..8d362427 100644
--- a/packages/react/src/components/Edges/SmoothStepEdge.tsx
+++ b/packages/react/src/components/Edges/SmoothStepEdge.tsx
@@ -13,19 +13,9 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
       sourceY,
       targetX,
       targetY,
-      label,
-      labelStyle,
-      labelShowBg,
-      labelBgStyle,
-      labelBgPadding,
-      labelBgBorderRadius,
-      style,
       sourcePosition = Position.Bottom,
       targetPosition = Position.Top,
-      markerEnd,
-      markerStart,
       pathOptions,
-      interactionWidth,
       ...props
     }: SmoothStepEdgeProps) => {
       const [path, labelX, labelY] = getSmoothStepPath({
@@ -41,25 +31,7 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
 
       const _id = params.isInternal ? undefined : id;
 
-      return (
-        <BaseEdge
-          {...props}
-          id={_id}
-          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}
-        />
-      );
+      return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
     }
   );
 }
diff --git a/packages/react/src/components/Edges/StraightEdge.tsx b/packages/react/src/components/Edges/StraightEdge.tsx
index 102aa484..5b767638 100644
--- a/packages/react/src/components/Edges/StraightEdge.tsx
+++ b/packages/react/src/components/Edges/StraightEdge.tsx
@@ -6,51 +6,13 @@ import type { StraightEdgeProps } from '../../types';
 
 function createStraightEdge(params: { isInternal: boolean }) {
   // eslint-disable-next-line react/display-name
-  return memo(
-    ({
-      id,
-      sourceX,
-      sourceY,
-      targetX,
-      targetY,
-      label,
-      labelStyle,
-      labelShowBg,
-      labelBgStyle,
-      labelBgPadding,
-      labelBgBorderRadius,
-      style,
-      markerEnd,
-      markerStart,
-      interactionWidth,
-      ...props
-    }: StraightEdgeProps) => {
-      const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+  return memo(({ id, sourceX, sourceY, targetX, targetY, ...props }: StraightEdgeProps) => {
+    const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
-      const _id = params.isInternal ? undefined : id;
+    const _id = params.isInternal ? undefined : id;
 
-      return (
-        <BaseEdge
-          {...props}
-          id={_id}
-          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}
-          {...props}
-        />
-      );
-    }
-  );
+    return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
+  });
 }
 
 const StraightEdge = createStraightEdge({ isInternal: false });
diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index 8ca672dc..7de41f42 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -14,7 +14,6 @@ import type {
   EdgePosition,
   StepPathOptions,
   OnError,
-  ConnectionState,
   FinalConnectionState,
 } from '@xyflow/system';
 
@@ -92,8 +91,6 @@ export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
   disableKeyboardA11y?: boolean;
 };
 
-type BasePathAttributes = Omit<HTMLAttributes<SVGPathElement>, "d">;
-
 export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
 
 export type EdgeTextProps = HTMLAttributes<SVGElement> &
@@ -121,34 +118,38 @@ export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
     interactionWidth?: number;
   };
 
+type BasePathAttributes = Omit<HTMLAttributes<SVGPathElement>, 'd'>;
+
 /**
  * BaseEdge component props
  * @public
  */
-export type BaseEdgeProps = BasePathAttributes & EdgeLabelOptions & {
-  /** Additional padding where interacting with an edge is still possible */
-  interactionWidth?: number;
-  /** The x position of edge label */
-  labelX?: number;
-  /** The y position of edge label */
-  labelY?: number;
-  /** Marker at start of edge
-   * @example 'url(#arrow)'
-   */
-  markerStart?: string;
-  /** Marker at end of edge
-   * @example 'url(#arrow)'
-   */
-  markerEnd?: string;
-  /** SVG path of the edge */
-  path: string;
-};
+export type BaseEdgeProps = BasePathAttributes &
+  EdgeLabelOptions & {
+    /** Additional padding where interacting with an edge is still possible */
+    interactionWidth?: number;
+    /** The x position of edge label */
+    labelX?: number;
+    /** The y position of edge label */
+    labelY?: number;
+    /** Marker at start of edge
+     * @example 'url(#arrow)'
+     */
+    markerStart?: string;
+    /** Marker at end of edge
+     * @example 'url(#arrow)'
+     */
+    markerEnd?: string;
+    /** SVG path of the edge */
+    path: string;
+  };
 
 /**
  * Helper type for edge components that get exported by the library
  * @public
  */
-export type EdgeComponentProps = BasePathAttributes & EdgePosition &
+export type EdgeComponentProps = BasePathAttributes &
+  EdgePosition &
   EdgeLabelOptions & {
     id?: EdgeProps['id'];
     markerStart?: EdgeProps['markerStart'];
@@ -185,7 +186,8 @@ export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
  * StraightEdge component props
  * @public
  */
-export type StraightEdgeProps = HTMLAttributes<SVGPathElement> & Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
+export type StraightEdgeProps = HTMLAttributes<SVGPathElement> &
+  Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
 
 /**
  * SimpleBezier component props

From 8b8ef2bffa03e12d59ce77d334f02576f9e49929 Mon Sep 17 00:00:00 2001
From: Matt Huggins <matt.huggins@gmail.com>
Date: Mon, 2 Dec 2024 10:20:52 -0600
Subject: [PATCH 4/9] HTMLAttributes -> SVGAttributes, add edge example

---
 .../react/src/examples/Edges/CustomEdge3.css  | 14 +++++++
 .../react/src/examples/Edges/CustomEdge3.tsx  | 38 +++++++++++++++++++
 examples/react/src/examples/Edges/index.tsx   | 15 ++++++++
 packages/react/src/types/edges.ts             | 15 ++++++--
 4 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 examples/react/src/examples/Edges/CustomEdge3.css
 create mode 100644 examples/react/src/examples/Edges/CustomEdge3.tsx

diff --git a/examples/react/src/examples/Edges/CustomEdge3.css b/examples/react/src/examples/Edges/CustomEdge3.css
new file mode 100644
index 00000000..570b7c75
--- /dev/null
+++ b/examples/react/src/examples/Edges/CustomEdge3.css
@@ -0,0 +1,14 @@
+@keyframes react-flow-edge-dash {
+  from {
+    stroke-dashoffset: 100;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.react-flow__edge-custom3 {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: react-flow-edge-dash 1s linear forwards;
+}
diff --git a/examples/react/src/examples/Edges/CustomEdge3.tsx b/examples/react/src/examples/Edges/CustomEdge3.tsx
new file mode 100644
index 00000000..37a3d40f
--- /dev/null
+++ b/examples/react/src/examples/Edges/CustomEdge3.tsx
@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { BaseEdge, EdgeProps, EdgeText, getSmoothStepPath } from '@xyflow/react';
+import './CustomEdge3.css';
+
+const CustomEdge: FC<EdgeProps> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+}) => {
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} pathLength={100} />
+      <EdgeText
+        x={labelX}
+        y={labelY - 5}
+        label={data.text}
+        labelBgStyle={{ fill: 'transparent' }}
+        onClick={() => console.log(data)}
+      />
+    </>
+  );
+};
+
+export default CustomEdge;
diff --git a/examples/react/src/examples/Edges/index.tsx b/examples/react/src/examples/Edges/index.tsx
index bbba30fb..6e18d24a 100644
--- a/examples/react/src/examples/Edges/index.tsx
+++ b/examples/react/src/examples/Edges/index.tsx
@@ -16,6 +16,7 @@ import {
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';
+import CustomEdge3 from './CustomEdge3';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
@@ -63,6 +64,12 @@ const initialNodes: Node[] = [
     data: { label: 'Output 9' },
     position: { x: 675, y: 500 },
   },
+  {
+    id: '10',
+    type: 'output',
+    data: { label: 'Output 10' },
+    position: { x: 50, y: 400 },
+  },
 ];
 
 const initialEdges: Edge[] = [
@@ -137,6 +144,13 @@ const initialEdges: Edge[] = [
     type: 'custom2',
     data: { text: 'custom edge 2' },
   },
+  {
+    id: 'e3a-10',
+    source: '3a',
+    target: '10',
+    type: 'custom3',
+    data: { text: 'custom edge 3' },
+  },
   {
     id: 'e5-6',
     source: '5',
@@ -173,6 +187,7 @@ const initialEdges: Edge[] = [
 const edgeTypes: EdgeTypes = {
   custom: CustomEdge,
   custom2: CustomEdge2,
+  custom3: CustomEdge3,
 };
 
 const defaultEdgeOptions = {
diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index 7de41f42..1a0a3353 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -1,6 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type { CSSProperties, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent, ComponentType } from 'react';
+import type {
+  CSSProperties,
+  HTMLAttributes,
+  SVGAttributes,
+  ReactNode,
+  MouseEvent as ReactMouseEvent,
+  ComponentType,
+} from 'react';
 import type {
   EdgeBase,
   BezierPathOptions,
@@ -93,7 +100,7 @@ export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
 
 export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
 
-export type EdgeTextProps = HTMLAttributes<SVGElement> &
+export type EdgeTextProps = SVGAttributes<SVGElement> &
   EdgeLabelOptions & {
     x: number;
     y: number;
@@ -118,7 +125,7 @@ export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
     interactionWidth?: number;
   };
 
-type BasePathAttributes = Omit<HTMLAttributes<SVGPathElement>, 'd'>;
+type BasePathAttributes = Omit<SVGAttributes<SVGPathElement>, 'd'>;
 
 /**
  * BaseEdge component props
@@ -186,7 +193,7 @@ export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
  * StraightEdge component props
  * @public
  */
-export type StraightEdgeProps = HTMLAttributes<SVGPathElement> &
+export type StraightEdgeProps = SVGAttributes<SVGPathElement> &
   Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
 
 /**

From 3526963f0ba8d708f0250e8c3f161edbdae2347f Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 4 Dec 2024 11:12:49 +0100
Subject: [PATCH 5/9] Revert back to passing props manually

---
 .../react/src/components/Edges/BaseEdge.tsx   | 19 +-------
 .../react/src/components/Edges/BezierEdge.tsx | 30 ++++++++++++-
 .../src/components/Edges/SimpleBezierEdge.tsx | 30 ++++++++++++-
 .../src/components/Edges/SmoothStepEdge.tsx   | 30 ++++++++++++-
 .../src/components/Edges/StraightEdge.tsx     | 45 ++++++++++++++++---
 packages/react/src/types/edges.ts             |  7 +--
 6 files changed, 127 insertions(+), 34 deletions(-)

diff --git a/packages/react/src/components/Edges/BaseEdge.tsx b/packages/react/src/components/Edges/BaseEdge.tsx
index ca7116a5..c03c5af9 100644
--- a/packages/react/src/components/Edges/BaseEdge.tsx
+++ b/packages/react/src/components/Edges/BaseEdge.tsx
@@ -21,27 +21,10 @@ export function BaseEdge({
   interactionWidth = 20,
   ...props
 }: BaseEdgeProps) {
-  // We are not allowed to pass these props to the path element otherwise we get a bunch of warnings
-  const {
-    animated,
-    selectable,
-    deletable,
-    data,
-    selected,
-    source,
-    target,
-    targetHandleId,
-    sourceHandleId,
-    targetPosition,
-    sourcePosition,
-    pathOptions,
-    ...restProps
-  } = props as EdgeComponentWithPathOptions<any> & EdgeProps;
-
   return (
     <>
       <path
-        {...restProps}
+        {...props}
         id={id}
         d={path}
         fill="none"
diff --git a/packages/react/src/components/Edges/BezierEdge.tsx b/packages/react/src/components/Edges/BezierEdge.tsx
index 5a4a6e3d..482f1fd8 100644
--- a/packages/react/src/components/Edges/BezierEdge.tsx
+++ b/packages/react/src/components/Edges/BezierEdge.tsx
@@ -15,8 +15,17 @@ function createBezierEdge(params: { isInternal: boolean }) {
       targetY,
       sourcePosition = Position.Bottom,
       targetPosition = Position.Top,
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      markerEnd,
+      markerStart,
       pathOptions,
-      ...props
+      interactionWidth,
     }: BezierEdgeProps) => {
       const [path, labelX, labelY] = getBezierPath({
         sourceX,
@@ -30,7 +39,24 @@ function createBezierEdge(params: { isInternal: boolean }) {
 
       const _id = params.isInternal ? undefined : id;
 
-      return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
+      return (
+        <BaseEdge
+          id={_id}
+          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}
+        />
+      );
     }
   );
 }
diff --git a/packages/react/src/components/Edges/SimpleBezierEdge.tsx b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
index 6aff362a..b3378c48 100644
--- a/packages/react/src/components/Edges/SimpleBezierEdge.tsx
+++ b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
@@ -82,7 +82,16 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) {
       targetY,
       sourcePosition = Position.Bottom,
       targetPosition = Position.Top,
-      ...props
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      markerEnd,
+      markerStart,
+      interactionWidth,
     }: SimpleBezierEdgeProps) => {
       const [path, labelX, labelY] = getSimpleBezierPath({
         sourceX,
@@ -95,7 +104,24 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) {
 
       const _id = params.isInternal ? undefined : id;
 
-      return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
+      return (
+        <BaseEdge
+          id={_id}
+          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}
+        />
+      );
     }
   );
 }
diff --git a/packages/react/src/components/Edges/SmoothStepEdge.tsx b/packages/react/src/components/Edges/SmoothStepEdge.tsx
index 8d362427..1f6bcfd1 100644
--- a/packages/react/src/components/Edges/SmoothStepEdge.tsx
+++ b/packages/react/src/components/Edges/SmoothStepEdge.tsx
@@ -13,10 +13,19 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
       sourceY,
       targetX,
       targetY,
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
       sourcePosition = Position.Bottom,
       targetPosition = Position.Top,
+      markerEnd,
+      markerStart,
       pathOptions,
-      ...props
+      interactionWidth,
     }: SmoothStepEdgeProps) => {
       const [path, labelX, labelY] = getSmoothStepPath({
         sourceX,
@@ -31,7 +40,24 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
 
       const _id = params.isInternal ? undefined : id;
 
-      return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
+      return (
+        <BaseEdge
+          id={_id}
+          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}
+        />
+      );
     }
   );
 }
diff --git a/packages/react/src/components/Edges/StraightEdge.tsx b/packages/react/src/components/Edges/StraightEdge.tsx
index 5b767638..53d1ac29 100644
--- a/packages/react/src/components/Edges/StraightEdge.tsx
+++ b/packages/react/src/components/Edges/StraightEdge.tsx
@@ -6,13 +6,48 @@ import type { StraightEdgeProps } from '../../types';
 
 function createStraightEdge(params: { isInternal: boolean }) {
   // eslint-disable-next-line react/display-name
-  return memo(({ id, sourceX, sourceY, targetX, targetY, ...props }: StraightEdgeProps) => {
-    const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+  return memo(
+    ({
+      id,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      markerEnd,
+      markerStart,
+      interactionWidth,
+    }: StraightEdgeProps) => {
+      const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
-    const _id = params.isInternal ? undefined : id;
+      const _id = params.isInternal ? undefined : id;
 
-    return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
-  });
+      return (
+        <BaseEdge
+          id={_id}
+          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}
+        />
+      );
+    }
+  );
 }
 
 const StraightEdge = createStraightEdge({ isInternal: false });
diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index 1a0a3353..caaea501 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -125,13 +125,11 @@ export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
     interactionWidth?: number;
   };
 
-type BasePathAttributes = Omit<SVGAttributes<SVGPathElement>, 'd'>;
-
 /**
  * BaseEdge component props
  * @public
  */
-export type BaseEdgeProps = BasePathAttributes &
+export type BaseEdgeProps = Omit<SVGAttributes<SVGPathElement>, 'd'> &
   EdgeLabelOptions & {
     /** Additional padding where interacting with an edge is still possible */
     interactionWidth?: number;
@@ -155,8 +153,7 @@ export type BaseEdgeProps = BasePathAttributes &
  * Helper type for edge components that get exported by the library
  * @public
  */
-export type EdgeComponentProps = BasePathAttributes &
-  EdgePosition &
+export type EdgeComponentProps = EdgePosition &
   EdgeLabelOptions & {
     id?: EdgeProps['id'];
     markerStart?: EdgeProps['markerStart'];

From cf3bae57b14c9bea1743c98dc8b641e3468e0b55 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 4 Dec 2024 11:17:00 +0100
Subject: [PATCH 6/9] removed svg props from straight edge

---
 packages/react/src/types/edges.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index caaea501..c2463e25 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -190,8 +190,7 @@ export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
  * StraightEdge component props
  * @public
  */
-export type StraightEdgeProps = SVGAttributes<SVGPathElement> &
-  Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
+export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
 
 /**
  * SimpleBezier component props

From cc6b1d97179935bbcddd4bd97a2db752a9af3993 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 4 Dec 2024 11:25:22 +0100
Subject: [PATCH 7/9] remove unsused import

---
 packages/react/src/types/edges.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index c2463e25..83729ddd 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -1,13 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type {
-  CSSProperties,
-  HTMLAttributes,
-  SVGAttributes,
-  ReactNode,
-  MouseEvent as ReactMouseEvent,
-  ComponentType,
-} from 'react';
+import type { CSSProperties, SVGAttributes, ReactNode, MouseEvent as ReactMouseEvent, ComponentType } from 'react';
 import type {
   EdgeBase,
   BezierPathOptions,

From 7a8e53463e3e854692a4cd3c4c698831833bb006 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 4 Dec 2024 12:17:35 +0100
Subject: [PATCH 8/9] chore(react): cleanup base edge

---
 packages/react/src/components/Edges/BaseEdge.tsx | 16 ++--------------
 packages/react/src/types/edges.ts                |  8 --------
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/packages/react/src/components/Edges/BaseEdge.tsx b/packages/react/src/components/Edges/BaseEdge.tsx
index c03c5af9..3d951796 100644
--- a/packages/react/src/components/Edges/BaseEdge.tsx
+++ b/packages/react/src/components/Edges/BaseEdge.tsx
@@ -2,10 +2,9 @@ import { isNumeric } from '@xyflow/system';
 import cc from 'classcat';
 
 import { EdgeText } from './EdgeText';
-import type { BaseEdgeProps, EdgeComponentWithPathOptions, EdgeProps } from '../../types';
+import type { BaseEdgeProps } from '../../types';
 
 export function BaseEdge({
-  id,
   path,
   labelX,
   labelY,
@@ -15,23 +14,12 @@ export function BaseEdge({
   labelBgStyle,
   labelBgPadding,
   labelBgBorderRadius,
-  markerEnd,
-  markerStart,
-  className,
   interactionWidth = 20,
   ...props
 }: BaseEdgeProps) {
   return (
     <>
-      <path
-        {...props}
-        id={id}
-        d={path}
-        fill="none"
-        className={cc(['react-flow__edge-path', className])}
-        markerEnd={markerEnd}
-        markerStart={markerStart}
-      />
+      <path {...props} d={path} fill="none" className={cc(['react-flow__edge-path', props.className])} />
       {interactionWidth && (
         <path
           d={path}
diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index 83729ddd..ce21e84f 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -130,14 +130,6 @@ export type BaseEdgeProps = Omit<SVGAttributes<SVGPathElement>, 'd'> &
     labelX?: number;
     /** The y position of edge label */
     labelY?: number;
-    /** Marker at start of edge
-     * @example 'url(#arrow)'
-     */
-    markerStart?: string;
-    /** Marker at end of edge
-     * @example 'url(#arrow)'
-     */
-    markerEnd?: string;
     /** SVG path of the edge */
     path: string;
   };

From 944238b015dd91efcc24a3b3277ba1095506b767 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 4 Dec 2024 12:44:34 +0100
Subject: [PATCH 9/9] chore(changeset): update

---
 .changeset/selfish-tables-tie.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/selfish-tables-tie.md b/.changeset/selfish-tables-tie.md
index 94d9db0b..8ac759cf 100644
--- a/.changeset/selfish-tables-tie.md
+++ b/.changeset/selfish-tables-tie.md
@@ -1,5 +1,5 @@
 ---
-'@xyflow/react': minor
+'@xyflow/react': patch
 ---
 
-Support passing `path` element attributes to BaseEdge component.
+Support passing `path` element attributes to `BaseEdge` component.