@khanacademy/perseus 23.5.0 → 23.6.0

package/dist/index.js

@@ -21203,251 +21203,6 @@ const styles$B = {
   }
 };
 
-/*
- * In this file, an `expression` is some portion of valid TeX enclosed in
- * curly brackets.
- */
-
-/*
- * Find the index at which an expression ends, i.e., has an unmatched
- * closing curly bracket. This method assumes that we start with a non-open
- * bracket character and end when we've seen more left than right brackets
- * (rather than assuming that we start with a bracket character and wait for
- * bracket equality).
- */
-function findEndpoint(tex, currentIndex) {
-  let bracketDepth = 0;
-  for (let i = currentIndex, len = tex.length; i < len; i++) {
-    const c = tex[i];
-    if (c === "{") {
-      bracketDepth++;
-    } else if (c === "}") {
-      bracketDepth--;
-    }
-    if (bracketDepth < 0) {
-      return i;
-    }
-  }
-  // If we never see unbalanced curly brackets, default to the
-  // entire string
-  return tex.length;
-}
-
-/*
- * Parses an individual set of curly brackets into TeX.
- */
-function parseNextExpression(tex, currentIndex, handler) {
-  // Find the first '{' and grab subsequent TeX
-  // Ex) tex: '{3}{7}', and we want the '3'
-  const openBracketIndex = tex.indexOf("{", currentIndex);
-  const nextExpIndex = openBracketIndex + 1;
-
-  // Truncate to only contain remaining TeX
-  const endpoint = findEndpoint(tex, nextExpIndex);
-  const expressionTeX = tex.substring(nextExpIndex, endpoint);
-  const parsedExp = walkTex(expressionTeX, handler);
-  return {
-    endpoint: endpoint,
-    expression: parsedExp
-  };
-}
-function getNextFracIndex(tex, currentIndex) {
-  const dfrac = "\\dfrac";
-  const frac = "\\frac";
-  const nextFrac = tex.indexOf(frac, currentIndex);
-  const nextDFrac = tex.indexOf(dfrac, currentIndex);
-  if (nextFrac > -1 && nextDFrac > -1) {
-    return Math.min(nextFrac, nextDFrac);
-  }
-  if (nextFrac > -1) {
-    return nextFrac;
-  }
-  if (nextDFrac > -1) {
-    return nextDFrac;
-  }
-  return -1;
-}
-function walkTex(tex, handler) {
-  if (!tex) {
-    return "";
-  }
-
-  // Ex) tex: '2 \dfrac {3}{7}'
-  let parsedString = "";
-  let currentIndex = 0;
-  let nextFrac = getNextFracIndex(tex, currentIndex);
-
-  // For each \dfrac, find the two expressions (wrapped in {}) and recur
-  while (nextFrac > -1) {
-    // Gather first fragment, preceding \dfrac
-    // Ex) parsedString: '2 '
-    parsedString += tex.substring(currentIndex, nextFrac);
-
-    // Remove everything preceding \dfrac, which has been parsed
-    currentIndex = nextFrac;
-
-    // Parse first expression and move index past it
-    // Ex) firstParsedExpression.expression: '3'
-    const firstParsedExpression = parseNextExpression(tex, currentIndex, handler);
-    currentIndex = firstParsedExpression.endpoint + 1;
-
-    // Parse second expression
-    // Ex) secondParsedExpression.expression: '7'
-    const secondParsedExpression = parseNextExpression(tex, currentIndex, handler);
-    currentIndex = secondParsedExpression.endpoint + 1;
-
-    // Add expressions to running total of parsed expressions
-    if (parsedString.length) {
-      parsedString += " ";
-    }
-
-    // Apply a custom handler based on the parsed subexpressions
-    parsedString += handler(firstParsedExpression.expression, secondParsedExpression.expression);
-
-    // Find next DFrac, relative to currentIndex
-    nextFrac = getNextFracIndex(tex, currentIndex);
-  }
-
-  // Add remaining TeX, which is \dfrac-free
-  parsedString += tex.slice(currentIndex);
-  return parsedString;
-}
-
-/*
- * Modify a TeX expression, returning another TeX expression. The resulting
- * expression will have its innermost fractions stubbed out with \fracs
- * (as opposed to \dfracs). All other content will remain untouched.
- */
-function modifyTex(tex) {
-  function isNestedFraction(tex) {
-    return tex.indexOf("\\frac") > -1 || tex.indexOf("\\dfrac") > -1;
-  }
-  const handler = function (exp1, exp2) {
-    let prefix;
-    if (isNestedFraction(exp1) || isNestedFraction(exp2)) {
-      prefix = "\\dfrac";
-    } else {
-      prefix = "\\frac";
-    }
-    return prefix + " {" + exp1 + "}{" + exp2 + "}";
-  };
-  return walkTex(tex, handler);
-}
-
-/*
- * Parse a TeX expression into something interpretable by input-number.
- * The process is concerned with: (1) parsing fractions, i.e., \dfracs; and
- * (2) removing backslash-escaping from certain characters (right now, only
- * percent signs).
- *
- * The basic algorithm for handling \dfracs splits on \dfracs and then recurs
- * on the subsequent "expressions", i.e., the {} pairs that follow \dfrac. The
- * recursion is to allow for nested \dfrac elements.
- *
- * Backslash-escapes are removed with a simple search-and-replace.
- */
-function parseTex(tex) {
-  const handler = function (exp1, exp2) {
-    return exp1 + "/" + exp2;
-  };
-  const texWithoutFracs = walkTex(tex, handler);
-  return texWithoutFracs.replace("\\%", "%");
-}
-var TexWrangler = {
-  parseTex,
-  modifyTex
-};
-
-/* eslint-disable react/sort-comp */
-const ModifyTex = TexWrangler.modifyTex;
-class MathOutput extends React__namespace.Component {
-  static defaultProps = {
-    value: "",
-    onFocus: function () {},
-    onBlur: function () {}
-  };
-  state = {
-    focused: false,
-    selectorNamespace: ___default["default"].uniqueId("math-output")
-  };
-  _getInputClassName = () => {
-    let className = "math-output " + ClassNames.INPUT + " " + ClassNames.INTERACTIVE;
-    if (this.state.focused) {
-      className += " " + ClassNames.FOCUSED;
-    }
-    if (this.props.className) {
-      className += " " + this.props.className;
-    }
-    return className;
-  };
-  _getDisplayValue = value => {
-    // Cast from (potentially a) number to string
-    let displayText;
-    if (value != null) {
-      displayText = "" + value;
-    } else {
-      displayText = "";
-    }
-    return ModifyTex(displayText);
-  };
-  render() {
-    const divStyle = {
-      textAlign: "center"
-    };
-    const {
-      TeX
-    } = getDependencies();
-    return /*#__PURE__*/React__namespace.createElement("span", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "input",
-      className: this._getInputClassName(),
-      "aria-label": this.props.labelText,
-      onMouseDown: this.focus,
-      onTouchStart: this.focus
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      style: divStyle
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, this._getDisplayValue(this.props.value))));
-  }
-  getValue = () => {
-    return this.props.value;
-  };
-  focus = () => {
-    if (!this.state.focused) {
-      this.props.onFocus();
-      this._bindBlurHandler();
-      this.setState({
-        focused: true
-      });
-    }
-  };
-  blur = () => {
-    if (this.state.focused) {
-      this.props.onBlur();
-      this._unbindBlurHandler();
-      this.setState({
-        focused: false
-      });
-    }
-  };
-  _bindBlurHandler = () => {
-    $__default["default"](document).bind("vclick." + this.state.selectorNamespace, e => {
-      // Detect whether the target has our React DOM node as a parent
-      const $closestWidget = $__default["default"](e.target).closest(
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      ReactDOM__default["default"].findDOMNode(this));
-      if (!$closestWidget.length) {
-        this.blur();
-      }
-    });
-  };
-  _unbindBlurHandler = () => {
-    $__default["default"](document).unbind("." + this.state.selectorNamespace);
-  };
-  componentWillUnmount() {
-    this._unbindBlurHandler();
-  }
-}
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 let lastId = 0;
 function uniqueIdForInput() {
@@ -21788,7 +21543,6 @@ const {
 class InputWithExamples extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   static defaultProps = {
-    type: "text",
     shouldShowExamples: true,
     onFocus: function () {},
     onBlur: function () {},
@@ -21804,12 +21558,6 @@ class InputWithExamples extends React__namespace.Component {
     return `input-with-examples-${btoa(this.props.id).replace(/=/g, "")}`;
   };
   _getInputClassName = () => {
-    // <MathOutput> is a special component that manages its own class and
-    // state, as it's a <span> that wants to act like an <input>.
-    if (this.props.type === "tex") {
-      return this.props.className;
-    }
-
     // Otherwise, we need to add these INPUT and FOCUSED tags here.
     let className = ClassNames.INPUT + " " + ClassNames.INTERACTIVE;
     if (this.state.focused) {
@@ -21820,8 +21568,7 @@ class InputWithExamples extends React__namespace.Component {
     }
     return className;
   };
-  _getPropsForInputType = () => {
-    // Minimal set of props, used by each input type
+  _renderInput = () => {
     const id = this._getUniqueId();
     const inputProps = {
       id: id,
@@ -21833,63 +21580,18 @@ class InputWithExamples extends React__namespace.Component {
       onFocus: this._handleFocus,
       onBlur: this._handleBlur,
       disabled: this.props.disabled,
-      style: this.props.style
-    };
-    if (this.props.type === "tex") {
-      return inputProps;
-    }
-
-    // Add useful props required for MATH and TEXT modes
-    ___default["default"].extend(inputProps, {
+      style: this.props.style,
       onChange: this.props.onChange,
-      onTouchStart: captureScratchpadTouchStart$2
-    });
-
-    // And add final props that are MATH- and TEXT-specific
-    if (this.props.type === "math") {
-      return ___default["default"].extend({
-        buttonSet: this.props.buttonSet,
-        buttonsVisible: this.props.buttonsVisible,
-        convertDotToTimes: this.props.convertDotToTimes
-      }, inputProps);
-    }
-    if (this.props.type === "text") {
-      return ___default["default"].extend({
-        autoCapitalize: "off",
-        autoComplete: "off",
-        autoCorrect: "off",
-        spellCheck: "false"
-      }, inputProps);
-    }
-  };
-  _getComponentForInputType = () => {
-    switch (this.props.type) {
-      case "tex":
-        return MathOutput;
-      case "math":
-        return MathInput;
-      case "text":
-        return TextInput;
-      default:
-        this.props.type;
-        return null;
-    }
-  };
-  _renderInput = () => {
-    const inputProps = this._getPropsForInputType();
-    const InputComponent = this._getComponentForInputType();
-    return /*#__PURE__*/React__namespace.createElement(InputComponent, inputProps);
+      onTouchStart: captureScratchpadTouchStart$2,
+      autoCapitalize: "off",
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false"
+    };
+    return /*#__PURE__*/React__namespace.createElement(TextInput, inputProps);
   };
   render() {
     const input = this._renderInput();
-
-    // Static rendering, which doesn't include the 'tooltip' logic that the
-    // other types require, and is hence handled separately.
-    if (this.props.type === "tex") {
-      return input;
-    }
-
-    // Else, we need to be able to show examples
     const examplesContent = ___default["default"].map(this.props.examples, example => {
       return "- " + example;
     }).join("\n");
@@ -22025,6 +21727,161 @@ SimpleKeypadInput.propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
 
+/*
+ * In this file, an `expression` is some portion of valid TeX enclosed in
+ * curly brackets.
+ */
+
+/*
+ * Find the index at which an expression ends, i.e., has an unmatched
+ * closing curly bracket. This method assumes that we start with a non-open
+ * bracket character and end when we've seen more left than right brackets
+ * (rather than assuming that we start with a bracket character and wait for
+ * bracket equality).
+ */
+function findEndpoint(tex, currentIndex) {
+  let bracketDepth = 0;
+  for (let i = currentIndex, len = tex.length; i < len; i++) {
+    const c = tex[i];
+    if (c === "{") {
+      bracketDepth++;
+    } else if (c === "}") {
+      bracketDepth--;
+    }
+    if (bracketDepth < 0) {
+      return i;
+    }
+  }
+  // If we never see unbalanced curly brackets, default to the
+  // entire string
+  return tex.length;
+}
+
+/*
+ * Parses an individual set of curly brackets into TeX.
+ */
+function parseNextExpression(tex, currentIndex, handler) {
+  // Find the first '{' and grab subsequent TeX
+  // Ex) tex: '{3}{7}', and we want the '3'
+  const openBracketIndex = tex.indexOf("{", currentIndex);
+  const nextExpIndex = openBracketIndex + 1;
+
+  // Truncate to only contain remaining TeX
+  const endpoint = findEndpoint(tex, nextExpIndex);
+  const expressionTeX = tex.substring(nextExpIndex, endpoint);
+  const parsedExp = walkTex(expressionTeX, handler);
+  return {
+    endpoint: endpoint,
+    expression: parsedExp
+  };
+}
+function getNextFracIndex(tex, currentIndex) {
+  const dfrac = "\\dfrac";
+  const frac = "\\frac";
+  const nextFrac = tex.indexOf(frac, currentIndex);
+  const nextDFrac = tex.indexOf(dfrac, currentIndex);
+  if (nextFrac > -1 && nextDFrac > -1) {
+    return Math.min(nextFrac, nextDFrac);
+  }
+  if (nextFrac > -1) {
+    return nextFrac;
+  }
+  if (nextDFrac > -1) {
+    return nextDFrac;
+  }
+  return -1;
+}
+function walkTex(tex, handler) {
+  if (!tex) {
+    return "";
+  }
+
+  // Ex) tex: '2 \dfrac {3}{7}'
+  let parsedString = "";
+  let currentIndex = 0;
+  let nextFrac = getNextFracIndex(tex, currentIndex);
+
+  // For each \dfrac, find the two expressions (wrapped in {}) and recur
+  while (nextFrac > -1) {
+    // Gather first fragment, preceding \dfrac
+    // Ex) parsedString: '2 '
+    parsedString += tex.substring(currentIndex, nextFrac);
+
+    // Remove everything preceding \dfrac, which has been parsed
+    currentIndex = nextFrac;
+
+    // Parse first expression and move index past it
+    // Ex) firstParsedExpression.expression: '3'
+    const firstParsedExpression = parseNextExpression(tex, currentIndex, handler);
+    currentIndex = firstParsedExpression.endpoint + 1;
+
+    // Parse second expression
+    // Ex) secondParsedExpression.expression: '7'
+    const secondParsedExpression = parseNextExpression(tex, currentIndex, handler);
+    currentIndex = secondParsedExpression.endpoint + 1;
+
+    // Add expressions to running total of parsed expressions
+    if (parsedString.length) {
+      parsedString += " ";
+    }
+
+    // Apply a custom handler based on the parsed subexpressions
+    parsedString += handler(firstParsedExpression.expression, secondParsedExpression.expression);
+
+    // Find next DFrac, relative to currentIndex
+    nextFrac = getNextFracIndex(tex, currentIndex);
+  }
+
+  // Add remaining TeX, which is \dfrac-free
+  parsedString += tex.slice(currentIndex);
+  return parsedString;
+}
+
+/*
+ * Modify a TeX expression, returning another TeX expression. The resulting
+ * expression will have its innermost fractions stubbed out with \fracs
+ * (as opposed to \dfracs). All other content will remain untouched.
+ */
+function modifyTex(tex) {
+  function isNestedFraction(tex) {
+    return tex.indexOf("\\frac") > -1 || tex.indexOf("\\dfrac") > -1;
+  }
+  const handler = function (exp1, exp2) {
+    let prefix;
+    if (isNestedFraction(exp1) || isNestedFraction(exp2)) {
+      prefix = "\\dfrac";
+    } else {
+      prefix = "\\frac";
+    }
+    return prefix + " {" + exp1 + "}{" + exp2 + "}";
+  };
+  return walkTex(tex, handler);
+}
+
+/*
+ * Parse a TeX expression into something interpretable by input-number.
+ * The process is concerned with: (1) parsing fractions, i.e., \dfracs; and
+ * (2) removing backslash-escaping from certain characters (right now, only
+ * percent signs).
+ *
+ * The basic algorithm for handling \dfracs splits on \dfracs and then recurs
+ * on the subsequent "expressions", i.e., the {} pairs that follow \dfrac. The
+ * recursion is to allow for nested \dfrac elements.
+ *
+ * Backslash-escapes are removed with a simple search-and-replace.
+ */
+function parseTex(tex) {
+  const handler = function (exp1, exp2) {
+    return exp1 + "/" + exp2;
+  };
+  const texWithoutFracs = walkTex(tex, handler);
+  return texWithoutFracs.replace("\\%", "%");
+}
+var TexWrangler = {
+  parseTex,
+  modifyTex
+};
+
 /* eslint-disable react/sort-comp */
 const ParseTex$1 = TexWrangler.parseTex;
 const answerTypes = {
@@ -22145,7 +22002,6 @@ class InputNumber extends React__namespace.Component {
       value: this.props.currentValue,
       onChange: this.handleChange,
       style: inputStyles,
-      type: "text",
       examples: this.examples(),
       shouldShowExamples: this.shouldShowExamples(),
       onFocus: this._handleFocus,
@@ -22612,7 +22468,6 @@ class NumericInput extends React__namespace.Component {
       value: this.props.currentValue,
       onChange: this.handleChange,
       labelText: labelText,
-      type: "text",
       examples: this.examples(),
       shouldShowExamples: this.shouldShowExamples(),
       onFocus: this._handleFocus,
@@ -29410,6 +29265,10 @@ function snap(snapStep, point) {
   return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
 }
 
+function useDraggable(params) {
+  return mafs.useMovable(params);
+}
+
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
 // graph.
 const hitboxSizePx = 48;
@@ -29565,7 +29424,7 @@ function useControlPoint(point, color, onMovePoint) {
   } = useGraphConfig();
   const [focused, setFocused] = React.useState(false);
   const keyboardHandleRef = React.useRef(null);
-  mafs.useMovable({
+  useDraggable({
     gestureTarget: keyboardHandleRef,
     point,
     onMove: onMovePoint,
@@ -29574,7 +29433,7 @@ function useControlPoint(point, color, onMovePoint) {
   const visiblePointRef = React.useRef(null);
   const {
     dragging
-  } = mafs.useMovable({
+  } = useDraggable({
     gestureTarget: visiblePointRef,
     point,
     onMove: onMovePoint,
@@ -29628,7 +29487,7 @@ const Line$1 = props => {
   const line = React.useRef(null);
   const {
     dragging
-  } = mafs.useMovable({
+  } = useDraggable({
     gestureTarget: line,
     point: start,
     onMove: newPoint => {
@@ -29976,7 +29835,7 @@ const StyledMovablePoint = props => {
   const snapToValue = snapTo ?? "grid";
   const {
     dragging
-  } = mafs.useMovable({
+  } = useDraggable({
     gestureTarget: elementRef,
     point,
     onMove,
@@ -30018,7 +29877,7 @@ const PolygonGraph = props => {
   const snapToValue = snapTo ?? "grid";
   const {
     dragging
-  } = mafs.useMovable({
+  } = useDraggable({
     gestureTarget: ref,
     point: dragReferencePoint,
     onMove: newPoint => {
@@ -30193,7 +30052,7 @@ function MovableCircle(props) {
   const draggableRef = React.useRef(null);
   const {
     dragging
-  } = mafs.useMovable({
+  } = useDraggable({
     gestureTarget: draggableRef,
     point: center,
     onMove,
@@ -30324,10 +30183,24 @@ function SinusoidGraph(props) {
     coords
   } = graphState;
 
-  // Get the coefficients for calculating the quadratic equation
+  // The coefficients are used to calculate the sinusoid equation, plot the graph, and to indicate
+  // to content creators the currently selected "correct answer" in the Content Editor.
+  // While we should technically never have invalid coordinates, we want to ensure that
+  // we have a fallback so that the graph can still be plotted without crashing.
+  const coeffRef = React__namespace.useRef({
+    amplitude: 1,
+    angularFrequency: 1,
+    phase: 1,
+    verticalOffset: 0
+  });
   const coeffs = getSinusoidCoefficients(coords);
+
+  // If the coefficients are valid, update the reference
+  if (coeffs !== undefined) {
+    coeffRef.current = coeffs;
+  }
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
-    y: x => computeSine(x, coeffs),
+    y: x => computeSine(x, coeffRef.current),
     color: wonderBlocksTokens.color.blue
   }), coords.map((coord, i) => /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
     key: "point-" + i,
@@ -30354,6 +30227,11 @@ const getSinusoidCoefficients = coords => {
   const p1 = coords[0];
   const p2 = coords[1];
 
+  // If the x-coordinates are the same, we are unable to calculate the coefficients
+  if (p2[0] === p1[0]) {
+    return;
+  }
+
   // Resulting coefficients are canonical for this sine curve
   const amplitude = p2[1] - p1[1];
   const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));
@@ -31847,11 +31725,14 @@ function doMovePoint(state, action) {
       }
     case "sinusoid":
       {
-        // First, we need to verify that the new coordinates are not on the same vertical line
-        // If they are, we don't want to move the point
+        // First, we need to make sure to bound the new coordinates to the graph range
         const destination = action.destination;
+        const boundDestination = boundAndSnapToGrid(destination, state);
+
+        // Then, we need to verify that the new coordinates are not on the same
+        // vertical line. If they are, then we don't want to move the point
         const newCoords = [...state.coords];
-        newCoords[action.index] = action.destination;
+        newCoords[action.index] = boundDestination;
         if (newCoords[0][0] === newCoords[1][0]) {
           return state;
         }
@@ -31861,7 +31742,7 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: boundAndSnapToGrid(destination, state)
+            newValue: boundDestination
           })
         };
       }
@@ -31869,7 +31750,10 @@ function doMovePoint(state, action) {
       {
         // Set up the new coords and check if the quadratic coefficients are valid
         const newCoords = [...state.coords];
-        newCoords[action.index] = action.destination;
+
+        // Bind the new destination to the graph range/snapStep and then get the quadratic coefficients
+        const boundDestination = boundAndSnapToGrid(action.destination, state);
+        newCoords[action.index] = boundDestination;
         const QuadraticCoefficients = getQuadraticCoefficients(newCoords);
 
         // If the new destination results in an invalid quadratic equation, we don't want to move the point
@@ -31882,7 +31766,7 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: boundAndSnapToGrid(action.destination, state)
+            newValue: boundDestination
           })
         };
       }
@@ -33698,6 +33582,12 @@ class InteractiveGraph extends React__namespace.Component {
     return InteractiveGraph.validate(this.getUserInput?.(), rubric, this);
   }
   render() {
+    if (this.props.graph.type === "polygon" && this.props.graph.numSides === "unlimited") {
+      return /*#__PURE__*/React__namespace.createElement(LegacyInteractiveGraph, _extends({
+        ref: this.legacyGraphRef
+      }, this.props));
+    }
+
     // Mafs shim
     if (this.props.apiOptions?.flags?.["mafs"]?.[this.props.graph.type]) {
       const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
@@ -44497,7 +44387,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "23.5.0";
+const libVersion = "23.6.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {