@khanacademy/perseus 1.3.3 → 1.3.5

package/dist/index.js

@@ -17851,17 +17851,17 @@ class Lint extends React__namespace.Component {
       let warningTextStyle;
 
       if (this.props.severity === 1) {
-        severityStyle = styles$A.indicatorError;
+        severityStyle = styles$B.indicatorError;
         warningText = "Error";
-        warningTextStyle = styles$A.publishBlockingError;
+        warningTextStyle = styles$B.publishBlockingError;
       } else if (this.props.severity === 2) {
-        severityStyle = styles$A.indicatorWarning;
+        severityStyle = styles$B.indicatorWarning;
         warningText = "Warning";
-        warningTextStyle = styles$A.warning;
+        warningTextStyle = styles$B.warning;
       } else {
-        severityStyle = styles$A.indicatorGuideline;
+        severityStyle = styles$B.indicatorGuideline;
         warningText = "Recommendation";
-        warningTextStyle = styles$A.warning;
+        warningTextStyle = styles$B.warning;
       }
 
       return /*#__PURE__*/React__namespace.createElement("a", {
@@ -17869,16 +17869,16 @@ class Lint extends React__namespace.Component {
         target: "lint-help-window",
         className: aphrodite.css(style)
       }, /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$A.indicator, severityStyle)
+        className: aphrodite.css(styles$B.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$A.tooltip, tooltipAbove && styles$A.tooltipAbove)
+        className: aphrodite.css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
         key: i,
-        className: aphrodite.css(styles$A.tooltipParagraph)
+        className: aphrodite.css(styles$B.tooltipParagraph)
       }, /*#__PURE__*/React__namespace.createElement("span", {
         className: aphrodite.css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$A.tail, tooltipAbove && styles$A.tailAbove)
+        className: aphrodite.css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
       })));
     });
   }
@@ -17926,19 +17926,19 @@ class Lint extends React__namespace.Component {
 
     if (blockHighlight) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$A.lintContainer, styles$A.lintContainerBlock)
-      }, this.renderLink(styles$A.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$B.lintContainer, styles$B.lintContainerBlock)
+      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
 
     if (inline) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$A.lintContainer)
-      }, this.renderLink(styles$A.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$B.lintContainer)
+      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
 
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$A.lintContainer)
-    }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
+      className: aphrodite.css(styles$B.lintContainer)
+    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
 
 } // $FlowFixMe[prop-missing]
@@ -17963,7 +17963,7 @@ _defineProperty(Lint, "propTypes", {
   severity: PropTypes__default["default"].number
 });
 
-const styles$A = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -19343,7 +19343,7 @@ class Renderer extends React__namespace.Component {
         // look like a widget ID (ie. `widget-type \d+`). I can't figure
         // out how to trigger this line of code though.
 
-        /* istanbul ignore next line */
+        /* c8 ignore next line */
         return {};
       }
 
@@ -19682,7 +19682,7 @@ class Renderer extends React__namespace.Component {
           // reached. As noted above, these are always QuestionParagraphs
           // now.
 
-          /* istanbul ignore if */
+          /* c8 ignore if */
 
           if (typeof nodeOut === "string" && lastWasString) {
             /**
@@ -19856,7 +19856,7 @@ class Renderer extends React__namespace.Component {
             paddingRight: margin
           };
           const mobileInnerStyle = { ...innerStyle,
-            ...styles$z.mobileZoomableParentFix
+            ...styles$A.mobileZoomableParentFix
           };
           return /*#__PURE__*/React__namespace.createElement("div", {
             key: state.key,
@@ -19996,7 +19996,7 @@ class Renderer extends React__namespace.Component {
           paddingRight: 0
         };
         const mobileInnerStyle = { ...innerStyle,
-          ...styles$z.mobileZoomableParentFix
+          ...styles$A.mobileZoomableParentFix
         };
         const wrappedOutput = /*#__PURE__*/React__namespace.createElement("div", {
           style: { ...mobileInnerStyle,
@@ -20677,7 +20677,7 @@ _defineProperty(Renderer, "defaultProps", {
   linterContext: PerseusLinter__namespace.linterContextDefault
 });
 
-const styles$z = {
+const styles$A = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -21953,9 +21953,6 @@ const Tooltip = createReactClass__default["default"]({
 const {
   captureScratchpadTouchStart: captureScratchpadTouchStart$3
 } = Util;
-const MATH = "math";
-const TEXT = "text";
-const TEX = "tex";
 
 class InputWithExamples extends React__namespace.Component {
   constructor() {
@@ -21973,7 +21970,7 @@ class InputWithExamples extends React__namespace.Component {
     _defineProperty(this, "_getInputClassName", () => {
       // <MathOutput> is a special component that manages its own class and
       // state, as it's a <span> that wants to act like an <input>.
-      if (this.props.type === TEX) {
+      if (this.props.type === "tex") {
         return this.props.className;
       } // Otherwise, we need to add these INPUT and FOCUSED tags here.
 
@@ -22008,7 +22005,7 @@ class InputWithExamples extends React__namespace.Component {
         style: this.props.style
       };
 
-      if (this.props.type === TEX) {
+      if (this.props.type === "tex") {
         return inputProps;
       } // Add useful props required for MATH and TEXT modes
 
@@ -22019,7 +22016,7 @@ class InputWithExamples extends React__namespace.Component {
       }); // And add final props that are MATH- and TEXT-specific
 
 
-      if (this.props.type === MATH) {
+      if (this.props.type === "math") {
         return ___default["default"].extend({
           buttonSet: this.props.buttonSet,
           buttonsVisible: this.props.buttonsVisible,
@@ -22027,7 +22024,7 @@ class InputWithExamples extends React__namespace.Component {
         }, inputProps);
       }
 
-      if (this.props.type === TEXT) {
+      if (this.props.type === "text") {
         return ___default["default"].extend({
           autoCapitalize: "off",
           autoComplete: "off",
@@ -22039,16 +22036,17 @@ class InputWithExamples extends React__namespace.Component {
 
     _defineProperty(this, "_getComponentForInputType", () => {
       switch (this.props.type) {
-        case TEX:
+        case "tex":
           return MathOutput;
 
-        case MATH:
+        case "math":
           return MathInput;
 
-        case TEXT:
+        case "text":
           return TextInput;
 
         default:
+          this.props.type;
           return null;
       }
     });
@@ -22109,7 +22107,7 @@ class InputWithExamples extends React__namespace.Component {
     // other types require, and is hence handled separately.
 
 
-    if (this.props.type === TEX) {
+    if (this.props.type === "tex") {
       return input;
     } // Else, we need to be able to show examples
 
@@ -22140,7 +22138,7 @@ class InputWithExamples extends React__namespace.Component {
 }
 
 _defineProperty(InputWithExamples, "defaultProps", {
-  type: TEXT,
+  type: "text",
   shouldShowExamples: true,
   onFocus: function () {},
   onBlur: function () {},
@@ -22384,12 +22382,12 @@ class Expression extends React__namespace.Component {
     });
 
     _defineProperty(this, "_handleFocus", () => {
-      /* istanbul ignore next */
+      /* c8 ignore next */
       this.props.onFocus([]);
     });
 
     _defineProperty(this, "_handleBlur", () => {
-      /* istanbul ignore next */
+      /* c8 ignore next */
       this.props.onBlur([]);
     });
 
@@ -22423,12 +22421,12 @@ class Expression extends React__namespace.Component {
       // The widget itself is an input, so we return a single empty list to
       // indicate this.
 
-      /* istanbul ignore next */
+      /* c8 ignore next */
       return [[]];
     });
 
     _defineProperty(this, "getGrammarTypeForPath", inputPath => {
-      /* istanbul ignore next */
+      /* c8 ignore next */
       return "expression";
     });
 
@@ -22478,7 +22476,7 @@ class Expression extends React__namespace.Component {
       // in the function variables list for the expression.
 
       if (!expression.parsed) {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         Log.error("Unable to parse solution answer for expression", Errors.InvalidInput, {
           loggedMetadata: {
             rubric: JSON.stringify(rubric)
@@ -22782,7 +22780,7 @@ const keypadConfigurationForProps = widgetOptions => {
 };
 
 const propUpgrades$2 = {
-  /* istanbul ignore next */
+  /* c8 ignore next */
   "1": v0props => ({
     times: v0props.times,
     buttonSets: v0props.buttonSets,
@@ -23050,12 +23048,12 @@ class InputNumber extends React__namespace.Component {
       // The widget itself is an input, so we return a single empty list to
       // indicate this.
 
-      /* istanbul ignore next */
+      /* c8 ignore next */
       return [[]];
     });
 
     _defineProperty(this, "getGrammarTypeForPath", path => {
-      /* istanbul ignore next */
+      /* c8 ignore next */
       return "number";
     });
 
@@ -23116,7 +23114,7 @@ class InputNumber extends React__namespace.Component {
     let correct = null;
     let answerBlurb = null; // SAT is deprecated and not testable
 
-    /* istanbul ignore if */
+    /* c8 ignore if */
 
     if (this.props.apiOptions.satStyling && rubric) {
       const score = this.simpleValidate(rubric);
@@ -23136,20 +23134,33 @@ class InputNumber extends React__namespace.Component {
           answers: answerStrings
         });
       }
+    } // Note: This is _very_ similar to what `numeric-input.jsx` does. If
+    // you modify this, double-check if you also need to modify that
+    // component.
+
+
+    const 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) {
+      inputStyles.push(styles$z.answerStateCorrect);
+    } // Incorrect
+
+
+    if (rubric && !correct && this.props.currentValue) {
+      inputStyles.push(styles$z.answerStateIncorrect);
+    } // Unanswered
+
+
+    if (rubric && !this.props.currentValue) {
+      inputStyles.push(styles$z.answerStateUnanswered);
     }
 
-    const classes = {};
-    classes["perseus-input-size-" + this.props.size] = true;
-    classes["perseus-input-right-align"] = this.props.rightAlign;
-    classes[ClassNames.CORRECT] = rubric && correct && this.props.currentValue;
-    classes[ClassNames.INCORRECT] = rubric && !correct && this.props.currentValue;
-    classes[ClassNames.UNANSWERED] = rubric && !this.props.currentValue;
     const input = /*#__PURE__*/React__namespace.createElement(InputWithExamples // eslint-disable-next-line react/no-string-refs
     , {
       ref: "input",
       value: this.props.currentValue,
       onChange: this.handleChange,
-      className: classNames__default["default"](classes),
+      style: inputStyles,
       type: this._getInputType(),
       examples: this.examples(),
       shouldShowExamples: this.shouldShowExamples(),
@@ -23160,7 +23171,7 @@ class InputNumber extends React__namespace.Component {
       linterContext: this.props.linterContext
     }); // SAT is deprecated, answer blurb is an SAT feature
 
-    /* istanbul ignore if */
+    /* c8 ignore if */
 
     if (answerBlurb) {
       return /*#__PURE__*/React__namespace.createElement("span", {
@@ -23245,6 +23256,39 @@ _defineProperty(InputNumber, "defaultProps", {
   linterContext: PerseusLinter.linterContextDefault
 });
 
+const styles$z = aphrodite.StyleSheet.create({
+  default: {
+    width: 80,
+    height: "auto"
+  },
+  small: {
+    width: 40
+  },
+  leftAlign: {
+    paddingLeft: Spacing__default["default"].xxxSmall_4,
+    paddingRight: 0
+  },
+  rightAlign: {
+    textAlign: "right",
+    paddingLeft: 0,
+    paddingRight: Spacing__default["default"].xxxSmall_4
+  },
+  answerStateCorrect: {
+    color: satCorrectColor,
+    backgroundColor: satCorrectBackgroundColor,
+    border: "solid 1px ".concat(satCorrectBorderColor)
+  },
+  answerStateIncorrect: {
+    color: satIncorrectColor,
+    backgroundColor: satIncorrectBackgroundColor,
+    border: "solid 1px ".concat(satIncorrectBorderColor)
+  },
+  answerStateUnanswered: {
+    backgroundColor: "#eee",
+    border: "solid 1px #999"
+  }
+});
+
 const propTransform$4 = widgetOptions => {
   const {
     simplify,
@@ -23321,7 +23365,7 @@ class NumericInput extends React__namespace.Component {
       let answerBlurb;
       /* Ignore this block because SAT is deprecated */
 
-      /* istanbul ignore next */
+      /* c8 ignore next */
 
       if (this.props.apiOptions.satStyling && rubric) {
         const score = this.simpleValidate(rubric);
@@ -23420,17 +23464,17 @@ class NumericInput extends React__namespace.Component {
       // The widget itself is an input, so we return a single empty list to
       // indicate this.
 
-      /* istanbul ignore next */
+      /* c8 ignore next */
       return [[]];
     });
 
     _defineProperty(this, "getGrammarTypeForPath", inputPath => {
-      /* istanbul ignore next */
+      /* c8 ignore next */
       return "number";
     });
 
     _defineProperty(this, "setInputValue", (path, newValue, cb) => {
-      /* istanbul ignore next */
+      /* c8 ignore next */
       this.props.onChange({
         currentValue: newValue
       }, cb);
@@ -23613,7 +23657,10 @@ class NumericInput extends React__namespace.Component {
         onFocus: this._handleFocus,
         onBlur: this._handleBlur
       }));
-    }
+    } // Note: This is _very_ similar to what `input-number.jsx` does. If
+    // you modify this, double-check if you also need to modify that
+    // component.
+
 
     const styles = aphrodite.StyleSheet.create({
       input: {
@@ -23639,7 +23686,7 @@ class NumericInput extends React__namespace.Component {
     });
     /* This only gets used with SAT Content */
 
-    /* istanbul ignore next if */
+    /* c8 ignore next if */
 
     if (answerBlurb) {
       return /*#__PURE__*/React__namespace.createElement("span", {
@@ -26872,8 +26919,8 @@ function LibraryChoiceIcon(props) {
   }, /*#__PURE__*/React__namespace.createElement("div", {
     style: dynamicStyles,
     "data-test-id": "choice-icon__library-choice-icon",
-    className: aphrodite.css(styles$r.circle, showCorrectness && correct && styles$r.circleCorrect, showCorrectness && !correct && styles$r.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$r.circleIncorrectAnswered) // used in BaseRadio to check if we actually clicked on the
-    // radio icon
+    className: aphrodite.css(styles$r.circle, showCorrectness && correct && styles$r.circleCorrect, showCorrectness && !correct && styles$r.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$r.circleIncorrectAnswered) // used in BaseRadio editMode to check
+    // if we actually clicked on the radio icon
     ,
     "data-is-radio-icon": true
   }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -27299,7 +27346,8 @@ function Choice(props) {
     disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
     style: {
       flex: 1,
-      color: Color__default["default"].offBlack
+      color: Color__default["default"].offBlack,
+      userSelect: "text"
     },
     ref: forwardedRef,
     "aria-hidden": "true"
@@ -27655,7 +27703,7 @@ function BaseRadio(props) {
     style: {
       listStyle: "none"
     }
-  }, choices.map(function (choice, i) {
+  }, choices.map((choice, i) => {
     let Element = Choice$1;
     const ref = /*#__PURE__*/React__namespace.createRef();
     choiceRefs.current[i] = ref;
@@ -27674,6 +27722,11 @@ function BaseRadio(props) {
       showRationale: choice.hasRationale && (reviewMode || choice.showRationale),
       pos: i,
       onChange: newValues => {
+        // editMode selection is handled in clickHandler
+        if (editMode) {
+          return;
+        }
+
         updateChoice(i, newValues);
       },
       ref
@@ -27731,7 +27784,7 @@ function BaseRadio(props) {
           // radio icon, then we want to trigger the
           // check by flipping the choice of the icon.
           if (elem.getAttribute("data-is-radio-icon")) {
-            this.updateChoice(i, {
+            updateChoice(i, {
               checked: !choice.checked,
               crossedOut: choice.crossedOut
             });
@@ -27755,7 +27808,7 @@ function BaseRadio(props) {
       onClick: clickHandler,
       onTouchStart: !labelWrap ? null : captureScratchpadTouchStart$2
     }, /*#__PURE__*/React__namespace.createElement(Element, elementProps));
-  }, this))); // Allow for horizontal scrolling if content is too wide, which may be
+  }))); // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   // This is disabled in SAT, since it conflicts with their theming.
 
@@ -28102,7 +28155,7 @@ class Radio$1 extends React__namespace.Component {
         noneOfTheAboveSelected
       }; // Support legacy choiceState implementation
     }
-    /* istanbul ignore if - props.values is deprecated */
+    /* c8 ignore if - props.values is deprecated */
 
 
     const {
@@ -28197,7 +28250,7 @@ class Radio$1 extends React__namespace.Component {
     } else if (this.props.values) {
       // Support legacy choiceStates implementation
 
-      /* istanbul ignore next - props.values is deprecated */
+      /* c8 ignore next - props.values is deprecated */
       choiceStates = this.props.values.map(val => ({
         selected: val,
         crossedOut: false,
@@ -28580,7 +28633,7 @@ _defineProperty(Categorizer, "defaultProps", {
 
 const pageMargin = 16; // Stylesheets aren't directly testable
 
-/* istanbul ignore next */
+/* c8 ignore next */
 
 const styles$m = aphrodite.StyleSheet.create({
   mobileTable: {