[cleaning-the-perseus-finddom] SSSSOMEBODY STOP ME

Author: SonicScrewdriver

packages/perseus/src/components/simple-keypad-input.tsx

@@ -13,80 +13,78 @@ import {KeypadInput, keypadElementPropType} from "@khanacademy/math-input";
 import PropTypes from "prop-types";
 import * as React from "react";
 
-import type {Focusable} from "../types";
-
-export default class SimpleKeypadInput
-    extends React.Component<any>
-    implements Focusable
-{
-    static contextType = KeypadContext;
-    declare context: React.ContextType<typeof KeypadContext>;
-    _isMounted = false;
-    inputRef = React.createRef<KeypadInput>();
+type SimpleKeypadInputProps = {
+    keypadElement?: any;
+    onFocus: () => void;
+    onBlur: () => void;
+    onChange: (value: string, callback: any) => void;
+    value?: string | number | null;
+    ariaLabel?: string;
+    style?: React.CSSProperties;
+};
 
-    componentDidMount() {
-        // TODO(scottgrant): This is a hack to remove the deprecated call to
-        // this.isMounted() but is still considered an anti-pattern.
-        this._isMounted = true;
-    }
+const SimpleKeypadInput = React.forwardRef<HTMLElement, SimpleKeypadInputProps>(
+    function SimpleKeypadInput(props, ref) {
+        const keypadInputRef = React.useRef<any>(null);
+        const context = React.useContext(KeypadContext);
 
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
+        // Use imperative handle to expose the DOM node properties and custom methods
+        // required for consuming Perseus widgets to handle focus/blur events.
+        React.useImperativeHandle(ref, () => {
+            const keypadInstance = keypadInputRef.current;
+            if (!keypadInstance) {
+                return null;
+            }
 
-    focus() {
-        // The inputRef is a ref to a MathInput, which
-        // also controls the keypad state during focus events.
-        this.inputRef.current?.focus(this.context.setKeypadActive);
-    }
+            // Get the actual DOM node from the KeypadInput (MathInput) component's
+            // internal inputRef.
+            const inputElement = keypadInstance.inputRef;
 
-    blur() {
-        this.inputRef.current?.blur();
-    }
+            if (!inputElement) {
+                return null;
+            }
 
-    getValue(): string | number {
-        return this.props.value;
-    }
+            // Return the DOM node with focus/blur methods attached.
+            return {
+                ...inputElement,
+                focus: () => {
+                    keypadInstance.focus(context.setKeypadActive);
+                },
+                blur: () => {
+                    keypadInstance.blur();
+                },
+                getValue: () => {
+                    return props.value;
+                },
+            };
+        });
 
-    render(): React.ReactNode {
-        const _this = this;
-        // Intercept the `onFocus` prop, as we need to configure the keypad
-        // before continuing with the default focus logic for Perseus inputs.
-        // Intercept the `value` prop so as to map `null` to the empty string,
-        // as the `KeypadInput` does not support `null` values.
-        const {keypadElement, onFocus, value, ...rest} = _this.props;
+        const {keypadElement, onFocus, value, ...rest} = props;
 
         return (
-            // @ts-expect-error - TS2769 - No overload matches this call.
             <KeypadInput
-                ref={this.inputRef}
+                ref={keypadInputRef}
                 keypadElement={keypadElement}
                 onFocus={() => {
                     if (keypadElement) {
-                        keypadElement.configure(
-                            {
-                                keypadType: "FRACTION",
-                            },
-                            () => {
-                                if (_this._isMounted) {
-                                    onFocus?.();
-                                }
-                            },
-                        );
-                    } else {
-                        onFocus?.();
+                        keypadElement.configure({
+                            keypadType: "FRACTION",
+                        });
                     }
+                    onFocus?.();
                 }}
                 value={value == null ? "" : "" + value}
+                ariaLabel={props.ariaLabel || ""}
                 {...rest}
             />
         );
-    }
-}
+    },
+);
 
