@khanacademy/perseus 6.2.1 → 6.3.0

package/dist/index.js

@@ -10,7 +10,6 @@ var classNames = require('classnames');
 var React = require('react');
 var _ = require('underscore');
 var $ = require('jquery');
-var MathQuill = require('mathquill');
 var ReactDOM = require('react-dom');
 var PropTypes = require('prop-types');
 var kmath = require('@khanacademy/kmath');
@@ -59,7 +58,6 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
-var MathQuill__default = /*#__PURE__*/_interopDefaultLegacy(MathQuill);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
@@ -209,10 +207,10 @@ const symbStyle = {
 const basic = [() => [/*#__PURE__*/React__namespace.createElement("span", {
   key: "plus",
   style: slightlyBig
-}, "+"), "PLUS"], () => [/*#__PURE__*/React__namespace.createElement("span", {
+}, "+"), "PLUS", i18n__namespace._("Plus")], () => [/*#__PURE__*/React__namespace.createElement("span", {
   key: "minus",
   style: prettyBig
-}, "-"), "MINUS"],
+}, "-"), "MINUS", i18n__namespace._("Minus")],
 // TODO(joel) - display as \cdot when appropriate
 props => {
   const {
@@ -222,12 +220,12 @@ props => {
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "times",
       style: prettyBig
-    }, i18n__namespace.doNotTranslate("\\times")), "TIMES"];
+    }, i18n__namespace.doNotTranslate("\\times")), "TIMES", i18n__namespace._("Multiply")];
   }
   return [/*#__PURE__*/React__namespace.createElement(TeX, {
     key: "times",
     style: prettyBig
-  }, i18n__namespace.doNotTranslate("\\cdot")), "CDOT"];
+  }, i18n__namespace.doNotTranslate("\\cdot")), "CDOT", i18n__namespace._("Multiply")];
 }, () => {
   const {
     TeX
@@ -235,7 +233,7 @@ props => {
   return [/*#__PURE__*/React__namespace.createElement(TeX, {
     key: "frac",
     style: prettyBig
-  }, i18n__namespace.doNotTranslate("\\frac{x}{y}")), "FRAC"];
+  }, i18n__namespace.doNotTranslate("\\frac{x}{y}")), "FRAC", i18n__namespace._("Fraction, excluding the current expression")];
 }];
 const buttonSets = {
   basic,
@@ -245,7 +243,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "div"
-    }, i18n__namespace.doNotTranslate("\\div")), "DIVIDE"];
+    }, i18n__namespace.doNotTranslate("\\div")), "DIVIDE", i18n__namespace._("Divide")];
   }]),
   trig: [() => {
     const {
@@ -253,21 +251,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "sin"
-    }, i18n__namespace.doNotTranslate("\\sin")), "SIN"];
+    }, i18n__namespace.doNotTranslate("\\sin")), "SIN", i18n__namespace._("Sine")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "cos"
-    }, i18n__namespace.doNotTranslate("\\cos")), "COS"];
+    }, i18n__namespace.doNotTranslate("\\cos")), "COS", i18n__namespace._("Cosine")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "tan"
-    }, i18n__namespace.doNotTranslate("\\tan")), "TAN"];
+    }, i18n__namespace.doNotTranslate("\\tan")), "TAN", i18n__namespace._("Tangent")];
   }, () => {
     const {
       TeX
@@ -275,7 +273,7 @@ const buttonSets = {
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "theta",
       style: symbStyle
-    }, i18n__namespace.doNotTranslate("\\theta")), "THETA"];
+    }, i18n__namespace.doNotTranslate("\\theta")), "THETA", i18n__namespace._("Theta")];
   }, () => {
     const {
       TeX
@@ -287,7 +285,7 @@ const buttonSets = {
     }, i18n__namespace.doNotTranslate("phi")), /*#__PURE__*/React__namespace.createElement(TeX, {
       key: "pi",
       style: symbStyle
-    }, i18n__namespace.doNotTranslate("\\phi"))), "PHI"];
+    }, i18n__namespace.doNotTranslate("\\phi"))), "PHI", i18n__namespace._("Phi")];
   }],
   prealgebra: [() => {
     const {
@@ -295,7 +293,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "sqrt"
-    }, i18n__namespace.doNotTranslate("\\sqrt{x}")), "SQRT"];
+    }, i18n__namespace.doNotTranslate("\\sqrt{x}")), "SQRT", i18n__namespace._("Square root")];
   },
   // TODO(joel) - how does desmos do this?
   () => {
@@ -304,7 +302,7 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "nthroot"
-    }, i18n__namespace.doNotTranslate("\\sqrt[3]{x}")), "NTHROOT3"];
+    }, i18n__namespace.doNotTranslate("\\sqrt[3]{x}")), "NTHROOT3", i18n__namespace._("Cube root")];
   }, () => {
     const {
       TeX
@@ -312,7 +310,7 @@ const buttonSets = {
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "pow",
       style: slightlyBig
-    }, i18n__namespace.doNotTranslate("a^b")), "POW"];
+    }, i18n__namespace.doNotTranslate("a^b")), "POW", i18n__namespace._("Exponent")];
   }, () => {
     const {
       TeX
@@ -320,7 +318,7 @@ const buttonSets = {
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "pi",
       style: slightlyBig
-    }, i18n__namespace.doNotTranslate("\\pi")), "PI"];
+    }, i18n__namespace.doNotTranslate("\\pi")), "PI", i18n__namespace._("Pi")];
   }],
   logarithms: [() => {
     const {
@@ -328,21 +326,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "log"
-    }, i18n__namespace.doNotTranslate("\\log")), "LOG"];
+    }, i18n__namespace.doNotTranslate("\\log")), "LOG", i18n__namespace._("Logarithm with base 10")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "ln"
-    }, i18n__namespace.doNotTranslate("\\ln")), "LN"];
+    }, i18n__namespace.doNotTranslate("\\ln")), "LN", i18n__namespace._("Natural logarithm")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "log_b"
-    }, i18n__namespace.doNotTranslate("\\log_b")), "LOG_B"];
+    }, i18n__namespace.doNotTranslate("\\log_b")), "LOG_B", i18n__namespace._("Logarithm with custom base")];
   }],
   "basic relations": [() => {
     const {
@@ -350,21 +348,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "eq"
-    }, "="), "EQUAL"];
+    }, "="), "EQUAL", i18n__namespace._("Equals sign")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "lt"
-    }, i18n__namespace.doNotTranslate("\\lt")), "LT"];
+    }, i18n__namespace.doNotTranslate("\\lt")), "LT", i18n__namespace._("Less than sign")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "gt"
-    }, i18n__namespace.doNotTranslate("\\gt")), "GT"];
+    }, i18n__namespace.doNotTranslate("\\gt")), "GT", i18n__namespace._("Greater than sign")];
   }],
   "advanced relations": [() => {
     const {
@@ -372,21 +370,21 @@ const buttonSets = {
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "neq"
-    }, i18n__namespace.doNotTranslate("\\neq")), "NEQ"];
+    }, i18n__namespace.doNotTranslate("\\neq")), "NEQ", i18n__namespace._("Not-equals sign")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "leq"
-    }, i18n__namespace.doNotTranslate("\\leq")), "LEQ"];
+    }, i18n__namespace.doNotTranslate("\\leq")), "LEQ", i18n__namespace._("Less than or equal to sign")];
   }, () => {
     const {
       TeX
     } = getDependencies();
     return [/*#__PURE__*/React__namespace.createElement(TeX, {
       key: "geq"
-    }, i18n__namespace.doNotTranslate("\\geq")), "GEQ"];
+    }, i18n__namespace.doNotTranslate("\\geq")), "GEQ", i18n__namespace._("Greater than or equal to sign")];
   }]
 };
 const buttonSetsPropType = PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(___default["default"](buttonSets).keys()));
