@khanacademy/perseus 17.4.0 → 17.6.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.6.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;

package/src/widgets/iframe.tsx

@@ -188,7 +188,7 @@ _.extend(Iframe, {
 
 export default {
     name: "iframe",
-    displayName: "Iframe",
+    displayName: "Iframe (deprecated)",
     widget: Iframe,
     // Let's not expose it to all content creators yet
     hidden: true,

package/src/widgets/input-number.tsx

@@ -403,7 +403,7 @@ const propTransform = (
 
 export default {
     name: "input-number",
-    displayName: "Number text box (old)",
+    displayName: "Input number (deprecated - use numeric input instead)",
     defaultAlignment: "inline-block",
     hidden: true,
     widget: InputNumber,

package/src/widgets/lights-puzzle.tsx

@@ -352,7 +352,7 @@ const transformProps: (arg1: any) => any = function (editorProps) {
 
 export default {
     name: "lights-puzzle",
-    displayName: "Lights Puzzle",
+    displayName: "Lights puzzle (deprecated)",
     hidden: true,
     widget: LightsPuzzle,
     transform: transformProps,

package/src/widgets/matcher.tsx

@@ -292,7 +292,7 @@ const styles = StyleSheet.create({
 
 export default {
     name: "matcher",
-    displayName: "Two column matcher",
+    displayName: "Matcher (two column)",
     widget: Matcher,
     isLintable: true,
 } as WidgetExports<typeof Matcher>;

package/src/widgets/numeric-input.tsx

@@ -567,7 +567,7 @@ const propsTransform = function (
 
 export default {
     name: "numeric-input",
-    displayName: "Number text box",
+    displayName: "Numeric input",
     defaultAlignment: "inline-block",
     accessible: true,
     widget: NumericInput,

package/src/widgets/radio.ts

@@ -146,7 +146,7 @@ const propUpgrades = {
 
 export default {
     name: "radio",
-    displayName: "Multiple choice",
+    displayName: "Radio / Multiple choice",
     accessible: true,
     widget: Radio,
     transform: transform,

package/src/widgets/reaction-diagram.tsx

@@ -138,7 +138,7 @@ class ReactionDiagramWidget extends React.Component<any> {
 
 export default {
     name: "reaction-diagram",
-    displayName: "Chemical reaction",
+    displayName: "Chemical reaction diagram (deprecated)",
     hidden: true,
     widget: ReactionDiagramWidget,
 } as WidgetExports<typeof ReactionDiagramWidget>;

package/src/widgets/sequence.tsx

@@ -133,7 +133,7 @@ const traverseChildWidgets = function (props: any, traverseRenderer: any): any {
 
 export default {
     name: "sequence",
-    displayName: "Graded Sequence",
+    displayName: "Graded sequence (deprecated)",
     widget: Sequence,
     traverseChildWidgets: traverseChildWidgets,
     tracking: "all",

package/src/widgets/simulator.tsx

@@ -822,7 +822,7 @@ const propTransform: (arg1: any) => any = (editorProps) => {
 
 export default {
     name: "simulator",
-    displayName: "Simulator",
+    displayName: "Simulator (deprecated)",
     widget: Simulator,
     transform: propTransform,
     hidden: true,

package/src/widgets/table.tsx

@@ -384,7 +384,7 @@ const propTransform: (arg1: any) => any = (editorProps) => {
 
 export default {
     name: "table",
-    displayName: "Table of values",
+    displayName: "Table (deprecated - use markdown table instead)",
     accessible: true,
     widget: Table,
     transform: propTransform,

package/src/widgets/transformer.tsx

@@ -2930,6 +2930,7 @@ class Transformer extends React.Component<Props> {
 
 export default {
     name: "transformer",
-    displayName: "Transformer",
+    displayName: "Transformer (deprecated)",
+    hidden: true,
     widget: Transformer,
 } as WidgetExports<typeof Transformer>;

package/src/widgets/unit.tsx

@@ -365,7 +365,7 @@ const primUnits = function (expr) {
 
 export default {
     name: "unit-input",
-    displayName: "Unit",
+    displayName: "Unit input",
     defaultAlignment: "inline-block",
     widget: OldUnitInput,
     transform: (x: any): any => lens(x).del(["value"]).freeze(),