@khanacademy/perseus-editor 6.9.0 → 6.11.0

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, lockedFigureColors, lockedEllipseFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import _ from 'underscore';
@@ -23,13 +23,13 @@ import { TextField, Checkbox as Checkbox$1 } from '@khanacademy/wonder-blocks-fo
 import { LabelSmall, LabelMedium, LabelLarge, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
 import Banner from '@khanacademy/wonder-blocks-banner';
 import Button from '@khanacademy/wonder-blocks-button';
-import Switch from '@khanacademy/wonder-blocks-switch';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
+import Switch from '@khanacademy/wonder-blocks-switch';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "6.9.0";
+const libVersion = "6.11.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -23445,7 +23445,7 @@ class StructuredItemDiff extends React.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$n,
+  InfoTip: InfoTip$m,
   InlineIcon: InlineIcon$7
 } = components;
 const {
@@ -23517,7 +23517,7 @@ class HintEditor extends React.Component {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: _.partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$n, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$m, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23770,7 +23770,7 @@ CombinedHintsEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$m
+  InfoTip: InfoTip$l
 } = components;
 class ItemExtrasEditor extends React.Component {
   constructor(...args) {
@@ -23916,7 +23916,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement("div", {
   type: "checkbox",
   checked: props.checked,
   onChange: props.onChange
-})), /*#__PURE__*/React.createElement(InfoTip$m, null, props.infoTip));
+})), /*#__PURE__*/React.createElement(InfoTip$l, null, props.infoTip));
 
 const ITEM_DATA_VERSION = itemDataVersion;
 class ItemEditor extends React.Component {
@@ -25731,7 +25731,7 @@ class BlurInput extends React.Component {
 }
 
 const {
-  InfoTip: InfoTip$l,
+  InfoTip: InfoTip$k,
   PropCheckBox: PropCheckBox$b
 } = components;
 const DEFAULT_WIDTH = 400;
@@ -25892,7 +25892,7 @@ class CSProgramEditor extends React.Component {
       label: "Show Editor",
       showEditor: this.props.showEditor,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$b, {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$b, {
       label: "Show Buttons",
       showButtons: this.props.showButtons,
       onChange: this.props.onChange
@@ -25900,7 +25900,7 @@ class CSProgramEditor extends React.Component {
       name: "settings",
       pairs: this.props.settings,
       onChange: this._handleSettingsChange
-    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
   }
 }
 CSProgramEditor.propTypes = _extends({}, Changeable.propTypes);
@@ -25986,7 +25986,7 @@ DeprecatedStandinEditor.widgetName = "deprecated-standin";
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$k,
+  InfoTip: InfoTip$j,
   InlineIcon: InlineIcon$5
 } = components;
 const {
@@ -26055,14 +26055,14 @@ class DropdownEditor extends React.Component {
       className: "perseus-widget-dropdown"
     }, /*#__PURE__*/React.createElement("div", {
       className: "dropdown-info"
-    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
+    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
       className: "dropdown-placeholder"
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
       placeholder: "Placeholder value",
       value: this.props.placeholder,
       onChange: this.onPlaceholderChange
-    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
       className: "clearfix"
     }), /*#__PURE__*/React.createElement("ul", {
       className: "dropdown-choices"
@@ -26593,7 +26593,7 @@ const SortableItem = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$j,
+  InfoTip: InfoTip$i,
   PropCheckBox: PropCheckBox$a
 } = components;
 
@@ -26847,11 +26847,11 @@ class ExpressionEditor extends React.Component {
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Use \xD7 for rendering multiplication instead of a center dot."
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Function variables: ", /*#__PURE__*/React.createElement("input", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Function variables: ", /*#__PURE__*/React.createElement("input", {
       type: "text",
       defaultValue: this.props.functions.join(" "),
       onChange: this.handleFunctions
-    })), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React.createElement("h3", {
+    })), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React.createElement("h3", {
       className: "expression-editor-h3"
     }, "Answers"), /*#__PURE__*/React.createElement("p", {
       style: {
@@ -26946,14 +26946,14 @@ class AnswerOption extends React.Component {
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must have the same form."
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
       className: "answer-option"
     }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
       simplify: this.props.simplify,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must be fully expanded and simplified."
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
       className: "remove-container"
     }, removeButton)));
   }
@@ -27153,7 +27153,7 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 
 const {
   ButtonGroup: ButtonGroup$4,
-  InfoTip: InfoTip$i,
+  InfoTip: InfoTip$h,
   PropCheckBox: PropCheckBox$9,
   RangeInput: RangeInput$6
 } = components;
@@ -27609,7 +27609,7 @@ const GraphSettings = createReactClass({
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
@@ -27647,7 +27647,7 @@ const GraphSettings = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$h,
+  InfoTip: InfoTip$g,
   MultiButtonGroup: MultiButtonGroup$1
 } = components;
 const {
@@ -27730,7 +27730,7 @@ class GrapherEditor extends React.Component {
         className: "perseus-error"
       }, this.props.graph.valid);
     }
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.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.createElement(GraphSettings, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$g, null, /*#__PURE__*/React.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.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
       box: getInteractiveBoxFromSizeClass$1(sizeClass),
       range: this.props.graph.range,
@@ -27975,7 +27975,7 @@ IframeEditor.defaultProps = {
 
 /* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
 const {
-  InfoTip: InfoTip$g,
+  InfoTip: InfoTip$f,
   InlineIcon: InlineIcon$3,
   RangeInput: RangeInput$5
 } = components;
@@ -28024,7 +28024,7 @@ class ImageEditor extends React.Component {
       style: {
         width: "100%"
       }
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$g, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$f, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28048,7 +28048,7 @@ class ImageEditor extends React.Component {
     }, this.state.backgroundImageError);
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-image-editor"
-    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$g, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
+    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$f, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
@@ -28212,7 +28212,7 @@ ImageEditor.defaultProps = {
 
 /* eslint-disable react/sort-comp */
 const {
-  InfoTip: InfoTip$f
+  InfoTip: InfoTip$e
 } = components;
 const answerTypes = {
   number: {
@@ -28298,7 +28298,7 @@ class InputNumberEditor extends React.Component {
       value: "optional"
     }, "will be accepted"), /*#__PURE__*/React.createElement("option", {
       value: "enforced"
-    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.inexact,
       onChange: e => {
@@ -28334,7 +28334,7 @@ class InputNumberEditor extends React.Component {
         });
       },
       "aria-label": "Answer type"
-    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
+    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
       value: this.props.size,
       onChange: e => {
         // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
@@ -28346,7 +28346,7 @@ class InputNumberEditor extends React.Component {
       value: "normal"
     }, "Normal (80px)"), /*#__PURE__*/React.createElement("option", {
       value: "small"
-    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.rightAlign,
       onChange: e => {
@@ -29584,7 +29584,7 @@ const styles$t = StyleSheet.create({
 
 const {
   ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$e,
+  InfoTip: InfoTip$d,
   PropCheckBox: PropCheckBox$7,
   RangeInput: RangeInput$4
 } = components;
@@ -30006,7 +30006,7 @@ class InteractiveGraphSettings extends React.Component {
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
+    }), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
       style: styles$s.rulerSection
     }, /*#__PURE__*/React.createElement(View, {
       style: styles$s.checkboxRow
@@ -30249,79 +30249,145 @@ const styles$r = StyleSheet.create({
   }
 });
 
-const {
-  InfoTip: InfoTip$d
-} = components;
-const degreeToRadian = degrees => {
+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 DEFAULT_COLOR = "grayH";
+function getDefaultFigureForType(type) {
+  switch (type) {
+    case "point":
+      return {
+        type: "point",
+        coord: [0, 0],
+        color: DEFAULT_COLOR,
+        filled: true
+      };
+    case "line":
+      return {
+        type: "line",
+        kind: "line",
+        points: [getDefaultFigureForType("point"), _extends({}, getDefaultFigureForType("point"), {
+          coord: [2, 2]
+        })],
+        color: DEFAULT_COLOR,
+        lineStyle: "solid",
+        showPoint1: false,
+        showPoint2: false
+      };
+    case "vector":
+      return {
+        type: "vector",
+        points: [[0, 0], [2, 2]],
+        color: DEFAULT_COLOR
+      };
+    case "ellipse":
+      return {
+        type: "ellipse",
+        center: [0, 0],
+        radius: [1, 1],
+        angle: 0,
+        color: DEFAULT_COLOR,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    case "polygon":
+      return {
+        type: "polygon",
+        points: [[0, 2], [-1, 0], [1, 0]],
+        color: DEFAULT_COLOR,
+        showVertices: false,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    default:
+      throw new UnreachableCaseError(type);
+  }
+}
+function degreeToRadian(degrees) {
   return degrees / 180 * Math.PI;
-};
+}
+function radianToDegree(radians) {
+  return radians / Math.PI * 180;
+}
+
 const AngleInput = props => {
   const {
     angle,
     onChange
   } = props;
-  const [angleInput, setAngleInput] = React.useState(angle.toString());
-  const [isInDegrees, setIsInDegrees] = React.useState(false);
-  function handleAngleChange(newValue, useDegrees = isInDegrees) {
+  const [angleInput, setAngleInput] = React.useState(radianToDegree(angle).toString());
+  function handleAngleChange(newValue) {
     // Update the local state (update the input field value).
     setAngleInput(newValue);
-    try {
-      // If the new value is a valid expression, update the props.
-      // Save the angle in radians.
-      const evaluatedAngle = KAS.parse(newValue).expr.eval();
-      if (useDegrees) {
-        onChange(degreeToRadian(evaluatedAngle));
-      } else {
-        onChange(evaluatedAngle);
-      }
-    } catch (e) {
-      // The user likely has not finished typing the expression.
-      // Do nothing.
+
+    // If the new value is not a number, don't update the props.
+    // If it's empty, keep the props the same value instead of setting to 0.
+    if (isNaN(+newValue) || newValue === "") {
       return;
     }
-  }
-  function handleAngleTypeChange() {
-    // Change the angle based on the new angle type.
-    handleAngleChange(angleInput, !isInDegrees);
 
-    // Update the angle to the new type.
-    setIsInDegrees(usingDegrees => !usingDegrees);
+    // Update the graph.
+    onChange(degreeToRadian(newValue));
   }
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles$q.row, styles$q.spaceUnder]
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label"
-  }, /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
     style: styles$q.row
-  }, "angle", /*#__PURE__*/React.createElement(Strut, {
+  }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
-    id: "",
+    type: "number",
     value: angleInput,
     onChange: handleAngleChange,
     style: styles$q.textField
-  }))), /*#__PURE__*/React.createElement(Strut, {
+  }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles$q.row
-  }, /*#__PURE__*/React.createElement(LabelSmall, null, "radians"), /*#__PURE__*/React.createElement(View, {
-    style: styles$q.switch
-  }, /*#__PURE__*/React.createElement(Switch, {
-    onChange: handleAngleTypeChange,
-    checked: isInDegrees
-  })), /*#__PURE__*/React.createElement(LabelSmall, null, "degrees")), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "The angle of rotation for the ellipse (if the x radius and y radius are different)."), /*#__PURE__*/React.createElement("p", null, "Expressions will be evaluted (e.g. \"pi/2\" or \"5pi/4\").")));
+  }));
 };
 const styles$q = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
