@khanacademy/perseus 6.7.0 → 7.0.1

package/dist/item-renderer.d.ts

@@ -3,7 +3,8 @@ import HintsRenderer from "./hints-renderer";
 import Renderer from "./renderer";
 import type { KeypadProps } from "./mixins/provide-keypad";
 import type { PerseusItem } from "./perseus-types";
-import type { APIOptions, FocusPath, KEScore, LinterContextProps } from "./types";
+import type { APIOptions, FocusPath, LinterContextProps } from "./types";
+import type { KEScore } from "@khanacademy/perseus-core";
 type Props = // These props are used by the ProvideKeypad mixin.
 KeypadProps & {
     apiOptions: APIOptions;

package/dist/item-renderer.js.flow

@@ -9,12 +9,8 @@ import HintsRenderer from "./hints-renderer";
 import Renderer from "./renderer";
 import type { KeypadProps } from "./mixins/provide-keypad";
 import type { PerseusItem } from "./perseus-types";
-import type {
-  APIOptions,
-  FocusPath,
-  KEScore,
-  LinterContextProps,
-} from "./types";
+import type { APIOptions, FocusPath, LinterContextProps } from "./types";
+import type { KEScore } from "@khanacademy/perseus-core";
 declare type Props = {|
   ...KeypadProps,
   ...{|

package/dist/perseus-api.d.ts

@@ -53,6 +53,7 @@ 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>;
@@ -84,6 +85,7 @@ export declare const ApiOptions: {
             correct?: boolean | undefined;
         } & Record<string, unknown>) => void) | undefined;
         customKeypad?: boolean | undefined;
+        useV2Keypad?: boolean | undefined;
         nativeKeypadProxy?: (() => unknown) | undefined;
         isMobile?: boolean | undefined;
         setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
@@ -105,6 +107,7 @@ 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?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
         onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
         readOnly: NonNullable<boolean | undefined>;

package/dist/perseus-api.js.flow

@@ -33,6 +33,7 @@ declare export var 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>,
@@ -89,6 +90,7 @@ declare export var ApiOptions: {|
           |}) => void)
         | void,
       customKeypad?: boolean | void,
+      useV2Keypad?: boolean | void,
       nativeKeypadProxy?: (() => mixed) | void,
       isMobile?: boolean | void,
       setDrawingAreaAvailable?: ((arg1: boolean) => mixed) | void,
