@khanacademy/perseus-editor 2.2.1 → 2.3.0

package/dist/index.js

@@ -7,14 +7,17 @@ var React = require('react');
 var _ = require('underscore');
 var PropTypes = require('prop-types');
 var createReactClass = require('create-react-class');
-var $ = require('jquery');
-var ReactDOM = require('react-dom');
-var aphrodite = require('aphrodite');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
 var Color = require('@khanacademy/wonder-blocks-color');
+var aphrodite = require('aphrodite');
+var $ = require('jquery');
+var ReactDOM = require('react-dom');
 var classNames = require('classnames');
 var kmath = require('@khanacademy/kmath');
 var KAS = require('@khanacademy/kas');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var Typography = require('@khanacademy/wonder-blocks-typography');
 var Button = require('@khanacademy/wonder-blocks-button');
 var i18n$1 = require('@khanacademy/wonder-blocks-i18n');
 
@@ -42,13 +45,15 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
+var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
+var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
-var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
+var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
+var Typography__namespace = /*#__PURE__*/_interopNamespace(Typography);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
@@ -155,7 +160,7 @@ _defineProperty(DeviceFramer, "propTypes", {
   nochrome: PropTypes__default["default"].bool
 });
 
-/* eslint-disable react/prop-types */
+/* eslint-disable @babel/no-invalid-this */
 const JsonEditor = createReactClass__default["default"]({
   displayName: "JsonEditor",
   getInitialState: function () {
@@ -249,6 +254,41 @@ const JsonEditor = createReactClass__default["default"]({
   }
 });
 
+const {
+  InlineIcon: InlineIcon$c
+} = perseus.components;
+class SectionControlButton extends React__namespace.Component {
+  render() {
+    const {
+      icon,
+      onClick,
+      title
+    } = this.props;
+    return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
+      className: "section-control-button " + "simple-button " + "simple-button--small ",
+      onClick: e => {
+        e.preventDefault();
+        onClick();
+      },
+      role: "button",
+      hideDefaultFocusRing: true,
+      "aria-label": title,
+      style: styles$f.button
+    }, _ref => {
+      return /*#__PURE__*/React__namespace.createElement(InlineIcon$c, icon);
+    });
+  }
+}
+const styles$f = aphrodite.StyleSheet.create({
+  button: {
+    backgroundColor: Color__default["default"].gold,
+    margin: 2,
+    paddingRight: 10,
+    paddingLeft: 10,
+    paddingBottom: 2
+  }
+});
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -17742,110 +17782,6 @@ const DragTarget = createReactClass__default["default"]({
   }
 });
 
