Refactor more findDOMNodes (#1925)

## Summary:
More removal of findDOMNode which is deprecated

Author: handeyeco

Reviewers: jeremywiebe

Required Reviewers:

Approved By: jeremywiebe

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald, ✅ .github/dependabot.yml

Pull Request URL: #1925

.changeset/strong-rocks-beg.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Remove some uses of findDOMNode

packages/perseus/src/components/graph.tsx

@@ -3,7 +3,6 @@
 import {vector as kvector} from "@khanacademy/kmath";
 import $ from "jquery";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import AssetContext from "../asset-context";
@@ -83,6 +82,8 @@ type DefaultProps = {
 };
 
 class Graph extends React.Component<Props> {
+    graphieDivRef = React.createRef<HTMLDivElement>();
+
     protractor: any;
     ruler: any;
     _graphie: any;
@@ -187,8 +188,7 @@ class Graph extends React.Component<Props> {
             return;
         }
 
-        // eslint-disable-next-line react/no-string-refs
-        const graphieDiv = ReactDOM.findDOMNode(this.refs.graphieDiv);
+        const graphieDiv = this.graphieDivRef.current;
         // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
         $(graphieDiv).empty();
 
@@ -431,8 +431,7 @@ class Graph extends React.Component<Props> {
                 onClick={this.onClick}
             >
                 {image}
-                {/* eslint-disable-next-line react/no-string-refs */}
-                <div className="graphie" ref="graphieDiv" />
+                <div className="graphie" ref={this.graphieDivRef} />
             </div>
         );
     }

packages/perseus/src/components/graphie.tsx

@@ -1,7 +1,6 @@
 import {Errors} from "@khanacademy/perseus-core";
 import $ from "jquery";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import InteractiveUtil from "../interactive2/interactive-util";
@@ -176,7 +175,7 @@ class Graphie extends React.Component<Props> {
     _setupGraphie: () => void = () => {
         this._removeMovables();
 
-        const graphieDiv = ReactDOM.findDOMNode(this.graphieDivRef.current);
+        const graphieDiv = this.graphieDivRef.current;
         if (graphieDiv == null || graphieDiv instanceof Text) {
             throw new Error("No graphie container div found");
         }

packages/perseus/src/components/multi-button-group.tsx

@@ -1,6 +1,5 @@
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 
 type Props = {
     /**
@@ -52,14 +51,15 @@ type DefaultProps = {
  * this component allows multiple selection!
  */
 class MultiButtonGroup extends React.Component<Props> {
+    buttonContainerRef = React.createRef<HTMLDivElement>();
+
     static defaultProps: DefaultProps = {
         values: [],
         allowEmpty: true,
     };
 
     focus(): boolean {
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this)?.focus();
+        this.buttonContainerRef.current?.focus();
         return true;
     }
 
@@ -108,7 +108,11 @@ class MultiButtonGroup extends React.Component<Props> {
         const outerStyle = {
             display: "inline-block",
         } as const;
-        return <div style={outerStyle}>{buttons}</div>;
+        return (
+            <div style={outerStyle} ref={this.buttonContainerRef}>
+                {buttons}
+            </div>
+        );
     }
 }
 

packages/perseus/src/components/tooltip.tsx

@@ -4,7 +4,6 @@
 // z-index: 3 on perseus-formats-tooltip seemed to work
 
 import * as React from "react";
-import ReactDOM from "react-dom";
 
 import type {Property} from "csstype";
 
@@ -237,6 +236,8 @@ type State = {
  * ```
  */
 class Tooltip extends React.Component<Props, State> {
+    tooltipContainerRef = React.createRef<HTMLDivElement>();
+
     static defaultProps: DefaultProps = {
         className: "",
         arrowSize: 10,
@@ -337,8 +338,7 @@ class Tooltip extends React.Component<Props, State> {
                 }}
             >
                 <div
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="tooltipContainer"
+                    ref={this.tooltipContainerRef}
                     className="tooltipContainer"
                     style={{
                         position: "absolute",
@@ -377,11 +377,9 @@ class Tooltip extends React.Component<Props, State> {
     }
 
     _updateHeight() {
-        const tooltipContainer = ReactDOM.findDOMNode(
-            // eslint-disable-next-line react/no-string-refs
-            this.refs.tooltipContainer,
-        ) as HTMLDivElement;
-        const height = tooltipContainer.offsetHeight;
+        const tooltipContainer = this.tooltipContainerRef.current;
+
+        const height = tooltipContainer?.offsetHeight || 0;
         if (height !== this.state.height) {
             this.setState({height});
         }