@khanacademy/perseus 1.3.6 → 1.4.0

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

@@ -15,6 +15,7 @@ var ReactDOM = require('react-dom');
 var wonderBlocksProgressSpinner = require('@khanacademy/wonder-blocks-progress-spinner');
 var kmath = require('@khanacademy/kmath');
 var createReactClass = require('create-react-class');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var SimpleMarkdown = require('@khanacademy/simple-markdown');
 var pureMarkdown = require('@khanacademy/pure-markdown');
 var aphrodite = require('aphrodite');
@@ -25,7 +26,6 @@ var Tooltip$1 = require('@khanacademy/wonder-blocks-tooltip');
 var Button = require('@khanacademy/wonder-blocks-button');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
 var Color = require('@khanacademy/wonder-blocks-color');
-var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var wonderBlocksPopover = require('@khanacademy/wonder-blocks-popover');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
@@ -2185,7 +2185,7 @@ function widgetShouldHighlight(widget) {
 
   switch (widget.type) {
     /**
-     * Highlight bar blacklist
+     * Highlight bar denylist
      */
     case "measurer":
     case "protractor":
@@ -14539,6 +14539,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["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__namespace.createElement(wonderBlocksCore.RenderStateRoot, {
+    throwIfNested: false
+  }, element), container, callback);
+}
+
 /* eslint-disable @babel/no-invalid-this */
 const add$1 = {
   constrain: function () {
@@ -14866,9 +14886,7 @@ ___default["default"].extend(MovablePoint$5.prototype, {
 
     const showTrashTooltip = () => {
       this._showTooltip(container => {
-        // TODO(LP-11406): Replace with React Portal
-        // eslint-disable-next-line no-restricted-syntax
-        ReactDOM__namespace.render( /*#__PURE__*/React__namespace.createElement("span", {
+        render( /*#__PURE__*/React__namespace.createElement("span", {
           style: {
             fontSize: "2em"
           }
@@ -19201,7 +19219,7 @@ class WidgetContainer extends React__namespace.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.
@@ -22156,9 +22174,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.
  */
 const denylist = [// standard props "added" by react
 // (technically the renderer still adds them)
@@ -26209,7 +26225,7 @@ class PassageRef extends React__namespace.Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     return !___default["default"].isEqual(this.props, nextProps) || !___default["default"].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.
 
 
@@ -28530,7 +28546,9 @@ class Categorizer extends React__namespace.Component {
 
     const table = /*#__PURE__*/React__namespace.createElement("table", {
       className: "categorizer-table " + aphrodite.css(styles$m.mobileTable)
-    }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("th", null, "\xA0"), this.props.categories.map((category, i) => {
+    }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", {
+      className: aphrodite.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
@@ -28658,6 +28676,10 @@ const styles$m = aphrodite.StyleSheet.create({
     color: "#ccc",
     verticalAlign: "middle"
   },
+  emptyHeaderCell: {
+    backgroundColor: "inherit",
+    borderBottom: "2px solid #ccc"
+  },
   radioSpan: {
     fontSize: 30,
     paddingRight: 3,
@@ -28893,7 +28915,7 @@ class CSProgram extends React__namespace.Component {
       url = updateQueryString$1(url, "settings", JSON.stringify(settings));
     }
 
-    const sandboxOptions = ["allow-popups", "allow-same-origin", "allow-scripts", "allow-top-navigation"].join(" "); // We sandbox the iframe so that we whitelist only the functionality
+    const 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/
@@ -29771,7 +29793,7 @@ const styles$h = aphrodite.StyleSheet.create({
     padding: 0,
     border: "none",
     marginTop: 20,
-    color: kaGreen$1,
+    color: Color__default["default"].blue,
     cursor: "pointer",
     display: "block",
     clear: "both"
@@ -29779,7 +29801,7 @@ const styles$h = aphrodite.StyleSheet.create({
   explanationTitle: {
     backgroundColor: "unset",
     marginTop: 20,
-    color: kaGreen$1,
+    color: Color__default["default"].blue,
     marginBottom: 10,
     cursor: "pointer",
     fontSize: 14,
@@ -29809,29 +29831,38 @@ var GradedGroup$2 = {
 
 const 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__namespace.Component {
-  render() {
-    const items = [];
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "handleKeyDown", (e, i) => {
+      if (e.key === "Enter" || e.key === " ") {
+        this.props.onChangeCurrentGroup(i);
+      }
+    });
+  }
 
-    for (let i = 0; i < this.props.numGroups; i++) {
-      items.push( /*#__PURE__*/React__namespace.createElement("div", {
+  render() {
+    return /*#__PURE__*/React__namespace.createElement("ul", {
+      className: aphrodite.css(styles$g.indicatorContainer)
+    }, this.props.gradedGroups.map((_ref, i) => {
+      let {
+        title
+      } = _ref;
+      return /*#__PURE__*/React__namespace.createElement("li", {
         role: "button",
         "aria-label": i18n__namespace._("Skip to %(title)s", {
-          title: this.props.groupTitles[i]
+          title
         }),
-        key: i,
+        key: title,
         className: aphrodite.css(styles$g.indicator, i === this.props.currentGroup && styles$g.selectedIndicator),
-        onClick: () => this.props.onChangeCurrentGroup(i)
+        tabIndex: 0,
+        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"))));
-    }
-
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$g.indicatorContainer)
-    }, items);
+      }, i18n__namespace._("Current")));
+    }));
   }
 
 }
@@ -29945,9 +29976,8 @@ class GradedGroupSet extends React__namespace.Component {
     }, currentGroup.title), /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$g.spacer)
     }), /*#__PURE__*/React__namespace.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
       })
@@ -30000,25 +30030,28 @@ const styles$g = aphrodite.StyleSheet.create({
   },
   title: {
     fontSize: 12,
-    color: gray76,
+    color: Color__default["default"].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__default["default"].blue,
     marginLeft: 5,
     cursor: "pointer"
   },
   selectedIndicator: {
-    backgroundColor: kaGreen$1
+    backgroundColor: Color__default["default"].blue
   },
   container: {
     borderTop: "1px solid ".concat(gray76),
@@ -31492,7 +31525,7 @@ class Iframe extends React__namespace.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/
@@ -48287,10 +48320,8 @@ const 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["default"].render( /*#__PURE__*/React__namespace.createElement(mathInput.Keypad, {
+      (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.appendChild(_this._keypadContainer);
+      render( /*#__PURE__*/React__namespace.createElement(mathInput.Keypad, {
         onElementMounted: element => {
           // NOTE(kevinb): The reason why this setState works is
           // b/c we're calling it manually from item-renderer.jsx
@@ -48986,11 +49017,9 @@ class ItemRenderer extends React__namespace.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__namespace.render(
+    render(
     /*#__PURE__*/
     // metadata (from item.question, aka PerseusRenderer)
     // replace (also item.question, aka PerseusRenderer)
@@ -49025,10 +49054,8 @@ class ItemRenderer extends React__namespace.Component {
       linterContext: PerseusLinter__namespace.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__namespace.render( /*#__PURE__*/React__namespace.createElement(HintsRenderer, {
+    })), workArea);
+    render( /*#__PURE__*/React__namespace.createElement(HintsRenderer, {
       ref: node => this.hintsRenderer = node,
       hints: this.props.item.hints,
       hintsVisible: this.state.hintsVisible,
@@ -51378,7 +51405,7 @@ exports.SizingUtils = sizingUtils;
 exports.TableWidget = Table$1;
 exports.TransformerWidget = Transformer$1;
 exports.Util = Util;
-exports.WIDGET_PROP_BLACKLIST = denylist;
+exports.WIDGET_PROP_DENYLIST = denylist;
 exports.WidgetJsonifyDeprecated = WidgetJsonifyDeprecated;
 exports.Widgets = widgets$1;
 exports.apiVersion = apiVersion;