@khanacademy/perseus-editor 17.0.0 → 17.0.1

package/dist/es/index.js

@@ -2,14 +2,14 @@ import { addLibraryVersionToPerseusDebug, PerseusError, Errors } from '@khanacad
 import { components, Widgets, iconChevronDown, iconTrash, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, ItemExtras, itemDataVersion, ClassNames, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, containerSizeClass, getInteractiveBoxFromSizeClass, PerseusI18nContext, KhanColors, lockedFigureColors, lockedFigureFillStyles, mathOnlyParser, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, getClockwiseAngle, InteractiveGraphWidget, bodyXsmallBold, MatrixWidget, makeSafeUrl, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
 export { widgets } from '@khanacademy/perseus';
 import * as React from 'react';
-import { useRef, useEffect, useState, useId } from 'react';
+import { useId, useRef, useEffect, useState } from 'react';
 import _ from 'underscore';
 import createReactClass from 'create-react-class';
 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, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
+import { View } 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';
@@ -46,7 +46,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.0.0";
+const libVersion = "17.0.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -20871,10 +20871,7 @@ function LabeledSwitch$1(props) {
       label
     } = props,
     switchProps = _objectWithoutPropertiesLoose(props, _excluded$3);
-  // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-  // eslint-disable-next-line no-restricted-syntax
-  const ids = useUniqueIdWithMock();
-  const id = ids.get("switch");
+  const id = useId();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
     htmlFor: id
   }, label), /*#__PURE__*/React.createElement(Strut, {
@@ -94945,11 +94942,7 @@ const LabeledSwitch = props => {
     style,
     onChange
   } = props;
-
-  // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-  // eslint-disable-next-line no-restricted-syntax
-  const ids = useUniqueIdWithMock();
-  const switchId = ids.get("switch");
+  const switchId = useId();
   return /*#__PURE__*/React.createElement(View, {
     style: [styles$o.row, style]
   }, /*#__PURE__*/React.createElement(Switch, {
@@ -96027,10 +96020,7 @@ const LockedFiguresSection = props => {
   const collapsedStateArray = Array(((_props$figures = props.figures) != null ? _props$figures : []).length).fill(false);
   const [expandedStates, setExpandedStates] = React.useState(collapsedStateArray);
   const [isExpanded, setIsExpanded] = React.useState(true);
-
-  // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
-  // eslint-disable-next-line no-restricted-syntax
-  const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
+  const uniqueId = useId();
   const {
     figures,
     onChange
@@ -96767,6 +96757,7 @@ class InteractiveGraphEditor extends React.Component {
       });
     };
     this.getSaveWarnings = () => {
+      var _this$props$graph2;
       const issues = [];
 
       // A locked line on the graph cannot have length 0.
@@ -96776,6 +96767,11 @@ class InteractiveGraphEditor extends React.Component {
           issues.push("The line cannot have length 0.");
         }
       }
+
+      // Do not save a unlimited polygon that is open (coords is null).
+      if (((_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.type) === "polygon" && this.props.graph.numSides === "unlimited" && this.props.graph.coords === null) {
+        issues.push("Polygon must be closed.");
+      }
       return issues;
     };
   }
@@ -96809,7 +96805,7 @@ class InteractiveGraphEditor extends React.Component {
     return json;
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph2, _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$graph11, _this$props$apiOption3, _this$props$apiOption4;
+    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, _this$props$apiOption4;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -96879,7 +96875,7 @@ class InteractiveGraphEditor extends React.Component {
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Answer type:"
     }, /*#__PURE__*/React.createElement(GraphTypeSelector, {
-      graphType: (_this$props$graph$typ = (_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type
+      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 => {
@@ -96923,8 +96919,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct4 = this.props.correct) != null && _this$props$correct4.showAngles),
       onChange: newValue => {
-        var _this$props$graph3;
-        if (((_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) === "angle") {
+        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, {
@@ -96944,9 +96940,9 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct5 = this.props.correct) != null && _this$props$correct5.allowReflexAngles),
       onChange: newValue => {
-        var _this$props$graph4, _this$props$graph5;
+        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$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "angle", `Expected graph type to be angle, but got ${(_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.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
         };
@@ -96962,8 +96958,8 @@ class InteractiveGraphEditor extends React.Component {
       selectedValue: (_this$props$correct7 = this.props.correct) != null && _this$props$correct7.numSides ? `${this.props.correct.numSides}` : "3",
       placeholder: "",
       onChange: newValue => {
-        var _this$props$graph6;
-        invariant(((_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type) === "polygon");
+        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,
@@ -96990,9 +96986,9 @@ class InteractiveGraphEditor extends React.Component {
       ,
       placeholder: "",
       onChange: newValue => {
-        var _this$props$graph7, _this$props$graph8;
+        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$graph7 = this.props.graph) == null ? void 0 : _this$props$graph7.type) === "polygon", `Expected graph type to be polygon, but got ${(_this$props$graph8 = this.props.graph) == null ? void 0 : _this$props$graph8.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
@@ -97020,8 +97016,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct11 = this.props.correct) != null && _this$props$correct11.showAngles),
       onChange: () => {
-        var _this$props$graph9;
-        if (((_this$props$graph9 = this.props.graph) == null ? void 0 : _this$props$graph9.type) === "polygon") {
+        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, {
@@ -97041,8 +97037,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct12 = this.props.correct) != null && _this$props$correct12.showSides),
       onChange: () => {
-        var _this$props$graph10;
-        if (((_this$props$graph10 = this.props.graph) == null ? void 0 : _this$props$graph10.type) === "polygon" && this.props.correct.type === "polygon") {
+        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
@@ -97070,7 +97066,7 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$graph11 = this.props.graph) == null ? void 0 : _this$props$graph11.type) && shouldShowStartCoordsUI(this.props.graph, this.props.static) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
+    })), ((_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