@khanacademy/perseus 7.2.0 → 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]) {
@@ -20691,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++;
@@ -22141,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.
@@ -23770,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);
@@ -26783,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'.
@@ -27385,7 +27357,7 @@ var Interactive = {
   hidden: true
 };
 
-/* eslint-disable react/no-unsafe */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 const defaultBackgroundImage$2 = {
   url: null
 };
@@ -30921,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);
@@ -32791,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
@@ -38103,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);
@@ -38165,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
@@ -38230,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;
@@ -38285,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);
@@ -38534,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]);
@@ -38860,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({
@@ -38899,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: ["", ""],
@@ -39879,6 +39821,7 @@ var Simulator$1 = {
   hidden: true
 };
 
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   shuffle
 } = Util;
@@ -43914,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
@@ -46874,9 +46807,7 @@ const EditorJsonify = {
   }
 };
 
-/**
- * Main entry point
- */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 const apiVersion = version.apiVersion;
 const itemDataVersion = version.itemDataVersion;