@khanacademy/perseus 1.0.0 → 1.1.0

package/dist/es/index.js

@@ -1476,8 +1476,7 @@ var KhanAnswerTypes = {
    */
   number: {
     convertToPredicate: function convertToPredicate(correctAnswer, options) {
-      // TODO(alpert): Don't think this $.trim is necessary
-      var correctFloat = parseFloat($.trim(correctAnswer));
+      var correctFloat = parseFloat(correctAnswer);
       return [function (guess, maxError) {
         return Math.abs(guess - correctFloat) < maxError;
       }, $.extend({}, options, {
@@ -22955,35 +22954,36 @@ _defineProperty(PossibleAnswers, "propTypes", {
 });
 
 var _excluded$3 = ["keypadElement", "onFocus", "value"];
-var SimpleKeypadInput = createReactClass({
-  displayName: "SimpleKeypadInput",
-  propTypes: {
-    keypadElement: keypadElementPropType,
-    onFocus: PropTypes.func,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  },
-  componentDidMount: function componentDidMount() {
+class SimpleKeypadInput extends React.Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "_isMounted", false);
+  }
+
+  componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
     // this.isMounted() but is still considered an anti-pattern.
     this._isMounted = true;
-  },
-  componentWillUnmount: function componentWillUnmount() {
+  }
+
+  componentWillUnmount() {
     this._isMounted = false;
-  },
+  }
 
   focus() {
     // $FlowFixMe[object-this-reference]
     this.refs.input.focus(); // eslint-disable-line react/no-string-refs
-  },
+  }
 
   blur() {
     // $FlowFixMe[object-this-reference]
     this.refs.input.blur(); // eslint-disable-line react/no-string-refs
-  },
+  }
 
-  getValue: function getValue() {
+  getValue() {
     return this.props.value;
-  },
+  }
 
   render() {
     // $FlowFixMe[object-this-reference]
@@ -23022,7 +23022,12 @@ var SimpleKeypadInput = createReactClass({
     }, rest));
   }
 
-});
+}
+SimpleKeypadInput.propTypes = {
+  keypadElement: keypadElementPropType,
+  onFocus: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
 
 var ParseTex$1 = TexWrangler.parseTex;
 var answerTypes = {
@@ -23277,9 +23282,13 @@ class InputNumber extends React.Component {
 
     if (rubric.answerType == null) {
       rubric.answerType = "number";
-    }
+    } // note(matthewc): this will get immediately parsed again by
+    // `KhanAnswerTypes.number.convertToPredicate`, but a string is
+    // expected here
+
 
-    var val = KhanAnswerTypes.number.createValidatorFunctional(rubric.value, {
+    var stringValue = "".concat(rubric.value);
+    var val = KhanAnswerTypes.number.createValidatorFunctional(stringValue, {
       simplify: rubric.simplify,
       inexact: rubric.inexact || undefined,
       maxError: rubric.maxError,
@@ -23405,6 +23414,8 @@ class NumericInput extends React.Component {
   constructor() {
     super(...arguments);
 
+    _defineProperty(this, "inputRef", void 0);
+
     _defineProperty(this, "state", {
       // keeps track of the other set of values when switching
       // between 0 and finite solutions
@@ -23423,9 +23434,8 @@ class NumericInput extends React.Component {
         correct = score.type === "points" && score.earned === score.total;
 
         if (!correct) {
-          var correctAnswers = _.filter(rubric.answers, answer => answer.status === "correct");
-
-          var answerStrings = _.map(correctAnswers, answer => {
+          var correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
+          var answerStrings = correctAnswers.map(answer => {
             // Figure out how this answer is supposed to be
             // displayed
             var format = "decimal";
@@ -23446,7 +23456,6 @@ class NumericInput extends React.Component {
 
             return answerString;
           });
-
           answerBlurb = /*#__PURE__*/React.createElement(PossibleAnswers, {
             answers: answerStrings
           });
@@ -23460,7 +23469,7 @@ class NumericInput extends React.Component {
       var _this$props$answerFor;
 
       // if the set of specified forms are empty, allow all forms
-      var forms = ((_this$props$answerFor = this.props.answerForms) === null || _this$props$answerFor === void 0 ? void 0 : _this$props$answerFor.length) !== 0 ? this.props.answerForms : _.map(_.keys(formExamples), name => {
+      var forms = ((_this$props$answerFor = this.props.answerForms) === null || _this$props$answerFor === void 0 ? void 0 : _this$props$answerFor.length) !== 0 ? this.props.answerForms : Object.keys(formExamples).map(name => {
         return {
           name: name,
           simplify: "required"
@@ -23486,8 +23495,7 @@ class NumericInput extends React.Component {
 
       var answerFormNames = _.uniq((_this$props$answerFor3 = this.props.answerForms) === null || _this$props$answerFor3 === void 0 ? void 0 : _this$props$answerFor3.map(form => form.name));
 
-      var allFormsAccepted = answerFormNames.length >= _.size(formExamples);
-
+      var allFormsAccepted = answerFormNames.length >= Object.keys(formExamples).length;
       return !noFormsAccepted && !allFormsAccepted;
     });
 
@@ -23496,20 +23504,22 @@ class NumericInput extends React.Component {
     });
 
     _defineProperty(this, "focus", () => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.input.focus();
+      var _this$inputRef;
+
+      (_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.focus();
       return true;
     });
 
-    _defineProperty(this, "focusInputPath", inputPath => {
-      /* istanbul ignore next */
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.input.focus();
+    _defineProperty(this, "focusInputPath", () => {
+      var _this$inputRef2;
+
+      (_this$inputRef2 = this.inputRef) === null || _this$inputRef2 === void 0 ? void 0 : _this$inputRef2.focus();
     });
 
-    _defineProperty(this, "blurInputPath", inputPath => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.input.blur();
+    _defineProperty(this, "blurInputPath", () => {
+      var _this$inputRef3;
+
+      (_this$inputRef3 = this.inputRef) === null || _this$inputRef3 === void 0 ? void 0 : _this$inputRef3.blur();
     });
 
     _defineProperty(this, "getInputPaths", () => {
@@ -23577,9 +23587,8 @@ class NumericInput extends React.Component {
   }
 
   static getOneCorrectAnswerFromRubric(rubric) {
-    var correctAnswers = _.filter(rubric.answers, answer => answer.status === "correct");
-
-    var answerStrings = _.map(correctAnswers, answer => {
+    var correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
+    var answerStrings = correctAnswers.map(answer => {
       // Figure out how this answer is supposed to be
       // displayed
       var format = "decimal";
@@ -23609,31 +23618,30 @@ class NumericInput extends React.Component {
   }
 
   static validate(useInput, rubric) {
-    var allAnswerForms = _.pluck(answerFormButtons, "value");
-
-    var createValidator = answer => KhanAnswerTypes.number.createValidatorFunctional(answer.value, {
-      message: answer.message,
-      simplify: answer.status === "correct" ? answer.simplify : "optional",
-      inexact: true,
-      // TODO(merlob) backfill / delete
-      maxError: answer.maxError,
-      forms: answer.strict && answer.answerForms && answer.answerForms.length !== 0 ? answer.answerForms : allAnswerForms
-    }); // We may have received TeX; try to parse it before grading.
+    var allAnswerForms = answerFormButtons.map(e => e["value"]);
+
+    var createValidator = answer => {
+      var stringAnswer = "".concat(answer.value);
+      return KhanAnswerTypes.number.createValidatorFunctional(stringAnswer, {
+        message: answer.message,
+        simplify: answer.status === "correct" ? answer.simplify : "optional",
+        inexact: true,
+        // TODO(merlob) backfill / delete
+        maxError: answer.maxError,
+        forms: answer.strict && answer.answerForms && answer.answerForms.length !== 0 ? answer.answerForms : allAnswerForms
+      });
+    }; // We may have received TeX; try to parse it before grading.
     // If `currentValue` is not TeX, this should be a no-op.
 
 
     var currentValue = ParseTex(useInput.currentValue);
-
-    var correctAnswers = _.where(rubric.answers, {
-      status: "correct"
-    });
-
+    var correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
     var normalizedAnswerExpected = correctAnswers.every(answer => Math.abs(answer.value) <= 1); // Look through all correct answers for one that matches either
     // precisely or approximately and return the appropriate message:
     // - if precise, return the message that the answer came with
     // - if it needs to be simplified, etc., show that message
 
-    var result = _.find(_.map(correctAnswers, answer => {
+    var result = correctAnswers.map(answer => {
       // The coefficient is an attribute of the widget
       var localValue = currentValue;
 
@@ -23647,22 +23655,17 @@ class NumericInput extends React.Component {
 
       var validate = createValidator(answer);
       return validate(maybeParsePercentInput(localValue, normalizedAnswerExpected));
-    }), match => match.correct || match.empty);
+    }).find(match => match.correct || match.empty);
 
     if (!result) {
       // Otherwise, if the guess is not correct
-      var otherAnswers = [].concat(_.where(rubric.answers, {
-        status: "ungraded"
-      }), _.where(rubric.answers, {
-        status: "wrong"
-      })); // Look through all other answers and if one matches either
+      var otherAnswers = [].concat(rubric.answers.filter(answer => answer.status === "ungraded"), rubric.answers.filter(answer => answer.status === "wrong")); // Look through all other answers and if one matches either
       // precisely or approximately return the answer's message
 
-      var match = _.find(otherAnswers, answer => {
+      var match = otherAnswers.find(answer => {
         var validate = createValidator(answer);
         return validate(maybeParsePercentInput(currentValue, normalizedAnswerExpected)).correct;
       });
-
       result = {
         empty: match ? match.status === "ungraded" : false,
         correct: match ? match.status === "correct" : false,
@@ -23709,9 +23712,8 @@ class NumericInput extends React.Component {
 
     if (this.props.apiOptions.customKeypad) {
       // TODO(charlie): Support "Review Mode".
-      return maybeRightAlignKeypadInput( /*#__PURE__*/React.createElement(SimpleKeypadInput // eslint-disable-next-line react/no-string-refs
-      , {
-        ref: "input",
+      return maybeRightAlignKeypadInput( /*#__PURE__*/React.createElement(SimpleKeypadInput, {
+        ref: _ref => this.inputRef = _ref,
         value: this.props.currentValue,
         keypadElement: this.props.keypadElement,
         onChange: this.handleChange,
@@ -23720,9 +23722,8 @@ class NumericInput extends React.Component {
       }));
     }
 
-    var input = /*#__PURE__*/React.createElement(InputWithExamples // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "input",
+    var input = /*#__PURE__*/React.createElement(InputWithExamples, {
+      ref: _ref2 => this.inputRef = _ref2,
       value: this.props.currentValue,
       onChange: this.handleChange,
       className: classNames(classes),
@@ -23789,7 +23790,7 @@ var unionAnswerForms = function unionAnswerForms(answerFormsList) {
   // two elements are equal, and returns a list of unique elements. This is
   // just a helper function here, but works generally.
   var uniqueBy = function uniqueBy(list, iteratee) {
-    return _.reduce(list, (uniqueList, element) => {
+    return list.reduce((uniqueList, element) => {
       // For each element, decide whether it's already in the list of
       // unique items.
       var inList = _.find(uniqueList, iteratee.bind(null, element));
@@ -23803,13 +23804,13 @@ var unionAnswerForms = function unionAnswerForms(answerFormsList) {
   }; // Pull out all of the forms from the different lists.
 
 
-  var allForms = _.flatten(answerFormsList); // Pull out the unique forms using uniqueBy.
-
+  var allForms = answerFormsList.flat(); // Pull out the unique forms using uniqueBy.
 
   var uniqueForms = uniqueBy(allForms, _.isEqual); // Sort them by the order they appear in the `formExamples` list.
 
+  var formExampleKeys = Object.keys(formExamples);
   return _.sortBy(uniqueForms, form => {
-    return _.keys(formExamples).indexOf(form.name);
+    return formExampleKeys.indexOf(form.name);
   });
 };
 // This function checks if the user inputted a percent value, parsing
@@ -23818,7 +23819,7 @@ var unionAnswerForms = function unionAnswerForms(answerFormsList) {
 // can accept several input forms with or without "%", the decision
 // to parse based on the presence of "%" in the input, is so that we
 // don't accidently scale the user typed value before grading, CP-930.
-var maybeParsePercentInput = (inputValue, normalizedAnswerExpected) => {
+function maybeParsePercentInput(inputValue, normalizedAnswerExpected) {
   // If the input value is not a string ending with "%", then there's
   // nothing more to do. The value will be graded as inputted by user.
   if (!(typeof inputValue === "string" && inputValue.endsWith("%"))) {
@@ -23843,13 +23844,13 @@ var maybeParsePercentInput = (inputValue, normalizedAnswerExpected) => {
 
 
   return value;
-};
+}
 
 var propsTransform = function propsTransform(widgetOptions) {
   var rendererProps = _.extend(_.omit(widgetOptions, "answers"), {
     answerForms: unionAnswerForms( // Pull out the name of each form and whether that form has
     // required simplification.
-    _.map(widgetOptions.answers, answer => {
+    widgetOptions.answers.map(answer => {
       return _.map(answer.answerForms, form => {
         return {
           simplify: answer.simplify,
@@ -24393,6 +24394,66 @@ _defineProperty(Icon, "defaultProps", {
   color: "currentColor"
 });
 
+function getA11yText(letter, checked, correct, crossedOut, showCorrectness) {
+  // There are two pieces of metadata we want to add to each a11yText:
+  // whether the answer was checked/crossed-out/neither, and whether the
+  // answer is correct/incorrect/not-yet-revealed.
+  //
+  // Translation is tricky for cross-product situations like this, so
+  // we've just enumerated all 9 possibilities as separate strings.
+  if (showCorrectness && correct) {
+    if (checked) {
+      return i18n._("(Choice %(letter)s, Checked, Correct)", {
+        letter
+      });
+    }
+
+    if (crossedOut) {
+      return i18n._("(Choice %(letter)s, Crossed out, Correct)", {
+        letter
+      });
+    }
+
+    return i18n._("(Choice %(letter)s, Correct)", {
+      letter
+    });
+  }
+
+  if (showCorrectness && !correct) {
+    if (checked) {
+      return i18n._("(Choice %(letter)s, Checked, Incorrect)", {
+        letter
+      });
+    }
+
+    if (crossedOut) {
+      return i18n._("(Choice %(letter)s, Crossed out, Incorrect)", {
+        letter
+      });
+    }
+
+    return i18n._("(Choice %(letter)s, Incorrect)", {
+      letter
+    });
+  }
+
+  if (checked) {
+    return i18n._("(Choice %(letter)s, Checked)", {
+      letter
+    });
+  }
+
+  if (crossedOut) {
+    return i18n._("(Choice %(letter)s, Crossed out)", {
+      letter
+    });
+  }
+
+  return i18n._("(Choice %(letter)s)", {
+    letter
+  });
+}
+
 /**
  * Given a choice's position in the radio widget, return the corresponding
  * "choice letter". (For example, in English, `getChoiceLetter(0)` is "A",
@@ -24579,7 +24640,6 @@ function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, pri
 
 function LibraryChoiceIcon(props) {
   var {
-    a11yText,
     checked,
     crossedOut,
     showCorrectness,
@@ -24607,15 +24667,11 @@ function LibraryChoiceIcon(props) {
     // radio icon
     ,
     "data-is-radio-icon": true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "perseus-sr-only"
-  }, a11yText), /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": true
   }, /*#__PURE__*/React.createElement(ChoiceInner, {
     letter: letter,
     showCorrectness: showCorrectness,
     correct: correct
-  })))), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
+  }))), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
     color: dynamicStyles.borderColor
   }));
 }
@@ -24705,7 +24761,6 @@ function constructSATStyles(reviewMode, correct, checked, multipleSelect) {
 function SATChoiceIcon(props) {
   var {
     letter,
-    a11yText,
     crossedOut,
     reviewMode,
     correct,
@@ -24733,11 +24788,7 @@ function SATChoiceIcon(props) {
       color
     },
     className: css(styles$u.letter)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "perseus-sr-only"
-  }, a11yText), /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true"
-  }, letter)), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
+  }, /*#__PURE__*/React.createElement("span", null, letter)), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
     color: borderColor,
     sat: true
   }));
@@ -24774,66 +24825,6 @@ var styles$u = StyleSheet.create({
 
 /* Component for rendering a letter icon in radio choice */
 
-function getA11yText(letter, checked, correct, crossedOut, showCorrectness) {
-  // There are two pieces of metadata we want to add to each a11yText:
-  // whether the answer was checked/crossed-out/neither, and whether the
-  // answer is correct/incorrect/not-yet-revealed.
-  //
-  // Translation is tricky for cross-product situations like this, so
-  // we've just enumerated all 9 possibilities as separate strings.
-  if (showCorrectness && correct) {
-    if (checked) {
-      return i18n._("(Choice %(letter)s, Checked, Correct)", {
-        letter
-      });
-    }
-
-    if (crossedOut) {
-      return i18n._("(Choice %(letter)s, Crossed out, Correct)", {
-        letter
-      });
-    }
-
-    return i18n._("(Choice %(letter)s, Correct)", {
-      letter
-    });
-  }
-
-  if (showCorrectness && !correct) {
-    if (checked) {
-      return i18n._("(Choice %(letter)s, Checked, Incorrect)", {
-        letter
-      });
-    }
-
-    if (crossedOut) {
-      return i18n._("(Choice %(letter)s, Crossed out, Incorrect)", {
-        letter
-      });
-    }
-
-    return i18n._("(Choice %(letter)s, Incorrect)", {
-      letter
-    });
-  }
-
-  if (checked) {
-    return i18n._("(Choice %(letter)s, Checked)", {
-      letter
-    });
-  }
-
-  if (crossedOut) {
-    return i18n._("(Choice %(letter)s, Crossed out)", {
-      letter
-    });
-  }
-
-  return i18n._("(Choice %(letter)s)", {
-    letter
-  });
-}
-
 function ChoiceIcon(props) {
   var {
     pos,
@@ -24852,12 +24843,10 @@ function ChoiceIcon(props) {
     transparentBackground
   } = props;
   var letter = getChoiceLetter(pos);
-  var a11yText = getA11yText(letter, checked, correct, crossedOut, showCorrectness);
 
   if (product === "sat") {
     return /*#__PURE__*/React.createElement(SATChoiceIcon, {
       letter: letter,
-      a11yText: a11yText,
       reviewMode: reviewMode,
       checked: checked,
       correct: correct,
@@ -24868,7 +24857,6 @@ function ChoiceIcon(props) {
 
   return /*#__PURE__*/React.createElement(LibraryChoiceIcon, {
     letter: letter,
-    a11yText: a11yText,
     reviewMode: reviewMode,
     checked: checked,
     crossedOut: crossedOut,
@@ -24979,6 +24967,15 @@ var ellipsisHorizontalIcon = {
   width: 100,
   height: 27.284
 };
+// Note(TB): Received errors when using useUniqueIdWithMock
+// so created this workaround function. Will update when
+// useUniqueIdWithMock is available.
+// https://khanacademy.atlassian.net/browse/FEI-4861?atlOrigin=eyJpIjoiNDJlZWMwNjM1NWJhNDBkMWFjY2FmN2I0ZjcxZmQxOGUiLCJwIjoiaiJ9
+var id = 0;
+
+function uniqueId() {
+  return "choice-".concat(id++);
+}
 
 function Choice(props) {
   var {
@@ -25035,6 +25032,9 @@ function Choice(props) {
   // content library.
 
   var showDimmed = !apiOptions.satStyling && !reviewMode && apiOptions.readOnly || crossedOut;
+  var letter = getChoiceLetter(pos);
+  var a11yText = getA11yText(letter, checked, correct, crossedOut, showCorrectness);
+  var choiceId = uniqueId();
   return /*#__PURE__*/React.createElement("div", {
     style: {
       dispay: "flex",
@@ -25047,7 +25047,26 @@ function Choice(props) {
       width: "100%",
       opacity: showDimmed ? 0.5 : 1.0
     }
-  }, /*#__PURE__*/React.createElement(Clickable, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "perseus-sr-only"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: multipleSelect ? "checkbox" : "radio",
+    id: choiceId,
+    checked: checked,
+    onClick: () => {
+      // If we're checking a crossed-out option, let's
+      // also uncross it.
+      sendChange({
+        checked: !checked,
+        crossedOut: false
+      });
+    },
+    onChange: () => {},
+    disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
+    tabIndex: -1
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: choiceId
+  }, a11yText, " \xA0 ", content)), /*#__PURE__*/React.createElement(Clickable, {
     onClick: () => {
       // If we're checking a crossed-out option, let's
       // also uncross it.
@@ -25058,13 +25077,11 @@ function Choice(props) {
     },
     className: descriptionClassName,
     disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
-    "aria-label": "Select Choice ".concat(getChoiceLetter(pos)),
-    "aria-checked": checked ? "true" : "false",
-    role: "checkbox",
     style: {
       flex: 1
     },
-    ref: forwardedRef
+    ref: forwardedRef,
+    "aria-hidden": "true"
   }, _ref => {
     var _apiOptions$styling;
 
@@ -25409,7 +25426,8 @@ function BaseRadio(props) {
   }, /*#__PURE__*/React.createElement("legend", {
     className: "perseus-sr-only"
   }, instructions), shouldShowInstructions && /*#__PURE__*/React.createElement("div", {
-    className: instructionsClassName
+    className: instructionsClassName,
+    "aria-hidden": "true"
   }, instructions), /*#__PURE__*/React.createElement("ul", {
     className: className,
     style: {
@@ -26685,7 +26703,7 @@ class Definition extends React.Component {
       }, /*#__PURE__*/React.createElement("span", {
         className: "perseus-widget-definition"
       }, /*#__PURE__*/React.createElement(Button, {
-        size: "small",
+        size: "medium",
         kind: "tertiary",
         onClick: () => {
           this.props.trackInteraction();
@@ -28902,6 +28920,8 @@ class Group extends React.Component {
     super(...arguments);
     _this = this;
 
+    _defineProperty(this, "rendererRef", void 0);
+
     _defineProperty(this, "change", function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -28911,56 +28931,66 @@ class Group extends React.Component {
     });
 
     _defineProperty(this, "getUserInput", () => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.getUserInput();
+      var _this$rendererRef;
+
+      return (_this$rendererRef = this.rendererRef) === null || _this$rendererRef === void 0 ? void 0 : _this$rendererRef.getUserInput();
     });
 
     _defineProperty(this, "getSerializedState", () => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.getSerializedState();
+      var _this$rendererRef2;
+
+      return (_this$rendererRef2 = this.rendererRef) === null || _this$rendererRef2 === void 0 ? void 0 : _this$rendererRef2.getSerializedState();
     });
 
     _defineProperty(this, "restoreSerializedState", (state, callback) => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.renderer.restoreSerializedState(state, callback); // Tell our renderer that we have no props to change
+      var _this$rendererRef3;
+
+      (_this$rendererRef3 = this.rendererRef) === null || _this$rendererRef3 === void 0 ? void 0 : _this$rendererRef3.restoreSerializedState(state, callback); // Tell our renderer that we have no props to change
       // (all our changes were in state):
 
       return null;
     });
 
     _defineProperty(this, "simpleValidate", rubric => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.score();
+      var _this$rendererRef4;
+
+      return (_this$rendererRef4 = this.rendererRef) === null || _this$rendererRef4 === void 0 ? void 0 : _this$rendererRef4.score();
     });
 
     _defineProperty(this, "getInputPaths", () => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.getInputPaths();
+      var _this$rendererRef5;
+
+      return (_this$rendererRef5 = this.rendererRef) === null || _this$rendererRef5 === void 0 ? void 0 : _this$rendererRef5.getInputPaths();
     });
 
-    _defineProperty(this, "setInputValue", (path, newValue, cb) => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.setInputValue(path, newValue, cb);
+    _defineProperty(this, "setInputValue", (path, newValue, callback) => {
+      var _this$rendererRef6;
+
+      return (_this$rendererRef6 = this.rendererRef) === null || _this$rendererRef6 === void 0 ? void 0 : _this$rendererRef6.setInputValue(path, newValue, callback);
     });
 
     _defineProperty(this, "focus", () => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.focus();
+      var _this$rendererRef7;
+
+      return (_this$rendererRef7 = this.rendererRef) === null || _this$rendererRef7 === void 0 ? void 0 : _this$rendererRef7.focus();
     });
 
     _defineProperty(this, "focusInputPath", path => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.renderer.focusPath(path);
+      var _this$rendererRef8;
+
+      (_this$rendererRef8 = this.rendererRef) === null || _this$rendererRef8 === void 0 ? void 0 : _this$rendererRef8.focusPath(path);
     });
 
     _defineProperty(this, "blurInputPath", path => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.renderer.blurPath(path);
+      var _this$rendererRef9;
+
+      (_this$rendererRef9 = this.rendererRef) === null || _this$rendererRef9 === void 0 ? void 0 : _this$rendererRef9.blurPath(path);
     });
 
     _defineProperty(this, "showRationalesForCurrentlySelectedChoices", () => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.renderer.showRationalesForCurrentlySelectedChoices();
+      var _this$rendererRef10;
+
+      (_this$rendererRef10 = this.rendererRef) === null || _this$rendererRef10 === void 0 ? void 0 : _this$rendererRef10.showRationalesForCurrentlySelectedChoices();
     });
   }
 
@@ -28972,7 +29002,9 @@ class Group extends React.Component {
   }
 
   render() {
-    var apiOptions = _.extend({}, ApiOptions.defaults, this.props.apiOptions, {
+    var _this$rendererRef11;
+
+    var apiOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, ApiOptions.defaults), this.props.apiOptions), {}, {
       // Api Rewriting to support correct onFocus/onBlur
       // events for the mobile API
       onFocusChange: (newFocus, oldFocus) => {
@@ -28994,8 +29026,8 @@ class Group extends React.Component {
     // really we should have a more unidirectional flow. TODO(marcia): fix.
 
 
-    var number = _.indexOf(this.props.findWidgets("group"), this);
-
+    var groupWidgets = this.props.findWidgets("group");
+    var number = groupWidgets.indexOf(this);
     var problemNumComponent = this.props.apiOptions.groupAnnotator(number, this.props.widgetId); // This is a little strange because the id of the widget that actually
     // changed is going to be lost in favor of the group widget's id. The
     // widgets prop also wasn't actually changed, and this only serves to
@@ -29003,15 +29035,12 @@ class Group extends React.Component {
     // has occurred.
 
     var onInteractWithWidget = id => {
-      // eslint-disable-next-line react/no-string-refs
-      if (this.refs.renderer) {
-        // eslint-disable-next-line react/no-string-refs
-        this.change("widgets", this.refs.renderer.props.widgets);
+      if (this.rendererRef) {
+        this.change("widgets", this.rendererRef.props.widgets);
       }
-    }; // eslint-disable-next-line react/no-string-refs
-
+    };
 
-    var score = this.refs.renderer && this.refs.renderer.score();
+    var score = (_this$rendererRef11 = this.rendererRef) === null || _this$rendererRef11 === void 0 ? void 0 : _this$rendererRef11.score();
     var isValid = score && score.type !== "invalid";
     var isInvalid = score && score.type === "invalid"; // TODO(mdr): Widgets inside this Renderer are not discoverable through
     //     the parent Renderer's `findWidgets` function.
@@ -29022,15 +29051,17 @@ class Group extends React.Component {
         "perseus-group-valid-answer": isValid,
         "perseus-group-invalid-answer": isInvalid
       })
-    }, problemNumComponent, /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props, {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "renderer",
+    }, problemNumComponent, /*#__PURE__*/React.createElement(Renderer, {
+      content: this.props.content,
+      widgets: this.props.widgets,
+      images: this.props.images,
+      ref: _ref => this.rendererRef = _ref,
       apiOptions: apiOptions,
       findExternalWidgets: this.props.findWidgets,
       reviewMode: !!this.props.reviewModeRubric,
       onInteractWithWidget: onInteractWithWidget,
       linterContext: this.props.linterContext
-    })), this.props.icon && /*#__PURE__*/React.createElement("div", {
+    }), this.props.icon && /*#__PURE__*/React.createElement("div", {
       className: "group-icon"
     }, this.props.icon));
   }
@@ -29045,7 +29076,7 @@ _defineProperty(Group, "defaultProps", {
 });
 
 var traverseChildWidgets$1 = function traverseChildWidgets(props, traverseRenderer) {
-  return _.extend({}, props, traverseRenderer(props));
+  return _objectSpread2(_objectSpread2({}, props), traverseRenderer(props));
 };
 
 var Group$1 = {