-class KatexErrorView extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      showErrors: false
-    });
-    _defineProperty(this, "handleToggleKatexErrors", e => {
-      this.setState({
-        showErrors: !this.state.showErrors
-      });
-    });
-  }
-  render() {
-    const {
-      errorList
-    } = this.props;
-    const {
-      showErrors
-    } = this.state;
-
-    // TODO(riley) replace with SVG icons
-    const disclosureClass = showErrors ? "icon-chevron-down" : "icon-chevron-right";
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$f.errorContainer)
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$f.title),
-      onClick: this.handleToggleKatexErrors
-    }, /*#__PURE__*/React__namespace.createElement("i", {
-      className: disclosureClass,
-      style: {
-        fontSize: 14
-      }
-    }), "\xA0 KaTeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$f.errorExplanation)
-    }, "These errors will cause your LaTeX to load really slowly for the student. Please fix them if you can. If you can\u2019t because KaTeX doesn\u2019t support the feature you need, please message Cam."), showErrors && errorList.map((e, index) => /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$f.error),
-      key: index
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        color: "red"
-      }
-    }, e.math), /*#__PURE__*/React__namespace.createElement("div", null, e.message))));
-  }
-}
-_defineProperty(KatexErrorView, "propTypes", {
-  errorList: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-    math: PropTypes__default["default"].string.isRequired,
-    message: PropTypes__default["default"].string.isRequired
-  })).isRequired
-});
-const styles$f = aphrodite.StyleSheet.create({
-  title: {
-    backgroundColor: "#eee",
-    fontSize: "1.25em",
-    padding: "4px 10px"
-  },
-  errorContainer: {
-    border: "1px solid #ddd",
-    borderTop: "none"
-  },
-  errorExplanation: {
-    padding: "4px 10px",
-    backgroundColor: "pink"
-  },
-  error: {
-    padding: "4px 10px"
-  }
-});
-
-const {
-  InlineIcon: InlineIcon$c
-} = perseus.components;
-class SectionControlButton extends React__namespace.Component {
-  render() {
-    const {
-      icon,
-      onClick,
-      title
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-      className: "section-control-button " + "simple-button " + "simple-button--small ",
-      onClick: e => {
-        e.preventDefault();
-        onClick();
-      },
-      role: "button",
-      hideDefaultFocusRing: true,
-      "aria-label": title,
-      style: styles$e.button
-    }, _ref => {
-      return /*#__PURE__*/React__namespace.createElement(InlineIcon$c, icon);
-    });
-  }
-}
-const styles$e = aphrodite.StyleSheet.create({
-  button: {
-    backgroundColor: Color__default["default"].gold,
-    margin: 2,
-    paddingRight: 10,
-    paddingLeft: 10,
-    paddingBottom: 2
-  }
-});
-
 const {
   InlineIcon: InlineIcon$b,
   PropCheckBox: PropCheckBox$e
@@ -17855,80 +17791,6 @@ const {
   iconChevronRight,
   iconTrash: iconTrash$8
 } = perseus.icons;
-
-// like [[snowman input-number 1]]
-const widgetPlaceholder = "[[\u2603 {id}]]";
-const widgetRegExp = "(\\[\\[\u2603 {id}\\]\\])";
-const rWidgetSplit = new RegExp(widgetRegExp.replace("{id}", "[a-z-]+ [0-9]+"), "g");
-const shortcutRegexp = /^\[\[([a-z-]+)$/; // like [[nu, [[int, etc
-
-const ENDS_WITH_A_PARAGRAPH = /(?:\n{2,}|^\n*)$/;
-const TRAILING_NEWLINES = /(\n*)$/;
-const LEADING_NEWLINES = /^(\n*)/;
-const commafyInteger = n => {
-  let str = n.toString();
-  if (str.length >= 5) {
-    str = str.replace(/(\d)(?=(\d{3})+$)/g, "$1{,}");
-  }
-  return str;
-};
-const makeEndWithAParagraphIfNecessary = content => {
-  if (!ENDS_WITH_A_PARAGRAPH.test(content)) {
-    const match = TRAILING_NEWLINES.exec(content);
-    if (match) {
-      const newlines = match[1];
-      return content + "\n\n".slice(0, 2 - newlines.length);
-    }
-  }
-  return content;
-};
-const makeStartWithAParagraphAlways = content => {
-  const match = LEADING_NEWLINES.exec(content);
-  if (!match) {
-    return content;
-  }
-  const newlines = match[1];
-  return "\n\n".slice(0, 2 - newlines.length) + content;
-};
-class WidgetSelect extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "handleChange", e => {
-      const widgetType = e.currentTarget.value;
-      if (widgetType === "") {
-        // TODO(alpert): Not sure if change will trigger here
-        // but might as well be safe
-        return;
-      }
-      if (this.props.onChange) {
-        this.props.onChange(widgetType);
-      }
-    });
-  }
-  shouldComponentUpdate() {
-    return false;
-  }
-  render() {
-    const widgets = perseus.Widgets.getPublicWidgets();
-    const orderedWidgetNames = ___default["default"].sortBy(___default["default"].keys(widgets), name => {
-      return widgets[name].displayName;
-    });
-    const addWidgetString = "Add a widget\u2026";
-    return /*#__PURE__*/React__namespace.createElement("select", {
-      value: "",
-      onChange: this.handleChange
-    }, /*#__PURE__*/React__namespace.createElement("option", {
-      value: ""
-    }, addWidgetString), /*#__PURE__*/React__namespace.createElement("option", {
-      disabled: true
-    }, "--"), ___default["default"].map(orderedWidgetNames, name => {
-      return /*#__PURE__*/React__namespace.createElement("option", {
-        key: name,
-        value: name
-      }, widgets[name].displayName);
-    }));
-  }
-}
 const _upgradeWidgetInfo = props => {
   // We can't call serialize here because this.refs.widget
   // doesn't exist before this component is mounted.
@@ -18063,6 +17925,150 @@ class WidgetEditor extends React__namespace.Component {
   }
 }
 
+class WidgetSelect extends React__namespace.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "handleChange", e => {
+      const widgetType = e.currentTarget.value;
+      if (widgetType === "") {
+        // TODO(alpert): Not sure if change will trigger here
+        // but might as well be safe
+        return;
+      }
+      if (this.props.onChange) {
+        this.props.onChange(widgetType);
+      }
+    });
+  }
+  shouldComponentUpdate() {
+    return false;
+  }
+  render() {
+    const widgets = perseus.Widgets.getPublicWidgets();
+    const orderedWidgetNames = ___default["default"].sortBy(___default["default"].keys(widgets), name => {
+      return widgets[name].displayName;
+    });
+    const addWidgetString = "Add a widget\u2026";
+    return /*#__PURE__*/React__namespace.createElement("select", {
+      value: "",
+      onChange: this.handleChange
+    }, /*#__PURE__*/React__namespace.createElement("option", {
+      value: ""
+    }, addWidgetString), /*#__PURE__*/React__namespace.createElement("option", {
+      disabled: true
+    }, "--"), ___default["default"].map(orderedWidgetNames, name => {
+      return /*#__PURE__*/React__namespace.createElement("option", {
+        key: name,
+        value: name
+      }, widgets[name].displayName);
+    }));
+  }
+}
+
+class KatexErrorView extends React__namespace.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
+      showErrors: false
+    });
+    _defineProperty(this, "handleToggleKatexErrors", e => {
+      this.setState({
+        showErrors: !this.state.showErrors
+      });
+    });
+  }
+  render() {
+    const {
+      errorList
+    } = this.props;
+    const {
+      showErrors
+    } = this.state;
+
+    // TODO(riley) replace with SVG icons
+    const disclosureClass = showErrors ? "icon-chevron-down" : "icon-chevron-right";
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$e.errorContainer)
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$e.title),
+      onClick: this.handleToggleKatexErrors
+    }, /*#__PURE__*/React__namespace.createElement("i", {
+      className: disclosureClass,
+      style: {
+        fontSize: 14
+      }
+    }), "\xA0 KaTeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$e.errorExplanation)
+    }, "These errors will cause your LaTeX to load really slowly for the student. Please fix them if you can. If you can\u2019t because KaTeX doesn\u2019t support the feature you need, please message Cam."), showErrors && errorList.map((e, index) => /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$e.error),
+      key: index
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        color: "red"
+      }
+    }, e.math), /*#__PURE__*/React__namespace.createElement("div", null, e.message))));
+  }
+}
+_defineProperty(KatexErrorView, "propTypes", {
+  errorList: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    math: PropTypes__default["default"].string.isRequired,
+    message: PropTypes__default["default"].string.isRequired
+  })).isRequired
+});
+const styles$e = aphrodite.StyleSheet.create({
+  title: {
+    backgroundColor: "#eee",
+    fontSize: "1.25em",
+    padding: "4px 10px"
+  },
+  errorContainer: {
+    border: "1px solid #ddd",
+    borderTop: "none"
+  },
+  errorExplanation: {
+    padding: "4px 10px",
+    backgroundColor: "pink"
+  },
+  error: {
+    padding: "4px 10px"
+  }
+});
+
+// like [[snowman input-number 1]]
+const widgetPlaceholder = "[[\u2603 {id}]]";
+const widgetRegExp = "(\\[\\[\u2603 {id}\\]\\])";
+const rWidgetSplit = new RegExp(widgetRegExp.replace("{id}", "[a-z-]+ [0-9]+"), "g");
+const shortcutRegexp = /^\[\[([a-z-]+)$/; // like [[nu, [[int, etc
+
+const ENDS_WITH_A_PARAGRAPH = /(?:\n{2,}|^\n*)$/;
+const TRAILING_NEWLINES = /(\n*)$/;
+const LEADING_NEWLINES = /^(\n*)/;
+const commafyInteger = n => {
+  let str = n.toString();
+  if (str.length >= 5) {
+    str = str.replace(/(\d)(?=(\d{3})+$)/g, "$1{,}");
+  }
+  return str;
+};
+const makeEndWithAParagraphIfNecessary = content => {
+  if (!ENDS_WITH_A_PARAGRAPH.test(content)) {
+    const match = TRAILING_NEWLINES.exec(content);
+    if (match) {
+      const newlines = match[1];
+      return content + "\n\n".slice(0, 2 - newlines.length);
+    }
+  }
+  return content;
+};
+const makeStartWithAParagraphAlways = content => {
+  const match = LEADING_NEWLINES.exec(content);
+  if (!match) {
+    return content;
+  }
+  const newlines = match[1];
+  return "\n\n".slice(0, 2 - newlines.length) + content;
+};
+
 // This is more general than the actual markdown image parsing regex,
 // which is fine for correctness since it should only mean we could
 // store extra image dimensions, unless the question is insanely
@@ -18762,11 +18768,7 @@ class Editor extends React__namespace.Component {
       // }, this);
 
       this.widgetIds = ___default["default"].keys(widgets);
-      widgetsDropDown =
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-string-refs
-      React__namespace.createElement(WidgetSelect, {
-        ref: "widgetSelect",
+      widgetsDropDown = /*#__PURE__*/React__namespace.createElement(WidgetSelect, {
         onChange: this._addWidget
       });
       const insertTemplateString = "Insert template\u2026";
@@ -27097,6 +27099,84 @@ _defineProperty(InteractionEditor, "propTypes", {
 _defineProperty(InteractionEditor, "widgetName", "interaction");
 _defineProperty(InteractionEditor, "defaultProps", defaultInteractionProps);
 
+const UNLIMITED = "unlimited";
+// Parses a string (ostensibly from some UI element that only supports string
+// types, such as a <select />) into a numeric point count or the special sigil
+// "unlimited". Note that 0 is a special case, and means "unlimited".
+const parsePointCount = points => {
+  const parsed = parseInt(points, 10);
+  if (isNaN(parsed)) {
+    return UNLIMITED;
+  }
+  return parsed === 0 ? UNLIMITED : parsed;
+};
+
+const GraphPointsCountSelector = _ref => {
+  let {
+    numPoints = 1,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/React__namespace.createElement("select", {
+    value: numPoints,
+    onChange: e => {
+      onChange(parsePointCount(e.target.value));
+    }
+  }, [...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement("option", {
+    key: n,
+    value: n
+  }, "".concat(n, " point").concat(n > 1 ? "s" : ""))), /*#__PURE__*/React__namespace.createElement("option", {
+    value: UNLIMITED
+  }, "unlimited"));
+};
+
+const GraphTypeSelector = props => {
+  return /*#__PURE__*/React__namespace.createElement("select", {
+    value: props.graphType,
+    onChange: e => {
+      const type = e.target.value;
+      props.onChange(type);
+    }
+  }, /*#__PURE__*/React__namespace.createElement("option", {
+    value: "linear"
+  }, "Linear function"), /*#__PURE__*/React__namespace.createElement("option", {
+    value: "quadratic"
+  }, "Quadratic function"), /*#__PURE__*/React__namespace.createElement("option", {
+    value: "sinusoid"
+  }, "Sinusoid function"), /*#__PURE__*/React__namespace.createElement("option", {
+    value: "circle"
+  }, "Circle"), /*#__PURE__*/React__namespace.createElement("option", {
+    value: "point"
+  }, "Point(s)"), /*#__PURE__*/React__namespace.createElement("option", {
+    value: "linear-system"
+  }, "Linear System"), /*#__PURE__*/React__namespace.createElement("option", {
+    value: "polygon"
+  }, "Polygon"), /*#__PURE__*/React__namespace.createElement("option", {
+    value: "segment"
+  }, "Line Segment(s)"), /*#__PURE__*/React__namespace.createElement("option", {
+    value: "ray"
+  }, "Ray"), /*#__PURE__*/React__namespace.createElement("option", {
+    value: "angle"
+  }, "Angle"));
+};
+
+const SegmentCountSelector = _ref => {
+  let {
+    numSegments = 1,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/React__namespace.createElement("select", {
+    key: "segment-select",
+    value: numSegments,
+    onChange: e => {
+      const num = +e.target.value;
+      onChange(num);
+    }
+  }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement("option", {
+    key: n,
+    value: n
+  }, "".concat(n, " segment").concat(n > 1 ? "s" : ""))));
+};
+
 const {
   InfoTip: InfoTip$e
 } = perseus.components;
@@ -27116,38 +27196,42 @@ const deprecatedProps = {
     };
   }
 };
-const InteractiveGraphEditor = createReactClass__default["default"]({
-  displayName: "InteractiveGraphEditor",
-  className: "perseus-widget-interactive-graph",
-  statics: {
-    widgetName: "interactive-graph"
-  },
-  getDefaultProps: function () {
-    return {
-      labels: ["x", "y"],
-      range: [[-10, 10], [-10, 10]],
-      step: [1, 1],
-      valid: true,
-      backgroundImage: defaultBackgroundImage$1,
-      markings: "graph",
-      showProtractor: false,
-      showRuler: false,
-      showTooltips: false,
-      rulerLabel: "",
-      rulerTicks: 10,
-      correct: {
-        type: "linear",
-        coords: null
-      }
-    };
-  },
-  // TODO(jack): Use versioning instead of DeprecationMixin
-  deprecatedProps: deprecatedProps,
+// [min, max]
+
+// Renders the given children in a View laid out horizontally.
+const Row = props => {
+  const {
+    children,
+    style
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      ...style,
+      flexDirection: "row",
+      marginTop: Spacing__default["default"].xSmall_8
+    }
+  }, children);
+};
+const FieldLabel = props => {
+  return /*#__PURE__*/React__namespace.createElement(Typography__namespace.LabelSmall, {
+    style: {
+      marginRight: Spacing__default["default"].xSmall_8
+    }
+  }, props.children);
+};
+class InteractiveGraphEditor extends React__namespace.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "displayName", "InteractiveGraphEditor");
+    _defineProperty(this, "className", "perseus-widget-interactive-graph");
+    _defineProperty(this, "deprecatedProps", deprecatedProps);
+  }
   // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
   UNSAFE_componentWillMount() {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
-  },
-  render: function () {
+  }
+  render() {
+    var _this$props$graph$typ, _this$props$graph, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || perseus.Util.getGridStep(this.props.range, this.props.step, perseus.interactiveSizes.defaultBoxSize);
@@ -27207,9 +27291,118 @@ const InteractiveGraphEditor = createReactClass__default["default"]({
         className: "perseus-error"
       }, this.props.valid);
     }
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-interactive-graph"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React__namespace.createElement(GraphSettings, {
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Type of Graph:"), /*#__PURE__*/React__namespace.createElement(GraphTypeSelector, {
+      graphType: (_this$props$graph$typ = (_this$props$graph = this.props.graph) === null || _this$props$graph === void 0 ? void 0 : _this$props$graph.type) !== null && _this$props$graph$typ !== void 0 ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
+      onChange: type => {
+        this.props.onChange({
+          graph: {
+            type
+          },
+          correct: {
+            type
+          }
+        });
+      }
+    })), ((_this$props$correct = this.props.correct) === null || _this$props$correct === void 0 ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Number of Points:"), /*#__PURE__*/React__namespace.createElement(GraphPointsCountSelector, {
+      numPoints: (_this$props$correct2 = this.props.correct) === null || _this$props$correct2 === void 0 ? void 0 : _this$props$correct2.numPoints,
+      onChange: points => {
+        this.props.onChange({
+          correct: {
+            type: "point",
+            numPoints: points
+          }
+        });
+      }
+    })), ((_this$props$correct3 = this.props.correct) === null || _this$props$correct3 === void 0 ? void 0 : _this$props$correct3.type) === "polygon" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Number of sides:"), /*#__PURE__*/React__namespace.createElement("select", {
+      key: "polygon-select",
+      value: ((_this$props$correct4 = this.props.correct) === null || _this$props$correct4 === void 0 ? void 0 : _this$props$correct4.numSides) || 3,
+      onChange: e => {
+        const graph = {
+          ...this.props.correct,
+          numSides: parsePointCount(e.target.value),
+          coords: null,
+          // reset the snap for UNLIMITED, which
+          // only supports "grid"
+          // From: D6578
+          snapTo: "grid"
+        };
+        this.props.onChange({
+          correct: graph
+        });
+      }
+    }, ___default["default"].map(___default["default"].range(3, 13), function (n) {
+      return /*#__PURE__*/React__namespace.createElement("option", {
+        key: n,
+        value: n
+      }, "".concat(n, " sides"));
+    }), /*#__PURE__*/React__namespace.createElement("option", {
+      value: "unlimited"
+    }, "unlimited sides"))), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Snap to:"), /*#__PURE__*/React__namespace.createElement("select", {
+      key: "polygon-snap",
+      value: (_this$props$correct5 = this.props.correct) === null || _this$props$correct5 === void 0 ? void 0 : _this$props$correct5.snapTo,
+      onChange: e => {
+        const graph = {
+          ...this.props.correct,
+          snapTo: e.target.value,
+          coords: null
+        };
+        this.props.onChange({
+          correct: graph
+        });
+      }
+    }, /*#__PURE__*/React__namespace.createElement("option", {
+      value: "grid"
+    }, "grid"), ((_this$props$correct6 = this.props.correct) === null || _this$props$correct6 === void 0 ? void 0 : _this$props$correct6.numSides) !== "unlimited" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("option", {
+      value: "angles"
+    }, "interior angles"), /*#__PURE__*/React__namespace.createElement("option", {
+      value: "sides"
+    }, "side measures"))), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "These options affect the movement of the vertex points. The grid option will guide the points to the nearest half step along the grid."), /*#__PURE__*/React__namespace.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side"), " ", "measure respectively.")), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(Typography__namespace.LabelSmall, {
+      tag: "label"
+    }, "Show angle measures:", " ", /*#__PURE__*/React__namespace.createElement("input", {
+      type: "checkbox",
+      checked: (_this$props$correct7 = this.props.correct) === null || _this$props$correct7 === void 0 ? void 0 : _this$props$correct7.showAngles,
+      onChange: () => {
+        this.props.onChange({
+          correct: {
+            ...this.props.correct,
+            showAngles: !this.props.correct.showAngles
+          }
+        });
+      }
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(Typography__namespace.LabelSmall, {
+      tag: "label"
+    }, "Show side measures:", " ", /*#__PURE__*/React__namespace.createElement("input", {
+      type: "checkbox",
+      checked: (_this$props$correct8 = this.props.correct) === null || _this$props$correct8 === void 0 ? void 0 : _this$props$correct8.showSides,
+      onChange: () => {
+        this.props.onChange({
+          correct: {
+            ...this.props.correct,
+            showSides: !this.props.correct.showSides
+          }
+        });
+      }
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the side lengths.")))), ((_this$props$correct9 = this.props.correct) === null || _this$props$correct9 === void 0 ? void 0 : _this$props$correct9.type) === "segment" && /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Number of segments: "), /*#__PURE__*/React__namespace.createElement(SegmentCountSelector, {
+      numSegments: (_this$props$correct10 = this.props.correct) === null || _this$props$correct10 === void 0 ? void 0 : _this$props$correct10.numSegments,
+      onChange: sides => {
+        this.props.onChange({
+          correct: {
+            type: "segment",
+            numSegments: sides,
+            coords: null
+          }
+        });
+      }
+    })), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Correct answer:"), /*#__PURE__*/React__namespace.createElement(Typography__namespace.BodyMonospace, {
+      style: {
+        fontSize: 12,
+        backgroundColor: "#eee",
+        paddingInline: Spacing__default["default"].xxSmall_6,
+        borderColor: "#ccc",
+        borderStyle: "solid",
+        borderWidth: 1
+      }
+    }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), /*#__PURE__*/React__namespace.createElement(GraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
       labels: this.props.labels,
@@ -27248,21 +27441,22 @@ const InteractiveGraphEditor = createReactClass__default["default"]({
     }, "match exactly"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "congruent"
     }, "be congruent"))), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position.")))), graph);
-  },
-  changeMatchType: function (e) {
+  }
+  changeMatchType(e) {
     const correct = ___default["default"].extend({}, this.props.correct, {
       match: e.target.value
     });
     this.props.onChange({
       correct: correct
     });
-  },
-  serialize: function () {
+  }
+  serialize() {
     const json = ___default["default"].pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep");
 
     // eslint-disable-next-line react/no-string-refs
     const graph = this.refs.graph;
     if (graph) {
+      // @ts-expect-error TS2339 Property 'getUserInput' does not exist on type 'ReactInstance'. Property 'getUserInput' does not exist on type 'Component<any, {}, any>'.
       const correct = graph && graph.getUserInput();
       ___default["default"].extend(json, {
         graph: {
@@ -27277,8 +27471,20 @@ const InteractiveGraphEditor = createReactClass__default["default"]({
         }
       });
     }
+    // @ts-expect-error TS2739 Type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "step" | "gridStep" | "snapStep" | "backgroundImage" | "markings" | "labels" | ... 5 more ... | "range">' is missing the following properties from type 'PerseusInteractiveGraphWidgetOptions': graph, correct
     return json;
   }
+}
+_defineProperty(InteractiveGraphEditor, "widgetName", "interactive-graph");
+_defineProperty(InteractiveGraphEditor, "defaultProps", {
+  ...InteractiveGraph.defaultProps,
+  valid: true,
+  backgroundImage: defaultBackgroundImage$1,
+  showTooltips: false,
+  correct: {
+    type: InteractiveGraph.defaultProps.graph.type,
+    coords: null
+  }
 });
 
 class FormWrappedTextField extends React__namespace.Component {