@khanacademy/perseus 1.2.0 → 1.3.1

package/dist/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/index.js

@@ -25242,10 +25242,6 @@ const styles$w = aphrodite.StyleSheet.create({
   }
 });
 
-const getLineHeightForNode = (line1, line2) => {
-  return $__default["default"](line2).offset().top - $__default["default"](line1).offset().top;
-};
-
 function getInitialParseState() {
   return {
     currentRef: [],
@@ -25613,65 +25609,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__namespace.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() {
-    const body = this.body;
-    const 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__namespace.createElement("div", {
-      className: aphrodite.css(styles$v.measurer)
-    }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      ref: ref => this.body = ref,
+      className: aphrodite.css(styles$v.measurer),
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      ref: ref => this._line = ref,
       className: "paragraph"
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      ref: ref => this.end = ref
-    })));
+    }, "Line Height Measurement"));
   }
 
 }
-
 const styles$v = aphrodite.StyleSheet.create({
   measurer: {
     position: "absolute",
-    width: "100%",
     top: 0,
     left: 0,
+    visibility: "hidden",
     // keep from blocking text selection
     zIndex: -1
   }
@@ -25718,7 +25689,7 @@ class Passage extends React__namespace.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);
@@ -27273,7 +27244,7 @@ function Choice(props) {
 
   const satCorrectChoice = apiOptions.satStyling && reviewMode && correct;
   const satIncorrectChecked = apiOptions.satStyling && reviewMode && !correct && checked;
-  const descriptionClassName = classNames__default["default"]("description", satCorrectChoice && "sat-correct", satIncorrectChecked && "sat-incorrect", aphrodite.css(!apiOptions.satStyling && styles$o.description, apiOptions.satStyling && styles$o.satDescription, satCorrectChoice && styles$o.satDescriptionCorrect, satCorrectChoice && checked && styles$o.satDescriptionCorrectChecked, satIncorrectChecked && styles$o.satDescriptionIncorrectChecked));
+  const descriptionClassName = classNames__default["default"]("description", satCorrectChoice && "sat-correct", satIncorrectChecked && "sat-incorrect", aphrodite.css(!apiOptions.satStyling && styles$o.description, apiOptions.satStyling && styles$o.satDescription, satCorrectChoice && checked && styles$o.satDescriptionCorrectChecked, satIncorrectChecked && styles$o.satDescriptionIncorrectChecked));
   const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.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
@@ -27287,12 +27258,12 @@ function Choice(props) {
     style: {
       dispay: "flex",
       flexDirection: "column"
-    }
+    },
+    className: descriptionClassName
   }, /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "row",
-      width: "100%",
       opacity: showDimmed ? 0.5 : 1.0
     }
   }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -27311,7 +27282,8 @@ function Choice(props) {
     },
     onChange: () => {},
     disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
-    tabIndex: -1
+    tabIndex: -1,
+    className: ClassNames.RADIO.OPTION_CONTENT
   }), /*#__PURE__*/React__namespace.createElement("label", {
     htmlFor: choiceId
   }, a11yText, " \xA0 ", content)), /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
@@ -27323,7 +27295,6 @@ function Choice(props) {
         crossedOut: false
       });
     },
-    className: descriptionClassName,
     disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
     style: {
       flex: 1
@@ -27456,16 +27427,12 @@ const styles$o = aphrodite.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: {
@@ -27815,8 +27782,7 @@ const styles$n = aphrodite.StyleSheet.create({
     }
   },
   radio: {
-    // Avoid centering
-    width: "100%"
+    padding: 0
   },
   responsiveRadioContainer: {
     borderBottom: "1px solid ".concat(radioBorderColor$1),
@@ -28046,6 +28012,129 @@ class Radio$1 extends React__namespace.Component {
     });
   }
 
+  static validate(userInput, rubric) {
+    const 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__namespace._("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__namespace._("'None of the above' may not be selected " + "when other answers are selected.")
+      };
+    }
+
+    const correct = userInput.choicesSelected.every((selected, i) => {
+      let 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) {
+      let noneOfTheAboveIndex = null;
+      let noneOfTheAboveSelected = false;
+      const choiceStates = props.choiceStates;
+      const choicesSelected = choiceStates.map(() => false);
+      const countChoices = props.countChoices;
+      const numCorrect = props.numCorrect;
+
+      for (let i = 0; i < choicesSelected.length; i++) {
+        const 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 */
+
+
+    const {
+      values
+    } = props;
+
+    if (values) {
+      let noneOfTheAboveIndex = null;
+      let noneOfTheAboveSelected = false;
+      const choicesSelected = [...values];
+      const countChoices = props.countChoices;
+      const numCorrect = props.numCorrect;
+      const valuesLength = values.length;
+
+      for (let i = 0; i < valuesLength; i++) {
+        const index = props.choices[i].originalIndex;
+        choicesSelected[index] = values[i];
+
+        if (props.choices[i].isNoneOfTheAbove) {
+          noneOfTheAboveIndex = index;
+
+          if (choicesSelected[i]) {
+            noneOfTheAboveSelected = true;
+          }
+        }
+      }
+
+      return {
+        choicesSelected,
+        noneOfTheAboveIndex,
+        noneOfTheAboveSelected,
+        countChoices,
+        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.
@@ -28176,129 +28265,6 @@ class Radio$1 extends React__namespace.Component {
     });
   }
 
-  static validate(userInput, rubric) {
-    const 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__namespace._("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__namespace._("'None of the above' may not be selected " + "when other answers are selected.")
-      };
-    }
-
-    const correct = userInput.choicesSelected.every((selected, i) => {
-      let 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) {
-      let noneOfTheAboveIndex = null;
-      let noneOfTheAboveSelected = false;
-      const choiceStates = props.choiceStates;
-      const choicesSelected = choiceStates.map(() => false);
-      const countChoices = props.countChoices;
-      const numCorrect = props.numCorrect;
-
-      for (let i = 0; i < choicesSelected.length; i++) {
-        const 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 */
-
-
-    const {
-      values
-    } = props;
-
-    if (values) {
-      let noneOfTheAboveIndex = null;
-      let noneOfTheAboveSelected = false;
-      const choicesSelected = [...values];
-      const countChoices = props.countChoices;
-      const numCorrect = props.numCorrect;
-      const valuesLength = values.length;
-
-      for (let i = 0; i < valuesLength; i++) {
-        const index = props.choices[i].originalIndex;
-        choicesSelected[index] = values[i];
-
-        if (props.choices[i].isNoneOfTheAbove) {
-          noneOfTheAboveIndex = index;
-
-          if (choicesSelected[i]) {
-            noneOfTheAboveSelected = true;
-          }
-        }
-      }
-
-      return {
-        choicesSelected,
-        noneOfTheAboveIndex,
-        noneOfTheAboveSelected,
-        countChoices,
-        numCorrect
-      };
-    } // Nothing checked
-
-
-    return {
-      choicesSelected: props.choices.map(() => false)
-    };
-  }
-
 }
 
 _defineProperty(Radio$1, "defaultProps", {