[Popover] Should default to use anchorEl's parent body

.size-limit

@@ -7,7 +7,7 @@
   {
     "name": "The size of the whole library.",
     "path": "build/index.js",
-    "limit": "96.3 KB"
+    "limit": "96.5 KB"
   },
   {
     "name": "The main bundle of the documentation",

docs/src/pages/customization/themes.md

@@ -79,7 +79,7 @@ palette: {
 },
 ```
 
-This example illustrates how you could recreate the the default palette values:
+This example illustrates how you could recreate the default palette values:
 
 ```jsx
 import { createMuiTheme } from 'material-ui/styles';

pages/api/popover.md

@@ -19,6 +19,7 @@ filename: /src/Popover/Popover.js
 | anchorReference | enum:&nbsp;'anchorEl'&nbsp;&#124;<br>&nbsp;'anchorPosition'<br> | 'anchorEl' |  |
 | children | node |  | The content of the component. |
 | classes | object |  | Useful to extend the style applied to components. |
+| container | union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A node, component instance, or function that returns either. The `container` will passed to the Modal component. By default, it's using the body of the anchorEl's top-level document object, so it's simply `document.body` most of the time. |
 | elevation | number | 8 | The elevation of the popover. |
 | getContentAnchorEl | func |  | This function is called in order to retrieve the content anchor element. It's the opposite of the `anchorEl` property. The content anchor element should be an element inside the popover. It's used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element. |
 | marginThreshold | number | 16 | Specifies how close to the edge of the window the popover can appear. |

pages/api/portal.md

@@ -16,7 +16,7 @@ and take the control of our destiny.
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span style="color: #31a148">children *</span> | node |  | The children to render into the `container`. |
-| container | union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. By default, it's using the body of the the top-level document object, so it's simply `document.body` most of the time. |
+| container | union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. By default, it's using the body of the top-level document object, so it's simply `document.body` most of the time. |
 | onRendered | func |  | Callback fired once the children has been mounted into the `container`. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).

src/Input/Input.spec.js

@@ -95,7 +95,7 @@ describe('<Input />', () => {
     });
 
     // IE11 bug
-    it('should not respond the the focus event when disabled', () => {
+    it('should not respond the focus event when disabled', () => {
       const wrapper = shallow(<Input disabled />);
       const instance = wrapper.instance();
       const event = {

src/Popover/Popover.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import warning from 'warning';
 import contains from 'dom-helpers/query/contains';
+import ownerDocument from 'dom-helpers/ownerDocument';
 import debounce from 'lodash/debounce';
 import EventListener from 'react-event-listener';
 import withStyles from '../styles/withStyles';
@@ -247,6 +248,7 @@ class Popover extends React.Component {
       anchorReference,
       children,
       classes,
+      container: containerProp,
       elevation,
       getContentAnchorEl,
       marginThreshold,
@@ -266,15 +268,19 @@ class Popover extends React.Component {
       ...other
     } = this.props;
 
-    const transitionProps = {};
+    // If the container prop is provided, use that
+    // If the anchorEl prop is provided, use its parent body element as the container
+    // If neither are provided let the Modal take care of choosing the container
+    const container = containerProp || (anchorEl ? ownerDocument(anchorEl).body : undefined);
 
+    const transitionProps = {};
     // The provided transition might not support the auto timeout value.
     if (TransitionProp === Grow) {
       transitionProps.timeout = transitionDuration;
     }
 
     return (
-      <Modal open={open} BackdropProps={{ invisible: true }} {...other}>
+      <Modal container={container} open={open} BackdropProps={{ invisible: true }} {...other}>
         <TransitionProp
           appear
           in={open}
@@ -359,6 +365,13 @@ Popover.propTypes = {
    * Useful to extend the style applied to components.
    */
   classes: PropTypes.object.isRequired,
+  /**
+   * A node, component instance, or function that returns either.
+   * The `container` will passed to the Modal component.
+   * By default, it's using the body of the anchorEl's top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   /**
    * The elevation of the popover.
    */

src/Popover/Popover.spec.js

@@ -300,7 +300,7 @@ describe('<Popover />', () => {
     let expectPopover;
 
     before(() => {
-      openPopover = anchorOrigin => {
+      openPopover = (anchorOrigin, renderShallow) => {
         return new Promise(resolve => {
           if (!anchorEl) {
             anchorEl = window.document.createElement('div');
@@ -314,7 +314,8 @@ describe('<Popover />', () => {
             left: '100px',
           });
           window.document.body.appendChild(anchorEl);
-          wrapper = mount(
+
+          const component = (
             <Popover
               {...defaultProps}
               anchorEl={anchorEl}
@@ -326,9 +327,14 @@ describe('<Popover />', () => {
               }}
             >
               <div />
-            </Popover>,
+            </Popover>
           );
+          wrapper = renderShallow ? shallow(component) : mount(component);
           wrapper.setProps({ open: true });
+
+          if (renderShallow) {
+            resolve();
+          }
         });
       };
 
@@ -408,6 +414,44 @@ describe('<Popover />', () => {
         expectPopover(expectedTop, expectedLeft);
       });
     });
+
+    it('should pass through container prop if container and anchorEl props are provided', () => {
+      const container = {};
+      const shallowWrapper = shallow(<Popover container={container} open />);
+      assert.strictEqual(
+        shallowWrapper
+          .dive()
+          .find('Modal')
+          .props().container,
+        container,
+        'should pass through container prop if both container and anchorEl props are provided',
+      );
+    });
+
+    it("should use anchorEl's parent body as container if container prop not provided", () => {
+      return openPopover(undefined, true).then(() => {
+        assert.strictEqual(
+          wrapper
+            .dive()
+            .find('Modal')
+            .props().container,
+          window.document.body,
+          "should use anchorEl's parent body as Modal container",
+        );
+      });
+    });
+
+    it('should not pass container to Modal if container or anchorEl props are notprovided', () => {
+      const shallowWrapper = shallow(<Popover open />);
+      assert.strictEqual(
+        shallowWrapper
+          .dive()
+          .find('Modal')
+          .props().container,
+        undefined,
+        'should not pass a container prop if neither container or anchorEl are provided',
+      );
+    });
   });
 
   describe('positioning on a manual position', () => {

src/Portal/Portal.js

@@ -61,7 +61,7 @@ Portal.propTypes = {
   /**
    * A node, component instance, or function that returns either.
    * The `container` will have the portal children appended to it.
-   * By default, it's using the body of the the top-level document object,
+   * By default, it's using the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
   container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),