-  switch: {
-    marginLeft: spacing.xxSmall_6,
-    marginRight: spacing.xxSmall_6
-  },
   textField: {
-    maxWidth: spacing.xxxLarge_64
+    width: spacing.xxxLarge_64
   }
 });
 
@@ -30359,16 +30425,14 @@ const ColorSelect = props => {
     style,
     onChange
   } = props;
-  const ids = useUniqueIdWithMock();
-  const id = ids.get("color-select");
   return /*#__PURE__*/React.createElement(View, {
     style: [styles$o.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: id,
-    style: styles$o.label,
-    tag: "label"
-  }, "color"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: id,
+    tag: "label",
+    style: styles$o.row
+  }, "color", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: selectedValue,
     onChange: onChange
     // Placeholder is required, but never gets used.
@@ -30382,15 +30446,13 @@ const ColorSelect = props => {
       color: colorName,
       decorative: true
     })
-  }, colorName))));
+  }, colorName)))));
 };
 const styles$o = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
-  },
-  label: {
-    marginInlineEnd: spacing.xxxSmall_4
   }
 });
 
@@ -30407,12 +30469,6 @@ const CoordinatePairInput = props => {
   const [coordState, setCoordState] = React.useState([
   // Using strings to make it easier to work with the text fields.
   coord[0].toString(), coord[1].toString()]);
-
-  // Generate unique IDs so that the programmatic labels can be associated
-  // with their respective text fields.
-  const ids = useUniqueIdWithMock();
-  const xCoordId = ids.get("x-coord");
-  const yCoordId = ids.get("y-coord");
   function handleCoordChange(newValue, coordIndex) {
     // Update the local state (update the input field value).
     const newCoordState = [...coordState];
@@ -30433,40 +30489,38 @@ const CoordinatePairInput = props => {
   return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
     style: [styles$n.row, styles$n.spaceUnder]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: xCoordId,
-    style: styles$n.label,
-    tag: "label"
-  }, labels ? labels[0] : "x coord"), /*#__PURE__*/React.createElement(TextField, {
-    id: xCoordId,
+    tag: "label",
+    style: styles$n.row
+  }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
     style: [styles$n.textField, error ? styles$n.errorField : undefined]
-  }), /*#__PURE__*/React.createElement(Strut, {
+  })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: yCoordId,
-    style: styles$n.label,
-    tag: "label"
-  }, labels ? labels[1] : "y coord"), /*#__PURE__*/React.createElement(TextField, {
-    id: yCoordId,
+    tag: "label",
+    style: styles$n.row
+  }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
     style: [styles$n.textField, error ? styles$n.errorField : undefined]
-  })));
+  }))));
 };
 const styles$n = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
   spaceUnder: {
     marginBottom: spacing.xSmall_8
   },
