[v4] Removed all usage of findDOMNode

UNRELEASED-V4.md

@@ -45,6 +45,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Code quality
 
 - Added hooks to storybooks scope ([#1672](https://github.com/Shopify/polaris-react/pull/1672))
+- Removed all uses of `ReactDOM.findDOMNode` ([#1696](https://github.com/Shopify/polaris-react/pull/1696))
 - Simplified `WithinContentContainer` context type ([#1602](https://github.com/Shopify/polaris-react/pull/1602))
 - Updated `Collapsible` to no longer use `componentWillReceiveProps`([#1670](https://github.com/Shopify/polaris-react/pull/1670))
 - Remove `withRef` and `withContext` from `DropZone.FileUpload` ([#1491](https://github.com/Shopify/polaris-react/pull/1491))

src/components/Focus/Focus.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import {findDOMNode} from 'react-dom';
 import isEqual from 'lodash/isEqual';
 import {focusFirstFocusableNode} from '@shopify/javascript-utilities/focus';
 
 export interface Props {
   children?: React.ReactNode;
   disabled?: boolean;
+  root: HTMLElement | null;
 }
 
 export default class Focus extends React.PureComponent<Props, never> {
@@ -24,11 +24,11 @@ export default class Focus extends React.PureComponent<Props, never> {
   }
 
   handleSelfFocus() {
-    if (this.props.disabled) {
+    const {disabled, root} = this.props;
+    if (disabled) {
       return;
     }
 
-    const root = findDOMNode(this) as HTMLElement | null;
     if (root) {
       if (!root.querySelector('[autofocus]')) {
         focusFirstFocusableNode(root, false);

src/components/Focus/tests/Focus.test.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {useRef, useState, useEffect} from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Focus from '../Focus';
+import Focus, {Props} from '../Focus';
+import {Discard} from '../../../types';
 
 describe('<Focus />', () => {
   let requestAnimationFrameSpy: jest.SpyInstance;
@@ -15,34 +16,26 @@ describe('<Focus />', () => {
   });
 
   it('mounts', () => {
-    const focus = mountWithAppProvider(
-      <Focus>
-        <div />
-      </Focus>,
-    );
+    const focus = mountWithAppProvider(<FocusTestWrapper />);
 
     expect(focus.exists()).toBe(true);
   });
 
   it('will not focus any element if none are natively focusable', () => {
     mountWithAppProvider(
-      <Focus>
-        <div>
-          <span />
-        </div>
-      </Focus>,
+      <FocusTestWrapper>
+        <span />
+      </FocusTestWrapper>,
     );
 
     expect(document.body).toBe(document.activeElement);
   });
 
   it('will focus first focusable node', () => {
     const focus = mountWithAppProvider(
-      <Focus>
-        <div>
-          <input />
-        </div>
-      </Focus>,
+      <FocusTestWrapper>
+        <input />
+      </FocusTestWrapper>,
     );
 
     const input = focus.find('input').getDOMNode();
@@ -51,14 +44,27 @@ describe('<Focus />', () => {
 
   it('will not focus the first focusable node is the `disabled` is true', () => {
     const focus = mountWithAppProvider(
-      <Focus disabled>
-        <div>
-          <input />
-        </div>
-      </Focus>,
+      <FocusTestWrapper disabled>
+        <input />
+      </FocusTestWrapper>,
     );
 
     const input = focus.find('input').getDOMNode();
     expect(input).not.toBe(document.activeElement);
   });
 });
+
+function FocusTestWrapper({children, ...props}: Discard<Props, 'root'>) {
+  const root = useRef<HTMLDivElement>(null);
+  const [, setMount] = useState(false);
+
+  useEffect(() => {
+    setMount(true);
+  }, []);
+
+  return (
+    <Focus {...props} root={root.current}>
+      <div ref={root}>{children}</div>
+    </Focus>
+  );
+}

src/components/ResourceList/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import {findDOMNode} from 'react-dom';
+import React, {createRef} from 'react';
 import {CaretDownMinor} from '@shopify/polaris-icons';
 
 import {classNames} from '../../../../../../utilities/css';
@@ -20,14 +19,13 @@ export default class BulkActionButton extends React.PureComponent<
   Props,
   never
 > {
+  private bulkActionButton = createRef<HTMLButtonElement>();
+
   componentDidMount() {
     const {handleMeasurement} = this.props;
     if (handleMeasurement) {
-      const bulkActionButtonNode = findDOMNode(this);
-      const width =
-        (bulkActionButtonNode instanceof Element &&
-          bulkActionButtonNode.getBoundingClientRect().width) ||
-        0;
+      const width = (this.bulkActionButton
+        .current as HTMLButtonElement).getBoundingClientRect().width;
       handleMeasurement(width);
     }
   }
@@ -82,6 +80,7 @@ export default class BulkActionButton extends React.PureComponent<
         aria-label={accessibilityLabel}
         type="button"
         disabled={disabled}
+        ref={this.bulkActionButton}
       >
         {contentMarkup}
       </button>

src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {findDOMNode} from 'react-dom';
 import {classNames} from '../../../../utilities/css';
 import EventListener from '../../../EventListener';
 
@@ -89,9 +88,9 @@ export default class TabMeasurer extends React.PureComponent<Props, never> {
 
     const {handleMeasurement} = this.props;
     const containerWidth = this.containerNode.offsetWidth;
-    const tabMeasurerNode = findDOMNode(this);
+
     const hiddenTabNodes =
-      tabMeasurerNode instanceof Element && tabMeasurerNode.children;
+      this.containerNode instanceof Element && this.containerNode.children;
     const hiddenTabNodesArray: HTMLElement[] = [].slice.call(hiddenTabNodes);
     const hiddenTabWidths = hiddenTabNodesArray.map((node) => {
       return node.getBoundingClientRect().width;

src/components/TrapFocus/TrapFocus.tsx

@@ -43,7 +43,7 @@ export default class TrapFocus extends React.PureComponent<Props, State> {
     const {children} = this.props;
 
     return (
-      <Focus disabled={this.shouldDisable}>
+      <Focus disabled={this.shouldDisable} root={this.focusTrapWrapper}>
         <div ref={this.setFocusTrapWrapper}>
           <EventListener event="focusout" handler={this.handleBlur} />
           {children}

src/types.ts

@@ -258,3 +258,5 @@ export type DeepPartial<T> = {
       ? ReadonlyArray<DeepPartial<U>>
       : DeepPartial<T[P]>
 };
+
+export type Discard<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;