@khanacademy/perseus 8.0.0 → 10.0.0

package/src/widgets/expression.tsx

@@ -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,19 +23,14 @@ import type {
     PerseusExpressionWidgetOptions,
     PerseusExpressionAnswerForm,
 } from "../perseus-types";
-import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
+import type {
+    APIOptions,
+    PerseusScore,
+    WidgetExports,
+    WidgetProps,
+} from "../types";
 import type {Keys as Key} from "@khanacademy/math-input";
-
-const sendExpressionEvaluatedEvent = (
-    result: "correct" | "incorrect" | "invalid",
-) => {
-    getDependencies().analytics({
-        type: "perseus:expression-evaluated",
-        payload: {
-            result,
-        },
-    });
-};
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
 type InputPath = ReadonlyArray<string>;
 
@@ -63,20 +58,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;
@@ -211,8 +229,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.
@@ -227,8 +243,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
                 };
             }
             if (allEmpty) {
-                sendExpressionEvaluatedEvent("invalid");
-
                 // If everything graded as empty, it's invalid.
                 return {
                     type: "invalid",
@@ -237,7 +251,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,
@@ -252,7 +265,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
                 userInput,
                 matchMessage,
             );
-            sendExpressionEvaluatedEvent("invalid");
             return {
                 type: "invalid",
                 message: apiResult === false ? null : matchMessage,
@@ -264,12 +276,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,
@@ -369,7 +375,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 = () => {
@@ -471,6 +491,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">> {
@@ -640,22 +672,19 @@ 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<PropsFor<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 {
@@ -671,4 +700,4 @@ export default {
 
     // For use by the editor
     isLintable: true,
-} as WidgetExports<typeof Expression>;
+} as WidgetExports<typeof ExpressionWithDependencies>;

package/src/widgets/graded-group.tsx

@@ -25,7 +25,12 @@ import a11y from "../util/a11y";
 import GradedGroupAnswerBar from "./graded-group-answer-bar";
 
 import type {PerseusGradedGroupWidgetOptions} from "../perseus-types";
-import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
+import type {
+    PerseusScore,
+    TrackingGradedGroupExtraArguments,
+    WidgetExports,
+    WidgetProps,
+} from "../types";
 import type {ANSWER_BAR_STATES} from "./graded-group-answer-bar";
 
 const GRADING_STATUSES = {
@@ -64,7 +69,11 @@ const DEFAULT_INVALID_MESSAGE =
 type Rubric = PerseusGradedGroupWidgetOptions;
 type RenderProps = PerseusGradedGroupWidgetOptions; // exports has no 'transform'
 
-type Props = WidgetProps<RenderProps, Rubric> & {
+type Props = WidgetProps<
+    RenderProps,
+    Rubric,
+    TrackingGradedGroupExtraArguments
+> & {
     inGradedGroupSet?: boolean; // Set by graded-group-set.jsx,
     onNextQuestion?: () => unknown; // Set by graded-group-set.jsx
 };

package/src/widgets/grapher.tsx

@@ -36,6 +36,7 @@ import type {ChangeableProps} from "../mixins/changeable";
 import type {PerseusGrapherWidgetOptions} from "../perseus-types";
 import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
 import type {GridDimensions} from "../util";
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
 const MovablePoint = Graphie.MovablePoint;
@@ -473,18 +474,9 @@ class Grapher extends React.Component<Props> {
     }
 
     _calculateMobileTickStep(
-        gridStep: JSX.LibraryManagedAttributes<
-            typeof Graphie,
-            Required<React.ComponentProps<typeof Graphie>>
-        >["gridStep"],
-        step: JSX.LibraryManagedAttributes<
-            typeof Graphie,
-            Required<React.ComponentProps<typeof Graphie>>
-        >["step"],
-        ranges: JSX.LibraryManagedAttributes<
-            typeof Graphie,
-            Required<React.ComponentProps<typeof Graphie>>
-        >["ranges"],
+        gridStep: NonNullable<PropsFor<typeof Graphie>["gridStep"]>,
+        step: NonNullable<PropsFor<typeof Graphie>["step"]>,
+        ranges: NonNullable<PropsFor<typeof Graphie>["ranges"]>,
     ): any {
         const tickStep = Util.constrainedTickStepsFromTickSteps(step, ranges);
 

package/src/widgets/passage-ref.tsx

@@ -13,9 +13,9 @@ import type {
     PerseusScore,
     WidgetExports,
     WidgetProps,
-    LinterContextProps,
 } from "../types";
 import type {Passage, Reference} from "./passage";
+import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
 const EN_DASH = "\u2013";
 

package/src/widgets/sequence.tsx

@@ -9,11 +9,19 @@ import Renderer from "../renderer";
 import Util from "../util";
 
 import type {PerseusSequenceWidgetOptions} from "../perseus-types";
-import type {WidgetExports, WidgetProps} from "../types";
+import type {
+    TrackingSequenceExtraArguments,
+    WidgetExports,
+    WidgetProps,
+} from "../types";
 
 type Rubric = PerseusSequenceWidgetOptions;
 
-type ExternalProps = WidgetProps<PerseusSequenceWidgetOptions, Rubric>;
+type ExternalProps = WidgetProps<
+    PerseusSequenceWidgetOptions,
+    Rubric,
+    TrackingSequenceExtraArguments
+>;
 
 type Props = ExternalProps;