@khanacademy/perseus 12.2.0 → 12.3.0

package/CHANGELOG.md

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

package/dist/article-renderer.d.ts

@@ -3,6 +3,7 @@
  * 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";
@@ -10,7 +11,7 @@ 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>;
     /**
@@ -21,7 +22,7 @@ type Props = {
     legacyPerseusLint?: ReadonlyArray<string>;
     keypadElement?: KeypadAPI | null | undefined;
     dependencies: PerseusDependenciesV2;
-} & KeypadProps;
+};
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
     useNewStyles: Props["useNewStyles"];

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

@@ -2684,71 +2684,6 @@ 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;
@@ -3121,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.2.0";
+const libVersion = "12.3.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43890,7 +43910,7 @@ class ArticleRenderer extends React.Component {
         }),
         linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "article"),
         legacyPerseusLint: this.props.legacyPerseusLint
-      })));
+      }, this.props.dependencies)));
     });
     return /*#__PURE__*/React.createElement("div", {
       className: classes
@@ -44975,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,
@@ -44991,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,