[core] Enable innerRef on Backdrop, List, MenuList and Paper (#13722)

* [core] Add testRef test util

* [core] Add support for innerRef to critical components

This  enabled by using withStyles innerRef in conjunction with
forwardRef.

* [docs] Fix component definition not found for forwardRef component

* [core] Remove lint exception for named function callbacks

This was only needed for forwardRef but since displayName
support is not really ready yet we don't need it  anyway

* [core] Fix size limit build error

* [core] Fix next failing on React.forwardRef

* [core] Switch back to stable next

* [docs] Fix size limit

* [docs] use official react-docgen release

* [core] adjust size limit from last merge

package.json

@@ -154,7 +154,7 @@
     "raw-loader": "^0.5.1",
     "react": "^16.8.0-alpha.1",
     "react-autosuggest": "^9.3.2",
-    "react-docgen": "^3.0.0-beta10",
+    "react-docgen": "^3.0.0",
     "react-dom": "^16.8.0-alpha.1",
     "react-draggable": "^3.0.5",
     "react-final-form": "^4.0.2",

packages/material-ui/src/Backdrop/Backdrop.js

@@ -25,7 +25,7 @@ export const styles = {
   },
 };
 
-function Backdrop(props) {
+const Backdrop = React.forwardRef((props, ref) => {
   const { classes, className, invisible, open, transitionDuration, ...other } = props;
 
   return (
@@ -40,10 +40,13 @@ function Backdrop(props) {
           className,
         )}
         aria-hidden="true"
+        ref={ref}
       />
     </Fade>
   );
-}
+});
+
+Backdrop.displayName = 'Backdrop';
 
 Backdrop.propTypes = {
   /**

packages/material-ui/src/Backdrop/Backdrop.test.js

@@ -1,20 +1,30 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import { createMount, createShallow, getClasses, testRef } from '@material-ui/core/test-utils';
 import Backdrop from './Backdrop';
 
 describe('<Backdrop />', () => {
+  let mount;
   let shallow;
   let classes;
 
   before(() => {
+    mount = createMount();
     shallow = createShallow({ dive: true });
     classes = getClasses(<Backdrop open />);
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   it('should render a backdrop div', () => {
     const wrapper = shallow(<Backdrop open className="woofBackdrop" />);
     assert.strictEqual(wrapper.childAt(0).hasClass('woofBackdrop'), true);
     assert.strictEqual(wrapper.childAt(0).hasClass(classes.root), true);
   });
+
+  it('does forward refs', () => {
+    testRef(<Backdrop open />, mount);
+  });
 });

packages/material-ui/src/List/List.js

@@ -29,7 +29,7 @@ export const styles = {
   },
 };
 
-function List(props) {
+const List = React.forwardRef((props, ref) => {
   const {
     children,
     classes,
@@ -52,6 +52,7 @@ function List(props) {
         },
         className,
       )}
+      ref={ref}
       {...other}
     >
       <ListContext.Provider value={{ dense }}>
@@ -60,7 +61,9 @@ function List(props) {
       </ListContext.Provider>
     </Component>
   );
-}
+});
+
+List.displayName = 'List';
 
 List.propTypes = {
   /**

packages/material-ui/src/List/List.test.js

@@ -1,18 +1,24 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import { createMount, createShallow, getClasses, testRef } from '@material-ui/core/test-utils';
 import ListSubheader from '../ListSubheader';
 import List from './List';
 
 describe('<List />', () => {
+  let mount;
   let shallow;
   let classes;
 
   before(() => {
+    mount = createMount();
     shallow = createShallow({ dive: true });
     classes = getClasses(<List />);
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   it('should render a div', () => {
     const wrapper = shallow(<List component="div" />);
     assert.strictEqual(wrapper.name(), 'div');
@@ -40,6 +46,10 @@ describe('<List />', () => {
     );
   });
 
+  it('does forward refs', () => {
+    testRef(<List />, mount);
+  });
+
   describe('prop: subheader', () => {
     it('should render with subheader class', () => {
       const wrapper = shallow(<List subheader={<ListSubheader>Title</ListSubheader>} />);

packages/material-ui/src/MenuList/MenuList.test.js

@@ -1,15 +1,25 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow } from '@material-ui/core/test-utils';
+import { createMount, createShallow, testRef } from '@material-ui/core/test-utils';
 import MenuList from './MenuList';
 
 describe('<MenuList />', () => {
+  let mount;
   let shallow;
 
   before(() => {
+    mount = createMount();
     shallow = createShallow({ dive: true, disableLifecycleMethods: true });
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
+  it('does forward refs', () => {
+    testRef(<MenuList />, mount);
+  });
+
   describe('list node', () => {
     let wrapper;
 

packages/material-ui/src/Paper/Paper.js

@@ -26,7 +26,7 @@ export const styles = theme => {
   };
 };
 
-function Paper(props) {
+const Paper = React.forwardRef((props, ref) => {
   const {
     classes,
     className: classNameProp,
@@ -50,8 +50,10 @@ function Paper(props) {
     classNameProp,
   );
 
-  return <Component className={className} {...other} />;
-}
+  return <Component className={className} ref={ref} {...other} />;
+});
+
+Paper.displayName = 'Paper';
 
 Paper.propTypes = {
   /**

packages/material-ui/src/Paper/Paper.test.js

@@ -1,17 +1,23 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import { createMount, createShallow, getClasses, testRef } from '@material-ui/core/test-utils';
 import Paper from './Paper';
 
 describe('<Paper />', () => {
+  let mount;
   let shallow;
   let classes;
 
   before(() => {
+    mount = createMount();
     shallow = createShallow({ dive: true });
     classes = getClasses(<Paper />);
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   it('should render a div', () => {
     const wrapper = shallow(<Paper>Hello World</Paper>);
     assert.strictEqual(wrapper.name(), 'div');
@@ -49,6 +55,10 @@ describe('<Paper />', () => {
     );
   });
 
+  it('does forward refs', () => {
+    testRef(<Paper />, mount);
+  });
+
   describe('prop: component', () => {
     it('should render a header', () => {
       const wrapper = shallow(<Paper component="header">Hello World</Paper>);

packages/material-ui/src/test-utils/index.d.ts

@@ -3,4 +3,5 @@ export { default as createMount } from './createMount';
 export { default as createRender } from './createRender';
 export { default as findOutermostIntrinsic } from './findOutermostIntrinsic';
 export { default as getClasses } from './getClasses';
+export { default as testRef } from './testRef';
 export { default as unwrap } from './unwrap';

packages/material-ui/src/test-utils/index.js

@@ -3,4 +3,5 @@ export { default as createMount } from './createMount';
 export { default as createRender } from './createRender';
 export { default as findOutermostIntrinsic } from './findOutermostIntrinsic';
 export { default as getClasses } from './getClasses';
+export { default as testRef } from './testRef';
 export { default as unwrap } from './unwrap';

packages/material-ui/src/test-utils/testRef.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import createMount from './createMount';
+
+/**
+ * Utility method to make assertions about the ref on an element
+ * @param onRef - Make your assertions here
+ */
+export default function testRef<T>(
+  element: React.ReactElement<{ innerRef: React.RefObject<T> }>,
+  mount: ReturnType<typeof createMount>,
+  onRef: (ref: T) => void,
+): void;

packages/material-ui/src/test-utils/testRef.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { assert } from 'chai';
+
+function assertDOMNode(node) {
+  // duck typing a DOM node
+  assert.ok(node.nodeName);
+}
+
+/**
+ *
+ * @param {React.ReactElement} element - The element should have a component wrapped
+ *                                       in withStyles as the root
+ * @param {function} mount - Should be returnvalue of createMount
+ * @param {function} onRef - Callback, first arg is the ref.
+ *                           Assert that the ref is a DOM node by default
+ */
+export default function testRef(element, mount, onRef = assertDOMNode) {
+  const ref = React.createRef();
+  mount(<>{React.cloneElement(element, { innerRef: ref })}</>);
+  onRef(ref.current);
+}

yarn.lock

@@ -11580,10 +11580,10 @@ react-autowhatever@^10.1.2:
     react-themeable "^1.1.0"
     section-iterator "^2.0.0"
 
-react-docgen@^3.0.0-beta10:
-  version "3.0.0-rc.2"
-  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-3.0.0-rc.2.tgz#5939c64699fd9959da6d97d890f7b648e542dbcc"
-  integrity sha512-tXbIvq7Hxdc92jW570rztqsz0adtWEM5FX8bShJYozT2Y6L/LeHvBMQcED6mSqJ72niiNMPV8fi3S37OHrGMEw==
+react-docgen@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-3.0.0.tgz#79c6e1b1870480c3c2bc1a65bede0577a11c38cd"
+  integrity sha512-2UseoLWabFNXuk1Foz4VDPSIAkxz+1Hmmq4qijzUmYHDq0ZSloKDLXtGLpQRcAi/M76hRpPtH1rV4BI5jNAOnQ==
   dependencies:
     "@babel/parser" "^7.1.3"
     "@babel/runtime" "^7.0.0"