Repository: react-materialize/react-materialize (js)

Issue:
Modal 3.7.x break in Next.js
### Description

Since Next.js is SSR, it will not recognize the document

Need to modify this line 34 on Modal.js

```var MODAL_CONTAINER = document.body;```

into 

```var MODAL_CONTAINER = (typeof window !== 'undefined')  ? document.body : null;```

I know, the modal might not work in Next.js anyway, but I still can use the rest of components in react-materialize without breaking.

Pull request:
Modal document fix
Fixes #1085 

Patch:
diff --git a/.eslintrc b/.eslintrc
index 6837a14..4e8aec8 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -19,6 +19,7 @@ globals:
   global: true
   window: true
   module: true
+  Element: true
 
 plugins: ['prettier', 'react-hooks']
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3674270..d2e453f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+### 3.8.0
+
+- Modal: new interface prop `root` to fix SSR
+
 ### 3.7.1
 
 - Storybook: fix proptypes description in docs
diff --git a/package-lock.json b/package-lock.json
index 5100d0f..67a0080 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-materialize",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index bd64f5f..87f7db8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-materialize",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "Material design components for react",
   "main": "./lib/index.js",
   "files": [
diff --git a/src/Modal.js b/src/Modal.js
index 3198921..856184c 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -12,8 +12,6 @@ import cx from 'classnames';
 import idgen from './idgen';
 import Button from './Button';
 
-const MODAL_CONTAINER = document.body;
-
 const Modal = ({
   actions,
   bottomSheet,
@@ -24,6 +22,7 @@ const Modal = ({
   trigger,
   options,
   open,
+  root,
   ...props
 }) => {
   const _modal = useRef(null);
@@ -36,10 +35,10 @@ const Modal = ({
 
     return () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      MODAL_CONTAINER.removeChild(_modalRoot.current);
+      root.removeChild(_modalRoot.current);
       _modalInstance.current && _modalInstance.current.destroy();
     };
-  }, [options, currentRoot]);
+  }, [options, currentRoot, root]);
 
   useEffect(() => {
     if (open) {
@@ -63,7 +62,7 @@ const Modal = ({
 
   const renderModalPortal = () => {
     _modalRoot.current = document.createElement('div');
-    MODAL_CONTAINER.appendChild(_modalRoot.current);
+    root.appendChild(_modalRoot.current);
     const classes = cx(
       'modal',
       {
@@ -186,11 +185,17 @@ Modal.propTypes = {
   /**
    * The ID to trigger the modal opening/closing
    */
-  id: PropTypes.string
+  id: PropTypes.string,
+  /**
+   * Root node where modal should be injected
+   * @default document.body
+   */
+  root: PropTypes.oneOfType([PropTypes.node, PropTypes.instanceOf(Element)])
 };
 
 Modal.defaultProps = {
   id: `Modal-${idgen()}`,
+  root: document.body,
   open: false,
   options: {
     opacity: 0.5,


Test patch:
diff --git a/test/__snapshots__/Modal.spec.js.snap b/test/__snapshots__/Modal.spec.js.snap
index df1ba2f..d5273df 100644
--- a/test/__snapshots__/Modal.spec.js.snap
+++ b/test/__snapshots__/Modal.spec.js.snap
@@ -25,6 +25,59 @@ exports[`<Modal /> renders a modal has children 1`] = `
       "opacity": 0.4,
     }
   }
+  root={
+    <body>
+      <div>
+        <div
+          class="modal"
+          id="Modal-mockId"
+        >
+          <div
+            class="modal-content"
+          >
+            <h4 />
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <button
+              class="waves-effect waves-green btn-flat modal-close"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="modal"
+          id="Modal-mockId"
+        >
+          <div
+            class="modal-content"
+          >
+            <h4>
+              Modal header
+            </h4>
+            <div>
+              <h1>
+                Hello
+              </h1>
+            </div>
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <button
+              class="waves-effect waves-green btn-flat modal-close"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </body>
+  }
   trigger={
     <button>
       click
@@ -131,6 +184,142 @@ exports[`<Modal /> renders a trigger renders 1`] = `
       "opacity": 0.4,
     }
   }
+  root={
+    <body>
+      <div>
+        <div
+          class="modal"
+          id="Modal-mockId"
+        >
+          <div
+            class="modal-content"
+          >
+            <h4 />
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <button
+              class="waves-effect waves-green btn-flat modal-close"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="modal"
+          id="Modal-mockId"
+        >
+          <div
+            class="modal-content"
+          >
+            <h4>
+              Modal header
+            </h4>
+            <div>
+              <h1>
+                Hello
+              </h1>
+            </div>
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <button
+              class="waves-effect waves-green btn-flat modal-close"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="modal"
+          id="Modal-mockId"
+        >
+          <div
+            class="modal-content"
+          >
+            <h4>
+              Modal header
+            </h4>
+            <div>
+              <h1>
+                Hello
+              </h1>
+            </div>
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <button
+              class="waves-effect waves-green btn-flat modal-close"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="modal"
+          id="Modal-mockId"
+        >
+          <div
+            class="modal-content"
+          >
+            <h4 />
+            <div>
+              <h1>
+                Hello
+              </h1>
+            </div>
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <button
+              class="waves-effect waves-green btn-flat modal-close"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+      <div />
+      <div>
+        <div
+          class="modal"
+          id="Modal-mockId"
+        >
+          <div
+            class="modal-content"
+          >
+            <h4>
+              Modal header
+            </h4>
+            <div>
+              <h1>
+                Hello
+              </h1>
+            </div>
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <button
+              class="waves-effect waves-green btn-flat modal-close"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </body>
+  }
   trigger={
     <button>
       click
@@ -236,6 +425,113 @@ exports[`<Modal /> without a trigger renders 1`] = `
       "opacity": 0.4,
     }
   }
+  root={
+    <body>
+      <div>
+        <div
+          class="modal"
+          id="Modal-mockId"
+        >
+          <div
+            class="modal-content"
+          >
+            <h4 />
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <button
+              class="waves-effect waves-green btn-flat modal-close"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="modal"
+          id="Modal-mockId"
+        >
+          <div
+            class="modal-content"
+          >
+            <h4>
+              Modal header
+            </h4>
+            <div>
+              <h1>
+                Hello
+              </h1>
+            </div>
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <button
+              class="waves-effect waves-green btn-flat modal-close"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="modal"
+          id="Modal-mockId"
+        >
+          <div
+            class="modal-content"
+          >
+            <h4>
+              Modal header
+            </h4>
+            <div>
+              <h1>
+                Hello
+              </h1>
+            </div>
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <button
+              class="waves-effect waves-green btn-flat modal-close"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="modal"
+          id="Modal-mockId"
+        >
+          <div
+            class="modal-content"
+          >
+            <h4 />
+            <div>
+              <h1>
+                Hello
+              </h1>
+            </div>
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <button
+              class="waves-effect waves-green btn-flat modal-close"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </body>
+  }
 >
   <Portal
     containerInfo={