@khanacademy/perseus-editor 16.0.4 → 17.0.1

package/dist/components/widget-editor.d.ts

@@ -22,7 +22,7 @@ declare class WidgetEditor extends React.Component<WidgetEditorProps, WidgetEdit
     _handleAlignmentChange: (e: React.SyntheticEvent<HTMLSelectElement>) => void;
     getSaveWarnings: () => any;
     serialize: () => {
-        type: "definition" | "group" | "radio" | "table" | "categorizer" | "cs-program" | "dropdown" | "explanation" | "expression" | "grapher" | "graded-group-set" | "graded-group" | "iframe" | "image" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "molecule-renderer" | "number-line" | "numeric-input" | "orderer" | "passage-ref-target" | "passage-ref" | "passage" | "phet-simulation" | "python-program" | "plotter" | "sorter" | "video" | "deprecated-standin";
+        type: "categorizer" | "cs-program" | "definition" | "dropdown" | "explanation" | "expression" | "grapher" | "graded-group-set" | "graded-group" | "group" | "iframe" | "image" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "molecule-renderer" | "number-line" | "numeric-input" | "orderer" | "passage-ref-target" | "passage-ref" | "passage" | "phet-simulation" | "python-program" | "plotter" | "radio" | "sorter" | "table" | "video" | "deprecated-standin";
         alignment: string | undefined;
         static: boolean | undefined;
         graded: boolean | undefined;

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,17 +46,25 @@ 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 = "16.0.4";
+const libVersion = "17.0.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-    return n;
-  }, _extends.apply(null, arguments);
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
 }
 
 const devices = {
@@ -20509,14 +20517,19 @@ katex.__defineMacro("\\pu", function (context) {
 //  a mathematical minus, U+2212. So we need that extra 0.56.
 katex.__defineMacro("\\tripledash", "{\\vphantom{-}\\raisebox{2.56mu}{$\\mkern2mu" + "\\tiny\\text{-}\\mkern1mu\\text{-}\\mkern1mu\\text{-}\\mkern2mu$}}");
 
-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;
-    t[n] = r[n];
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
-  return t;
+
+  return target;
 }
 
 const _excluded$4 = ["component", "shouldDragHighlight"];
@@ -20858,8 +20871,7 @@ function LabeledSwitch$1(props) {
       label
     } = props,
     switchProps = _objectWithoutPropertiesLoose(props, _excluded$3);
-  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, {
@@ -93897,6 +93909,8 @@ const roles = [
     "slider",
     "switch",
     "tab",
+    // Combobox is NOT included in the WAI-ARIA 1.2 list of aria-roles that apply "presentation" to descendants
+    "combobox",
 ];
 const nodeHasRoleIn = (dom, roles) => roles.some((role) => dom.matches(`[role=${role}]`));
 const addLabelForNonSemanticRoles = (node, container, labelFn) => {
@@ -94928,8 +94942,7 @@ const LabeledSwitch = props => {
     style,
     onChange
   } = props;
-  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, {
@@ -96007,7 +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);
-  const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
+  const uniqueId = useId();
   const {
     figures,
     onChange
@@ -96744,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.
@@ -96753,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;
     };
   }
@@ -96786,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);
@@ -96856,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 => {
@@ -96900,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, {
@@ -96921,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
         };
@@ -96939,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,
@@ -96967,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
@@ -96997,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, {
@@ -97018,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
@@ -97047,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