@khanacademy/perseus 20.4.1 → 20.6.0

package/dist/components/icon.d.ts

@@ -28,6 +28,7 @@
  * If you want to add an entirely new icon please read the note inside
  * the `icon-paths.js` file.
  */
+/// <reference path="../../types/aphrodite.d.ts" />
 import * as React from "react";
 import type { CSSProperties } from "aphrodite";
 export type IconType = {

package/dist/es/index.js

@@ -32,6 +32,7 @@ import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
 import { Point as Point$2, vec, useTransformContext, useMovable, Vector, Coordinates, Mafs } from 'mafs';
+import { color } from '@khanacademy/wonder-blocks-tokens';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -19336,7 +19337,6 @@ class Renderer extends React.Component {
     };
     // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
     this._getAllWidgetsInfo = props => {
-      // @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
       return mapObject$1(props.widgets, (widgetInfo, widgetId) => {
         if (!widgetInfo.type || !widgetInfo.alignment) {
           const newValues = {};
@@ -28125,6 +28125,17 @@ Graph.defaultProps = {
   isMobile: false
 };
 
+/**
+ * Takes a style object with color names and converts them to actual
+ * Wonder Blocks color values. This way, we can use colors and their
+ * names in the editor UI without having to convert them back and forth.
+ */
+function convertStyle(style) {
+  return _extends({}, style, {
+    stroke: color[(style == null ? void 0 : style.stroke) || "blue"],
+    fill: color[(style == null ? void 0 : style.fill) || "blue"]
+  });
+}
 const GraphLockedLayer = props => {
   const {
     lockedFigures
@@ -28138,7 +28149,7 @@ const GraphLockedLayer = props => {
           x: x,
           y: y,
           svgCircleProps: {
-            style: figure.style
+            style: convertStyle(figure.style)
           }
         });
     }
@@ -29534,7 +29545,7 @@ const makeInvalidTypeError = (functionName, graphType) => {
 
 // There's no transform function in exports
 
-class InteractiveGraph extends React.Component {
+class LegacyInteractiveGraph extends React.Component {
   constructor(...args) {
     super(...args);
     this.angle = void 0;
@@ -29555,7 +29566,6 @@ class InteractiveGraph extends React.Component {
     this.sinusoid = void 0;
     this.trashCan = void 0;
     this.vertHairline = void 0;
-    this.mafsRef = /*#__PURE__*/React.createRef();
     this.state = {
       shouldShowInstructions: _getShouldShowInstructions(this.props)
     };
@@ -30635,10 +30645,7 @@ class InteractiveGraph extends React.Component {
         graph: graph
       });
     };
-    this.getUserInput = () => {
-      var _this$mafsRef$current, _this$mafsRef$current2;
-      return (_this$mafsRef$current = (_this$mafsRef$current2 = this.mafsRef.current) == null || _this$mafsRef$current2.getUserInput == null ? void 0 : _this$mafsRef$current2.getUserInput()) != null ? _this$mafsRef$current : InteractiveGraph.getUserInputFromProps(this.props);
-    };
+    this.getUserInput = () => InteractiveGraph.getUserInputFromProps(this.props);
     this.simpleValidate = rubric => InteractiveGraph.validate(this.getUserInput(), rubric, this);
     this.focus = $.noop;
   }
@@ -30691,23 +30698,10 @@ class InteractiveGraph extends React.Component {
   areSegmentGraphsEqual(prevGraph, currentGraph) {
     return prevGraph.numSegments !== currentGraph.numSegments;
   }
-  // const segment: boolean = useFeatureIsOn("mafs-segment-graph");
-  // <Renderer apiOptions={{flags: {mafs: {segment}}}}
   render() {
-    var _this$props$apiOption;
     const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
     const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
-
-    // Mafs shim
-    if ((_this$props$apiOption = this.props.apiOptions) != null && (_this$props$apiOption = _this$props$apiOption.flags) != null && (_this$props$apiOption = _this$props$apiOption["mafs"]) != null && _this$props$apiOption[this.props.graph.type]) {
-      return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, this.props, {
-        ref: this.mafsRef,
-        gridStep: gridStep,
-        snapStep: snapStep,
-        box: box
-      }));
-    }
     let instructions;
     // isClickToAddPoints() only applies to points and polygons
     if (this.isClickToAddPoints() && this.state.shouldShowInstructions) {
@@ -30753,6 +30747,60 @@ class InteractiveGraph extends React.Component {
       isMobile: isMobile
     }));
   }
+}
+LegacyInteractiveGraph.defaultProps = {
+  labels: ["x", "y"],
+  range: [[-10, 10], [-10, 10]],
+  step: [1, 1],
+  backgroundImage: defaultBackgroundImage,
+  markings: "graph",
+  showTooltips: false,
+  showProtractor: false,
+  showRuler: false,
+  rulerLabel: "",
+  rulerTicks: 10,
+  graph: {
+    type: "linear"
+  }
+};
+class InteractiveGraph extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.legacyGraphRef = /*#__PURE__*/React.createRef();
+    this.mafsRef = /*#__PURE__*/React.createRef();
+    this.getUserInput = () => {
+      if (this.mafsRef.current) {
+        var _this$mafsRef$current, _this$mafsRef$current2;
+        return (_this$mafsRef$current = (_this$mafsRef$current2 = this.mafsRef.current).getUserInput) == null ? void 0 : _this$mafsRef$current.call(_this$mafsRef$current2);
+      }
+      if (this.legacyGraphRef.current) {
+        return this.legacyGraphRef.current.getUserInput();
+      }
+      throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
+    };
+    this.simpleValidate = rubric => {
+      var _this$getUserInput;
+      return InteractiveGraph.validate((_this$getUserInput = this.getUserInput) == null ? void 0 : _this$getUserInput.call(this), rubric, this);
+    };
+  }
+  render() {
+    var _this$props$apiOption;
+    // Mafs shim
+    if ((_this$props$apiOption = this.props.apiOptions) != null && (_this$props$apiOption = _this$props$apiOption.flags) != null && (_this$props$apiOption = _this$props$apiOption["mafs"]) != null && _this$props$apiOption[this.props.graph.type]) {
+      const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
+      const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
+      const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
+      return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, this.props, {
+        ref: this.mafsRef,
+        gridStep: gridStep,
+        snapStep: snapStep,
+        box: box
+      }));
+    }
+    return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
+      ref: this.legacyGraphRef
+    }, this.props));
+  }
   static getQuadraticCoefficients(coords) {
     const p1 = coords[0];
     const p2 = coords[1];
@@ -41481,7 +41529,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.4.1";
+const libVersion = "20.6.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -42260,7 +42308,6 @@ class ServerItemRenderer extends React.Component {
     const qScore = this.questionRenderer.scoreWidgets();
     const qGuess = this.questionRenderer.getUserInputForWidgets();
     const state = this.questionRenderer.getSerializedState();
-    // @ts-expect-error - TS2322 - Type 'Partial<Record<string, KEScore>>' is not assignable to type '{ [key: string]: KEScore; }'. | TS2345 - Argument of type '{ [widgetId: string]: PerseusScore; }' is not assignable to parameter of type 'Partial<Record<string, { type: "invalid"; message?: string | null | undefined; suppressAlmostThere?: boolean | null | undefined; }>>'.
     return mapObject(qScore, (score, id) => {
       return Util.keScoreFromPerseusScore(score, qGuess[id], state);
     });
@@ -44190,6 +44237,71 @@ function generateTestPerseusItem(customFields = {}) {
   return _extends({}, genericPerseusItemData, customFields);
 }
 
+/**
+ * Some helpers for CEDAR logging. CEDAR convention dictates
+ * that enum values should be upper case. Ex: for the
+ * PerseusWidgetUsedInProblemAttempt CEDAR event, we needed
+ * to: get the type and convert that to an enum value.
+ */
+
+const widgetNameToEnum = {
+  categorizer: "CATEGORIZER",
+  "cs-program": "CS_PROGRAM",
+  definition: "DEFINITION",
+  "deprecated-standin": "DEPRECATED_STANDIN",
+  dropdown: "DROPDOWN",
+  explanation: "EXPLANATION",
+  expression: "EXPRESSION",
+  "graded-group-set": "GRADED_GROUP_SET",
+  "graded-group": "GRADED_GROUP",
+  grapher: "GRAPHER",
+  group: "GROUP",
+  iframe: "IFRAME",
+  image: "IMAGE",
+  "input-number": "INPUT_NUMBER",
+  interaction: "INTERACTIVE",
+  "interactive-graph": "INTERACTIVE_GRAPH",
+  "label-image": "LABEL_IMAGE",
+  "lights-puzzle": "LIGHTS_PUZZLE",
+  matcher: "MATCHER",
+  matrix: "MATRIX",
+  measurer: "MEASURER",
+  "molecule-renderer": "MOLECULE",
+  "number-line": "NUMBER_LINE",
+  "numeric-input": "NUMERIC_INPUT",
+  orderer: "ORDERER",
+  passage: "PASSAGE",
+  "passage-ref": "PASSAGE_REF",
+  "passage-ref-target": "PASSAGE_REF_TARGET",
+  plotter: "PLOTTER",
+  "python-program": "PYTHON_PROGRAM",
+  "reaction-diagram": "REACTION_DIAGRAM",
+  radio: "RADIO",
+  sequence: "SEQUENCE",
+  simulator: "SIMULATOR",
+  sorter: "SORTER",
+  table: "TABLE",
+  "unit-input": "UNIT",
+  video: "VIDEO"
+};
+function convertWidgetNameToEnum(name) {
+  const widgetEnum = widgetNameToEnum[name];
+  if (!widgetEnum) {
+    throw new Error(`Unknown widget name: ${name}`);
+  }
+  return widgetEnum;
+}
+function getWidgetTypeFromWidgetId(widgetId) {
+  const [widgetType, widgetNumber] = widgetId.split(" ");
+  if (!widgetNumber) {
+    throw new Error(`Incorrect format for widget ID: ${widgetId}`);
+  }
+  if (!widgetNameToEnum[widgetType]) {
+    throw new Error(`Unknown widget type (${widgetType}) in widget ID: ${widgetId}`);
+  }
+  return widgetType;
+}
+
 const EditorJsonify = {
   serialize: function () {
     // Omit props that get passed to all widgets
@@ -44198,5 +44310,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, generateTestPerseusItem, genericPerseusItemData, getAnswersFromWidgets, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, convertWidgetNameToEnum, displaySigFigs, generateTestPerseusItem, genericPerseusItemData, getAnswersFromWidgets, getWidgetTypeFromWidgetId, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map