-// @ts-expect-error - TS2339 - Property 'propTypes' does not exist on type 'typeof SimpleKeypadInput'.
 SimpleKeypadInput.propTypes = {
     keypadElement: keypadElementPropType,
     onFocus: PropTypes.func,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
+
+export default SimpleKeypadInput;

packages/perseus/src/widgets/matrix/matrix.tsx

@@ -3,7 +3,6 @@ import {linterContextDefault} from "@khanacademy/perseus-linter";
 import {StyleSheet} from "aphrodite";
 import classNames from "classnames";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import {PerseusI18nContext} from "../../components/i18n-context";
@@ -115,7 +114,7 @@ type State = {
 class Matrix extends React.Component<Props, State> implements Widget {
     static contextType = PerseusI18nContext;
     declare context: React.ContextType<typeof PerseusI18nContext>;
-    answerRefs: Record<string, SimpleKeypadInput | HTMLInputElement> = {};
+    answerRefs: Record<string, HTMLInputElement> = {};
 
     // @ts-expect-error - TS2564 - Property 'cursorPosition' has no initializer and is not definitely assigned in the constructor.
     cursorPosition: [number, number];
@@ -188,12 +187,7 @@ class Matrix extends React.Component<Props, State> implements Widget {
     getDOMNodeForPath(path: FocusPath) {
         const inputID = getRefForPath(path);
         const inputRef = this.answerRefs[inputID];
-        if (this.props.apiOptions.customKeypad) {
-            // This is a SimpleKeypadInput, so we need to find the DOM node
-            return ReactDOM.findDOMNode(inputRef);
-        } else {
-            return inputRef as HTMLInputElement;
-        }
+        return inputRef;
     }
 
     handleKeyDown: (arg1: any, arg2: any, arg3: any) => void = (
@@ -205,8 +199,8 @@ class Matrix extends React.Component<Props, State> implements Widget {
         const maxCol = this.props.matrixBoardSize[1];
         let enterTheMatrix = null;
 
-        // eslint-disable-next-line react/no-string-refs
-        const curInput = this.refs[getRefForPath(getInputPath(row, col))];
+        const inputID = getRefForPath(getInputPath(row, col));
+        const curInput = this.answerRefs[inputID];
         // @ts-expect-error - TS2339 - Property 'getStringValue' does not exist on type 'ReactInstance'.
         const curValueString = curInput.getStringValue();
         // @ts-expect-error - TS2339 - Property 'getSelectionStart' does not exist on type 'ReactInstance'.
@@ -247,22 +241,19 @@ class Matrix extends React.Component<Props, State> implements Widget {
             e.preventDefault();
 
             // Focus the input and move the cursor to the end of it.
-            // eslint-disable-next-line react/no-string-refs
-            const input = this.refs[getRefForPath(nextPath)];
+            const inputID = getRefForPath(nextPath);
+            const input = this.answerRefs[inputID];
 
             // Multiply by 2 to ensure the cursor always ends up at the end;
             // Opera sometimes sees a carriage return as 2 characters.
             // @ts-expect-error - TS2339 - Property 'getStringValue' does not exist on type 'ReactInstance'.
             const inputValString = input.getStringValue();
             const valueLength = inputValString.length * 2;
 
-            // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
             input.focus();
             if (e.key === "ArrowRight") {
-                // @ts-expect-error - TS2339 - Property 'setSelectionRange' does not exist on type 'ReactInstance'.
                 input.setSelectionRange(0, 0);
             } else {
-                // @ts-expect-error - TS2339 - Property 'setSelectionRange' does not exist on type 'ReactInstance'.
                 input.setSelectionRange(valueLength, valueLength);
             }
         }
@@ -470,7 +461,6 @@ class Matrix extends React.Component<Props, State> implements Widget {
                                             <SimpleKeypadInput
                                                 {...inputProps}
                                                 style={style}
-                                                scrollable={true}
                                                 keypadElement={
                                                     this.props.keypadElement
                                                 }

packages/perseus/src/widgets/number-line/number-line.tsx

@@ -1,6 +1,5 @@
 import {number as knumber, KhanMath} from "@khanacademy/kmath";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import Graphie from "../../components/graphie";
@@ -247,7 +246,7 @@ class NumberLine extends React.Component<Props, State> implements Widget {
     static contextType = PerseusI18nContext;
     declare context: React.ContextType<typeof PerseusI18nContext>;
 
-    tickControlRef: SimpleKeypadInput | HTMLInputElement | null = null;
+    tickControlRef: HTMLInputElement | null = null;
 
     static defaultProps: DefaultProps = {
         range: [0, 10],
@@ -366,16 +365,21 @@ class NumberLine extends React.Component<Props, State> implements Widget {
         }
     };
 
+    // There's only one input path for the tick control, but the renderer
+    // expects this method to be implemented.
     getInputPaths: () => ReadonlyArray<ReadonlyArray<string>> = () => {
         if (this.props.isTickCtrl) {
             return [["tick-ctrl"]];
         }
         return [];
     };
 
+    // This consumes the input path returned by getInputPaths,
+    // and returns the DOM node for the tick control input.
     getDOMNodeForPath(inputPath: FocusPath) {
+        // If we have a tick control, return the DOM node for the tick control input.
         if (inputPath?.length === 1) {
-            return ReactDOM.findDOMNode(this.tickControlRef);
+            return this.tickControlRef;
         }
         return null;
     }

packages/perseus/src/widgets/numeric-input/numeric-input.tsx

@@ -87,7 +87,7 @@ export const NumericInputComponent = forwardRef<Focusable, NumericInputProps>(
             return (
                 <div className={alignmentClass}>
                     <SimpleKeypadInput
-                        ref={inputRef as React.RefObject<SimpleKeypadInput>}
+                        ref={inputRef as React.RefObject<HTMLInputElement>}
                         value={props.userInput.currentValue}
                         keypadElement={props.keypadElement}
                         onChange={handleChange}

packages/perseus/src/widgets/table/table.tsx

@@ -1,6 +1,5 @@
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as React from "react";
-import {findDOMNode} from "react-dom";
 
 import {PerseusI18nContext} from "../../components/i18n-context";
 import SimpleKeypadInput from "../../components/simple-keypad-input";
@@ -77,7 +76,7 @@ class Table extends React.Component<Props> implements Widget {
     static contextType = PerseusI18nContext;
     declare context: React.ContextType<typeof PerseusI18nContext>;
     headerRefs: Record<string, any> = {};
-    answerRefs: Record<string, SimpleKeypadInput | HTMLInputElement> = {};
+    answerRefs: Record<string, HTMLInputElement> = {};
 
     static defaultProps: DefaultProps = {
         apiOptions: ApiOptions.defaults,
@@ -154,11 +153,7 @@ class Table extends React.Component<Props> implements Widget {
         const inputID = getRefForPath(path as Path);
         const inputRef = this.answerRefs[inputID];
 
-        if (this.props.apiOptions.customKeypad) {
-            return findDOMNode(inputRef);
-        } else {
-            return inputRef as HTMLInputElement;
-        }
+        return inputRef;
     }
 
     getInputPaths(): string[][] {