fix(react): edge styles

packages/react/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @xyflow/react
 
+## 12.0.0-next.3
+
+### Minor changes
+
+- fix edges styles when using base.css
+
+## 12.0.0-next.2
+
+### Minor changes
+
+- fix connection line rendering
+- fix multi handle
+
 ## 12.0.0-next.1
 
 ### Minor changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/react",
-  "version": "12.0.0-next.1",
+  "version": "12.0.0-next.3",
   "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
   "keywords": [
     "react",

packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx

@@ -9,8 +9,8 @@ type EdgeUpdateAnchorsProps = {
   edge: Edge;
   isUpdatable: boolean | 'source' | 'target';
   edgeUpdaterRadius: EdgeWrapperProps['edgeUpdaterRadius'];
-  sourceHandleId: EdgeWrapperProps['sourceHandleId'];
+  sourceHandleId: Edge['sourceHandle'];
-  targetHandleId: EdgeWrapperProps['targetHandleId'];
+  targetHandleId: Edge['targetHandle'];
   onEdgeUpdate: EdgeWrapperProps['onEdgeUpdate'];
   onEdgeUpdateStart: EdgeWrapperProps['onEdgeUpdateStart'];
   onEdgeUpdateEnd: EdgeWrapperProps['onEdgeUpdateEnd'];

packages/system/src/styles/init.css

@@ -106,6 +106,12 @@
 
 .xy-flow__edges {
   position: absolute;
+
+  svg {
+    overflow: visible;
+    position: absolute;
+    pointer-events: none;
+  }
 }
 
 .xy-flow__edge {
@@ -156,7 +162,7 @@
   }
 }
 
-.xy-flow__connectionline {
+svg.xy-flow__connectionline {
   z-index: 1001;
   overflow: visible;
   position: absolute;

packages/system/src/styles/style.css

@@ -43,12 +43,6 @@
   --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 }
 
-.xy-flow__edges svg {
-  overflow: visible;
-  position: absolute;
-  pointer-events: none;
-}
-
 .xy-flow__edge {
   &.updating {
     .xy-flow__edge-path {