@khanacademy/perseus 4.0.1 → 5.0.0

package/src/components/__stories__/svg-image.stories.tsx

@@ -17,15 +17,11 @@ const imgUrl = "https://www.khanacademy.org/images/hand-tree.new.png";
 const graphieUrl =
     "web+graphie://ka-perseus-graphie.s3.amazonaws.com/1e06f6d4071f30cee2cc3ccb7435b3a66a62fe3f";
 
-export const MostlyEmptyPropsObject: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MostlyEmptyPropsObject = (args: StoryArgs): React.ReactElement => {
     return <SvgImage alt="ALT" />;
 };
 
-export const SvgImageThatDoesntLoad: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SvgImageThatDoesntLoad = (args: StoryArgs): React.ReactElement => {
     return (
         <SvgImage
             alt="ALT"
@@ -36,26 +32,22 @@ export const SvgImageThatDoesntLoad: React.FC<StoryArgs> = (
     );
 };
 
-export const SvgImageBasic: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SvgImageBasic = (args: StoryArgs): React.ReactElement => {
     return <SvgImage src={svgUrl} alt="ALT" />;
 };
 
-export const SvgImageWithFixedHeight: React.FC<StoryArgs> = (
-    args,
+export const SvgImageWithFixedHeight = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <SvgImage height={50} src={svgUrl} alt="ALT" />;
 };
 
-export const SvgImageWithFixedWidth: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SvgImageWithFixedWidth = (args: StoryArgs): React.ReactElement => {
     return <SvgImage src={svgUrl} width={50} alt="ALT" />;
 };
 
-export const SvgImageWithExtraGraphieProps: React.FC<StoryArgs> = (
-    args,
+export const SvgImageWithExtraGraphieProps = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <SvgImage
@@ -73,10 +65,10 @@ export const SvgImageWithExtraGraphieProps: React.FC<StoryArgs> = (
     );
 };
 
-export const PngImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const PngImage = (args: StoryArgs): React.ReactElement => {
     return <SvgImage src={imgUrl} alt="ALT" />;
 };
 
-export const GraphieImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const GraphieImage = (args: StoryArgs): React.ReactElement => {
     return <SvgImage src={graphieUrl} alt="ALT" />;
 };

package/src/components/__stories__/tex.stories.tsx

@@ -18,8 +18,6 @@ export default {
     },
 } as Story;
 
-export const BasicOperation: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const BasicOperation = (args: StoryArgs): React.ReactElement => {
     return <TeX setAssetStatus={() => {}} children={args.equation} />;
 };

package/src/components/__stories__/text-buttons.stories.tsx

@@ -12,51 +12,39 @@ export default {
     title: "Perseus/Components/Tex Buttons",
 } as Story;
 
