@khanacademy/perseus 17.3.3 → 17.5.0

package/dist/index.css

@@ -2508,7 +2508,7 @@ img.zoom-img {
   padding-bottom: 2px;
 }
 .framework-perseus:not(.perseus-mobile) table tr:nth-child(odd) td {
-  background-color: #ededed;
+  background-color: #f7f8fa;
 }
 .framework-perseus:not(.perseus-mobile) .perseus-titled-table {
   display: inline-block;

package/dist/index.d.ts

@@ -81,7 +81,7 @@ export type { ILogger, LogErrorOptions, ErrorKind } from "./logging/log";
 export type { ServerItemRenderer as ServerItemRendererComponent } from "./server-item-renderer";
 export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, Hint, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetDict, WidgetExports, WidgetInfo, } from "./types";
 export type { ParsedValue } from "./util";
-export type { MathFormat, InputNumberWidget, PerseusImageBackground, PerseusInteractiveGraphWidgetOptions, PerseusRadioWidgetOptions, PerseusExpressionWidgetOptions, PerseusPlotterWidgetOptions, PerseusRenderer, PerseusAnswerArea, } from "./perseus-types";
+export type { InputNumberWidget, MathFormat, PerseusAnswerArea, PerseusExpressionWidgetOptions, PerseusImageBackground, PerseusInteractiveGraphWidgetOptions, PerseusItem, PerseusPlotterWidgetOptions, PerseusRadioWidgetOptions, PerseusRenderer, } from "./perseus-types";
 export type { Coord } from "./interactive2/types";
 export type { MarkerType } from "./widgets/label-image/types";
 /**

package/dist/index.js

@@ -44337,7 +44337,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "17.3.3";
+const libVersion = "17.5.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44404,8 +44404,16 @@ class ArticleRenderer extends React__namespace.Component {
       });
       focusedInput = this.sectionRenderers[sectionIndex].getDOMNodeForPath(focusPath);
     }
-    if (this.props.apiOptions.onFocusChange != null) {
-      this.props.apiOptions.onFocusChange(this._currentFocus, prevFocusPath, didFocusInput ? keypadElement?.getDOMNode() : null, didFocusInput ? focusedInput : null);
+    const {
+      onFocusChange
+    } = this.props.apiOptions;
+    if (onFocusChange) {
+      // Wait for the keypad to mount before getting the height
+      setTimeout(() => {
+        const keypadDomNode = keypadElement?.getDOMNode();
+        const keypadHeight = keypadDomNode && didFocusInput ? keypadDomNode.getBoundingClientRect().height : 0;
+        onFocusChange(this._currentFocus, prevFocusPath, keypadHeight, didFocusInput ? focusedInput : null);
+      }, 0);
     }
     if (keypadElement && isMobile) {
       if (didFocusInput) {
@@ -44952,9 +44960,17 @@ class ServerItemRenderer extends React__namespace.Component {
       return Util.inputPathsEqual(inputPath, this._currentFocus);
     });
     if (onFocusChange != null) {
-      onFocusChange(this._currentFocus, prevFocus, didFocusInput ? keypadElement?.getDOMNode() : null,
-      // @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));
+      // Wait for the keypad to mount before getting the height
+      setTimeout(() => {
+        // First, calculate the current keypad height
+        const keypadDomNode = keypadElement?.getDOMNode();
+        const keypadHeight = keypadDomNode && didFocusInput ? keypadDomNode.getBoundingClientRect().height : 0;
+
+        // Then call the callback
+        onFocusChange(this._currentFocus, prevFocus, 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));
+      }, 0);
     }
     if (keypadElement && isMobile) {
       if (didFocusInput) {