@khanacademy/perseus 17.4.0 → 17.5.0

package/package.json

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

package/src/__stories__/article-renderer.stories.tsx

@@ -1,4 +1,5 @@
 import {KeypadContext} from "@khanacademy/math-input";
+import {action} from "@storybook/addon-actions";
 import React from "react";
 
 import {storybookDependenciesV2} from "../../../../testing/test-dependencies";
@@ -67,6 +68,7 @@ export const ExpressionArticle = ({useNewStyles}): any => (
                     apiOptions={{
                         isMobile: true,
                         customKeypad: true,
+                        onFocusChange: action("onFocusChange"),
                     }}
                     keypadElement={keypadElement}
                 />

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

@@ -326,9 +326,9 @@ describe("server item renderer", () => {
 
             // Act
             const gotFocus = renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(gotFocus).toBeTrue();
@@ -370,9 +370,9 @@ describe("server item renderer", () => {
 
             // Act
             const gotFocus = renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(keypadElement.activate).toHaveBeenCalled();
@@ -392,15 +392,12 @@ describe("server item renderer", () => {
                 onFocusChange,
             });
             renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
 
             // Act
             renderer.blur();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(onFocusChange).toHaveBeenCalledTimes(2);
@@ -440,15 +437,12 @@ describe("server item renderer", () => {
                 {keypadElement},
             );
             renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
 
             // Act
             renderer.blur();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(keypadElement.dismiss).toHaveBeenCalled();
@@ -471,6 +465,9 @@ describe("server item renderer", () => {
             // Act
             renderer.focusPath(["input-number 1"]);
 
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
+
             // Assert
             expect(onFocusChange).toHaveBeenCalledWith(
                 ["input-number 1"],

package/src/article-renderer.tsx

@@ -104,6 +104,26 @@ class ArticleRenderer
                 );
         }
 
+        const {onFocusChange} = this.props.apiOptions;
+        if (onFocusChange) {
+            // Wait for the keypad to mount before getting the height
+            setTimeout(() => {
+                const keypadDomNode =
+                    keypadElement?.getDOMNode() as HTMLElement;
+                const keypadHeight =
+                    keypadDomNode && didFocusInput
+                        ? keypadDomNode.getBoundingClientRect().height
+                        : 0;
+
+                onFocusChange(
+                    this._currentFocus,
+                    prevFocusPath,
+                    keypadHeight,
+                    didFocusInput ? focusedInput : null,
+                );
+            }, 0);
+        }
+
         if (keypadElement && isMobile) {
             if (didFocusInput) {
                 keypadElement.activate();
@@ -111,21 +131,6 @@ 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/server-item-renderer.tsx

@@ -180,6 +180,29 @@ export class ServerItemRenderer
                 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: HTMLElement =
+                    keypadElement?.getDOMNode() as HTMLElement;
+                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();
@@ -187,26 +210,6 @@ export class ServerItemRenderer
                 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,
-                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: FocusPath) {

package/src/styles/perseus-renderer.less

@@ -314,7 +314,7 @@
         tr:nth-child(odd) {
             // Doesn't work in IE8 :(
             td {
-                background-color: #ededed;
+                background-color: @offWhite;
             }
         }
     }

package/src/styles/variables.less

@@ -15,6 +15,7 @@
 // TODO(charlie): DRY this up. How can we keep our global palette in sync across
 // repos?
 @white: #ffffff;
+@offWhite: #f7f8fa;
 @gray98: #fafafa;
 @gray97: #f6f7f7;
 @gray95: #f0f1f2;