[core] Remove RootRef usage

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

@@ -48,7 +48,7 @@ describe('<Dialog />', () => {
   );
 
   it('should render a Modal with TransitionComponent', () => {
-    const Transition = () => <div tabIndex={-1} />;
+    const Transition = React.forwardRef(() => <div tabIndex={-1} />);
     const wrapper = mount(
       <Dialog {...defaultProps} open TransitionComponent={Transition}>
         foo

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

@@ -6,6 +6,7 @@ import { Transition } from 'react-transition-group';
 import { duration } from '../styles/transitions';
 import withTheme from '../styles/withTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
+import { useForkRef } from '../utils/reactHelpers';
 
 const styles = {
   entering: {
@@ -20,8 +21,9 @@ const styles = {
  * The Fade transition is used by the [Modal](/utils/modal/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
-function Fade(props) {
+const Fade = React.forwardRef(function Fade(props, ref) {
   const { children, in: inProp, onEnter, onExit, style, theme, ...other } = props;
+  const handleRef = useForkRef(children.ref, ref);
 
   const handleEnter = node => {
     reflow(node); // So the animation always start from the start.
@@ -60,12 +62,13 @@ function Fade(props) {
             ...style,
             ...children.props.style,
           },
+          ref: handleRef,
           ...childProps,
         });
       }}
     </Transition>
   );
-}
+});
 
 Fade.propTypes = {
   /**

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

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import withTheme from '../styles/withTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
+import { useForkRef } from '../utils/reactHelpers';
 
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
@@ -27,10 +28,11 @@ const styles = {
  * [Popover](/utils/popover/) components.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
-function Grow(props) {
+const Grow = React.forwardRef(function Grow(props, ref) {
   const { children, in: inProp, onEnter, onExit, style, theme, timeout, ...other } = props;
   const timer = React.useRef();
   const autoTimeout = React.useRef();
+  const handleRef = useForkRef(children.ref, ref);
 
   const handleEnter = node => {
     reflow(node); // So the animation always start from the start.
@@ -126,12 +128,13 @@ function Grow(props) {
             ...style,
             ...children.props.style,
           },
+          ref: handleRef,
           ...childProps,
         });
       }}
     </Transition>
   );
-}
+});
 
 Grow.propTypes = {
   /**

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

@@ -519,7 +519,7 @@ describe('<Modal />', () => {
     });
 
     it('should warn if the modal content is not focusable', () => {
-      const Dialog = () => <div />;
+      const Dialog = React.forwardRef((_, ref) => <div ref={ref} />);
 
       wrapper = mount(
         <Modal open>

packages/material-ui/src/Modal/TrapFocus.js

@@ -1,25 +1,32 @@
 /* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import warning from 'warning';
-import RootRef from '../RootRef';
 import ownerDocument from '../utils/ownerDocument';
+import { useForkRef } from '../utils/reactHelpers';
 
 function TrapFocus(props) {
   const {
+    children,
     disableAutoFocus,
     disableEnforceFocus,
     disableRestoreFocus,
     getDoc,
     isEnabled,
     open,
   } = props;
-  const rootRef = React.useRef();
   const ignoreNextEnforceFocus = React.useRef();
   const sentinelStart = React.useRef();
   const sentinelEnd = React.useRef();
   const lastFocus = React.useRef();
+  const rootRef = React.useRef();
+  // can be removed once we drop support for non ref forwarding class components
+  const handleOwnRef = React.useCallback(ref => {
+    rootRef.current = ReactDOM.findDOMNode(ref);
+  }, []);
+  const handleRef = useForkRef(children.ref, handleOwnRef);
 
   // ⚠️ You may rely on React.useMemo as a performance optimization, not as a semantic guarantee.
   // https://reactjs.org/docs/hooks-reference.html#usememo
@@ -61,7 +68,7 @@ function TrapFocus(props) {
         return;
       }
 
-      if (!rootRef.current.contains(doc.activeElement)) {
+      if (rootRef.current && !rootRef.current.contains(doc.activeElement)) {
         rootRef.current.focus();
       }
     };
@@ -109,7 +116,7 @@ function TrapFocus(props) {
   return (
     <React.Fragment>
       <div tabIndex={0} ref={sentinelStart} data-test="sentinelStart" />
-      <RootRef rootRef={rootRef}>{props.children}</RootRef>
+      {React.cloneElement(children, { ref: handleRef })}
       <div tabIndex={0} ref={sentinelEnd} data-test="sentinelEnd" />
     </React.Fragment>
   );