@khanacademy/perseus 1.2.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/perseus
 
+## 1.3.1
+
+### Patch Changes
+
+-   9b3bf30f: CSS bug fixes for SAT Radio widget
+-   Updated dependencies [113953e8]
+    -   @khanacademy/math-input@0.6.4
+
+## 1.3.0
+
+### Minor Changes
+
+-   e783be76: Fix passage fonts because content depends on it being an exact size
+
+### Patch Changes
+
+-   ec92d308: Fix bug with Passage where line numbers stopped abruptly
+-   dd55b5e4: Update gutter line numbers in passage
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/es/index.css

@@ -3070,11 +3070,11 @@ body.mobile .perseus-matrix .math-output {
   margin: 0 0 10px;
 }
 .perseus-widget-passage-container .passage-text div.paragraph {
-  font-family: "Noto Serif", serif;
   font-weight: 400;
-  font-size: 20px;
-  line-height: 24px;
+  font-size: 16px;
+  line-height: 20px;
   text-indent: 20px;
+  margin: 0;
 }
 .perseus-widget-passage-container .passage-text div.paragraph span {
   text-indent: 0;

package/dist/es/index.js

@@ -25344,10 +25344,6 @@ var styles$w = StyleSheet.create({
   }
 });
 
-var getLineHeightForNode = (line1, line2) => {
-  return $(line2).offset().top - $(line1).offset().top;
-};
-
 function getInitialParseState() {
   return {
     currentRef: [],
@@ -25716,65 +25712,40 @@ var PassageMarkdown = {
   getInitialParseState
 };
 
-// A fake paragraph to measure the line height of the passage. In CSS we always
-// set the line height to 22 pixels, but when using the browser zoom feature,
-// the line height often ends up being a fractional number of pixels close to
-// 22 pixels.
+// A fake paragraph to measure the line height of the passage,
+// so we can adapt to browser zoom
 class LineHeightMeasurer extends React.Component {
   constructor() {
     super(...arguments);
 
-    _defineProperty(this, "_cachedLineHeight", void 0);
-
-    _defineProperty(this, "body", void 0);
-
-    _defineProperty(this, "end", void 0);
+    _defineProperty(this, "_line", void 0);
   }
 
   measureLineHeight() {
-    if (typeof this._cachedLineHeight !== "number") {
-      this.forceMeasureLineHeight();
+    if (!this._line) {
+      return 0;
     }
 
-    return this._cachedLineHeight;
-  }
-
-  forceMeasureLineHeight() {
-    var body = this.body;
-    var end = this.end;
-
-    if (!body || !end) {
-      return;
-    } // Add some text which magically fills an entire line.
-
-
-    body.textContent = " \u0080"; // Now, the line height is the difference between the top of the
-    // second line and the top of the first line.
-
-    this._cachedLineHeight = getLineHeightForNode(body, end); // Clear out the first line so it doesn't overlap the passage.
-
-    body.textContent = "";
+    return this._line.clientHeight;
   }
 
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$v.measurer)
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      ref: _ref => this.body = _ref,
+      className: css(styles$v.measurer),
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: _ref => this._line = _ref,
       className: "paragraph"
-    }), /*#__PURE__*/React.createElement("div", {
-      ref: _ref2 => this.end = _ref2
-    })));
+    }, "Line Height Measurement"));
   }
 
 }
-
 var styles$v = StyleSheet.create({
   measurer: {
     position: "absolute",
-    width: "100%",
     top: 0,
     left: 0,
+    visibility: "hidden",
     // keep from blocking text selection
     zIndex: -1
   }
@@ -25821,7 +25792,7 @@ class Passage extends React.Component {
       // listen for resize events.
 
 
-      (_this$_lineHeightMeas = this._lineHeightMeasurerRef) === null || _this$_lineHeightMeas === void 0 ? void 0 : _this$_lineHeightMeas.forceMeasureLineHeight();
+      (_this$_lineHeightMeas = this._lineHeightMeasurerRef) === null || _this$_lineHeightMeas === void 0 ? void 0 : _this$_lineHeightMeas.measureLineHeight();
 
       this._updateState();
     }, 500);
@@ -26115,9 +26086,9 @@ class Passage extends React.Component {
       onSerializedHighlightsUpdate: this._handleSerializedHighlightsUpdate,
       serializedHighlights: this.props.highlights
     }, /*#__PURE__*/React.createElement("div", {
-      ref: _ref4 => this._contentRef = _ref4
+      ref: _ref3 => this._contentRef = _ref3
     }, /*#__PURE__*/React.createElement(LineHeightMeasurer, {
-      ref: _ref3 => this._lineHeightMeasurerRef = _ref3
+      ref: _ref2 => this._lineHeightMeasurerRef = _ref2
     }), PassageMarkdown.output(parsed)));
   }
 
@@ -27377,7 +27348,7 @@ function Choice(props) {
 
   var satCorrectChoice = apiOptions.satStyling && reviewMode && correct;
   var satIncorrectChecked = apiOptions.satStyling && reviewMode && !correct && checked;
-  var descriptionClassName = classNames("description", satCorrectChoice && "sat-correct", satIncorrectChecked && "sat-incorrect", css(!apiOptions.satStyling && styles$o.description, apiOptions.satStyling && styles$o.satDescription, satCorrectChoice && styles$o.satDescriptionCorrect, satCorrectChoice && checked && styles$o.satDescriptionCorrectChecked, satIncorrectChecked && styles$o.satDescriptionIncorrectChecked));
+  var descriptionClassName = classNames("description", satCorrectChoice && "sat-correct", satIncorrectChecked && "sat-incorrect", css(!apiOptions.satStyling && styles$o.description, apiOptions.satStyling && styles$o.satDescription, satCorrectChoice && checked && styles$o.satDescriptionCorrectChecked, satIncorrectChecked && styles$o.satDescriptionIncorrectChecked));
   var rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$o.rationale, !apiOptions.satStyling && styles$o.nonSatRationale, apiOptions.satStyling && styles$o.satReviewRationale)); // We want to show the choices as dimmed out when the choices are
   // disabled. However, we don't want to do this in the SAT product and
   // we also don't want to do this when we're in review mode in the
@@ -27391,12 +27362,12 @@ function Choice(props) {
     style: {
       dispay: "flex",
       flexDirection: "column"
-    }
+    },
+    className: descriptionClassName
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "row",
-      width: "100%",
       opacity: showDimmed ? 0.5 : 1.0
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -27415,7 +27386,8 @@ function Choice(props) {
     },
     onChange: () => {},
     disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
-    tabIndex: -1
+    tabIndex: -1,
+    className: ClassNames.RADIO.OPTION_CONTENT
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: choiceId
   }, a11yText, " \xA0 ", content)), /*#__PURE__*/React.createElement(Clickable, {
@@ -27427,7 +27399,6 @@ function Choice(props) {
         crossedOut: false
       });
     },
-    className: descriptionClassName,
     disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
     style: {
       flex: 1
@@ -27560,16 +27531,12 @@ var styles$o = StyleSheet.create({
     boxSizing: "border-box",
     cursor: "pointer",
     marginLeft: 0,
-    padding: "17px 14px"
-  },
-  satDescriptionCorrect: {
-    color: satCorrectColor
+    padding: "17px 14px 17px 0"
   },
   satDescriptionCorrectChecked: {
     backgroundColor: satCorrectBackgroundColor
   },
   satDescriptionIncorrectChecked: {
-    color: satIncorrectColor,
     backgroundColor: satIncorrectBackgroundColor
   },
   rationale: {
@@ -27923,8 +27890,7 @@ var styles$n = StyleSheet.create({
     }
   },
   radio: {
-    // Avoid centering
-    width: "100%"
+    padding: 0
   },
   responsiveRadioContainer: {
     borderBottom: "1px solid ".concat(radioBorderColor$1),
@@ -28153,6 +28119,129 @@ class Radio$1 extends React.Component {
     });
   }
 
+  static validate(userInput, rubric) {
+    var numSelected = userInput.choicesSelected.reduce((sum, selected) => {
+      return sum + (selected ? 1 : 0);
+    }, 0);
+
+    if (numSelected === 0) {
+      return {
+        type: "invalid",
+        message: null
+      };
+    }
+
+    if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
+      return {
+        type: "invalid",
+        message: i18n._("Please choose the correct number of answers.")
+      }; // If NOTA and some other answer are checked, ...
+    }
+
+    if (userInput.noneOfTheAboveSelected && numSelected > 1) {
+      return {
+        type: "invalid",
+        message: i18n._("'None of the above' may not be selected " + "when other answers are selected.")
+      };
+    }
+
+    var correct = userInput.choicesSelected.every((selected, i) => {
+      var isCorrect;
+
+      if (userInput.noneOfTheAboveIndex === i) {
+        isCorrect = rubric.choices.every((choice, j) => {
+          return i === j || !choice.correct;
+        });
+      } else {
+        isCorrect = !!rubric.choices[i].correct;
+      }
+
+      return isCorrect === selected;
+    });
+    return {
+      type: "points",
+      earned: correct ? 1 : 0,
+      total: 1,
+      message: null
+    };
+  }
+
+  static getUserInputFromProps(props) {
+    // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
+    // future timeline implementers: this used to be {value: i} before
+    // multiple select was added)
+    if (props.choiceStates) {
+      var noneOfTheAboveIndex = null;
+      var noneOfTheAboveSelected = false;
+      var choiceStates = props.choiceStates;
+      var choicesSelected = choiceStates.map(() => false);
+      var countChoices = props.countChoices;
+      var numCorrect = props.numCorrect;
+
+      for (var i = 0; i < choicesSelected.length; i++) {
+        var index = props.choices[i].originalIndex;
+        choicesSelected[index] = choiceStates[i].selected;
+
+        if (props.choices[i].isNoneOfTheAbove) {
+          noneOfTheAboveIndex = index;
+
+          if (choicesSelected[i]) {
+            noneOfTheAboveSelected = true;
+          }
+        }
+      }
+
+      return {
+        countChoices,
+        choicesSelected,
+        numCorrect,
+        noneOfTheAboveIndex,
+        noneOfTheAboveSelected
+      }; // Support legacy choiceState implementation
+    }
+    /* istanbul ignore if - props.values is deprecated */
+
+
+    var {
+      values
+    } = props;
+
+    if (values) {
+      var _noneOfTheAboveIndex = null;
+      var _noneOfTheAboveSelected = false;
+      var _choicesSelected = [...values];
+      var _countChoices = props.countChoices;
+      var _numCorrect = props.numCorrect;
+      var valuesLength = values.length;
+
+      for (var _i = 0; _i < valuesLength; _i++) {
+        var _index = props.choices[_i].originalIndex;
+        _choicesSelected[_index] = values[_i];
+
+        if (props.choices[_i].isNoneOfTheAbove) {
+          _noneOfTheAboveIndex = _index;
+
+          if (_choicesSelected[_i]) {
+            _noneOfTheAboveSelected = true;
+          }
+        }
+      }
+
+      return {
+        choicesSelected: _choicesSelected,
+        noneOfTheAboveIndex: _noneOfTheAboveIndex,
+        noneOfTheAboveSelected: _noneOfTheAboveSelected,
+        countChoices: _countChoices,
+        numCorrect: _numCorrect
+      };
+    } // Nothing checked
+
+
+    return {
+      choicesSelected: props.choices.map(() => false)
+    };
+  }
+
   // TODO(LP-10672): I think this might be unused right now. I can't find anywhere
   // that we pass a value to `.focus()` and it seems to have been used for
   // adding hints when editing.
@@ -28283,129 +28372,6 @@ class Radio$1 extends React.Component {
     });
   }
 
