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] 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