@khanacademy/perseus 13.2.0 → 15.0.0

package/dist/multi-items/item-types.d.ts

@@ -8,8 +8,8 @@
  *             interface, so it's compatible with our tree traversal functions.
  * - And the various types of nodes that compose a tree.
  */
-import type { WidgetDict, ImageDict } from "../types";
 import type { Tree, ArrayNode, ObjectNode } from "./tree-types";
+import type { WidgetDict, ImageDict } from "../types";
 export type ContentNode = {
     __type: "content" | "item";
     content?: string | null | undefined;

package/dist/multi-items/multi-renderer.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 import Renderer from "../renderer";
-import type { Widget } from "../renderer";
-import type { APIOptions, FilterCriterion, PerseusDependenciesV2 } from "../types";
 import type { Item, ContentNode, HintNode, TagsNode } from "./item-types";
 import type { Shape, ArrayShape } from "./shape-types";
 import type { Tree } from "./tree-types";
 import type { TreeMapper, ContentMapper, HintMapper, Path } from "./trees";
+import type { Widget } from "../renderer";
+import type { APIOptions, FilterCriterion, PerseusDependenciesV2 } from "../types";
 import type { PropsFor } from "@khanacademy/wonder-blocks-core";
 type Hint = any;
 type Score = any;

package/dist/perseus-api.d.ts

@@ -53,7 +53,6 @@ export declare const ApiOptions: {
         customKeypad: PropTypes.Requireable<boolean>;
         nativeKeypadProxy: PropTypes.Requireable<(...args: any[]) => any>;
         isMobile: PropTypes.Requireable<boolean>;
-        useV2Keypad: PropTypes.Requireable<boolean>;
         setDrawingAreaAvailable: PropTypes.Requireable<(...args: any[]) => any>;
         useDraftEditor: PropTypes.Requireable<boolean>;
         hintProgressColor: PropTypes.Requireable<string>;
@@ -85,7 +84,6 @@ export declare const ApiOptions: {
             correct?: boolean | undefined;
         } & Partial<import("./types").TrackingGradedGroupExtraArguments> & Partial<import("./types").TrackingSequenceExtraArguments>) => void) | undefined;
         customKeypad?: boolean | undefined;
-        useV2Keypad?: boolean | undefined;
         nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
         isMobile?: boolean | undefined;
         setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
