@khanacademy/perseus 27.0.0 → 27.0.2

package/dist/es/index.js

@@ -501,7 +501,6 @@ class InnerMathInput extends React.Component {
     }), /*#__PURE__*/React.createElement(Popover, {
       opened: this.state.keypadOpen,
       onClose: () => this.closeKeypad(),
-      portal: false,
       dismissEnabled: true,
       content: () => {
         var _this$props$keypadBut, _this$props;
@@ -25035,6 +25034,7 @@ class Explanation extends React.Component {
     this.state = {
       expanded: false
     };
+    this._mounted = false;
     this.change = (...args) => {
       return change.apply(this, args);
     };
@@ -25059,10 +25059,16 @@ class Explanation extends React.Component {
       message: null
     };
   }
+  componentDidMount() {
+    this._mounted = true;
+  }
+  componentWillUnmount() {
+    this._mounted = false;
+  }
   render() {
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
     const caretIcon = this.state.expanded ? caretUp : caretDown;
-    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.
@@ -35902,6 +35908,10 @@ const styles$f = StyleSheet.create({
 });
 
 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;
 }
@@ -35911,6 +35921,13 @@ class Marker extends React.Component {
     super(...args);
     // The marker icon element.
     this._icon = void 0;
+    this._mounted = false;
+  }
+  componentDidMount() {
+    this._mounted = true;
+  }
+  componentWillUnmount() {
+    this._mounted = false;
   }
   renderIcon() {
     const {
@@ -35952,7 +35969,7 @@ class Marker extends React.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.createElement(View, {
       style: [styles$e.markerIcon, iconStyles],
@@ -36314,6 +36331,7 @@ class LabelImage extends React.Component {
     super(props);
     // The rendered markers on the question image for labeling.
     this._markers = void 0;
+    this._mounted = false;
     this._markers = [];
     this.state = {
       activeMarkerIndex: -1,
@@ -36321,6 +36339,12 @@ class LabelImage extends React.Component {
       hideAnswers: false
     };
   }
+  componentDidMount() {
+    this._mounted = true;
+  }
+  componentWillUnmount() {
+    this._mounted = false;
+  }
   simpleValidate(rubric) {
     return LabelImage.validate(this.getUserInput(), rubric);
   }
@@ -36457,13 +36481,14 @@ class LabelImage extends React.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
@@ -44089,7 +44114,7 @@ const init = function init(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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {