Allow arbitrary containerElement type

Author: aeharding

README.md

@@ -133,7 +133,7 @@ An optional options object parameter can be passed to configure the node.
 
 ### `portals.createSvgPortalNode([options])`
 
-This creates a detached SVG DOM node. It works identically to the node from `createHtmlPortalNode`, except it will work with SVG elements. Content is placed within a `<g>` instead of a `<div>`.
+This creates a detached SVG DOM node. It works identically to the node from `createHtmlPortalNode`, except it will work with SVG elements. Content is placed within a `<g>` instead of a `<div>` by default, which can be customized by `options.containerElement`.
 
 An error will be thrown if you attempt to use a HTML node for SVG content, or a SVG node for HTML content.
 

src/index.tsx

@@ -2,22 +2,19 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 // Internally, the portalNode must be for either HTML or SVG elements
-const ELEMENT_TYPE_HTML_BLOCK = 'div';
-const ELEMENT_TYPE_HTML_INLINE = 'span';
+const ELEMENT_TYPE_HTML = 'html';
 const ELEMENT_TYPE_SVG  = 'svg';
 
-type ANY_ELEMENT_TYPE = typeof ELEMENT_TYPE_HTML_BLOCK | typeof ELEMENT_TYPE_HTML_INLINE | typeof ELEMENT_TYPE_SVG;
-
 type BaseOptions = {
     attributes?: { [key: string]: string };
 };
 
 type HtmlOptions = BaseOptions & {
-    containerElement?: typeof ELEMENT_TYPE_HTML_BLOCK | typeof ELEMENT_TYPE_HTML_INLINE;
+    containerElement?: keyof HTMLElementTagNameMap;
 };
 
 type SvgOptions = BaseOptions & {
-    containerElement?: typeof ELEMENT_TYPE_SVG;
+    containerElement?: keyof SVGElementTagNameMap;
 };
 
 type Options = HtmlOptions | SvgOptions;
@@ -45,7 +42,7 @@ interface PortalNodeBase<C extends Component<any>> {
 }
 export interface HtmlPortalNode<C extends Component<any> = Component<any>> extends PortalNodeBase<C> {
     element: HTMLElement;
-    elementType: typeof ELEMENT_TYPE_HTML_BLOCK | typeof ELEMENT_TYPE_HTML_INLINE;
+    elementType: typeof ELEMENT_TYPE_HTML;
 }
 export interface SvgPortalNode<C extends Component<any> = Component<any>> extends PortalNodeBase<C> {
     element: SVGElement;
@@ -54,15 +51,14 @@ export interface SvgPortalNode<C extends Component<any> = Component<any>> extend
 type AnyPortalNode<C extends Component<any> = Component<any>> = HtmlPortalNode<C> | SvgPortalNode<C>;
 
 
-const validateElementType = (domElement: Element, elementType: ANY_ELEMENT_TYPE) => {
+const validateElementType = (domElement: Element, elementType: typeof ELEMENT_TYPE_HTML | typeof ELEMENT_TYPE_SVG) => {
     const ownerDocument = (domElement.ownerDocument ?? document) as any;
     // Cast document to `any` because Typescript doesn't know about the legacy `Document.parentWindow` field, and also
     // doesn't believe `Window.HTMLElement`/`Window.SVGElement` can be used in instanceof tests.
     const ownerWindow = ownerDocument.defaultView ?? ownerDocument.parentWindow ?? window; // `parentWindow` for IE8 and earlier
 
     switch (elementType) {
-        case ELEMENT_TYPE_HTML_BLOCK:
-        case ELEMENT_TYPE_HTML_INLINE:
+        case ELEMENT_TYPE_HTML:
             return domElement instanceof ownerWindow.HTMLElement;
         case ELEMENT_TYPE_SVG:
             return domElement instanceof ownerWindow.SVGElement;
@@ -73,10 +69,9 @@ const validateElementType = (domElement: Element, elementType: ANY_ELEMENT_TYPE)
 
 // This is the internal implementation: the public entry points set elementType to an appropriate value
 const createPortalNode = <C extends Component<any>>(
-    defaultElementType: ANY_ELEMENT_TYPE,
+    elementType: typeof ELEMENT_TYPE_HTML | typeof ELEMENT_TYPE_SVG,
     options?: Options
 ): AnyPortalNode<C> => {
-    const elementType = options?.containerElement ?? defaultElementType;
     let initialProps = {} as ComponentProps<C>;
 
     let parent: Node | undefined;
@@ -85,15 +80,14 @@ const createPortalNode = <C extends Component<any>>(
     let element;
 
     switch (elementType) {
-        case ELEMENT_TYPE_HTML_BLOCK:
-        case ELEMENT_TYPE_HTML_INLINE:
-            element = document.createElement(elementType);
+        case ELEMENT_TYPE_HTML:
+            element = document.createElement(options?.containerElement ?? 'div');
             break;
         case ELEMENT_TYPE_SVG:
-            element = document.createElementNS(SVG_NAMESPACE, 'g');
+            element = document.createElementNS(SVG_NAMESPACE, options?.containerElement ?? 'g');
             break;
         default:
-            throw new Error(`Invalid element type "${elementType}" for createPortalNode: must be "div", "span" or "svg".`);
+            throw new Error(`Invalid element type "${elementType}" for createPortalNode: must be "html" or "svg".`);
     }
 
     if (options && typeof options === "object" && options.attributes) {
@@ -256,14 +250,21 @@ class OutPortal<C extends Component<any>> extends React.PureComponent<OutPortalP
     render() {
         // Render a placeholder to the DOM, so we can get a reference into
         // our location in the DOM, and swap it out for the portaled node.
-        // A <span> placeholder:
-        // - prevents invalid HTML (e.g. inside <p>)
-        // - works fine even for SVG.
-        return <span ref={this.placeholderNode} />;
+        const tagName = this.props.node.element.tagName;
+
+        // SVG tagName is lowercase and case sensitive, HTML is uppercase and case insensitive.
+        // React.createElement expects lowercase first letter to treat as non-component element.
+        // (Passing uppercase type won't break anything, but React warns otherwise:)
+        // https://github.com/facebook/react/blob/8039f1b2a05d00437cd29707761aeae098c80adc/CHANGELOG.md?plain=1#L1984
+        const type = this.props.node.elementType === ELEMENT_TYPE_HTML
+            ? tagName.toLowerCase()
+            : tagName;
+
+        return React.createElement(type, { ref: this.placeholderNode });
     }
 }
 
-const createHtmlPortalNode = createPortalNode.bind(null, ELEMENT_TYPE_HTML_BLOCK) as
+const createHtmlPortalNode = createPortalNode.bind(null, ELEMENT_TYPE_HTML) as
     <C extends Component<any> = Component<any>>(options?: HtmlOptions) => HtmlPortalNode<C>;
 const createSvgPortalNode  = createPortalNode.bind(null, ELEMENT_TYPE_SVG) as
     <C extends Component<any> = Component<any>>(options?: SvgOptions) => SvgPortalNode<C>;

stories/html.stories.js

@@ -289,7 +289,7 @@ storiesOf('Portals', module)
             </div>
         });
     })
-    .add('can render inline portal', () => {
+    .add('portal container element as span in paragraph', () => {
         const portalNode = createHtmlPortalNode({ containerElement: 'span' });
 
         return <div>
@@ -306,6 +306,47 @@ storiesOf('Portals', module)
             </p>
         </div>;
     })
+    .add("portal container element as tr", () => {
+        const portalNode = createHtmlPortalNode({ containerElement: "tr" });
+
+        return React.createElement(() => {
+        const [useFirstTable, setUseFirstTable] = React.useState(true);
+
+        return (
+            <div>
+            <InPortal node={portalNode}>
+                <td>Cell 1</td>
+                <td>Cell 2</td>
+                <td>Cell 3</td>
+            </InPortal>
+
+            <button onClick={() => setUseFirstTable(!useFirstTable)}>
+                Move row to {useFirstTable ? "second" : "first"} table
+            </button>
+
+            <div style={{ display: "flex", gap: "20px", marginTop: "20px" }}>
+                <table border="1">
+                <thead>
+                    <tr>
+                    <th colSpan="3">First Table</th>
+                    </tr>
+                </thead>
+                <tbody>{useFirstTable && <OutPortal node={portalNode} />}</tbody>
+                </table>
+
+                <table border="1">
+                <thead>
+                    <tr>
+                    <th colSpan="3">Second Table</th>
+                    </tr>
+                </thead>
+                <tbody>{!useFirstTable && <OutPortal node={portalNode} />}</tbody>
+                </table>
+            </div>
+            </div>
+        );
+        });
+    })
     .add('Example from README', () => {
         const MyExpensiveComponent = () => 'expensive!';