@khanacademy/perseus 1.0.0 → 1.1.0

package/dist/index.js

@@ -1417,8 +1417,7 @@ const KhanAnswerTypes = {
    */
   number: {
     convertToPredicate: function (correctAnswer, options) {
-      // TODO(alpert): Don't think this $.trim is necessary
-      const correctFloat = parseFloat($__default["default"].trim(correctAnswer));
+      const correctFloat = parseFloat(correctAnswer);
       return [function (guess, maxError) {
         return Math.abs(guess - correctFloat) < maxError;
       }, $__default["default"].extend({}, options, {
@@ -22850,35 +22849,36 @@ _defineProperty(PossibleAnswers, "propTypes", {
   answers: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
 });
 
-const SimpleKeypadInput = createReactClass__default["default"]({
-  displayName: "SimpleKeypadInput",
-  propTypes: {
-    keypadElement: mathInput.keypadElementPropType,
-    onFocus: PropTypes__default["default"].func,
-    value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
-  },
-  componentDidMount: function () {
+class SimpleKeypadInput extends React__namespace.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() {
     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() {
     return this.props.value;
-  },
+  }
 
   render() {
     // $FlowFixMe[object-this-reference]
@@ -22915,7 +22915,12 @@ const SimpleKeypadInput = createReactClass__default["default"]({
     }, rest));
   }
 
-});
+}
+SimpleKeypadInput.propTypes = {
+  keypadElement: mathInput.keypadElementPropType,
+  onFocus: PropTypes__default["default"].func,
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
 
 const ParseTex$1 = TexWrangler.parseTex;
 const answerTypes = {
@@ -23170,9 +23175,13 @@ class InputNumber extends React__namespace.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
+
 
-    const val = KhanAnswerTypes.number.createValidatorFunctional(rubric.value, {
+    const stringValue = "".concat(rubric.value);
+    const val = KhanAnswerTypes.number.createValidatorFunctional(stringValue, {
       simplify: rubric.simplify,
       inexact: rubric.inexact || undefined,
       maxError: rubric.maxError,
@@ -23298,6 +23307,8 @@ class NumericInput extends React__namespace.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
@@ -23316,9 +23327,8 @@ class NumericInput extends React__namespace.Component {
         correct = score.type === "points" && score.earned === score.total;
 
         if (!correct) {
-          const correctAnswers = ___default["default"].filter(rubric.answers, answer => answer.status === "correct");
-
-          const answerStrings = ___default["default"].map(correctAnswers, answer => {
+          const correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
+          const answerStrings = correctAnswers.map(answer => {
             // Figure out how this answer is supposed to be
             // displayed
             let format = "decimal";
@@ -23339,7 +23349,6 @@ class NumericInput extends React__namespace.Component {
 
             return answerString;
           });
-
           answerBlurb = /*#__PURE__*/React__namespace.createElement(PossibleAnswers, {
             answers: answerStrings
           });
@@ -23353,7 +23362,7 @@ class NumericInput extends React__namespace.Component {
       var _this$props$answerFor;
 
       // if the set of specified forms are empty, allow all forms
-      const forms = ((_this$props$answerFor = this.props.answerForms) === null || _this$props$answerFor === void 0 ? void 0 : _this$props$answerFor.length) !== 0 ? this.props.answerForms : ___default["default"].map(___default["default"].keys(formExamples), name => {
+      const 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"
@@ -23379,8 +23388,7 @@ class NumericInput extends React__namespace.Component {
 
       const answerFormNames = ___default["default"].uniq((_this$props$answerFor3 = this.props.answerForms) === null || _this$props$answerFor3 === void 0 ? void 0 : _this$props$answerFor3.map(form => form.name));
 
-      const allFormsAccepted = answerFormNames.length >= ___default["default"].size(formExamples);
-
+      const allFormsAccepted = answerFormNames.length >= Object.keys(formExamples).length;
       return !noFormsAccepted && !allFormsAccepted;
     });
 
@@ -23389,20 +23397,22 @@ class NumericInput extends React__namespace.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", () => {
@@ -23470,9 +23480,8 @@ class NumericInput extends React__namespace.Component {
   }
 
   static getOneCorrectAnswerFromRubric(rubric) {
-    const correctAnswers = ___default["default"].filter(rubric.answers, answer => answer.status === "correct");
-
-    const answerStrings = ___default["default"].map(correctAnswers, answer => {
+    const correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
+    const answerStrings = correctAnswers.map(answer => {
       // Figure out how this answer is supposed to be
       // displayed
       let format = "decimal";
@@ -23502,31 +23511,30 @@ class NumericInput extends React__namespace.Component {
   }
 
   static validate(useInput, rubric) {
-    const allAnswerForms = ___default["default"].pluck(answerFormButtons, "value");
-
-    const 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.
+    const allAnswerForms = answerFormButtons.map(e => e["value"]);
+
+    const createValidator = answer => {
+      const 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.
 
 
     const currentValue = ParseTex(useInput.currentValue);
-
-    const correctAnswers = ___default["default"].where(rubric.answers, {
-      status: "correct"
-    });
-
+    const correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
     const 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
 
-    let result = ___default["default"].find(___default["default"].map(correctAnswers, answer => {
+    let result = correctAnswers.map(answer => {
       // The coefficient is an attribute of the widget
       let localValue = currentValue;
 
@@ -23540,22 +23548,17 @@ class NumericInput extends React__namespace.Component {
 
       const 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
-      const otherAnswers = [].concat(___default["default"].where(rubric.answers, {
-        status: "ungraded"
-      }), ___default["default"].where(rubric.answers, {
-        status: "wrong"
-      })); // Look through all other answers and if one matches either
+      const 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
 
-      const match = ___default["default"].find(otherAnswers, answer => {
+      const match = otherAnswers.find(answer => {
         const validate = createValidator(answer);
         return validate(maybeParsePercentInput(currentValue, normalizedAnswerExpected)).correct;
       });
-
       result = {
         empty: match ? match.status === "ungraded" : false,
         correct: match ? match.status === "correct" : false,
@@ -23602,9 +23605,8 @@ class NumericInput extends React__namespace.Component {
 
     if (this.props.apiOptions.customKeypad) {
       // TODO(charlie): Support "Review Mode".
-      return maybeRightAlignKeypadInput( /*#__PURE__*/React__namespace.createElement(SimpleKeypadInput // eslint-disable-next-line react/no-string-refs
-      , {
-        ref: "input",
+      return maybeRightAlignKeypadInput( /*#__PURE__*/React__namespace.createElement(SimpleKeypadInput, {
+        ref: ref => this.inputRef = ref,
         value: this.props.currentValue,
         keypadElement: this.props.keypadElement,
         onChange: this.handleChange,
@@ -23613,9 +23615,8 @@ class NumericInput extends React__namespace.Component {
       }));
     }
 
-    const input = /*#__PURE__*/React__namespace.createElement(InputWithExamples // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "input",
+    const input = /*#__PURE__*/React__namespace.createElement(InputWithExamples, {
+      ref: ref => this.inputRef = ref,
       value: this.props.currentValue,
       onChange: this.handleChange,
       className: classNames__default["default"](classes),
@@ -23682,7 +23683,7 @@ const unionAnswerForms = function (answerFormsList) {
   // two elements are equal, and returns a list of unique elements. This is
   // just a helper function here, but works generally.
   const uniqueBy = function (list, iteratee) {
-    return ___default["default"].reduce(list, (uniqueList, element) => {
+    return list.reduce((uniqueList, element) => {
       // For each element, decide whether it's already in the list of
       // unique items.
       const inList = ___default["default"].find(uniqueList, iteratee.bind(null, element));
@@ -23696,13 +23697,13 @@ const unionAnswerForms = function (answerFormsList) {
   }; // Pull out all of the forms from the different lists.
 
 
-  const allForms = ___default["default"].flatten(answerFormsList); // Pull out the unique forms using uniqueBy.
-
+  const allForms = answerFormsList.flat(); // Pull out the unique forms using uniqueBy.
 
   const uniqueForms = uniqueBy(allForms, ___default["default"].isEqual); // Sort them by the order they appear in the `formExamples` list.
 
+  const formExampleKeys = Object.keys(formExamples);
   return ___default["default"].sortBy(uniqueForms, form => {
-    return ___default["default"].keys(formExamples).indexOf(form.name);
+    return formExampleKeys.indexOf(form.name);
   });
 };
 // This function checks if the user inputted a percent value, parsing
@@ -23711,7 +23712,7 @@ const unionAnswerForms = function (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.
-const 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("%"))) {
@@ -23736,13 +23737,13 @@ const maybeParsePercentInput = (inputValue, normalizedAnswerExpected) => {
 
 
   return value;
-};
+}
 
 const propsTransform = function (widgetOptions) {
   const rendererProps = ___default["default"].extend(___default["default"].omit(widgetOptions, "answers"), {
     answerForms: unionAnswerForms( // Pull out the name of each form and whether that form has
     // required simplification.
-    ___default["default"].map(widgetOptions.answers, answer => {
+    widgetOptions.answers.map(answer => {
       return ___default["default"].map(answer.answerForms, form => {
         return {
           simplify: answer.simplify,
@@ -24285,6 +24286,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__namespace._("(Choice %(letter)s, Checked, Correct)", {
+        letter
+      });
+    }
+
+    if (crossedOut) {
+      return i18n__namespace._("(Choice %(letter)s, Crossed out, Correct)", {
+        letter
+      });
+    }
+
+    return i18n__namespace._("(Choice %(letter)s, Correct)", {
+      letter
+    });
+  }
+
+  if (showCorrectness && !correct) {
+    if (checked) {
+      return i18n__namespace._("(Choice %(letter)s, Checked, Incorrect)", {
+        letter
+      });
+    }
+
+    if (crossedOut) {
+      return i18n__namespace._("(Choice %(letter)s, Crossed out, Incorrect)", {
+        letter
+      });
+    }
+
+    return i18n__namespace._("(Choice %(letter)s, Incorrect)", {
+      letter
+    });
+  }
+
+  if (checked) {
+    return i18n__namespace._("(Choice %(letter)s, Checked)", {
+      letter
+    });
+  }
+
+  if (crossedOut) {
+    return i18n__namespace._("(Choice %(letter)s, Crossed out)", {
+      letter
+    });
+  }
+
+  return i18n__namespace._("(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",
@@ -24471,7 +24532,6 @@ function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, pri
 
 function LibraryChoiceIcon(props) {
   const {
-    a11yText,
     checked,
     crossedOut,
     showCorrectness,
@@ -24499,15 +24559,11 @@ function LibraryChoiceIcon(props) {
     // radio icon
     ,
     "data-is-radio-icon": true
-  }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "perseus-sr-only"
-  }, a11yText), /*#__PURE__*/React__namespace.createElement("div", {
-    "aria-hidden": true
   }, /*#__PURE__*/React__namespace.createElement(ChoiceInner, {
     letter: letter,
     showCorrectness: showCorrectness,
     correct: correct
-  })))), crossedOut && /*#__PURE__*/React__namespace.createElement(CrossOutLine, {
+  }))), crossedOut && /*#__PURE__*/React__namespace.createElement(CrossOutLine, {
     color: dynamicStyles.borderColor
   }));
 }
@@ -24597,7 +24653,6 @@ function constructSATStyles(reviewMode, correct, checked, multipleSelect) {
 function SATChoiceIcon(props) {
   const {
     letter,
-    a11yText,
     crossedOut,
     reviewMode,
     correct,
@@ -24625,11 +24680,7 @@ function SATChoiceIcon(props) {
       color
     },
     className: aphrodite.css(styles$u.letter)
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: "perseus-sr-only"
-  }, a11yText), /*#__PURE__*/React__namespace.createElement("span", {
-    "aria-hidden": "true"
-  }, letter)), crossedOut && /*#__PURE__*/React__namespace.createElement(CrossOutLine, {
+  }, /*#__PURE__*/React__namespace.createElement("span", null, letter)), crossedOut && /*#__PURE__*/React__namespace.createElement(CrossOutLine, {
     color: borderColor,
     sat: true
   }));
@@ -24666,66 +24717,6 @@ const styles$u = aphrodite.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__namespace._("(Choice %(letter)s, Checked, Correct)", {
-        letter
-      });
-    }
-
-    if (crossedOut) {
-      return i18n__namespace._("(Choice %(letter)s, Crossed out, Correct)", {
-        letter
-      });
-    }
-
-    return i18n__namespace._("(Choice %(letter)s, Correct)", {
-      letter
-    });
-  }
-
-  if (showCorrectness && !correct) {
-    if (checked) {
-      return i18n__namespace._("(Choice %(letter)s, Checked, Incorrect)", {
-        letter
-      });
-    }
-
-    if (crossedOut) {
-      return i18n__namespace._("(Choice %(letter)s, Crossed out, Incorrect)", {
-        letter
-      });
-    }
-
-    return i18n__namespace._("(Choice %(letter)s, Incorrect)", {
-      letter
-    });
-  }
-
-  if (checked) {
-    return i18n__namespace._("(Choice %(letter)s, Checked)", {
-      letter
-    });
-  }
-
-  if (crossedOut) {
-    return i18n__namespace._("(Choice %(letter)s, Crossed out)", {
-      letter
-    });
-  }
-
-  return i18n__namespace._("(Choice %(letter)s)", {
-    letter
-  });
-}
-
 function ChoiceIcon(props) {
   const {
     pos,
@@ -24744,12 +24735,10 @@ function ChoiceIcon(props) {
     transparentBackground
   } = props;
   const letter = getChoiceLetter(pos);
-  const a11yText = getA11yText(letter, checked, correct, crossedOut, showCorrectness);
 
   if (product === "sat") {
     return /*#__PURE__*/React__namespace.createElement(SATChoiceIcon, {
       letter: letter,
-      a11yText: a11yText,
       reviewMode: reviewMode,
       checked: checked,
       correct: correct,
@@ -24760,7 +24749,6 @@ function ChoiceIcon(props) {
 
   return /*#__PURE__*/React__namespace.createElement(LibraryChoiceIcon, {
     letter: letter,
-    a11yText: a11yText,
     reviewMode: reviewMode,
     checked: checked,
     crossedOut: crossedOut,
@@ -24871,6 +24859,15 @@ const 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
+let id = 0;
+
+function uniqueId() {
+  return "choice-".concat(id++);
+}
 
 function Choice(props) {
   const {
@@ -24927,6 +24924,9 @@ function Choice(props) {
   // content library.
 
   const showDimmed = !apiOptions.satStyling && !reviewMode && apiOptions.readOnly || crossedOut;
+  const letter = getChoiceLetter(pos);
+  const a11yText = getA11yText(letter, checked, correct, crossedOut, showCorrectness);
+  const choiceId = uniqueId();
   return /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       dispay: "flex",
@@ -24939,7 +24939,26 @@ function Choice(props) {
       width: "100%",
       opacity: showDimmed ? 0.5 : 1.0
     }
-  }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    className: "perseus-sr-only"
+  }, /*#__PURE__*/React__namespace.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__namespace.createElement("label", {
+    htmlFor: choiceId
+  }, a11yText, " \xA0 ", content)), /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
     onClick: () => {
       // If we're checking a crossed-out option, let's
       // also uncross it.
@@ -24950,13 +24969,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;
 
@@ -25297,7 +25314,8 @@ function BaseRadio(props) {
   }, /*#__PURE__*/React__namespace.createElement("legend", {
     className: "perseus-sr-only"
   }, instructions), shouldShowInstructions && /*#__PURE__*/React__namespace.createElement("div", {
-    className: instructionsClassName
+    className: instructionsClassName,
+    "aria-hidden": "true"
   }, instructions), /*#__PURE__*/React__namespace.createElement("ul", {
     className: className,
     style: {
@@ -26574,7 +26592,7 @@ class Definition extends React__namespace.Component {
       }, /*#__PURE__*/React__namespace.createElement("span", {
         className: "perseus-widget-definition"
       }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
-        size: "small",
+        size: "medium",
         kind: "tertiary",
         onClick: () => {
           this.props.trackInteraction();
@@ -28783,6 +28801,8 @@ class Group extends React__namespace.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];
@@ -28792,56 +28812,66 @@ class Group extends React__namespace.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();
     });
   }
 
@@ -28853,7 +28883,10 @@ class Group extends React__namespace.Component {
   }
 
   render() {
-    const apiOptions = ___default["default"].extend({}, ApiOptions.defaults, this.props.apiOptions, {
+    var _this$rendererRef11;
+
+    const apiOptions = { ...ApiOptions.defaults,
+      ...this.props.apiOptions,
       // Api Rewriting to support correct onFocus/onBlur
       // events for the mobile API
       onFocusChange: (newFocus, oldFocus) => {
@@ -28865,7 +28898,7 @@ class Group extends React__namespace.Component {
           this.props.onFocus(newFocus);
         }
       }
-    }); // Allow a problem number annotation to be added.
+    }; // Allow a problem number annotation to be added.
     // This is cyclical and should probably be reconsidered. In order to
     // render the annotation ("Question 3 of 10"), we call findWidgets to
     // figure out our index in the list of all fellow group widgets. On
@@ -28874,9 +28907,8 @@ class Group extends React__namespace.Component {
     // componentDidMount so that we can number ourselves properly. But,
     // really we should have a more unidirectional flow. TODO(marcia): fix.
 
-
-    const number = ___default["default"].indexOf(this.props.findWidgets("group"), this);
-
+    const groupWidgets = this.props.findWidgets("group");
+    const number = groupWidgets.indexOf(this);
     const 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
@@ -28884,15 +28916,12 @@ class Group extends React__namespace.Component {
     // has occurred.
 
     const 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
-
+    };
 
-    const score = this.refs.renderer && this.refs.renderer.score();
+    const score = (_this$rendererRef11 = this.rendererRef) === null || _this$rendererRef11 === void 0 ? void 0 : _this$rendererRef11.score();
     const isValid = score && score.type !== "invalid";
     const isInvalid = score && score.type === "invalid"; // TODO(mdr): Widgets inside this Renderer are not discoverable through
     //     the parent Renderer's `findWidgets` function.
@@ -28903,15 +28932,17 @@ class Group extends React__namespace.Component {
         "perseus-group-valid-answer": isValid,
         "perseus-group-invalid-answer": isInvalid
       })
-    }, problemNumComponent, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "renderer",
+    }, problemNumComponent, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }), this.props.icon && /*#__PURE__*/React__namespace.createElement("div", {
       className: "group-icon"
     }, this.props.icon));
   }
@@ -28926,7 +28957,9 @@ _defineProperty(Group, "defaultProps", {
 });
 
 const traverseChildWidgets$1 = function (props, traverseRenderer) {
-  return ___default["default"].extend({}, props, traverseRenderer(props));
+  return { ...props,
+    ...traverseRenderer(props)
+  };
 };
 
 var Group$1 = {