@khanacademy/perseus 1.3.3 → 1.3.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/perseus
 
+## 1.3.5
+
+### Patch Changes
+
+-   c4feda94: allow users to select text in radio choice
+-   6f79dc58: Fix regression in input-number widget to respect `size` and `rightAlign` options again.
+
+## 1.3.4
+
+### Patch Changes
+
+-   5a565227: bugfix for Radio editor selection and deletion
+
 ## 1.3.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -17959,17 +17959,17 @@ class Lint extends React.Component {
       var 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.createElement("a", {
@@ -17977,16 +17977,16 @@ class Lint extends React.Component {
         target: "lint-help-window",
         className: css(style)
       }, /*#__PURE__*/React.createElement("span", {
-        className: css(styles$A.indicator, severityStyle)
+        className: css(styles$B.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$A.tooltip, tooltipAbove && styles$A.tooltipAbove)
+        className: css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
         key: i,
-        className: css(styles$A.tooltipParagraph)
+        className: css(styles$B.tooltipParagraph)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$A.tail, tooltipAbove && styles$A.tailAbove)
+        className: css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
       })));
     });
   }
@@ -18034,19 +18034,19 @@ class Lint extends React.Component {
 
     if (blockHighlight) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$A.lintContainer, styles$A.lintContainerBlock)
-      }, this.renderLink(styles$A.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$B.lintContainer, styles$B.lintContainerBlock)
+      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
 
     if (inline) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$A.lintContainer)
-      }, this.renderLink(styles$A.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$B.lintContainer)
+      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$A.lintContainer)
-    }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
+      className: css(styles$B.lintContainer)
+    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
   }
 
 } // $FlowFixMe[prop-missing]
@@ -18071,7 +18071,7 @@ _defineProperty(Lint, "propTypes", {
   severity: PropTypes.number
 });
 
-var styles$A = StyleSheet.create({
+var styles$B = 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.
@@ -19447,7 +19447,7 @@ class Renderer extends React.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 {};
       }
 
@@ -19786,7 +19786,7 @@ class Renderer extends React.Component {
           // reached. As noted above, these are always QuestionParagraphs
           // now.
 
-          /* istanbul ignore if */
+          /* c8 ignore if */
 
           if (typeof nodeOut === "string" && lastWasString) {
             /**
@@ -19961,7 +19961,7 @@ class Renderer extends React.Component {
             paddingRight: margin
           };
 
-          var mobileInnerStyle = _objectSpread2(_objectSpread2({}, innerStyle), styles$z.mobileZoomableParentFix);
+          var mobileInnerStyle = _objectSpread2(_objectSpread2({}, innerStyle), styles$A.mobileZoomableParentFix);
 
           return /*#__PURE__*/React.createElement("div", {
             key: state.key,
@@ -20099,7 +20099,7 @@ class Renderer extends React.Component {
           paddingRight: 0
         };
 
-        var _mobileInnerStyle = _objectSpread2(_objectSpread2({}, _innerStyle), styles$z.mobileZoomableParentFix);
+        var _mobileInnerStyle = _objectSpread2(_objectSpread2({}, _innerStyle), styles$A.mobileZoomableParentFix);
 
         var wrappedOutput = /*#__PURE__*/React.createElement("div", {
           style: _objectSpread2(_objectSpread2({}, _mobileInnerStyle), {}, {
@@ -20778,7 +20778,7 @@ _defineProperty(Renderer, "defaultProps", {
   linterContext: PerseusLinter.linterContextDefault
 });
 
-var styles$z = {
+var styles$A = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -22054,9 +22054,6 @@ var Tooltip = createReactClass({
 var {
   captureScratchpadTouchStart: captureScratchpadTouchStart$3
 } = Util;
-var MATH = "math";
-var TEXT = "text";
-var TEX = "tex";
 
 class InputWithExamples extends React.Component {
   constructor() {
@@ -22074,7 +22071,7 @@ class InputWithExamples extends React.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.
 
@@ -22109,7 +22106,7 @@ class InputWithExamples extends React.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
 
@@ -22120,7 +22117,7 @@ class InputWithExamples extends React.Component {
       }); // And add final props that are MATH- and TEXT-specific
 
 
-      if (this.props.type === MATH) {
+      if (this.props.type === "math") {
         return _.extend({
           buttonSet: this.props.buttonSet,
           buttonsVisible: this.props.buttonsVisible,
@@ -22128,7 +22125,7 @@ class InputWithExamples extends React.Component {
         }, inputProps);
       }
 
-      if (this.props.type === TEXT) {
+      if (this.props.type === "text") {
         return _.extend({
           autoCapitalize: "off",
           autoComplete: "off",
@@ -22140,16 +22137,17 @@ class InputWithExamples extends React.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;
       }
     });
@@ -22210,7 +22208,7 @@ class InputWithExamples extends React.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
 
@@ -22241,7 +22239,7 @@ class InputWithExamples extends React.Component {
 }
 
 _defineProperty(InputWithExamples, "defaultProps", {
-  type: TEXT,
+  type: "text",
   shouldShowExamples: true,
   onFocus: function onFocus() {},
   onBlur: function onBlur() {},
@@ -22484,12 +22482,12 @@ class Expression extends React.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([]);
     });
 
@@ -22523,12 +22521,12 @@ class Expression extends React.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";
     });
 
@@ -22578,7 +22576,7 @@ class Expression extends React.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)
@@ -22884,7 +22882,7 @@ var keypadConfigurationForProps = widgetOptions => {
 };
 
 var propUpgrades$2 = {
-  /* istanbul ignore next */
+  /* c8 ignore next */
   "1": v0props => ({
     times: v0props.times,
     buttonSets: v0props.buttonSets,
@@ -23155,12 +23153,12 @@ class InputNumber extends React.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";
     });
 
@@ -23221,7 +23219,7 @@ class InputNumber extends React.Component {
     var correct = null;
     var answerBlurb = null; // SAT is deprecated and not testable
 
-    /* istanbul ignore if */
+    /* c8 ignore if */
 
     if (this.props.apiOptions.satStyling && rubric) {
       var score = this.simpleValidate(rubric);
@@ -23241,20 +23239,33 @@ class InputNumber extends React.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.
+
+
+    var inputStyles = [styles$z.default, this.props.size === "small" ? styles$z.small : null, this.props.rightAlign ? styles$z.rightAlign : styles$z.leftAlign]; // Correct
+
+    if (rubric && correct && this.props.currentValue) {
+      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);
     }
 
-    var 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;
     var input = /*#__PURE__*/React.createElement(InputWithExamples // eslint-disable-next-line react/no-string-refs
     , {
       ref: "input",
       value: this.props.currentValue,
       onChange: this.handleChange,
-      className: classNames(classes),
+      style: inputStyles,
       type: this._getInputType(),
       examples: this.examples(),
       shouldShowExamples: this.shouldShowExamples(),
@@ -23265,7 +23276,7 @@ class InputNumber extends React.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.createElement("span", {
@@ -23350,6 +23361,39 @@ _defineProperty(InputNumber, "defaultProps", {
   linterContext: linterContextDefault
 });
 
+var styles$z = StyleSheet.create({
+  default: {
+    width: 80,
+    height: "auto"
+  },
+  small: {
+    width: 40
+  },
+  leftAlign: {
+    paddingLeft: Spacing.xxxSmall_4,
+    paddingRight: 0
+  },
+  rightAlign: {
+    textAlign: "right",
+    paddingLeft: 0,
+    paddingRight: Spacing.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"
+  }
+});
+
 var propTransform$4 = widgetOptions => {
   var {
     simplify,
@@ -23426,7 +23470,7 @@ class NumericInput extends React.Component {
       var answerBlurb;
       /* Ignore this block because SAT is deprecated */
 
-      /* istanbul ignore next */
+      /* c8 ignore next */
 
       if (this.props.apiOptions.satStyling && rubric) {
         var score = this.simpleValidate(rubric);
@@ -23525,17 +23569,17 @@ class NumericInput extends React.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);
@@ -23718,7 +23762,10 @@ class NumericInput extends React.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.
+
 
     var styles = StyleSheet.create({
       input: {
@@ -23744,7 +23791,7 @@ class NumericInput extends React.Component {
     });
     /* This only gets used with SAT Content */
 
-    /* istanbul ignore next if */
+    /* c8 ignore next if */
 
     if (answerBlurb) {
       return /*#__PURE__*/React.createElement("span", {
@@ -26976,8 +27023,8 @@ function LibraryChoiceIcon(props) {
   }, /*#__PURE__*/React.createElement("div", {
     style: dynamicStyles,
     "data-test-id": "choice-icon__library-choice-icon",
-    className: 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: 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.createElement("div", {
@@ -27403,7 +27450,8 @@ function Choice(props) {
     disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
     style: {
       flex: 1,
-      color: Color.offBlack
+      color: Color.offBlack,
+      userSelect: "text"
     },
     ref: forwardedRef,
     "aria-hidden": "true"
@@ -27763,7 +27811,7 @@ function BaseRadio(props) {
     style: {
       listStyle: "none"
     }
-  }, choices.map(function (choice, i) {
+  }, choices.map((choice, i) => {
     var Element = Choice$1;
     var ref = /*#__PURE__*/React.createRef();
     choiceRefs.current[i] = ref;
@@ -27782,6 +27830,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
@@ -27839,7 +27892,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
             });
@@ -27863,7 +27916,7 @@ function BaseRadio(props) {
       onClick: clickHandler,
       onTouchStart: !labelWrap ? null : captureScratchpadTouchStart$2
     }, /*#__PURE__*/React.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.
 
@@ -28209,7 +28262,7 @@ class Radio$1 extends React.Component {
         noneOfTheAboveSelected
       }; // Support legacy choiceState implementation
     }
-    /* istanbul ignore if - props.values is deprecated */
+    /* c8 ignore if - props.values is deprecated */
 
 
     var {
@@ -28304,7 +28357,7 @@ class Radio$1 extends React.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,
@@ -28687,7 +28740,7 @@ _defineProperty(Categorizer, "defaultProps", {
 
 var pageMargin = 16; // Stylesheets aren't directly testable
 
-/* istanbul ignore next */
+/* c8 ignore next */
 
 var styles$m = StyleSheet.create({
   mobileTable: {