@khanacademy/perseus 7.2.1 → 9.0.0

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

@@ -143,7 +143,7 @@ describe("passage widget", () => {
         const {renderer} = renderQuestion(question2, apiOptions);
         jest.runOnlyPendingTimers();
 
-        // @ts-expect-error [FEI-5003] - TS2503 - Cannot find namespace 'PassageWidgetExport'
+        // @ts-expect-error - TS2503 - Cannot find namespace 'PassageWidgetExport'
         const [passage1]: [PassageWidgetExport.widget] =
             renderer.findWidgets("passage 1");
 
@@ -167,7 +167,7 @@ describe("passage widget", () => {
         const {renderer} = renderQuestion(question2, apiOptions);
         jest.runOnlyPendingTimers();
 
-        // @ts-expect-error [FEI-5003] - TS2503 - Cannot find namespace 'PassageWidgetExport'
+        // @ts-expect-error - TS2503 - Cannot find namespace 'PassageWidgetExport'
         const [passage1]: [PassageWidgetExport.widget] =
             renderer.findWidgets("passage 1");
 

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

@@ -4,12 +4,13 @@ import React from "react";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import {setDependencies} from "../../dependencies";
-import {APIOptions} from "../../types";
 import {question1} from "../__testdata__/plotter.testdata";
 import {Plotter} from "../plotter";
 
 import {renderQuestion} from "./renderQuestion";
 
+import type {APIOptions} from "../../types";
+
 describe("plotter widget", () => {
     beforeEach(() => {
         setDependencies(testDependencies);

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

@@ -87,7 +87,7 @@ describe("base-radio", () => {
             checked: ReadonlyArray<boolean>;
             crossedOut: ReadonlyArray<boolean>;
         }) => {
-            // @ts-expect-error [FEI-5003] - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
+            // @ts-expect-error - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
             updatedValues = newValues;
         };
 
@@ -142,7 +142,7 @@ describe("base-radio", () => {
                 checked: ReadonlyArray<boolean>;
                 crossedOut: ReadonlyArray<boolean>;
             }) => {
-                // @ts-expect-error [FEI-5003] - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
+                // @ts-expect-error - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
                 updatedValues = newValues;
             };
 
@@ -173,7 +173,7 @@ describe("base-radio", () => {
                 checked: ReadonlyArray<boolean>;
                 crossedOut: ReadonlyArray<boolean>;
             }) => {
-                // @ts-expect-error [FEI-5003] - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
+                // @ts-expect-error - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
                 updatedValues = newValues;
             };
 
@@ -208,7 +208,7 @@ describe("base-radio", () => {
                 checked: ReadonlyArray<boolean>;
                 crossedOut: ReadonlyArray<boolean>;
             }) => {
-                // @ts-expect-error [FEI-5003] - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
+                // @ts-expect-error - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
                 updatedValues = newValues;
             };
 
@@ -259,7 +259,7 @@ describe("base-radio", () => {
                 checked: ReadonlyArray<boolean>;
                 crossedOut: ReadonlyArray<boolean>;
             }) => {
-                // @ts-expect-error [FEI-5003] - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
+                // @ts-expect-error - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
                 updatedValues = newValues;
             };
 
@@ -308,7 +308,7 @@ describe("base-radio", () => {
                 checked: ReadonlyArray<boolean>;
                 crossedOut: ReadonlyArray<boolean>;
             }) => {
-                // @ts-expect-error [FEI-5003] - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
+                // @ts-expect-error - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
                 updatedValues = newValues;
             };
 
@@ -358,7 +358,7 @@ describe("base-radio", () => {
                 checked: ReadonlyArray<boolean>;
                 crossedOut: ReadonlyArray<boolean>;
             }) => {
-                // @ts-expect-error [FEI-5003] - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
+                // @ts-expect-error - TS2322 - Type '{ checked: readonly boolean[]; crossedOut: readonly boolean[]; }' is not assignable to type 'null'.
                 updatedValues = newValues;
             };
 

package/src/widgets/__tests__/renderQuestion.tsx

@@ -2,6 +2,9 @@ import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import {render} from "@testing-library/react";
 import * as React from "react";
 
+// eslint-disable-next-line import/no-relative-packages
+import {testDependenciesV2} from "../../../../../testing/test-dependencies";
+import {DependenciesContext} from "../../dependencies";
 import * as Perseus from "../../index";
 import {registerAllWidgetsForTesting} from "../../util/register-all-widgets-for-testing";
 
@@ -15,7 +18,7 @@ export const renderQuestion = (
     apiOptions: APIOptions = Object.freeze({}),
     extraProps?: JSX.LibraryManagedAttributes<
         typeof Perseus.Renderer,
-        // @ts-expect-error [FEI-5003] - TS2344 - Type 'typeof Renderer' does not satisfy the constraint 'keyof IntrinsicElements | JSXElementConstructor<any>'.
+        // @ts-expect-error - TS2344 - Type 'typeof Renderer' does not satisfy the constraint 'keyof IntrinsicElements | JSXElementConstructor<any>'.
         React.ComponentProps<typeof Perseus.Renderer>
     >,
 ): {
@@ -25,25 +28,28 @@ export const renderQuestion = (
         question: PerseusRenderer,
         extraProps?: JSX.LibraryManagedAttributes<
             typeof Perseus.Renderer,
-            // @ts-expect-error [FEI-5003] - TS2344 - Type 'typeof Renderer' does not satisfy the constraint 'keyof IntrinsicElements | JSXElementConstructor<any>'.
+            // @ts-expect-error - TS2344 - Type 'typeof Renderer' does not satisfy the constraint 'keyof IntrinsicElements | JSXElementConstructor<any>'.
             React.ComponentProps<typeof Perseus.Renderer>
         >,
     ) => void;
     unmount: RenderResult["unmount"];
 } => {
     registerAllWidgetsForTesting();
+
     let renderer: Perseus.Renderer | null = null;
     const {container, rerender, unmount} = render(
         <RenderStateRoot>
-            <Perseus.Renderer
-                ref={(node) => (renderer = node)}
-                content={question.content}
-                images={question.images}
-                widgets={question.widgets}
-                problemNum={0}
-                apiOptions={apiOptions}
-                {...extraProps}
-            />
+            <DependenciesContext.Provider value={testDependenciesV2}>
+                <Perseus.Renderer
+                    ref={(node) => (renderer = node)}
+                    content={question.content}
+                    images={question.images}
+                    widgets={question.widgets}
+                    problemNum={0}
+                    apiOptions={apiOptions}
+                    {...extraProps}
+                />
+            </DependenciesContext.Provider>
         </RenderStateRoot>,
     );
     if (!renderer) {
@@ -51,20 +57,22 @@ export const renderQuestion = (
     }
     const renderAgain = (
         question: PerseusRenderer,
-        // @ts-expect-error [FEI-5003] - TS2344 - Type 'typeof Renderer' does not satisfy the constraint 'keyof IntrinsicElements | JSXElementConstructor<any>'.
+        // @ts-expect-error - TS2344 - Type 'typeof Renderer' does not satisfy the constraint 'keyof IntrinsicElements | JSXElementConstructor<any>'.
         extraProps: undefined | React.ComponentProps<typeof Perseus.Renderer>,
     ) => {
         rerender(
             <RenderStateRoot>
-                <Perseus.Renderer
-                    ref={(node) => (renderer = node)}
-                    content={question.content}
-                    images={question.images}
-                    widgets={question.widgets}
-                    problemNum={0}
-                    apiOptions={apiOptions}
-                    {...extraProps}
-                />
+                <DependenciesContext.Provider value={testDependenciesV2}>
+                    <Perseus.Renderer
+                        ref={(node) => (renderer = node)}
+                        content={question.content}
+                        images={question.images}
+                        widgets={question.widgets}
+                        problemNum={0}
+                        apiOptions={apiOptions}
+                        {...extraProps}
+                    />
+                </DependenciesContext.Provider>
             </RenderStateRoot>,
         );
         if (!renderer) {

package/src/widgets/categorizer.tsx

@@ -52,7 +52,7 @@ export class Categorizer extends React.Component<Props, State> {
     };
 
     change: (...args: ReadonlyArray<unknown>) => any = (...args) => {
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+        // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
         return Changeable.change.apply(this, args);
     };
 
@@ -68,7 +68,7 @@ export class Categorizer extends React.Component<Props, State> {
         const isMobile = this.props.apiOptions.isMobile;
         let indexedItems = this.props.items.map((item, n) => [item, n]);
         if (this.props.randomizeItems) {
-            // @ts-expect-error [FEI-5003] - TS4104 - The type 'readonly (string | number)[][]' is 'readonly' and cannot be assigned to the mutable type '(string | number)[][]'. | TS2345 - Argument of type 'number | null | undefined' is not assignable to parameter of type 'number | RNG'.
+            // @ts-expect-error - TS4104 - The type 'readonly (string | number)[][]' is 'readonly' and cannot be assigned to the mutable type '(string | number)[][]'. | TS2345 - Argument of type 'number | null | undefined' is not assignable to parameter of type 'number | RNG'.
             indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
         }
 
@@ -103,7 +103,7 @@ export class Categorizer extends React.Component<Props, State> {
                             <tr key={itemNum}>
                                 <td>
                                     <Renderer
-                                        // @ts-expect-error [FEI-5003] - TS2322 - Type 'string | number' is not assignable to type 'string | undefined'.
+                                        // @ts-expect-error - TS2322 - Type 'string | number' is not assignable to type 'string | undefined'.
                                         content={item}
                                         linterContext={this.props.linterContext}
                                     />
@@ -212,7 +212,7 @@ export class Categorizer extends React.Component<Props, State> {
 
     onChange: (arg1: number, arg2: number) => void = (itemNum, catNum) => {
         const values = [...this.props.values];
-        // @ts-expect-error [FEI-5003] - TS2322 - Type 'number' is not assignable to type 'never'.
+        // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'never'.
         values[itemNum] = catNum;
         this.change("values", values);
         this.props.trackInteraction();

package/src/widgets/cs-program.tsx

@@ -117,7 +117,7 @@ class CSProgram extends React.Component<any> {
     };
 
     change: (...args: ReadonlyArray<unknown>) => any = (...args) => {
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+        // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
         return Changeable.change.apply(this, args);
     };
 
@@ -159,7 +159,7 @@ class CSProgram extends React.Component<any> {
             url += "&buttons=yes";
             // Matches templates/scratchpads/embed_script.js
             // Toolbar height is 66, border height is 1 pixel
-            // @ts-expect-error [FEI-5003] - TS2540 - Cannot assign to 'height' because it is a read-only property.
+            // @ts-expect-error - TS2540 - Cannot assign to 'height' because it is a read-only property.
             style.height += 67;
         } else {
             url += "&buttons=no";

package/src/widgets/dropdown.tsx

@@ -53,7 +53,7 @@ class Dropdown extends React.Component<Props> {
         // TODO(LP-10797): This focus() call doesn't do anything because our
         // root element is a <div> and that cannot be focused without a
         // tabIndex.
-        // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
+        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
         ReactDOM.findDOMNode(this).focus();
         return true;
     };

package/src/widgets/expression.tsx

@@ -1,5 +1,5 @@
 import * as KAS from "@khanacademy/kas";
-import {KeypadInput, KeypadType, Keys as Key} 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";
@@ -12,7 +12,7 @@ import Tooltip, {
     HorizontalDirection,
     VerticalDirection,
 } from "../components/tooltip";
-import {getDependencies} from "../dependencies";
+import {useDependencies} from "../dependencies";
 import {iconExclamationSign} from "../icon-paths";
 import {Errors as PerseusErrors, Log} from "../logging/log";
 import * as Changeable from "../mixins/changeable";
@@ -23,18 +23,13 @@ import type {
     PerseusExpressionWidgetOptions,
     PerseusExpressionAnswerForm,
 } from "../perseus-types";
-import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
-
-const sendExpressionEvaluatedEvent = (
-    result: "correct" | "incorrect" | "invalid",
-) => {
-    getDependencies().analytics({
-        type: "perseus:expression-evaluated",
-        payload: {
-            result,
-        },
-    });
-};
+import type {
+    APIOptions,
+    PerseusScore,
+    WidgetExports,
+    WidgetProps,
+} from "../types";
+import type {Keys as Key} from "@khanacademy/math-input";
 
 type InputPath = ReadonlyArray<string>;
 
@@ -62,20 +57,43 @@ const insertBraces = (value) => {
     return value.replace(/([_^])([^{])/g, "$1{$2}");
 };
 
+const deriveKeypadVersion = (apiOptions: APIOptions) => {
+    // We can derive which version of the keypad is in use. This is
+    // a bit tricky, but this code will be relatively short-lived
+    // as we coalesce onto the new, v2 Keypad, at which point we
+    // can remove this `virtualKeypadVersion` field entirely.
+    return apiOptions.nativeKeypadProxy != null
+        ? "REACT_NATIVE_KEYPAD"
+        : apiOptions.customKeypad === true
+        ? apiOptions.useV2Keypad === true
+            ? "MATH_INPUT_KEYPAD_V2"
+            : "MATH_INPUT_KEYPAD_V1"
+        : "PERSEUS_MATH_INPUT";
+};
+
 type Rubric = PerseusExpressionWidgetOptions;
 
+type RenderProps = {
+    buttonSets: PerseusExpressionWidgetOptions["buttonSets"];
+    buttonsVisible?: PerseusExpressionWidgetOptions["buttonsVisible"];
+    functions: PerseusExpressionWidgetOptions["functions"];
+    times: PerseusExpressionWidgetOptions["times"];
+    keypadConfiguration: ReturnType<typeof keypadConfigurationForProps>;
+};
+
 type ExternalProps = WidgetProps<RenderProps, Rubric>;
 
-export type Props = ExternalProps & {
-    apiOptions: NonNullable<ExternalProps["apiOptions"]>;
-    buttonSets: NonNullable<ExternalProps["buttonSets"]>;
-    functions: NonNullable<ExternalProps["functions"]>;
-    linterContext: NonNullable<ExternalProps["linterContext"]>;
-    onBlur: NonNullable<ExternalProps["onBlur"]>;
-    onFocus: NonNullable<ExternalProps["onFocus"]>;
-    times: NonNullable<ExternalProps["times"]>;
-    value: string;
-};
+export type Props = ExternalProps &
+    ReturnType<typeof useDependencies> & {
+        apiOptions: NonNullable<ExternalProps["apiOptions"]>;
+        buttonSets: NonNullable<ExternalProps["buttonSets"]>;
+        functions: NonNullable<ExternalProps["functions"]>;
+        linterContext: NonNullable<ExternalProps["linterContext"]>;
+        onBlur: NonNullable<ExternalProps["onBlur"]>;
+        onFocus: NonNullable<ExternalProps["onFocus"]>;
+        times: NonNullable<ExternalProps["times"]>;
+        value: string;
+    };
 
 export type ExpressionState = {
     showErrorTooltip: boolean;
@@ -126,7 +144,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     static validate(
         userInput: string,
         rubric: Rubric,
-        // @ts-expect-error [FEI-5003] - TS2322 - Type '() => void' is not assignable to type 'OnInputErrorFunctionType'.
+        // @ts-expect-error - TS2322 - Type '() => void' is not assignable to type 'OnInputErrorFunctionType'.
         onInputError: OnInputErrorFunctionType = function () {},
     ): PerseusScore {
         const options = _.clone(rubric);
@@ -210,8 +228,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
         // we did, whether it's considered correct, incorrect, or ungraded
         if (!matchingAnswerForm) {
             if (firstUngradedResult) {
-                sendExpressionEvaluatedEvent("invalid");
-
                 // While we didn't directly match with any answer form, we
                 // did at some point get an "ungraded" validation result,
                 // which might indicate e.g. a mismatch in variable casing.
@@ -226,8 +242,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
                 };
             }
             if (allEmpty) {
-                sendExpressionEvaluatedEvent("invalid");
-
                 // If everything graded as empty, it's invalid.
                 return {
                     type: "invalid",
@@ -236,7 +250,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
             }
             // We fell through all the possibilities and we're not empty,
             // so the answer is considered incorrect.
-            sendExpressionEvaluatedEvent("incorrect");
             return {
                 type: "points",
                 earned: 0,
@@ -251,7 +264,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
                 userInput,
                 matchMessage,
             );
-            sendExpressionEvaluatedEvent("invalid");
             return {
                 type: "invalid",
                 message: apiResult === false ? null : matchMessage,
@@ -263,12 +275,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
         // TODO(eater): Seems silly to translate result to this
         // invalid/points thing and immediately translate it back in
         // ItemRenderer.scoreInput()
-        sendExpressionEvaluatedEvent(
-            matchingAnswerForm.considered === "correct"
-                ? "correct"
-                : "incorrect",
-        );
-
         return {
             type: "points",
             earned: matchingAnswerForm.considered === "correct" ? 1 : 0,
@@ -329,7 +335,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
         ) {
             // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
             // eslint-disable-next-line no-restricted-syntax
-            // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+            // @ts-expect-error - TS2769 - No overload matches this call.
             clearTimeout(this.errorTimeout);
 
             if (this.parse(this.props.value, this.props).parsed) {
@@ -339,7 +345,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
                 // Store timeout ID so that we can clear it above
                 // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
                 // eslint-disable-next-line no-restricted-syntax
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'Timeout' is not assignable to type 'number'.
+                // @ts-expect-error - TS2322 - Type 'Timeout' is not assignable to type 'number'.
                 this.errorTimeout = setTimeout(() => {
                     const apiResult = this.props.apiOptions.onInputError(
                         null, // reserved for some widget identifier
@@ -357,7 +363,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     componentWillUnmount: () => void = () => {
         // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
         // eslint-disable-next-line no-restricted-syntax
-        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+        // @ts-expect-error - TS2769 - No overload matches this call.
         clearTimeout(this.errorTimeout);
 
         this._isMounted = false;
@@ -368,7 +374,21 @@ export class Expression extends React.Component<Props, ExpressionState> {
         onInputError: OnInputErrorFunctionType,
     ) => PerseusScore = (rubric, onInputError) => {
         onInputError = onInputError || function () {};
-        return Expression.validate(this.getUserInput(), rubric, onInputError);
+        const result = Expression.validate(
+            this.getUserInput(),
+            rubric,
+            onInputError,
+        );
+
+        this.sendExpressionEvaluatedEvent(
+            result.type === "invalid"
+                ? "invalid"
+                : result.earned === result.total
+                ? "correct"
+                : "incorrect",
+        );
+
+        return result;
     };
 
     getUserInput: () => string = () => {
@@ -413,7 +433,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     focus: () => boolean = () => {
         if (this.props.apiOptions.customKeypad) {
             // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
+            // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
             this.refs.input.focus();
         } else {
             // The buttons are often on top of text you're trying to read, so
@@ -425,20 +445,20 @@ export class Expression extends React.Component<Props, ExpressionState> {
 
     focusInputPath: (inputPath: InputPath) => void = (inputPath: InputPath) => {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         this.refs.input.focus();
     };
 
     blurInputPath: (inputPath: InputPath) => void = (inputPath: InputPath) => {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
         this.refs.input.blur();
     };
 
     // HACK(joel)
     insert(keyPressed: Key) {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'insert' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'insert' does not exist on type 'ReactInstance'.
         this.refs.input.insert(keyPressed);
     }
 
@@ -470,6 +490,18 @@ export class Expression extends React.Component<Props, ExpressionState> {
         );
     };
 
+    sendExpressionEvaluatedEvent(result: "correct" | "incorrect" | "invalid") {
+        this.props.analytics.onAnalyticsEvent({
+            type: "perseus:expression-evaluated",
+            payload: {
+                result,
+                virtualKeypadVersion: deriveKeypadVersion(
+                    this.props.apiOptions,
+                ),
+            },
+        });
+    }
+
     render():
         | React.ReactNode
         | React.ReactElement<React.ComponentProps<"div">> {
@@ -639,22 +671,25 @@ const propUpgrades = {
     }),
 } as const;
 
-type RenderProps = {
-    buttonSets: any;
-    buttonsVisible?: "always" | "focused" | "never";
-    functions: ReadonlyArray<string>;
-    keypadConfiguration: {
-        extraKeys: ReadonlyArray<any | string>;
-        keypadType: any;
-    };
-    times: boolean;
-};
+const ExpressionWithDependencies = React.forwardRef<
+    Expression,
+    Omit<
+        JSX.LibraryManagedAttributes<
+            typeof Expression,
+            React.ComponentProps<typeof Expression>
+        >,
+        keyof ReturnType<typeof useDependencies>
+    >
+>((props, ref) => {
+    const deps = useDependencies();
+    return <Expression ref={ref} analytics={deps.analytics} {...props} />;
+});
 
 export default {
     name: "expression",
     displayName: "Expression / Equation",
     defaultAlignment: "inline-block",
-    widget: Expression,
+    widget: ExpressionWithDependencies,
     transform: (widgetOptions: PerseusExpressionWidgetOptions): RenderProps => {
         const {times, functions, buttonSets, buttonsVisible} = widgetOptions;
         return {
@@ -670,4 +705,4 @@ export default {
 
     // For use by the editor
     isLintable: true,
-} as WidgetExports<typeof Expression>;
+} as WidgetExports<typeof ExpressionWithDependencies>;

package/src/widgets/graded-group-set.tsx

@@ -87,7 +87,7 @@ type State = {
 // TODO(jared): find a better name for this :) and for GradedGroup; the names
 // are currently a little confusing.
 class GradedGroupSet extends React.Component<Props, State> {
-    // @ts-expect-error [FEI-5003] - TS2564 - Property '_childGroup' has no initializer and is not definitely assigned in the constructor.
+    // @ts-expect-error - TS2564 - Property '_childGroup' has no initializer and is not definitely assigned in the constructor.
     _childGroup: GradedGroup;
 
     static defaultProps: DefaultProps = {
@@ -105,7 +105,7 @@ class GradedGroupSet extends React.Component<Props, State> {
     }
 
     change: (...args: ReadonlyArray<unknown>) => any = (...args) => {
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+        // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
         return Changeable.change.apply(this, args);
     };
 
@@ -157,7 +157,7 @@ class GradedGroupSet extends React.Component<Props, State> {
                         return (
                             // TODO(jeremy): Don't spread this.props, instead
                             // pass in all props GradedGroup needs explicilty
-                            // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+                            // @ts-expect-error - TS2769 - No overload matches this call.
                             <GradedGroup
                                 key={i}
                                 {...this.props}
@@ -200,10 +200,10 @@ class GradedGroupSet extends React.Component<Props, State> {
                 </div>
                 {/* TODO(jeremy): Don't spread this.props, instead
                     pass in all props GradedGroup needs explicitly */}
-                {/* @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. */}
+                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
                 <GradedGroup
                     key={this.state.currentGroup}
-                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'GradedGroup | null' is not assignable to type 'GradedGroup'.
+                    // @ts-expect-error - TS2322 - Type 'GradedGroup | null' is not assignable to type 'GradedGroup'.
                     //  Type 'null' is not assignable to type 'GradedGroup'.
                     ref={(comp) => (this._childGroup = comp)}
                     // We should pass in the set of props explicitly