@@ -111,6 +113,7 @@ declare export var ApiOptions: {|
       inModal: $NonMaybeType<boolean | void>,
       isArticle: $NonMaybeType<boolean | void>,
       isMobile: $NonMaybeType<boolean | void>,
+      useV2Keypad: $NonMaybeType<boolean | void>,
       onFocusChange: (
         newFocusPath: $Flowgen$Import$_2e__2f_types.FocusPath,
         oldFocusPath: $Flowgen$Import$_2e__2f_types.FocusPath,

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

@@ -9,7 +9,8 @@
 import * as React from "react";
 import Renderer from "./renderer";
 import type { KeypadProps } from "./mixins/provide-keypad";
-import type { APIOptions, KEScore, FocusPath, RendererInterface } from "./types";
+import type { APIOptions, FocusPath } from "./types";
+import type { RendererInterface, KEScore } from "@khanacademy/perseus-core";
 type OwnProps = // These props are used by the ProvideKeypad mixin.
 KeypadProps & {
     apiOptions: APIOptions;

package/dist/server-item-renderer.js.flow

@@ -7,12 +7,8 @@
 import * as React from "react";
 import Renderer from "./renderer";
 import type { KeypadProps } from "./mixins/provide-keypad";
-import type {
-  APIOptions,
-  KEScore,
-  FocusPath,
-  RendererInterface,
-} from "./types";
+import type { APIOptions, FocusPath } from "./types";
+import type { RendererInterface, KEScore } from "@khanacademy/perseus-core";
 declare type OwnProps = {|
   ...KeypadProps,
   ...{|

package/dist/types.d.ts

@@ -7,15 +7,6 @@ import type { SizeClass } from "./util/sizing-utils";
 import type { SendEventFn } from "@khanacademy/perseus-core";
 import type { Result } from "@khanacademy/wonder-blocks-data";
 export type FocusPath = ReadonlyArray<string> | null | undefined;
-type State = any;
-export interface RendererInterface {
-    getSerializedState(): State;
-    restoreSerializedState(state: State, callback?: () => void): void;
-    scoreInput(): KEScore;
-    blur(): void;
-    focus(): boolean | null | undefined;
-    props: any;
-}
 export type Dimensions = {
     width?: number;
     height?: number;
@@ -38,14 +29,6 @@ export type PerseusScore = {
     total: number;
     message?: string | null | undefined;
 };
-export type KEScore = {
-    empty: boolean;
-    correct: boolean;
-    message?: string | null | undefined;
-    suppressAlmostThere?: boolean | null | undefined;
-    guess: any;
-    state: any;
-};
 export type Hint = {
     widgets: WidgetDict;
     content: string;
@@ -114,6 +97,7 @@ export type APIOptions = Readonly<{
         correct?: boolean;
     } & Record<string, unknown>) => void;
     customKeypad?: boolean;
+    useV2Keypad?: boolean;
     nativeKeypadProxy?: () => unknown;
     isMobile?: boolean;
     setDrawingAreaAvailable?: (arg1: boolean) => unknown;
@@ -195,6 +179,7 @@ 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/types.js.flow

@@ -13,15 +13,6 @@ import type { SizeClass } from "./util/sizing-utils";
 import type { SendEventFn } from "@khanacademy/perseus-core";
 import type { Result } from "@khanacademy/wonder-blocks-data";
 export type FocusPath = $ReadOnlyArray<string> | null | void;
-declare type State = any;
-export interface RendererInterface {
-  getSerializedState(): State;
-  restoreSerializedState(state: State, callback?: () => void): void;
-  scoreInput(): KEScore;
-  blur(): void;
-  focus(): boolean | null | void;
-  props: any;
-}
 export type Dimensions = {|
   width?: number,
   height?: number,
@@ -46,14 +37,6 @@ export type PerseusScore =
       total: number,
       message?: string | null | void,
     |};
-export type KEScore = {|
-  empty: boolean,
-  correct: boolean,
-  message?: string | null | void,
-  suppressAlmostThere?: boolean | null | void,
-  guess: any,
-  state: any,
-|};
 export type Hint = {|
   widgets: WidgetDict,
   content: string,
@@ -141,6 +124,7 @@ export type APIOptions = $ReadOnly<{|
     ...{ [key: string]: mixed },
   |}) => void,
   customKeypad?: boolean,
+  useV2Keypad?: boolean,
   nativeKeypadProxy?: () => mixed,
   isMobile?: boolean,
   setDrawingAreaAvailable?: (arg1: boolean) => mixed,
@@ -239,6 +223,7 @@ export type APIOptionsWithDefaults = $ReadOnly<{|
     inModal: $NonMaybeType<$PropertyType<APIOptions, "inModal">>,
     isArticle: $NonMaybeType<$PropertyType<APIOptions, "isArticle">>,
     isMobile: $NonMaybeType<$PropertyType<APIOptions, "isMobile">>,
+    useV2Keypad: $NonMaybeType<$PropertyType<APIOptions, "useV2Keypad">>,
     onFocusChange: $NonMaybeType<$PropertyType<APIOptions, "onFocusChange">>,
     onInputError: $NonMaybeType<$PropertyType<APIOptions, "onInputError">>,
     readOnly: $NonMaybeType<$PropertyType<APIOptions, "readOnly">>,

package/dist/util.d.ts

@@ -1,5 +1,6 @@
 import type { Range } from "./perseus-types";
-import type { Widget, PerseusScore, KEScore } from "./types";
+import type { Widget, PerseusScore } from "./types";
+import type { KEScore } from "@khanacademy/perseus-core";
 type WordPosition = {
     start: number;
     end: number;
@@ -170,7 +171,8 @@ declare function extractPointerLocation(event: any): Position | null | undefined
  * avoid sending the touch to the mobile scratchpad
  */
 declare function captureScratchpadTouchStart(e: TouchEvent): void;
-declare function getImageSize(url: string, callback: (arg1: number, arg2: number) => void): void;
+declare function getImageSizeModern(url: string): Promise<[number, number]>;
+declare function getImageSize(url: string, callback: (width: number, height: number) => void): void;
 declare function getRealImageUrl(url: string): string;
 declare function isLabeledSVG(url: string): boolean;
 declare function getBaseUrl(url: string): string;
@@ -232,6 +234,7 @@ declare const Util: {
     readonly supportsPassiveEvents: () => boolean;
     readonly captureScratchpadTouchStart: typeof captureScratchpadTouchStart;
     readonly getImageSize: typeof getImageSize;
+    readonly getImageSizeModern: typeof getImageSizeModern;
     readonly getRealImageUrl: typeof getRealImageUrl;
     readonly isLabeledSVG: typeof isLabeledSVG;
     readonly getBaseUrl: typeof getBaseUrl;

package/dist/util.js.flow

@@ -5,7 +5,8 @@
  * @flow
  */
 import type { Range } from "./perseus-types";
-import type { Widget, PerseusScore, KEScore } from "./types";
+import type { Widget, PerseusScore } from "./types";
+import type { KEScore } from "@khanacademy/perseus-core";
 declare type WordPosition = {|
   start: number,
   end: number,
@@ -235,9 +236,10 @@ declare function extractPointerLocation(event: any): Position | null | void;
  * avoid sending the touch to the mobile scratchpad
  */
 declare function captureScratchpadTouchStart(e: TouchEvent): void;
+declare function getImageSizeModern(url: string): Promise<[number, number]>;
 declare function getImageSize(
   url: string,
-  callback: (arg1: number, arg2: number) => void
+  callback: (width: number, height: number) => void
 ): void;
 declare function getRealImageUrl(url: string): string;
 declare function isLabeledSVG(url: string): boolean;
@@ -306,6 +308,7 @@ declare var Util: {|
   +supportsPassiveEvents: () => boolean,
   +captureScratchpadTouchStart: typeof captureScratchpadTouchStart,
   +getImageSize: typeof getImageSize,
+  +getImageSizeModern: typeof getImageSizeModern,
   +getRealImageUrl: typeof getRealImageUrl,
   +isLabeledSVG: typeof isLabeledSVG,
   +getBaseUrl: typeof getBaseUrl,

package/dist/widgets/matcher.d.ts

@@ -29,6 +29,7 @@ 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/matcher.js.flow

@@ -40,6 +40,7 @@ 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
           >,

package/dist/widgets/simulator.d.ts

@@ -24,6 +24,7 @@ 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/simulator.js.flow

@@ -35,6 +35,7 @@ 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
           >,

package/dist/widgets/sorter.d.ts

@@ -25,6 +25,7 @@ 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/dist/widgets/sorter.js.flow

@@ -36,6 +36,7 @@ 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
           >,

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "6.7.0",
+    "version": "7.0.1",
     "publishConfig": {
         "access": "public"
     },
@@ -23,8 +23,8 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/math-input": "^7.0.0",
-        "@khanacademy/perseus-core": "0.0.2",
+        "@khanacademy/math-input": "^8.1.0",
+        "@khanacademy/perseus-core": "0.1.0",
         "@khanacademy/perseus-linter": "^0.3.1",
         "@khanacademy/pure-markdown": "^0.2.3",
         "@khanacademy/simple-markdown": "^0.9.3"

package/src/index.ts

@@ -60,7 +60,6 @@ export * as Dependencies from "./dependencies";
 export {Errors, Log} from "./logging/log";
 export {PerseusError} from "./perseus-error";
 export {default as JiptParagraphs} from "./jipt-paragraphs";
-export {default as KeypadContext} from "./keypad-context";
 export {default as KhanMath} from "./util/math";
 export {default as LoadingContext} from "./loading-context";
 export {default as mediaQueries} from "./styles/media-queries";
@@ -109,11 +108,9 @@ export type {
     ImageUploader,
     JiptLabelStore,
     JiptRenderer,
-    KEScore,
     LinterContextProps,
     PerseusDependencies,
     PerseusScore,
-    RendererInterface,
     Version,
     VideoData,
     VideoKind,

package/src/item-renderer.tsx

@@ -15,7 +15,8 @@ import reactRender from "./util/react-render";
 
 import type {KeypadProps} from "./mixins/provide-keypad";
 import type {PerseusItem} from "./perseus-types";
-import type {APIOptions, FocusPath, KEScore, LinterContextProps} from "./types";
+import type {APIOptions, FocusPath, LinterContextProps} from "./types";
+import type {KEScore} from "@khanacademy/perseus-core";
 
 const {mapObject} = Objective;
 

package/src/mixins/provide-keypad.tsx

@@ -10,13 +10,14 @@
  * extend a `ProvideKeypad` component instead of using this mixin.
  */
 
-import {LegacyKeypad} from "@khanacademy/math-input";
+import {MobileKeypad} from "@khanacademy/math-input";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
 import reactRender from "../util/react-render";
 
+import type {APIOptions} from "../types";
 import type {CSSProperties} from "aphrodite";
 
 export type KeypadProps = {
@@ -73,13 +74,13 @@ const ProvideKeypad = {
 
     componentDidMount() {
         const _this = this;
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'props' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
+        const apiOptions: APIOptions = _this.props.apiOptions;
+
         if (
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'props' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
-            _this.props.apiOptions &&
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'props' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
-            _this.props.apiOptions.customKeypad &&
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'props' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
-            !_this.props.apiOptions.nativeKeypadProxy
+            apiOptions &&
+            apiOptions.customKeypad &&
+            !apiOptions.nativeKeypadProxy
         ) {
             // TODO(charlie): Render this and the wrapped component in the same
             // React tree. We may also want to add this keypad asynchronously
@@ -90,7 +91,7 @@ const ProvideKeypad = {
             document.body?.appendChild(_this._keypadContainer);
 
             reactRender(
-                <LegacyKeypad
+                <MobileKeypad
                     onElementMounted={(element) => {
                         // NOTE(kevinb): The reason why this setState works is
                         // b/c we're calling it manually from item-renderer.jsx
@@ -106,6 +107,7 @@ const ProvideKeypad = {
                     }}
                     // @ts-expect-error [FEI-5003] - TS2339 - Property 'props' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
                     style={_this.props.keypadStyle}
+                    useV2Keypad={apiOptions.useV2Keypad}
                 />,
                 // @ts-expect-error [FEI-5003] - TS2339 - Property '_keypadContainer' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
                 _this._keypadContainer,

package/src/perseus-api.tsx

@@ -100,6 +100,11 @@ export const ApiOptions = {
         // Indicates whether or not to use mobile styling.
         isMobile: PropTypes.bool,
 
+        // Whether to use v1 (Legacy) Keypad for MathInput mobile or
+        // use the new v2 Keypad
+        // TODO [LC-1088]: remove after v2 release
+        useV2Keypad: PropTypes.bool,
+
         // A function, called with a bool indicating whether use of the
         // drawing area (scratchpad) should be allowed/disallowed.
         // Previously handled by `Khan.scratchpad.enable/disable`
@@ -145,6 +150,7 @@ export const ApiOptions = {
     defaults: {
         isArticle: false,
         isMobile: false,
+        useV2Keypad: false,
         onInputError: function () {},
         onFocusChange: function () {},
         GroupMetadataEditor: StubTagEditor,

package/src/server-item-renderer.tsx

@@ -19,7 +19,8 @@ import Renderer from "./renderer";
 import Util from "./util";
 
 import type {KeypadProps} from "./mixins/provide-keypad";
-import type {APIOptions, KEScore, FocusPath, RendererInterface} from "./types";
+import type {APIOptions, FocusPath} from "./types";
+import type {RendererInterface, KEScore} from "@khanacademy/perseus-core";
 
 const {mapObject} = Objective;
 

package/src/types.ts

@@ -10,17 +10,6 @@ import type {Result} from "@khanacademy/wonder-blocks-data";
 
 export type FocusPath = ReadonlyArray<string> | null | undefined;
 
-type State = any;
-
-export interface RendererInterface {
-    getSerializedState(): State;
-    restoreSerializedState(state: State, callback?: () => void): void;
-    scoreInput(): KEScore;
-    blur(): void;
-    focus(): boolean | null | undefined;
-    props: any;
-}
-
 export type Dimensions = {
     width?: number;
     height?: number;
@@ -51,15 +40,6 @@ export type PerseusScore =
           message?: string | null | undefined;
       };
 
-export type KEScore = {
-    empty: boolean;
-    correct: boolean;
-    message?: string | null | undefined;
-    suppressAlmostThere?: boolean | null | undefined;
-    guess: any;
-    state: any;
-};
-
 export type Hint = {
     widgets: WidgetDict;
     content: string; // JSON string,
@@ -197,6 +177,10 @@ export type APIOptions = Readonly<{
     // from the math-input repo instead of the existing perseus math
     // input components.
     customKeypad?: boolean;
+    // Whether to use v1 (Legacy) Keypad for MathInput mobile or
+    // use the new v2 Keypad
+    // TODO [LC-1088]: remove after v2 release
+    useV2Keypad?: boolean;
     // If this is provided, it is called instead of appending an instance
     // of `math-input`'s keypad to the body. This is used by the native
     // apps so they can have the keypad be defined on the native side.
@@ -359,6 +343,7 @@ export type APIOptionsWithDefaults = Readonly<
         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/src/util.ts

@@ -6,7 +6,8 @@ import {PerseusError} from "./perseus-error";
 import KhanAnswerTypes from "./util/answer-types";
 
 import type {Range} from "./perseus-types";
-import type {Widget, PerseusScore, KEScore} from "./types";
+import type {Widget, PerseusScore} from "./types";
+import type {KEScore} from "@khanacademy/perseus-core";
 
 type WordPosition = {
     start: number;
@@ -838,9 +839,26 @@ function captureScratchpadTouchStart(e: TouchEvent) {
     e.stopPropagation();
 }
 
+async function getImageSizeModern(url: string): Promise<[number, number]> {
+    const image = new Image();
+
+    return new Promise((resolve, reject) => {
+        // Handle the success case
+        image.onload = () => {
+            resolve([image.naturalWidth, image.naturalHeight]);
+        };
+
+        // Handle the error case
+        image.onerror = reject;
+
+        // Kick off the loading
+        image.src = url;
+    });
+}
+
 function getImageSize(
     url: string,
-    callback: (arg1: number, arg2: number) => void,
+    callback: (width: number, height: number) => void,
 ): void {
     const img = new Image();
     img.onload = function () {
@@ -989,6 +1007,7 @@ const Util = {
     supportsPassiveEvents,
     captureScratchpadTouchStart,
     getImageSize,
+    getImageSizeModern,
     getRealImageUrl,
     isLabeledSVG,
     getBaseUrl,

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

@@ -1,7 +1,7 @@
+import {KeypadContext} from "@khanacademy/math-input";
 import * as React from "react";
 
 import {ItemRendererWithDebugUI} from "../../../../../testing/item-renderer-with-debug-ui";
-import KeypadContext from "../../keypad-context";
 import {
     expressionItem2,
     expressionItem3,

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

@@ -1,16 +1,14 @@
-import {LegacyKeypad} from "@khanacademy/math-input";
+import {KeypadContext, MobileKeypad} from "@khanacademy/math-input";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import KeypadContext from "../../keypad-context";
-
 const Footer = (): React.ReactElement => {
     return (
         <View style={styles.keypadContainer}>
             <KeypadContext.Consumer>
-                {({keypadElement, setKeypadElement, renderer}) => (
-                    <LegacyKeypad
+                {({setKeypadElement, renderer}) => (
+                    <MobileKeypad
                         onElementMounted={setKeypadElement}
                         onDismiss={() => renderer && renderer.blur()}
                         style={styles.keypad}