@khanacademy/perseus 12.3.0 → 12.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/perseus
 
+## 12.4.0
+
+### Minor Changes
+
+-   [#784](https://github.com/Khan/perseus/pull/784) [`cfff6ad1`](https://github.com/Khan/perseus/commit/cfff6ad16a3923418a3c75816af7c99689b94da4) Thanks [@nedredmond](https://github.com/nedredmond)! - Graded Group Set indicator dots now have a 24x24 clickable area as well as hover/focus states. Stretching issue on mobile resolved as well.
+
+*   [#783](https://github.com/Khan/perseus/pull/783) [`79403e06`](https://github.com/Khan/perseus/commit/79403e06eedb597d7818d6c858bbba6f51ff3fe1) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Adds 'widgetId' to the 'perseus:widget-rendering-error' analytics event.
+
+### Patch Changes
+
+-   Updated dependencies [[`79403e06`](https://github.com/Khan/perseus/commit/79403e06eedb597d7818d6c858bbba6f51ff3fe1), [`ed00ee59`](https://github.com/Khan/perseus/commit/ed00ee59dcdeb20a66709c6b7d3474da55d58e4d)]:
+    -   @khanacademy/perseus-core@1.3.0
+    -   @khanacademy/math-input@14.2.2
+    -   @khanacademy/kas@0.3.5
+    -   @khanacademy/kmath@0.1.6
+    -   @khanacademy/perseus-linter@0.3.8
+    -   @khanacademy/pure-markdown@0.2.10
+    -   @khanacademy/simple-markdown@0.10.4
+
 ## 12.3.0
 
 ### Minor Changes

package/dist/es/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/es/index.js

@@ -17349,9 +17349,11 @@ class ErrorBoundary extends React.Component {
     };
   }
   componentDidCatch(error, info) {
+    var _this$props$onError, _this$props;
     this.setState({
       error: error.toString()
     });
+    (_this$props$onError = (_this$props = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props, error, info);
     Log.error("Perseus error boundary caught error", Errors.Internal, {
       cause: error,
       loggedMetadata: _extends({
@@ -18807,11 +18809,12 @@ class WidgetContainer extends React.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
           }
         });
       }
@@ -24905,22 +24908,33 @@ class Indicators extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement("ul", {
-      className: css(styles$j.indicatorContainer)
+      // reduntantly add class name for use in .less files--
+      //   the styles object key gets hashed
+      className: classNames(css(styles$j.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
+      className: css(styles$j.indicator),
+      key: title
+    }, /*#__PURE__*/React.createElement(Clickable, {
       role: "button",
       "aria-label": i18n._("Skip to %(title)s", {
         title
       }),
-      key: title,
-      className: 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.createElement("span", {
+    }, ({
+      hovered,
+      focused,
+      pressed
+    }) => /*#__PURE__*/React.createElement(View, {
+      style: [styles$j.indicatorDot, (hovered || focused || pressed) && styles$j.indicatorDotFocused]
+    }, i === this.props.currentGroup && /*#__PURE__*/React.createElement(View, {
+      style: styles$j.indicatorDotActive
+    }, /*#__PURE__*/React.createElement("span", {
       className: css(a11y.srOnly)
-    }, i18n._("Current")))));
+    }, i18n._("Current"))))))));
   }
 }
 // TODO(jared): find a better name for this :) and for GradedGroup; the names
@@ -25068,19 +25082,42 @@ const styles$j = 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.blue,
-    marginLeft: 5,
-    cursor: "pointer"
+    borderStyle: "solid"
+  },
+  indicatorDotFocused: {
+    borderWidth: 5,
+    borderStyle: "double"
   },
-  selectedIndicator: {
-    backgroundColor: Color.blue
+  indicatorDotActive: {
+    backgroundColor: Color.blue,
+    width: "100%",
+    height: "100%"
   },
   container: {
     borderTop: `1px solid ${gray76}`,
@@ -43768,7 +43805,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.3.0";
+const libVersion = "12.4.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {