From 7832ab658f9c9eb6734e696cc180575a072b32f6 Mon Sep 17 00:00:00 2001
From: Shawn Van Ittersum <svicalifornia@gmail.com>
Date: Fri, 29 Apr 2022 01:36:49 -0500
Subject: [PATCH] Add mountNode prop to Popup module

If a React app with SUIR is running in a hidden IFRAME and rendering
some or all of its virtual DOM to the parent frame or another frame,
then the Popup component should not insert popup elements into the
document.body of the React IFRAME, but instead should inject into the
frame containing the Popup trigger, or even into some other container
as may be more appropriate (due to size or layering concerns between
multiple frames).

Adding a `mountNode` prop to Popup allows developers to specify the
appropriate container for a displayed popup element in cases such as
the above example.
---
 src/modules/Popup/Popup.d.ts | 3 +++
 src/modules/Popup/Popup.js   | 9 +++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts
index 5e6e11d131..36016040af 100644
--- a/src/modules/Popup/Popup.d.ts
+++ b/src/modules/Popup/Popup.d.ts
@@ -57,6 +57,9 @@ export interface StrictPopupProps extends StrictPortalProps {
   /** Invert the colors of the popup */
   inverted?: boolean
 
+  /** The node where the popup should mount. Defaults to document.body. */
+  mountNode?: any
+
   /**
    * Offset values in px unit to apply to rendered popup. The basic offset accepts an
    * array with two numbers in the form [skidding, distance]:
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 4e5a405106..ac74e706f9 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -13,6 +13,7 @@ import {
   customPropTypes,
   getElementType,
   getUnhandledProps,
+  isBrowser,
   makeDebugger,
   SUI,
   useKeyOnly,
@@ -68,6 +69,9 @@ export default class Popup extends Component {
     clearTimeout(this.timeoutId)
   }
 
+  // Do not access document when server side rendering
+  getMountNode = () => (isBrowser() ? this.props.mountNode || document.body : null)
+
   getPortalProps = () => {
     debug('getPortalProps()')
     const portalProps = {}
@@ -231,6 +235,7 @@ export default class Popup extends Component {
       trigger,
     } = this.props
     const { closed, portalRestProps } = this.state
+    const mountNode = this.getMountNode()
 
     if (closed || disabled) {
       return trigger
@@ -285,6 +290,7 @@ export default class Popup extends Component {
     return (
       <Portal
         {...mergedPortalProps}
+        mountNode={mountNode}
         onClose={this.handleClose}
         onMount={this.handlePortalMount}
         onOpen={this.handleOpen}
@@ -349,6 +355,9 @@ Popup.propTypes = {
   /** Invert the colors of the Popup. */
   inverted: PropTypes.bool,
 
+  /** The node where the popup should mount. Defaults to document.body. */
+  mountNode: PropTypes.any,
+
   /**
    * Offset values in px unit to apply to rendered popup. The basic offset accepts an
    * array with two numbers in the form [skidding, distance]: