From fa9bfb0183e464c0592355f6734864332988c0d5 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 28 Jul 2020 10:28:56 +0200
Subject: [PATCH 1/3] [RootRef] Remove component

---
 .eslintrc.js                                  |  1 -
 docs/pages/api-docs/root-ref.js               | 15 ----
 docs/pages/api-docs/root-ref.md               | 63 --------------
 .../pages/guides/migration-v4/migration-v4.md | 12 +++
 packages/material-ui/src/RootRef/RootRef.d.ts | 52 -----------
 packages/material-ui/src/RootRef/RootRef.js   | 87 -------------------
 .../material-ui/src/RootRef/RootRef.test.js   | 77 ----------------
 packages/material-ui/src/RootRef/index.d.ts   |  2 -
 packages/material-ui/src/RootRef/index.js     |  1 -
 packages/material-ui/src/index.d.ts           |  3 -
 packages/material-ui/src/index.js             |  3 -
 11 files changed, 12 insertions(+), 304 deletions(-)
 delete mode 100644 docs/pages/api-docs/root-ref.js
 delete mode 100644 docs/pages/api-docs/root-ref.md
 delete mode 100644 packages/material-ui/src/RootRef/RootRef.d.ts
 delete mode 100644 packages/material-ui/src/RootRef/RootRef.js
 delete mode 100644 packages/material-ui/src/RootRef/RootRef.test.js
 delete mode 100644 packages/material-ui/src/RootRef/index.d.ts
 delete mode 100644 packages/material-ui/src/RootRef/index.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 320cbbcd6a492a..db0568c7ca7de2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -72,7 +72,6 @@ module.exports = {
     'react/no-array-index-key': 'off', // This rule is great for raising people awareness of what a key is and how it works.
     'react/no-danger': 'error',
     'react/no-direct-mutation-state': 'error',
-    'react/no-find-dom-node': 'off', // Required for backward compatibility. TODO v5, drop
     'react/require-default-props': 'off', // Not always relevant
     'react/sort-prop-types': 'error',
     // This depends entirely on what you're doing. There's no universal pattern
diff --git a/docs/pages/api-docs/root-ref.js b/docs/pages/api-docs/root-ref.js
deleted file mode 100644
index 191416ac953e93..00000000000000
--- a/docs/pages/api-docs/root-ref.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
-
-const pageFilename = 'api/root-ref';
-const requireRaw = require.context('!raw-loader!./', false, /\/root-ref\.md$/);
-
-export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
-}
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/api-docs/root-ref.md b/docs/pages/api-docs/root-ref.md
deleted file mode 100644
index bbb3aea0e03bc4..00000000000000
--- a/docs/pages/api-docs/root-ref.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-filename: /packages/material-ui/src/RootRef/RootRef.js
----
-
-<!--- This documentation is automatically generated, do not try to edit it. -->
-
-# RootRef API
-
-<p class="description">The API documentation of the RootRef React component. Learn more about the props and the CSS customization points.</p>
-
-## Import
-
-```js
-import RootRef from '@material-ui/core/RootRef';
-// or
-import { RootRef } from '@material-ui/core';
-```
-
-You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
-
-⚠️⚠️⚠️
-If you want the DOM element of a Material-UI component check out
-[FAQ: How can I access the DOM element?](/getting-started/faq/#how-can-i-access-the-dom-element)
-first.
-
-This component uses `findDOMNode` which is deprecated in React.StrictMode.
-
-Helper component to allow attaching a ref to a
-wrapped element to access the underlying DOM element.
-
-It's highly inspired by https://github.com/facebook/react/issues/11401#issuecomment-340543801.
-For example:
-```jsx
-import React from 'react';
-import RootRef from '@material-ui/core/RootRef';
-
-function MyComponent() {
-  const domRef = React.useRef();
-
-  React.useEffect(() => {
-    console.log(domRef.current); // DOM node
-  }, []);
-
-  return (
-    <RootRef rootRef={domRef}>
-      <SomeChildComponent />
-    </RootRef>
-  );
-}
-```
-
-
-
-## Props
-
-| Name | Type | Default | Description |
-|:-----|:-----|:--------|:------------|
-| <span class="prop-name required">children<abbr title="required">*</abbr></span> | <span class="prop-type">element</span> |  | The wrapped element. |
-| <span class="prop-name required">rootRef<abbr title="required">*</abbr></span> | <span class="prop-type">refType.isRequired</span> |  | A ref that points to the first DOM node of the wrapped element. |
-
-The component cannot hold a ref.
-
-
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index da9a714324b48d..50a26c0f099a6c 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -110,6 +110,18 @@ This change affects almost all components where you're using the `component` pro
   />
   ```
 
+### RootRef
+
+- This component was removed.
+  You can get a reference to the underlying DOM node of our components via `ref` prop.
+
+  ```diff
+  -<RootRef rootRef={ref}>
+  -  <Button />
+  +<Button ref={ref} />
+  -</RootRef>
+  ```
+
 ### Slider
 
 - typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
diff --git a/packages/material-ui/src/RootRef/RootRef.d.ts b/packages/material-ui/src/RootRef/RootRef.d.ts
deleted file mode 100644
index 58562fec86c536..00000000000000
--- a/packages/material-ui/src/RootRef/RootRef.d.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react';
-
-export interface RootRefProps<T = any> {
-  /**
-   * The wrapped element.
-   */
-  children: React.ReactElement;
-  /**
-   * A ref that points to the first DOM node of the wrapped element.
-   */
-  rootRef?: ((instance: T | null) => void) | React.RefObject<T>;
-}
-
-/**
- * ⚠️⚠️⚠️
- * If you want the DOM element of a Material-UI component check out
- * [FAQ: How can I access the DOM element?](https://material-ui.com/getting-started/faq/#how-can-i-access-the-dom-element)
- * first.
- *
- * This component uses `findDOMNode` which is deprecated in React.StrictMode.
- *
- * Helper component to allow attaching a ref to a
- * wrapped element to access the underlying DOM element.
- *
- * It's highly inspired by <https://github.com/facebook/react/issues/11401#issuecomment-340543801>.
- * For example:
- *
- * ```jsx
- * import React from 'react';
- * import RootRef from '@material-ui/core/RootRef';
- *
- * function MyComponent() {
- *   const domRef = React.useRef();
- *
- *   React.useEffect(() => {
- *     console.log(domRef.current); // DOM node
- *   }, []);
- *
- *   return (
- *     <RootRef rootRef={domRef}>
- *       <SomeChildComponent />
- *     </RootRef>
- *   );
- * }
- * ```
- * API:
- *
- * - [RootRef API](https://material-ui.com/api/root-ref/)
- */
-declare const RootRef: React.ComponentType<RootRefProps>;
-
-export default RootRef;
diff --git a/packages/material-ui/src/RootRef/RootRef.js b/packages/material-ui/src/RootRef/RootRef.js
deleted file mode 100644
index 224d13b37defcc..00000000000000
--- a/packages/material-ui/src/RootRef/RootRef.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import { exactProp, refType } from '@material-ui/utils';
-import setRef from '../utils/setRef';
-
-/**
- * ⚠️⚠️⚠️
- * If you want the DOM element of a Material-UI component check out
- * [FAQ: How can I access the DOM element?](/getting-started/faq/#how-can-i-access-the-dom-element)
- * first.
- *
- * This component uses `findDOMNode` which is deprecated in React.StrictMode.
- *
- * Helper component to allow attaching a ref to a
- * wrapped element to access the underlying DOM element.
- *
- * It's highly inspired by https://github.com/facebook/react/issues/11401#issuecomment-340543801.
- * For example:
- * ```jsx
- * import React from 'react';
- * import RootRef from '@material-ui/core/RootRef';
- *
- * function MyComponent() {
- *   const domRef = React.useRef();
- *
- *   React.useEffect(() => {
- *     console.log(domRef.current); // DOM node
- *   }, []);
- *
- *   return (
- *     <RootRef rootRef={domRef}>
- *       <SomeChildComponent />
- *     </RootRef>
- *   );
- * }
- * ```
- */
-class RootRef extends React.Component {
-  componentDidMount() {
-    this.ref = ReactDOM.findDOMNode(this);
-    setRef(this.props.rootRef, this.ref);
-  }
-
-  componentDidUpdate(prevProps) {
-    const ref = ReactDOM.findDOMNode(this);
-
-    if (prevProps.rootRef !== this.props.rootRef || this.ref !== ref) {
-      if (prevProps.rootRef !== this.props.rootRef) {
-        setRef(prevProps.rootRef, null);
-      }
-
-      this.ref = ref;
-      setRef(this.props.rootRef, this.ref);
-    }
-  }
-
-  componentWillUnmount() {
-    this.ref = null;
-    setRef(this.props.rootRef, null);
-  }
-
-  render() {
-    return this.props.children;
-  }
-}
-
-RootRef.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The wrapped element.
-   */
-  children: PropTypes.element.isRequired,
-  /**
-   * A ref that points to the first DOM node of the wrapped element.
-   */
-  rootRef: refType.isRequired,
-};
-
-if (process.env.NODE_ENV !== 'production') {
-  RootRef.propTypes = exactProp(RootRef.propTypes);
-}
-
-export default RootRef;
diff --git a/packages/material-ui/src/RootRef/RootRef.test.js b/packages/material-ui/src/RootRef/RootRef.test.js
deleted file mode 100644
index 77d03d90ae3762..00000000000000
--- a/packages/material-ui/src/RootRef/RootRef.test.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { expect } from 'chai';
-import { spy } from 'sinon';
-import { createMount } from 'test/utils';
-import RootRef from './RootRef';
-
-const Fn = () => <div />;
-
-describe('<RootRef />', () => {
-  // StrictModeViolation: uses findDOMNode
-  const mount = createMount({ strict: false });
-
-  it('call rootRef function on mount and unmount', () => {
-    const rootRef = spy();
-    const wrapper = mount(
-      <RootRef rootRef={rootRef}>
-        <Fn />
-      </RootRef>,
-    );
-    expect(rootRef.args.length).to.equal(1);
-    expect(rootRef.args[0][0] instanceof window.HTMLDivElement).to.equal(true);
-    wrapper.unmount();
-    expect(rootRef.args.length).to.equal(2);
-    expect(rootRef.args[1][0]).to.equal(null);
-  });
-
-  it('set rootRef current field on mount and unmount', () => {
-    const ref = React.createRef();
-    const wrapper = mount(
-      <RootRef rootRef={ref}>
-        <Fn />
-      </RootRef>,
-    );
-    expect(ref.current instanceof window.HTMLDivElement).to.equal(true);
-    wrapper.unmount();
-    expect(ref.current).to.equal(null);
-  });
-
-  it('should support providing a new rootRef', () => {
-    const results = [];
-    const wrapper = mount(
-      <RootRef rootRef={(ref) => results.push(ref)}>
-        <Fn />
-      </RootRef>,
-    );
-    expect(results.length).to.equal(1);
-    expect(results[0] instanceof window.HTMLDivElement).to.equal(true);
-    wrapper.setProps({
-      rootRef: (ref) => results.push(ref),
-    });
-    expect(results.length).to.equal(3);
-    expect(results[1]).to.equal(null);
-    expect(results[2] instanceof window.HTMLDivElement).to.equal(true);
-    wrapper.unmount();
-    expect(results.length).to.equal(4);
-    expect(results[3]).to.equal(null);
-  });
-
-  it('should support DOM node updates', () => {
-    const rootRef = spy();
-    function TestCase(props) {
-      const { on } = props;
-      return <RootRef rootRef={rootRef}>{on ? <div /> : <span />}</RootRef>;
-    }
-
-    TestCase.propTypes = {
-      on: PropTypes.bool.isRequired,
-    };
-
-    const wrapper = mount(<TestCase on={false} />);
-    wrapper.setProps({ on: true });
-    expect(rootRef.callCount).to.equal(2);
-    expect(rootRef.args[0][0].nodeName).to.equal('SPAN');
-    expect(rootRef.args[1][0].nodeName).to.equal('DIV');
-  });
-});
diff --git a/packages/material-ui/src/RootRef/index.d.ts b/packages/material-ui/src/RootRef/index.d.ts
deleted file mode 100644
index c9c81d30b8b7ee..00000000000000
--- a/packages/material-ui/src/RootRef/index.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './RootRef';
-export * from './RootRef';
diff --git a/packages/material-ui/src/RootRef/index.js b/packages/material-ui/src/RootRef/index.js
deleted file mode 100644
index 97f34c7209e578..00000000000000
--- a/packages/material-ui/src/RootRef/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './RootRef';
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index b0187de85147df..33ddeb361751e6 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/packages/material-ui/src/index.d.ts
@@ -294,9 +294,6 @@ export * from './Radio';
 export { default as RadioGroup } from './RadioGroup';
 export * from './RadioGroup';
 
-export { default as RootRef } from './RootRef';
-export * from './RootRef';
-
 export { default as ScopedCssBaseline } from './ScopedCssBaseline';
 export * from './ScopedCssBaseline';
 
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index 35fe7eab610e99..7a73635df11569 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -240,9 +240,6 @@ export * from './Radio';
 export { default as RadioGroup } from './RadioGroup';
 export * from './RadioGroup';
 
-export { default as RootRef } from './RootRef';
-export * from './RootRef';
-
 export { default as ScopedCssBaseline } from './ScopedCssBaseline';
 export * from './ScopedCssBaseline';
 

From 1eca6f241a566eb730d1eaf3a11632c9463af38d Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 28 Jul 2020 18:10:08 +0200
Subject: [PATCH 2/3] Update docs/src/pages/guides/migration-v4/migration-v4.md

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 docs/src/pages/guides/migration-v4/migration-v4.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index 50a26c0f099a6c..9b3ddc58402ee7 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -118,8 +118,8 @@ This change affects almost all components where you're using the `component` pro
   ```diff
   -<RootRef rootRef={ref}>
   -  <Button />
-  +<Button ref={ref} />
   -</RootRef>
+  +<Button ref={ref} />
   ```
 
 ### Slider

From 28403b397eef1982c695335b9c6cefb7defd48ef Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed, 29 Jul 2020 19:11:50 +0200
Subject: [PATCH 3/3] Explain removal

---
 docs/src/pages/guides/migration-v4/migration-v4.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index 9b3ddc58402ee7..9c7a475aa29a95 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -114,6 +114,7 @@ This change affects almost all components where you're using the `component` pro
 
 - This component was removed.
   You can get a reference to the underlying DOM node of our components via `ref` prop.
+  The component relied on [`ReactDOM.findDOMNode`](https://reactjs.org/docs/react-dom.html#finddomnode) which is [deprecated in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
 
   ```diff
   -<RootRef rootRef={ref}>