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

@@ -21509,7 +21509,7 @@ const propTransform$4 = widgetOptions => {
 };
 var InputNumber$1 = {
   name: "input-number",
-  displayName: "Number text box (old)",
+  displayName: "Input number (deprecated - use numeric input instead)",
   defaultAlignment: "inline-block",
   hidden: true,
   widget: InputNumber,
@@ -21913,7 +21913,7 @@ const propsTransform = function (widgetOptions) {
 };
 var NumericInput$1 = {
   name: "numeric-input",
-  displayName: "Number text box",
+  displayName: "Numeric input",
   defaultAlignment: "inline-block",
   accessible: true,
   widget: NumericInput,
@@ -23921,7 +23921,7 @@ const propUpgrades$1 = {
 };
 var Radio = {
   name: "radio",
-  displayName: "Multiple choice",
+  displayName: "Radio / Multiple choice",
   accessible: true,
   widget: Radio$1,
   transform: transform,
@@ -26814,7 +26814,7 @@ ___default["default"].extend(Iframe, {
 });
 var Iframe$1 = {
   name: "iframe",
-  displayName: "Iframe",
+  displayName: "Iframe (deprecated)",
   widget: Iframe,
   // Let's not expose it to all content creators yet
   hidden: true
@@ -32426,7 +32426,7 @@ const transformProps = function (editorProps) {
 };
 var LightsPuzzle$1 = {
   name: "lights-puzzle",
-  displayName: "Lights Puzzle",
+  displayName: "Lights puzzle (deprecated)",
   hidden: true,
   widget: LightsPuzzle,
   transform: transformProps
@@ -33366,7 +33366,7 @@ const styles$d = aphrodite.StyleSheet.create({
 });
 var Matcher$1 = {
   name: "matcher",
-  displayName: "Two column matcher",
+  displayName: "Matcher (two column)",
   widget: Matcher,
   isLintable: true
 };
@@ -39432,7 +39432,7 @@ class ReactionDiagramWidget extends React__namespace.Component {
 }
 var ReactionDiagram = {
   name: "reaction-diagram",
-  displayName: "Chemical reaction",
+  displayName: "Chemical reaction diagram (deprecated)",
   hidden: true,
   widget: ReactionDiagramWidget
 };
@@ -39529,7 +39529,7 @@ const traverseChildWidgets = function (props, traverseRenderer) {
 };
 var Sequence$1 = {
   name: "sequence",
-  displayName: "Graded Sequence",
+  displayName: "Graded sequence (deprecated)",
   widget: Sequence,
   traverseChildWidgets: traverseChildWidgets,
   tracking: "all",
@@ -40243,7 +40243,7 @@ const propTransform$1 = editorProps => {
 };
 var Simulator$1 = {
   name: "simulator",
-  displayName: "Simulator",
+  displayName: "Simulator (deprecated)",
   widget: Simulator,
   transform: propTransform$1,
   hidden: true
@@ -40657,7 +40657,7 @@ const propTransform = editorProps => {
 };
 var Table$1 = {
   name: "table",
-  displayName: "Table of values",
+  displayName: "Table (deprecated - use markdown table instead)",
   accessible: true,
   widget: Table,
   transform: propTransform,
@@ -43069,7 +43069,8 @@ class Transformer extends React__namespace.Component {
 }
 var Transformer$1 = {
   name: "transformer",
-  displayName: "Transformer",
+  displayName: "Transformer (deprecated)",
+  hidden: true,
   widget: Transformer
 };
 
@@ -44117,7 +44118,7 @@ const primUnits = function (expr) {
 };
 var Unit = {
   name: "unit-input",
-  displayName: "Unit",
+  displayName: "Unit input",
   defaultAlignment: "inline-block",
   widget: OldUnitInput,
   transform: x => lens(x).del(["value"]).freeze(),
@@ -44337,7 +44338,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.6.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44404,6 +44405,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 +44423,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 +44960,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 +44980,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;