@khanacademy/perseus 7.2.0 → 8.0.0

package/src/__tests__/renderer-api.test.tsx

@@ -56,7 +56,7 @@ describe("Perseus API", function () {
 
     describe("setInputValue", function () {
         it("should be able to produce a correctly graded value", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "5");
             const score = renderer.guessAndScore()[1];
@@ -65,7 +65,7 @@ describe("Perseus API", function () {
         });
 
         it("should be able to produce a wrong value", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3", () => {});
             const score = renderer.guessAndScore()[1];
@@ -74,7 +74,7 @@ describe("Perseus API", function () {
         });
 
         it("should be able to produce an empty score", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3");
             let score = renderer.guessAndScore()[1];
@@ -86,7 +86,7 @@ describe("Perseus API", function () {
         });
 
         it("should be able to accept a callback", function (done) {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3", function () {
                 const guess = renderer.getUserInput()[0];
@@ -99,14 +99,14 @@ describe("Perseus API", function () {
 
     describe("getInputPaths", function () {
         it("should be able to find all the input widgets", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(2);
         });
 
         it("should be able to find all inputs within widgets", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(tableItem);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(8);
@@ -115,7 +115,7 @@ describe("Perseus API", function () {
 
     describe("getDOMNodeForPath", function () {
         it("should find one DOM node per <input>", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
@@ -126,7 +126,7 @@ describe("Perseus API", function () {
         });
 
         it("should find the right DOM nodes for the <input>s", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
@@ -135,9 +135,9 @@ describe("Perseus API", function () {
             );
             _.each(inputPaths, (inputPath, i) => {
                 const $node = $(renderer.getDOMNodeForPath(inputPath));
-                // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+                // @ts-expect-error - TS2769 - No overload matches this call.
                 const $input = $(ReactDOM.findDOMNode(allInputs[i]));
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'closest' does not exist on type 'JQueryStatic'.
+                // @ts-expect-error - TS2339 - Property 'closest' does not exist on type 'JQueryStatic'.
                 expect($input.closest($node).length).toBeTruthy();
             });
         });
@@ -172,18 +172,18 @@ describe("Perseus API", function () {
                 });
 
                 const input =
-                    // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
+                    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
                     ReactDOM.findDOMNode(renderer).querySelector("input");
 
-                // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
+                // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
                 expect($(input).attr("class").includes("focused")).toBe(false);
 
                 TestUtils.Simulate.focus(input);
-                // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
+                // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
                 expect($(input).attr("class").includes("focused")).toBe(true);
 
                 TestUtils.Simulate.blur(input);
-                // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
+                // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
                 expect($(input).attr("class").includes("focused")).toBe(false);
             });
         });
@@ -204,7 +204,7 @@ describe("Perseus API", function () {
                 },
             });
 
-            // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
+            // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
             const input = ReactDOM.findDOMNode(renderer).querySelector("input");
 
             callCount = 0;
@@ -215,7 +215,7 @@ describe("Perseus API", function () {
             // result here. This also means that this test should
             // continue to pass if we decide it makes more sense for
             // this callback to be async, which could reasonably happen
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
+            // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
             return delayedPromise()
                 .then(() => {
                     expect(callCount).toBe(1);
@@ -224,7 +224,7 @@ describe("Perseus API", function () {
 
                     callCount = 0;
                     TestUtils.Simulate.blur(input);
-                    // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
+                    // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
                     return delayedPromise();
                 })
                 .then(() => {
@@ -249,7 +249,7 @@ describe("Perseus API", function () {
             });
 
             const inputs =
-                // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelectorAll' does not exist on type 'Element | Text'.
+                // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelectorAll' does not exist on type 'Element | Text'.
                 ReactDOM.findDOMNode(renderer).querySelectorAll("input");
             const input1 = inputs[0];
             const input2 = inputs[1];
@@ -263,7 +263,7 @@ describe("Perseus API", function () {
             // result here. This also means that this test should
             // continue to pass if we decide it makes more sense for
             // this callback to be async, which could reasonably happen
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
+            // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
             return delayedPromise().then(() => {
                 expect(callCount).toBe(1);
                 expect(oldFocusResult).toEqual(["input-number 1"]);
@@ -289,7 +289,7 @@ describe("Perseus API", function () {
             );
 
             const spans = TestUtils.scryRenderedDOMComponentsWithTag(
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'void' is not assignable to parameter of type 'Component<any, {}, any>'.
+                // @ts-expect-error - TS2345 - Argument of type 'void' is not assignable to parameter of type 'Component<any, {}, any>'.
                 renderer,
                 "span",
             );
@@ -313,7 +313,7 @@ describe("Perseus API", function () {
             );
 
             const spans = TestUtils.scryRenderedDOMComponentsWithTag(
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'void' is not assignable to parameter of type 'Component<any, {}, any>'.
+                // @ts-expect-error - TS2345 - Argument of type 'void' is not assignable to parameter of type 'Component<any, {}, any>'.
                 renderer,
                 "span",
             );

package/src/__tests__/renderer.test.tsx

@@ -149,7 +149,7 @@ describe("renderer", () => {
             mockRunLinter.mockClear();
 
             // Act
-            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type '{ problemNum: number; linterContext: { readonly contentType: "exercise"; readonly highlightLint: true; readonly paths: readonly []; readonly stack: readonly []; }; }' is not assignable to parameter of type 'Pick<{}, never> & InexactPartial<Pick<{}, never>> & InexactPartial<Pick<DefaultProps, keyof DefaultProps>>'.
+            // @ts-expect-error - TS2345 - Argument of type '{ problemNum: number; linterContext: { readonly contentType: "exercise"; readonly highlightLint: true; readonly paths: readonly []; readonly stack: readonly []; }; }' is not assignable to parameter of type 'Pick<{}, never> & InexactPartial<Pick<{}, never>> & InexactPartial<Pick<DefaultProps, keyof DefaultProps>>'.
             rerender(question1, {...extraProps, problemNum: 1});
 
             // Assert
@@ -192,7 +192,7 @@ describe("renderer", () => {
                     ...question1.widgets,
                     // $FlowIgnore[prop-missing]
                     // $FlowIgnore[incompatible-cast]
-                    // @ts-expect-error [FEI-5003] - TS2352 - Conversion of type '{ type: undefined; static?: boolean | undefined; graded?: boolean | undefined; alignment?: string | undefined; options: PerseusCategorizerWidgetOptions | null | undefined; key?: number | undefined; version?: Version | undefined; } | ... 38 more ... | { ...; }' to type 'DropdownWidget' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+                    // @ts-expect-error - TS2352 - Conversion of type '{ type: undefined; static?: boolean | undefined; graded?: boolean | undefined; alignment?: string | undefined; options: PerseusCategorizerWidgetOptions | null | undefined; key?: number | undefined; version?: Version | undefined; } | ... 38 more ... | { ...; }' to type 'DropdownWidget' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
                     "dropdown 1": {
                         ...question1.widgets["dropdown 1"],
                         // $FlowIgnore[incompatible-cast]
@@ -298,7 +298,7 @@ describe("renderer", () => {
             originalImage = window.Image;
             // Mock HTML Image so we can trigger onLoad callbacks and see full
             // image rendering.
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Mock<Record<string, any>, [], any>' is not assignable to type 'new (width?: number | undefined, height?: number | undefined) => HTMLImageElement'.
+            // @ts-expect-error - TS2322 - Type 'Mock<Record<string, any>, [], any>' is not assignable to type 'new (width?: number | undefined, height?: number | undefined) => HTMLImageElement'.
             window.Image = jest.fn(() => {
                 const img: Record<string, any> = {};
                 images.push(img);
@@ -426,7 +426,7 @@ describe("renderer", () => {
 
             const wrapperStyle = getComputedStyle(
                 // $FlowIgnore[incompatible-call]
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
+                // @ts-expect-error - TS2345 - Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
                 screen.getByAltText("This image has dimensions").parentElement, // eslint-disable-line testing-library/no-node-access
             );
             expect(wrapperStyle.maxWidth).toBe("420px");
@@ -452,7 +452,7 @@ describe("renderer", () => {
 
             const wrapperStyle = getComputedStyle(
                 // $FlowIgnore[incompatible-call]
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
+                // @ts-expect-error - TS2345 - Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
                 screen.getByAltText("This image doesn't").parentElement, // eslint-disable-line testing-library/no-node-access
             );
             expect(wrapperStyle.maxWidth).toBe("");
@@ -683,11 +683,11 @@ describe("renderer", () => {
             );
             expect(zoomable).not.toBeUndefined();
             expect(zoomable).not.toBeNull();
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'style' does not exist on type 'Element'.
+            // @ts-expect-error - TS2339 - Property 'style' does not exist on type 'Element'.
             expect(zoomable.style.transform).not.toBe("");
 
             /* eslint-disable testing-library/no-node-access */
-            // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
+            // @ts-expect-error - TS2531 - Object is possibly 'null'.
             expect(zoomable.parentElement.style.transform).not.toBe("");
             /* eslint-enable testing-library/no-node-access */
         });
@@ -1139,7 +1139,7 @@ describe("renderer", () => {
 
             const {renderer} = renderQuestion(mockedItem);
             const [widget1, widget2, widget3] = renderer.findWidgets(
-                // @ts-expect-error [FEI-5003] - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
+                // @ts-expect-error - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
                 (_, info) => info.type === "mock-widget",
             );
             widget1.restoreSerializedState = makeRestoreSerializedStateMock;
@@ -1311,7 +1311,7 @@ describe("renderer", () => {
                     break;
                 }
                 // eslint-disable-next-line testing-library/no-node-access
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
+                // @ts-expect-error - TS2322 - Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
                 // eslint-disable-next-line testing-library/no-node-access
                 el = el.parentElement;
             }
@@ -1334,7 +1334,7 @@ describe("renderer", () => {
                     },
                 },
                 {},
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type '{ problemNum: number; }' is not assignable to parameter of type 'Pick<{}, never> & InexactPartial<Pick<{}, never>> & InexactPartial<Pick<DefaultProps, keyof DefaultProps>>'.
+                // @ts-expect-error - TS2345 - Argument of type '{ problemNum: number; }' is not assignable to parameter of type 'Pick<{}, never> & InexactPartial<Pick<{}, never>> & InexactPartial<Pick<DefaultProps, keyof DefaultProps>>'.
                 {problemNum: 1},
             );
 
@@ -1349,7 +1349,7 @@ describe("renderer", () => {
             // Arrange
             const {renderer} = renderQuestion(mockedItem);
             const widgets = renderer.findWidgets(
-                // @ts-expect-error [FEI-5003] - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
+                // @ts-expect-error - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
                 (_, info) => info.type === "mock-widget",
             );
             widgets.forEach(
@@ -1376,7 +1376,7 @@ describe("renderer", () => {
             // Arrange
             const {renderer} = renderQuestion(mockedItem);
             const widgets = renderer.findWidgets(
-                // @ts-expect-error [FEI-5003] - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
+                // @ts-expect-error - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
                 (_, info) => info.type === "mock-widget",
             );
             widgets.forEach(
@@ -1489,7 +1489,7 @@ describe("renderer", () => {
 
             // Assert
             // "button" role is the WB dropdown's "opener" element
-            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement'.
+            // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement'.
             expect(within(node).queryAllByRole("button")).toHaveLength(1);
         });
 

package/src/__tests__/server-item-renderer.test.tsx

@@ -18,13 +18,13 @@ import InputNumberExport from "../widgets/input-number";
 import RadioWidgetExport from "../widgets/radio";
 
 import MockAssetLoadingWidgetExport, {
-    MockAssetLoadingWidget,
     mockedAssetItem,
 } from "./mock-asset-loading-widget";
 import MockWidgetExport from "./mock-widget";
 
 import type {PerseusItem} from "../perseus-types";
 import type {APIOptions} from "../types";
+import type {MockAssetLoadingWidget} from "./mock-asset-loading-widget";
 
 // This looks alot like `widgets/__tests__/renderQuestion.jsx', except we use
 // the ServerItemRenderer instead of Renderer
@@ -167,7 +167,7 @@ describe("server item renderer", () => {
         const node = renderer.getDOMNodeForPath(["input-number 1"]);
 
         // Assert
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement'.
+        // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement'.
         expect(await within(node).findAllByRole("textbox")).toHaveLength(1);
     });
 
@@ -300,7 +300,7 @@ describe("server item renderer", () => {
         // Act
         // setAssetStatus() is not part of the Widget interface, it's specific
         // this test.
-        // @ts-expect-error [FEI-5003] - TS2352 - Conversion of type 'Widget' to type 'MockAssetLoadingWidget' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+        // @ts-expect-error - TS2352 - Conversion of type 'Widget' to type 'MockAssetLoadingWidget' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
         const widget = mockedWidget as MockAssetLoadingWidget;
         widget.setAssetStatus("ABC", true);
 

package/src/__tests__/tex-wrangler.test.ts

@@ -13,7 +13,7 @@ const assertWrangled = (toWrangle: string, check: string) => {
 
 const assertParsed = (toParse: undefined | string, check: string) => {
     // We ignore whitespace when comparing
-    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
+    // @ts-expect-error - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
     const parsed = parseTex(toParse).replace(whitespaceRegex, "");
     const checkNoSpace = check.replace(whitespaceRegex, "");
     expect(parsed).toBe(checkNoSpace);

package/src/article-renderer.tsx

@@ -5,7 +5,6 @@
 
 import * as PerseusLinter from "@khanacademy/perseus-linter";
 import classNames from "classnames";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import ProvideKeypad from "./mixins/provide-keypad";
@@ -13,42 +12,44 @@ import {ClassNames as ApiClassNames, ApiOptions} from "./perseus-api";
 import Renderer from "./renderer";
 import Util from "./util";
 
-const rendererProps = PropTypes.shape({
-    content: PropTypes.string,
-    widgets: PropTypes.objectOf(PropTypes.any),
-    images: PropTypes.objectOf(PropTypes.any),
-});
-
-class ArticleRenderer extends React.Component<any, any> {
+import type {KeypadProps} from "./mixins/provide-keypad";
+import type {PerseusRenderer} from "./perseus-types";
+import type {APIOptions} from "./types";
+import type {LinterContextProps} from "@khanacademy/perseus-linter";
+
+type Props = {
+    apiOptions: APIOptions;
+    json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
+
+    // Whether to use the new Bibliotron styles for articles
+    /**
+     * @deprecated Does nothing
+     */
+    useNewStyles: boolean;
+    linterContext: LinterContextProps;
+    legacyPerseusLint?: ReadonlyArray<string>;
+} & KeypadProps;
+
+type DefaultProps = {
+    apiOptions: Props["apiOptions"];
+    useNewStyles: Props["useNewStyles"];
+    linterContext: Props["linterContext"];
+};
+
+type State = {
+    keypadElement: any | null;
+};
+
+class ArticleRenderer extends React.Component<Props, State> {
     _currentFocus: any;
 
-    static propTypes = {
-        ...ProvideKeypad.propTypes,
-        apiOptions: PropTypes.shape({
-            onFocusChange: PropTypes.func,
-            isMobile: PropTypes.bool,
-        }),
-        json: PropTypes.oneOfType([
-            rendererProps,
-            PropTypes.arrayOf(rendererProps),
-        ]).isRequired,
-
-        // Whether to use the new Bibliotron styles for articles
-        /**
-         * @deprecated Does nothing
-         */
-        useNewStyles: PropTypes.bool,
-        linterContext: PerseusLinter.linterContextProps,
-        legacyPerseusLint: PropTypes.arrayOf(PropTypes.string),
-    };
-
-    static defaultProps: any = {
-        apiOptions: {},
+    static defaultProps: DefaultProps = {
+        apiOptions: ApiOptions.defaults,
         useNewStyles: false,
         linterContext: PerseusLinter.linterContextDefault,
     };
 
-    constructor(props: any) {
+    constructor(props: Props) {
         super(props);
         this.state = ProvideKeypad.getInitialState.call(this);
     }
@@ -58,7 +59,7 @@ class ArticleRenderer extends React.Component<any, any> {
         this._currentFocus = null;
     }
 
-    shouldComponentUpdate(nextProps: any, nextState: any): any {
+    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
         return nextProps !== this.props || nextState !== this.state;
     }
 
@@ -96,7 +97,7 @@ class ArticleRenderer extends React.Component<any, any> {
         if (this._currentFocus) {
             const [sectionRef, ...focusPath] = this._currentFocus;
             // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'getInputPaths' does not exist on type 'ReactInstance'.
+            // @ts-expect-error - TS2339 - Property 'getInputPaths' does not exist on type 'ReactInstance'.
             const inputPaths = this.refs[sectionRef].getInputPaths();
             didFocusInput = inputPaths.some((inputPath) => {
                 return Util.inputPathsEqual(inputPath, focusPath);
@@ -107,18 +108,18 @@ class ArticleRenderer extends React.Component<any, any> {
             this.props.apiOptions.onFocusChange(
                 this._currentFocus,
                 prevFocusPath,
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'getDOMNode' does not exist on type 'never'.
+                // @ts-expect-error - TS2339 - Property 'getDOMNode' does not exist on type 'never'.
                 didFocusInput && keypadElement && keypadElement.getDOMNode(),
             );
         }
 
-        // @ts-expect-error [FEI-5003] - TS1345 - An expression of type 'void' cannot be tested for truthiness.
+        // @ts-expect-error - TS1345 - An expression of type 'void' cannot be tested for truthiness.
         if (keypadElement) {
             if (didFocusInput) {
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'activate' does not exist on type 'never'.
+                // @ts-expect-error - TS2339 - Property 'activate' does not exist on type 'never'.
                 keypadElement.activate();
             } else {
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'dismiss' does not exist on type 'never'.
+                // @ts-expect-error - TS2339 - Property 'dismiss' does not exist on type 'never'.
                 keypadElement.dismiss();
             }
         }
@@ -149,7 +150,7 @@ class ArticleRenderer extends React.Component<any, any> {
         if (this._currentFocus) {
             const [sectionRef, ...inputPath] = this._currentFocus;
             // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'blurPath' does not exist on type 'ReactInstance'.
+            // @ts-expect-error - TS2339 - Property 'blurPath' does not exist on type 'ReactInstance'.
             this.refs[sectionRef].blurPath(inputPath);
         }
     };

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

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import * as React from "react";
 
 type StoryArgs = Record<any, any>;

package/src/components/__tests__/number-input.test.tsx

@@ -31,7 +31,7 @@ describe("NumberInput", function () {
         );
 
         const node = TestUtils.renderIntoDocument(<NumberInput {...props} />);
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
+        // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
         TestUtils.Simulate.change(ReactDOM.findDOMNode(node), {
             target: {value: input},
         });
@@ -39,12 +39,12 @@ describe("NumberInput", function () {
     };
 
     it("basic input", function () {
-        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
         testInputResult("42", 42);
     });
 
     it("invalid input does not change", function () {
-        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
         testInputResult("asdf", STARTING_VALUE);
     });
 
@@ -78,7 +78,7 @@ describe("NumberInput", function () {
                 useArrowKeys={keysEnabled}
             />,
         );
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
+        // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
         TestUtils.Simulate.keyDown(ReactDOM.findDOMNode(node), {key: key});
         expect(newVal).toEqual(endingValue);
     };

package/src/components/__tests__/sortable.test.tsx

@@ -89,10 +89,10 @@ describe("moveOptionToIndex", () => {
             throw new Error("Failed to render");
         }
 
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'moveOptionToIndex' does not exist on type 'never'.
+        // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'never'.
         sortable.moveOptionToIndex("a", 1);
 
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getOptions' does not exist on type 'never'.
+        // @ts-expect-error - TS2339 - Property 'getOptions' does not exist on type 'never'.
         expect(sortable?.getOptions()).toStrictEqual(["b", "a", "c"]);
     });
 

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

@@ -108,7 +108,7 @@ class FixedToResponsive extends React.Component<Props, State> {
         const spacer = (
             <div
                 style={{
-                    // @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.
+                    // @ts-expect-error - 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

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/no-unsafe */
 import $ from "jquery";
 import * as React from "react";
@@ -83,9 +84,9 @@ class Graph extends React.Component<Props> {
     protractor: any;
     ruler: any;
     _graphie: any;
-    // @ts-expect-error [FEI-5003] - TS2564 - Property '_hasSetupGraphieThisUpdate' has no initializer and is not definitely assigned in the constructor.
+    // @ts-expect-error - TS2564 - Property '_hasSetupGraphieThisUpdate' has no initializer and is not definitely assigned in the constructor.
     _hasSetupGraphieThisUpdate: boolean;
-    // @ts-expect-error [FEI-5003] - TS2564 - Property '_shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
+    // @ts-expect-error - TS2564 - Property '_shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
     _shouldSetupGraphie: boolean;
 
     static defaultProps: DefaultProps = {
@@ -186,7 +187,7 @@ class Graph extends React.Component<Props> {
 
         // eslint-disable-next-line react/no-string-refs
         const graphieDiv = ReactDOM.findDOMNode(this.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();
 
         // Content creators may need to explicitly add the dollar signs so the
@@ -265,7 +266,7 @@ class Graph extends React.Component<Props> {
             });
 
             $instructionsWrapper.append($instructions);
-            // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2339 - Property 'append' does not exist on type 'JQueryStatic'.
+            // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'append' does not exist on type 'JQueryStatic'.
             $(graphieDiv).append($instructionsWrapper);
         } else {
             $instructionsWrapper = undefined;
@@ -280,7 +281,7 @@ class Graph extends React.Component<Props> {
                           $instructionsWrapper = null;
                       }
                       // eslint-disable-next-line @babel/no-invalid-this
-                      // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+                      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                       // eslint-disable-next-line @babel/no-invalid-this
                       this.props.onMouseDown(coord);
                   }, this)
@@ -345,7 +346,7 @@ class Graph extends React.Component<Props> {
         }
 
         if (this.props.showProtractor) {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const coord = this.pointsFromNormalized([[0.5, 0.05]])[0];
             this.protractor = this._graphie.protractor(coord);
         }
@@ -357,7 +358,7 @@ class Graph extends React.Component<Props> {
         }
 
         if (this.props.showRuler) {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const coord = this.pointsFromNormalized([[0.5, 0.25]])[0];
             const extent =
                 this._graphie.range[0][1] - this._graphie.range[0][0];
@@ -394,7 +395,7 @@ class Graph extends React.Component<Props> {
         if (imageData.url) {
             const scale = this.props.box[0] / interactiveSizes.defaultBoxSize;
             image = (
-                // @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">'.
+                // @ts-expect-error - 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}
                     width={imageData.width}
@@ -414,11 +415,11 @@ class Graph extends React.Component<Props> {
                     width: this.props.box[0],
                     height: this.props.box[1],
                 }}
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
+                // @ts-expect-error - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
                 onMouseOut={this.onMouseOut}
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
+                // @ts-expect-error - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
                 onMouseOver={this.onMouseOver}
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onClick' does not exist on type 'Graph'.
+                // @ts-expect-error - TS2339 - Property 'onClick' does not exist on type 'Graph'.
                 onClick={this.onClick}
             >
                 {image}