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

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 & {
+export type BaseEdgeProps = BasePathAttributes & EdgeLabelOptions & {
-  /** Unique id of edge */
-  id?: string;
   /** 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