@khanacademy/perseus 12.1.0 → 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 {
@@ -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

@@ -44015,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.1.0";
+const libVersion = "12.2.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44037,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.
@@ -44061,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) {
@@ -44103,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", () => {
@@ -44134,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", {