-  static validate(userInput, rubric) {
-    var numSelected = userInput.choicesSelected.reduce((sum, selected) => {
-      return sum + (selected ? 1 : 0);
-    }, 0);
-
-    if (numSelected === 0) {
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-
-    if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
-      return {
-        type: "invalid",
-        message: i18n._("Please choose the correct number of answers.")
-      }; // If NOTA and some other answer are checked, ...
-    }
-
-    if (userInput.noneOfTheAboveSelected && numSelected > 1) {
-      return {
-        type: "invalid",
-        message: i18n._("'None of the above' may not be selected " + "when other answers are selected.")
-      };
-    }
-
-    var correct = userInput.choicesSelected.every((selected, i) => {
-      var isCorrect;
-
-      if (userInput.noneOfTheAboveIndex === i) {
-        isCorrect = rubric.choices.every((choice, j) => {
-          return i === j || !choice.correct;
-        });
-      } else {
-        isCorrect = !!rubric.choices[i].correct;
-      }
-
-      return isCorrect === selected;
-    });
-    return {
-      type: "points",
-      earned: correct ? 1 : 0,
-      total: 1,
-      message: null
-    };
-  }
-
-  static getUserInputFromProps(props) {
-    // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
-    // future timeline implementers: this used to be {value: i} before
-    // multiple select was added)
-    if (props.choiceStates) {
-      var noneOfTheAboveIndex = null;
-      var noneOfTheAboveSelected = false;
-      var choiceStates = props.choiceStates;
-      var choicesSelected = choiceStates.map(() => false);
-      var countChoices = props.countChoices;
-      var numCorrect = props.numCorrect;
-
-      for (var i = 0; i < choicesSelected.length; i++) {
-        var index = props.choices[i].originalIndex;
-        choicesSelected[index] = choiceStates[i].selected;
-
-        if (props.choices[i].isNoneOfTheAbove) {
-          noneOfTheAboveIndex = index;
-
-          if (choicesSelected[i]) {
-            noneOfTheAboveSelected = true;
-          }
-        }
-      }
-
-      return {
-        countChoices,
-        choicesSelected,
-        numCorrect,
-        noneOfTheAboveIndex,
-        noneOfTheAboveSelected
-      }; // Support legacy choiceState implementation
-    }
-    /* istanbul ignore if - props.values is deprecated */
-
-
-    var {
-      values
-    } = props;
-
-    if (values) {
-      var _noneOfTheAboveIndex = null;
-      var _noneOfTheAboveSelected = false;
-      var _choicesSelected = [...values];
-      var _countChoices = props.countChoices;
-      var _numCorrect = props.numCorrect;
-      var valuesLength = values.length;
-
-      for (var _i = 0; _i < valuesLength; _i++) {
-        var _index = props.choices[_i].originalIndex;
-        _choicesSelected[_index] = values[_i];
-
-        if (props.choices[_i].isNoneOfTheAbove) {
-          _noneOfTheAboveIndex = _index;
-
-          if (_choicesSelected[_i]) {
-            _noneOfTheAboveSelected = true;
-          }
-        }
-      }
-
-      return {
-        choicesSelected: _choicesSelected,
-        noneOfTheAboveIndex: _noneOfTheAboveIndex,
-        noneOfTheAboveSelected: _noneOfTheAboveSelected,
-        countChoices: _countChoices,
-        numCorrect: _numCorrect
-      };
-    } // Nothing checked
-
-
-    return {
-      choicesSelected: props.choices.map(() => false)
-    };
-  }
-
 }
 
 _defineProperty(Radio$1, "defaultProps", {