@@ -408,7 +406,8 @@ class TexButtons extends React__namespace.Component {
         // @ts-expect-error [FEI-5003] - TS2533 - Object is possibly 'null' or 'undefined'. | TS2339 - Property 'key' does not exist on type 'boolean | ReactChild | ReactFragment | ReactPortal'.
         ,
         key: symbol[0].key,
-        type: "button"
+        type: "button",
+        "aria-label": symbol[2]
       }, symbol[0]);
     }));
     const buttonPopup = ___default["default"](buttonRows).map((row, i) => {
@@ -444,6 +443,8 @@ class MathInput extends React__namespace.Component {
   constructor() {
     super(...arguments);
     _defineProperty(this, "mouseDown", void 0);
+    _defineProperty(this, "__mathFieldWrapperRef", null);
+    _defineProperty(this, "__mathField", null);
     _defineProperty(this, "state", {
       focused: false
     });
@@ -498,12 +499,11 @@ class MathInput extends React__namespace.Component {
       return this.state.focused;
     });
     _defineProperty(this, "insert", value => {
-      // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
       const input = this.mathField();
       const inputModifier = customKeyTranslator[value];
       if (inputModifier) {
         inputModifier(input, value);
-        input.focus();
+        input === null || input === void 0 ? void 0 : input.focus();
         return;
       }
 
@@ -514,131 +514,99 @@ class MathInput extends React__namespace.Component {
       if (___default["default"](value).isFunction()) {
         value(input);
       } else if (value[0] === "\\") {
-        input.cmd(value).focus();
+        input === null || input === void 0 ? void 0 : input.cmd(value).focus();
       } else {
-        input.write(value).focus();
+        input === null || input === void 0 ? void 0 : input.write(value).focus();
+      }
+      input === null || input === void 0 ? void 0 : input.focus();
+    });
+    _defineProperty(this, "mathField", () => {
+      if (!this.__mathField && this.__mathFieldWrapperRef) {
+        // Initialize MathQuill.MathField instance
+        this.__mathField = mathInput.createMathField(this.__mathFieldWrapperRef, baseConfig => ({
+          ...baseConfig,
+          handlers: {
+            edit: mathField => {
+              // This handler is guaranteed to be called on change, but
+              // unlike React it sometimes generates false positives.
+              // One of these is on initialization (with an empty string
+              // value), so we have to guard against that below.
+              let value = mathField.latex();
+
+              // Provide a MathQuill-compatible way to generate the
+              // not-equals sign without pasting unicode or typing TeX
+              value = value.replace(/<>/g, "\\ne");
+
+              // Use the specified symbol to represent multiplication
+              // TODO(alex): Add an option to disallow variables, in
+              // which case 'x' should get converted to '\\times'
+              if (this.props.convertDotToTimes) {
+                value = value.replace(/\\cdot/g, "\\times");
+
+                // Preserve cursor position in the common case:
+                // typing '*' to insert a multiplication sign.
+                // We do this by modifying internal MathQuill state
+                // directly, instead of waiting for `.latex()` to be
+                // called in `componentDidUpdate()`.
+                const left = mathField.__controller.cursor[mathInput.mathQuillInstance.L];
+                if (left && left.ctrlSeq === "\\cdot ") {
+                  mathField.__controller.backspace();
+                  mathField.cmd("\\times");
+                }
+              } else {
+                value = value.replace(/\\times/g, "\\cdot");
+              }
+              if (this.props.value !== value) {
+                this.props.onChange(value);
+              }
+            },
+            enter: () => {
+              // NOTE(kevinb): This isn't how answers to exercises are
+              // submitted.  The actual mechanism for this can be found
+              // in exercise-problem-template.jsx, see `handleSubmit`.
+
+              // This handler is called when the user presses the enter
+              // key. Since this isn't an actual <input> element, we have
+              // to manually trigger the usually automatic form submit.
+              if (this.__mathFieldWrapperRef) {
+                $__default["default"](this.__mathFieldWrapperRef).submit();
+              }
+            },
+            upOutOf: mathField => {
+              // This handler is called when the user presses the up
+              // arrow key, but there is nowhere in the expression to go
+              // up to (no numerator or exponent). For ease of use,
+              // interpret this as an attempt to create an exponent.
+              mathField.typedText("^");
+            }
+          }
+        }));
       }
-      input.focus();
-    });
-    _defineProperty(this, "mathField", options => {
-      // The MathQuill API is now "versioned" through its own "InterVer"
-      // system.
-      // See: https://github.com/mathquill/mathquill/pull/459
-      const MQ = MathQuill__default["default"].getInterface(2);
-
-      // MathQuill.MathField takes a DOM node, MathQuill-ifies it if it's
-      // seeing that node for the first time, then returns the associated
-      // MathQuill object for that node. It is stable - will always return
-      // the same object when called on the same DOM node.
-      // eslint-disable-next-line react/no-string-refs
-      return MQ.MathField(ReactDOM__default["default"].findDOMNode(this.refs.mathinput), options);
+      return this.__mathField;
     });
     _defineProperty(this, "focus", () => {
-      // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
-      this.mathField().focus();
+      var _this$mathField;
+      (_this$mathField = this.mathField()) === null || _this$mathField === void 0 ? void 0 : _this$mathField.focus();
       this.setState({
         focused: true
       });
     });
     _defineProperty(this, "blur", () => {
-      // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
-      this.mathField().blur();
+      var _this$mathField2;
+      (_this$mathField2 = this.mathField()) === null || _this$mathField2 === void 0 ? void 0 : _this$mathField2.blur();
       this.setState({
         focused: false
       });
     });
   }
   componentDidMount() {
+    var _this$mathField3;
     window.addEventListener("mousedown", this.handleMouseDown);
     window.addEventListener("mouseup", this.handleMouseUp);
-    let initialized = false;
-
-    // Initialize MathQuill.MathField instance
-    this.mathField({
-      // LaTeX commands that, when typed, are immediately replaced by the
-      // appropriate symbol. This does not include ln, log, or any of the
-      // trig functions; those are always interpreted as commands.
-      autoCommands: "pi theta phi sqrt nthroot",
-      // Pop the cursor out of super/subscripts on arithmetic operators
-      // or (in)equalities.
-      charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
-      // Prevent excessive super/subscripts or fractions from being
-      // created without operands, e.g. when somebody holds down a key
-      supSubsRequireOperand: true,
-      // The name of this option is somewhat misleading, as tabbing in
-      // MathQuill breaks you out of a nested context (fraction/script)
-      // if you're in one, but moves focus to the next input if you're
-      // not. Spaces (with this option enabled) are just ignored in the
-      // latter case.
-      //
-      // TODO(alex): In order to allow inputting mixed numbers, we will
-      // have to accept spaces in certain cases. The desired behavior is
-      // still to escape nested contexts if currently in one, but to
-      // insert a space if not (we don't expect mixed numbers in nested
-      // contexts). We should also limit to one consecutive space.
-      spaceBehavesLikeTab: true,
-      handlers: {
-        edited: mathField => {
-          // This handler is guaranteed to be called on change, but
-          // unlike React it sometimes generates false positives.
-          // One of these is on initialization (with an empty string
-          // value), so we have to guard against that below.
-          let value = mathField.latex();
-
-          // Provide a MathQuill-compatible way to generate the
-          // not-equals sign without pasting unicode or typing TeX
-          value = value.replace(/<>/g, "\\ne");
-
-          // Use the specified symbol to represent multiplication
-          // TODO(alex): Add an option to disallow variables, in
-          // which case 'x' should get converted to '\\times'
-          if (this.props.convertDotToTimes) {
-            value = value.replace(/\\cdot/g, "\\times");
-
-            // Preserve cursor position in the common case:
-            // typing '*' to insert a multiplication sign.
-            // We do this by modifying internal MathQuill state
-            // directly, instead of waiting for `.latex()` to be
-            // called in `componentDidUpdate()`.
-            const left = mathField.__controller.cursor[MathQuill__default["default"].L];
-            if (left && left.ctrlSeq === "\\cdot ") {
-              mathField.__controller.backspace();
-              mathField.cmd("\\times");
-            }
-          } else {
-            value = value.replace(/\\times/g, "\\cdot");
-          }
-          if (initialized && this.props.value !== value) {
-            this.props.onChange(value);
-          }
-        },
-        enter: () => {
-          // NOTE(kevinb): This isn't how answers to exercises are
-          // submitted.  The actual mechanism for this can be found
-          // in exercise-problem-template.jsx, see `handleSubmit`.
-
-          // This handler is called when the user presses the enter
-          // key. Since this isn't an actual <input> element, we have
-          // to manually trigger the usually automatic form submit.
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2339 - Property 'submit' does not exist on type 'JQueryStatic'.
-          $__default["default"](ReactDOM__default["default"].findDOMNode(this.refs.mathinput)).submit();
-        },
-        upOutOf: mathField => {
-          // This handler is called when the user presses the up
-          // arrow key, but there is nowhere in the expression to go
-          // up to (no numerator or exponent). For ease of use,
-          // interpret this as an attempt to create an exponent.
-          mathField.typedText("^");
-        }
-      }
-    });
 
     // Ideally, we would be able to pass an initial value directly into
-    // the constructor above
-    // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
-    this.mathField().latex(this.props.value);
-    initialized = true;
+    // the constructor
+    (_this$mathField3 = this.mathField()) === null || _this$mathField3 === void 0 ? void 0 : _this$mathField3.latex(this.props.value);
   }
   componentWillUnmount() {
     window.removeEventListener("mousedown", this.handleMouseDown);
@@ -681,10 +649,8 @@ class MathInput extends React__namespace.Component {
         display: "inline-block"
       }
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: className
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "mathinput",
+      className: className,
+      ref: ref => this.__mathFieldWrapperRef = ref,
       "aria-label": this.props.labelText,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur
@@ -3456,7 +3422,7 @@ const DeprecationMixin$1 = {
 /**
  * Approximate equality on numbers and primitives.
  */
-function eq$1(x, y) {
+function eq$2(x, y) {
   if (typeof x === "number" && typeof y === "number") {
     return Math.abs(x - y) < 1e-9;
   }
@@ -3467,13 +3433,13 @@ function eq$1(x, y) {
  * Deep approximate equality on primitives, numbers, arrays, and objects.
  * Recursive.
  */
-function deepEq$5(x, y) {
+function deepEq$6(x, y) {
   if (Array.isArray(x) && Array.isArray(y)) {
     if (x.length !== y.length) {
       return false;
     }
     for (let i = 0; i < x.length; i++) {
-      if (!deepEq$5(x[i], y[i])) {
+      if (!deepEq$6(x[i], y[i])) {
         return false;
       }
     }
@@ -3483,7 +3449,7 @@ function deepEq$5(x, y) {
     return false;
   }
   if (typeof x === "function" && typeof y === "function") {
-    return eq$1(x, y);
+    return eq$2(x, y);
   }
   if (typeof x === "function" || typeof y === "function") {
     return false;
@@ -3491,16 +3457,16 @@ function deepEq$5(x, y) {
   if (typeof x === "object" && typeof y === "object" && !!x && !!y) {
     return x === y || ___default["default"].all(x, function (v, k) {
       // @ts-expect-error [FEI-5003] - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
-      return deepEq$5(y[k], v);
+      return deepEq$6(y[k], v);
     }) && ___default["default"].all(y, function (v, k) {
       // @ts-expect-error [FEI-5003] - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
-      return deepEq$5(x[k], v);
+      return deepEq$6(x[k], v);
     });
   }
   if (typeof x === "object" && !!x || typeof y === "object" && !!y) {
     return false;
   }
-  return eq$1(x, y);
+  return eq$2(x, y);
 }
 
 /**
@@ -3818,8 +3784,8 @@ const Util = {
   tickStepFromNumTicks,
   constrainedTickStepsFromTickSteps,
   DeprecationMixin: DeprecationMixin$1,
-  eq: eq$1,
-  deepEq: deepEq$5,
+  eq: eq$2,
+  deepEq: deepEq$6,
   parseQueryString,
   updateQueryString: updateQueryString$2,
   strongEncodeURIComponent,
@@ -14076,7 +14042,7 @@ ___default["default"].extend(MovableAngle.prototype, {
 
 /* eslint-disable @babel/no-invalid-this */
 const nestedMap$1 = Util.nestedMap;
-const deepEq$4 = Util.deepEq;
+const deepEq$5 = Util.deepEq;
 
 /**
  * A base class for all Graphie Movables
@@ -14173,7 +14139,7 @@ const createSimpleClass = function (addFunction) {
       this._prevProps = this.props;
     },
     modify: function (graphie) {
-      if (!deepEq$4(this.props, this._prevProps)) {
+      if (!deepEq$5(this.props, this._prevProps)) {
         this.remove();
         this.add(graphie);
         this._prevProps = this.props;
@@ -16448,7 +16414,7 @@ var Movables = {
 const GraphieMovable = GraphieClasses.GraphieMovable;
 const createGraphie = GraphUtils.createGraphie;
 const {
-  deepEq: deepEq$3,
+  deepEq: deepEq$4,
   nestedMap
 } = Util;
 const {
@@ -16683,7 +16649,7 @@ class Graphie extends React__namespace.Component {
     if (this.props.setup !== prevProps.setup) {
       Log.error("<Graphie> was given a new setup function. " + "This is a bad idea; please refactor your code to give " + "the same setup function reference to <Graphie> on " + "every render.", Errors.Internal);
     }
-    if (!deepEq$3(this.props.options, prevProps.options) || !deepEq$3(this.props.box, prevProps.box) || !deepEq$3(this.props.range, prevProps.range)) {
+    if (!deepEq$4(this.props.options, prevProps.options) || !deepEq$4(this.props.box, prevProps.box) || !deepEq$4(this.props.range, prevProps.range)) {
       this._setupGraphie();
     }
     this._updateMovables();
@@ -21612,7 +21578,11 @@ class NumericInput extends React__namespace.Component {
     return answerStrings[0];
   }
   static validate(useInput, rubric) {
-    const allAnswerForms = answerFormButtons.map(e => e["value"]);
+    const allAnswerForms = answerFormButtons.map(e => e["value"])
+    // Don't default to validating the answer as a pi answer
+    // if answerForm isn't set on the answer
+    // https://khanacademy.atlassian.net/browse/LC-691
+    .filter(e => e !== "pi");
     const createValidator = answer => {
       const stringAnswer = "".concat(answer.value);
       return KhanAnswerTypes.number.createValidatorFunctional(stringAnswer, {
@@ -27849,36 +27819,29 @@ _defineProperty(Graph, "defaultProps", {
   isMobile: false
 });
 
+/**
+ * A collection of geomtry-related utility functions
+ */
 const {
-  DeprecationMixin
+  eq: eq$1,
+  deepEq: deepEq$3
 } = Util;
-const TRASH_ICON_URI = "https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png";
-const defaultBackgroundImage$1 = {
-  url: null
-};
-const eq = Util.eq;
-const deepEq$2 = Util.deepEq;
-const UNLIMITED = "unlimited";
 
-// Sample background image:
-// https://ka-perseus-graphie.s3.amazonaws.com/29c1b0fcd17fe63df0f148fe357044d5d5c7d0bb.png
+// This should really be a readonly tuple of [number, number]
+
+// a, b, c
 
-function ccw(a, b, c) {
-  return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
-}
-function collinear(a, b, c) {
-  return eq(ccw(a, b, c), 0);
-}
 function sign(val) {
-  if (eq(val, 0)) {
+  if (eq$1(val, 0)) {
     return 0;
   }
   return val > 0 ? 1 : -1;
 }
-
-// default to defaultValue if actual is null or undefined
-function defaultVal(actual, defaultValue) {
-  return actual == null ? defaultValue : actual;
+function ccw(a, b, c) {
+  return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
+}
+function collinear(a, b, c) {
+  return eq$1(ccw(a, b, c), 0);
 }
 
 // Given rect bounding points A and B, whether point C is inside the rect
@@ -27891,14 +27854,12 @@ function pointInRect(a, b, c) {
 function intersects(ab, cd) {
   const triplets = [[ab[0], ab[1], cd[0]], [ab[0], ab[1], cd[1]], [cd[0], cd[1], ab[0]], [cd[0], cd[1], ab[1]]];
   const orientations = ___default["default"].map(triplets, function (triplet) {
-    // @ts-expect-error [FEI-5003] - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
     return sign(ccw(...triplet));
   });
   if (orientations[0] !== orientations[1] && orientations[2] !== orientations[3]) {
     return true;
   }
   for (let i = 0; i < 4; i++) {
-    // @ts-expect-error [FEI-5003] - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
     if (orientations[i] === 0 && pointInRect(...triplets[i])) {
       return true;
     }
@@ -27976,13 +27937,13 @@ function similar(coords1, coords2, tolerance) {
     angles = rotate(angles, i);
     // @ts-expect-error [FEI-5003] - TS4104 - The type 'readonly number[]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.
     sides = rotate(sides, i);
-    if (deepEq$2(angles1, angles)) {
+    if (deepEq$3(angles1, angles)) {
       const sidePairs = ___default["default"].zip(sides1, sides);
       const factors = ___default["default"].map(sidePairs, function (pair) {
         return pair[0] / pair[1];
       });
       const same = ___default["default"].all(factors, function (factor) {
-        return eq(factors[0], factor);
+        return eq$1(factors[0], factor);
       });
       const congruentEnough = ___default["default"].all(sidePairs, function (pair) {
         return kmath.number.equal(pair[0], pair[1], tolerance);
@@ -27995,11 +27956,6 @@ function similar(coords1, coords2, tolerance) {
   return false;
 }
 
-// Less than or approximately equal
-function leq(a, b) {
-  return a < b || eq(a, b);
-}
-
 // Given triangle with sides ABC return angle opposite side C in degrees
 function lawOfCosines(a, b, c) {
   return Math.acos((a * a + b * b - c * c) / (2 * a * b)) * 180 / Math.PI;
@@ -28039,13 +27995,8 @@ function rotate(array, n) {
   n = typeof n === "undefined" ? 1 : n % array.length;
   return array.slice(n).concat(array.slice(0, n));
 }
-function capitalize(str) {
-  return str.replace(/(?:^|-)(.)/g, function (match, letter) {
-    return letter.toUpperCase();
-  });
-}
 function getLineEquation(first, second) {
-  if (eq(first[0], second[0])) {
+  if (eq$1(first[0], second[0])) {
     return "x = " + first[0].toFixed(3);
   }
   const m = (second[1] - first[1]) / (second[0] - first[0]);
@@ -28074,6 +28025,35 @@ firstPoints, secondPoints) {
   const y = ((x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4)) / determinant;
   return "Intersection: (" + x.toFixed(3) + ", " + y.toFixed(3) + ")";
 }
+
+const {
+  DeprecationMixin
+} = Util;
+const TRASH_ICON_URI = "https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png";
+const defaultBackgroundImage$1 = {
+  url: null
+};
+const eq = Util.eq;
+const deepEq$2 = Util.deepEq;
+const UNLIMITED = "unlimited";
+
+// Sample background image:
+// https://ka-perseus-graphie.s3.amazonaws.com/29c1b0fcd17fe63df0f148fe357044d5d5c7d0bb.png
+
+// default to defaultValue if actual is null or undefined
+function defaultVal(actual, defaultValue) {
+  return actual == null ? defaultValue : actual;
+}
+
+// Less than or approximately equal
+function leq(a, b) {
+  return a < b || eq(a, b);
+}
+function capitalize(str) {
+  return str.replace(/(?:^|-)(.)/g, function (match, letter) {
+    return letter.toUpperCase();
+  });
+}
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
@@ -29236,17 +29216,6 @@ class InteractiveGraph extends React__namespace.Component {
       ___default["default"].invoke(this.points, "remove");
       (_this$angle2 = this.angle) === null || _this$angle2 === void 0 ? void 0 : _this$angle2.remove();
     });
-    _defineProperty(this, "toggleShowAngles", () => {
-      if (this.props.graph.type !== "polygon") {
-        throw makeInvalidTypeError("toggleShowAngles", "polygon");
-      }
-      const graph = ___default["default"].extend({}, this.props.graph, {
-        showAngles: !this.props.graph.showAngles
-      });
-      this.onChange({
-        graph: graph
-      });
-    });
     _defineProperty(this, "toggleShowSides", () => {
       if (this.props.graph.type !== "polygon") {
         throw makeInvalidTypeError("toggleShowSides", "polygon");
@@ -45840,7 +45809,7 @@ const styles$1 = aphrodite.StyleSheet.create({
   }
 });
 
-/* eslint-disable react/prop-types */
+/* eslint-disable @babel/no-invalid-this */
 
 /* A checkbox that syncs its value to props using the
  * renderer's onChange method, and gets the prop name