fix: revert addition of as prop

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

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

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

@@ -14,9 +14,9 @@
 			id: 'A',
 			position: { x: 0, y: 0 },
 			data: { label: 'A' },
+			
 		},
-		// You need to explicitly pass the as type
+		{ id: 'B', position: { x: -100, y: 150 }, data: { label: 'B' } },
-		{ id: 'B', position: { x: -100, y: 150 }, data: { label: '<ul> Node' }, as: "ul" 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

@@ -68,15 +68,7 @@ export function NodeWrapper<NodeType extends Node>({
 
   const store = useStoreApi();
   const hasDimensions = nodeHasDimensions(node);
-  const Tag: keyof JSX.IntrinsicElements = node.as || 'div';
+  const nodeRef = useNodeObserver({ node, nodeType, hasDimensions, resizeObserver });
-
-  const nodeRef = useNodeObserver({
-    node,
-    nodeType,
-    hasDimensions,
-    resizeObserver,
-  });
-
   const dragging = useDrag({
     nodeRef,
     disabled: node.hidden || !isDraggable,
@@ -168,7 +160,7 @@ export function NodeWrapper<NodeType extends Node>({
   };
 
   return (
-    <Tag
+    <div
       className={cc([
         'react-flow__node',
         `react-flow__node-${nodeType}`,
@@ -185,11 +177,7 @@ export function NodeWrapper<NodeType extends Node>({
           dragging,
         },
       ])}
-      ref={(instance: HTMLElement | null) => {
+      ref={nodeRef}
-        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)`,
@@ -200,13 +188,13 @@ export function NodeWrapper<NodeType extends Node>({
       }}
       data-id={id}
       data-testid={`rf__node-${id}`}
-      onMouseEnter={onMouseEnterHandler as React.MouseEventHandler<HTMLElement>}
+      onMouseEnter={onMouseEnterHandler}
-      onMouseMove={onMouseMoveHandler as React.MouseEventHandler<HTMLElement>}
+      onMouseMove={onMouseMoveHandler}
-      onMouseLeave={onMouseLeaveHandler as React.MouseEventHandler<HTMLElement>}
+      onMouseLeave={onMouseLeaveHandler}
-      onContextMenu={onContextMenuHandler as React.MouseEventHandler<HTMLElement>}
+      onContextMenu={onContextMenuHandler}
-      onClick={onSelectNodeHandler as React.MouseEventHandler<HTMLElement>}
+      onClick={onSelectNodeHandler}
-      onDoubleClick={onDoubleClickHandler as React.MouseEventHandler<HTMLElement>}
+      onDoubleClick={onDoubleClickHandler}
-      onKeyDown={isFocusable ? (onKeyDown as React.KeyboardEventHandler<HTMLElement>) : undefined}
+      onKeyDown={isFocusable ? onKeyDown : undefined}
       tabIndex={isFocusable ? 0 : undefined}
       role={isFocusable ? 'button' : undefined}
       aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
@@ -233,6 +221,6 @@ export function NodeWrapper<NodeType extends Node>({
           {...nodeDimensions}
         />
       </Provider>
-    </Tag>
+    </div>
   );
 }

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

@@ -53,19 +53,15 @@
     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);
@@ -78,7 +74,7 @@
 
   let isParent = $derived(isInParentLookup(id));
 
-  let nodeRef: HTMLElement | null = $state(null);
+  let nodeRef: HTMLDivElement | null = $state(null);
   let prevNodeRef: HTMLDivElement | null = null;
 
   // svelte-ignore state_referenced_locally
@@ -136,7 +132,7 @@
                 id,
                 {
                   id,
-                  nodeElement: nodeRef as HTMLDivElement,
+                  nodeElement: nodeRef,
                   force: true
                 }
               ]
@@ -156,7 +152,7 @@
     if (resizeObserver && (!initialized || nodeRef !== prevNodeRef)) {
       prevNodeRef && resizeObserver.unobserve(prevNodeRef);
       nodeRef && resizeObserver.observe(nodeRef);
-      prevNodeRef = nodeRef as HTMLDivElement | null;
+      prevNodeRef = nodeRef;
     }
     /* eslint-enable @typescript-eslint/no-unused-expressions */
   });
@@ -185,7 +181,7 @@
     if (elementSelectionKeys.includes(event.key) && selectable) {
       const unselect = event.key === 'Escape';
 
-      store.handleNodeSelection(id, unselect, nodeRef as HTMLDivElement | null);
+      store.handleNodeSelection(id, unselect, nodeRef);
     } else if (
       draggable &&
       node.selected &&
@@ -205,8 +201,7 @@
 </script>
 
 {#if !hidden}
-  <svelte:element
+  <div
-    this={Tag}
     use:drag={{
       nodeId: id,
       isSelectable: selectable,
@@ -246,16 +241,16 @@
     style={nodeStyle}
     onclick={onSelectNodeHandler}
     onpointerenter={onnodepointerenter
-      ? (event: PointerEvent) => onnodepointerenter({ node: userNode, event })
+      ? (event) => onnodepointerenter({ node: userNode, event })
       : undefined}
     onpointerleave={onnodepointerleave
-      ? (event: PointerEvent) => onnodepointerleave({ node: userNode, event })
+      ? (event) => onnodepointerleave({ node: userNode, event })
       : undefined}
     onpointermove={onnodepointermove
-      ? (event: PointerEvent) => onnodepointermove({ node: userNode, event })
+      ? (event) => onnodepointermove({ node: userNode, event })
       : undefined}
     oncontextmenu={onnodecontextmenu
-      ? (event: MouseEvent) => onnodecontextmenu({ node: userNode, event })
+      ? (event) => onnodecontextmenu({ node: userNode, event })
       : undefined}
     onkeydown={focusable ? onKeyDown : undefined}
     tabIndex={focusable ? 0 : undefined}
@@ -284,5 +279,5 @@
       {width}
       {height}
     />
-    </svelte:element>
+  </div>
 {/if}

packages/system/src/types/nodes.ts

@@ -23,10 +23,6 @@ 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'