@khanacademy/perseus 12.0.1 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/perseus
 
+## 12.2.0
+
+### Minor Changes
+
+-   [#773](https://github.com/Khan/perseus/pull/773) [`809823e4`](https://github.com/Khan/perseus/commit/809823e490f65cbcbaa05b548de985035810ba8d) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Fix text overlap in interactive graph widget
+
+*   [#755](https://github.com/Khan/perseus/pull/755) [`6d9e31a4`](https://github.com/Khan/perseus/commit/6d9e31a4ea4a1ed29bef2d9812d21e5b2fd41af6) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Adding logic to ArticleRenderer so that it can return our currently focused element.
+
+## 12.1.0
+
+### Minor Changes
+
+-   6dbc58c6: Fix image centering for widget
+
+### Patch Changes
+
+-   c4ae088f: Upgrades MathQuill to fix Android keyboard error
+-   Updated dependencies [c4ae088f]
+-   Updated dependencies [aea0387f]
+    -   @khanacademy/math-input@14.2.0
+
 ## 12.0.1
 
 ### Patch Changes

package/dist/article-renderer.d.ts

@@ -3,6 +3,7 @@
  * composed of multiple (Renderer) sections concatenated together.
  */
 import * as React from "react";
+import Renderer from "./renderer";
 import type { KeypadProps } from "./mixins/provide-keypad";
 import type { PerseusRenderer } from "./perseus-types";
 import type { APIOptions, PerseusDependenciesV2 } from "./types";
@@ -28,6 +29,7 @@ type DefaultProps = {
 };
 declare class ArticleRenderer extends React.Component<Props> implements KeypadContextRendererInterface {
     _currentFocus: any;
+    sectionRenderers: Array<Renderer>;
     static defaultProps: DefaultProps;
     constructor(props: Props);
     componentDidMount(): void;

package/dist/es/index.css

@@ -2613,6 +2613,7 @@ img.zoom-img {
 }
 /* Widget CSS */
 .perseus-graph-padding {
+  box-sizing: content-box;
   padding: 25px 25px 0 0;
 }
 .categorizer-container {
@@ -2749,6 +2750,7 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
   margin: 0px 4px;
 }
 .perseus-widget-grapher {
+  box-sizing: content-box;
   padding: 25px 25px 0 0;
 }
 .perseus-widget-grapher > .graphie-container {
@@ -2793,7 +2795,8 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
   margin-left: -20px;
 }
 .perseus-image-widget {
-  margin: 0;
+  margin-left: auto;
+  margin-right: auto;
 }
 .perseus-image-widget .perseus-image-title {
   text-align: center;
@@ -2802,7 +2805,6 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
   color: rgba(33, 36, 44, 0.7);
   padding-left: 16px;
   position: relative;
-  top: -12px;
 }
 .perseus-image-widget .perseus-image-caption::before {
   content: "";
@@ -2836,6 +2838,7 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
   margin-top: 5px;
 }
 .perseus-widget-interactive-graph {
+  box-sizing: content-box;
   padding: 25px 25px 0 0;
 }
 .perseus-widget-interactive-graph > .graphie-container {

package/dist/es/index.js

@@ -26579,7 +26579,10 @@ class ImageWidget extends React.Component {
         })));
       }
       return /*#__PURE__*/React.createElement("figure", {
-        className: "perseus-image-widget"
+        className: "perseus-image-widget",
+        style: {
+          maxWidth: backgroundImage.width
+        }
       }, image, alt, titleAndCaption);
     }
     let title;
