From f7d4cc35e1f9d6197465139a3e500b545c8d3441 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed, 3 Apr 2019 18:06:15 +0200
Subject: [PATCH] [Popover] Add warning when non-ref-holding component is used
 in Paper

---
 packages/material-ui/src/Popover/Popover.js      | 7 +++++--
 packages/material-ui/src/Popover/Popover.test.js | 9 +++++++++
 pages/api/popover.md                             | 2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js
index 96f17b86326b42..859a946a53bf72 100644
--- a/packages/material-ui/src/Popover/Popover.js
+++ b/packages/material-ui/src/Popover/Popover.js
@@ -7,7 +7,7 @@ import warning from 'warning';
 import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 import EventListener from 'react-event-listener';
 import clsx from 'clsx';
-import { chainPropTypes } from '@material-ui/utils';
+import { chainPropTypes, elementTypeAcceptingRef } from '@material-ui/utils';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import { createChainedFunction } from '../utils/helpers';
@@ -348,6 +348,7 @@ class Popover extends React.Component {
             data-mui-test="Popover"
             elevation={elevation}
             ref={ref => {
+              // #StrictMode ready
               this.paperRef = ReactDOM.findDOMNode(ref);
             }}
             {...PaperProps}
@@ -521,7 +522,9 @@ Popover.propTypes = {
   /**
    * Properties applied to the [`Paper`](/api/paper/) element.
    */
-  PaperProps: PropTypes.object,
+  PaperProps: PropTypes.shape({
+    component: elementTypeAcceptingRef,
+  }),
   /**
    * This is the point on the popover which
    * will attach to the anchor's origin.
diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js
index 34437881058d2c..d3091d03e0cabf 100644
--- a/packages/material-ui/src/Popover/Popover.test.js
+++ b/packages/material-ui/src/Popover/Popover.test.js
@@ -474,6 +474,15 @@ describe('<Popover />', () => {
       assert.include(consoleErrorMock.args()[0][0], 'It should be a HTMLElement instance');
     });
 
+    it('warns if a component for the Paper is used that cant hold a ref', () => {
+      mount(<Popover {...defaultProps} PaperProps={{ component: () => <div />, elevation: 4 }} />);
+      assert.strictEqual(consoleErrorMock.callCount(), 1);
+      assert.include(
+        consoleErrorMock.args()[0][0],
+        'Warning: Failed prop type: Invalid prop `PaperProps.component` supplied to `Popover`',
+      );
+    });
+
     // it('should warn if anchorEl is not visible', () => {
     //   mount(<Popover open anchorEl={document.createElement('div')} />);
     //   assert.strictEqual(consoleErrorMock.callCount(), 1);
diff --git a/pages/api/popover.md b/pages/api/popover.md
index ce5dc86990b0b8..49a52e4bd1609e 100644
--- a/pages/api/popover.md
+++ b/pages/api/popover.md
@@ -38,7 +38,7 @@ import Popover from '@material-ui/core/Popover';
 | <span class="prop-name">onExited</span> | <span class="prop-type">func</span> |  | Callback fired when the component has exited. |
 | <span class="prop-name">onExiting</span> | <span class="prop-type">func</span> |  | Callback fired when the component is exiting. |
 | <span class="prop-name required">open&nbsp;*</span> | <span class="prop-type">bool</span> |  | If `true`, the popover is visible. |
-| <span class="prop-name">PaperProps</span> | <span class="prop-type">object</span> |  | Properties applied to the [`Paper`](/api/paper/) element. |
+| <span class="prop-name">PaperProps</span> | <span class="prop-type">{ component?: element type }</span> |  | Properties applied to the [`Paper`](/api/paper/) element. |
 | <span class="prop-name">transformOrigin</span> | <span class="prop-type">{ horizontal: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br> }</span> | <span class="prop-default">{  vertical: 'top',  horizontal: 'left',}</span> | This is the point on the popover which will attach to the anchor's origin.<br>Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. |
 | <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br></span> | <span class="prop-default">'auto'</span> | Set to 'auto' to automatically calculate transition time based on height. |