-export const ButtonSetBasic: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetBasic = (args: StoryArgs): React.ReactElement => {
     return <TexButtons sets={["basic"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetBasicDiv: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetBasicDiv = (args: StoryArgs): React.ReactElement => {
     return <TexButtons sets={["basic+div"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetTrig: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetTrig = (args: StoryArgs): React.ReactElement => {
     return <TexButtons sets={["trig"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetPrealgebra: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetPrealgebra = (args: StoryArgs): React.ReactElement => {
     return <TexButtons sets={["prealgebra"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetLogarithms: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetLogarithms = (args: StoryArgs): React.ReactElement => {
     return <TexButtons sets={["logarithms"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetBasicRelations: React.FC<StoryArgs> = (
-    args,
+export const ButtonSetBasicRelations = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <TexButtons sets={["basic relations"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetAdvancedRelations: React.FC<StoryArgs> = (
-    args,
+export const ButtonSetAdvancedRelations = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <TexButtons sets={["advanced relations"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetMultiple: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetMultiple = (args: StoryArgs): React.ReactElement => {
     return (
         <TexButtons
             sets={["basic", "trig", "advanced relations"]}

package/src/components/__stories__/text-input.stories.tsx

@@ -16,24 +16,18 @@ const defaultObject = {
     onChange: () => {},
 } as const;
 
-export const EmptyPropsObject: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} />;
 };
 
-export const TestValueProvided: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TestValueProvided = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} value="Test value" />;
 };
 
-export const AriaLabelTextProvided: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AriaLabelTextProvided = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} labelText="Test label" />;
 };
 
-export const Disabled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Disabled = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} disabled={true} />;
 };

package/src/components/__stories__/text-list-editor.stories.tsx

@@ -22,9 +22,7 @@ const defaultObject = {
 
 const ClassName = "framework-perseus orderer";
 
-export const SimpleListOfOptions: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SimpleListOfOptions = (args: StoryArgs): React.ReactElement => {
     return (
         // @ts-expect-error [FEI-5003] - TS2322 - Type '{ children: Element; class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
         <div class={ClassName}>

package/src/components/__stories__/zoomable-tex.stories.tsx

@@ -12,16 +12,18 @@ export default {
     title: "Perseus/Components/Zoomable Tex",
 } as Story;
 
-const ForceZoomWrapper: React.FC<{
+type Props = {
     children: React.ReactNode;
-}> = ({children}): React.ReactElement => (
+};
+
+const ForceZoomWrapper = ({children}: Props): React.ReactElement => (
     <>
         <h1>Click on equation to zoom/unzoom</h1>
         <div style={{width: "50px"}}>{children}</div>
     </>
 );
 
-export const KaTeX: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const KaTeX = (args: StoryArgs): React.ReactElement => {
     return (
         <ForceZoomWrapper>
             <ZoomableTex children="\sum_{i=1}^\infty\frac{1}{n^2} =\frac{\pi^2}{6}" />
@@ -29,7 +31,7 @@ export const KaTeX: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const ComplexKaTeX: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ComplexKaTeX = (args: StoryArgs): React.ReactElement => {
     return (
         <ForceZoomWrapper>
             {" "}

package/src/components/__stories__/zoomable.stories.tsx

@@ -27,9 +27,7 @@ const computeChildBounds = (
     };
 };
 
-export const ZoomableExample: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ZoomableExample = (args: StoryArgs): React.ReactElement => {
     return (
         <Zoomable computeChildBounds={computeChildBounds}>
             <span>

package/src/components/fixed-to-responsive.tsx

@@ -103,7 +103,6 @@ const FixedToResponsive: any = createReactClass({
         const spacer = (
             <div
                 style={{
-                    // $FlowFixMe[unsafe-addition]
                     // @ts-expect-error [FEI-5003] - TS2362 - The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
                     paddingBottom: (1 / aspectRatio).toFixed(4) * 100 + "%",
                 }}

package/src/components/graph.tsx

@@ -97,7 +97,6 @@ class Graph extends React.Component<any> {
         if (imageData.url) {
             const scale = this.props.box[0] / interactiveSizes.defaultBoxSize;
             image = (
-                // $FlowFixMe[prop-missing]: `alt` is missing
                 // @ts-expect-error [FEI-5003] - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
                 <SvgImage
                     src={imageData.url}
@@ -118,13 +117,10 @@ class Graph extends React.Component<any> {
                     width: this.props.box[0],
                     height: this.props.box[1],
                 }}
-                // $FlowFixMe[prop-missing]: This can probably be removed
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
                 onMouseOut={this.onMouseOut}
-                // $FlowFixMe[prop-missing]: This can probably be removed
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
                 onMouseOver={this.onMouseOver}
-                // $FlowFixMe[prop-missing]: This can probably be removed
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'onClick' does not exist on type 'Graph'.
                 onClick={this.onClick}
             >

package/src/components/highlighting/highlightable-content.tsx

@@ -31,7 +31,7 @@ import type {
     DOMRange,
 } from "./types";
 
-type HighlightableContentProps = {
+type Props = {
     // The highlightable content itself. Highlights will be defined relative to
     // the content specified here.
     children?: React.ReactElement<any>;
@@ -57,21 +57,18 @@ type HighlightableContentProps = {
     serializedHighlights: SerializedHighlightSet;
 };
 
-type HighlightableContentState = {
+type State = {
     // A cached list of DOMRanges, each representing one of the content's
     // semantic words. Sorted in document order.
     wordRanges: ReadonlyArray<DOMRange>;
 };
 
-class HighlightableContent extends React.PureComponent<
-    HighlightableContentProps,
-    HighlightableContentState
-> {
+class HighlightableContent extends React.PureComponent<Props, State> {
     // References to the mounted container and content divs.
     _container: HTMLElement | null | undefined;
     _content: HTMLElement | null | undefined;
 
-    state: HighlightableContentState = {
+    state: State = {
         wordRanges: [],
     };
 

package/src/components/highlighting/ui/highlight-renderer.tsx

@@ -21,7 +21,7 @@ import {
 
 import type {DOMHighlight, Position, Rect, ZIndexes} from "./types";
 
-type HighlightRendererProps = {
+type Props = {
     // The DOMHighlight to render.
     highlight: DOMHighlight;
     // A unique key corresponding to the given `highlight`.
@@ -36,7 +36,7 @@ type HighlightRendererProps = {
     zIndexes: ZIndexes;
 };
 
-type HighlightRendererState = {
+type State = {
     // The set of rectangles that cover this highlight's content, relative to
     // the offset parent. This cache is updated on mount and on changes to
     // the `highlight` and `offsetParent` props.
@@ -50,17 +50,14 @@ type HighlightRendererState = {
     cachedHighlightRects: ReadonlyArray<Rect>;
 };
 
-class HighlightRenderer extends React.PureComponent<
-    HighlightRendererProps,
-    HighlightRendererState
-> {
-    state: HighlightRendererState = {
+class HighlightRenderer extends React.PureComponent<Props, State> {
+    state: State = {
         cachedHighlightRects: this._computeRects(this.props),
         // @ts-expect-error [FEI-5003] - TS2322 - Type '{ cachedHighlightRects: readonly Rect[]; tooltipIsHovered: boolean; }' is not assignable to type 'HighlightRendererState'.
         tooltipIsHovered: false,
     };
 
-    UNSAFE_componentWillReceiveProps(nextProps: HighlightRendererProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         if (
             this.props.highlight !== nextProps.highlight ||
             this.props.offsetParent !== nextProps.offsetParent
@@ -76,7 +73,7 @@ class HighlightRenderer extends React.PureComponent<
      * coordinates relative to the offset parent. That way, we can use them
      * for CSS positioning.
      */
-    _computeRects(props: HighlightRendererProps): ReadonlyArray<Rect> {
+    _computeRects(props: Props): ReadonlyArray<Rect> {
         const {highlight, offsetParent} = props;
 
         // Get the set of rectangles that covers the range's text, relative to

package/src/components/highlighting/ui/highlight-set-renderer.tsx

@@ -15,7 +15,7 @@ import HighlightTooltip from "./highlight-tooltip";
 
 import type {DOMHighlightSet, Position, ZIndexes} from "./types";
 
-type HighlightSetRendererProps = {
+type Props = {
     // Whether the highlights are user-editable. If false, highlights are
     // read-only.
     editable: boolean;
@@ -33,7 +33,7 @@ type HighlightSetRendererProps = {
     // highlights below content.
     zIndexes: ZIndexes;
 };
-type HighlightSetRendererState = {
+type State = {
     // If the user is currently hovering over a highlight, this field contains
     // its key.
     hoveredHighlightKey: string | null | undefined;
@@ -42,11 +42,8 @@ type HighlightSetRendererState = {
     hoveringTooltipFor: string | null | undefined;
 };
 
-class HighlightSetRenderer extends React.PureComponent<
-    HighlightSetRendererProps,
-    HighlightSetRendererState
-> {
-    state: HighlightSetRendererState = {
+class HighlightSetRenderer extends React.PureComponent<Props, State> {
+    state: State = {
         hoveredHighlightKey: null,
         hoveringTooltipFor: null,
     };
@@ -60,7 +57,7 @@ class HighlightSetRenderer extends React.PureComponent<
         this._updateEditListeners(false, this.props.editable);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps: HighlightSetRendererProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         this._updateEditListeners(this.props.editable, nextProps.editable);
 
         // If we were previously hovering over a highlight that has been

package/src/components/highlighting/ui/highlight-tooltip.tsx

@@ -23,7 +23,7 @@ import {getRelativeRect} from "./util";
 
 import type {Rect} from "./types";
 
-type HighlightTooltipProps = {
+type Props = {
     label: string;
     onClick: () => unknown;
     onMouseEnter?: () => unknown;
@@ -33,7 +33,7 @@ type HighlightTooltipProps = {
     offsetParent: Element;
 };
 
-class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
+class HighlightTooltip extends React.PureComponent<Props> {
     _getFocusRect(): Rect | null | undefined {
         const {focusNode, focusOffset, offsetParent} = this.props;
 

package/src/components/highlighting/ui/highlighting-ui.tsx

@@ -21,7 +21,7 @@ import SelectionTracker from "./selection-tracker";
 import type {TrackedSelection} from "./selection-tracker";
 import type {DOMHighlight, DOMHighlightSet, DOMRange, ZIndexes} from "./types";
 
-type HighlightingUIProps = {
+type Props = {
     // A function that builds a DOMHighlight from the given DOMRange, if
     // possible. If it would not currently be valid to add a highlight over the
     // given DOMRange, returns null.
@@ -49,7 +49,7 @@ type HighlightingUIProps = {
     zIndexes: ZIndexes;
 };
 
-class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
+class HighlightingUI extends React.PureComponent<Props> {
     _handleAddHighlight(highlightToAdd: DOMHighlight) {
         this.props.onAddHighlight(highlightToAdd);
 
@@ -61,7 +61,9 @@ class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
         }
     }
 
-    _selectionIsValid(trackedSelection?: TrackedSelection | null): boolean {
+    _selectionIsValid(
+        trackedSelection?: TrackedSelection | null,
+    ): trackedSelection is TrackedSelection {
         if (!trackedSelection) {
             return false;
         }
@@ -123,22 +125,10 @@ class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
                                     label={i18n._("Add highlight")}
                                     onClick={() =>
                                         this._handleAddHighlight(
-                                            // TODO(mdr): We found a new Flow error when upgrading:
-                                            //     "proposedHighlight (Cannot get `trackedSelection.proposedHighlight` because property `proposedHighlight` is missing in null or undefined [1].)"
-                                            // $FlowFixMe[incompatible-use](0.57.3->0.75.0)
-                                            // @ts-expect-error [FEI-5003] - TS2533 - Object is possibly 'null' or 'undefined'.
                                             trackedSelection.proposedHighlight,
                                         )
                                     }
-                                    // TODO(mdr): We found a new Flow error when upgrading:
-                                    //     "focusNode (Cannot get `trackedSelection.focusNode` because property `focusNode` is missing in null or undefined [1].)"
-                                    // $FlowFixMe[incompatible-use](0.57.3->0.75.0)
-                                    // @ts-expect-error [FEI-5003] - TS2533 - Object is possibly 'null' or 'undefined'.
                                     focusNode={trackedSelection.focusNode}
-                                    // TODO(mdr): We found a new Flow error when upgrading:
-                                    //     "focusOffset (Cannot get `trackedSelection.focusOffset` because property `focusOffset` is missing in null or undefined [1].)"
-                                    // $FlowFixMe[incompatible-use](0.57.3->0.75.0)
-                                    // @ts-expect-error [FEI-5003] - TS2533 - Object is possibly 'null' or 'undefined'.
                                     focusOffset={trackedSelection.focusOffset}
                                     offsetParent={this.props.offsetParent}
                                 />

package/src/components/highlighting/ui/selection-tracker.tsx

@@ -22,7 +22,7 @@ export type TrackedSelection = {
     proposedHighlight: DOMHighlight;
 };
 
-type SelectionTrackerProps = {
+type Props = {
     // A function that builds a DOMHighlight from the given DOMRange, if
     // possible. If it would not currently be valid to add a highlight over the
     // given DOMRange, returns null.
@@ -38,7 +38,7 @@ type SelectionTrackerProps = {
     enabled: boolean;
 };
 
-type SelectionTrackerState = {
+type State = {
     // The current state of the mouse button. We distinguish between down,
     // down and the selection has changed since going down, and up.
     mouseState: "down" | "down-and-selecting" | "up";
@@ -46,11 +46,8 @@ type SelectionTrackerState = {
     trackedSelection: TrackedSelection | null | undefined;
 };
 
-class SelectionTracker extends React.PureComponent<
-    SelectionTrackerProps,
-    SelectionTrackerState
-> {
-    state: SelectionTrackerState = {
+class SelectionTracker extends React.PureComponent<Props, State> {
+    state: State = {
         mouseState: "up",
         trackedSelection: null,
     };
@@ -59,7 +56,7 @@ class SelectionTracker extends React.PureComponent<
         this._updateListeners(false, this.props.enabled);
     }
 
-    componentDidUpdate(prevProps: SelectionTrackerProps) {
+    componentDidUpdate(prevProps: Props) {
         if (this.props.buildHighlight !== prevProps.buildHighlight) {
             // The highlight-building function changed, so the
             // proposedHighlight we built with it might be different, or no
@@ -124,7 +121,7 @@ class SelectionTracker extends React.PureComponent<
         }
 
         // NOTE(mdr): The focus node is guaranteed to exist, because
-        //     there's a range, but the Flow type annotations for
+        //     there's a range, but the type annotations for
         //     Selection don't know that. Cast it ourselves.
         const focusNode: Node = selection.focusNode as any;
         const focusOffset = selection.focusOffset;

package/src/components/highlighting/word-indexer.tsx

@@ -18,7 +18,7 @@ import {PerseusError} from "../../perseus-error";
 
 import type {DOMRange} from "./types";
 
-type WordIndexerProps = {
+type Props = {
     // The content to display and traverse in search of words.
     children?: React.ReactElement<any>;
     // After each mount and update, this callback is called with the list of
@@ -26,7 +26,7 @@ type WordIndexerProps = {
     onWordsUpdate: (wordRanges: ReadonlyArray<DOMRange>) => unknown;
 };
 
-class WordIndexer extends React.PureComponent<WordIndexerProps> {
+class WordIndexer extends React.PureComponent<Props> {
     _container: HTMLElement | null | undefined;
     /* eslint-enable react/sort-comp */
 
@@ -103,11 +103,7 @@ class WordIndexer extends React.PureComponent<WordIndexerProps> {
                 let newTrailingWordRange = null;
                 // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string | null' is not assignable to parameter of type 'string'.
                 while ((wordMatch = wordPattern.exec(text)) !== null) {
-                    // TODO(mdr): We found a new Flow error when upgrading:
-                    //     "index (Cannot get `wordMatch.index` because property `index` is missing in null [1].)"
                     const startOffset = wordMatch.index;
-                    // TODO(mdr): We found a new Flow error when upgrading:
-                    //     "index (Cannot get `wordMatch.index` because property `index` is missing in null [1].)", "0 (Cannot get `wordMatch[0]` because an indexer property is missing in null [1].)"
                     const endOffset = wordMatch.index + wordMatch[0].length;
 
                     let range;

package/src/components/inline-icon.tsx

@@ -26,13 +26,13 @@
 import PropTypes from "prop-types";
 import * as React from "react";
 
-const InlineIcon: React.FC<InlineIconProps> = ({
+const InlineIcon = ({
     path,
     width,
     height,
     style = {},
     title,
-}): React.ReactElement => (
+}: InlineIconProps): React.ReactElement => (
     <svg
         role="img"
         aria-hidden={!title}

package/src/components/math-input.tsx

@@ -191,8 +191,6 @@ class MathInput extends React.Component<Props, State> {
         // close (blur) the button group in order to focus on next page element.
         if (
             !this.mouseDown &&
-            // $FlowFixMe[incompatible-use]
-            // $FlowFixMe[incompatible-call]
             // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
             !ReactDOM.findDOMNode(this).contains(e.relatedTarget)
         ) {

package/src/components/number-input.tsx

@@ -110,8 +110,6 @@ class NumberInput extends React.Component<any, any> {
      */
     getValue: () => any = () => {
         return this.parseInputValue(
-            // $FlowFixMe[incompatible-use]
-            // $FlowFixMe[prop-missing]
             // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
             ReactDOM.findDOMNode(this.refs.input).value, // eslint-disable-line react/no-string-refs
         );

package/src/components/simple-keypad-input.tsx

@@ -17,6 +17,8 @@ import PropTypes from "prop-types";
 import * as React from "react";
 
 export default class SimpleKeypadInput extends React.Component<any> {
+    _isMounted = false;
+
     componentDidMount() {
         // TODO(scottgrant): This is a hack to remove the deprecated call to
         // this.isMounted() but is still considered an anti-pattern.
@@ -27,8 +29,6 @@ export default class SimpleKeypadInput extends React.Component<any> {
         this._isMounted = false;
     }
 
-    _isMounted = false;
-
     focus() {
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         this.refs.input.focus(); // eslint-disable-line react/no-string-refs

package/src/components/tex-buttons.tsx

@@ -253,7 +253,7 @@ const buttonSets: ButtonSets = {
 
 export type ButtonSetsType = ReadonlyArray<keyof typeof buttonSets>;
 
-type TexButtonProps = {
+type Props = {
     sets: ButtonSetsType;
     onInsert: (arg1: Inserter) => void;
     className?: string;
@@ -264,7 +264,7 @@ const buttonSetsPropType = PropTypes.arrayOf(
     PropTypes.oneOf(_(buttonSets).keys()),
 );
 
-class TexButtons extends React.Component<TexButtonProps> {
+class TexButtons extends React.Component<Props> {
     static buttonSets: typeof buttonSets = buttonSets;
     static buttonSetsType: any = buttonSetsPropType;
 

package/src/components/text-list-editor.tsx

@@ -116,8 +116,6 @@ class TextListEditor extends React.Component<any, any> {
                         // eslint-disable-next-line react/no-string-refs
                         // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         this.refs["input_" + focusIndex],
-                        // $FlowFixMe[incompatible-use]
-                        // $FlowFixMe[prop-missing]
                         // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
                     ).focus();
                 });
@@ -156,8 +154,6 @@ class TextListEditor extends React.Component<any, any> {
                         // eslint-disable-next-line react/no-string-refs
                         // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         this.refs["input_" + focusIndex],
-                        // $FlowFixMe[incompatible-use]
-                        // $FlowFixMe[prop-missing]
                         // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
                     ).focus();
                 });

package/src/components/visibility-observer/__stories__/visibility-observer.stories.tsx

@@ -136,8 +136,6 @@ class VisibilityTest extends React.Component<Props, State> {
     }
 }
 
-export const AlertWhenNotVisible: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AlertWhenNotVisible = (args: StoryArgs): React.ReactElement => {
     return <VisibilityTest />;
 };

package/src/components/zoomable-tex.tsx

@@ -26,10 +26,8 @@ const computeMathBounds = (
         parentNode.querySelector(".katex-html") ||
         parentNode.querySelector(".MathJax");
     const textBounds = {
-        // $FlowFixMe[incompatible-use]
         // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetWidth' does not exist on type 'Element'.
         width: textElement.offsetWidth,
-        // $FlowFixMe[incompatible-use]
         // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetHeight' does not exist on type 'Element'.
         height: textElement.offsetHeight,
     } as const;