@khanacademy/perseus 12.2.0 → 12.4.0

package/dist/index.css

@@ -1742,11 +1742,11 @@ body.mobile ul.inequalities-one-line-radios > li {
 .framework-perseus.perseus-mobile .clearfix > .perseus-renderer {
   margin-bottom: 32px;
 }
-.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
+.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
   margin: 0 0 0 1em;
   padding: 0;
 }
-.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) > li {
+.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) > li {
   padding-left: 10px;
   margin-bottom: 24px;
 }
@@ -2394,7 +2394,7 @@ img.zoom-img {
 .framework-perseus .perseus-renderer > .paragraph > ol {
   margin: -11px 0px 22px 0px;
 }
-.framework-perseus .paragraph ul:not(.perseus-widget-radio) {
+.framework-perseus .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
   padding-left: 35px;
   list-style-type: disc;
 }
@@ -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/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;
@@ -17392,9 +17397,11 @@ class ErrorBoundary extends React__namespace.Component {
     };
   }
   componentDidCatch(error, info) {
+    var _this$props$onError, _this$props;
     this.setState({
       error: error.toString()
     });
+    (_this$props$onError = (_this$props = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props, error, info);
     Log.error("Perseus error boundary caught error", Errors.Internal, {
       cause: error,
       loggedMetadata: {
@@ -18763,6 +18770,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 +18780,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 +18875,31 @@ 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: () => {
+          analytics.onAnalyticsEvent({
+            type: "perseus:widget-rendering-error",
+            payload: {
+              widgetType: type,
+              widgetId: this.props.id
+            }
+          });
+        }
+      }, /*#__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 +18923,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 +18970,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 +19044,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 +19087,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 +19219,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 +19936,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 +20090,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())) {
@@ -25036,24 +25063,38 @@ class Indicators extends React__namespace.Component {
   }
   render() {
     return /*#__PURE__*/React__namespace.createElement("ul", {
-      className: aphrodite.css(styles$j.indicatorContainer)
+      // reduntantly add class name for use in .less files--
+      //   the styles object key gets hashed
+      className: classNames__default["default"](aphrodite.css(styles$j.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map((_ref, i) => {
       let {
         title
       } = _ref;
       return /*#__PURE__*/React__namespace.createElement("li", {
+        className: aphrodite.css(styles$j.indicator),
+        key: title
+      }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         role: "button",
         "aria-label": i18n__namespace._("Skip to %(title)s", {
           title
         }),
-        key: title,
-        className: aphrodite.css(styles$j.indicator, i === this.props.currentGroup && styles$j.selectedIndicator),
-        tabIndex: 0,
+        style: styles$j.indicatorButton,
         onClick: () => this.props.onChangeCurrentGroup(i),
         onKeyDown: e => this.handleKeyDown(e, i)
-      }, i === this.props.currentGroup && /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(a11y.srOnly)
-      }, i18n__namespace._("Current")));
+      }, _ref2 => {
+        let {
+          hovered,
+          focused,
+          pressed
+        } = _ref2;
+        return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+          style: [styles$j.indicatorDot, (hovered || focused || pressed) && styles$j.indicatorDotFocused]
+        }, i === this.props.currentGroup && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+          style: styles$j.indicatorDotActive
+        }, /*#__PURE__*/React__namespace.createElement("span", {
+          className: aphrodite.css(a11y.srOnly)
+        }, i18n__namespace._("Current"))));
+      }));
     }));
   }
 }
@@ -25207,19 +25248,42 @@ const styles$j = aphrodite.StyleSheet.create({
     display: "flex",
     flexDirection: "row",
     listStyle: "none",
-    margin: "unset"
+    margin: "unset",
+    paddingInlineStart: "unset",
+    flexWrap: "wrap"
   },
   indicator: {
+    width: 24,
+    height: 24
+  },
+  indicatorButton: {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexWrap: "wrap",
+    placeContent: "center",
+    cursor: "pointer",
+    ":focus": {
+      outline: "none"
+    }
+  },
+  indicatorDot: {
+    boxSizing: "content-box",
     width: 10,
     height: 10,
     borderRadius: "100%",
-    border: "3px solid",
+    borderWidth: 2,
     borderColor: Color__default["default"].blue,
-    marginLeft: 5,
-    cursor: "pointer"
+    borderStyle: "solid"
   },
-  selectedIndicator: {
-    backgroundColor: Color__default["default"].blue
+  indicatorDotFocused: {
+    borderWidth: 5,
+    borderStyle: "double"
+  },
+  indicatorDotActive: {
+    backgroundColor: Color__default["default"].blue,
+    width: "100%",
+    height: "100%"
   },
   container: {
     borderTop: "1px solid ".concat(gray76),
@@ -42366,8 +42430,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 +44078,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.2.0";
+const libVersion = "12.4.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44160,7 +44223,7 @@ class ArticleRenderer extends React__namespace.Component {
         },
         linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "article"),
         legacyPerseusLint: this.props.legacyPerseusLint
-      })));
+      }, this.props.dependencies)));
     });
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
@@ -45256,7 +45319,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,
@@ -45272,7 +45335,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,