@khanacademy/perseus 12.1.0 → 12.3.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 {
@@ -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/index.js

@@ -2007,11 +2007,26 @@ class Expression extends React__namespace.Component {
         });
       }
     });
-    _defineProperty(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;
+    _defineProperty(this, "simpleValidate", (_ref, onInputError) => {
+      let {
+        scoring,
+        ...rubric
+      } = _ref;
+      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 || _this$props$analytics === void 0 ? 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;
     });
     _defineProperty(this, "getUserInput", () => {
       return Expression.getUserInputFromProps(this.props);
@@ -2036,8 +2051,8 @@ class Expression extends React__namespace.Component {
       this.props.trackInteraction();
     });
     _defineProperty(this, "_handleFocus", () => {
-      var _this$props$analytics;
-      (_this$props$analytics = this.props.analytics) === null || _this$props$analytics === void 0 ? void 0 : _this$props$analytics.onAnalyticsEvent({
+      var _this$props$analytics2;
+      (_this$props$analytics2 = this.props.analytics) === null || _this$props$analytics2 === void 0 ? void 0 : _this$props$analytics2.onAnalyticsEvent({
         type: "perseus:expression-focused",
         payload: null
       });
@@ -2244,16 +2259,6 @@ class Expression extends React__namespace.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 || _this$props$analytics2 === void 0 ? 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) {
@@ -3739,10 +3744,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;
@@ -18763,6 +18768,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
 class WidgetContainer extends React__namespace.Component {
   constructor() {
     super(...arguments);
+    _defineProperty(this, "widgetRef", /*#__PURE__*/React__namespace.createRef());
     _defineProperty(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
@@ -18772,8 +18778,7 @@ class WidgetContainer extends React__namespace.Component {
       widgetProps: this.props.initialProps
     });
     _defineProperty(this, "getWidget", () => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.widget;
+      return this.widgetRef.current;
     });
     _defineProperty(this, "replaceWidgetProps", newWidgetProps => {
       this.setState({
@@ -18868,14 +18873,30 @@ class WidgetContainer extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: className,
       style: isStatic ? staticContainerStyles : {}
-    }, /*#__PURE__*/React__namespace.createElement(WidgetType, _extends({}, this.state.widgetProps, {
-      linterContext: linterContext,
-      containerSizeClass: this.state.sizeClass
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "widget"
-    })), isStatic && /*#__PURE__*/React__namespace.createElement("div", {
-      style: staticOverlayStyles
+    }, /*#__PURE__*/React__namespace.createElement(DependenciesContext.Consumer, null, _ref => {
+      let {
+        analytics
+      } = _ref;
+      return /*#__PURE__*/React__namespace.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__namespace.createElement(WidgetType, _extends({}, this.state.widgetProps, {
+        linterContext: linterContext,
+        containerSizeClass: this.state.sizeClass,
+        ref: this.widgetRef
+      })), isStatic && /*#__PURE__*/React__namespace.createElement("div", {
+        style: staticOverlayStyles
+      }));
     }));
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -18899,6 +18920,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
@@ -18945,6 +18967,7 @@ class Renderer extends React__namespace.Component {
     _defineProperty(this, "_isMounted", void 0);
     _defineProperty(this, "_isTwoColumn", void 0);
     _defineProperty(this, "_translationLinter", void 0);
+    _defineProperty(this, "_widgetContainers", new Map());
     _defineProperty(this, "lastRenderedMarkdown", void 0);
     _defineProperty(this, "reuseMarkdown", void 0);
     _defineProperty(this, "translationIndex", void 0);
@@ -19018,19 +19041,22 @@ class Renderer extends React__namespace.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__namespace.createElement(ErrorBoundary, {
-          key: "container:" + id,
-          metadata: {
-            widget_type: type,
-            widget_id: id
-          }
-        }, /*#__PURE__*/React__namespace.createElement(WidgetContainer, {
-          ref: "container:" + id,
+        return /*#__PURE__*/React__namespace.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__namespace.pushContextStack(this.props.linterContext, "widget")
-        }));
+        });
       }
       return null;
     });
@@ -19058,7 +19084,6 @@ class Renderer extends React__namespace.Component {
       }
       return {
         ...widgetProps,
-        ref: id,
         widgetId: id,
         alignment: widgetInfo && widgetInfo.alignment,
         // When determining if a widget is static, we verify that the widget is not an
@@ -19191,12 +19216,10 @@ class Renderer extends React__namespace.Component {
       return [...this.findInternalWidgets(filterCriterion), ...this.props.findExternalWidgets(filterCriterion)];
     });
     _defineProperty(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();
     });
     _defineProperty(this, "_onWidgetFocus", function (id) {
@@ -19910,7 +19933,10 @@ class Renderer extends React__namespace.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 || props === void 0 ? void 0 : props.options, onInputError);
+          widgetScores[id] = widget.simpleValidate({
+            ...(props === null || props === void 0 ? void 0 : props.options),
+            scoring: true
+          }, onInputError);
         }
       });
       return widgetScores;
@@ -20061,9 +20087,7 @@ class Renderer extends React__namespace.Component {
     // they are re-rendered, so even if they've been
     // re-rendered we need to call these methods on them.
     ___default["default"].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 && !___default["default"].isEqual(this.props.serializedState, this.getSerializedState())) {
@@ -42366,8 +42390,7 @@ class Transformer extends React__namespace.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
           });
         },
@@ -44015,7 +44038,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.3.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44037,6 +44060,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 +44085,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 +44127,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 +44156,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
-      }))));
+      }, this.props.dependencies)));
     });
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
-    }, sections);
+    }, /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, sections));
   }
 }
 _defineProperty(ArticleRenderer, "defaultProps", {
@@ -45251,7 +45279,7 @@ class ServerItemRenderer extends React__namespace.Component {
     };
     const questionRenderer = /*#__PURE__*/React__namespace.createElement(context$1.Provider, {
       value: contextValue
-    }, /*#__PURE__*/React__namespace.createElement(Renderer, {
+    }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({
       keypadElement: this.props.keypadElement,
       problemNum: this.props.problemNum,
       onInteractWithWidget: this.handleInteractWithWidget,
@@ -45267,7 +45295,7 @@ class ServerItemRenderer extends React__namespace.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__namespace.createElement(HintsRenderer, {
       hints: this.props.item.hints,
       hintsVisible: this.props.hintsVisible,