Revert back to passing props manually

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"

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

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

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

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) => {
+  return memo(
-    const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+    ({
+      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 });

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 &
+export type EdgeComponentProps = EdgePosition &
-  EdgePosition &
   EdgeLabelOptions & {
     id?: EdgeProps['id'];
     markerStart?: EdgeProps['markerStart'];