@khanacademy/perseus 7.2.0 → 8.0.0

package/src/widgets/plotter.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable @babel/no-invalid-this, @typescript-eslint/no-unused-vars, one-var, react/no-unsafe, react/sort-comp */
+/* eslint-disable react/no-unsafe */
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import $ from "jquery";
-import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
@@ -14,53 +13,68 @@ import KhanColors from "../util/colors";
 import GraphUtils from "../util/graph-utils";
 import KhanMath from "../util/math";
 
-import type {WidgetExports} from "../types";
+import type {APIOptions, WidgetExports} from "../types";
 
 const {deepEq} = Util;
 
-const BAR = "bar",
-    LINE = "line",
-    PIC = "pic",
-    HISTOGRAM = "histogram",
-    DOTPLOT = "dotplot";
-
-const widgetPropTypes = {
-    type: PropTypes.oneOf([BAR, LINE, PIC, HISTOGRAM, DOTPLOT]),
-    labels: PropTypes.arrayOf(PropTypes.string),
-    categories: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    ),
-
-    scaleY: PropTypes.number,
-    maxY: PropTypes.number,
-    snapsPerLine: PropTypes.number,
-
-    picSize: PropTypes.number,
-    pixBoxHeight: PropTypes.number,
-    picUrl: PropTypes.string,
-
-    plotDimensions: PropTypes.arrayOf(PropTypes.number),
-    labelInterval: PropTypes.number,
-    starting: PropTypes.arrayOf(PropTypes.number),
-    static: PropTypes.bool,
-} as const;
-
-class Plotter extends React.Component<any, any> {
-    // @ts-expect-error [FEI-5003] - TS2564 - Property 'shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
+const BAR = "bar";
+const LINE = "line";
+const PIC = "pic";
+const HISTOGRAM = "histogram";
+const DOTPLOT = "dotplot";
+
+const plotTypes = [BAR, LINE, PIC, HISTOGRAM, DOTPLOT];
+type PlotType = typeof plotTypes[number];
+
+type Props = {
+    type: PlotType;
+    labels: ReadonlyArray<string>;
+    categories: ReadonlyArray<string | number>;
+    scaleY: number;
+    maxY: number;
+    snapsPerLine: number;
+    picSize: number;
+    picBoxHeight: number;
+    picUrl: string;
+    plotDimensions: ReadonlyArray<number>;
+    labelInterval: number;
+
+    starting: Array<number>;
+    static: boolean;
+    markings: any;
+    onChange: any;
+    trackInteraction: () => void;
+    apiOptions: APIOptions;
+};
+
+type DefaultProps = {
+    type: Props["type"];
+    labels: Props["labels"];
+    categories: Props["categories"];
+    scaleY: Props["scaleY"];
+    maxY: Props["maxY"];
+    snapsPerLine: Props["snapsPerLine"];
+    picSize: Props["picSize"];
+    picBoxHeight: Props["picBoxHeight"];
+    picUrl: Props["picUrl"];
+    plotDimensions: Props["plotDimensions"];
+    labelInterval: Props["labelInterval"];
+};
+
+type State = {
+    values: Array<number>;
+    categoryHeights: Record<string, number>;
+};
+
+export class Plotter extends React.Component<Props, State> {
+    // @ts-expect-error - TS2564 - Property 'shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
     shouldSetupGraphie: boolean;
     _isMounted = false;
     horizHairline: any;
     hairlineRange: any;
     graphie: any;
 
-    static propTypes = {
-        onChange: PropTypes.func.isRequired,
-        trackInteraction: PropTypes.func.isRequired,
-        // TODO(alex): Figure out why lint chokes on this line
-        // ...widgetPropTypes,
-    };
-
-    static defaultProps: any = {
+    static defaultProps: DefaultProps = {
         type: BAR,
         labels: ["", ""],
         categories: [""],
@@ -77,7 +91,7 @@ class Plotter extends React.Component<any, any> {
         labelInterval: 1,
     };
 
-    state: any = {
+    state: State = {
         values: this.props.starting || [1],
 
         // The measured rendered height of category strings. Used to calculate
@@ -86,57 +100,13 @@ class Plotter extends React.Component<any, any> {
         categoryHeights: {},
     };
 
-    DOT_PLOT_POINT_SIZE: () => number = () => {
-        return this.props.apiOptions.isMobile ? 6 : 4;
-    };
-
-    DOT_PLOT_POINT_PADDING: () => number = () => {
-        return 8;
-    };
-
-    DOT_TICK_POINT_SIZE: () => number = () => {
-        return 2;
-    };
-
-    render(): React.ReactNode {
-        // TODO(kevinb) actually compute the size of the graphie correctly and
-        // make it that size so we don't have to add extra padding.  The value
-        // was determined by eye-balling the layout.  :(
-        const paddingForBottomLabel = 75;
-        const style = {
-            marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0,
-        } as const;
-
-        return (
-            <div
-                className={
-                    "perseus-widget-plotter graphie " +
-                    ApiClassNames.INTERACTIVE
-                }
-                // eslint-disable-next-line react/no-string-refs
-                ref="graphieDiv"
-                style={style}
-            />
-        );
-    }
-
-    componentDidUpdate(prevProps: any, prevState: any) {
-        this.shouldSetupGraphie =
-            this.shouldSetupGraphie ||
-            !_.isEqual(this.state.categoryHeights, prevState.categoryHeights);
-
-        if (this.shouldSetupGraphie) {
-            this.setupGraphie(prevState);
-        }
-    }
-
     componentDidMount() {
         this._isMounted = true;
 
         this.setupGraphie(this.state);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps: any) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         const props = [
             "type",
             "labels",
@@ -151,10 +121,7 @@ class Plotter extends React.Component<any, any> {
 
         this.shouldSetupGraphie = _.any(
             props,
-            function (prop) {
-                // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                return !_.isEqual(this.props[prop], nextProps[prop]);
-            },
+            (prop) => !_.isEqual(this.props[prop], nextProps[prop]),
             this,
         );
 
@@ -167,15 +134,37 @@ class Plotter extends React.Component<any, any> {
         }
     }
 
+    componentDidUpdate(prevProps: Props, prevState: State) {
+        this.shouldSetupGraphie =
+            this.shouldSetupGraphie ||
+            !_.isEqual(this.state.categoryHeights, prevState.categoryHeights);
+
+        if (this.shouldSetupGraphie) {
+            this.setupGraphie(prevState);
+        }
+    }
+
     componentWillUnmount() {
         this._isMounted = false;
     }
 
+    DOT_PLOT_POINT_SIZE: () => number = () => {
+        return this.props.apiOptions.isMobile ? 6 : 4;
+    };
+
+    DOT_PLOT_POINT_PADDING: () => number = () => {
+        return 8;
+    };
+
+    DOT_TICK_POINT_SIZE: () => number = () => {
+        return 2;
+    };
+
     setupGraphie: (arg1: any) => void = (prevState) => {
         const self = this;
         self.shouldSetupGraphie = false;
         const graphieDiv = ReactDOM.findDOMNode(self.refs.graphieDiv);
-        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
+        // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
         $(graphieDiv).empty();
         const graphie = GraphUtils.createGraphie(graphieDiv);
 
@@ -186,11 +175,11 @@ class Plotter extends React.Component<any, any> {
         self.graphie.pics = [];
         self.graphie.dotTicks = [];
 
-        const isBar = self.props.type === BAR,
-            isLine = self.props.type === LINE,
-            isPic = self.props.type === PIC,
-            isHistogram = self.props.type === HISTOGRAM,
-            isDotplot = self.props.type === DOTPLOT;
+        const isBar = self.props.type === BAR;
+        const isLine = self.props.type === LINE;
+        const isPic = self.props.type === PIC;
+        const isHistogram = self.props.type === HISTOGRAM;
+        const isDotplot = self.props.type === DOTPLOT;
 
         const isTiledPlot = isPic || isDotplot;
 
@@ -264,7 +253,6 @@ class Plotter extends React.Component<any, any> {
         if (isMobile && (isBar || isTiledPlot)) {
             const maxCategoryHeight = Math.max(
                 0,
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'number'.
                 ...Object.values(self.state.categoryHeights),
             );
 
@@ -340,7 +328,7 @@ class Plotter extends React.Component<any, any> {
             }
         }
 
-        if ((isBar || isLine) && isMobile) {
+        if ((isBar || isLine) && isMobile && !this.props.static) {
             self.graphie.dragPrompt = graphie
                 .label(
                     [c.dimX / 2, c.dimY / 2],
@@ -573,7 +561,7 @@ class Plotter extends React.Component<any, any> {
             _.each(self.props.categories, function (category, i) {
                 const x = 0.5 + i * c.barWidth;
 
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Promise<any>' is not assignable to parameter of type 'never'.
+                // @ts-expect-error - TS2345 - Argument of type 'Promise<any>' is not assignable to parameter of type 'never'.
                 categoryHeightPromises.push(self.labelCategory(x, category));
                 const tickHeight = 6 / c.scale[1];
                 graphie.style(
@@ -623,7 +611,7 @@ class Plotter extends React.Component<any, any> {
                         i === self.props.categories.length - 1
                     ) {
                         categoryHeightPromises.push(
-                            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Promise<any>' is not assignable to parameter of type 'never'.
+                            // @ts-expect-error - TS2345 - Argument of type 'Promise<any>' is not assignable to parameter of type 'never'.
                             self.labelCategory(x, category),
                         );
                         tickStart *= 1.5;
@@ -631,7 +619,7 @@ class Plotter extends React.Component<any, any> {
                     }
                 } else {
                     categoryHeightPromises.push(
-                        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Promise<any>' is not assignable to parameter of type 'never'.
+                        // @ts-expect-error - TS2345 - Argument of type 'Promise<any>' is not assignable to parameter of type 'never'.
                         self.labelCategory(x, category),
                     );
                 }
@@ -721,8 +709,8 @@ class Plotter extends React.Component<any, any> {
 
             if (isHistogram) {
                 // Scale dividers between buckets
-                const leftDivider = config.graph.dividers[i - 1],
-                    rightDivider = config.graph.dividers[i];
+                const leftDivider = config.graph.dividers[i - 1];
+                const rightDivider = config.graph.dividers[i];
 
                 if (leftDivider) {
                     const divHeight = Math.min(
@@ -927,7 +915,7 @@ class Plotter extends React.Component<any, any> {
             if (i > 0) {
                 c.graph.lines[i] = Interactive2.addMovableLine(graphie, {
                     points: [c.graph.points[i - 1], c.graph.points[i]],
-                    // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
+                    // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                     constraints: Interactive2.MovablePoint.constraints.fixed(),
                     normalStyle: {
                         stroke: KhanColors.BLUE_C,
@@ -1051,7 +1039,7 @@ class Plotter extends React.Component<any, any> {
                 .css({fill: "#000", opacity: 0.0, cursor: "pointer"})
                 .on("vmousedown", function (e) {
                     e.preventDefault();
-                    // @ts-expect-error [FEI-5003] - TS2339 - Property 'whichPicClicked' does not exist on type 'Plotter'.
+                    // @ts-expect-error - TS2339 - Property 'whichPicClicked' does not exist on type 'Plotter'.
                     self.whichPicClicked = i;
                     self.setPicHeight(i, topY);
 
@@ -1081,7 +1069,7 @@ class Plotter extends React.Component<any, any> {
                             newMidY + 0.5 * c.scaleY,
                             c.dimY,
                         );
-                        // @ts-expect-error [FEI-5003] - TS2339 - Property 'whichPicClicked' does not exist on type 'Plotter'.
+                        // @ts-expect-error - TS2339 - Property 'whichPicClicked' does not exist on type 'Plotter'.
                         self.setPicHeight(self.whichPicClicked, newTopY);
                     });
                 });
@@ -1170,9 +1158,31 @@ class Plotter extends React.Component<any, any> {
     };
 
     simpleValidate: (arg1: any) => any = (rubric) => {
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'validate' does not exist on type 'typeof Plotter'.
+        // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Plotter'.
         return Plotter.validate(this.getUserInput(), rubric);
     };
+
+    render(): React.ReactNode {
+        // TODO(kevinb) actually compute the size of the graphie correctly and
+        // make it that size so we don't have to add extra padding.  The value
+        // was determined by eye-balling the layout.  :(
+        const paddingForBottomLabel = 75;
+        const style = {
+            marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0,
+        } as const;
+
+        return (
+            <div
+                className={
+                    "perseus-widget-plotter graphie " +
+                    ApiClassNames.INTERACTIVE
+                }
+                // eslint-disable-next-line react/no-string-refs
+                ref="graphieDiv"
+                style={style}
+            />
+        );
+    }
 }
 
 _.extend(Plotter, {

package/src/widgets/radio/base-radio.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";
@@ -130,7 +131,7 @@ const BaseRadio = function (props: Props): React.ReactElement {
                 // note(matthew): we know this is only getting passed
                 // to a WB Clickable button, so we force it to be of
                 // type HTMLButtonElement
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'current' does not exist on type 'never'.
+                // @ts-expect-error - TS2339 - Property 'current' does not exist on type 'never'.
                 const anyNode = ReactDOM.findDOMNode(ref.current) as any;
                 const buttonNode = anyNode as
                     | HTMLButtonElement
@@ -142,7 +143,7 @@ const BaseRadio = function (props: Props): React.ReactElement {
             }
         }
 
-        // @ts-expect-error [FEI-5003] - TS2322 - Type 'PerseusRadioWidgetOptions | undefined' is not assignable to type 'undefined'.
+        // @ts-expect-error - TS2322 - Type 'PerseusRadioWidgetOptions | undefined' is not assignable to type 'undefined'.
         prevReviewModeRubric.current = reviewModeRubric;
     }, [apiOptions, choices, isLastUsedWidget, reviewModeRubric]);
 
@@ -199,7 +200,7 @@ const BaseRadio = function (props: Props): React.ReactElement {
         // note(matthew): we know this is only getting passed
         // to a WB Clickable button, so we force it to be of
         // type HTMLButtonElement
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'current' does not exist on type 'never'.
+        // @ts-expect-error - TS2339 - Property 'current' does not exist on type 'never'.
         const anyNode = ReactDOM.findDOMNode(ref.current) as any;
         const buttonNode = anyNode as HTMLButtonElement | null | undefined;
 
@@ -249,16 +250,16 @@ const BaseRadio = function (props: Props): React.ReactElement {
             className={`perseus-widget-radio-fieldset ${responsiveClassName}`}
         >
             <legend className="perseus-sr-only">{instructions}</legend>
-            {/* @ts-expect-error [FEI-5003] - TS2322 - Type 'readonly string[]' is not assignable to type 'string'. */}
+            {/* @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'string'. */}
             <div className={instructionsClassName} aria-hidden="true">
                 {instructions}
             </div>
-            {/* @ts-expect-error [FEI-5003] - TS2322 - Type 'readonly string[]' is not assignable to type 'string'. */}
+            {/* @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'string'. */}
             <ul className={className} style={{listStyle: "none"}}>
                 {choices.map((choice, i) => {
                     let Element = Choice;
                     const ref = React.createRef<any>();
-                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'RefObject<unknown>' is not assignable to type 'never'.
+                    // @ts-expect-error - TS2322 - Type 'RefObject<unknown>' is not assignable to type 'never'.
                     choiceRefs.current[i] = ref;
                     const elementProps = {
                         apiOptions: apiOptions,
@@ -348,7 +349,7 @@ const BaseRadio = function (props: Props): React.ReactElement {
                     let listElem = null;
                     let clickHandler = null;
                     if (editMode) {
-                        // @ts-expect-error [FEI-5003] - TS2322 - Type '(e: any) => void' is not assignable to type 'null'.
+                        // @ts-expect-error - TS2322 - Type '(e: any) => void' is not assignable to type 'null'.
                         clickHandler = (e: any) => {
                             // Traverse the parent nodes of the clicked
                             // element.
@@ -377,13 +378,13 @@ const BaseRadio = function (props: Props): React.ReactElement {
                     return (
                         <li
                             key={i}
-                            // @ts-expect-error [FEI-5003] - TS2322 - Type 'HTMLLIElement | null' is not assignable to type 'null'.
+                            // @ts-expect-error - TS2322 - Type 'HTMLLIElement | null' is not assignable to type 'null'.
                             ref={(e) => (listElem = e)}
-                            // @ts-expect-error [FEI-5003] - TS2322 - Type 'readonly string[]' is not assignable to type 'string'.
+                            // @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'string'.
                             className={className}
-                            // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type 'MouseEventHandler<HTMLLIElement> | undefined'.
+                            // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'MouseEventHandler<HTMLLIElement> | undefined'.
                             onClick={clickHandler}
-                            // @ts-expect-error [FEI-5003] - TS2322 - Type '((e: TouchEvent) => void) | null' is not assignable to type 'TouchEventHandler<HTMLLIElement> | undefined'.
+                            // @ts-expect-error - TS2322 - Type '((e: TouchEvent) => void) | null' is not assignable to type 'TouchEventHandler<HTMLLIElement> | undefined'.
                             onTouchStart={
                                 !labelWrap ? null : captureScratchpadTouchStart
                             }

package/src/widgets/radio/choice-icon/choice-icon.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* Component for rendering a letter icon in a library radio choice */
 
 import Color from "@khanacademy/wonder-blocks-color";
@@ -128,7 +129,7 @@ const ChoiceIcon = function (props: ChoiceIconProps): React.ReactElement {
                 multipleSelect={multipleSelect}
             >
                 <div
-                    // @ts-expect-error [FEI-5003] - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
+                    // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
                     style={dynamicStyles}
                     data-test-id="choice-icon__library-choice-icon"
                     className={css(
@@ -145,7 +146,7 @@ const ChoiceIcon = function (props: ChoiceIconProps): React.ReactElement {
                     data-is-radio-icon={true}
                 >
                     <div className={css(styles.innerWrapper)}>
-                        {/* @ts-expect-error [FEI-5003] - TS2786 - 'ChoiceInner' cannot be used as a JSX component. */}
+                        {/* @ts-expect-error - TS2786 - 'ChoiceInner' cannot be used as a JSX component. */}
                         <ChoiceInner
                             pos={pos}
                             showCorrectness={showCorrectness}

package/src/widgets/radio/choice.tsx

@@ -148,7 +148,7 @@ const Choice = function (props: ChoicePropsWithForwardRef): React.ReactElement {
     return (
         <div
             style={{
-                // @ts-expect-error [FEI-5003] - TS2322 - Type '{ dispay: string; flexDirection: "column"; color: string; }' is not assignable to type 'Properties<string | number, string & {}>'.
+                // @ts-expect-error - TS2322 - Type '{ dispay: string; flexDirection: "column"; color: string; }' is not assignable to type 'Properties<string | number, string & {}>'.
                 dispay: "flex",
                 flexDirection: "column",
                 color: Color.offBlack,

package/src/widgets/radio/option-status.tsx

@@ -54,7 +54,7 @@ const OptionStatus = function (props: Props): React.ReactElement {
     // Option status is shown only in review mode, or for incorrectly
     // answered items.
     if (!reviewMode && !previouslyAnswered) {
-        // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
+        // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
         return null;
     }
 

package/src/widgets/radio/widget.tsx

@@ -54,7 +54,7 @@ export type RadioChoiceWithMetadata = PerseusRadioChoice & {
 };
 
 class Radio extends React.Component<Props> {
-    // @ts-expect-error [FEI-5003] - TS2564 - Property 'focusFunction' has no initializer and is not definitely assigned in the constructor.
+    // @ts-expect-error - TS2564 - Property 'focusFunction' has no initializer and is not definitely assigned in the constructor.
     focusFunction: FocusFunction;
 
     static defaultProps: DefaultProps = {
@@ -140,7 +140,7 @@ class Radio extends React.Component<Props> {
                 choicesSelected[index] = choiceStates[i].selected;
 
                 if (props.choices[i].isNoneOfTheAbove) {
-                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'number' is not assignable to type 'null'.
+                    // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'null'.
                     noneOfTheAboveIndex = index;
 
                     if (choicesSelected[i]) {
@@ -174,7 +174,7 @@ class Radio extends React.Component<Props> {
                 choicesSelected[index] = values[i];
 
                 if (props.choices[i].isNoneOfTheAbove) {
-                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'number' is not assignable to type 'null'.
+                    // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'null'.
                     noneOfTheAboveIndex = index;
                     if (choicesSelected[i]) {
                         noneOfTheAboveSelected = true;
@@ -246,7 +246,7 @@ class Radio extends React.Component<Props> {
                 alwaysUpdate={true}
                 linterContext={{
                     ...this.props.linterContext,
-                    // @ts-expect-error [FEI-5003] - TS2322 - Type '{ blockHighlight: true; contentType: string; highlightLint: boolean; paths: readonly string[]; stack: readonly string[]; }' is not assignable to type 'LinterContextProps'.
+                    // @ts-expect-error - TS2322 - Type '{ blockHighlight: true; contentType: string; highlightLint: boolean; paths: readonly string[]; stack: readonly string[]; }' is not assignable to type 'LinterContextProps'.
                     blockHighlight: true,
                 }}
             />
@@ -370,7 +370,7 @@ class Radio extends React.Component<Props> {
                 {
                     choiceStates: newStates,
                 },
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'null' is not assignable to parameter of type '(() => unknown) | undefined'.
+                // @ts-expect-error - TS2345 - Argument of type 'null' is not assignable to parameter of type '(() => unknown) | undefined'.
                 null, // cb
                 true, // silent
             );
@@ -396,7 +396,7 @@ class Radio extends React.Component<Props> {
                 {
                     choiceStates: newStates,
                 },
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'null' is not assignable to parameter of type '(() => unknown) | undefined'.
+                // @ts-expect-error - TS2345 - Argument of type 'null' is not assignable to parameter of type '(() => unknown) | undefined'.
                 null, // cb
                 false, // silent
             );

package/src/widgets/radio.ts

@@ -47,7 +47,7 @@ const _choiceTransform = (
 
         const newChoices = choices.filter((choice, index) => {
             if (choice.isNoneOfTheAbove) {
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'RadioChoiceWithMetadata' is not assignable to type 'null'.
+                // @ts-expect-error - TS2322 - Type 'RadioChoiceWithMetadata' is not assignable to type 'null'.
                 noneOfTheAbove = choice;
                 return false;
             }

package/src/widgets/reaction-diagram.tsx

@@ -26,26 +26,26 @@ class Separator extends React.Component<any> {
     drawArrow = () => {
         // eslint-disable-next-line react/no-string-refs
         const canvas = this.refs["arrowCanvas" + this.props.index];
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getContext' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'getContext' does not exist on type 'ReactInstance'.
         const ctx = canvas.getContext("2d");
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         const path = new Path2D();
         ctx.strokeStyle = "rgb(0,0,0)";
         ctx.lineWidth = 1.2;
         ctx.lineCap = "round";
         const offset = 5;
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'height' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'height' does not exist on type 'ReactInstance'.
         path.moveTo(offset, canvas.height / 2);
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
         path.lineTo(canvas.width - offset, canvas.height / 2);
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
         path.moveTo(canvas.width - 2 * offset, canvas.height / 2 - offset);
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
         path.lineTo(canvas.width - offset, canvas.height / 2);
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
         path.moveTo(canvas.width - 2 * offset, canvas.height / 2 + offset);
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
         path.lineTo(canvas.width - offset, canvas.height / 2);
         ctx.stroke(path);
     };

package/src/widgets/sequence.tsx

@@ -5,10 +5,10 @@ import _ from "underscore";
 import InlineIcon from "../components/inline-icon";
 import {iconOk} from "../icon-paths";
 import * as Changeable from "../mixins/changeable";
-import {PerseusSequenceWidgetOptions} from "../perseus-types";
 import Renderer from "../renderer";
 import Util from "../util";
 
+import type {PerseusSequenceWidgetOptions} from "../perseus-types";
 import type {WidgetExports, WidgetProps} from "../types";
 
 type Rubric = PerseusSequenceWidgetOptions;
@@ -54,7 +54,7 @@ class Sequence extends React.Component<Props, State> {
         const step = parseInt(groupWidgetId.split(" ")[1]);
         if (step === this.state.visible - 1) {
             // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'getWidgetInstance' does not exist on type 'ReactInstance'.
+            // @ts-expect-error - TS2339 - Property 'getWidgetInstance' does not exist on type 'ReactInstance'.
             const widget = this.refs.renderer.getWidgetInstance(
                 "group " + step,
             );