@khanacademy/perseus 12.3.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;
 }

package/dist/index.js

@@ -17397,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: {
@@ -18882,11 +18884,12 @@ class WidgetContainer extends React__namespace.Component {
           widget_type: type,
           widget_id: this.props.id
         },
-        onError: error => {
+        onError: () => {
           analytics.onAnalyticsEvent({
             type: "perseus:widget-rendering-error",
             payload: {
-              widgetType: type
+              widgetType: type,
+              widgetId: this.props.id
             }
           });
         }
@@ -25060,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"))));
+      }));
     }));
   }
 }
@@ -25231,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"
+  },
+  indicatorDotFocused: {
+    borderWidth: 5,
+    borderStyle: "double"
   },
-  selectedIndicator: {
-    backgroundColor: Color__default["default"].blue
+  indicatorDotActive: {
+    backgroundColor: Color__default["default"].blue,
+    width: "100%",
+    height: "100%"
   },
   container: {
     borderTop: "1px solid ".concat(gray76),
@@ -44038,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.3.0";
+const libVersion = "12.4.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {