@khanacademy/perseus 12.1.0 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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 {
@@ -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

@@ -43748,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.1.0";
+const libVersion = "12.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43770,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.
@@ -43794,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) {
@@ -43836,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 = () => {
@@ -43865,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 = {