simplified prop drilling & improved changeset

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

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

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 (
+      return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
-        <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}
-        />
-      );
     }
   );
 }

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 (
+      return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
-        <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}
-        />
-      );
     }
   );
 }

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 (
+      return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
-        <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}
-        />
-      );
     }
   );
 }

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(
+  return memo(({ id, sourceX, sourceY, targetX, targetY, ...props }: StraightEdgeProps) => {
-    ({
+    const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
-      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 });
 
-      const _id = params.isInternal ? undefined : id;
+    const _id = params.isInternal ? undefined : id;
 
-      return (
+    return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
-        <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}
-        />
-      );
-    }
-  );
 }
 
 const StraightEdge = createStraightEdge({ isInternal: false });

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 & {
+export type BaseEdgeProps = BasePathAttributes &
-  /** Additional padding where interacting with an edge is still possible */
+  EdgeLabelOptions & {
-  interactionWidth?: number;
+    /** Additional padding where interacting with an edge is still possible */
-  /** The x position of edge label */
+    interactionWidth?: number;
-  labelX?: number;
+    /** The x position of edge label */
-  /** The y position of edge label */
+    labelX?: number;
-  labelY?: number;
+    /** The y position of edge label */
-  /** Marker at start of edge
+    labelY?: number;
-   * @example 'url(#arrow)'
+    /** Marker at start of edge
-   */
+     * @example 'url(#arrow)'
-  markerStart?: string;
+     */
-  /** Marker at end of edge
+    markerStart?: string;
-   * @example 'url(#arrow)'
+    /** Marker at end of edge
-   */
+     * @example 'url(#arrow)'
-  markerEnd?: string;
+     */
-  /** SVG path of the edge */
+    markerEnd?: string;
-  path: 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