@@ -107,7 +105,6 @@ export declare const ApiOptions: {
         inModal: NonNullable<boolean | undefined>;
         isArticle: NonNullable<boolean | undefined>;
         isMobile: NonNullable<boolean | undefined>;
-        useV2Keypad: NonNullable<boolean | undefined>;
         onFocusChange: (newFocusPath: import("./types").FocusPath, oldFocusPath: import("./types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
         onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
         readOnly: NonNullable<boolean | undefined>;

package/dist/server-item-renderer.d.ts

@@ -8,12 +8,10 @@
  */
 import * as React from "react";
 import Renderer from "./renderer";
-import type { KeypadProps } from "./mixins/provide-keypad";
 import type { APIOptions, FocusPath, PerseusDependenciesV2 } from "./types";
 import type { KeypadAPI } from "@khanacademy/math-input";
 import type { KeypadContextRendererInterface, RendererInterface, KEScore } from "@khanacademy/perseus-core";
-type OwnProps = // These props are used by the ProvideKeypad mixin.
-KeypadProps & {
+type OwnProps = {
     apiOptions: APIOptions;
     hintsVisible?: number;
     item: {
@@ -102,16 +100,5 @@ export declare class ServerItemRenderer extends React.Component<Props, State> im
     setAssetStatus: (assetKey: string, status: boolean) => void;
     render(): React.ReactNode;
 }
-declare const ref: React.ForwardRefExoticComponent<Omit<KeypadProps & {
-    apiOptions: APIOptions;
-    hintsVisible?: number | undefined;
-    item: {
-        hints: ReadonlyArray<any>;
-        question: any;
-    };
-    problemNum?: number | undefined;
-    reviewMode?: boolean | undefined;
-    keypadElement?: KeypadAPI | null | undefined;
-    dependencies: PerseusDependenciesV2;
-} & HOCProps, "onRendered"> & React.RefAttributes<ServerItemRenderer>>;
+declare const ref: React.ForwardRefExoticComponent<Omit<OwnProps & HOCProps, "onRendered"> & React.RefAttributes<ServerItemRenderer>>;
 export default ref;

package/dist/strings.js

@@ -75,6 +75,7 @@ module.exports = [
     i18n._("Get another hint", {}),
     i18n._("Greater than or equal to sign", {}),
     i18n._("Greater than sign", {}),
+    i18n._("Hide answer choices", {}),
     i18n._("Hide explanation", {}),
     i18n._("Hint #%(pos)s", {}),
     i18n._("Hints", {}),

package/dist/styles/shared.d.ts

@@ -1,2 +1,3 @@
+import type { StyleDeclaration } from "aphrodite";
 declare const _default: StyleDeclaration;
 export default _default;

package/dist/types.d.ts

@@ -102,7 +102,6 @@ export type APIOptions = Readonly<{
     imagePreloader?: (dimensions: Dimensions) => React.ReactNode;
     trackInteraction?: (args: TrackInteractionArgs) => void;
     customKeypad?: boolean;
-    useV2Keypad?: boolean;
     nativeKeypadProxy?: (blur: () => void) => KeypadAPI;
     isMobile?: boolean;
     setDrawingAreaAvailable?: (arg1: boolean) => unknown;
@@ -196,7 +195,6 @@ export type APIOptionsWithDefaults = Readonly<APIOptions & {
     inModal: NonNullable<APIOptions["inModal"]>;
     isArticle: NonNullable<APIOptions["isArticle"]>;
     isMobile: NonNullable<APIOptions["isMobile"]>;
-    useV2Keypad: NonNullable<APIOptions["useV2Keypad"]>;
     onFocusChange: NonNullable<APIOptions["onFocusChange"]>;
     onInputError: NonNullable<APIOptions["onInputError"]>;
     readOnly: NonNullable<APIOptions["readOnly"]>;

package/dist/util/a11y.d.ts

@@ -1,2 +1,3 @@
+import type { StyleDeclaration } from "aphrodite";
 declare const _default: StyleDeclaration;
 export default _default;

package/dist/widgets/expression.d.ts

@@ -112,7 +112,6 @@ declare const _default: Readonly<{
                 correct?: boolean | undefined;
             } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
             customKeypad?: boolean | undefined;
-            useV2Keypad?: boolean | undefined;
             nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
             isMobile?: boolean | undefined;
             setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
@@ -134,7 +133,6 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            useV2Keypad: NonNullable<boolean | undefined>;
             onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
@@ -177,7 +175,6 @@ declare const _default: Readonly<{
                 correct?: boolean | undefined;
             } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
             customKeypad?: boolean | undefined;
-            useV2Keypad?: boolean | undefined;
             nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
             isMobile?: boolean | undefined;
             setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
@@ -199,7 +196,6 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            useV2Keypad: NonNullable<boolean | undefined>;
             onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
@@ -242,7 +238,6 @@ declare const _default: Readonly<{
                 correct?: boolean | undefined;
             } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
             customKeypad?: boolean | undefined;
-            useV2Keypad?: boolean | undefined;
             nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
             isMobile?: boolean | undefined;
             setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
@@ -264,7 +259,6 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            useV2Keypad: NonNullable<boolean | undefined>;
             onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
@@ -318,7 +312,6 @@ declare const _default: Readonly<{
                 correct?: boolean | undefined;
             } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
             customKeypad?: boolean | undefined;
-            useV2Keypad?: boolean | undefined;
             nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
             isMobile?: boolean | undefined;
             setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
@@ -340,7 +333,6 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            useV2Keypad: NonNullable<boolean | undefined>;
             onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
@@ -383,7 +375,6 @@ declare const _default: Readonly<{
                 correct?: boolean | undefined;
             } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
             customKeypad?: boolean | undefined;
-            useV2Keypad?: boolean | undefined;
             nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
             isMobile?: boolean | undefined;
             setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
@@ -405,7 +396,6 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            useV2Keypad: NonNullable<boolean | undefined>;
             onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
@@ -448,7 +438,6 @@ declare const _default: Readonly<{
                 correct?: boolean | undefined;
             } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
             customKeypad?: boolean | undefined;
-            useV2Keypad?: boolean | undefined;
             nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
             isMobile?: boolean | undefined;
             setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
@@ -470,7 +459,6 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            useV2Keypad: NonNullable<boolean | undefined>;
             onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;

package/dist/widgets/graded-group.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
+import type { ANSWER_BAR_STATES } from "./graded-group-answer-bar";
 import type { PerseusGradedGroupWidgetOptions } from "../perseus-types";
 import type { TrackingGradedGroupExtraArguments, WidgetProps } from "../types";
-import type { ANSWER_BAR_STATES } from "./graded-group-answer-bar";
 declare const GRADING_STATUSES: {
     readonly ungraded: "ungraded";
     readonly correct: "correct";

package/dist/widgets/label-image.d.ts

@@ -9,9 +9,9 @@ import { Popover } from "@khanacademy/wonder-blocks-popover";
 import * as React from "react";
 import AnswerChoices from "./label-image/answer-choices";
 import Marker from "./label-image/marker";
+import type { InteractiveMarkerType, InteractiveMarkerScore } from "./label-image/types";
 import type { ChangeableProps } from "../mixins/changeable";
 import type { APIOptions, PerseusScore } from "../types";
-import type { InteractiveMarkerType, InteractiveMarkerScore } from "./label-image/types";
 type MarkersState = {
     markers: ReadonlyArray<InteractiveMarkerType>;
 };

package/dist/widgets/matcher.d.ts

@@ -29,7 +29,6 @@ export declare class Matcher extends React.Component<any, any> {
             customKeypad: PropTypes.Requireable<boolean>;
             nativeKeypadProxy: PropTypes.Requireable<(...args: any[]) => any>;
             isMobile: PropTypes.Requireable<boolean>;
-            useV2Keypad: PropTypes.Requireable<boolean>;
             setDrawingAreaAvailable: PropTypes.Requireable<(...args: any[]) => any>;
             useDraftEditor: PropTypes.Requireable<boolean>;
             hintProgressColor: PropTypes.Requireable<string>;

package/dist/widgets/passage.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
+import type { ParseState } from "./passage/passage-markdown";
 import type { SerializedHighlightSet } from "../components/highlighting/types";
 import type { ChangeableProps } from "../mixins/changeable";
 import type { PerseusPassageWidgetOptions } from "../perseus-types";
 import type { PerseusScore, WidgetInfo, WidgetProps } from "../types";
-import type { ParseState } from "./passage/passage-markdown";
 import type { SingleASTNode } from "@khanacademy/simple-markdown";
 export declare class LineHeightMeasurer extends React.Component<Record<any, any>> {
     _line: HTMLDivElement | null | undefined;

package/dist/widgets/radio/widget.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
+import type { FocusFunction } from "./base-radio";
 import type { PerseusRadioChoice, PerseusRadioWidgetOptions } from "../../perseus-types";
 import type { PerseusScore, WidgetProps, ChoiceState } from "../../types";
-import type { FocusFunction } from "./base-radio";
 export type RenderProps = {
     numCorrect: number;
     hasNoneOfTheAbove?: boolean;

package/dist/widgets/simulator.d.ts

@@ -24,7 +24,6 @@ declare class Simulator extends React.Component<any, any> {
             customKeypad: PropTypes.Requireable<boolean>;
             nativeKeypadProxy: PropTypes.Requireable<(...args: any[]) => any>;
             isMobile: PropTypes.Requireable<boolean>;
-            useV2Keypad: PropTypes.Requireable<boolean>;
             setDrawingAreaAvailable: PropTypes.Requireable<(...args: any[]) => any>;
             useDraftEditor: PropTypes.Requireable<boolean>;
             hintProgressColor: PropTypes.Requireable<string>;

package/dist/widgets/sorter.d.ts

@@ -25,7 +25,6 @@ declare class Sorter extends React.Component<any, any> {
             customKeypad: PropTypes.Requireable<boolean>;
             nativeKeypadProxy: PropTypes.Requireable<(...args: any[]) => any>;
             isMobile: PropTypes.Requireable<boolean>;
-            useV2Keypad: PropTypes.Requireable<boolean>;
             setDrawingAreaAvailable: PropTypes.Requireable<(...args: any[]) => any>;
             useDraftEditor: PropTypes.Requireable<boolean>;
             hintProgressColor: PropTypes.Requireable<string>;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "13.2.0",
+    "version": "15.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -22,13 +22,13 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.5",
-        "@khanacademy/kmath": "^0.1.6",
-        "@khanacademy/math-input": "^15.1.0",
-        "@khanacademy/perseus-core": "1.3.0",
-        "@khanacademy/perseus-linter": "^0.3.8",
-        "@khanacademy/pure-markdown": "^0.2.11",
-        "@khanacademy/simple-markdown": "^0.11.0"
+        "@khanacademy/kas": "^0.3.6",
+        "@khanacademy/kmath": "^0.1.7",
+        "@khanacademy/math-input": "^16.1.0",
+        "@khanacademy/perseus-core": "1.4.0",
+        "@khanacademy/perseus-linter": "^0.3.9",
+        "@khanacademy/pure-markdown": "^0.2.12",
+        "@khanacademy/simple-markdown": "^0.11.1"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^6.2.2",

package/src/__stories__/server-item-renderer.stories.tsx

@@ -4,7 +4,7 @@ import {ServerItemRendererWithDebugUI} from "../../../../testing/server-item-ren
 import {
     itemWithInput,
     labelImageItem,
-} from "../__testdata__/item-renderer.testdata";
+} from "../__testdata__/server-item-renderer.testdata";
 
 type StoryArgs = Record<any, any>;
 

package/src/__testdata__/server-item-renderer.testdata.ts

@@ -0,0 +1,160 @@
+import type {
+    InputNumberWidget,
+    LabelImageWidget,
+    PerseusItem,
+    PerseusRenderer,
+} from "../perseus-types";
+
+export const itemWithInput: PerseusItem = {
+    question: {
+        content:
+            "Enter the number $$-42$$ in the box: [[\u2603 input-number 1]]",
+        images: {},
+        widgets: {
+            "input-number 1": {
+                type: "input-number",
+                graded: true,
+                options: {
+                    answerType: "number",
+                    value: "-42",
+                    simplify: "required",
+                    size: "normal",
+                    inexact: false,
+                    maxError: 0.1,
+                },
+            } as InputNumberWidget,
+        },
+    },
+    hints: [
+        {content: "Hint #1", images: {}, widgets: {}},
+        {content: "Hint #2", images: {}, widgets: {}},
+        {content: "Hint #3", images: {}, widgets: {}},
+    ],
+    answerArea: null,
+    _multi: null,
+    itemDataVersion: {major: 0, minor: 0},
+    answer: null,
+};
+
+export const labelImageItem: PerseusItem = {
+    answerArea: {
+        calculator: false,
+        chi2Table: false,
+        periodicTable: false,
+        tTable: false,
+        zTable: false,
+    },
+    _multi: null,
+    answer: null,
+    hints: [],
+    itemDataVersion: {major: 0, minor: 1},
+    question: {
+        content:
+            "Catherine created a chart and a bar graph to show how many dogs of each breed the animal shelter placed into good homes last year. \n\nDog breed  | Number of dogs \n:- | :-: \nBulldog | $32$ \nGreyhound | $72$ \nMastiff | $56$ \nCollie | $40$ \n\n**Label each bar on the bar graph.**\n\n[[☃ label-image 1]]\n\n\n\n",
+        images: {
+            "web+graphie://ka-perseus-graphie.s3.amazonaws.com/2f60b533892fe6cb9351f704ffdada8ae4bc655c":
+                {height: 365, width: 503},
+            "web+graphie://ka-perseus-graphie.s3.amazonaws.com/75f937c6ea133d655dd9f698a58182efd6cc85d4":
+                {height: 293, width: 331},
+        },
+        widgets: {
+            "label-image 1": {
+                alignment: "default",
+                graded: true,
+                static: false,
+                type: "label-image",
+                version: {major: 0, minor: 0},
+                options: {
+                    choices: ["Bulldog", "Greyhound", "Mastiff", "Collie"],
+                    hideChoicesFromInstructions: true,
+                    imageAlt:
+                        "A bar graph with four bar lines shows the horizontal axis labeled Dog breed and the vertical axis labeled Number of dogs. The vertical axis is labeled from the bottom of the axis to the top of the axis as follows: 0, 8, 16, 24, 32, 40, 48, 56, 64, 72, and 80. The horizontal axis has, from left to right, four unlabeled bar lines as follows: the first unlabeled bar line extends to 56, the second unlabeled bar line extends to 72, the third unlabeled bar line extends to 40, and the fourth unlabeled bar line extends to 32.",
+                    imageHeight: 293,
+                    imageUrl:
+                        "web+graphie://ka-perseus-graphie.s3.amazonaws.com/64ace45942546183c3dc842cb0e9e4f64a312727",
+                    imageWidth: 331,
+                    markers: [
+                        {
+                            answers: ["Bulldog"],
+                            label: "The fourth unlabeled bar line.",
+                            x: 87.3,
+                            y: 90.2,
+                        },
+                        {
+                            answers: ["Collie"],
+                            label: "The third unlabeled bar line.",
+                            x: 67.7,
+                            y: 90.5,
+                        },
+                        {
+                            answers: ["Greyhound"],
+                            label: "The second unlabeled bar line.",
+                            x: 47.7,
+                            y: 90.2,
+                        },
+                        {
+                            answers: ["Mastiff"],
+                            label: "The first unlabeled bar line.",
+                            x: 27.8,
+                            y: 90.5,
+                        },
+                    ],
+                    multipleAnswers: false,
+                    static: false,
+                },
+            } as LabelImageWidget,
+        },
+    },
+};
+
+// Note that if this item is used, you _must_ first register the MockWidget
+export const mockedItem: PerseusItem = {
+    // The mock widget type is not part of the PerseusWidget type union (and
+    // we don't want to make it such to avoid polluting our production types
+    // for test purposes) so we force TypeScript to accept it here.
+    // @ts-expect-error - TS2352 - Conversion of type '{ content: string; images: {}; widgets: { "mock-widget 1": { graded: true; version: { major: number; minor: number; }; static: false; type: "mock-widget"; options: { static: false; smiling: boolean; }; alignment: string; }; "mock-widget 2": { ...; }; "mock-widget 3": { ...; }; "mock-widget 4": { ...; }; }; }' to type 'PerseusRenderer' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+    question: {
+        content:
+            "Mock widget ==> [[\u2603 mock-widget 1]] [[\u2603 mock-widget 2]] [[\u2603 mock-widget 3]] [[\u2603 mock-widget 4]]",
+        images: {},
+        widgets: {
+            "mock-widget 1": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: true},
+                alignment: "default",
+            },
+            "mock-widget 2": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: false},
+                alignment: "default",
+            },
+            "mock-widget 3": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: true},
+                alignment: "default",
+            },
+            "mock-widget 4": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: false},
+                alignment: "default",
+            },
+        },
+    } as PerseusRenderer,
+    hints: [],
+    answerArea: null,
+    _multi: null,
+    itemDataVersion: {major: 0, minor: 0},
+    answer: null,
+};

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

@@ -1,6 +1,7 @@
 import {
     StatefulKeypadContextProvider,
     KeypadContext,
+    MobileKeypad,
 } from "@khanacademy/math-input";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import {screen, render, fireEvent, waitFor} from "@testing-library/react";
@@ -11,7 +12,6 @@ import {
     testDependencies,
     testDependenciesV2,
 } from "../../../../testing/test-dependencies";
-import KeypadSwitch from "../../../math-input/src/components/keypad-switch";
 import {articleWithExpression} from "../__testdata__/article-renderer.testdata";
 import ArticleRenderer from "../article-renderer";
 import * as Dependencies from "../dependencies";
@@ -24,11 +24,10 @@ function KeypadWithContext() {
         <KeypadContext.Consumer>
             {({setKeypadElement}) => {
                 return (
-                    <KeypadSwitch
+                    <MobileKeypad
                         onElementMounted={setKeypadElement}
                         onDismiss={() => {}}
                         onAnalyticsEvent={async () => {}}
-                        useV2Keypad
                     />
                 );
             }}

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

@@ -11,7 +11,7 @@ import {
 import {
     itemWithInput,
     mockedItem,
-} from "../__testdata__/item-renderer.testdata";
+} from "../__testdata__/server-item-renderer.testdata";
 import * as Dependencies from "../dependencies";
 import WrappedServerItemRenderer, {
     ServerItemRenderer,
@@ -25,9 +25,9 @@ import MockAssetLoadingWidgetExport, {
 } from "./mock-asset-loading-widget";
 import MockWidgetExport from "./mock-widget";
 
+import type {MockAssetLoadingWidget} from "./mock-asset-loading-widget";
 import type {PerseusItem} from "../perseus-types";
 import type {APIOptions} from "../types";
-import type {MockAssetLoadingWidget} from "./mock-asset-loading-widget";
 import type {KeypadAPI} from "@khanacademy/math-input";
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 

package/src/article-renderer.tsx

@@ -12,27 +12,25 @@ import {ClassNames as ApiClassNames, ApiOptions} from "./perseus-api";
 import Renderer from "./renderer";
 import Util from "./util";
 
-import type {KeypadProps} from "./mixins/provide-keypad";
 import type {PerseusRenderer} from "./perseus-types";
 import type {APIOptions, PerseusDependenciesV2} from "./types";
 import type {KeypadAPI} from "@khanacademy/math-input";
 import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
-type Props = Partial<React.ContextType<typeof DependenciesContext>> &
-    KeypadProps & {
-        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>;
-        keypadElement?: KeypadAPI | null | undefined;
-        dependencies: PerseusDependenciesV2;
-    };
+type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
+    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>;
+    keypadElement?: KeypadAPI | null | undefined;
+    dependencies: PerseusDependenciesV2;
+};
 
 type DefaultProps = {
     apiOptions: Props["apiOptions"];

package/src/components/graph.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
+import AssetContext from "../asset-context";
 import {interactiveSizes} from "../styles/constants";
 import Util from "../util";
 import GraphUtils from "../util/graph-utils";
@@ -395,14 +396,19 @@ class Graph extends React.Component<Props> {
         if (imageData.url) {
             const scale = this.props.box[0] / interactiveSizes.defaultBoxSize;
             image = (
-                // @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}
-                    height={imageData.height}
-                    scale={scale}
-                    responsive={false}
-                />
+                <AssetContext.Consumer>
+                    {({setAssetStatus}) => (
+                        <SvgImage
+                            // @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">'.
+                            src={imageData.url}
+                            width={imageData.width}
+                            height={imageData.height}
+                            scale={scale}
+                            responsive={false}
+                            setAssetStatus={setAssetStatus}
+                        />
+                    )}
+                </AssetContext.Consumer>
             );
         } else {
             image = null;