@khanacademy/perseus 17.3.2 → 17.4.0

package/dist/perseus-api.d.ts

@@ -64,7 +64,7 @@ export declare const ApiOptions: {
     readonly defaults: Readonly<Readonly<{
         isArticle?: boolean | undefined;
         onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-        onFocusChange?: ((newFocusPath: import("./types").FocusPath, oldFocusPath: import("./types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+        onFocusChange?: ((newFocusPath: import("./types").FocusPath, oldFocusPath: import("./types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
         GroupMetadataEditor?: React.ComponentType<any> | undefined;
         showAlignmentOptions?: boolean | undefined;
         readOnly?: boolean | undefined;
@@ -105,7 +105,7 @@ export declare const ApiOptions: {
         inModal: NonNullable<boolean | undefined>;
         isArticle: NonNullable<boolean | undefined>;
         isMobile: NonNullable<boolean | undefined>;
-        onFocusChange: (newFocusPath: import("./types").FocusPath, oldFocusPath: import("./types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+        onFocusChange: (newFocusPath: import("./types").FocusPath, oldFocusPath: import("./types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown;
         onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
         readOnly: NonNullable<boolean | undefined>;
         setDrawingAreaAvailable: (arg1: boolean) => unknown;

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

@@ -1,11 +1,11 @@
 import * as PerseusLinter from "@khanacademy/perseus-linter";
 /**
- * A copy of the ItemRenderer which renders its question renderer and hints
- * renderer normally instead of ReactDOM.render()ing them into elements in the
- * DOM.
+ * The main item (aka Exercise) renderer in Perseus. This component renders its
+ * question renderer and hints renderer using standard React practices (an
+ * earlier ItemRenderer component used to use jQuery and ReactDOM.render()ing
+ * to render into elements it didn't own.
  *
- * This allows this component to be used in server-rendering of a perseus
- * exercise.
+ * This component is compatible with server-rendering of a perseus exercise.
  */
 import * as React from "react";
 import Renderer from "./renderer";
@@ -109,7 +109,7 @@ declare const ref: React.ForwardRefExoticComponent<Omit<Pick<OwnProps & HOCProps
     apiOptions?: Readonly<{
         isArticle?: boolean | undefined;
         onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-        onFocusChange?: ((newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+        onFocusChange?: ((newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
         GroupMetadataEditor?: React.ComponentType<any> | undefined;
         showAlignmentOptions?: boolean | undefined;
         readOnly?: boolean | undefined;

package/dist/types.d.ts

@@ -1,14 +1,13 @@
 import type { SerializedHighlightSet } from "./components/highlighting/types";
 import type { ILogger } from "./logging/log";
 import type { Item } from "./multi-items/item-types";
-import type { PerseusWidget } from "./perseus-types";
+import type { PerseusAnswerArea, PerseusRenderer, PerseusWidget } from "./perseus-types";
 import type { SizeClass } from "./util/sizing-utils";
 import type { KeypadAPI } from "@khanacademy/math-input";
 import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
 import type { Result } from "@khanacademy/wonder-blocks-data";
 import type * as React from "react";
-import type ReactDOM from "react-dom";
 export type FocusPath = ReadonlyArray<string> | null | undefined;
 type Empty = Record<never, never>;
 export type Dimensions = {
@@ -33,10 +32,7 @@ export type PerseusScore = {
     total: number;
     message?: string | null | undefined;
 };
-export type Hint = {
-    widgets: WidgetDict;
-    content: string;
-    images: ImageDict;
+export type Hint = PerseusRenderer & {
     replace?: boolean;
 };
 export type Version = {
@@ -60,7 +56,7 @@ export type ChangeHandler = (arg1: {
     widgets?: WidgetDict;
     images?: ImageDict;
     question?: any;
-    answerArea?: any;
+    answerArea?: PerseusAnswerArea | null;
     itemDataVersion?: Version;
     item?: Item;
     editorMode?: EditorMode;
@@ -86,7 +82,7 @@ type TrackInteractionArgs = {
 export type APIOptions = Readonly<{
     isArticle?: boolean;
     onInputError?: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
-    onFocusChange?: (newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadElement?: ReturnType<typeof ReactDOM.findDOMNode>, focusedElement?: HTMLElement) => unknown;
+    onFocusChange?: (newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
     GroupMetadataEditor?: React.ComponentType<StubTagEditorType>;
     showAlignmentOptions?: boolean;
     readOnly?: boolean;

package/dist/widgets/expression.d.ts

@@ -92,7 +92,7 @@ declare const _default: Readonly<{
         apiOptions: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -133,7 +133,7 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;
@@ -155,7 +155,7 @@ declare const _default: Readonly<{
         apiOptions: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -196,7 +196,7 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;
@@ -218,7 +218,7 @@ declare const _default: Readonly<{
         apiOptions?: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -259,7 +259,7 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;
@@ -292,7 +292,7 @@ declare const _default: Readonly<{
         apiOptions: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -333,7 +333,7 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;
@@ -355,7 +355,7 @@ declare const _default: Readonly<{
         apiOptions: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -396,7 +396,7 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;
@@ -418,7 +418,7 @@ declare const _default: Readonly<{
         apiOptions?: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -459,7 +459,7 @@ declare const _default: Readonly<{
             inModal: NonNullable<boolean | undefined>;
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;

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

@@ -98,7 +98,7 @@ declare const _default: Readonly<{
         apiOptions: Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -157,7 +157,7 @@ declare const _default: Readonly<{
         apiOptions: Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "17.3.2",
+    "version": "17.4.0",
     "publishConfig": {
         "access": "public"
     },

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

@@ -335,7 +335,7 @@ describe("server item renderer", () => {
             expect(onFocusChange).toHaveBeenCalledWith(
                 ["input-number 1"],
                 null,
-                undefined,
+                0,
                 expect.any(Object),
             );
         });
@@ -343,7 +343,15 @@ describe("server item renderer", () => {
         it("activates the keypadElement when focusing the renderer on mobile", () => {
             // Arranged
             const onFocusChange = jest.fn();
-            const keypadElementDOMNode = <div />;
+            const keypadElementDOMNode = document.createElement("div");
+
+            // We need to mock the getBoundingClientRect() method for our
+            // onFocusChange() callback to work properly.
+            keypadElementDOMNode.getBoundingClientRect = () =>
+                ({
+                    height: 250,
+                } as DOMRect);
+
             const keypadElement: KeypadAPI = {
                 getDOMNode: jest
                     .fn()
@@ -372,7 +380,7 @@ describe("server item renderer", () => {
             expect(onFocusChange).toHaveBeenCalledWith(
                 ["input-number 1"],
                 null,
-                keypadElementDOMNode,
+                250,
                 expect.any(Object),
             );
         });
@@ -399,7 +407,7 @@ describe("server item renderer", () => {
             expect(onFocusChange).toHaveBeenLastCalledWith(
                 null,
                 ["input-number 1"],
-                null,
+                0,
                 null,
             );
         });
@@ -407,7 +415,15 @@ describe("server item renderer", () => {
         it("dismisses the keypadElement when blurring the renderer on mobile", () => {
             // Arranged
             const onFocusChange = jest.fn();
-            const keypadElementDOMNode = <div />;
+            const keypadElementDOMNode = document.createElement("div");
+
+            // We need to mock the getBoundingClientRect() method for our
+            // onFocusChange() callback to work properly.
+            keypadElementDOMNode.getBoundingClientRect = () =>
+                ({
+                    height: 250,
+                } as DOMRect);
+
             const keypadElement: KeypadAPI = {
                 getDOMNode: jest
                     .fn()
@@ -440,7 +456,7 @@ describe("server item renderer", () => {
             expect(onFocusChange).toHaveBeenLastCalledWith(
                 null,
                 ["input-number 1"],
-                null,
+                0,
                 null,
             );
         });
@@ -459,7 +475,7 @@ describe("server item renderer", () => {
             expect(onFocusChange).toHaveBeenCalledWith(
                 ["input-number 1"],
                 null,
-                undefined,
+                0,
                 expect.any(Object),
             );
         });

package/src/article-renderer.tsx

@@ -104,15 +104,6 @@ class ArticleRenderer
                 );
         }
 
-        if (this.props.apiOptions.onFocusChange != null) {
-            this.props.apiOptions.onFocusChange(
-                this._currentFocus,
-                prevFocusPath,
-                didFocusInput ? keypadElement?.getDOMNode() : null,
-                didFocusInput ? focusedInput : null,
-            );
-        }
-
         if (keypadElement && isMobile) {
             if (didFocusInput) {
                 keypadElement.activate();
@@ -120,6 +111,21 @@ class ArticleRenderer
                 keypadElement.dismiss();
             }
         }
+
+        if (this.props.apiOptions.onFocusChange != null) {
+            const keypadDomNode = keypadElement?.getDOMNode() as HTMLElement;
+            const keypadHeight =
+                keypadDomNode && didFocusInput
+                    ? keypadDomNode.getBoundingClientRect().height
+                    : 0;
+
+            this.props.apiOptions.onFocusChange(
+                this._currentFocus,
+                prevFocusPath,
+                keypadHeight,
+                didFocusInput ? focusedInput : null,
+            );
+        }
     };
 
     _onRendererBlur: (arg1: any) => void = (blurPath) => {

package/src/index.ts

@@ -120,15 +120,16 @@ export type {
 } from "./types";
 export type {ParsedValue} from "./util";
 export type {
-    MathFormat,
     InputNumberWidget,
+    MathFormat,
+    PerseusAnswerArea,
+    PerseusExpressionWidgetOptions,
     PerseusImageBackground,
     PerseusInteractiveGraphWidgetOptions,
-    PerseusRadioWidgetOptions,
-    PerseusExpressionWidgetOptions,
+    PerseusItem,
     PerseusPlotterWidgetOptions,
+    PerseusRadioWidgetOptions,
     PerseusRenderer,
-    PerseusAnswerArea,
 } from "./perseus-types";
 export type {Coord} from "./interactive2/types";
 export type {MarkerType} from "./widgets/label-image/types";

package/src/server-item-renderer.tsx

@@ -2,12 +2,12 @@
 import * as PerseusLinter from "@khanacademy/perseus-linter";
 import {StyleSheet, css} from "aphrodite";
 /**
- * A copy of the ItemRenderer which renders its question renderer and hints
- * renderer normally instead of ReactDOM.render()ing them into elements in the
- * DOM.
+ * The main item (aka Exercise) renderer in Perseus. This component renders its
+ * question renderer and hints renderer using standard React practices (an
+ * earlier ItemRenderer component used to use jQuery and ReactDOM.render()ing
+ * to render into elements it didn't own.
  *
- * This allows this component to be used in server-rendering of a perseus
- * exercise.
+ * This component is compatible with server-rendering of a perseus exercise.
  */
 import * as React from "react";
 import _ from "underscore";
@@ -180,24 +180,33 @@ export class ServerItemRenderer
                 return Util.inputPathsEqual(inputPath, this._currentFocus);
             });
 
+        if (keypadElement && isMobile) {
+            if (didFocusInput) {
+                keypadElement.activate();
+            } else {
+                keypadElement.dismiss();
+            }
+        }
+
         if (onFocusChange != null) {
+            // First, calculate the current keypad height
+            const keypadDomNode: HTMLElement =
+                keypadElement?.getDOMNode() as HTMLElement;
+            const keypadHeight =
+                keypadDomNode && didFocusInput
+                    ? keypadDomNode.getBoundingClientRect().height
+                    : 0;
+
+            // Then call the callback
             onFocusChange(
                 this._currentFocus,
                 prevFocus,
-                didFocusInput ? keypadElement?.getDOMNode() : null,
+                keypadHeight,
                 // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'false | Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement | undefined'.
                 didFocusInput &&
                     this.questionRenderer.getDOMNodeForPath(newFocus),
             );
         }
-
-        if (keypadElement && isMobile) {
-            if (didFocusInput) {
-                keypadElement.activate();
-            } else {
-                keypadElement.dismiss();
-            }
-        }
     }
 
     _onRendererBlur(blurPath: FocusPath) {

package/src/styles/articles.less

@@ -2,7 +2,24 @@
 @import "./variables.less";
 @import "./util.less";
 
-// Article Renderer
+// Common styles for _all_ of Perseus
+.framework-perseus {
+    code {
+        font-family: Courier, monospace;
+    }
+
+    pre {
+        background-color: @gray95;
+        border-radius: 4px;
+        color: @gray17;
+        font-size: 18px;
+        padding: 16px;
+        white-space: pre;
+        overflow: auto;
+    }
+}
+
+// Desktop Articles
 .framework-perseus.perseus-article:not(.perseus-mobile) {
     @textColor: #21242c;
     .body-text() {
@@ -190,25 +207,12 @@
         }
     }
 
-    code {
-        font-family: Courier, monospace;
-    }
-
     pre {
-        background-color: @gray95;
-        border-radius: 4px;
-        color: @gray17;
-        font-size: 18px;
-        padding: 16px;
-        white-space: pre;
-        overflow: auto;
         margin: 0 -16px 32px -16px;
     }
 }
 
-// HACK(emily): This is a copy of a bunch of the mixins from the block of
-// styles down below. However, those styles are limited to mobile devices
-// only, so this block is for non-mobile devices.
+// Desktop Exercises
 .framework-perseus:not(.perseus-article):not(.perseus-mobile) {
     // Mixins
     .text(@fontSize; @lineHeight; @color) {
@@ -251,6 +255,7 @@
     .choice-text(14px, 1.25);
 }
 
+// Mobile Articles and Exercises
 .framework-perseus.perseus-mobile {
     .perseus-article {
         .perseus-widget-container {

package/src/types.ts

@@ -1,14 +1,17 @@
 import type {SerializedHighlightSet} from "./components/highlighting/types";
 import type {ILogger} from "./logging/log";
 import type {Item} from "./multi-items/item-types";
-import type {PerseusWidget} from "./perseus-types";
+import type {
+    PerseusAnswerArea,
+    PerseusRenderer,
+    PerseusWidget,
+} from "./perseus-types";
 import type {SizeClass} from "./util/sizing-utils";
 import type {KeypadAPI} from "@khanacademy/math-input";
 import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 import type {Result} from "@khanacademy/wonder-blocks-data";
 import type * as React from "react";
-import type ReactDOM from "react-dom";
 
 export type FocusPath = ReadonlyArray<string> | null | undefined;
 
@@ -45,10 +48,7 @@ export type PerseusScore =
           message?: string | null | undefined;
       };
 
-export type Hint = {
-    widgets: WidgetDict;
-    content: string; // JSON string,
-    images: ImageDict;
+export type Hint = PerseusRenderer & {
     replace?: boolean;
 };
 
@@ -78,7 +78,7 @@ export type ChangeHandler = (
         images?: ImageDict;
         // used only in EditorPage
         question?: any;
-        answerArea?: any;
+        answerArea?: PerseusAnswerArea | null;
         itemDataVersion?: Version;
         // used in MutirenderEditor
         item?: Item;
@@ -144,7 +144,7 @@ export type APIOptions = Readonly<{
     onFocusChange?: (
         newFocusPath: FocusPath,
         oldFocusPath: FocusPath,
-        keypadElement?: ReturnType<typeof ReactDOM.findDOMNode>,
+        keypadHeight?: number,
         focusedElement?: HTMLElement,
     ) => unknown;
     GroupMetadataEditor?: React.ComponentType<StubTagEditorType>;

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

@@ -1,4 +1,5 @@
 import {KeypadContext, KeypadType} from "@khanacademy/math-input";
+import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
 import {ServerItemRendererWithDebugUI} from "../../../../../testing/server-item-renderer-with-debug-ui";
@@ -46,6 +47,7 @@ const WrappedKeypadContext = ({
                             apiOptions={{
                                 isMobile: isMobile,
                                 customKeypad: customKeypad,
+                                onFocusChange: action("onFocusChange"),
                             }}
                         />
                     );