@khanacademy/perseus 12.0.1 → 12.2.0

package/dist/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/index.js

@@ -26771,7 +26771,10 @@ class ImageWidget extends React__namespace.Component {
         })));
       }
       return /*#__PURE__*/React__namespace.createElement("figure", {
-        className: "perseus-image-widget"
+        className: "perseus-image-widget",
+        style: {
+          maxWidth: backgroundImage.width
+        }
       }, image, alt, titleAndCaption);
     }
     let title;
@@ -26798,7 +26801,10 @@ class ImageWidget extends React__namespace.Component {
       }));
     }
     return /*#__PURE__*/React__namespace.createElement("figure", {
-      className: "perseus-image-widget"
+      className: "perseus-image-widget",
+      style: {
+        maxWidth: backgroundImage.width
+      }
     }, title, image, alt, caption);
   }
   static validate(userInput, rubric) {
@@ -44009,7 +44015,7 @@ const init = function (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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44031,6 +44037,7 @@ class ArticleRenderer extends React__namespace.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "_currentFocus", void 0);
+    _defineProperty(this, "sectionRenderers", []);
     _defineProperty(this, "_handleFocusChange", (newFocusPath, oldFocusPath) => {
       // TODO(charlie): DRY this up--some of this logic is repeated in
       // ItemRenderer.
@@ -44055,17 +44062,17 @@ class ArticleRenderer extends React__namespace.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 || keypadElement === void 0 ? void 0 : keypadElement.getDOMNode() : null);
+        this.props.apiOptions.onFocusChange(this._currentFocus, prevFocusPath, didFocusInput ? keypadElement === null || keypadElement === void 0 ? void 0 : keypadElement.getDOMNode() : null, didFocusInput ? focusedInput : null);
       }
       if (keypadElement && isMobile) {
         if (didFocusInput) {
@@ -44097,10 +44104,8 @@ class ArticleRenderer extends React__namespace.Component {
     });
     _defineProperty(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);
       }
     });
     _defineProperty(this, "_sections", () => {
@@ -44128,34 +44133,40 @@ class ArticleRenderer extends React__namespace.Component {
     });
 
     // TODO(alex): Add mobile api functions and pass them down here
-    const sections = this._sections().map((section, i) => {
-      const refForSection = "section-".concat(i);
-      return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
-        value: this.props.dependencies
-      }, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+        key: sectionIndex,
         className: "clearfix"
       }, /*#__PURE__*/React__namespace.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: {
           ...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__namespace.pushContextStack(this.props.linterContext, "article"),
         legacyPerseusLint: this.props.legacyPerseusLint
-      }))));
+      })));
     });
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
-    }, sections);
+    }, /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, sections));
   }
 }
 _defineProperty(ArticleRenderer, "defaultProps", {