feat(node): add as property to allow custom HTML elements

examples/react/src/examples/A11y/index.tsx

@@ -22,19 +22,17 @@ const initialNodes: Node[] = [
     type: 'input',
     data: { label: 'A11y Node 1' },
     position: { x: 250, y: 5 },
-    className: 'light',
   },
   {
     id: '2',
-    data: { label: 'Node 2' },
+    data: { label: '<ul> Node' },
     position: { x: 100, y: 100 },
-    className: 'light',
+    as: 'ul',
   },
   {
     id: '3',
     data: { label: 'Node 3' },
     position: { x: 400, y: 100 },
-    className: 'light',
   },
 ];
 

examples/svelte/src/routes/examples/a11y/+page.svelte

@@ -13,10 +13,9 @@
 		{
 			id: 'A',
 			position: { x: 0, y: 0 },
-			data: { label: 'A' },
-			
+			data: { label: 'A' },	
 		},
-		{ id: 'B', position: { x: -100, y: 150 }, data: { label: 'B' } },
+		{ id: 'B', position: { x: -100, y: 150 }, data: { label: '<ul> Node' }, as: 'ul' },
 		{ id: 'C', position: { x: 100, y: 150 }, data: { label: 'C' }  },
 		{ id: 'D', position: { x: 0, y: 260 }, data: { label: 'D' }  }
 	]);

packages/react/src/components/NodeWrapper/index.tsx

