@khanacademy/perseus-editor 2.7.7 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/perseus-editor
 
+## 2.8.0
+
+### Minor Changes
+
+-   5bcf118c: Desktop Expression Widget now uses v2 keypad
+
+### Patch Changes
+
+-   5bcf118c: # Update MathInput
+
+    -   `buttonSets` is now deprecated in favor of `keypadButtonSets`, but currently maps to the new prop for backwards compatability.
+    -   `buttonsVisible` is now a bit misleading: "focused" is the default state with a toggle-able keypad and "always" shows the keypad by default.
+
+-   Updated dependencies [5bcf118c]
+-   Updated dependencies [5bcf118c]
+    -   @khanacademy/perseus@12.0.0
+
 ## 2.7.7
 
 ### Patch Changes

package/dist/es/index.js

@@ -22,7 +22,7 @@ import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
 // 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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -26740,6 +26740,16 @@ const {
 const {
   getDependencies: getDependencies$2
 } = Dependencies;
+const parseAnswerKey = ({
+  key
+}) => {
+  const parsedKey = Number.parseInt(key != null ? key : "");
+  if (Number.isNaN(parsedKey)) {
+    throw new Error(`Invalid answer key: ${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
@@ -26747,7 +26757,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
@@ -26918,7 +26928,8 @@ class ExpressionEditor extends React.Component {
     return 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
@@ -26927,21 +26938,24 @@ class ExpressionEditor extends React.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 : ""), props);
+        },
+        onDelete: () => this.handleRemoveForm(key),
         expressionProps: expressionProps
       }).freeze();
-    }).map((obj, index) => /*#__PURE__*/React.createElement(AnswerOption, _extends({
-      key: index
+    }).map(obj => /*#__PURE__*/React.createElement(AnswerOption, _extends({
+      key: obj.key
     }, obj)));
     const sortable = /*#__PURE__*/React.createElement(SortableArea, {
       components: answerOptions,
@@ -28513,6 +28527,9 @@ class ConstraintEditor extends React.Component {
     const {
       TeX
     } = Dependencies.getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Constraint:", " ", /*#__PURE__*/React.createElement(ButtonGroup$2, {
@@ -28543,47 +28560,47 @@ class ConstraintEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(TeX, null, "x="), " ", /*#__PURE__*/React.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.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(TeX, null, "y="), " ", /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.constraintXMin,
-      onChange: this.change("constraintXMin")
+      onChange: this.change("constraintXMin"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.constraintXMax,
-      onChange: this.change("constraintXMax")
+      onChange: this.change("constraintXMax"),
+      analytics: analyticsStub
     }), " ", /*#__PURE__*/React.createElement(TeX, null, "\\Large]"))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(TeX, null, "y \\in \\Large["), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.constraintYMin,
-      onChange: this.change("constraintYMin")
+      onChange: this.change("constraintYMin"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.constraintYMax,
-      onChange: this.change("constraintYMax")
+      onChange: this.change("constraintYMax"),
+      analytics: analyticsStub
     }), " ", /*#__PURE__*/React.createElement(TeX, null, "\\Large]"))));
   }
 }
@@ -28638,24 +28655,27 @@ class PointEditor extends React.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Coordinate: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -28695,40 +28715,43 @@ class LineEditor extends React.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "End: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -28801,20 +28824,23 @@ class MovablePointEditor extends React.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.startX,
-      onChange: this.change("startX")
+      onChange: this.change("startX"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.startY,
-      onChange: this.change("startY")
+      onChange: this.change("startY"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Update ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React.createElement(NumberInput$b, {
@@ -28862,32 +28888,35 @@ class MovableLineEditor extends React.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, "Initial position:", /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.startX,
-      onChange: this.change("startX")
+      onChange: this.change("startX"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.startY,
-      onChange: this.change("startY")
+      onChange: this.change("startY"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "End: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.endX,
-      onChange: this.change("endX")
+      onChange: this.change("endX"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
-      buttonSets: [],
       buttonsVisible: "never",
       value: this.props.endY,
-      onChange: this.change("endY")
+      onChange: this.change("endY"),
+      analytics: analyticsStub
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Start updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), /*#__PURE__*/React.createElement(NumberInput$b, {
@@ -28946,33 +28975,36 @@ class FunctionEditor extends React.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
     }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -29035,42 +29067,45 @@ class ParametricEditor extends React.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
     }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -29136,6 +29171,9 @@ class LabelEditor extends React.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
@@ -29151,19 +29189,19 @@ class LabelEditor extends React.Component {
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Location: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -29205,42 +29243,45 @@ class RectangleEditor extends React.Component {
     const {
       TeX
     } = getDependencies();
+    const analyticsStub = {
+      onAnalyticsEvent: () => Promise.resolve()
+    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Bottom left: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Width:", " ", /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
     }, "Height:", " ", /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {