@khanacademy/perseus-editor 17.5.0 → 17.6.0

package/dist/es/index.js

@@ -8,7 +8,7 @@ import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { color, spacing, font } from '@khanacademy/wonder-blocks-tokens';
 import { StyleSheet, css } from 'aphrodite';
 import $ from 'jquery';
-import { View, addStyle } from '@khanacademy/wonder-blocks-core';
+import { View, addStyle, Id } from '@khanacademy/wonder-blocks-core';
 import Switch from '@khanacademy/wonder-blocks-switch';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import caretRight from '@phosphor-icons/core/bold/caret-right-bold.svg';
@@ -20,7 +20,7 @@ import ReactDOM from 'react-dom';
 import * as KAS from '@khanacademy/kas';
 import Button from '@khanacademy/wonder-blocks-button';
 import { isTruthy, UnreachableCaseError } from '@khanacademy/wonder-stuff-core';
-import { KhanMath, vector, angles, number } from '@khanacademy/kmath';
+import { KhanMath, angles, vector, number } from '@khanacademy/kmath';
 import { inputNumberAnswerTypes } from '@khanacademy/perseus-score';
 import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { SingleSelect, OptionItem, ActionMenu, ActionItem } from '@khanacademy/wonder-blocks-dropdown';
@@ -47,7 +47,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "17.5.0";
+const libVersion = "17.6.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -20525,7 +20525,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -28208,7 +28208,7 @@ const GraphTypeSelector = props => {
     onChange: props.onChange,
     placeholder: "Select an answer type",
     style: styles$J.singleSelectShort
-  }, props.showNoneOption && /*#__PURE__*/React.createElement(OptionItem, {
+  }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "none",
     label: "None"
   }), /*#__PURE__*/React.createElement(OptionItem, {
@@ -28302,7 +28302,9 @@ function InteractiveGraphCorrectAnswer(props) {
     title: "Correct Answer",
     isOpen: true,
     isCollapsible: false
-  }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabelXSmall, {
+  }), /*#__PURE__*/React.createElement(View, {
+    id: props.id
+  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabelXSmall, {
     style: {
       paddingTop: spacing.xxSmall_6,
       paddingBottom: spacing.xxSmall_6,
@@ -28864,10 +28866,14 @@ const styles$F = StyleSheet.create({
   }
 });
 
-const StyledUL = addStyle("ul");
+const StyledUl = addStyle("ul");
 // Exported for testing
-function getAccessibilityAttributes(container) {
+function getAccessibilityAttributes(graphId) {
   const elementArias = [];
+
+  // TODO(nisha): Change this to use ref after the graph has a non-string
+  // ref and the InteractiveGraph component forwards refs.
+  const container = document.getElementById(graphId);
   if (!container) {
     return elementArias;
   }
@@ -28937,7 +28943,7 @@ function SRTree(props) {
     size: "small",
     kind: "success",
     style: styles$E.smallSpaceRight
-  }, aria.roleOrTag), aria.className, /*#__PURE__*/React.createElement(StyledUL, {
+  }, aria.roleOrTag), aria.className, /*#__PURE__*/React.createElement(StyledUl, {
     style: styles$E.indentListLeft
   }, aria.attributes.map((value, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -28948,27 +28954,26 @@ function SRTree(props) {
   }, value.name), value.value))))));
 }
 function InteractiveGraphSRTree({
+  // The graph whos accessibility tree we want to display.
+  // This is necessary when there are multiple graphs on the editor
+  // page, such as when there are also hints.
+  graphId,
   correct,
   fullGraphAriaLabel,
   fullGraphAriaDescription,
   lockedFigures
 }) {
-  var _document$getElements;
   const [isExpanded, setIsExpanded] = React.useState(true);
   const [showTags, setShowTags] = React.useState(false);
   const [elementArias, setElementArias] = React.useState([]);
   const switchId = React.useId();
 
-  // TODO(nisha): Change this to use ref after the graph has a non-string
-  // ref and the InteractiveGraph component forwards refs.
-  const mafsGraphContainer = (_document$getElements = document.getElementsByClassName("mafs-graph-container")) == null ? void 0 : _document$getElements[0];
-
   // Update the tree when the graph is updated.
   React.useEffect(() => {
-    setElementArias(getAccessibilityAttributes(mafsGraphContainer));
+    setElementArias(getAccessibilityAttributes(graphId));
   }, [
   // Update the tree when the "correct preview" graph is updated.
-  correct, fullGraphAriaLabel, fullGraphAriaDescription, lockedFigures, mafsGraphContainer]);
+  correct, fullGraphAriaLabel, fullGraphAriaDescription, graphId, lockedFigures]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
     title: "Screen reader tree",
     isOpen: isExpanded,
@@ -29135,59 +29140,16 @@ const ScrolllessNumberTextField = props => {
   }));
 };
 
-function focusWithChromeStickyFocusBugWorkaround(element) {
-  // NOTE(marksandstrom) Chrome sticky focus bug.
-  //
-  // There is a bug in Chrome related to sticky positioning and
-  // focus: When a child of an element with sticky positioning is
-  // focused with the focus() method, the scrollable area
-  // containing that element will scroll to the top (even though
-  // the element is already visble on the page). For a dropdown
-  // this means that the area will be scrolled to the top when
-  // the user interacts with the dropdown (since we actively
-  // manage dropdown header and option focus for keyboard users).
-  //
-  // To work around this bug the `preventScroll` focus option is
-  // used.
-  //
-  // Using `focusOptions` is an experimental browser feature
-  // "that should not be used in production code". However, since
-  // Chrome is the only browser we support that exhibits this
-  // buggy behavior and using `focusOptions` works around the
-  // bug, it is perfectly reasonable to use the feature in this
-  // case. We are not relying on the effect of the
-  // `preventScroll` option otherwise.
-  //
-  // focusOptions documentation:
-  //
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
-  //
-  // Note that there could be cases where we want default focus() behavior.
-  // One that comes to mind is a dropdown with a long list of options that
-  // might be rendered off screen when opened. With this workaround the
-  // selected option would not be scrolled into view if the option is near
-  // the end of the list. We're not aware of any uses of the dropdown where
-  // this is an issue, however, so there isn't currently a way to out of the
-  // `preventScroll` behavior.
-
-  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
-  element.focus({
-    preventScroll: true
-  });
-}
-function degreeToRadian(degrees) {
-  return degrees / 180 * Math.PI;
-}
-function radianToDegree(radians) {
-  return radians / Math.PI * 180;
-}
-
+const {
+  convertDegreesToRadians,
+  convertRadiansToDegrees: convertRadiansToDegrees$1
+} = angles;
 const AngleInput = props => {
   const {
     angle,
     onChange
   } = props;
-  const [angleInput, setAngleInput] = React.useState(radianToDegree(angle).toString());
+  const [angleInput, setAngleInput] = React.useState(convertRadiansToDegrees$1(angle).toString());
   function handleAngleChange(newValue) {
     // Update the local state (update the input field value).
     setAngleInput(newValue);
@@ -29199,7 +29161,7 @@ const AngleInput = props => {
     }
 
     // Update the graph.
-    onChange(degreeToRadian(newValue));
+    onChange(convertDegreesToRadians(newValue));
   }
   return /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
@@ -94296,6 +94258,9 @@ async function joinLabelsAsSpokenMath(labels) {
   return ` ${spokenLabels.join(", ")}`;
 }
 
+const {
+  convertRadiansToDegrees
+} = angles;
 const {
   InfoTip: InfoTip$c
 } = components;
@@ -94325,7 +94290,7 @@ const LockedEllipseSettings = props => {
     const visiblelabel = await joinLabelsAsSpokenMath(labels);
     const spokenCenterX = await generateSpokenMathDetails(`$${center[0]}$`);
     const spokenCenterY = await generateSpokenMathDetails(`$${center[1]}$`);
-    const spokenRotation = await generateSpokenMathDetails(`$${radianToDegree(angle)}$`);
+    const spokenRotation = await generateSpokenMathDetails(`$${convertRadiansToDegrees(angle)}$`);
     const isCircle = radius[0] === radius[1];
     let str = "";
     if (isCircle) {
@@ -96836,7 +96801,6 @@ class InteractiveGraphEditor extends React.Component {
     return json;
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph3, _this$props$apiOption, _this$props$apiOption2, _this$props$fullGraph, _this$props$fullGraph2, _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, _this$props$correct11, _this$props$correct12, _this$props$correct13, _this$props$correct14, _this$props$graph12, _this$props$apiOption3;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -96903,264 +96867,232 @@ class InteractiveGraphEditor extends React.Component {
         className: "perseus-error"
       }, this.props.valid);
     }
-    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Answer type:"
-    }, /*#__PURE__*/React.createElement(GraphTypeSelector, {
-      graphType: (_this$props$graph$typ = (_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type
-      // TODO(LEMS-2656): remove TS suppression
-      ,
-      onChange: type => {
-        this.props.onChange({
-          graph: {
-            type
-          },
-          correct: {
-            type
-          }
-        });
-      },
-      showNoneOption: (_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption["none"]
-    })), this.props.graph && ((_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2[this.props.graph.type]) && /*#__PURE__*/React.createElement(InteractiveGraphDescription, {
-      ariaLabelValue: (_this$props$fullGraph = this.props.fullGraphAriaLabel) != null ? _this$props$fullGraph : "",
-      ariaDescriptionValue: (_this$props$fullGraph2 = this.props.fullGraphAriaDescription) != null ? _this$props$fullGraph2 : "",
-      onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InteractiveGraphCorrectAnswer, {
-      equationString: equationString
-    }, graph), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Number of Points:"
-    }, /*#__PURE__*/React.createElement(GraphPointsCountSelector, {
-      numPoints: (_this$props$correct2 = this.props.correct) == null ? void 0 : _this$props$correct2.numPoints,
-      onChange: points => {
-        this.props.onChange({
-          correct: {
-            type: "point",
-            numPoints: points
-          },
-          graph: {
-            type: "point",
-            numPoints: points
-          }
-        });
-      }
-    })), ((_this$props$correct3 = this.props.correct) == null ? void 0 : _this$props$correct3.type) === "angle" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-      style: styles$a.row
-    }, /*#__PURE__*/React.createElement(Checkbox$1, {
-      label: /*#__PURE__*/React.createElement(LabelSmall, null, "Show angle measures"),
-      checked:
-      // Don't show indeterminate checkbox state
-      !!((_this$props$correct4 = this.props.correct) != null && _this$props$correct4.showAngles),
-      onChange: newValue => {
-        var _this$props$graph4;
-        if (((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "angle") {
-          invariant(this.props.correct.type === "angle", `Expected graph type to be angle, but got ${this.props.correct.type}`);
+    return /*#__PURE__*/React.createElement(Id, null, graphId => {
+      var _this$props$graph$typ, _this$props$graph3, _this$props$fullGraph, _this$props$fullGraph2, _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, _this$props$correct11, _this$props$correct12, _this$props$correct13, _this$props$correct14, _this$props$graph12;
+      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabeledRow, {
+        label: "Answer type:"
+      }, /*#__PURE__*/React.createElement(GraphTypeSelector, {
+        graphType: (_this$props$graph$typ = (_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type
+        // TODO(LEMS-2656): remove TS suppression
+        ,
+        onChange: type => {
           this.props.onChange({
-            correct: _extends({}, this.props.correct, {
-              showAngles: newValue
-            }),
-            graph: _extends({}, this.props.graph, {
-              showAngles: newValue
-            })
+            graph: {
+              type
+            },
+            correct: {
+              type
+            }
           });
         }
-      }
-    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React.createElement(View, {
-      style: styles$a.row
-    }, /*#__PURE__*/React.createElement(Checkbox$1, {
-      label: /*#__PURE__*/React.createElement(LabelSmall, null, "Allow reflex angles"),
-      checked:
-      // Don't show indeterminate checkbox state
-      !!((_this$props$correct5 = this.props.correct) != null && _this$props$correct5.allowReflexAngles),
-      onChange: newValue => {
-        var _this$props$graph5, _this$props$graph6;
-        invariant(this.props.correct.type === "angle", `Expected graph type to be angle, but got ${this.props.correct.type}`);
-        invariant(((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) === "angle", `Expected graph type to be angle, but got ${(_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type}`);
-        const update = {
-          allowReflexAngles: newValue
-        };
-        this.props.onChange({
-          correct: _extends({}, this.props.correct, update),
-          graph: _extends({}, this.props.graph, update)
-        });
-      }
-    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Allow students to be able to create reflex angles.")))), ((_this$props$correct6 = this.props.correct) == null ? void 0 : _this$props$correct6.type) === "polygon" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Number of sides:"
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
-      key: "polygon-select",
-      selectedValue: (_this$props$correct7 = this.props.correct) != null && _this$props$correct7.numSides ? `${this.props.correct.numSides}` : "3",
-      placeholder: "",
-      onChange: newValue => {
-        var _this$props$graph7;
-        invariant(((_this$props$graph7 = this.props.graph) == null ? void 0 : _this$props$graph7.type) === "polygon");
-        const updates = {
-          numSides: parsePointCount(newValue),
-          coords: null,
-          // reset the snap for UNLIMITED, which
-          // only supports "grid"
-          // From: D6578
-          snapTo: "grid"
-        };
-        this.props.onChange({
-          correct: _extends({}, this.props.correct, updates),
-          graph: _extends({}, this.props.graph, updates)
-        });
-      },
-      style: styles$a.singleSelectShort
-    }, [...POLYGON_SIDES, /*#__PURE__*/React.createElement(OptionItem, {
-      key: "unlimited",
-      value: "unlimited",
-      label: "unlimited sides"
-    })])), /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Snap to:"
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
-      selectedValue: ((_this$props$correct8 = this.props.correct) == null ? void 0 : _this$props$correct8.snapTo) || "grid"
-      // Never uses placeholder, always has value
-      ,
-      placeholder: "",
-      onChange: newValue => {
-        var _this$props$graph8, _this$props$graph9;
-        invariant(this.props.correct.type === "polygon", `Expected correct answer type to be polygon, but got ${this.props.correct.type}`);
-        invariant(((_this$props$graph8 = this.props.graph) == null ? void 0 : _this$props$graph8.type) === "polygon", `Expected graph type to be polygon, but got ${(_this$props$graph9 = this.props.graph) == null ? void 0 : _this$props$graph9.type}`);
-        const updates = {
-          snapTo: newValue,
-          coords: null
-        };
-        this.props.onChange({
-          correct: _extends({}, this.props.correct, updates),
-          graph: _extends({}, this.props.graph, updates)
-        });
-      },
-      style: styles$a.singleSelectShort
-    }, /*#__PURE__*/React.createElement(OptionItem, {
-      value: "grid",
-      label: "grid"
-    }), ((_this$props$correct9 = this.props.correct) == null ? void 0 : _this$props$correct9.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(OptionItem, {
-      value: "angles",
-      label: "interior angles"
-    }), ((_this$props$correct10 = this.props.correct) == null ? void 0 : _this$props$correct10.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(OptionItem, {
-      value: "sides",
-      label: "side measures"
-    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.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.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side measure respectively."))), /*#__PURE__*/React.createElement(View, {
-      style: styles$a.row
-    }, /*#__PURE__*/React.createElement(Checkbox$1, {
-      label: /*#__PURE__*/React.createElement(LabelSmall, null, "Show angle measures"),
-      checked:
-      // Don't show indeterminate checkbox state
-      !!((_this$props$correct11 = this.props.correct) != null && _this$props$correct11.showAngles),
-      onChange: () => {
-        var _this$props$graph10;
-        if (((_this$props$graph10 = this.props.graph) == null ? void 0 : _this$props$graph10.type) === "polygon") {
-          invariant(this.props.correct.type === "polygon", `Expected graph type to be polygon, but got ${this.props.correct.type}`);
+      })), /*#__PURE__*/React.createElement(InteractiveGraphDescription, {
+        ariaLabelValue: (_this$props$fullGraph = this.props.fullGraphAriaLabel) != null ? _this$props$fullGraph : "",
+        ariaDescriptionValue: (_this$props$fullGraph2 = this.props.fullGraphAriaDescription) != null ? _this$props$fullGraph2 : "",
+        onChange: this.props.onChange
+      }), /*#__PURE__*/React.createElement(InteractiveGraphCorrectAnswer, {
+        id: graphId,
+        equationString: equationString
+      }, graph), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(LabeledRow, {
+        label: "Number of Points:"
+      }, /*#__PURE__*/React.createElement(GraphPointsCountSelector, {
+        numPoints: (_this$props$correct2 = this.props.correct) == null ? void 0 : _this$props$correct2.numPoints,
+        onChange: points => {
           this.props.onChange({
-            correct: _extends({}, this.props.correct, {
-              showAngles: !this.props.correct.showAngles
-            }),
-            graph: _extends({}, this.props.graph, {
-              showAngles: !this.props.graph.showAngles
-            })
+            correct: {
+              type: "point",
+              numPoints: points
+            },
+            graph: {
+              type: "point",
+              numPoints: points
+            }
           });
         }
-      }
-    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React.createElement(View, {
-      style: styles$a.row
-    }, /*#__PURE__*/React.createElement(Checkbox$1, {
-      label: /*#__PURE__*/React.createElement(LabelSmall, null, "Show side measures"),
-      checked:
-      // Don't show indeterminate checkbox state
-      !!((_this$props$correct12 = this.props.correct) != null && _this$props$correct12.showSides),
-      onChange: () => {
-        var _this$props$graph11;
-        if (((_this$props$graph11 = this.props.graph) == null ? void 0 : _this$props$graph11.type) === "polygon" && this.props.correct.type === "polygon") {
+      })), ((_this$props$correct3 = this.props.correct) == null ? void 0 : _this$props$correct3.type) === "angle" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+        style: styles$a.row
+      }, /*#__PURE__*/React.createElement(Checkbox$1, {
+        label: /*#__PURE__*/React.createElement(LabelSmall, null, "Show angle measures"),
+        checked:
+        // Don't show indeterminate checkbox state
+        !!((_this$props$correct4 = this.props.correct) != null && _this$props$correct4.showAngles),
+        onChange: newValue => {
+          var _this$props$graph4;
+          if (((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "angle") {
+            invariant(this.props.correct.type === "angle", `Expected graph type to be angle, but got ${this.props.correct.type}`);
+            this.props.onChange({
+              correct: _extends({}, this.props.correct, {
+                showAngles: newValue
+              }),
+              graph: _extends({}, this.props.graph, {
+                showAngles: newValue
+              })
+            });
+          }
+        }
+      }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React.createElement(View, {
+        style: styles$a.row
+      }, /*#__PURE__*/React.createElement(Checkbox$1, {
+        label: /*#__PURE__*/React.createElement(LabelSmall, null, "Allow reflex angles"),
+        checked:
+        // Don't show indeterminate checkbox state
+        !!((_this$props$correct5 = this.props.correct) != null && _this$props$correct5.allowReflexAngles),
+        onChange: newValue => {
+          var _this$props$graph5, _this$props$graph6;
+          invariant(this.props.correct.type === "angle", `Expected graph type to be angle, but got ${this.props.correct.type}`);
+          invariant(((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) === "angle", `Expected graph type to be angle, but got ${(_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type}`);
+          const update = {
+            allowReflexAngles: newValue
+          };
           this.props.onChange({
-            correct: _extends({}, this.props.correct, {
-              showSides: !this.props.correct.showSides
-            }),
-            graph: _extends({}, this.props.graph, {
-              showSides: !this.props.graph.showSides
-            })
+            correct: _extends({}, this.props.correct, update),
+            graph: _extends({}, this.props.graph, update)
           });
         }
-      }
-    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the side lengths.")))), ((_this$props$correct13 = this.props.correct) == null ? void 0 : _this$props$correct13.type) === "segment" && /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Number of segments:"
-    }, /*#__PURE__*/React.createElement(SegmentCountSelector, {
-      numSegments: (_this$props$correct14 = this.props.correct) == null ? void 0 : _this$props$correct14.numSegments,
-      onChange: sides => {
-        this.props.onChange({
-          correct: {
-            type: "segment",
-            numSegments: sides,
+      }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Allow students to be able to create reflex angles.")))), ((_this$props$correct6 = this.props.correct) == null ? void 0 : _this$props$correct6.type) === "polygon" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabeledRow, {
+        label: "Number of sides:"
+      }, /*#__PURE__*/React.createElement(SingleSelect, {
+        key: "polygon-select",
+        selectedValue: (_this$props$correct7 = this.props.correct) != null && _this$props$correct7.numSides ? `${this.props.correct.numSides}` : "3",
+        placeholder: "",
+        onChange: newValue => {
+          var _this$props$graph7;
+          invariant(((_this$props$graph7 = this.props.graph) == null ? void 0 : _this$props$graph7.type) === "polygon");
+          const updates = {
+            numSides: parsePointCount(newValue),
+            coords: null,
+            // reset the snap for UNLIMITED, which
+            // only supports "grid"
+            // From: D6578
+            snapTo: "grid"
+          };
+          this.props.onChange({
+            correct: _extends({}, this.props.correct, updates),
+            graph: _extends({}, this.props.graph, updates)
+          });
+        },
+        style: styles$a.singleSelectShort
+      }, [...POLYGON_SIDES, /*#__PURE__*/React.createElement(OptionItem, {
+        key: "unlimited",
+        value: "unlimited",
+        label: "unlimited sides"
+      })])), /*#__PURE__*/React.createElement(LabeledRow, {
+        label: "Snap to:"
+      }, /*#__PURE__*/React.createElement(SingleSelect, {
+        selectedValue: ((_this$props$correct8 = this.props.correct) == null ? void 0 : _this$props$correct8.snapTo) || "grid"
+        // Never uses placeholder, always has value
+        ,
+        placeholder: "",
+        onChange: newValue => {
+          var _this$props$graph8, _this$props$graph9;
+          invariant(this.props.correct.type === "polygon", `Expected correct answer type to be polygon, but got ${this.props.correct.type}`);
+          invariant(((_this$props$graph8 = this.props.graph) == null ? void 0 : _this$props$graph8.type) === "polygon", `Expected graph type to be polygon, but got ${(_this$props$graph9 = this.props.graph) == null ? void 0 : _this$props$graph9.type}`);
+          const updates = {
+            snapTo: newValue,
             coords: null
-          },
-          graph: {
-            type: "segment",
-            numSegments: sides
+          };
+          this.props.onChange({
+            correct: _extends({}, this.props.correct, updates),
+            graph: _extends({}, this.props.graph, updates)
+          });
+        },
+        style: styles$a.singleSelectShort
+      }, /*#__PURE__*/React.createElement(OptionItem, {
+        value: "grid",
+        label: "grid"
+      }), ((_this$props$correct9 = this.props.correct) == null ? void 0 : _this$props$correct9.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(OptionItem, {
+        value: "angles",
+        label: "interior angles"
+      }), ((_this$props$correct10 = this.props.correct) == null ? void 0 : _this$props$correct10.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(OptionItem, {
+        value: "sides",
+        label: "side measures"
+      })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.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.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side measure respectively."))), /*#__PURE__*/React.createElement(View, {
+        style: styles$a.row
+      }, /*#__PURE__*/React.createElement(Checkbox$1, {
+        label: /*#__PURE__*/React.createElement(LabelSmall, null, "Show angle measures"),
+        checked:
+        // Don't show indeterminate checkbox state
+        !!((_this$props$correct11 = this.props.correct) != null && _this$props$correct11.showAngles),
+        onChange: () => {
+          var _this$props$graph10;
+          if (((_this$props$graph10 = this.props.graph) == null ? void 0 : _this$props$graph10.type) === "polygon") {
+            invariant(this.props.correct.type === "polygon", `Expected graph type to be polygon, but got ${this.props.correct.type}`);
+            this.props.onChange({
+              correct: _extends({}, this.props.correct, {
+                showAngles: !this.props.correct.showAngles
+              }),
+              graph: _extends({}, this.props.graph, {
+                showAngles: !this.props.graph.showAngles
+              })
+            });
           }
-        });
-      }
-    })), ((_this$props$graph12 = this.props.graph) == null ? void 0 : _this$props$graph12.type) && shouldShowStartCoordsUI(this.props.graph, this.props.static) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
-      range: this.props.range,
-      step: this.props.step,
-      onChange: this.changeStartCoords
-    })), /*#__PURE__*/React.createElement(InteractiveGraphSRTree, {
-      correct: this.props.correct,
-      fullGraphAriaLabel: this.props.fullGraphAriaLabel,
-      fullGraphAriaDescription: this.props.fullGraphAriaDescription,
-      lockedFigures: this.props.lockedFigures
-    }), /*#__PURE__*/React.createElement(InteractiveGraphSettings, {
-      box: getInteractiveBoxFromSizeClass(sizeClass),
-      range: this.props.range,
-      labels: this.props.labels,
-      step: this.props.step,
-      gridStep: gridStep,
-      snapStep: snapStep,
-      valid: this.props.valid,
-      backgroundImage: this.props.backgroundImage,
-      markings: this.props.markings,
-      showProtractor: this.props.showProtractor,
-      showTooltips: this.props.showTooltips,
-      onChange: this.props.onChange
-    }), this.props.correct.type === "polygon" && /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Student answer must"
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
-      selectedValue: this.props.correct.match || "exact",
-      onChange: newValue => {
-        invariant(this.props.correct.type === "polygon", `Expected graph type to be polygon, but got ${this.props.correct.type}`);
-        const correct = _extends({}, this.props.correct, {
-          // TODO(benchristel): this cast is necessary
-          // because "exact" is not actually a valid
-          // value for `match`; a value of undefined
-          // means exact matching. The code happens
-          // to work because "exact" falls through
-          // to the correct else branch when scoring
-          match: newValue
-        });
-        this.props.onChange({
-          correct
-        });
-      }
-      // Never uses placeholder, always has value
-      ,
-      placeholder: "",
-      style: styles$a.singleSelectShort
-    }, /*#__PURE__*/React.createElement(OptionItem, {
-      value: "exact",
-      label: "match exactly"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "congruent",
-      label: "be congruent"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "approx",
-      label: "be approximately congruent"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "similar",
-      label: "be similar"
-    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Match Exactly:"), " Match exactly in size, orientation, and location on the grid even if it is not shown in the background.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Congruent:"), " Be congruent in size and shape, but can be located anywhere on the grid.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Approximately Congruent:"), " Be exactly similar, and congruent in size and shape to within 0.1 units, but can be located anywhere on the grid.", " ", /*#__PURE__*/React.createElement("em", null, "Use this with snapping to angle measure."))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Similar:"), " Be similar with matching interior angles, and side measures that are matching or a multiple of the correct side measures. The figure can be located anywhere on the grid."))))), this.props.correct.type === "angle" && /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Student answer must"
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
-      selectedValue: this.props.correct.match || "exact",
-      onChange: newValue => {
-        this.props.onChange({
-          correct: _extends({}, this.props.correct, {
+        }
+      }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React.createElement(View, {
+        style: styles$a.row
+      }, /*#__PURE__*/React.createElement(Checkbox$1, {
+        label: /*#__PURE__*/React.createElement(LabelSmall, null, "Show side measures"),
+        checked:
+        // Don't show indeterminate checkbox state
+        !!((_this$props$correct12 = this.props.correct) != null && _this$props$correct12.showSides),
+        onChange: () => {
+          var _this$props$graph11;
+          if (((_this$props$graph11 = this.props.graph) == null ? void 0 : _this$props$graph11.type) === "polygon" && this.props.correct.type === "polygon") {
+            this.props.onChange({
+              correct: _extends({}, this.props.correct, {
+                showSides: !this.props.correct.showSides
+              }),
+              graph: _extends({}, this.props.graph, {
+                showSides: !this.props.graph.showSides
+              })
+            });
+          }
+        }
+      }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the side lengths.")))), ((_this$props$correct13 = this.props.correct) == null ? void 0 : _this$props$correct13.type) === "segment" && /*#__PURE__*/React.createElement(LabeledRow, {
+        label: "Number of segments:"
+      }, /*#__PURE__*/React.createElement(SegmentCountSelector, {
+        numSegments: (_this$props$correct14 = this.props.correct) == null ? void 0 : _this$props$correct14.numSegments,
+        onChange: sides => {
+          this.props.onChange({
+            correct: {
+              type: "segment",
+              numSegments: sides,
+              coords: null
+            },
+            graph: {
+              type: "segment",
+              numSegments: sides
+            }
+          });
+        }
+      })), ((_this$props$graph12 = this.props.graph) == null ? void 0 : _this$props$graph12.type) && shouldShowStartCoordsUI(this.props.graph, this.props.static) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
+        range: this.props.range,
+        step: this.props.step,
+        onChange: this.changeStartCoords
+      })), /*#__PURE__*/React.createElement(InteractiveGraphSRTree, {
+        graphId: graphId,
+        correct: this.props.correct,
+        fullGraphAriaLabel: this.props.fullGraphAriaLabel,
+        fullGraphAriaDescription: this.props.fullGraphAriaDescription,
+        lockedFigures: this.props.lockedFigures
+      }), /*#__PURE__*/React.createElement(InteractiveGraphSettings, {
+        box: getInteractiveBoxFromSizeClass(sizeClass),
+        range: this.props.range,
+        labels: this.props.labels,
+        step: this.props.step,
+        gridStep: gridStep,
+        snapStep: snapStep,
+        valid: this.props.valid,
+        backgroundImage: this.props.backgroundImage,
+        markings: this.props.markings,
+        showProtractor: this.props.showProtractor,
+        showTooltips: this.props.showTooltips,
+        onChange: this.props.onChange
+      }), this.props.correct.type === "polygon" && /*#__PURE__*/React.createElement(LabeledRow, {
+        label: "Student answer must"
+      }, /*#__PURE__*/React.createElement(SingleSelect, {
+        selectedValue: this.props.correct.match || "exact",
+        onChange: newValue => {
+          invariant(this.props.correct.type === "polygon", `Expected graph type to be polygon, but got ${this.props.correct.type}`);
+          const correct = _extends({}, this.props.correct, {
             // TODO(benchristel): this cast is necessary
             // because "exact" is not actually a valid
             // value for `match`; a value of undefined
@@ -97168,26 +97100,59 @@ class InteractiveGraphEditor extends React.Component {
             // to work because "exact" falls through
             // to the correct else branch when scoring
             match: newValue
-          })
-        });
-      }
-      // Never uses placeholder, always has value
-      ,
-      placeholder: "",
-      style: styles$a.singleSelectShort
-    }, /*#__PURE__*/React.createElement(OptionItem, {
-      value: "exact",
-      label: "match exactly"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "congruent",
-      label: "be congruent"
-    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.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."))),
-    // Only show the "Add locked figure" dropdown if the graph
-    // is using Mafs.
-    this.props.graph && ((_this$props$apiOption3 = this.props.apiOptions) == null || (_this$props$apiOption3 = _this$props$apiOption3.flags) == null || (_this$props$apiOption3 = _this$props$apiOption3.mafs) == null ? void 0 : _this$props$apiOption3[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
-      figures: this.props.lockedFigures,
-      onChange: this.props.onChange
-    }));
+          });
+          this.props.onChange({
+            correct
+          });
+        }
+        // Never uses placeholder, always has value
+        ,
+        placeholder: "",
+        style: styles$a.singleSelectShort
+      }, /*#__PURE__*/React.createElement(OptionItem, {
+        value: "exact",
+        label: "match exactly"
+      }), /*#__PURE__*/React.createElement(OptionItem, {
+        value: "congruent",
+        label: "be congruent"
+      }), /*#__PURE__*/React.createElement(OptionItem, {
+        value: "approx",
+        label: "be approximately congruent"
+      }), /*#__PURE__*/React.createElement(OptionItem, {
+        value: "similar",
+        label: "be similar"
+      })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Match Exactly:"), " Match exactly in size, orientation, and location on the grid even if it is not shown in the background.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Congruent:"), " Be congruent in size and shape, but can be located anywhere on the grid.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Approximately Congruent:"), " ", "Be exactly similar, and congruent in size and shape to within 0.1 units, but can be located anywhere on the grid.", " ", /*#__PURE__*/React.createElement("em", null, "Use this with snapping to angle measure."))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Similar:"), " Be similar with matching interior angles, and side measures that are matching or a multiple of the correct side measures. The figure can be located anywhere on the grid."))))), this.props.correct.type === "angle" && /*#__PURE__*/React.createElement(LabeledRow, {
+        label: "Student answer must"
+      }, /*#__PURE__*/React.createElement(SingleSelect, {
+        selectedValue: this.props.correct.match || "exact",
+        onChange: newValue => {
+          this.props.onChange({
+            correct: _extends({}, this.props.correct, {
+              // TODO(benchristel): this cast is necessary
+              // because "exact" is not actually a valid
+              // value for `match`; a value of undefined
+              // means exact matching. The code happens
+              // to work because "exact" falls through
+              // to the correct else branch when scoring
+              match: newValue
+            })
+          });
+        }
+        // Never uses placeholder, always has value
+        ,
+        placeholder: "",
+        style: styles$a.singleSelectShort
+      }, /*#__PURE__*/React.createElement(OptionItem, {
+        value: "exact",
+        label: "match exactly"
+      }), /*#__PURE__*/React.createElement(OptionItem, {
+        value: "congruent",
+        label: "be congruent"
+      })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.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."))), /*#__PURE__*/React.createElement(LockedFiguresSection, {
+        figures: this.props.lockedFigures,
+        onChange: this.props.onChange
+      }));
+    });
   }
 }
 
@@ -98015,6 +97980,47 @@ const styles$5 = StyleSheet.create({
   }
 });
 
+function focusWithChromeStickyFocusBugWorkaround(element) {
+  // NOTE(marksandstrom) Chrome sticky focus bug.
+  //
+  // There is a bug in Chrome related to sticky positioning and
+  // focus: When a child of an element with sticky positioning is
+  // focused with the focus() method, the scrollable area
+  // containing that element will scroll to the top (even though
+  // the element is already visble on the page). For a dropdown
+  // this means that the area will be scrolled to the top when
+  // the user interacts with the dropdown (since we actively
+  // manage dropdown header and option focus for keyboard users).
+  //
+  // To work around this bug the `preventScroll` focus option is
+  // used.
+  //
+  // Using `focusOptions` is an experimental browser feature
+  // "that should not be used in production code". However, since
+  // Chrome is the only browser we support that exhibits this
+  // buggy behavior and using `focusOptions` works around the
+  // bug, it is perfectly reasonable to use the feature in this
+  // case. We are not relying on the effect of the
+  // `preventScroll` option otherwise.
+  //
+  // focusOptions documentation:
+  //
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+  //
+  // Note that there could be cases where we want default focus() behavior.
+  // One that comes to mind is a dropdown with a long list of options that
+  // might be rendered off screen when opened. With this workaround the
+  // selected option would not be scrolled into view if the option is near
+  // the end of the list. We're not aware of any uses of the dropdown where
+  // this is an issue, however, so there isn't currently a way to out of the
+  // `preventScroll` behavior.
+
+  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
+  element.focus({
+    preventScroll: true
+  });
+}
+
 const {
   Icon
 } = components;