@khanacademy/perseus-editor 2.7.7 → 2.8.0

package/dist/index.js

@@ -61,7 +61,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "2.7.7";
+const libVersion = "2.8.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _defineProperty(obj, key, value) {
@@ -26815,6 +26815,17 @@ const {
 const {
   getDependencies: getDependencies$2
 } = perseus.Dependencies;
+const parseAnswerKey = _ref => {
+  let {
+    key
+  } = _ref;
+  const parsedKey = Number.parseInt(key !== null && key !== void 0 ? key : "");
+  if (Number.isNaN(parsedKey)) {
+    throw new Error("Invalid answer key: ".concat(key));
+  }
+  return parsedKey;
+};
+
 // Pick a key that isn't currently used by an answer in answerForms
 const _makeNewKey = answerForms => {
   // first note all the currently used keys in an array, used like a map :3
@@ -26822,7 +26833,7 @@ const _makeNewKey = answerForms => {
   // be one past the largest key.
   const usedKeys = [];
   answerForms.forEach(ans => {
-    usedKeys[ans.key] = true;
+    usedKeys[parseAnswerKey(ans)] = true;
   });
 
   // then scan through the array to find the first unused (undefined) key
@@ -26995,7 +27006,8 @@ class ExpressionEditor extends React__namespace.Component {
     return perseus.Changeable.change.apply(this, args);
   }
   render() {
-    const answerOptions = this.props.answerForms.map((obj, index) => {
+    const answerOptions = this.props.answerForms.map(ans => {
+      const key = parseAnswerKey(ans);
       const expressionProps = {
         // note we're using
         // *this.props*.{times,functions,buttonSets} since each
@@ -27004,21 +27016,24 @@ class ExpressionEditor extends React__namespace.Component {
         functions: this.props.functions,
         buttonSets: this.props.buttonSets,
         buttonsVisible: "focused",
-        form: obj.form,
-        simplify: obj.simplify,
-        value: obj.value,
-        onChange: props => this.updateForm(index, props),
+        form: ans.form,
+        simplify: ans.simplify,
+        value: ans.value,
+        onChange: props => this.updateForm(key, props),
         trackInteraction: () => {},
-        widgetId: this.props.widgetId + "-" + index
+        widgetId: this.props.widgetId + "-" + ans.key
       };
-      return lens(obj).merge([], {
+      return lens(ans).merge([], {
         draggable: true,
-        onChange: props => this.updateForm(index, props),
-        onDelete: () => this.handleRemoveForm(index),
+        onChange: props => {
+          var _ans$key;
+          return this.updateForm(Number.parseInt((_ans$key = ans.key) !== null && _ans$key !== void 0 ? _ans$key : ""), props);
+        },
+        onDelete: () => this.handleRemoveForm(key),
         expressionProps: expressionProps
       }).freeze();
-    }).map((obj, index) => /*#__PURE__*/React__namespace.createElement(AnswerOption, _extends({
-      key: index
+    }).map(obj => /*#__PURE__*/React__namespace.createElement(AnswerOption, _extends({
+      key: obj.key
     }, obj)));
     const sortable = /*#__PURE__*/React__namespace.createElement(SortableArea, {
       components: answerOptions,
@@ -28654,6 +28669,9 @@ class ConstraintEditor extends React__namespace.Component {
     const {
       TeX
     } = perseus.Dependencies.getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Constraint:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$2, {
@@ -28684,47 +28702,47 @@ class ConstraintEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.constraintFn,
-      onChange: this.change("constraintFn")
+      onChange: this.change("constraintFn"),
+      analytics: analyticsStub
     }))), this.props.constraint === "y" && /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.constraintFn,
-      onChange: this.change("constraintFn")
+      onChange: this.change("constraintFn"),
+      analytics: analyticsStub
     }))), "Ensure these are set so nothing can be dragged off the canvas:", /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.constraintXMin,
-      onChange: this.change("constraintXMin")
+      onChange: this.change("constraintXMin"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.constraintXMax,
-      onChange: this.change("constraintXMax")
+      onChange: this.change("constraintXMax"),
+      analytics: analyticsStub
     }), " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large]"))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y \\in \\Large["), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.constraintYMin,
-      onChange: this.change("constraintYMin")
+      onChange: this.change("constraintYMin"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.constraintYMax,
-      onChange: this.change("constraintYMax")
+      onChange: this.change("constraintYMax"),
+      analytics: analyticsStub
     }), " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large]"))));
   }
 }
@@ -28784,24 +28802,27 @@ class PointEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Coordinate: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.coordX
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("coordX")
+      onChange: this.change("coordX"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.coordY
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("coordY")
+      onChange: this.change("coordY"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
@@ -28847,40 +28868,43 @@ class LineEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.startX
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("startX")
+      onChange: this.change("startX"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.startY
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("startY")
+      onChange: this.change("startY"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "End: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.endX
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("endX")
+      onChange: this.change("endX"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.endY
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("endY")
+      onChange: this.change("endY"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
@@ -28959,20 +28983,23 @@ class MovablePointEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.startX,
-      onChange: this.change("startX")
+      onChange: this.change("startX"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.startY,
-      onChange: this.change("startY")
+      onChange: this.change("startY"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Update ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
@@ -29026,32 +29053,35 @@ class MovableLineEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, "Initial position:", /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.startX,
-      onChange: this.change("startX")
+      onChange: this.change("startX"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.startY,
-      onChange: this.change("startY")
+      onChange: this.change("startY"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "End: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.endX,
-      onChange: this.change("endX")
+      onChange: this.change("endX"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.endY,
-      onChange: this.change("endY")
+      onChange: this.change("endY"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Start updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
@@ -29116,33 +29146,36 @@ class FunctionEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.value
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("value")
+      onChange: this.change("value"),
+      analytics: analyticsStub
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.rangeMin
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("rangeMin")
+      onChange: this.change("rangeMin"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.rangeMax
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("rangeMax")
+      onChange: this.change("rangeMax"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
@@ -29211,42 +29244,45 @@ class ParametricEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.x
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("x")
+      onChange: this.change("x"),
+      analytics: analyticsStub
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.y
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("y")
+      onChange: this.change("y"),
+      analytics: analyticsStub
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.rangeMin
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("rangeMin")
+      onChange: this.change("rangeMin"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.rangeMax
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("rangeMax")
+      onChange: this.change("rangeMax"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
@@ -29318,6 +29354,9 @@ class LabelEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -29333,19 +29372,19 @@ class LabelEditor extends React__namespace.Component {
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Location: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.coordX
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("coordX")
+      onChange: this.change("coordX"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.coordY
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("coordY")
+      onChange: this.change("coordY"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
@@ -29393,42 +29432,45 @@ class RectangleEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Bottom left: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.coordX
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("coordX")
+      onChange: this.change("coordX"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.coordY
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("coordY")
+      onChange: this.change("coordY"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.width
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("width")
+      onChange: this.change("width"),
+      analytics: analyticsStub
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Height:", " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.height
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("height")
+      onChange: this.change("height"),
+      analytics: analyticsStub
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {