Merge remote-tracking branch 'origin/main' into arrow-heads-fallback-color

.changeset/chilly-donkeys-relax.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Omit `defaultValue` from `Node`'s `domAttributes` to fix type incompatibility when using `WritableDraft`

.changeset/chilly-pumpkins-decide.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Prevent a 0 added to the markup for edges when interactionWidth is 0

.changeset/tidy-donuts-hug.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Export `BuiltInEdge` type

examples/react/src/App/header.tsx

@@ -6,13 +6,17 @@ import routes from './routes';
 export default function Header() {
   const location = useLocation();
   const navigate = useNavigate();
-  const [currentPath, setCurrentPath] = useState(location.pathname);
+
+  const pathParts = location.pathname.split('/').filter(Boolean);
+  const initialExample = pathParts.length > 1 ? pathParts[1] : 'basic';
+
+  const [currentPath, setCurrentPath] = useState(initialExample);
 
   useEffect(() => {
     const name = routes.find((route) => route.path === currentPath)?.name;
     document.title = `React Flow Examples${name ? ' - ' + name : ''}`;
     navigate(currentPath);
-  }, [currentPath]);
+  }, [currentPath, navigate]);
 
   return (
     <>
@@ -20,7 +24,11 @@ export default function Header() {
         <a className="logo" href="https://github.com/xyflow/xyflow">
           React Flow Dev
         </a>
-        <select value={currentPath} onChange={(event) => setCurrentPath(event.target.value)}>
+        <select
+          value={currentPath}
+          onChange={(event) => setCurrentPath(event.target.value)}
+          aria-label="select an example"
+        >
           {routes.map((route) => (
             <option value={route.path} key={route.path}>
               {route.name}

packages/react/src/components/Edges/BaseEdge.tsx

@@ -47,7 +47,7 @@ export function BaseEdge({
   return (
     <>
       <path {...props} d={path} fill="none" className={cc(['react-flow__edge-path', props.className])} />
-      {interactionWidth && (
+      {interactionWidth ? (
         <path
           d={path}
           fill="none"
@@ -55,7 +55,7 @@ export function BaseEdge({
           strokeWidth={interactionWidth}
           className="react-flow__edge-interaction"
         />
-      )}
+      ) : null}
       {label && isNumeric(labelX) && isNumeric(labelY) ? (
         <EdgeText
           x={labelX}

packages/react/src/types/component-props.ts

@@ -545,7 +545,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
   noDragClassName?: string;
   /**
    * Typically, scrolling the mouse wheel when the mouse is over the canvas will zoom the viewport.
-   * Adding the `"nowheel"` class to an element n the canvas will prevent this behavior and this prop
+   * Adding the `"nowheel"` class to an element in the canvas will prevent this behavior and this prop
    * allows you to change the name of that class.
    * @default "nowheel"
    */

packages/react/src/types/nodes.ts

@@ -29,7 +29,14 @@ export type Node<
    */
   domAttributes?: Omit<
     HTMLAttributes<HTMLDivElement>,
-    'id' | 'style' | 'className' | 'draggable' | 'role' | 'aria-label' | keyof DOMAttributes<HTMLDivElement>
+    | 'id'
+    | 'style'
+    | 'className'
+    | 'draggable'
+    | 'role'
+    | 'aria-label'
+    | 'defaultValue'
+    | keyof DOMAttributes<HTMLDivElement>
   >;
 };
 

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -393,7 +393,7 @@ export type SvelteFlowProps<
     noDragClass?: string;
     /**
      * Typically, scrolling the mouse wheel when the mouse is over the canvas will zoom the viewport.
-     * Adding the `"nowheel"` class to an element n the canvas will prevent this behavior and this prop
+     * Adding the `"nowheel"` class to an element in the canvas will prevent this behavior and this prop
      * allows you to change the name of that class.
      * @default "nowheel"
      */

packages/svelte/src/lib/index.ts

@@ -53,7 +53,8 @@ export type {
   StepEdgeProps,
   StraightEdgeProps,
   EdgeTypes,
-  DefaultEdgeOptions
+  DefaultEdgeOptions,
+  BuiltInEdge,
 } from '$lib/types/edges';
 export type * from '$lib/types/general';
 export type { Node, NodeTypes, BuiltInNode, NodeProps, InternalNode } from '$lib/types/nodes';