@khanacademy/perseus 17.4.0 → 17.6.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/perseus
 
+## 17.6.0
+
+### Minor Changes
+
+-   [#907](https://github.com/Khan/perseus/pull/907) [`83884550`](https://github.com/Khan/perseus/commit/83884550df8b394e9afa6e95947c987614e2d242) Thanks [@nishasy](https://github.com/nishasy)! - Display names have been updated to better match type names
+
+## 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

@@ -21405,7 +21405,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,
@@ -21818,7 +21818,7 @@ const propsTransform = function propsTransform(widgetOptions) {
 };
 var NumericInput$1 = {
   name: "numeric-input",
-  displayName: "Number text box",
+  displayName: "Numeric input",
   defaultAlignment: "inline-block",
   accessible: true,
   widget: NumericInput,
@@ -23802,7 +23802,7 @@ const propUpgrades$1 = {
 };
 var Radio = {
   name: "radio",
-  displayName: "Multiple choice",
+  displayName: "Radio / Multiple choice",
   accessible: true,
   widget: Radio$1,
   transform: transform,
@@ -26661,7 +26661,7 @@ _.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
@@ -32295,7 +32295,7 @@ const transformProps = function transformProps(editorProps) {
 };
 var LightsPuzzle$1 = {
   name: "lights-puzzle",
-  displayName: "Lights Puzzle",
+  displayName: "Lights puzzle (deprecated)",
   hidden: true,
   widget: LightsPuzzle,
   transform: transformProps
@@ -33238,7 +33238,7 @@ const styles$d = StyleSheet.create({
 });
 var Matcher$1 = {
   name: "matcher",
-  displayName: "Two column matcher",
+  displayName: "Matcher (two column)",
   widget: Matcher,
   isLintable: true
 };
@@ -39303,7 +39303,7 @@ ReactionDiagramWidget.defaultProps = {
 };
 var ReactionDiagram = {
   name: "reaction-diagram",
-  displayName: "Chemical reaction",
+  displayName: "Chemical reaction diagram (deprecated)",
   hidden: true,
   widget: ReactionDiagramWidget
 };
@@ -39397,7 +39397,7 @@ const traverseChildWidgets = function traverseChildWidgets(props, traverseRender
 };
 var Sequence$1 = {
   name: "sequence",
-  displayName: "Graded Sequence",
+  displayName: "Graded sequence (deprecated)",
   widget: Sequence,
   traverseChildWidgets: traverseChildWidgets,
   tracking: "all",
@@ -40106,7 +40106,7 @@ const propTransform$1 = editorProps => {
 };
 var Simulator$1 = {
   name: "simulator",
-  displayName: "Simulator",
+  displayName: "Simulator (deprecated)",
   widget: Simulator,
   transform: propTransform$1,
   hidden: true
@@ -40526,7 +40526,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,
@@ -42937,7 +42937,8 @@ Transformer.defaultProps = _.defaults({
 }, defaultTransformerProps);
 var Transformer$1 = {
   name: "transformer",
-  displayName: "Transformer",
+  displayName: "Transformer (deprecated)",
+  hidden: true,
   widget: Transformer
 };
 
@@ -43984,7 +43985,7 @@ const primUnits = function primUnits(expr) {
 };
 var Unit = {
   name: "unit-input",
-  displayName: "Unit",
+  displayName: "Unit input",
   defaultAlignment: "inline-block",
   widget: OldUnitInput,
   transform: x => lens(x).del(["value"]).freeze(),
@@ -44202,7 +44203,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.6.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44258,6 +44259,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 +44277,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 +44842,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 +44862,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;