@khanacademy/perseus 4.0.2 → 6.0.0

package/src/widgets/__tests__/__snapshots__/video.test.ts.snap

@@ -2,160 +2,152 @@
 
 exports[`video widget should snapshot on mobile: first mobile render 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
-        <div
-          class="paragraph"
-        >
-          Watch the Biogeography: Where Life Lives video to find the answer.
-        </div>
+        Watch the Biogeography: Where Life Lives video to find the answer.
       </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="1"
       >
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight widget-block"
         >
           <div
-            class="perseus-widget-container widget-nohighlight widget-block"
+            class="default_xu2jcg"
           >
             <div
-              class="default_xu2jcg"
+              class="fixed-to-responsive"
+              style="max-width: 1280px; max-height: 720px;"
             >
               <div
-                class="fixed-to-responsive"
-                style="max-width: 1280px; max-height: 720px;"
+                style="padding-bottom: 56.25%;"
+              />
+              <div
+                class="default_xu2jcg-o_O-srOnly_19bpjuy"
               >
-                <div
-                  style="padding-bottom: 56.25%;"
-                />
-                <div
-                  class="default_xu2jcg-o_O-srOnly_19bpjuy"
-                >
-                  Khan Academy video wrapper
-                </div>
-                <iframe
-                  allowfullscreen=""
-                  class="perseus-video-widget"
-                  height="720"
-                  sandbox="allow-same-origin allow-scripts"
-                  src="https://www.khanacademy.org/embed_video?slug=biogeography-where-life-lives&internal_video_only=1"
-                  width="1280"
-                />
+                Khan Academy video wrapper
               </div>
+              <iframe
+                allowfullscreen=""
+                class="perseus-video-widget"
+                height="720"
+                sandbox="allow-same-origin allow-scripts"
+                src="https://www.khanacademy.org/embed_video?slug=biogeography-where-life-lives&internal_video_only=1"
+                width="1280"
+              />
+            </div>
+            <div
+              class="default_xu2jcg-o_O-transcriptLink_18xwqfz"
+            >
+              <span
+                class="text_f1191h"
+              />
               <div
-                class="default_xu2jcg-o_O-transcriptLink_18xwqfz"
+                aria-hidden="true"
+                class="default_xu2jcg-o_O-inlineStyles_sc01dy"
+              />
+              <a
+                class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
+                href="/transcript/videoNotFound"
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                <span
-                  class="text_f1191h"
-                />
-                <div
-                  aria-hidden="true"
-                  class="default_xu2jcg-o_O-inlineStyles_sc01dy"
-                />
-                <a
-                  class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
-                  href="/transcript/videoNotFound"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  See video transcript
-                </a>
-              </div>
+                See video transcript
+              </a>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`video widget should snapshot: first render 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
-        <div
-          class="paragraph"
-        >
-          Watch the Biogeography: Where Life Lives video to find the answer.
-        </div>
+        Watch the Biogeography: Where Life Lives video to find the answer.
       </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="1"
       >
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight widget-block"
         >
           <div
-            class="perseus-widget-container widget-nohighlight widget-block"
+            class="default_xu2jcg"
           >
             <div
-              class="default_xu2jcg"
+              class="fixed-to-responsive"
+              style="max-width: 1280px; max-height: 720px;"
             >
               <div
-                class="fixed-to-responsive"
-                style="max-width: 1280px; max-height: 720px;"
+                style="padding-bottom: 56.25%;"
+              />
+              <div
+                class="default_xu2jcg-o_O-srOnly_19bpjuy"
               >
-                <div
-                  style="padding-bottom: 56.25%;"
-                />
-                <div
-                  class="default_xu2jcg-o_O-srOnly_19bpjuy"
-                >
-                  Khan Academy video wrapper
-                </div>
-                <iframe
-                  allowfullscreen=""
-                  class="perseus-video-widget"
-                  height="720"
-                  sandbox="allow-same-origin allow-scripts"
-                  src="https://www.khanacademy.org/embed_video?slug=biogeography-where-life-lives&internal_video_only=1"
-                  width="1280"
-                />
+                Khan Academy video wrapper
               </div>
+              <iframe
+                allowfullscreen=""
+                class="perseus-video-widget"
+                height="720"
+                sandbox="allow-same-origin allow-scripts"
+                src="https://www.khanacademy.org/embed_video?slug=biogeography-where-life-lives&internal_video_only=1"
+                width="1280"
+              />
+            </div>
+            <div
+              class="default_xu2jcg-o_O-transcriptLink_18xwqfz"
+            >
+              <span
+                class="text_f1191h"
+              />
               <div
-                class="default_xu2jcg-o_O-transcriptLink_18xwqfz"
+                aria-hidden="true"
+                class="default_xu2jcg-o_O-inlineStyles_sc01dy"
+              />
+              <a
+                class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
+                href="/transcript/videoNotFound"
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                <span
-                  class="text_f1191h"
-                />
-                <div
-                  aria-hidden="true"
-                  class="default_xu2jcg-o_O-inlineStyles_sc01dy"
-                />
-                <a
-                  class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
-                  href="/transcript/videoNotFound"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  See video transcript
-                </a>
-              </div>
+                See video transcript
+              </a>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;

package/src/widgets/__tests__/group.test.tsx

@@ -279,7 +279,6 @@ describe("group widget", () => {
                   "coefficient": false,
                   "currentValue": "99",
                   "labelText": "value rounded to the nearest ten",
-                  "multipleNumberInput": false,
                   "rightAlign": false,
                   "size": "normal",
                   "static": false,
@@ -288,7 +287,6 @@ describe("group widget", () => {
                   "answerForms": [],
                   "coefficient": false,
                   "labelText": "value rounded to the nearest hundred",
-                  "multipleNumberInput": false,
                   "rightAlign": false,
                   "size": "normal",
                   "static": false,

package/src/widgets/__tests__/matcher.test.tsx

@@ -1,4 +1,3 @@
-import getRenderA11yString from "katex/dist/contrib/render-a11y-string";
 import * as React from "react";
 import "@testing-library/jest-dom";
 
@@ -26,15 +25,18 @@ describe("matcher widget", () => {
 
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
             ...testDependencies,
-            getKaTeX: () => {
-                return Promise.resolve({});
+            TeX: ({
+                children,
+                onRender: onLoad,
+            }: {
+                children: React.ReactNode;
+                onRender?: () => unknown;
+            }) => {
+                React.useLayoutEffect(() => {
+                    onLoad?.();
+                }, [onLoad]);
+                return <span className="tex-mock">{children}</span>;
             },
-            TeX: ({children}: {children: React.ReactNode}) => (
-                <span className="tex-mock">{children}</span>
-            ),
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Promise<any>' is not assignable to type '() => Promise<katexA11y>'.
-            getRenderA11yString: Promise.resolve(getRenderA11yString),
-            shouldUseFutureKaTeX: (flag: boolean) => {},
         });
     });
 
@@ -149,4 +151,26 @@ describe("matcher widget", () => {
         // Assert
         expect(renderer).toHaveBeenAnsweredIncorrectly();
     });
+
+    it("is scored incorrect if the math renderer hasn't loaded yet", () => {
+        // Arrange: stub the TeX renderer to never call its onRender prop,
+        // which is how the matcher knows the math renderer is ready.
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            TeX: () => {
+                return null;
+            },
+        });
+
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+        const {renderer} = renderQuestion(question1, apiOptions);
+
+        // Act
+        renderer.guessAndScore();
+
+        // Assert
+        expect(renderer).toHaveBeenAnsweredIncorrectly();
+    });
 });

package/src/widgets/__tests__/radio/focus-ring.test.tsx

@@ -10,7 +10,6 @@ describe("choice icon", () => {
     describe.each([[true], [false]])("multipleSelect: %s", (multipleSelect) => {
         it("renders with the correct border radius", () => {
             // Arrange/Act
-            // @ts-expect-error [FEI-5003] - TS2739 - Type '{ multipleSelect: any; }' is missing the following properties from type 'Props': visible, color
             render(<FocusRing multipleSelect={multipleSelect} />);
 
             const focusRing = screen.getByTestId("focus-ring");

package/src/widgets/expression.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import * as KAS from "@khanacademy/kas";
-import {KeypadInput, KeypadTypes} from "@khanacademy/math-input";
+import {KeypadInput, KeypadType} from "@khanacademy/math-input";
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import classNames from "classnames";
@@ -9,7 +9,10 @@ import _ from "underscore";
 
 import InlineIcon from "../components/inline-icon";
 import MathInput from "../components/math-input";
-import Tooltip from "../components/tooltip";
+import Tooltip, {
+    HorizontalDirection,
+    VerticalDirection,
+} from "../components/tooltip";
 import {iconExclamationSign} from "../icon-paths";
 import {Errors as PerseusErrors, Log} from "../logging/log";
 import * as Changeable from "../mixins/changeable";
@@ -87,6 +90,9 @@ type OnInputErrorFunctionType = (
 
 // The new, MathQuill input expression widget
 export class Expression extends React.Component<Props, ExpressionState> {
+    _isMounted = false;
+    errorTimeout: null | number = null;
+
     //#region Previously a class extension
     /* Content creators input a list of answers which are matched from top to
      * bottom. The intent is that they can include spcific solutions which should
@@ -334,9 +340,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
         this._isMounted = false;
     };
 
-    _isMounted = false;
-    errorTimeout: null | number = null;
-
     simpleValidate: (
         rubric: Rubric,
         onInputError: OnInputErrorFunctionType,
@@ -478,9 +481,9 @@ export class Expression extends React.Component<Props, ExpressionState> {
             <span className="error-tooltip" role="tooltip">
                 <Tooltip
                     className="error-text-container"
-                    horizontalPosition="right"
-                    horizontalAlign="left"
-                    verticalPosition="top"
+                    horizontalPosition={HorizontalDirection.Right}
+                    horizontalAlign={HorizontalDirection.Left}
+                    verticalPosition={VerticalDirection.Top}
                     arrowSize={10}
                     borderColor="#fcc335"
                     show={this.state.showErrorText}
@@ -549,7 +552,7 @@ const keypadConfigurationForProps = (
 ) => {
     // Always use the Expression keypad, regardless of the button sets that have
     // been enabled.
-    const keypadType = KeypadTypes.EXPRESSION;
+    const keypadType = KeypadType.EXPRESSION;
 
     // Extract any and all variables and constants from the answer forms.
     const uniqueExtraVariables: Record<string, any> = {};

package/src/widgets/grapher.tsx

@@ -476,15 +476,15 @@ class Grapher extends React.Component<Props> {
     _calculateMobileTickStep(
         gridStep: JSX.LibraryManagedAttributes<
             typeof Graphie,
-            React.ComponentProps<typeof Graphie>
+            Required<React.ComponentProps<typeof Graphie>>
         >["gridStep"],
         step: JSX.LibraryManagedAttributes<
             typeof Graphie,
-            React.ComponentProps<typeof Graphie>
+            Required<React.ComponentProps<typeof Graphie>>
         >["step"],
         ranges: JSX.LibraryManagedAttributes<
             typeof Graphie,
-            React.ComponentProps<typeof Graphie>
+            Required<React.ComponentProps<typeof Graphie>>
         >["ranges"],
     ): any {
         const tickStep = Util.constrainedTickStepsFromTickSteps(step, ranges);

package/src/widgets/image.tsx

@@ -12,7 +12,7 @@ import Renderer from "../renderer";
 import {baseUnitPx} from "../styles/constants";
 import mediaQueries from "../styles/media-queries";
 
-import type {PerseusImageWidgetOptions} from "../perseus-types";
+import type {Range, PerseusImageWidgetOptions} from "../perseus-types";
 import type {
     ChangeFn,
     PerseusScore,
@@ -21,7 +21,7 @@ import type {
 } from "../types";
 
 const defaultBoxSize = 400;
-const defaultRange = [0, 10];
+const defaultRange: Range = [0, 10];
 const defaultBackgroundImage = {
     url: null,
     width: 0,

package/src/widgets/interaction/element-container.tsx

@@ -10,7 +10,7 @@ import {
     iconTrash,
 } from "../../icon-paths";
 
-type ElementContainerProps = {
+type Props = {
     children: React.ReactElement<any> | ReadonlyArray<React.ReactElement<any>>;
     initiallyVisible: boolean;
     onDelete?: () => void | null | undefined;
@@ -19,12 +19,11 @@ type ElementContainerProps = {
     title: string | React.ReactElement<any>;
 };
 
-class ElementContainer extends React.Component<
-    ElementContainerProps,
-    {
-        show: boolean;
-    }
-> {
+type State = {
+    show: boolean;
+};
+
+class ElementContainer extends React.Component<Props, State> {
     static defaultProps: {
         initiallyVisible: boolean;
         title: string;
@@ -33,7 +32,7 @@ class ElementContainer extends React.Component<
         title: "More",
     };
 
-    constructor(props: ElementContainerProps) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {

package/src/widgets/interactive-graph.tsx

@@ -43,7 +43,7 @@ const TRASH_ICON_URI =
 
 const defaultBackgroundImage = {
     url: null,
-} as const;
+};
 
 const eq = Util.eq;
 const deepEq = Util.deepEq;
@@ -417,7 +417,6 @@ class InteractiveGraph extends React.Component<Props, State> {
             [-10, 10],
         ],
         step: [1, 1],
-        // @ts-expect-error [FEI-5003] - TS2739 - Type '{ readonly url: null; }' is missing the following properties from type 'PerseusImageBackground': width, height
         backgroundImage: defaultBackgroundImage,
         markings: "graph",
         showTooltips: false,
@@ -1984,9 +1983,10 @@ class InteractiveGraph extends React.Component<Props, State> {
             instructions = undefined;
         }
 
-        const onMouseDown = this.isClickToAddPoints()
-            ? this.handleAddPointsMouseDown
-            : null;
+        let onMouseDown;
+        if (this.isClickToAddPoints()) {
+            onMouseDown = this.handleAddPointsMouseDown;
+        }
 
         const gridStep =
             this.props.gridStep ||

package/src/widgets/label-image/__stories__/answer-choices.stories.tsx

@@ -87,12 +87,10 @@ class WithState extends React.Component<
     }
 }
 
-export const SingleSelect: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SingleSelect = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };
 
-export const MultipleSelect: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultipleSelect = (args: StoryArgs): React.ReactElement => {
     return <WithState multipleSelect={true} />;
 };

package/src/widgets/label-image/__stories__/marker.stories.tsx

@@ -31,7 +31,7 @@ const Wrapper = (props) => (
 // TODO(jeremy): There are a bunch of props that we have to pass to the Marker
 // that are not used by it, but required because we share a props type.
 
-export const Unfilled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Unfilled = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: [],
@@ -46,9 +46,7 @@ export const Unfilled: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const UnfilledPulsate: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const UnfilledPulsate = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: [],
@@ -63,9 +61,7 @@ export const UnfilledPulsate: React.FC<StoryArgs> = (
     return <Wrapper {...props} />;
 };
 
-export const UnfilledSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const UnfilledSelected = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: [],
@@ -80,7 +76,7 @@ export const UnfilledSelected: React.FC<StoryArgs> = (
     return <Wrapper {...props} />;
 };
 
-export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Filled = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["Fiat"],
@@ -95,9 +91,7 @@ export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const FilledSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const FilledSelected = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["Fiat"],
@@ -112,7 +106,7 @@ export const FilledSelected: React.FC<StoryArgs> = (
     return <Wrapper {...props} />;
 };
 
-export const Incorrect: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Incorrect = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["Fiat"],
@@ -128,9 +122,7 @@ export const Incorrect: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const IncorrectSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const IncorrectSelected = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["Fiat"],
@@ -146,7 +138,7 @@ export const IncorrectSelected: React.FC<StoryArgs> = (
     return <Wrapper {...props} />;
 };
 
-export const Correct: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Correct = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["BMW", "Ferrari"],
@@ -162,9 +154,7 @@ export const Correct: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const CorrectSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const CorrectSelected = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         selected: ["BMW", "Ferrari"],

package/src/widgets/label-image/marker.tsx

@@ -13,7 +13,7 @@ import {iconCheck, iconMinus} from "../../icon-paths";
 
 import type {InteractiveMarkerType} from "./types";
 
-type MarkerProps = InteractiveMarkerType & {
+type Props = InteractiveMarkerType & {
     // Whether this marker has been selected by user.
     showSelected: boolean;
     // Whether this marker should pulsate to draw user attention.
@@ -23,12 +23,12 @@ type MarkerProps = InteractiveMarkerType & {
     onKeyDown: (e: KeyboardEvent) => void;
 };
 
-type MarkerState = {
+type State = {
     // Whether the marker button has input focus.
     isFocused: boolean;
 };
 
-export default class Marker extends React.Component<MarkerProps, MarkerState> {
+export default class Marker extends React.Component<Props, State> {
     // The marker icon element.
     _icon: HTMLElement | null | undefined;
 
@@ -38,7 +38,7 @@ export default class Marker extends React.Component<MarkerProps, MarkerState> {
         selected: [],
     };
 
-    state: MarkerState = {
+    state: State = {
         isFocused: false,
     };