@khanacademy/perseus 1.3.4 → 1.3.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/perseus
 
+## 1.3.6
+
+### Patch Changes
+
+-   859d3c28: Fixes styling of input-number when answer is incorrect in review mode
+
+## 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

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.
@@ -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() {},
@@ -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 === true && this.props.currentValue) {
+      inputStyles.push(styles$z.answerStateCorrect);
+    } // Incorrect
+
+
+    if (rubric && correct === false && 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(),
@@ -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,
@@ -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: {
@@ -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"