-  label: {
-    marginInlineEnd: spacing.xxSmall_6
-  },
   textField: {
     width: spacing.xxxLarge_64
   },
@@ -30490,7 +30544,7 @@ const EllipseSwatch = props => {
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles$m.innerCircle, {
       backgroundColor: lockedFigureColors[color],
-      opacity: lockedEllipseFillStyles[fillStyle]
+      opacity: lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
@@ -30608,9 +30662,6 @@ const LockedEllipseSettings = props => {
     onChangeProps,
     onRemove
   } = props;
-  const ids = useUniqueIdWithMock();
-  const strokeSelectId = ids.get("stroke-style-select");
-  const fillSelectId = ids.get("fill-style-select");
   function handleColorChange(newValue) {
     onChangeProps({
       color: newValue
@@ -30662,10 +30713,10 @@ const LockedEllipseSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    htmlFor: fillSelectId,
-    style: styles$j.label
-  }, "fill"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: fillSelectId,
+    style: styles$j.row
+  }, "fill", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: fillStyle,
     onChange: value => onChangeProps({
       fillStyle: value
@@ -30673,18 +30724,16 @@ const LockedEllipseSettings = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: ""
-  }, Object.keys(lockedEllipseFillStyles).map(option => /*#__PURE__*/React.createElement(OptionItem, {
+  }, Object.keys(lockedFigureFillStyles).map(option => /*#__PURE__*/React.createElement(OptionItem, {
     key: option,
     value: option,
     label: option
-  }, option)))), /*#__PURE__*/React.createElement(View, {
-    style: styles$j.row
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
+  }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    htmlFor: strokeSelectId,
-    style: styles$j.label
-  }, "stroke"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: strokeSelectId,
+    style: styles$j.row
+  }, "stroke", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: strokeStyle,
     onChange: value => onChangeProps({
       strokeStyle: value
@@ -30705,12 +30754,10 @@ const LockedEllipseSettings = props => {
 };
 const styles$j = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
-  label: {
-    marginInlineEnd: spacing.xxSmall_6
-  },
   spaceUnder: {
     marginBottom: spacing.xSmall_8
   }
@@ -30870,12 +30917,6 @@ const LockedLineSettings = props => {
     onRemove
   } = props;
   const [point1, point2] = points;
-
-  // Generate unique IDs so that the programmatic labels can be associated
-  // with their respective text fields.
-  const ids = useUniqueIdWithMock();
-  const kindSelectId = ids.get("line-kind-select");
-  const styleSelectId = ids.get("line-style-select");
   const capitalizeKind = kind.charAt(0).toUpperCase() + kind.slice(1);
   const lineLabel = `${capitalizeKind} (${point1.coord[0]},
         ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;
@@ -30911,14 +30952,12 @@ const LockedLineSettings = props => {
       color: lineColor,
       lineStyle: lineStyle
     }))
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$f.row, styles$f.spaceUnder]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: kindSelectId,
-    style: styles$f.label,
-    tag: "label"
-  }, "kind"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: kindSelectId,
+    tag: "label",
+    style: [styles$f.row, styles$f.spaceUnder]
+  }, "kind", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: kind,
     onChange: value => onChangeProps({
       kind: value
@@ -30936,20 +30975,18 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React.createElement(View, {
-    style: [styles$f.row, styles$f.spaceUnder]
+    style: styles$f.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
-  }), /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
     style: styles$f.row
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: styleSelectId,
-    style: styles$f.label,
-    tag: "label"
-  }, "style"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: styleSelectId,
+  }, "style", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: lineStyle,
     onChange: value => onChangeProps({
       lineStyle: value
@@ -30993,15 +31030,13 @@ const LockedLineSettings = props => {
 };
 const styles$f = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
   spaceUnder: {
     marginBottom: spacing.xSmall_8
   },
-  label: {
-    marginInlineEnd: spacing.xxxSmall_4
-  },
   selectMarginOffset: {
     // Align with the point settings accordions.
     marginInlineEnd: -spacing.xxxSmall_4
@@ -31214,89 +31249,6 @@ const LockedFigureSettings = props => {
   return null;
 };
 
-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 DEFAULT_COLOR = "grayH";
-function getDefaultFigureForType(type) {
-  switch (type) {
-    case "point":
-      return {
-        type: "point",
-        coord: [0, 0],
-        color: DEFAULT_COLOR,
-        filled: true
-      };
-    case "line":
-      return {
-        type: "line",
-        kind: "line",
-        points: [getDefaultFigureForType("point"), _extends({}, getDefaultFigureForType("point"), {
-          coord: [2, 2]
-        })],
-        color: DEFAULT_COLOR,
-        lineStyle: "solid",
-        showPoint1: false,
-        showPoint2: false
-      };
-    case "ellipse":
-      return {
-        type: "ellipse",
-        center: [0, 0],
-        radius: [1, 1],
-        angle: 0,
-        color: DEFAULT_COLOR,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    case "vector":
-      return {
-        type: "vector",
-        points: [[0, 0], [2, 2]],
-        color: DEFAULT_COLOR
-      };
-    default:
-      throw new UnreachableCaseError(type);
-  }
-}
-
 const LockedFiguresSection = props => {
   var _props$figures;
   // Keep track of all figures' accordions' expanded states for the
@@ -31347,6 +31299,12 @@ const LockedFiguresSection = props => {
   const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
   const showExpandButton = !!(figures != null && figures.length);
   return /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
+    if (figure.type === "polygon") {
+      // TODO(LEMS-1943): Implement locked polygon settings.
+      // Remove this block once locked polygon settings are
+      // implemented.
+      return;
+    }
     return /*#__PURE__*/React.createElement(LockedFigureSettings, _extends({
       key: `${uniqueId}-locked-${figure}-${index}`,
       showM2Features: props.showM2Features,
@@ -31476,6 +31434,15 @@ class InteractiveGraphEditor extends React.Component {
   UNSAFE_componentWillMount() {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
+  static buildGraphKey(correct) {
+    const testGraphKey = [];
+    for (const key in correct) {
+      if (correct[key]) {
+        typeof correct[key] === "number" || typeof correct[key] === "string" || typeof correct[key] === "boolean" ? testGraphKey.push(correct[key]) : testGraphKey.push(0);
+      }
+    }
+    return testGraphKey.join(":");
+  }
   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, _this$props$correct11, _this$props$apiOption, _this$props$apiOption2;
     let graph;
@@ -31519,10 +31486,9 @@ class InteractiveGraphEditor extends React.Component {
           });
         }
       };
-
       // This is used to force a remount of the graph component
       // when there's a significant change
-      const graphKey = `${correct.type}:${correct.numSegments || 0}`;
+      const graphKey = InteractiveGraphEditor.buildGraphKey(correct);
       graph =
       /*#__PURE__*/
       // There are a bunch of props that renderer.jsx passes to widgets via