@khanacademy/perseus 1.3.5 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @khanacademy/perseus
 
+## 1.4.0
+
+### Minor Changes
+
+-   324a197c: Quick font fixup
+-   f5693311: Indicators on exercises are now accessible via the keyboard! Additionally, they use explicit list markup! 🟢⚪⚪
+
+### Patch Changes
+
+-   6a7f36be: Update wonder-stuff and wonder-blocks dependencies
+-   7b94ca05: Update categorizer to have no empty "th" cells per a11y audit
+-   Updated dependencies [6a7f36be]
+    -   @khanacademy/math-input@0.6.6
+    -   @khanacademy/perseus-linter@0.2.4
+    -   @khanacademy/pure-markdown@0.1.4
+
+## 1.3.7
+
+### Patch Changes
+
+-   c238d540: Wrap all ReactDOM.render() calls in `<RenderStateRoot>` to ensure it propagates properly
+-   Updated dependencies [c238d540]
+    -   @khanacademy/math-input@0.6.5
+
+## 1.3.6
+
+### Patch Changes
+
+-   859d3c28: Fixes styling of input-number when answer is incorrect in review mode
+
 ## 1.3.5
 
 ### Patch Changes

package/dist/es/index.css

@@ -2310,8 +2310,6 @@ img.zoom-img {
   font-size: 14px;
   line-height: 19.6px;
   padding-left: 35px;
-}
-.framework-perseus .paragraph ul:not(.perseus-widget-radio) li {
   list-style-type: disc;
 }
 .framework-perseus .paragraph ol {
@@ -3190,6 +3188,9 @@ body.sat-section .perseus-widget-passage {
 .perseus-widget-radio li table {
   border: 1px solid #ccc;
 }
+.perseus-widget-radio-fieldset .instructions {
+  font-family: "Lato", sans-serif;
+}
 .reaction {
   display: table-row;
 }

package/dist/es/index.js

@@ -14,6 +14,7 @@ import ReactDOM__default from 'react-dom';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import { number, point, vector as vector$1, line, ray } from '@khanacademy/kmath';
 import createReactClass from 'create-react-class';
+import { RenderStateRoot, View, Text } from '@khanacademy/wonder-blocks-core';
 import SimpleMarkdown from '@khanacademy/simple-markdown';
 import { pureMarkdownRules } from '@khanacademy/pure-markdown';
 import { StyleSheet, css } from 'aphrodite';
@@ -24,7 +25,6 @@ import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import Button from '@khanacademy/wonder-blocks-button';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import Color from '@khanacademy/wonder-blocks-color';
-import { View, Text } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { Popover, PopoverContent, PopoverContentCore } from '@khanacademy/wonder-blocks-popover';
 import { OptionItem, SingleSelect } from '@khanacademy/wonder-blocks-dropdown';
@@ -2243,7 +2243,7 @@ function widgetShouldHighlight(widget) {
 
   switch (widget.type) {
     /**
-     * Highlight bar blacklist
+     * Highlight bar denylist
      */
     case "measurer":
     case "protractor":
@@ -14644,6 +14644,26 @@ var iconPaths = /*#__PURE__*/Object.freeze({
     iconMinus: iconMinus
 });
 
+function render(element, container, callback) {
+  // TODO(LP-11406): Replace this, or callers, with React Portal
+  // eslint-disable-next-line no-restricted-syntax
+  return ReactDOM__default.render(
+  /*#__PURE__*/
+
+  /**
+   * `RenderStateRoot` is responsible for tracking whether it's
+   * the initial render or subsequent renders.  It's used by
+   * `useUniqueId` and will be used by `UniqueIDProvider` and
+   * `WithSSRPlaceholder` in the future.  We're placing it as
+   * high up in the render tree as possible to ensure that any
+   * components using that hook or those components will function
+   * correctly.
+   */
+  React.createElement(RenderStateRoot, {
+    throwIfNested: false
+  }, element), container, callback);
+}
+
 /* eslint-disable @babel/no-invalid-this */
 var add$1 = {
   constrain: function constrain() {
@@ -14971,9 +14991,7 @@ _.extend(MovablePoint$5.prototype, {
 
     var showTrashTooltip = () => {
       this._showTooltip(container => {
-        // TODO(LP-11406): Replace with React Portal
-        // eslint-disable-next-line no-restricted-syntax
-        ReactDOM.render( /*#__PURE__*/React.createElement("span", {
+        render( /*#__PURE__*/React.createElement("span", {
           style: {
             fontSize: "2em"
           }
@@ -19307,7 +19325,7 @@ class WidgetContainer extends React.Component {
       highlightLint: false
     }); // Note: if you add more props here, please consider whether or not
     // it should be auto-serialized (e.g. used in scoreInput()). See
-    // widget-jsonify-deprecated.jsx and widget-prop-blacklist.jsx
+    // widget-jsonify-deprecated.jsx and widget-prop-denylist.jsx
     // We default to an empty object for style instead of null
     // because of a strange bug where the static styles aren't applied
     // after toggling static mode.
@@ -22257,9 +22275,7 @@ _defineProperty(InputWithExamples, "defaultProps", {
  * automatically serializing schemaless list of attributes causes issues (e.g.
  * circular JSON structures sometimes).
  *
- * This blacklists things that we know don't need to be serialized.
- *
- * TODO(TB): Go through and update usage of BLACKLIST to DENYLIST: https://khanacademy.atlassian.net/browse/LP-13149?atlOrigin=eyJpIjoiNTI0Y2UwNzQ0MzA4NDYzOGI1YWRmNjEwY2E5YzZlZWUiLCJwIjoiaiJ9
+ * This blocks things that we know don't need to be serialized.
  */
 var denylist = [// standard props "added" by react
 // (technically the renderer still adds them)
@@ -23246,12 +23262,12 @@ class InputNumber extends React.Component {
 
     var inputStyles = [styles$z.default, this.props.size === "small" ? styles$z.small : null, this.props.rightAlign ? styles$z.rightAlign : styles$z.leftAlign]; // Correct
 
-    if (rubric && correct && this.props.currentValue) {
+    if (rubric && correct === true && this.props.currentValue) {
       inputStyles.push(styles$z.answerStateCorrect);
     } // Incorrect
 
 
-    if (rubric && !correct && this.props.currentValue) {
+    if (rubric && correct === false && this.props.currentValue) {
       inputStyles.push(styles$z.answerStateIncorrect);
     } // Unanswered
 
@@ -26312,7 +26328,7 @@ class PassageRef extends React.Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
-  } // TODO(TB): getUserInput needs to be updated to only return
+  } // TODO(tamarab): getUserInput needs to be updated to only return
   // props input by the user. Currently returns all the widget's props.
 
 
@@ -28637,7 +28653,9 @@ class Categorizer extends React.Component {
 
     var table = /*#__PURE__*/React.createElement("table", {
       className: "categorizer-table " + css(styles$m.mobileTable)
-    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "\xA0"), this.props.categories.map((category, i) => {
+    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+      className: css(styles$m.emptyHeaderCell)
+    }), this.props.categories.map((category, i) => {
       // Array index is the correct key here, as that's
       // how category grading actually works -- no way
       // to add or remove categories or items in the
@@ -28765,6 +28783,10 @@ var styles$m = StyleSheet.create({
     color: "#ccc",
     verticalAlign: "middle"
   },
+  emptyHeaderCell: {
+    backgroundColor: "inherit",
+    borderBottom: "2px solid #ccc"
+  },
   radioSpan: {
     fontSize: 30,
     paddingRight: 3,
@@ -29000,7 +29022,7 @@ class CSProgram extends React.Component {
       url = updateQueryString$1(url, "settings", JSON.stringify(settings));
     }
 
-    var sandboxOptions = ["allow-popups", "allow-same-origin", "allow-scripts", "allow-top-navigation"].join(" "); // We sandbox the iframe so that we whitelist only the functionality
+    var sandboxOptions = ["allow-popups", "allow-same-origin", "allow-scripts", "allow-top-navigation"].join(" "); // We sandbox the iframe so that we allowlist only the functionality
     //  that we need. This makes it a bit safer in case some content
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
@@ -29880,7 +29902,7 @@ var styles$h = StyleSheet.create({
     padding: 0,
     border: "none",
     marginTop: 20,
-    color: kaGreen$1,
+    color: Color.blue,
     cursor: "pointer",
     display: "block",
     clear: "both"
@@ -29888,7 +29910,7 @@ var styles$h = StyleSheet.create({
   explanationTitle: {
     backgroundColor: "unset",
     marginTop: 20,
-    color: kaGreen$1,
+    color: Color.blue,
     marginBottom: 10,
     cursor: "pointer",
     fontSize: 14,
@@ -29918,35 +29940,38 @@ var GradedGroup$2 = {
 
 var GradedGroup = GradedGroup$2.widget;
 
-// TODO(jeremy): This indicator panel is not accessible for keyboard
-// navigation. Add in keyboard handling and tab indexes to make accessible.
 class Indicators extends React.Component {
-  render() {
-    var _this = this;
+  constructor() {
+    super(...arguments);
 
-    var items = [];
+    _defineProperty(this, "handleKeyDown", (e, i) => {
+      if (e.key === "Enter" || e.key === " ") {
+        this.props.onChangeCurrentGroup(i);
+      }
+    });
+  }
 
-    var _loop = function _loop(i) {
-      items.push( /*#__PURE__*/React.createElement("div", {
+  render() {
+    return /*#__PURE__*/React.createElement("ul", {
+      className: css(styles$g.indicatorContainer)
+    }, this.props.gradedGroups.map((_ref, i) => {
+      var {
+        title
+      } = _ref;
+      return /*#__PURE__*/React.createElement("li", {
         role: "button",
         "aria-label": i18n._("Skip to %(title)s", {
-          title: _this.props.groupTitles[i]
+          title
         }),
-        key: i,
-        className: css(styles$g.indicator, i === _this.props.currentGroup && styles$g.selectedIndicator),
-        onClick: () => _this.props.onChangeCurrentGroup(i)
-      }, i === _this.props.currentGroup && /*#__PURE__*/React.createElement("span", {
+        key: title,
+        className: css(styles$g.indicator, i === this.props.currentGroup && styles$g.selectedIndicator),
+        tabIndex: 0,
+        onClick: () => this.props.onChangeCurrentGroup(i),
+        onKeyDown: e => this.handleKeyDown(e, i)
+      }, i === this.props.currentGroup && /*#__PURE__*/React.createElement("span", {
         className: css(a11y.srOnly)
-      }, i18n._("Current"))));
-    };
-
-    for (var i = 0; i < this.props.numGroups; i++) {
-      _loop(i);
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$g.indicatorContainer)
-    }, items);
+      }, i18n._("Current")));
+    }));
   }
 
 }
@@ -29955,10 +29980,10 @@ class Indicators extends React.Component {
 // are currently a little confusing.
 class GradedGroupSet extends React.Component {
   constructor() {
-    var _this2;
+    var _this;
 
     super(...arguments);
-    _this2 = this;
+    _this = this;
 
     _defineProperty(this, "_childGroup", void 0);
 
@@ -29972,7 +29997,7 @@ class GradedGroupSet extends React.Component {
       }
 
       // $FlowFixMe[incompatible-call]
-      return change.apply(_this2, args);
+      return change.apply(_this, args);
     });
 
     _defineProperty(this, "getInputPaths", () => {
@@ -30060,9 +30085,8 @@ class GradedGroupSet extends React.Component {
     }, currentGroup.title), /*#__PURE__*/React.createElement("div", {
       className: css(styles$g.spacer)
     }), /*#__PURE__*/React.createElement(Indicators, {
-      numGroups: numGroups,
       currentGroup: this.state.currentGroup,
-      groupTitles: this.props.gradedGroups.map(g => g.title),
+      gradedGroups: this.props.gradedGroups,
       onChangeCurrentGroup: currentGroup => this.setState({
         currentGroup
       })
@@ -30115,25 +30139,28 @@ var styles$g = StyleSheet.create({
   },
   title: {
     fontSize: 12,
-    color: gray76,
+    color: Color.offBlack64,
     textTransform: "uppercase",
     marginBottom: 11,
     letterSpacing: 0.8
   },
   indicatorContainer: {
     display: "flex",
-    flexDirection: "row"
+    flexDirection: "row",
+    listStyle: "none",
+    margin: "unset"
   },
   indicator: {
     width: 10,
     height: 10,
-    borderRadius: 5,
-    backgroundColor: grayLight$1,
+    borderRadius: "100%",
+    border: "3px solid",
+    borderColor: Color.blue,
     marginLeft: 5,
     cursor: "pointer"
   },
   selectedIndicator: {
-    backgroundColor: kaGreen$1
+    backgroundColor: Color.blue
   },
   container: {
     borderTop: "1px solid ".concat(gray76),
@@ -31605,7 +31632,7 @@ class Iframe extends React.Component {
     sandboxProperties += " allow-top-navigation"; // if (this.props.allowTopNavigation === true) {
     //     sandboxProperties += " allow-top-navigation";
     // }
-    // We sandbox the iframe so that we whitelist only the functionality
+    // We sandbox the iframe so that we allowlist only the functionality
     //  that we need. This makes it a bit safer in case some content
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
@@ -48440,10 +48467,8 @@ var ProvideKeypad = {
       // React tree. We may also want to add this keypad asynchronously
       // or on-demand in the future.
       _this._keypadContainer = document.createElement("div");
-      (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.appendChild(_this._keypadContainer); // TODO(LP-11406): Replace with React Portal
-      // eslint-disable-next-line no-restricted-syntax
-
-      ReactDOM__default.render( /*#__PURE__*/React.createElement(Keypad, {
+      (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.appendChild(_this._keypadContainer);
+      render( /*#__PURE__*/React.createElement(Keypad, {
         onElementMounted: element => {
           // NOTE(kevinb): The reason why this setState works is
           // b/c we're calling it manually from item-renderer.jsx
@@ -49137,11 +49162,9 @@ class ItemRenderer extends React.Component {
     // that have completely different places in the DOM, we have to do this
     // strangeness instead of relying on React's normal render() method.
     // TODO(alpert): Figure out how to clean this up somehow
-    // TODO(LP-11406): Replace with React Portal
-    // eslint-disable-next-line no-restricted-syntax
 
 
-    ReactDOM.render(
+    render(
     /*#__PURE__*/
     // metadata (from item.question, aka PerseusRenderer)
     // replace (also item.question, aka PerseusRenderer)
@@ -49176,10 +49199,8 @@ class ItemRenderer extends React.Component {
       linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "question")
     }, this.props.item.question, {
       legacyPerseusLint: this.props.legacyPerseusLint
-    })), workArea); // TODO(LP-11406): Replace with React Portal
-    // eslint-disable-next-line no-restricted-syntax
-
-    ReactDOM.render( /*#__PURE__*/React.createElement(HintsRenderer, {
+    })), workArea);
+    render( /*#__PURE__*/React.createElement(HintsRenderer, {
       ref: node => this.hintsRenderer = node,
       hints: this.props.item.hints,
       hintsVisible: this.state.hintsVisible,
@@ -51489,5 +51510,5 @@ var EditorJsonify = {
 var apiVersion = version.apiVersion;
 var itemDataVersion = version.itemDataVersion;
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemRenderer, JiptParagraphs, context as KeypadContext, KhanColors, KhanMath, context$1 as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Transformer$1 as TransformerWidget, Util, denylist as WIDGET_PROP_BLACKLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, globalConstants, globalStyles, iconPaths as icons, init, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, mediaQueries, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemRenderer, JiptParagraphs, context as KeypadContext, KhanColors, KhanMath, context$1 as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Transformer$1 as TransformerWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, globalConstants, globalStyles, iconPaths as icons, init, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, mediaQueries, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map