feat: accept any path element attribute as a prop

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}

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}

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}

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}

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}
         />
       );
     }