@khanacademy/perseus 17.4.0 → 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.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.4.0";
+const libVersion = "17.5.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44404,6 +44404,17 @@ class ArticleRenderer extends React__namespace.Component {
       });
       focusedInput = this.sectionRenderers[sectionIndex].getDOMNodeForPath(focusPath);
     }
+    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) {
         keypadElement.activate();
@@ -44411,11 +44422,6 @@ 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;
@@ -44953,6 +44959,19 @@ class ServerItemRenderer extends React__namespace.Component {
     const didFocusInput = this._currentFocus && inputPaths.some(inputPath => {
       return Util.inputPathsEqual(inputPath, this._currentFocus);
     });
+    if (onFocusChange != null) {
+      // 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) {
         keypadElement.activate();
@@ -44960,16 +44979,6 @@ 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;