@khanacademy/perseus 1.3.4 → 1.3.6

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.
@@ -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 () {},
@@ -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 === 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);
     }
 
-    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(),
@@ -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,
@@ -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: {
@@ -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"