@khanacademy/perseus 12.1.0 → 12.3.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @khanacademy/perseus
 
+## 12.3.0
+
+### Minor Changes
+
+-   [#780](https://github.com/Khan/perseus/pull/780) [`376eb0e4`](https://github.com/Khan/perseus/commit/376eb0e4aaaa4c7a90fd6107a84bb74d382b077c) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Adds an `onError` callback prop to the ErrorBoundary component. Uses this new callback in the WidgetContainer component to report all widget rendering failures through the analytics API.
+
+### Patch Changes
+
+-   [#759](https://github.com/Khan/perseus/pull/759) [`c431c4b8`](https://github.com/Khan/perseus/commit/c431c4b8147ae0630df2d2b19b0f5a5b5f04d4bf) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove references to unused font families
+
+*   [#775](https://github.com/Khan/perseus/pull/775) [`cb529549`](https://github.com/Khan/perseus/commit/cb5295497fe74e3f4cc00eef0f99da9f83f58e4d) Thanks [@nedredmond](https://github.com/nedredmond)! - Added flag to `simpleValidate` call from Renderer to ensure we call analytics on MathInputEvaluated only when the answer is submitted
+
+-   [#781](https://github.com/Khan/perseus/pull/781) [`9b9dfd4f`](https://github.com/Khan/perseus/commit/9b9dfd4f6779d129040d9afcf3205f1863a64c25) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Fix for broken dilation tool in the Transformer Widget
+
+-   Updated dependencies [[`c431c4b8`](https://github.com/Khan/perseus/commit/c431c4b8147ae0630df2d2b19b0f5a5b5f04d4bf), [`fb84640d`](https://github.com/Khan/perseus/commit/fb84640de911a8e8817829985fe9956e83a7f7d1), [`376eb0e4`](https://github.com/Khan/perseus/commit/376eb0e4aaaa4c7a90fd6107a84bb74d382b077c), [`33cc24c3`](https://github.com/Khan/perseus/commit/33cc24c33f62cd87de7594ba575d311fd465e2e0)]:
+    -   @khanacademy/math-input@14.2.1
+    -   @khanacademy/perseus-core@1.2.0
+    -   @khanacademy/kas@0.3.4
+    -   @khanacademy/kmath@0.1.5
+    -   @khanacademy/perseus-linter@0.3.7
+    -   @khanacademy/pure-markdown@0.2.9
+    -   @khanacademy/simple-markdown@0.10.3
+
+## 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,13 +3,15 @@
  * composed of multiple (Renderer) sections concatenated together.
  */
 import * as React from "react";
+import { DependenciesContext } from "./dependencies";
+import Renderer from "./renderer";
 import type { KeypadProps } from "./mixins/provide-keypad";
 import type { PerseusRenderer } from "./perseus-types";
 import type { APIOptions, PerseusDependenciesV2 } from "./types";
 import type { KeypadAPI } from "@khanacademy/math-input";
 import type { KeypadContextRendererInterface } from "@khanacademy/perseus-core";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
-type Props = {
+type Props = Partial<React.ContextType<typeof DependenciesContext>> & KeypadProps & {
     apiOptions: APIOptions;
     json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
     /**
@@ -20,7 +22,7 @@ type Props = {
     legacyPerseusLint?: ReadonlyArray<string>;
     keypadElement?: KeypadAPI | null | undefined;
     dependencies: PerseusDependenciesV2;
-} & KeypadProps;
+};
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
     useNewStyles: Props["useNewStyles"];
@@ -28,6 +30,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/error-boundary.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 type Props = {
     children: React.ReactNode;
     metadata?: Record<string, string>;
+    onError?: (error: Error, info: any) => void;
 };
 type State = {
     error: string;

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 {
@@ -2683,72 +2684,8 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
 #answer_area .perseus-widget-expression .error-tooltip .tooltipContainer > div:first-child {
   visibility: hidden !important;
 }
-.perseus-widget-expression-old,
-.perseus-widget-expression-old > .output,
-.perseus-widget-expression-old > .output > .tex,
-.perseus-widget-expression-old > .output > .placeholder {
-  display: block;
-}
-.perseus-widget-expression-old input,
-#answer_area .perseus-widget-expression-old input {
-  direction: ltr;
-  border: 1px solid #a4a4a4;
-  border-radius: 5px;
-  box-sizing: border-box;
-  font-size: 14px;
-  margin-bottom: 5px;
-  max-width: 240px;
-  padding: 6px;
-  width: 100%;
-}
-.perseus-widget-expression-old > .output {
-  background: #f2f2f2;
-  border-radius: 5px;
-  padding: 10px;
-  margin: 10px 0;
-}
-#answer_area .perseus-widget-expression-old > .output {
-  background: #f7f7f7;
-}
-.perseus-widget-expression-old > .output > .tex {
-  overflow-x: auto;
-  padding: 5px;
-}
-.perseus-widget-expression-old > .output > .placeholder {
-  position: relative;
-  height: 40px;
-  overflow-y: hidden;
-}
-.perseus-widget-expression-old > .output > .placeholder > .error {
-  border-radius: 10px;
-  background: #f7f7f7;
-  border: 1px solid #ddd;
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-  color: #000;
-  display: none;
-  font-weight: normal;
-  min-height: 22px;
-  width: 168px;
-  position: absolute;
-  top: 0px;
-  left: 40px;
-  margin: auto;
-}
-.perseus-widget-expression-old > .output > .placeholder > .error > .buddy {
-  background-image: url(/images/perseus/error-buddy.png);
-  background-size: 100%;
-  height: 36px;
-  width: 40px;
-  position: absolute;
-  top: -3px;
-  left: -42px;
-}
-.perseus-widget-expression-old > .output > .placeholder > .error > .message {
-  font: 12px inherit;
-  line-height: 1.4em;
-  margin: 0px 4px;
-}
 .perseus-widget-grapher {
+  box-sizing: content-box;
   padding: 25px 25px 0 0;
 }
 .perseus-widget-grapher > .graphie-container {
@@ -2836,6 +2773,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 {
@@ -3118,7 +3056,7 @@ body.mobile .perseus-matrix .math-output {
 }
 .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage div.paragraph,
 .perseus-widget-passage-container .perseus-widget-passage div.paragraph {
-  font-family: "minion-pro", KaTeX_Main, Times, "Times New Roman", serif;
+  font-family: KaTeX_Main, Times, "Times New Roman", serif;
 }
 .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage .passage-title div.paragraph,
 .perseus-widget-passage-container .perseus-widget-passage .passage-title div.paragraph {

package/dist/es/index.js

@@ -49,6 +49,21 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 const customKeyTranslator = _extends({}, keyTranslator, {
   // If there's something in the input that can become part of a
   // fraction, typing "/" puts it in the numerator. If not, typing
@@ -1870,6 +1885,7 @@ const KhanAnswerTypes = {
   }
 };
 
+const _excluded$4 = ["scoring"];
 const ERROR_TITLE = i18n._("Oops!");
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
 const insertBraces = value => {
@@ -1947,11 +1963,26 @@ class Expression extends React.Component {
         });
       }
     };
-    this.simpleValidate = (rubric, onInputError) => {
-      onInputError = onInputError || function () {};
-      const result = Expression.validate(this.getUserInput(), rubric, onInputError);
-      this.sendExpressionEvaluatedEvent(result.type === "invalid" ? "invalid" : result.earned === result.total ? "correct" : "incorrect");
-      return result;
+    this.simpleValidate = (_ref, onInputError) => {
+      let {
+          scoring
+        } = _ref,
+        rubric = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      const score = Expression.validate(this.getUserInput(), rubric, onInputError || function () {});
+
+      // "scoring" is a flag that indicates when we are checking answers.
+      // otherwise, we may just be checking validity after changes.
+      if (scoring && score.type !== "invalid") {
+        var _this$props$analytics;
+        (_this$props$analytics = this.props.analytics) == null ? void 0 : _this$props$analytics.onAnalyticsEvent({
+          type: "perseus:expression-evaluated",
+          payload: {
+            result: score.earned === score.total ? "correct" : "incorrect",
+            virtualKeypadVersion: deriveKeypadVersion(this.props.apiOptions)
+          }
+        });
+      }
+      return score;
     };
     this.getUserInput = () => {
       return Expression.getUserInputFromProps(this.props);
@@ -1973,8 +2004,8 @@ class Expression extends React.Component {
       this.props.trackInteraction();
     };
     this._handleFocus = () => {
-      var _this$props$analytics;
-      (_this$props$analytics = this.props.analytics) == null ? void 0 : _this$props$analytics.onAnalyticsEvent({
+      var _this$props$analytics2;
+      (_this$props$analytics2 = this.props.analytics) == null ? void 0 : _this$props$analytics2.onAnalyticsEvent({
         type: "perseus:expression-focused",
         payload: null
       });
@@ -2182,16 +2213,6 @@ class Expression extends React.Component {
     // @ts-expect-error - TS2339 - Property 'insert' does not exist on type 'ReactInstance'.
     this.refs.input.insert(keyPressed);
   }
-  sendExpressionEvaluatedEvent(result) {
-    var _this$props$analytics2;
-    (_this$props$analytics2 = this.props.analytics) == null ? void 0 : _this$props$analytics2.onAnalyticsEvent({
-      type: "perseus:expression-evaluated",
-      payload: {
-        result,
-        virtualKeypadVersion: deriveKeypadVersion(this.props.apiOptions)
-      }
-    });
-  }
   render() {
     var _this$props$keypadCon, _this$props$analytics3;
     if (this.props.apiOptions.customKeypad) {
@@ -3680,10 +3701,10 @@ Zoom.prototype.dispose = function () {
 };
 const ZoomService = new ZoomServiceClass();
 
-// @baseFontFamily:        "Proxima Nova", sans-serif;
-const baseFontFamily$1 = "'Proxima Nova',sans-serif";
-// @boldFontFamily:        "Proxima Nova Semibold", sans-serif;
-const boldFontFamily = "'Proxima Nova Semibold',sans-serif";
+// @baseFontFamily:        "Lato", sans-serif;
+const baseFontFamily$1 = "'Lato', sans-serif";
+// @boldFontFamily:        "Lato-Bold", "Lato", sans-serif;
+const boldFontFamily = "'Lato-Bold', 'Lato', sans-serif";
 // @green:                 #76a005;
 const green$1 = "#76A005";
 // @kaGreen:               #71b307;
@@ -18675,6 +18696,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
 class WidgetContainer extends React.Component {
   constructor(...args) {
     super(...args);
+    this.widgetRef = /*#__PURE__*/React.createRef();
     this.state = {
       // TODO(benkomalo): before we're mounted, we don't know how big
       // we're going to be, so just default to MEDIUM for now. :/ In the
@@ -18684,8 +18706,7 @@ class WidgetContainer extends React.Component {
       widgetProps: this.props.initialProps
     };
     this.getWidget = () => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.widget;
+      return this.widgetRef.current;
     };
     this.replaceWidgetProps = newWidgetProps => {
       this.setState({
@@ -18779,15 +18800,28 @@ class WidgetContainer extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: isStatic ? staticContainerStyles : {}
+    }, /*#__PURE__*/React.createElement(DependenciesContext.Consumer, null, ({
+      analytics
+    }) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+      metadata: {
+        widget_type: type,
+        widget_id: this.props.id
+      },
+      onError: error => {
+        analytics.onAnalyticsEvent({
+          type: "perseus:widget-rendering-error",
+          payload: {
+            widgetType: type
+          }
+        });
+      }
     }, /*#__PURE__*/React.createElement(WidgetType, _extends({}, this.state.widgetProps, {
       linterContext: linterContext,
-      containerSizeClass: this.state.sizeClass
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "widget"
+      containerSizeClass: this.state.sizeClass,
+      ref: this.widgetRef
     })), isStatic && /*#__PURE__*/React.createElement("div", {
       style: staticOverlayStyles
-    }));
+    }))));
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.type !== nextProps.type) {
@@ -18810,6 +18844,7 @@ const rContainsNonWhitespace = /\S/;
 const rImageURL = /(web\+graphie|https):\/\/[^\s]*/;
 const noopOnRender = () => {};
 const SHOULD_CLEAR_WIDGETS_PROP_LIST = ["content", "problemNum", "widgets"];
+const makeContainerId = id => "container:" + id;
 
 // Check if one focus path / id path is a prefix of another
 // The focus path null will never be a prefix of any non-null
@@ -18854,6 +18889,7 @@ class Renderer extends React.Component {
     this._isMounted = void 0;
     this._isTwoColumn = void 0;
     this._translationLinter = void 0;
+    this._widgetContainers = new Map();
     this.lastRenderedMarkdown = void 0;
     this.reuseMarkdown = void 0;
     this.translationIndex = void 0;
@@ -18924,19 +18960,22 @@ class Renderer extends React.Component {
         // By this point we should have no duplicates, which are
         // filtered out in this.render(), so we shouldn't have to
         // worry about using this widget key and ref:
-        return /*#__PURE__*/React.createElement(ErrorBoundary, {
-          key: "container:" + id,
-          metadata: {
-            widget_type: type,
-            widget_id: id
-          }
-        }, /*#__PURE__*/React.createElement(WidgetContainer, {
-          ref: "container:" + id,
+        return /*#__PURE__*/React.createElement(WidgetContainer, {
+          key: makeContainerId(id),
+          id: id,
+          ref: node => {
+            const containerId = makeContainerId(id);
+            if (node != null) {
+              this._widgetContainers.set(containerId, node);
+            } else {
+              this._widgetContainers.delete(containerId);
+            }
+          },
           type: type,
           initialProps: this.getWidgetProps(id),
           shouldHighlight: shouldHighlight,
           linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "widget")
-        }));
+        });
       }
       return null;
     };
@@ -18963,7 +19002,6 @@ class Renderer extends React.Component {
         getTracking(widgetInfo && widgetInfo.type));
       }
       return _extends({}, widgetProps, {
-        ref: id,
         widgetId: id,
         alignment: widgetInfo && widgetInfo.alignment,
         // When determining if a widget is static, we verify that the widget is not an
@@ -19095,12 +19133,10 @@ class Renderer extends React.Component {
       return [...this.findInternalWidgets(filterCriterion), ...this.props.findExternalWidgets(filterCriterion)];
     };
     this.getWidgetInstance = id => {
-      // eslint-disable-next-line react/no-string-refs
-      const ref = this.refs["container:" + id];
+      const ref = this._widgetContainers.get(makeContainerId(id));
       if (!ref) {
         return null;
       }
-      // @ts-expect-error - TS2339 - Property 'getWidget' does not exist on type 'ReactInstance'.
       return ref.getWidget();
     };
     this._onWidgetFocus = (id, focusPath = []) => {
@@ -19788,7 +19824,9 @@ class Renderer extends React.Component {
         const widget = this.getWidgetInstance(id);
         // widget can be undefined if it hasn't yet been rendered
         if (widget && widget.simpleValidate) {
-          widgetScores[id] = widget.simpleValidate(props == null ? void 0 : props.options, onInputError);
+          widgetScores[id] = widget.simpleValidate(_extends({}, props == null ? void 0 : props.options, {
+            scoring: true
+          }), onInputError);
         }
       });
       return widgetScores;
@@ -19938,9 +19976,7 @@ class Renderer extends React.Component {
     // they are re-rendered, so even if they've been
     // re-rendered we need to call these methods on them.
     _.each(this.widgetIds, id => {
-      // eslint-disable-next-line react/no-string-refs
-      const container = this.refs["container:" + id];
-      // @ts-expect-error - TS2339 - Property 'replaceWidgetProps' does not exist on type 'ReactInstance'.
+      const container = this._widgetContainers.get(makeContainerId(id));
       container && container.replaceWidgetProps(this.getWidgetProps(id));
     });
     if (this.props.serializedState && !_.isEqual(this.props.serializedState, this.getSerializedState())) {
@@ -20858,21 +20894,6 @@ InputWithExamples.defaultProps = {
   className: ""
 };
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
 const _excluded$3 = ["keypadElement", "onFocus", "value"];
 class SimpleKeypadInput extends React.Component {
   constructor(...args) {
@@ -42117,8 +42138,7 @@ class Transformer extends React.Component {
           // @ts-expect-error - TS2345 - Argument of type '{ type: "dilation"; center: any; scale: number; }' is not assignable to parameter of type 'PerseusTransformerTransformation'.
           self.doTransform({
             type: "dilation",
-            // NOTE(kevinb): It's hard to convince that this.dilationCircle
-            // will still be defined here.                    center: self.dilationCircle.centerPoint.coord,
+            center: self.dilationCircle.centerPoint.coord,
             scale: newRadius / oldRadius
           });
         },
@@ -43748,7 +43768,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.3.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43770,6 +43790,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 +43815,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 +43857,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 +43884,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
-      }))));
+      }, this.props.dependencies)));
     });
     return /*#__PURE__*/React.createElement("div", {
       className: classes
-    }, sections);
+    }, /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, sections));
   }
 }
 ArticleRenderer.defaultProps = {
@@ -44970,7 +44995,7 @@ class ServerItemRenderer extends React.Component {
     };
     const questionRenderer = /*#__PURE__*/React.createElement(context$1.Provider, {
       value: contextValue
-    }, /*#__PURE__*/React.createElement(Renderer, {
+    }, /*#__PURE__*/React.createElement(Renderer, _extends({
       keypadElement: this.props.keypadElement,
       problemNum: this.props.problemNum,
       onInteractWithWidget: this.handleInteractWithWidget,
@@ -44986,7 +45011,7 @@ class ServerItemRenderer extends React.Component {
       content: this.props.item.question.content,
       widgets: this.props.item.question.widgets,
       images: this.props.item.question.images
-    }));
+    }, this.props.dependencies)));
     const hintsRenderer = /*#__PURE__*/React.createElement(HintsRenderer, {
       hints: this.props.item.hints,
       hintsVisible: this.props.hintsVisible,