@@ -67,7 +67,15 @@ export function NodeWrapper<NodeType extends Node>({
 
   const store = useStoreApi();
   const hasDimensions = nodeHasDimensions(node);
-  const nodeRef = useNodeObserver({ node, nodeType, hasDimensions, resizeObserver });
+  const Tag: keyof JSX.IntrinsicElements = node.as || 'div';
+
+  const nodeRef = useNodeObserver({
+    node,
+    nodeType,
+    hasDimensions,
+    resizeObserver,
+  });
+
   const dragging = useDrag({
     nodeRef,
     disabled: node.hidden || !isDraggable,
@@ -156,7 +164,7 @@ export function NodeWrapper<NodeType extends Node>({
   };
 
   return (
-    <div
+    <Tag
       className={cc([
         'react-flow__node',
         `react-flow__node-${nodeType}`,
@@ -173,7 +181,11 @@ export function NodeWrapper<NodeType extends Node>({
           dragging,
         },
       ])}
-      ref={nodeRef}
+      ref={(instance: HTMLElement | null) => {
+        if (nodeRef && 'current' in nodeRef) {
+          (nodeRef as React.MutableRefObject<HTMLElement | null>).current = instance;
+        }
+      }}
       style={{
         zIndex: internals.z,
         transform: `translate(${internals.positionAbsolute.x}px,${internals.positionAbsolute.y}px)`,
@@ -184,13 +196,13 @@ export function NodeWrapper<NodeType extends Node>({
       }}
       data-id={id}
       data-testid={`rf__node-${id}`}
-      onMouseEnter={onMouseEnterHandler}
-      onMouseMove={onMouseMoveHandler}
-      onMouseLeave={onMouseLeaveHandler}
-      onContextMenu={onContextMenuHandler}
-      onClick={onSelectNodeHandler}
-      onDoubleClick={onDoubleClickHandler}
-      onKeyDown={isFocusable ? onKeyDown : undefined}
+      onMouseEnter={onMouseEnterHandler as React.MouseEventHandler<HTMLElement>}
+      onMouseMove={onMouseMoveHandler as React.MouseEventHandler<HTMLElement>}
+      onMouseLeave={onMouseLeaveHandler as React.MouseEventHandler<HTMLElement>}
+      onContextMenu={onContextMenuHandler as React.MouseEventHandler<HTMLElement>}
+      onClick={onSelectNodeHandler as React.MouseEventHandler<HTMLElement>}
+      onDoubleClick={onDoubleClickHandler as React.MouseEventHandler<HTMLElement>}
+      onKeyDown={isFocusable ? (onKeyDown as React.KeyboardEventHandler<HTMLElement>) : undefined}
       tabIndex={isFocusable ? 0 : undefined}
       role={isFocusable ? 'button' : undefined}
       aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
@@ -217,6 +229,6 @@ export function NodeWrapper<NodeType extends Node>({
           {...nodeDimensions}
         />
       </Provider>
-    </div>
+    </Tag>
   );
 }

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -53,15 +53,19 @@
     width,
     height,
     dragHandle,
+    as = 'div',
     internals: {
       z: zIndex = 0,
       positionAbsolute: { x: positionX, y: positionY },
-      userNode
+      userNode,
+      
     }
   } = $derived(node);
 
   let { id } = node;
 
+  let Tag = $derived(typeof as === 'string' ? as : 'div');
+
   let draggable = $derived(_draggable ?? store.nodesDraggable);
   let selectable = $derived(_selectable ?? store.elementsSelectable);
   let connectable = $derived(_connectable ?? store.nodesConnectable);
@@ -74,7 +78,7 @@
 
   let isParent = $derived(isInParentLookup(id));
 
-  let nodeRef: HTMLDivElement | null = $state(null);
+  let nodeRef: HTMLElement | null = $state(null);
   let prevNodeRef: HTMLDivElement | null = null;
 
   // svelte-ignore state_referenced_locally
@@ -131,7 +135,7 @@
                 id,
                 {
                   id,
-                  nodeElement: nodeRef,
+                  nodeElement: nodeRef as HTMLDivElement,
                   force: true
                 }
               ]
@@ -151,7 +155,7 @@
     if (resizeObserver && (!initialized || nodeRef !== prevNodeRef)) {
       prevNodeRef && resizeObserver.unobserve(prevNodeRef);
       nodeRef && resizeObserver.observe(nodeRef);
-      prevNodeRef = nodeRef;
+      prevNodeRef = nodeRef as HTMLDivElement | null;
     }
     /* eslint-enable @typescript-eslint/no-unused-expressions */
   });
@@ -180,7 +184,7 @@
     if (elementSelectionKeys.includes(event.key) && selectable) {
       const unselect = event.key === 'Escape';
 
-      store.handleNodeSelection(id, unselect, nodeRef);
+      store.handleNodeSelection(id, unselect, nodeRef as HTMLDivElement | null);
     } else if (
       draggable &&
       node.selected &&
@@ -199,7 +203,8 @@
 </script>
 
 {#if !hidden}
-  <div
+  <svelte:element
+    this={Tag}
     use:drag={{
       nodeId: id,
       isSelectable: selectable,
@@ -239,16 +244,16 @@
     style={nodeStyle}
     onclick={onSelectNodeHandler}
     onpointerenter={onnodepointerenter
-      ? (event) => onnodepointerenter({ node: userNode, event })
+      ? (event: PointerEvent) => onnodepointerenter({ node: userNode, event })
       : undefined}
     onpointerleave={onnodepointerleave
-      ? (event) => onnodepointerleave({ node: userNode, event })
+      ? (event: PointerEvent) => onnodepointerleave({ node: userNode, event })
       : undefined}
     onpointermove={onnodepointermove
-      ? (event) => onnodepointermove({ node: userNode, event })
+      ? (event: PointerEvent) => onnodepointermove({ node: userNode, event })
       : undefined}
     oncontextmenu={onnodecontextmenu
-      ? (event) => onnodecontextmenu({ node: userNode, event })
+      ? (event: MouseEvent) => onnodecontextmenu({ node: userNode, event })
       : undefined}
     onkeydown={focusable ? onKeyDown : undefined}
     tabIndex={focusable ? 0 : undefined}
@@ -277,5 +282,5 @@
       {width}
       {height}
     />
-  </div>
+    </svelte:element>
 {/if}

packages/system/src/types/nodes.ts

@@ -23,6 +23,10 @@ export type NodeBase<
   data: NodeData;
   /** Type of node defined in `nodeTypes`. */
   type?: NodeType;
+  /** Custom element type for rendering the node (e.g., 'div', 'li', etc.).
+   * @default 'div'
+   */
+  as?: Extract<keyof HTMLElementTagNameMap, 'div' | 'li' | 'ul' | 'ol'>;
   /**
    * Only relevant for default, source, target nodeType. Controls source position.
    * @example 'right', 'left', 'top', 'bottom'