@khanacademy/perseus 17.4.0 → 17.5.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/perseus
 
+## 17.5.0
+
+### Minor Changes
+
+-   [#909](https://github.com/Khan/perseus/pull/909) [`6c841f55`](https://github.com/Khan/perseus/commit/6c841f55027c87bfc8339816dac582f175a84193) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Reworked onFocusChange logic to solve a bug on initial render.
+
+### Patch Changes
+
+-   [#908](https://github.com/Khan/perseus/pull/908) [`29563723`](https://github.com/Khan/perseus/commit/29563723cf229a9169d0c78a0174a8dbc8029861) Thanks [@benchristel](https://github.com/benchristel)! - Lighten the background color for odd-numbered rows of Markdown tables on
+    desktop-sized screens. Previously, the color was `#ededed`; it is now
+    `#f7f8fa` (Wonder Blocks offWhite).
+
+    This change ensures that color-coded math expressions will have accessible
+    contrast with the background.
+
 ## 17.4.0
 
 ### Minor Changes

package/dist/es/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/es/index.js

@@ -44202,7 +44202,7 @@ const init = function init(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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44258,6 +44258,17 @@ class ArticleRenderer extends React.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 == null ? void 0 : 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();
@@ -44265,11 +44276,6 @@ class ArticleRenderer extends React.Component {
           keypadElement.dismiss();
         }
       }
-      if (this.props.apiOptions.onFocusChange != null) {
-        const keypadDomNode = keypadElement == null ? void 0 : keypadElement.getDOMNode();
-        const keypadHeight = keypadDomNode && didFocusInput ? keypadDomNode.getBoundingClientRect().height : 0;
-        this.props.apiOptions.onFocusChange(this._currentFocus, prevFocusPath, keypadHeight, didFocusInput ? focusedInput : null);
-      }
     };
     this._onRendererBlur = blurPath => {
       const blurringFocusPath = this._currentFocus;
@@ -44835,6 +44841,19 @@ class ServerItemRenderer extends React.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 == null ? void 0 : 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();
@@ -44842,16 +44861,6 @@ class ServerItemRenderer extends React.Component {
         keypadElement.dismiss();
       }
     }
-    if (onFocusChange != null) {
-      // First, calculate the current keypad height
-      const keypadDomNode = keypadElement == null ? void 0 : 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;