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

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