@khanacademy/perseus 7.1.1 → 7.2.1

package/dist/es/index.js

@@ -120,6 +120,7 @@ var dependencies = /*#__PURE__*/Object.freeze({
     getDependencies: getDependencies
 });
 
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 const prettyBig = {
   fontSize: "150%"
 };
@@ -1176,7 +1177,7 @@ var changeable = /*#__PURE__*/Object.freeze({
     propTypes: propTypes
 });
 
-/* eslint-disable @babel/no-invalid-this, react/forbid-prop-types, react/no-unsafe, react/sort-comp */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 const textWidthCache = {};
 function getTextWidth(text) {
   if (!textWidthCache[text]) {
@@ -2945,8 +2946,6 @@ const defaultContext$2 = {
 };
 const context$1 = /*#__PURE__*/React.createContext(defaultContext$2);
 
-/* eslint-disable @babel/no-invalid-this, getter-return, one-var */
-let supportsPassive = false;
 const svgLabelsRegex = /^web\+graphie:/;
 // For offline exercises in the mobile app, we download the graphie data
 // (svgs and localized data files) and serve them from the local file
@@ -2954,6 +2953,50 @@ const svgLabelsRegex = /^web\+graphie:/;
 // in the perseus json with this `file+graphie` prefix to indicate that
 // they should have the `file://` protocol instead of `https://`.
 const svgLocalLabelsRegex$1 = /^file\+graphie:/;
+
+// Sometimes other components want to download the actual image e.g. to
+// determine its size. Here, we transform an .svg-labels url into the
+// correct image url, and leave normal image urls alone
+function getRealImageUrl(graphieUrl) {
+  if (isLabeledSVG(graphieUrl)) {
+    return getSvgUrl(graphieUrl);
+  }
+  return graphieUrl;
+}
+function isLabeledSVG(graphieUrl) {
+  return svgLabelsRegex.test(graphieUrl) || svgLocalLabelsRegex$1.test(graphieUrl);
+}
+
+// For each graphie, there are two urls we need to download from. This gets
+// the base url without the suffix, and `getSvgUrl` and `getDataUrl` apply
+// appropriate suffixes to get the image and other data
+function getBaseUrl(graphieUrl) {
+  return graphieUrl.replace(svgLabelsRegex, "https:").replace(svgLocalLabelsRegex$1, "file:");
+}
+function getSvgUrl(graphieUrl) {
+  return getBaseUrl(graphieUrl) + ".svg";
+}
+function getDataUrl(graphieUrl) {
+  return getBaseUrl(graphieUrl) + "-data.json";
+}
+async function getImageSizeModern(url) {
+  const image = new Image();
+  return new Promise((resolve, reject) => {
+    // Handle the success case
+    image.onload = () => {
+      resolve([image.naturalWidth, image.naturalHeight]);
+    };
+
+    // Handle the error case
+    image.onerror = reject;
+
+    // Kick off the loading
+    image.src = getRealImageUrl(url);
+  });
+}
+
+/* eslint-disable @babel/no-invalid-this, getter-return, one-var */
+let supportsPassive = false;
 const nestedMap$2 = function nestedMap(children, func, context) {
   if (Array.isArray(children)) {
     // @ts-expect-error [FEI-5003] - TS2322 - Type '(M | readonly M[])[]' is not assignable to type 'M | readonly M[]'.
@@ -3618,21 +3661,6 @@ const supportsPassiveEvents = () => {
 function captureScratchpadTouchStart$4(e) {
   e.stopPropagation();
 }
-async function getImageSizeModern(url) {
-  const image = new Image();
-  return new Promise((resolve, reject) => {
-    // Handle the success case
-    image.onload = () => {
-      resolve([image.naturalWidth, image.naturalHeight]);
-    };
-
-    // Handle the error case
-    image.onerror = reject;
-
-    // Kick off the loading
-    image.src = url;
-  });
-}
 function getImageSize(url, callback) {
   const img = new Image();
   img.onload = function () {
@@ -3662,32 +3690,6 @@ function getImageSize(url, callback) {
   img.src = getRealImageUrl(url);
 }
 
-// Sometimes other components want to download the actual image e.g. to
-// determine its size. Here, we transform an .svg-labels url into the
-// correct image url, and leave normal image urls alone
-function getRealImageUrl(url) {
-  if (isLabeledSVG(url)) {
-    return getSvgUrl(url);
-  }
-  return url;
-}
-function isLabeledSVG(url) {
-  return svgLabelsRegex.test(url) || svgLocalLabelsRegex$1.test(url);
-}
-
-// For each svg+labels, there are two urls we need to download from. This gets
-// the base url without the suffix, and `getSvgUrl` and `getDataUrl` apply
-// appropriate suffixes to get the image and other data
-function getBaseUrl(url) {
-  return url.replace(svgLabelsRegex, "https:").replace(svgLocalLabelsRegex$1, "file:");
-}
-function getSvgUrl(url) {
-  return getBaseUrl(url) + ".svg";
-}
-function getDataUrl(url) {
-  return getBaseUrl(url) + "-data.json";
-}
-
 /**
  * Gets the word right before where the textarea cursor is
  *
@@ -3767,12 +3769,12 @@ const Util = {
   supportsPassiveEvents,
   captureScratchpadTouchStart: captureScratchpadTouchStart$4,
   getImageSize,
-  getImageSizeModern,
-  getRealImageUrl,
-  isLabeledSVG,
-  getBaseUrl,
-  getSvgUrl,
-  getDataUrl,
+  getImageSizeModern: getImageSizeModern,
+  getRealImageUrl: getRealImageUrl,
+  isLabeledSVG: isLabeledSVG,
+  getBaseUrl: getBaseUrl,
+  getSvgUrl: getSvgUrl,
+  getDataUrl: getDataUrl,
   textarea,
   unescapeMathMode: unescapeMathMode$1,
   random: random$1
@@ -20690,7 +20692,7 @@ MathOutput.defaultProps = {
   onBlur: function () {}
 };
 
-/* eslint-disable react/sort-comp */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 let lastId = 0;
 function uniqueIdForInput(prefix = "input-") {
   lastId++;
@@ -22140,36 +22142,7 @@ const scrollElementIntoView = (element, callback) => {
   }, 0);
 };
 
-/**
- * SVG Icon React Component
- *
- * This component is designed to take in SVG paths and render icons based upon
- * them. If you are looking for an icon that we've used before you should look
- * in `icon-paths.js` which is a reference file for all the SVG paths that
- * we've used. You'll need to copy the object from that file into whichever
- * file you're using the icon and explicitly pass it in to the <Icon/> React
- * component.
- *
- * Sample usage:
- *
- *   const dropdownIcon = `M5,6L0,0L10,0`;
- *   <Icon icon={dropdownIcon} />
- *
- * Or:
- *
- *   const dropdownIcon = {
- *       path: `M5,6L0,0L10,0`,
- *       height: 10,
- *       width: 10,
- *   };
- *   <Icon icon={dropdownIcon} size={20} />
- *
- * A full list of all the existing icons can be seen here:
- * http://localhost:8080/react-sandbox/shared-styles-package/icon.jsx.fixture.js
- *
- * If you want to add an entirely new icon please read the note inside
- * the `icon-paths.js` file.
- */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 // WARNING: This determines the *viewport* width and height, so a change here
 //          requires scaling the values of every SVG path passed in as a string
 //          without corresponding `width` and `height` values.
@@ -23769,7 +23742,7 @@ const WidgetJsonifyDeprecated = {
   }
 };
 
-/* eslint-disable react/sort-comp */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 class Categorizer extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -26782,7 +26755,7 @@ var Image$1 = {
   isLintable: true
 };
 
-/* eslint-disable @babel/no-invalid-this, react/no-unsafe, react/sort-comp */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 // @ts-expect-error [FEI-5003] - TS2339 - Property 'Label' does not exist on type 'typeof Graphie'.
 const Label$1 = Graphie.Label;
 // @ts-expect-error [FEI-5003] - TS2339 - Property 'Line' does not exist on type 'typeof Graphie'.
@@ -27384,7 +27357,7 @@ var Interactive = {
   hidden: true
 };
 
-/* eslint-disable react/no-unsafe */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 const defaultBackgroundImage$2 = {
   url: null
 };
@@ -30920,11 +30893,7 @@ const styles$h = StyleSheet.create({
   }
 });
 
-/**
- * Controlled question image marker, rendered as a styled button element.
- *
- * The target for labeling question image with answers.
- */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 class Marker extends React.Component {
   constructor(...args) {
     super(...args);
@@ -32790,7 +32759,7 @@ const styles$e = StyleSheet.create({
   }
 });
 
-/* eslint-disable react/forbid-prop-types, react/sort-comp */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   shuffle: shuffle$1,
   seededRNG
@@ -38102,30 +38071,15 @@ var PassageRefTarget$1 = {
   isLintable: true
 };
 
-/* eslint-disable @babel/no-invalid-this, @typescript-eslint/no-unused-vars, one-var, react/no-unsafe, react/sort-comp */
+/* eslint-disable react/no-unsafe */
 const {
   deepEq: deepEq$1
 } = Util;
-const BAR = "bar",
-  LINE = "line",
-  PIC = "pic",
-  HISTOGRAM = "histogram",
-  DOTPLOT = "dotplot";
-({
-  type: PropTypes.oneOf([BAR, LINE, PIC, HISTOGRAM, DOTPLOT]),
-  labels: PropTypes.arrayOf(PropTypes.string),
-  categories: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-  scaleY: PropTypes.number,
-  maxY: PropTypes.number,
-  snapsPerLine: PropTypes.number,
-  picSize: PropTypes.number,
-  pixBoxHeight: PropTypes.number,
-  picUrl: PropTypes.string,
-  plotDimensions: PropTypes.arrayOf(PropTypes.number),
-  labelInterval: PropTypes.number,
-  starting: PropTypes.arrayOf(PropTypes.number),
-  static: PropTypes.bool
-});
+const BAR = "bar";
+const LINE = "line";
+const PIC = "pic";
+const HISTOGRAM = "histogram";
+const DOTPLOT = "dotplot";
 class Plotter extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -38164,11 +38118,11 @@ class Plotter extends React.Component {
       self.graphie = graphie;
       self.graphie.pics = [];
       self.graphie.dotTicks = [];
-      const isBar = self.props.type === BAR,
-        isLine = self.props.type === LINE,
-        isPic = self.props.type === PIC,
-        isHistogram = self.props.type === HISTOGRAM,
-        isDotplot = self.props.type === DOTPLOT;
+      const isBar = self.props.type === BAR;
+      const isLine = self.props.type === LINE;
+      const isPic = self.props.type === PIC;
+      const isHistogram = self.props.type === HISTOGRAM;
+      const isDotplot = self.props.type === DOTPLOT;
       const isTiledPlot = isPic || isDotplot;
       const config = {};
       const c = config; // c for short
@@ -38229,9 +38183,7 @@ class Plotter extends React.Component {
 
       // TODO(michaelpolyak): Handle other plot types: Dot, Histogram, Line.
       if (isMobile && (isBar || isTiledPlot)) {
-        const maxCategoryHeight = Math.max(0,
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'number'.
-        ...Object.values(self.state.categoryHeights));
+        const maxCategoryHeight = Math.max(0, ...Object.values(self.state.categoryHeights));
         if (maxCategoryHeight) {
           // Account for bottom label position, height.
           let offsetY = 25;
@@ -38284,7 +38236,7 @@ class Plotter extends React.Component {
           });
         }
       }
-      if ((isBar || isLine) && isMobile) {
+      if ((isBar || isLine) && isMobile && !this.props.static) {
         self.graphie.dragPrompt = graphie.label([c.dimX / 2, c.dimY / 2], i18n._("Drag handles to make graph"), "center", false).css("font-weight", "bold").css("color", KhanColors.KA_GREEN).css("display", "none");
       }
       self.setupCategories(config);
@@ -38533,8 +38485,8 @@ class Plotter extends React.Component {
         config.graph.bars[i].scale(1, Math.max(isMobile ? 0.2 : 0.01, height / config.scaleY), center[0], center[1]);
         if (isHistogram) {
           // Scale dividers between buckets
-          const leftDivider = config.graph.dividers[i - 1],
-            rightDivider = config.graph.dividers[i];
+          const leftDivider = config.graph.dividers[i - 1];
+          const rightDivider = config.graph.dividers[i];
           if (leftDivider) {
             const divHeight = Math.min(self.state.values[i - 1], height);
             leftDivider.scale(1, Math.max(0.01, divHeight / config.scaleY), center[0], center[1]);
@@ -38859,38 +38811,13 @@ class Plotter extends React.Component {
       return Plotter.validate(this.getUserInput(), rubric);
     };
   }
-  render() {
-    // TODO(kevinb) actually compute the size of the graphie correctly and
-    // make it that size so we don't have to add extra padding.  The value
-    // was determined by eye-balling the layout.  :(
-    const paddingForBottomLabel = 75;
-    const style = {
-      marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-plotter graphie " + ClassNames.INTERACTIVE
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "graphieDiv",
-      style: style
-    });
-  }
-  componentDidUpdate(prevProps, prevState) {
-    this.shouldSetupGraphie = this.shouldSetupGraphie || !_.isEqual(this.state.categoryHeights, prevState.categoryHeights);
-    if (this.shouldSetupGraphie) {
-      this.setupGraphie(prevState);
-    }
-  }
   componentDidMount() {
     this._isMounted = true;
     this.setupGraphie(this.state);
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     const props = ["type", "labels", "categories", "scaleY", "maxY", "snapsPerLine", "picUrl", "labelInterval", "static"];
-    this.shouldSetupGraphie = _.any(props, function (prop) {
-      // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      return !_.isEqual(this.props[prop], nextProps[prop]);
-    }, this);
+    this.shouldSetupGraphie = _.any(props, prop => !_.isEqual(this.props[prop], nextProps[prop]), this);
     if (!_.isEqual(this.props.starting, nextProps.starting) && !_.isEqual(this.state.values, nextProps.starting)) {
       this.shouldSetupGraphie = true;
       this.setState({
@@ -38898,16 +38825,32 @@ class Plotter extends React.Component {
       });
     }
   }
+  componentDidUpdate(prevProps, prevState) {
+    this.shouldSetupGraphie = this.shouldSetupGraphie || !_.isEqual(this.state.categoryHeights, prevState.categoryHeights);
+    if (this.shouldSetupGraphie) {
+      this.setupGraphie(prevState);
+    }
+  }
   componentWillUnmount() {
     this._isMounted = false;
   }
+  render() {
+    // TODO(kevinb) actually compute the size of the graphie correctly and
+    // make it that size so we don't have to add extra padding.  The value
+    // was determined by eye-balling the layout.  :(
+    const paddingForBottomLabel = 75;
+    const style = {
+      marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-plotter graphie " + ClassNames.INTERACTIVE
+      // eslint-disable-next-line react/no-string-refs
+      ,
+      ref: "graphieDiv",
+      style: style
+    });
+  }
 }
-Plotter.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  trackInteraction: PropTypes.func.isRequired
-  // TODO(alex): Figure out why lint chokes on this line
-  // ...widgetPropTypes,
-};
 Plotter.defaultProps = {
   type: BAR,
   labels: ["", ""],
@@ -39878,6 +39821,7 @@ var Simulator$1 = {
   hidden: true
 };
 
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   shuffle
 } = Util;
@@ -43913,17 +43857,7 @@ registerWidgets(allWidgets);
 const ItemVersion = getVersionVector();
 ItemVersion["::renderer::"] = version.itemDataVersion;
 
-/**
- * A mixin that renders a custom software keypad in additional to the base
- * component. The base component will receive blur events when the keypad is
- * dismissed and can access the keypad element itself so as to manage its
- * activation and dismissal.
- *
- * TODO(charlie): This would make a nicer higher-order component, except that
- * we need to expose methods on the base component (i.e., `ItemRenderer`). When
- * `ItemRenderer` and friends are written as ES6 Classes, we can have them
- * extend a `ProvideKeypad` component instead of using this mixin.
- */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 // NOTE: This is not a real component.  It's a collection of methods used to
 // create and manage a Keypad instances.
 // TODO(LP-10789): replace this with a React Context object to pass information
@@ -46873,9 +46807,7 @@ const EditorJsonify = {
   }
 };
 
-/**
- * Main entry point
- */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 const apiVersion = version.apiVersion;
 const itemDataVersion = version.itemDataVersion;