@khanacademy/perseus 32.0.0 → 32.0.1

package/dist/es/index.js

@@ -3161,45 +3161,6 @@ function constrainedTickStepsFromTickSteps(tickSteps, ranges) {
   return [constrainTickStep(tickSteps[0], ranges[0]), constrainTickStep(tickSteps[1], ranges[1])];
 }
 
-/**
- * Transparently update deprecated props so that the code to deal
- * with them only lives in one place: (Widget).deprecatedProps
- *
- * For example, if a boolean `foo` was deprecated in favor of a
- * number 'bar':
- *      deprecatedProps: {
- *          foo: function(props) {
- *              return {bar: props.foo ? 1 : 0};
- *          }
- *      }
- */
-const DeprecationMixin$1 = {
-  // This lifecycle stage is only called before first render
-  // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
-  UNSAFE_componentWillMount: function () {
-    const newProps = {};
-    _.each(this.deprecatedProps, function (func, prop) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (_.has(this.props, prop)) {
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        _.extend(newProps, func(this.props));
-      }
-    }, this);
-    if (!_.isEmpty(newProps)) {
-      // Set new props directly so that widget renders correctly
-      // when it first mounts, even though these will be overwritten
-      // almost immediately afterwards...
-      _.extend(this.props, newProps);
-
-      // ...when we propagate the new props upwards and they come
-      // back down again.
-      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-      // eslint-disable-next-line no-restricted-syntax
-      setTimeout(this.props.onChange, 0, newProps);
-    }
-  }
-};
-
 /**
  * Approximate equality on numbers and primitives.
  */
@@ -3547,7 +3508,6 @@ const Util = {
   gridStepFromTickStep,
   tickStepFromNumTicks,
   constrainedTickStepsFromTickSteps,
-  DeprecationMixin: DeprecationMixin$1,
   eq: eq$3,
   deepEq: deepEq$5,
   parseQueryString,
@@ -33316,9 +33276,6 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 
-const {
-  DeprecationMixin
-} = Util;
 const TRASH_ICON_URI = "https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png";
 const defaultBackgroundImage = {
   url: null
@@ -33347,13 +33304,6 @@ function capitalize(str) {
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
-const deprecatedProps = {
-  showGraph: function (props) {
-    return {
-      markings: props.showGraph ? "graph" : "none"
-    };
-  }
-};
 const _getShouldShowInstructions = props => {
   return _isClickToAddPoints(props) && (
   // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
@@ -33406,7 +33356,6 @@ class LegacyInteractiveGraph extends React.Component {
       // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
       props.graph.coords == null || props.graph.coords.length === 0);
     };
-    this.deprecatedProps = deprecatedProps;
     this.setGraphie = newGraphie => {
       this.graphie = newGraphie;
       this.setupGraphie();
@@ -34479,10 +34428,6 @@ class LegacyInteractiveGraph extends React.Component {
     };
     this.focus = $.noop;
   }
-  // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
-  UNSAFE_componentWillMount() {
-    DeprecationMixin.UNSAFE_componentWillMount.call(this);
-  }
   componentDidMount() {
     if (this.refs.graph) {
       // eslint-disable-next-line react/no-string-refs
@@ -43161,7 +43106,7 @@ class PhetSimulation extends React.Component {
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     const sandboxProperties = "allow-same-origin allow-scripts";
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$6.container
+      style: styles$6.widgetContainer
     }, this.state.banner !== null &&
     /*#__PURE__*/
     // TODO(anna): Make this banner focusable
@@ -43173,18 +43118,16 @@ class PhetSimulation extends React.Component {
       layout: "floating",
       kind: this.state.banner.kind,
       text: this.state.banner.message
-    })), /*#__PURE__*/React.createElement("iframe", {
+    })), /*#__PURE__*/React.createElement(View, {
+      style: styles$6.iframeContainer
+    }, /*#__PURE__*/React.createElement("iframe", {
       ref: this.iframeRef,
       title: this.props.description,
       sandbox: sandboxProperties,
-      style: {
-        height: 225,
-        width: "100%",
-        borderWidth: 0
-      },
+      className: css(styles$6.iframeResponsive),
       src: (_this$state$url = this.state.url) == null ? void 0 : _this$state$url.toString(),
       allow: "fullscreen"
-    }), /*#__PURE__*/React.createElement(IconButton, {
+    })), /*#__PURE__*/React.createElement(IconButton, {
       icon: cornersOutIcon,
       onClick: () => {
         var _this$iframeRef$curre;
@@ -43216,14 +43159,29 @@ const makeSafeUrl = (urlString, locale) => {
   return url;
 };
 const styles$6 = StyleSheet.create({
-  container: {
+  widgetContainer: {
     borderRadius: borderRadiusLarge,
     borderWidth: 1,
     borderColor: basicBorderColor,
     padding: spacing.medium_16,
-    paddingBottom: 0,
-    // Include space for medium_16 padding on each side
-    width: 400 + spacing.xLarge_32
+    paddingBottom: 0
+  },
+  iframeContainer: {
+    position: "relative",
+    overflow: "hidden",
+    width: "100%",
+    // 16:9 aspect ratio
+    paddingTop: "56.25%"
+  },
+  iframeResponsive: {
+    borderWidth: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    width: "100%",
+    height: "100%"
   }
 });
 var PhetSimulation$1 = {
@@ -44737,7 +44695,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 = "32.0.0";
+const libVersion = "32.0.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {