[EuiPortal] convert to a function component, fix ssr bug

src/components/popover/wrapping_popover.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
+import React, { FunctionComponent, useState, useEffect } from 'react';
 import { EuiPopover, Props as EuiPopoverProps } from './popover';
 import { EuiPortal } from '../portal';
 
@@ -19,50 +19,36 @@ export interface EuiWrappingPopoverProps extends EuiPopoverProps {
  * then the button element is moved into the popover dom.
  * On unmount, the button is moved back to its original location.
  */
-export class EuiWrappingPopover extends Component<EuiWrappingPopoverProps> {
-  private portal: HTMLElement | null = null;
-  private anchor: HTMLElement | null = null;
-
-  componentDidMount() {
-    if (this.anchor) {
-      this.anchor.insertAdjacentElement('beforebegin', this.props.button);
+export const EuiWrappingPopover: FunctionComponent<EuiWrappingPopoverProps> = ({
+  button,
+  ...rest
+}) => {
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const [portal, setPortal] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (anchor) {
+      // move the button into the popover DOM
+      anchor.insertAdjacentElement('beforebegin', button);
     }
-  }
 
-  componentWillUnmount() {
-    if (this.props.button.parentNode) {
-      if (this.portal) {
-        this.portal.insertAdjacentElement('beforebegin', this.props.button);
+    return () => {
+      if (portal) {
+        // move the button back out of the popover DOM
+        portal.insertAdjacentElement('beforebegin', button);
       }
-    }
-  }
-
-  setPortalRef = (node: HTMLElement | null) => {
-    this.portal = node;
-  };
-
-  setAnchorRef = (node: HTMLElement | null) => {
-    this.anchor = node;
-  };
-
-  render() {
-    const { button, ...rest } = this.props;
-
-    return (
-      <EuiPortal
-        portalRef={this.setPortalRef}
-        insert={{ sibling: this.props.button, position: 'after' }}
-      >
-        <EuiPopover
-          {...rest}
-          button={
-            <div
-              ref={this.setAnchorRef}
-              className="euiWrappingPopover__anchor"
-            />
-          }
-        />
-      </EuiPortal>
-    );
-  }
-}
+    };
+  }, [anchor, button, portal]);
+
+  return (
+    <EuiPortal
+      portalRef={setPortal}
+      insert={{ sibling: button, position: 'after' }}
+    >
+      <EuiPopover
+        {...rest}
+        button={<div ref={setAnchor} className="euiWrappingPopover__anchor" />}
+      />
+    </EuiPortal>
+  );
+};

src/components/portal/portal.tsx

@@ -48,17 +48,18 @@ export const EuiPortal: React.FC<EuiPortalProps> = ({
 }) => {
   const [portalNode, setPortalNode] = useState<HTMLDivElement | null>(null);
 
+  // pull `sibling` and `position` out of insert in case their wrapping object is recreated every render
+  const { sibling, position } = insert || {};
   useEffect(() => {
     const portalNode = document.createElement('div');
     portalNode.dataset.euiportal = 'true';
     setPortalNode(portalNode);
 
-    if (insert == null) {
+    if (sibling == null || position == null) {
       // no insertion defined, append to body
       document.body.appendChild(portalNode);
     } else {
       // inserting before or after an element
-      const { sibling, position } = insert;
       sibling.insertAdjacentElement(insertPositions[position], portalNode);
     }
 
@@ -67,7 +68,7 @@ export const EuiPortal: React.FC<EuiPortalProps> = ({
         portalNode.parentNode.removeChild(portalNode);
       }
     };
-  }, [insert]);
+  }, [sibling, position]);
 
   useUpdateEffect(() => {
     portalRef?.(portalNode);