@khanacademy/perseus 23.5.0 → 24.0.0

package/dist/es/index.js

@@ -520,8 +520,7 @@ class InnerMathInput extends React.Component {
       active: false
     }) : /*#__PURE__*/React.createElement(Clickable, {
       "aria-label": this.state.keypadOpen ? this.context.strings.closeKeypad : this.context.strings.openKeypad,
-      "aria-checked": this.state.keypadOpen,
-      role: "switch",
+      role: "button",
       onClick: () => this.state.keypadOpen ? this.closeKeypad() : this.openKeypad()
     }, props => /*#__PURE__*/React.createElement(MathInputIcon, _extends({
       active: this.state.keypadOpen
@@ -20964,254 +20963,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 handler(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 handler(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.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      focused: false,
-      selectorNamespace: _.uniqueId("math-output")
-    };
-    this._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;
-    };
-    this._getDisplayValue = value => {
-      // Cast from (potentially a) number to string
-      let displayText;
-      if (value != null) {
-        displayText = "" + value;
-      } else {
-        displayText = "";
-      }
-      return ModifyTex(displayText);
-    };
-    this.getValue = () => {
-      return this.props.value;
-    };
-    this.focus = () => {
-      if (!this.state.focused) {
-        this.props.onFocus();
-        this._bindBlurHandler();
-        this.setState({
-          focused: true
-        });
-      }
-    };
-    this.blur = () => {
-      if (this.state.focused) {
-        this.props.onBlur();
-        this._unbindBlurHandler();
-        this.setState({
-          focused: false
-        });
-      }
-    };
-    this._bindBlurHandler = () => {
-      $(document).bind("vclick." + this.state.selectorNamespace, e => {
-        // Detect whether the target has our React DOM node as a parent
-        const $closestWidget = $(e.target).closest(
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        ReactDOM__default.findDOMNode(this));
-        if (!$closestWidget.length) {
-          this.blur();
-        }
-      });
-    };
-    this._unbindBlurHandler = () => {
-      $(document).unbind("." + this.state.selectorNamespace);
-    };
-  }
-  render() {
-    const divStyle = {
-      textAlign: "center"
-    };
-    const {
-      TeX
-    } = getDependencies();
-    return /*#__PURE__*/React.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.createElement("div", {
-      style: divStyle
-    }, /*#__PURE__*/React.createElement(TeX, null, this._getDisplayValue(this.props.value))));
-  }
-  componentWillUnmount() {
-    this._unbindBlurHandler();
-  }
-}
-MathOutput.defaultProps = {
-  value: "",
-  onFocus: function () {},
-  onBlur: function () {}
-};
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 let lastId = 0;
 function uniqueIdForInput(prefix = "input-") {
@@ -21566,12 +21317,6 @@ class InputWithExamples extends React.Component {
       return `input-with-examples-${btoa(this.props.id).replace(/=/g, "")}`;
     };
     this._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) {
@@ -21582,8 +21327,7 @@ class InputWithExamples extends React.Component {
       }
       return className;
     };
-    this._getPropsForInputType = () => {
-      // Minimal set of props, used by each input type
+    this._renderInput = () => {
       const id = this._getUniqueId();
       const inputProps = {
         id: id,
@@ -21595,52 +21339,15 @@ class InputWithExamples extends React.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
-      _.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 _.extend({
-          buttonSet: this.props.buttonSet,
-          buttonsVisible: this.props.buttonsVisible,
-          convertDotToTimes: this.props.convertDotToTimes
-        }, inputProps);
-      }
-      if (this.props.type === "text") {
-        return _.extend({
-          autoCapitalize: "off",
-          autoComplete: "off",
-          autoCorrect: "off",
-          spellCheck: "false"
-        }, inputProps);
-      }
-    };
-    this._getComponentForInputType = () => {
-      switch (this.props.type) {
-        case "tex":
-          return MathOutput;
-        case "math":
-          return MathInput;
-        case "text":
-          return TextInput;
-        default:
-          this.props.type;
-          return null;
-      }
-    };
-    this._renderInput = () => {
-      const inputProps = this._getPropsForInputType();
-      const InputComponent = this._getComponentForInputType();
-      return /*#__PURE__*/React.createElement(InputComponent, inputProps);
+        onTouchStart: captureScratchpadTouchStart$2,
+        autoCapitalize: "off",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: "false"
+      };
+      return /*#__PURE__*/React.createElement(TextInput, inputProps);
     };
     this._handleFocus = () => {
       this.props.onFocus();
@@ -21682,14 +21389,6 @@ class InputWithExamples extends React.Component {
   }
   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 = _.map(this.props.examples, example => {
       return "- " + example;
     }).join("\n");
@@ -21716,7 +21415,6 @@ class InputWithExamples extends React.Component {
 }
 InputWithExamples.contextType = PerseusI18nContext;
 InputWithExamples.defaultProps = {
-  type: "text",
   shouldShowExamples: true,
   onFocus: function () {},
   onBlur: function () {},
@@ -21805,6 +21503,161 @@ SimpleKeypadInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.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 handler(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 handler(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 = {
@@ -21983,7 +21836,6 @@ class InputNumber extends React.Component {
       value: this.props.currentValue,
       onChange: this.handleChange,
       style: inputStyles,
-      type: "text",
       examples: this.examples(),
       shouldShowExamples: this.shouldShowExamples(),
       onFocus: this._handleFocus,
@@ -22392,7 +22244,6 @@ class NumericInput extends React.Component {
       value: this.props.currentValue,
       onChange: this.handleChange,
       labelText: labelText,
-      type: "text",
       examples: this.examples(),
       shouldShowExamples: this.shouldShowExamples(),
       onFocus: this._handleFocus,
@@ -29120,6 +28971,10 @@ function snap(snapStep, point) {
   return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
 }
 
+function useDraggable(params) {
+  return useMovable(params);
+}
+
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
 // graph.
 const hitboxSizePx = 48;
@@ -29273,7 +29128,7 @@ function useControlPoint(point, color, onMovePoint) {
   } = useGraphConfig();
   const [focused, setFocused] = useState(false);
   const keyboardHandleRef = useRef(null);
-  useMovable({
+  useDraggable({
     gestureTarget: keyboardHandleRef,
     point,
     onMove: onMovePoint,
@@ -29282,7 +29137,7 @@ function useControlPoint(point, color, onMovePoint) {
   const visiblePointRef = useRef(null);
   const {
     dragging
-  } = useMovable({
+  } = useDraggable({
     gestureTarget: visiblePointRef,
     point,
     onMove: onMovePoint,
@@ -29336,7 +29191,7 @@ const Line$1 = props => {
   const line = useRef(null);
   const {
     dragging
-  } = useMovable({
+  } = useDraggable({
     gestureTarget: line,
     point: start,
     onMove: newPoint => {
@@ -29676,7 +29531,7 @@ const StyledMovablePoint = props => {
   const snapToValue = snapTo != null ? snapTo : "grid";
   const {
     dragging
-  } = useMovable({
+  } = useDraggable({
     gestureTarget: elementRef,
     point,
     onMove,
@@ -29718,7 +29573,7 @@ const PolygonGraph = props => {
   const snapToValue = snapTo != null ? snapTo : "grid";
   const {
     dragging
-  } = useMovable({
+  } = useDraggable({
     gestureTarget: ref,
     point: dragReferencePoint,
     onMove: newPoint => {
@@ -29881,7 +29736,7 @@ function MovableCircle(props) {
   const draggableRef = useRef(null);
   const {
     dragging
-  } = useMovable({
+  } = useDraggable({
     gestureTarget: draggableRef,
     point: center,
     onMove,
@@ -30012,10 +29867,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.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Plot$3.OfX, {
-    y: x => computeSine(x, coeffs),
+    y: x => computeSine(x, coeffRef.current),
     color: color.blue
   }), coords.map((coord, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
     key: "point-" + i,
@@ -30042,6 +29911,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]));
@@ -31515,11 +31389,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;
         }
@@ -31528,7 +31405,7 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: boundAndSnapToGrid(destination, state)
+            newValue: boundDestination
           })
         });
       }
@@ -31536,7 +31413,10 @@ function doMovePoint(state, action) {
       {
         // Set up the new coords and check if the quadratic coefficients are valid
         const _newCoords2 = [...state.coords];
-        _newCoords2[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);
+        _newCoords2[action.index] = boundDestination;
         const QuadraticCoefficients = getQuadraticCoefficients(_newCoords2);
 
         // If the new destination results in an invalid quadratic equation, we don't want to move the point
@@ -31548,7 +31428,7 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: boundAndSnapToGrid(action.destination, state)
+            newValue: boundDestination
           })
         });
       }
@@ -31975,6 +31855,10 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
   const numSegments = graph.type === "segment" ? graph.numSegments : null;
+  const numSides = graph.type === "polygon" ? graph.numSides : null;
+  const snapTo = graph.type === "polygon" ? graph.snapTo : null;
+  const showAngles = graph.type === "polygon" ? graph.showAngles : null;
+  const showSides = graph.type === "polygon" ? graph.showSides : null;
   const originalPropsRef = useRef(props);
   const latestPropsRef = useLatestRef(props);
   useEffect(() => {
@@ -31985,7 +31869,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (latestPropsRef.current !== originalPropsRef.current) {
       dispatch(reinitialize(latestPropsRef.current));
     }
-  }, [graph.type, numSegments, latestPropsRef]);
+  }, [graph.type, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef]);
   return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -33360,6 +33244,12 @@ class InteractiveGraph extends React.Component {
   }
   render() {
     var _this$props$apiOption;
+    if (this.props.graph.type === "polygon" && this.props.graph.numSides === "unlimited") {
+      return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
+        ref: this.legacyGraphRef
+      }, this.props));
+    }
+
     // Mafs shim
     if ((_this$props$apiOption = this.props.apiOptions) != null && (_this$props$apiOption = _this$props$apiOption.flags) != null && (_this$props$apiOption = _this$props$apiOption["mafs"]) != null && _this$props$apiOption[this.props.graph.type]) {
       const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
@@ -44152,7 +44042,7 @@ const init = function init(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 = "24.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {