@khanacademy/perseus 7.2.1 → 9.0.0

package/src/util/math.ts

@@ -38,7 +38,7 @@ const KhanMath = {
             // TODO(kevinb): rewrite using rest args instead of arguments
             // eslint-disable-next-line prefer-rest-params
             const rest = [].slice.call(arguments, 1);
-            // @ts-expect-error [FEI-5003] - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+            // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
             return KhanMath.getGCD(a, KhanMath.getGCD(...rest));
         }
         let mod;
@@ -60,7 +60,7 @@ const KhanMath = {
             // TODO(kevinb): rewrite using rest args instead of arguments
             // eslint-disable-next-line prefer-rest-params
             const rest = [].slice.call(arguments, 1);
-            // @ts-expect-error [FEI-5003] - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+            // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
             return KhanMath.getLCM(a, KhanMath.getLCM(...rest));
         }
         return Math.abs(a * b) / KhanMath.getGCD(a, b);
@@ -91,7 +91,7 @@ const KhanMath = {
 
         return true;
     },
-    // @ts-expect-error [FEI-5003] - TS2366 - Function lacks ending return statement and return type does not include 'undefined'.
+    // @ts-expect-error - TS2366 - Function lacks ending return statement and return type does not include 'undefined'.
     getPrimeFactorization: function (number: number): ReadonlyArray<number> {
         if (number === 1) {
             return [];
@@ -121,7 +121,7 @@ const KhanMath = {
     // Round a number to a certain number of decimal places
     roundTo: function (precision: number, num: number): number {
         const factor = Math.pow(10, precision).toFixed(5);
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'number'. | TS2363 - The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type. | TS2363 - The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
+        // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'number'. | TS2363 - The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type. | TS2363 - The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
         return Math.round((num * factor).toFixed(5)) / factor;
     },
 

package/src/util/react-render.tsx

@@ -8,7 +8,7 @@ export default function render<ElementType extends React.ElementType>(
     callback?: () => void,
 ): React.ElementRef<ElementType> {
     // TODO(LP-11406): Replace this, or callers, with React Portal
-    // @ts-expect-error [FEI-5003] - TS2322 - Type 'void' is not assignable to type 'ElementRef<ElementType>'.
+    // @ts-expect-error - TS2322 - Type 'void' is not assignable to type 'ElementRef<ElementType>'.
     // eslint-disable-next-line no-restricted-syntax
     return ReactDOM.render(
         /**

package/src/util/scroll-utils.ts

@@ -4,7 +4,7 @@
 
 // Polyfill scrollTo if it doesn't exist
 if (typeof HTMLElement !== "undefined" && !HTMLElement.prototype.scrollTo) {
-    // @ts-expect-error [FEI-5003] - TS2322 - Type '(left: number, top: any) => void' is not assignable to type '{ (options?: ScrollToOptions | undefined): void; (x: number, y: number): void; }'.
+    // @ts-expect-error - TS2322 - Type '(left: number, top: any) => void' is not assignable to type '{ (options?: ScrollToOptions | undefined): void; (x: number, y: number): void; }'.
     HTMLElement.prototype.scrollTo = function (left, top: any) {
         this.scrollLeft = left;
         this.scrollTop = top;
@@ -44,7 +44,7 @@ const scrollElementToOffset = (
     const startPosition =
         elementOrWindow === window
             ? window.pageYOffset
-            : // @ts-expect-error [FEI-5003] - TS2551 - Property 'scrollTop' does not exist on type 'HTMLElement | Window'. Did you mean 'scrollTo'?
+            : // @ts-expect-error - TS2551 - Property 'scrollTop' does not exist on type 'HTMLElement | Window'. Did you mean 'scrollTo'?
               elementOrWindow.scrollTop;
     const endPosition = offset;
     const scrollDistance = endPosition - startPosition;

package/src/util/tex.ts

@@ -79,11 +79,11 @@ export default {
             if (text == null) {
                 if ($elem.attr("data-math-formula")) {
                     // The old typeset formula
-                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'string | undefined' is not assignable to type 'string'.
+                    // @ts-expect-error - TS2322 - Type 'string | undefined' is not assignable to type 'string'.
                     text = $elem.attr("data-math-formula");
                 } else if (script) {
                     // The contents of the <script> tag
-                    // @ts-expect-error [FEI-5003] - TS2339 - Property 'text' does not exist on type 'HTMLElement'.
+                    // @ts-expect-error - TS2339 - Property 'text' does not exist on type 'HTMLElement'.
                     text = script.text || script.textContent;
                 }
             }
@@ -130,7 +130,7 @@ export default {
                 }
             }
 
-            // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+            // @ts-expect-error - TS2769 - No overload matches this call.
             $elem.text($elem.attr("data-math-formula"));
             $elem.attr("data-math-formula", null);
             $elem.attr("data-math-type", null);

package/src/util.ts

@@ -58,9 +58,9 @@ const nestedMap = function <T, M>(
     context: unknown,
 ): M | ReadonlyArray<M> {
     if (Array.isArray(children)) {
-        // @ts-expect-error [FEI-5003] - TS2322 - Type '(M | readonly M[])[]' is not assignable to type 'M | readonly M[]'.
+        // @ts-expect-error - TS2322 - Type '(M | readonly M[])[]' is not assignable to type 'M | readonly M[]'.
         return _.map(children, function (child) {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
             return nestedMap(child, func);
         });
     }
@@ -149,9 +149,9 @@ function shuffle<T>(
             const newEnd = Math.floor(random() * top),
                 temp = shuffled[newEnd];
 
-            // @ts-expect-error [FEI-5003] - TS2542 - Index signature in type 'readonly T[]' only permits reading.
+            // @ts-expect-error - TS2542 - Index signature in type 'readonly T[]' only permits reading.
             shuffled[newEnd] = shuffled[top - 1];
-            // @ts-expect-error [FEI-5003] - TS2542 - Index signature in type 'readonly T[]' only permits reading.
+            // @ts-expect-error - TS2542 - Index signature in type 'readonly T[]' only permits reading.
             shuffled[top - 1] = temp;
         }
     } while (ensurePermuted && _.isEqual(array, shuffled));
@@ -179,14 +179,14 @@ const split: (str: string, r: RegExp) => ReadonlyArray<string> = "x".split(
 
           while ((match = r.exec(str))) {
               const m = match;
-              // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
+              // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
               output.push(str.slice(lastIndex, m.index));
-              // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
+              // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
               output.push(...m.slice(1));
               lastIndex = m.index + m[0].length;
           }
 
-          // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
+          // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
           output.push(str.slice(lastIndex));
           return output;
       };
@@ -287,7 +287,7 @@ function keScoreFromPerseusScore(
         };
     }
     throw new PerseusError(
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'type' does not exist on type 'never'.
+        // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
         "Invalid score type: " + score.type,
         Errors.InvalidInput,
         {
@@ -375,7 +375,7 @@ function getGridStep(
     step: Coordinates,
     boxSize: number,
 ): Coordinates {
-    // @ts-expect-error [FEI-5003] - TS2322 - Type '(number | null | undefined)[]' is not assignable to type 'Coordinates'.
+    // @ts-expect-error - TS2322 - Type '(number | null | undefined)[]' is not assignable to type 'Coordinates'.
     return _(2).times(function (i) {
         const scale = scaleFromExtent(range[i], boxSize);
         const gridStep = gridStepFromTickStep(step[i], scale);
@@ -542,9 +542,9 @@ const DeprecationMixin: any = {
         _.each(
             this.deprecatedProps,
             function (func, prop) {
-                // @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.
                 if (_.has(this.props, prop)) {
-                    // @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.
                     _.extend(newProps, func(this.props));
                 }
             },
@@ -605,11 +605,11 @@ function deepEq<T>(x: T, y: T): boolean {
         return (
             x === y ||
             (_.all(x, function (v, k) {
-                // @ts-expect-error [FEI-5003] - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
+                // @ts-expect-error - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
                 return deepEq(y[k], v);
             }) &&
                 _.all(y, function (v, k) {
-                    // @ts-expect-error [FEI-5003] - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
+                    // @ts-expect-error - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
                     return deepEq(x[k], v);
                 }))
         );
@@ -813,9 +813,9 @@ const supportsPassiveEvents: () => boolean = () => {
                 supportsPassive = true;
             },
         });
-        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+        // @ts-expect-error - TS2769 - No overload matches this call.
         window.addEventListener("testPassive", null, opts);
-        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+        // @ts-expect-error - TS2769 - No overload matches this call.
         window.removeEventListener("testPassive", null, opts);
     } catch (e: any) {
         // Intentionally left empty!

package/src/widget-container.tsx

@@ -45,7 +45,7 @@ class WidgetContainer extends React.Component<Props, State> {
         // Only relay size class changes for mobile right now.  We may want to
         // this for desktop as well at some point in the future.
         if (this.state.widgetProps.apiOptions.isMobile) {
-            // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetWidth' does not exist on type 'Element | Text'.
+            // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetWidth' does not exist on type 'Element | Text'.
             const containerWidth = ReactDOM.findDOMNode(this).offsetWidth;
 
             // NOTE(benkomalo): in the common case, this won't change anything.

package/src/widgets/__stories__/definition.stories.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
+import {storybookDependenciesV2} from "../../../../../testing/test-dependencies";
 import ArticleRenderer from "../../article-renderer";
 
 export default {
@@ -103,5 +104,11 @@ export const MultipleDefinitions = (args: StoryArgs): React.ReactElement => {
 };
 
 export const ArticleDefintion = (args: StoryArgs): React.ReactElement => {
-    return <ArticleRenderer json={article} useNewStyles />;
+    return (
+        <ArticleRenderer
+            json={article}
+            useNewStyles
+            dependencies={storybookDependenciesV2}
+        />
+    );
 };

package/src/widgets/__stories__/expression.stories.tsx

@@ -1,4 +1,4 @@
-import {KeypadContext} from "@khanacademy/math-input";
+import {KeypadContext, KeypadType} from "@khanacademy/math-input";
 import * as React from "react";
 
 import {ItemRendererWithDebugUI} from "../../../../../testing/item-renderer-with-debug-ui";
@@ -62,7 +62,7 @@ export const DesktopKitchenSink = (args: StoryArgs): React.ReactElement => {
     };
 
     const keypadConfiguration = {
-        keypadType: "EXPRESSION",
+        keypadType: KeypadType.EXPRESSION,
         extraKeys: ["x", "y", "z"],
     };
 

package/src/widgets/__stories__/test-keypad-context-wrapper.tsx

@@ -33,13 +33,13 @@ const TestKeypadContextWrapper = (props: Props): React.ReactElement => {
     return (
         <KeypadContext.Provider
             value={{
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
+                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
                 setKeypadElement,
                 keypadElement,
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
+                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
                 setRenderer,
                 renderer,
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
+                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
                 setScrollableElement,
                 scrollableElement,
             }}

package/src/widgets/__testdata__/numeric-input.testdata.ts

@@ -70,7 +70,7 @@ export const percentageProblem: PerseusRenderer = {
     content: "$5008 \\div 4 =$ [[\u2603 numeric-input 1]] ",
     images: {},
     widgets: {
-        // @ts-expect-error [FEI-5003] - TS2352 - Conversion of type '{ graded: true; version: { major: number; minor: number; }; static: false; type: "numeric-input"; options: { coefficient: false; static: false; answers: { status: string; maxError: null; strict: false; value: string; simplify: string; message: string; }[]; labelText: string; size: string; }; alignment: string; }' to type 'NumericInputWidget' 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 '{ graded: true; version: { major: number; minor: number; }; static: false; type: "numeric-input"; options: { coefficient: false; static: false; answers: { status: string; maxError: null; strict: false; value: string; simplify: string; message: string; }[]; labelText: string; size: string; }; alignment: string; }' to type 'NumericInputWidget' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
         "numeric-input 1": {
             graded: true,
             version: {

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

@@ -60,7 +60,7 @@ exports[`video widget should snapshot on mobile: first mobile render 1`] = `
                 class="default_xu2jcg-o_O-inlineStyles_sc01dy"
               />
               <a
-                class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
+                class="shared_17fj7pd-o_O-resting_nelfll visited-no-recolor"
                 href="/transcript/videoNotFound"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -136,7 +136,7 @@ exports[`video widget should snapshot: first render 1`] = `
                 class="default_xu2jcg-o_O-inlineStyles_sc01dy"
               />
               <a
-                class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
+                class="shared_17fj7pd-o_O-resting_nelfll visited-no-recolor"
                 href="/transcript/videoNotFound"
                 rel="noopener noreferrer"
                 target="_blank"

package/src/widgets/__tests__/{expression.test.ts → expression.test.tsx}

@@ -3,9 +3,11 @@ import {screen, fireEvent} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 
-import {testDependencies} from "../../../../../testing/test-dependencies";
+import {
+    testDependencies,
+    testDependenciesV2,
+} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
-import {PerseusItem} from "../../perseus-types";
 import {
     expressionItem2,
     expressionItem3,
@@ -15,7 +17,14 @@ import {Expression} from "../expression";
 
 import {renderQuestion} from "./renderQuestion";
 
-const assertComplete = (itemData: PerseusItem, input, isCorrect: boolean) => {
+import type {PerseusItem} from "../../perseus-types";
+import type {APIOptions} from "../../types";
+
+const assertComplete = (
+    itemData: PerseusItem,
+    input: string,
+    isCorrect: boolean,
+) => {
     const {renderer} = renderQuestion(itemData.question);
     userEvent.type(screen.getByRole("textbox"), input);
     const [_, score] = renderer.guessAndScore();
@@ -26,13 +35,14 @@ const assertComplete = (itemData: PerseusItem, input, isCorrect: boolean) => {
     });
 };
 
-const assertCorrect = (itemData: PerseusItem, input) => {
+const assertCorrect = (itemData: PerseusItem, input: string) => {
     assertComplete(itemData, input, true);
 
-    expect(testDependencies.analytics).toHaveBeenCalledWith({
+    expect(testDependenciesV2.analytics.onAnalyticsEvent).toHaveBeenCalledWith({
         type: "perseus:expression-evaluated",
         payload: {
             result: "correct",
+            virtualKeypadVersion: "PERSEUS_MATH_INPUT",
         },
     });
 };
@@ -40,16 +50,21 @@ const assertCorrect = (itemData: PerseusItem, input) => {
 const assertIncorrect = (itemData: PerseusItem, input: string) => {
     assertComplete(itemData, input, false);
 
-    expect(testDependencies.analytics).toHaveBeenCalledWith({
+    expect(testDependenciesV2.analytics.onAnalyticsEvent).toHaveBeenCalledWith({
         type: "perseus:expression-evaluated",
         payload: {
             result: "incorrect",
+            virtualKeypadVersion: "PERSEUS_MATH_INPUT",
         },
     });
 };
 
 // TODO: actually Assert that message is being set on the score object.
-const assertInvalid = (itemData: PerseusItem, input, message?: string) => {
+const assertInvalid = (
+    itemData: PerseusItem,
+    input: string,
+    message?: string,
+) => {
     const {renderer} = renderQuestion(itemData.question);
     if (input.length) {
         userEvent.type(screen.getByRole("textbox"), input);
@@ -57,17 +72,18 @@ const assertInvalid = (itemData: PerseusItem, input, message?: string) => {
     const [_, score] = renderer.guessAndScore();
     expect(score).toMatchObject({type: "invalid"});
 
-    expect(testDependencies.analytics).toHaveBeenCalledWith({
+    expect(testDependenciesV2.analytics.onAnalyticsEvent).toHaveBeenCalledWith({
         type: "perseus:expression-evaluated",
         payload: {
             result: "invalid",
+            virtualKeypadVersion: "PERSEUS_MATH_INPUT",
         },
     });
 };
 
 describe("Expression Widget", function () {
     beforeEach(() => {
-        jest.spyOn(testDependencies, "analytics");
+        jest.spyOn(testDependenciesV2.analytics, "onAnalyticsEvent");
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,
         );
@@ -170,6 +186,56 @@ describe("Expression Widget", function () {
             expect(err).toStrictEqual({message: null, type: "invalid"});
         });
     });
+
+    describe("analytics", () => {
+        const assertKeypadVersion = (
+            apiOptions: APIOptions,
+            virtualKeypadVersion: string,
+        ) => {
+            const {renderer} = renderQuestion(
+                expressionItem2.question,
+                apiOptions,
+            );
+
+            renderer.guessAndScore();
+
+            expect(
+                testDependenciesV2.analytics.onAnalyticsEvent,
+            ).toHaveBeenCalledWith({
+                type: "perseus:expression-evaluated",
+                payload: {
+                    // We're not interested in validating that the expression
+                    // widget did anything useful or that the keypad worked. We
+                    // just want to make sure the code that derives which
+                    // keypad version it detected is correct.
+                    result: "invalid",
+                    virtualKeypadVersion,
+                },
+            });
+        };
+
+        it("should set the virtual keypad version to REACT_NATIVE_KEYPAD when nativeKeypadProxy is provided", () => {
+            assertKeypadVersion(
+                {nativeKeypadProxy: jest.fn()},
+                "REACT_NATIVE_KEYPAD",
+            );
+        });
+
+        it("should set the virtual keypad version to MATH_INPUT_KEYPAD_V1 when customKeypad is set and useV2Keypad is unset", () => {
+            assertKeypadVersion({customKeypad: true}, "MATH_INPUT_KEYPAD_V1");
+        });
+
+        it("should set the virtual keypad version to MATH_INPUT_KEYPAD_V2 when customKeypad is set and useV2Keypad is true", () => {
+            assertKeypadVersion(
+                {customKeypad: true, useV2Keypad: true},
+                "MATH_INPUT_KEYPAD_V2",
+            );
+        });
+
+        it("should default the virtual keypad version to PERSEUS_MATH_INPUT", () => {
+            assertKeypadVersion(Object.freeze({}), "PERSEUS_MATH_INPUT");
+        });
+    });
 });
 
 describe("getOneCorrectAnswerFromRubric", () => {
@@ -334,7 +400,7 @@ describe("interaction", () => {
         expect(score.type).toBe("points");
         // Score.total doesn't exist if the input is invalid
         // In this case we know that it'll be valid so we can assert directly
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'earned' does not exist on type 'PerseusScore'. | TS2339 - Property 'total' does not exist on type 'PerseusScore'.
+        // @ts-expect-error - TS2339 - Property 'earned' does not exist on type 'PerseusScore'. | TS2339 - Property 'total' does not exist on type 'PerseusScore'.
         expect(score.earned).toBe(score.total);
     });
 
@@ -350,7 +416,7 @@ describe("interaction", () => {
         // Assert
         // Score.total doesn't exist if the input is invalid
         // In this case we know that it'll be valid so we can assert directly
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'total' does not exist on type 'PerseusScore'.
+        // @ts-expect-error - TS2339 - Property 'total' does not exist on type 'PerseusScore'.
         expect(score.total).toBe(1);
     });
 });