@khanacademy/perseus 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @khanacademy/perseus
 
+## 1.1.1
+
+### Patch Changes
+
+-   5b86aba4: bugfix: add size and rightAlign back to numeric-input widget
+-   5b86aba4: bugfix for Matrix styles not getting passed through
+-   6b48ca35: A tiny change that adds some aria labels to our message container so that the content will be read to screen readers upon update.
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/es/index.css

@@ -2893,10 +2893,12 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
 .perseus-matrix .matrix-bracket.bracket-left {
   border-color: #666;
   border-left-width: 2px;
+  border-right-width: 0;
   left: 3px;
 }
 .perseus-matrix .matrix-bracket.bracket-right {
   border-color: #666;
+  border-left-width: 0;
   border-right-width: 2px;
   margin-left: -3px;
 }

package/dist/es/index.js

@@ -21698,13 +21698,15 @@ class TextInput extends React.Component {
       onBlur,
       disabled,
       placeholder,
-      onKeyDown
+      onKeyDown,
+      style
     } = this.props;
     var formattedValue = value === null ? "" : value.toString();
     return (
       /*#__PURE__*/
       // $FlowIgnore
       React.createElement(TextField, {
+        style: style,
         disabled: disabled,
         id: this.id,
         value: formattedValue,
@@ -22102,7 +22104,8 @@ class InputWithExamples extends React.Component {
         value: this.props.value,
         onFocus: this._handleFocus,
         onBlur: this._handleBlur,
-        disabled: this.props.disabled
+        disabled: this.props.disabled,
+        style: this.props.style
       };
 
       if (this.props.type === TEX) {
@@ -22236,32 +22239,14 @@ class InputWithExamples extends React.Component {
 
 }
 
-_defineProperty(InputWithExamples, "propTypes", {
-  type: PropTypes.oneOf([MATH, TEXT, TEX]),
-  value: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  examples: PropTypes.arrayOf(PropTypes.string).isRequired,
-  shouldShowExamples: PropTypes.bool,
-  convertDotToTimes: PropTypes.bool,
-  buttonSet: PropTypes.string,
-  buttonsVisible: PropTypes.oneOf(["always", "never", "focused"]),
-  labelText: PropTypes.string,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  disabled: PropTypes.bool,
-  // A unique string identifying this InputWithExamples
-  id: PropTypes.string.isRequired,
-  linterContext: PerseusLinter.linterContextProps
-});
-
 _defineProperty(InputWithExamples, "defaultProps", {
   type: TEXT,
   shouldShowExamples: true,
   onFocus: function onFocus() {},
   onBlur: function onBlur() {},
   disabled: false,
-  linterContext: PerseusLinter.linterContextDefault
+  linterContext: PerseusLinter.linterContextDefault,
+  className: ""
 });
 
 /**
@@ -23696,7 +23681,6 @@ class NumericInput extends React.Component {
     var rubric = this.props.reviewModeRubric;
     var answers = this.getAnswerBlurb(rubric);
     var answerBlurb = answers[0];
-    var classes = [];
     var labelText = this.props.labelText;
 
     if (labelText == null || labelText === "") {
@@ -23722,11 +23706,18 @@ class NumericInput extends React.Component {
       }));
     }
 
+    var styles = StyleSheet.create({
+      input: {
+        textAlign: this.props.rightAlign ? "right" : "left",
+        width: this.props.size === "small" ? 40 : 80,
+        padding: 0,
+        height: "auto"
+      }
+    });
     var input = /*#__PURE__*/React.createElement(InputWithExamples, {
       ref: _ref2 => this.inputRef = _ref2,
       value: this.props.currentValue,
       onChange: this.handleChange,
-      className: classNames(classes),
       labelText: labelText,
       type: this._getInputType(),
       examples: this.examples(),
@@ -23734,9 +23725,8 @@ class NumericInput extends React.Component {
       onFocus: this._handleFocus,
       onBlur: this._handleBlur,
       id: this.props.widgetId,
-      disabled: this.props.apiOptions.readOnly // $FlowFixMe[prop-missing]
-      ,
-      highlightLint: this.props.highlightLint
+      disabled: this.props.apiOptions.readOnly,
+      style: styles.input
     });
     /* This only gets used with SAT Content */
 
@@ -27386,7 +27376,10 @@ class GradedGroup$1 extends React.Component {
       className: css(a11y.srOnly),
       role: "alert",
       "aria-label": gradeStatus
-    }, gradeStatus), !apiOptions.isMobile && /*#__PURE__*/React.createElement("p", null, this.state.message), !apiOptions.isMobile && /*#__PURE__*/React.createElement(Button, {
+    }, gradeStatus), !apiOptions.isMobile && /*#__PURE__*/React.createElement("p", {
+      role: "status",
+      "aria-live": "polite"
+    }, this.state.message), !apiOptions.isMobile && /*#__PURE__*/React.createElement(Button, {
       kind: "secondary",
       disabled: this.props.apiOptions.readOnly,
       onClick: this._checkAnswer
@@ -36776,7 +36769,18 @@ class Matrix extends React.Component {
         } else if (this.props.numericInput) {
           MatrixInput = /*#__PURE__*/React.createElement(NumberInput, inputProps);
         } else {
-          MatrixInput = /*#__PURE__*/React.createElement(TextInput, inputProps);
+          var updatedProps = _objectSpread2(_objectSpread2({}, inputProps), {}, {
+            style: StyleSheet.create({
+              // eslint-disable-next-line react-native/no-unused-styles
+              input: _objectSpread2(_objectSpread2({}, inputProps.style), {}, {
+                display: "inline-block",
+                padding: 0,
+                backgroundColor: outside ? "#f3f3f3" : "#fff"
+              })
+            }).input
+          });
+
+          MatrixInput = /*#__PURE__*/React.createElement(TextInput, updatedProps);
         }
 
         return /*#__PURE__*/React.createElement("span", {