@khanacademy/perseus-editor 14.1.0 → 14.1.1

package/dist/components/graph-locked-figures/locked-figure-select.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 type Props = {
-    showM2bFeatures: boolean;
     showLabelsFlag?: boolean;
     id: string;
     onChange: (value: string) => void;

package/dist/components/graph-locked-figures/locked-figure-settings.d.ts

@@ -14,7 +14,6 @@ import type { Props as LockedPointProps } from "./locked-point-settings";
 import type { Props as LockedPolygonProps } from "./locked-polygon-settings";
 import type { Props as LockedVectorProps } from "./locked-vector-settings";
 export type LockedFigureSettingsCommonProps = {
-    showM2bFeatures?: boolean;
     showLabelsFlag?: boolean;
     /**
      * Called when a movement button (top, up, down, bottom) is pressed.

package/dist/components/graph-locked-figures/locked-figures-section.d.ts

@@ -2,7 +2,6 @@ import * as React from "react";
 import type { Props as InteractiveGraphEditorProps } from "../../widgets/interactive-graph-editor/interactive-graph-editor";
 import type { LockedFigure } from "@khanacademy/perseus";
 type Props = {
-    showM2bFeatures: boolean;
     showLabelsFlag?: boolean;
     figures?: Array<LockedFigure>;
     onChange: (props: Partial<InteractiveGraphEditorProps>) => void;

package/dist/components/util.d.ts

@@ -14,4 +14,4 @@ export declare function getDefaultGraphStartCoords(graph: PerseusGraphType, rang
 export declare const getSinusoidEquation: (startCoords: [Coord, Coord]) => string;
 export declare const getQuadraticEquation: (startCoords: [Coord, Coord, Coord]) => string;
 export declare const getAngleEquation: (startCoords: [Coord, Coord, Coord]) => string;
-export declare const shouldShowStartCoordsUI: (flags: any, graph: any) => boolean;
+export declare const shouldShowStartCoordsUI: (graph: PerseusGraphType, isStatic?: boolean) => boolean;

package/dist/es/index.js

@@ -15,7 +15,7 @@ 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';
 import classNames from 'classnames';
-import { Checkbox as Checkbox$1, LabeledTextField, TextField } from '@khanacademy/wonder-blocks-form';
+import { Checkbox as Checkbox$1, LabeledTextField, TextField, TextArea } from '@khanacademy/wonder-blocks-form';
 import ReactDOM from 'react-dom';
 import * as KAS from '@khanacademy/kas';
 import Button from '@khanacademy/wonder-blocks-button';
@@ -44,7 +44,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 = "14.1.0";
+const libVersion = "14.1.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -29780,35 +29780,20 @@ const getAngleEquation = startCoords => {
   const roundedAngle = angle.toFixed(0);
   return `${roundedAngle}\u00B0 angle at (${vertex[0]}, ${vertex[1]})`;
 };
-const shouldShowStartCoordsUI = (flags, graph) => {
-  var _flags$mafs, _flags$mafs2, _flags$mafs3, _flags$mafs4, _flags$mafs5;
-  // TODO(LEMS-2228): Remove flags once this is fully released
-  const startCoordsUiPhase1Types = ["linear", "linear-system", "ray", "segment", "circle"];
-  const startCoordsUiPhase2Types = ["sinusoid", "quadratic"];
-  const startCoordsPhase1 = flags == null || (_flags$mafs = flags.mafs) == null ? void 0 : _flags$mafs["start-coords-ui-phase-1"];
-  const startCoordsPhase2 = flags == null || (_flags$mafs2 = flags.mafs) == null ? void 0 : _flags$mafs2["start-coords-ui-phase-2"];
-  const startCoordsPoint = flags == null || (_flags$mafs3 = flags.mafs) == null ? void 0 : _flags$mafs3["start-coords-ui-point"];
-  const startCoordsPolygon = flags == null || (_flags$mafs4 = flags.mafs) == null ? void 0 : _flags$mafs4["start-coords-ui-polygon"];
-  const startCoordsAngle = flags == null || (_flags$mafs5 = flags.mafs) == null ? void 0 : _flags$mafs5["start-coords-ui-angle"];
-  if (startCoordsPhase1 && startCoordsUiPhase1Types.includes(graph.type)) {
-    return true;
-  }
-  if (startCoordsPhase2 && startCoordsUiPhase2Types.includes(graph.type)) {
-    return true;
-  }
-  if (startCoordsAngle && graph.type === "angle") {
-    return true;
+const shouldShowStartCoordsUI = (graph, isStatic) => {
+  // We don't show the start coords UI for static graphs, since
+  // the coords shown for this are determined by the coords on the
+  // "correct" graph. The start coords would not be used here.
+  if (isStatic) {
+    return false;
   }
-  if (startCoordsPoint && graph.type === "point" && graph.numPoints !== "unlimited") {
-    return true;
+  if (graph.type === "point" && graph.numPoints === "unlimited") {
+    return false;
   }
-  if (startCoordsPolygon && graph.type === "polygon" && graph.numSides !== "unlimited" && (
-  // Pre-initialized graph with undefined snapTo value
-  // initializes to snapTo="grid"
-  graph.snapTo === "grid" || graph.snapTo === undefined)) {
-    return true;
+  if (graph.type === "polygon" && (graph.numSides === "unlimited" || graph.snapTo === "angles" || graph.snapTo === "sides")) {
+    return false;
   }
-  return false;
+  return true;
 };
 
 /**
@@ -29823,10 +29808,7 @@ const LockedFigureSelect = props => {
     id,
     onChange
   } = props;
-  const figureTypes = ["point", "line", "vector", "ellipse", "polygon"];
-  if (props.showM2bFeatures) {
-    figureTypes.push("function");
-  }
+  const figureTypes = ["point", "line", "vector", "ellipse", "polygon", "function"];
   if (props.showLabelsFlag) {
     figureTypes.push("label");
   }
@@ -31510,10 +31492,7 @@ const LockedFigureSettings = props => {
     case "polygon":
       return /*#__PURE__*/React.createElement(LockedPolygonSettings, props);
     case "function":
-      if (props.showM2bFeatures) {
-        return /*#__PURE__*/React.createElement(LockedFunctionSettings, props);
-      }
-      break;
+      return /*#__PURE__*/React.createElement(LockedFunctionSettings, props);
     case "label":
       if (props.showLabelsFlag) {
         return /*#__PURE__*/React.createElement(LockedLabelSettings, props);
@@ -31624,7 +31603,6 @@ const LockedFiguresSection = props => {
   }), isExpanded && /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
     return /*#__PURE__*/React.createElement(LockedFigureSettings, _extends({
       key: `${uniqueId}-locked-${figure}-${index}`,
-      showM2bFeatures: props.showM2bFeatures,
       showLabelsFlag: props.showLabelsFlag,
       expanded: expandedStates[index],
       onToggle: newValue => {
@@ -31640,7 +31618,6 @@ const LockedFiguresSection = props => {
   }), /*#__PURE__*/React.createElement(View, {
     style: styles$n.buttonContainer
   }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
-    showM2bFeatures: props.showM2bFeatures,
     showLabelsFlag: props.showLabelsFlag,
     id: `${uniqueId}-select`,
     onChange: addLockedFigure
@@ -31795,24 +31772,20 @@ function InteractiveGraphDescription(props) {
     value: ariaLabelValue,
     onChange: newValue => onChange({
       fullGraphAriaLabel: newValue
-    })
+    }),
+    style: styles$k.spaceAbove
   })), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xSmall_8
+    size: spacing.small_12
   }), /*#__PURE__*/React.createElement(LabelLarge, {
     tag: "label"
-    // TODO(LEMS-2332): Remove this style prop after
-    // switching to WB TextArea
-    ,
-    style: {
-      display: "flex",
-      flexDirection: "column"
-    }
-  }, "Description", /*#__PURE__*/React.createElement("textarea", {
+  }, "Description", /*#__PURE__*/React.createElement(TextArea, {
     rows: 8,
+    resizeType: "vertical",
     value: ariaDescriptionValue,
-    onChange: e => onChange({
-      fullGraphAriaDescription: e.target.value
-    })
+    onChange: newValue => onChange({
+      fullGraphAriaDescription: newValue
+    }),
+    style: styles$k.spaceAbove
   }))));
 }
 const styles$k = StyleSheet.create({
@@ -31820,6 +31793,9 @@ const styles$k = StyleSheet.create({
     color: color.offBlack64,
     paddingTop: spacing.xxSmall_6,
     paddingBottom: spacing.xxSmall_6
+  },
+  spaceAbove: {
+    marginTop: spacing.xxxSmall_4
   }
 });
 
@@ -32828,7 +32804,7 @@ class InteractiveGraphEditor extends React.Component {
     return json;
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph3, _this$props$apiOption, _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$graph9, _this$props$apiOption2, _this$props$apiOption3, _this$props$apiOption4;
+    var _this$props$graph$typ, _this$props$graph3, _this$props$apiOption, _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$graph9, _this$props$apiOption2, _this$props$apiOption3;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -33046,9 +33022,7 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$graph9 = this.props.graph) == null ? void 0 : _this$props$graph9.type) &&
-    // TODO(LEMS-2228): Remove flags once this is fully released
-    shouldShowStartCoordsUI(this.props.apiOptions.flags, this.props.graph) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
+    })), ((_this$props$graph9 = this.props.graph) == null ? void 0 : _this$props$graph9.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
@@ -33133,8 +33107,7 @@ class InteractiveGraphEditor extends React.Component {
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
     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(LockedFiguresSection, {
-      showM2bFeatures: (_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["interactive-graph-locked-features-m2b"],
-      showLabelsFlag: (_this$props$apiOption4 = this.props.apiOptions) == null || (_this$props$apiOption4 = _this$props$apiOption4.flags) == null || (_this$props$apiOption4 = _this$props$apiOption4.mafs) == null ? void 0 : _this$props$apiOption4["interactive-graph-locked-features-labels"],
+      showLabelsFlag: (_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["interactive-graph-locked-features-labels"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
     }));