@@ -26606,7 +26609,10 @@ class ImageWidget extends React.Component {
       }));
     }
     return /*#__PURE__*/React.createElement("figure", {
-      className: "perseus-image-widget"
+      className: "perseus-image-widget",
+      style: {
+        maxWidth: backgroundImage.width
+      }
     }, title, image, alt, caption);
   }
   static validate(userInput, rubric) {
@@ -43742,7 +43748,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 = "12.0.1";
+const libVersion = "12.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43764,6 +43770,7 @@ class ArticleRenderer extends React.Component {
   constructor(props) {
     super(props);
     this._currentFocus = void 0;
+    this.sectionRenderers = [];
     this._handleFocusChange = (newFocusPath, oldFocusPath) => {
       // TODO(charlie): DRY this up--some of this logic is repeated in
       // ItemRenderer.
@@ -43788,17 +43795,17 @@ class ArticleRenderer extends React.Component {
       // paths, so as to check whether the focused path represents an
       // input.
       let didFocusInput = false;
+      let focusedInput;
       if (this._currentFocus) {
-        const [sectionRef, ...focusPath] = this._currentFocus;
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getInputPaths' does not exist on type 'ReactInstance'.
-        const inputPaths = this.refs[sectionRef].getInputPaths();
+        const [sectionIndex, ...focusPath] = this._currentFocus;
+        const inputPaths = this.sectionRenderers[sectionIndex].getInputPaths();
         didFocusInput = inputPaths.some(inputPath => {
           return Util.inputPathsEqual(inputPath, focusPath);
         });
+        focusedInput = this.sectionRenderers[sectionIndex].getDOMNodeForPath(focusPath);
       }
       if (this.props.apiOptions.onFocusChange != null) {
-        this.props.apiOptions.onFocusChange(this._currentFocus, prevFocusPath, didFocusInput ? keypadElement == null ? void 0 : keypadElement.getDOMNode() : null);
+        this.props.apiOptions.onFocusChange(this._currentFocus, prevFocusPath, didFocusInput ? keypadElement == null ? void 0 : keypadElement.getDOMNode() : null, didFocusInput ? focusedInput : null);
       }
       if (keypadElement && isMobile) {
         if (didFocusInput) {
@@ -43830,10 +43837,8 @@ class ArticleRenderer extends React.Component {
     };
     this.blur = () => {
       if (this._currentFocus) {
-        const [sectionRef, ...inputPath] = this._currentFocus;
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'blurPath' does not exist on type 'ReactInstance'.
-        this.refs[sectionRef].blurPath(inputPath);
+        const [sectionIndex, ...inputPath] = this._currentFocus;
+        this.sectionRenderers[sectionIndex].blurPath(inputPath);
       }
     };
     this._sections = () => {
@@ -43859,33 +43864,39 @@ class ArticleRenderer extends React.Component {
     });
 
     // TODO(alex): Add mobile api functions and pass them down here
-    const sections = this._sections().map((section, i) => {
-      const refForSection = `section-${i}`;
-      return /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
-        value: this.props.dependencies
-      }, /*#__PURE__*/React.createElement("div", {
-        key: i,
+    // We're using the index as the key here because we don't have a unique
+    // identifier for each section. This should be fine as we never remove
+    // or reorder sections.
+    const sections = this._sections().map((section, sectionIndex) => {
+      return /*#__PURE__*/React.createElement("div", {
+        key: sectionIndex,
         className: "clearfix"
       }, /*#__PURE__*/React.createElement(Renderer, _extends({}, section, {
-        ref: refForSection,
-        key: i,
-        key_: i,
+        ref: elem => {
+          if (elem) {
+            this.sectionRenderers[sectionIndex] = elem;
+          }
+        },
+        key: sectionIndex,
+        key_: sectionIndex,
         keypadElement: this.props.keypadElement,
         apiOptions: _extends({}, apiOptions, {
           onFocusChange: (newFocusPath, oldFocusPath) => {
-            // Prefix the paths with the relevant section,
+            // Prefix the paths with the relevant section index,
             // so as to allow us to distinguish between
             // equivalently-named inputs across Renderers.
-            this._handleFocusChange(newFocusPath && [refForSection].concat(newFocusPath), oldFocusPath && [refForSection].concat(oldFocusPath));
+            this._handleFocusChange(newFocusPath && [sectionIndex].concat(newFocusPath), oldFocusPath && [sectionIndex].concat(oldFocusPath));
           }
         }),
         linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "article"),
         legacyPerseusLint: this.props.legacyPerseusLint
-      }))));
+      })));
     });
     return /*#__PURE__*/React.createElement("div", {
       className: classes
-    }, sections);
+    }, /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, sections));
   }
 }
 ArticleRenderer.defaultProps = {