@khanacademy/perseus 17.3.2 → 17.4.0

package/dist/index.css

@@ -1490,6 +1490,18 @@ body.mobile ul.inequalities-one-line-radios > li {
   clear: both;
 }
 /* Fall back colors? Eg educator, talks & interviews */
+.framework-perseus code {
+  font-family: Courier, monospace;
+}
+.framework-perseus pre {
+  background-color: #f0f1f2;
+  border-radius: 4px;
+  color: #21242c;
+  font-size: 18px;
+  padding: 16px;
+  white-space: pre;
+  overflow: auto;
+}
 .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container:not(.perseus-widget__definition) {
   font-size: 14px;
   line-height: 19.6px;
@@ -1634,17 +1646,7 @@ body.mobile ul.inequalities-one-line-radios > li {
   line-height: 1.5;
   margin: 0;
 }
-.framework-perseus.perseus-article:not(.perseus-mobile) code {
-  font-family: Courier, monospace;
-}
 .framework-perseus.perseus-article:not(.perseus-mobile) pre {
-  background-color: #f0f1f2;
-  border-radius: 4px;
-  color: #21242c;
-  font-size: 18px;
-  padding: 16px;
-  white-space: pre;
-  overflow: auto;
   margin: 0 -16px 32px -16px;
 }
 .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-option-content .perseus-renderer > .paragraph {

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.2";
+const libVersion = "17.4.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44404,9 +44404,6 @@ 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);
-    }
     if (keypadElement && isMobile) {
       if (didFocusInput) {
         keypadElement.activate();
@@ -44414,6 +44411,11 @@ class ArticleRenderer extends React__namespace.Component {
         keypadElement.dismiss();
       }
     }
+    if (this.props.apiOptions.onFocusChange != null) {
+      const keypadDomNode = keypadElement?.getDOMNode();
+      const keypadHeight = keypadDomNode && didFocusInput ? keypadDomNode.getBoundingClientRect().height : 0;
+      this.props.apiOptions.onFocusChange(this._currentFocus, prevFocusPath, keypadHeight, didFocusInput ? focusedInput : null);
+    }
   };
   _onRendererBlur = blurPath => {
     const blurringFocusPath = this._currentFocus;
@@ -44951,11 +44953,6 @@ class ServerItemRenderer extends React__namespace.Component {
     const didFocusInput = this._currentFocus && inputPaths.some(inputPath => {
       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));
-    }
     if (keypadElement && isMobile) {
       if (didFocusInput) {
         keypadElement.activate();
@@ -44963,6 +44960,16 @@ class ServerItemRenderer extends React__namespace.Component {
         keypadElement.dismiss();
       }
     }
+    if (onFocusChange != null) {
+      // 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));
+    }
   }
   _onRendererBlur(blurPath) {
     const blurringFocusPath = this._currentFocus;