@khanacademy/perseus 27.0.0 → 27.0.2

package/dist/index.js

@@ -618,7 +618,6 @@ class InnerMathInput extends React__namespace.Component {
     }), /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
       opened: this.state.keypadOpen,
       onClose: () => this.closeKeypad(),
-      portal: false,
       dismissEnabled: true,
       content: () => /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
         closeButtonVisible: true,
@@ -25296,6 +25295,13 @@ class Explanation extends React__namespace.Component {
   state = {
     expanded: false
   };
+  _mounted = false;
+  componentDidMount() {
+    this._mounted = true;
+  }
+  componentWillUnmount() {
+    this._mounted = false;
+  }
   change = (() => {
     var _this = this;
     return function () {
@@ -25314,7 +25320,7 @@ class Explanation extends React__namespace.Component {
   render() {
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
     const caretIcon = this.state.expanded ? caretUp__default["default"] : caretDown__default["default"];
-    const allowTransition = mediaQueryIsMatched("(prefers-reduced-motion: no-preference)");
+    const allowTransition = this._mounted && mediaQueryIsMatched("(prefers-reduced-motion: no-preference)");
 
     // Special styling is needed to fit the button in a block of text without throwing off the line spacing.
     // While the button is not normally included in a block of text, it needs to be able to accommodate such a case.
@@ -36250,6 +36256,10 @@ const styles$f = aphrodite.StyleSheet.create({
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 function shouldReduceMotion() {
+  // We cannot use matchMedia during SSR.
+  if (typeof window.matchMedia !== "function") {
+    return true;
+  }
   const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
   return !mediaQuery || mediaQuery.matches;
 }
@@ -36258,9 +36268,16 @@ class Marker extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   // The marker icon element.
   _icon;
+  _mounted = false;
   static defaultProps = {
     selected: []
   };
+  componentDidMount() {
+    this._mounted = true;
+  }
+  componentWillUnmount() {
+    this._mounted = false;
+  }
   renderIcon() {
     const {
       selected,
@@ -36303,7 +36320,7 @@ class Marker extends React__namespace.Component {
         size: 8
       };
     } else if (showPulsate) {
-      iconStyles = [styles$e.markerPulsateBase, shouldReduceMotion() ? showPulsate && styles$e.markerUnfilledPulsateOnce : showPulsate && styles$e.markerUnfilledPulsateInfinite];
+      iconStyles = [styles$e.markerPulsateBase, this._mounted && shouldReduceMotion() ? showPulsate && styles$e.markerUnfilledPulsateOnce : showPulsate && styles$e.markerUnfilledPulsateInfinite];
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: [styles$e.markerIcon, iconStyles],
@@ -36431,6 +36448,7 @@ class LabelImage extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   // The rendered markers on the question image for labeling.
   _markers;
+  _mounted = false;
   static gradeMarker(marker) {
     const score = {
       hasAnswers: false,
@@ -36668,6 +36686,12 @@ class LabelImage extends React__namespace.Component {
       hideAnswers: false
     };
   }
+  componentDidMount() {
+    this._mounted = true;
+  }
+  componentWillUnmount() {
+    this._mounted = false;
+  }
   simpleValidate(rubric) {
     return LabelImage.validate(this.getUserInput(), rubric);
   }
@@ -36806,13 +36830,14 @@ class LabelImage extends React__namespace.Component {
       markersInteracted
     } = this.state;
 
+    // Determine whether page is rendered in a narrow browser window.
+    const isNarrowPage = this._mounted && window.matchMedia(mediaQueries.xsOrSmaller.replace("@media ", "")).matches;
+
+    // Determine whether the image is wider than it is tall.
+    const isWideImage = this.props.imageWidth / 2 > this.props.imageHeight;
+
     // Render all markers for widget.
     return markers.map((marker, index) => {
-      // Determine whether page is rendered in a narrow browser window.
-      const isNarrowPage = window.matchMedia(mediaQueries.xsOrSmaller.replace("@media ", "")).matches;
-
-      // Determine whether the image is wider than it is tall.
-      const isWideImage = this.props.imageWidth / 2 > this.props.imageHeight;
       let side;
       let markerPosition;
       // Position popup closest to the center, preferring it renders
@@ -44445,7 +44470,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "27.0.0";
+const libVersion = "27.0.2";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {