@khanacademy/perseus 32.0.0 → 33.0.0

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,
@@ -10075,11 +10035,36 @@ const setLabelMargins = function setLabelMargins(span, size) {
       marginTop: -height / 2 - y * scale
     });
   } else {
+    var _$container$css, _$container$width, _$span$css;
+    const $container = $span.closest(".svg-image");
+    // Ensuring that the line-height of the text doesn't throw off placement of the text element.
+    // Inherited line-height values can really mess up placement.
+    $container.css("line-height", "normal");
+
+    // The 'max-width' value is the same as the expected (100% scale) width of the graphie.
+    // We are using jQuery to get this information since we don't have a way to pass it to this function.
+    const expectedWidth = (_$container$css = $container.css("max-width")) != null ? _$container$css : "0px";
+    // We can calculate the true scale of the graphie by taking actual width and dividing by the expected width.
+    // NOTE: Using 'slice' to remove the "px" unit from the end of the expected width value.
+    const scale = ((_$container$width = $container.width()) != null ? _$container$width : 0) / parseInt(expectedWidth.replace(/px$/, "")) * 100;
+
+    // Any padding needs to be scaled accordingly.
+    const currentPadding = (_$span$css = $span.css("padding")) != null ? _$span$css : "0px";
+    const newPadding = Math.round(parseInt(currentPadding.slice(0, -2)) * scale) / 100;
+
+    // "multipliers" basically move the position of the text by using 1, 0, -1
+    // 'margin-left' and 'margin-top' are used to position the text.
+    // Margin and font size need to be scaled accordingly.
     const multipliers = labelDirections[direction || "center"];
-    $span.css({
-      marginLeft: Math.round(width * multipliers[0]),
-      marginTop: Math.round(height * multipliers[1])
-    });
+    const styling = {
+      marginLeft: Math.round(width * multipliers[0] * scale) / 100,
+      marginTop: Math.round(height * multipliers[1] * scale) / 100,
+      padding: `${newPadding}px`
+    };
+    if (scale !== 1) {
+      styling["fontSize"] = `${Math.round(scale * 100) / 100}%`;
+    }
+    $span.css(styling);
   }
 };
 const GraphUtils = {
@@ -17271,9 +17256,16 @@ class SvgImage extends React.Component {
           // without coordinates. They don't seem to have any content, so
           // it seems fine to just ignore them (rather than error), but
           // we should figure out why this is happening.
-          const label = graphie.label(labelData.coordinates, labelData.content, labelData.alignment, labelData.typesetAsMath, {
+
+          // 'styling' - When a default scale (1) is used,
+          //     setting the font size to 100% is redundant.
+          // Also, setting the font size to 100% can counteract other scale-based styling.
+          // Therefore, when the scale is not applicable,
+          //     we set the value to 'null' so that no additional styling will be set.
+          const styling = this.props.scale !== 1 ? {
             "font-size": 100 * this.props.scale + "%"
-          });
+          } : null;
+          const label = graphie.label(labelData.coordinates, labelData.content, labelData.alignment, labelData.typesetAsMath, styling);
 
           // Convert absolute positioning css from pixels to percentages
           // TODO(alex): Dynamically resize font-size as well. This
@@ -32034,10 +32026,14 @@ const MafsGraph = props => {
     state,
     dispatch,
     labels,
-    readOnly
+    readOnly,
+    fullGraphAriaLabel,
+    fullGraphAriaDescription
   } = props;
   const [width, height] = props.box;
   const tickStep = props.step;
+  const uniqueId = React.useId();
+  const descriptionId = `interactive-graph-description-${uniqueId}`;
   const graphRef = React.useRef(null);
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
@@ -32073,9 +32069,19 @@ const MafsGraph = props => {
         (_graphRef$current = graphRef.current) == null || _graphRef$current.focus();
       }
     },
+    "aria-label": fullGraphAriaLabel,
+    "aria-describedby": fullGraphAriaDescription ? descriptionId : undefined,
     ref: graphRef,
     tabIndex: 0
-  }, /*#__PURE__*/React.createElement(LegacyGrid, {
+  }, fullGraphAriaDescription && /*#__PURE__*/React.createElement(View, {
+    id: descriptionId,
+    tabIndex: -1,
+    style: {
+      width: 0,
+      height: 0,
+      overflow: "hidden"
+    }
+  }, fullGraphAriaDescription), /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
   }), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLabelsLayer, {
@@ -33316,9 +33322,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 +33350,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 +33402,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 +34474,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 +43152,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 +43164,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 +43205,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 +44741,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 = "33.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45621,128 +45625,6 @@ const ref = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.cre
   ref: ref
 }))));
 
-class ArrowPicker extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement(ButtonGroup, {
-      value: this.props.value,
-      allowEmpty: false,
-      buttons: [{
-        value: "",
-        content: /*#__PURE__*/React.createElement("span", null, "\u2014")
-      }, {
-        value: "->",
-        content: /*#__PURE__*/React.createElement("span", null, "\u2192")
-      }
-      /*
-      TODO(eater): fix khan-exercises so these are supported
-      {value: "<-", content: <span>&#x2190;</span>},
-      {value: "<->", content: <span>&#x2194;</span>}
-      */],
-
-      onChange: this.props.onChange
-    });
-  }
-}
-ArrowPicker.defaultProps = {
-  value: ""
-};
-
-const COLORS = [KhanColors.BLACK, KhanColors.BLUE, KhanColors.GREEN, KhanColors.PINK, KhanColors.PURPLE, KhanColors.RED, KhanColors.GRAY];
-const LIGHT_COLORS = [KhanColors.LIGHT_BLUE, KhanColors.LIGHT_ORANGE, KhanColors.LIGHT_PINK, KhanColors.LIGHT_GREEN, KhanColors.LIGHT_PURPLE, KhanColors.LIGHT_RED, "#fff"];
-class ColorPicker extends React.Component {
-  render() {
-    const colors = this.props.lightColors ? LIGHT_COLORS : COLORS;
-    return /*#__PURE__*/React.createElement(ButtonGroup, {
-      value: this.props.value,
-      allowEmpty: false,
-      buttons: _.map(colors, color => {
-        return {
-          value: color,
-          content: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-            className: "colorpicker-circle",
-            style: {
-              background: color
-            }
-          }), "\xA0")
-        };
-      }),
-      onChange: this.props.onChange
-    });
-  }
-}
-ColorPicker.defaultProps = {
-  value: KhanColors.BLACK,
-  lightColors: false
-};
-
-class DashPicker extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement(ButtonGroup, {
-      value: this.props.value,
-      allowEmpty: false,
-      buttons: [{
-        value: "",
-        content: /*#__PURE__*/React.createElement("span", null, "\u2014")
-      }, {
-        value: "-",
-        content: /*#__PURE__*/React.createElement("span", null, "\u2013\u2013\u2013")
-      }, {
-        value: "- ",
-        content: /*#__PURE__*/React.createElement("span", null, "\u2013\xA0\xA0\u2013")
-      }, {
-        value: ".",
-        content: /*#__PURE__*/React.createElement("span", null, "\xB7\xB7\xB7\xB7")
-      }, {
-        value: ". ",
-        content: /*#__PURE__*/React.createElement("span", null, "\xB7 \xB7 \xB7")
-      }],
-      onChange: this.props.onChange
-    });
-  }
-}
-DashPicker.defaultProps = {
-  value: ""
-};
-
-/* eslint-disable jsx-a11y/anchor-is-valid */
-class ElementContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.toggle = e => {
-      e.preventDefault();
-      this.setState({
-        show: !this.state.show
-      });
-    };
-    this.state = {
-      show: props.initiallyVisible
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-interaction-element"
-    }, /*#__PURE__*/React.createElement("a", {
-      href: "#",
-      className: "perseus-interaction-element-title " + (this.state.show ? "open" : "closed"),
-      onClick: this.toggle
-    }, this.state.show ? /*#__PURE__*/React.createElement(InlineIcon, iconChevronDown) : /*#__PURE__*/React.createElement(InlineIcon, iconChevronRight), this.props.title), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-interaction-element-content " + (this.state.show ? "enter" : "leave")
-    }, this.props.children, (this.props.onUp != null || this.props.onDown != null || this.props.onDelete != null) && /*#__PURE__*/React.createElement("div", {
-      className: "edit-controls"
-    }, this.props.onUp != null && /*#__PURE__*/React.createElement("button", {
-      onClick: this.props.onUp
-    }, /*#__PURE__*/React.createElement(InlineIcon, iconCircleArrowUp)), this.props.onDown != null && /*#__PURE__*/React.createElement("button", {
-      onClick: this.props.onDown
-    }, /*#__PURE__*/React.createElement(InlineIcon, iconCircleArrowDown)), this.props.onDelete != null && /*#__PURE__*/React.createElement("button", {
-      onClick: this.props.onDelete
-    }, /*#__PURE__*/React.createElement(InlineIcon, iconTrash)))));
-  }
-}
-ElementContainer.defaultProps = {
-  initiallyVisible: false,
-  title: "More"
-};
-
 const devices = {
   PHONE: "phone",
   TABLET: "tablet",
@@ -48322,5 +48204,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map