@khanacademy/perseus 38.0.0 → 39.0.0

package/dist/index.d.ts

@@ -84,7 +84,7 @@ export type { ILogger, LogErrorOptions } from "./logging/log";
 export type { ServerItemRenderer as ServerItemRendererComponent } from "./server-item-renderer";
 export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetExports, SharedRendererProps, } from "./types";
 export type { ParsedValue } from "./util";
-export type { Hint, LegacyButtonSets, LockedFigure, LockedFigureColor, LockedFigureFillType, LockedFigureType, LockedPointType, LockedLineType, LockedVectorType, LockedEllipseType, LockedPolygonType, LockedFunctionType, LockedLabelType, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, CollinearTuple, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
+export type { Hint, LegacyButtonSets, LockedFigure, LockedFigureColor, LockedFigureFillType, LockedFigureType, LockedPointType, LockedLineType, LockedVectorType, LockedEllipseType, LockedPolygonType, LockedFunctionType, LockedLabelType, LockedLineStyle, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, CollinearTuple, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
 PerseusImageBackground, PerseusInputNumberWidgetOptions, PerseusInteractiveGraphWidgetOptions, PerseusItem, PerseusPhetSimulationWidgetOptions, PerseusPlotterWidgetOptions, PerseusPythonProgramWidgetOptions, PerseusRadioWidgetOptions, PerseusExampleWidgetOptions, PerseusSimpleMarkdownTesterWidgetOptions, PerseusRenderer, PerseusWidget, PerseusWidgetsMap, MultiItem, } from "./perseus-types";
 export type { Coord } from "./interactive2/types";
 export type { MarkerType } from "./widgets/label-image/types";

package/dist/index.js

@@ -2530,12 +2530,6 @@ class Expression extends React__namespace.Component {
     /* c8 ignore next */
     return [[]];
   };
-
-  // TODO(Nicole): I believe this is going away and won't be needed anymore
-  getGrammarTypeForPath(inputPath) {
-    /* c8 ignore next */
-    return "expression";
-  }
   setInputValue(path, newValue, cb) {
     this.props.onChange({
       value: newValue
@@ -2995,7 +2989,9 @@ function flattenScores(widgetScoreMap) {
 function isCorrect(score) {
   return score.type === "points" && score.earned >= score.total;
 }
-function keScoreFromPerseusScore(score, guess, state) {
+function keScoreFromPerseusScore(score,
+// It's weird, but this is what we're passing it
+guess, state) {
   if (score.type === "points") {
     return {
       empty: false,
@@ -4006,36 +4002,14 @@ const ZoomService = new ZoomServiceClass();
 const baseFontFamily$1 = "'Lato', sans-serif";
 // @boldFontFamily:        "Lato-Bold", "Lato", sans-serif;
 const boldFontFamily = "'Lato-Bold', 'Lato', sans-serif";
-// @green:                 #76a005;
-const green$1 = "#76A005";
 // @kaGreen:               #71b307;
 const kaGreen$1 = "#71B307";
-// @blue:                  #1c758a;
-const blue$1 = "#1C758A";
-// @gray:                  #aaa;
-const gray$1 = "#AAAAAA";
-// @red:                   #ffbaba;
-const red$1 = "#FFBABA";
-// @grayLight:             #aaa;
-const grayLight$1 = "#AAAAAA";
-// @grayLighter:           #ddd;
-const grayLighter$1 = "#DDDDDD";
-// @learnstormBlue:        #4898fc;
-const learnstormBlue$1 = "#4898FC";
 const white$1 = "#FFFFFF";
-const gray98 = "#FAFAFA";
 const gray97 = "#F6F7F7";
-const gray95 = "#F0F1F2";
-const gray90 = "#E3E5E6";
 const gray85 = "#D6D8DA";
 const gray76 = "#BABEC2";
 const gray68 = "#888D93";
-const gray41 = "#626569";
-const gray25 = "#3B3e40";
 const gray17 = "#21242c";
-const black$1 = "#000000";
-const warning1 = "#F86700";
-const warning3 = "#C75300";
 
 // @pure-sm-min: 568px;
 const pureSmMin$2 = "568px";
@@ -4055,16 +4029,10 @@ const pureMdMax$2 = "1023px";
 const pureLgMax$2 = "1279px";
 // @tableBackgroundAccent: #f9f9f9; // for striping
 const tableBackgroundAccent$1 = "#F9F9F9";
-// @zIndexScratchPad: 1;
-const zIndexScratchPad = 1;
 // @zIndexAboveScratchpad: @zIndexScratchPad + 1;
 const zIndexAboveScratchpad$1 = 2;
 // @zIndexInteractiveComponent: @zIndexAboveScratchpad + 1;
 const zIndexInteractiveComponent$1 = 3;
-// @zIndexCurrentlyDragging: @zIndexInteractiveComponent + 1;
-const zIndexCurrentlyDragging = 4;
-// @zIndexCalculator: @zIndexCurrentlyDragging + 1;
-const zIndexCalculator = 5;
 // @phoneMargin: 16px;
 const phoneMargin = 16;
 const negativePhoneMargin = -16;
@@ -4092,28 +4060,13 @@ var constants$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   baseFontFamily: baseFontFamily$1,
   boldFontFamily: boldFontFamily,
-  green: green$1,
   kaGreen: kaGreen$1,
-  blue: blue$1,
-  gray: gray$1,
-  red: red$1,
-  grayLight: grayLight$1,
-  grayLighter: grayLighter$1,
-  learnstormBlue: learnstormBlue$1,
   white: white$1,
-  gray98: gray98,
   gray97: gray97,
-  gray95: gray95,
-  gray90: gray90,
   gray85: gray85,
   gray76: gray76,
   gray68: gray68,
-  gray41: gray41,
-  gray25: gray25,
   gray17: gray17,
-  black: black$1,
-  warning1: warning1,
-  warning3: warning3,
   pureSmMin: pureSmMin$2,
   pureMdMin: pureMdMin$2,
   pureLgMin: pureLgMin$2,
@@ -4123,11 +4076,8 @@ var constants$1 = /*#__PURE__*/Object.freeze({
   pureMdMax: pureMdMax$2,
   pureLgMax: pureLgMax$2,
   tableBackgroundAccent: tableBackgroundAccent$1,
-  zIndexScratchPad: zIndexScratchPad,
   zIndexAboveScratchpad: zIndexAboveScratchpad$1,
   zIndexInteractiveComponent: zIndexInteractiveComponent$1,
-  zIndexCurrentlyDragging: zIndexCurrentlyDragging,
-  zIndexCalculator: zIndexCalculator,
   phoneMargin: phoneMargin,
   negativePhoneMargin: negativePhoneMargin,
   hintBorderWidth: hintBorderWidth,
@@ -20119,6 +20069,7 @@ class Renderer extends React__namespace.Component {
       onBlur: ___default["default"].partial(this._onWidgetBlur, id),
       findWidgets: this.findWidgets,
       reviewModeRubric: reviewModeRubric,
+      reviewMode: this.props.reviewMode,
       onChange: function (newProps, cb) {
         let silent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
         _this._setWidgetProps(id, newProps, cb, silent);
@@ -20832,14 +20783,6 @@ class Renderer extends React__namespace.Component {
       return ReactDOM__default["default"].findDOMNode(widget);
     }
   };
-  getGrammarTypeForPath = path => {
-    // @ts-expect-error - TS2345 - Argument of type 'FocusPath' is not assignable to parameter of type 'List<any>'.
-    const widgetId = ___default["default"].first(path);
-    // @ts-expect-error - TS2345 - Argument of type 'FocusPath' is not assignable to parameter of type 'List<any>'.
-    const interWidgetPath = ___default["default"].rest(path);
-    const widget = this.getWidgetInstance(widgetId);
-    return widget?.getGrammarTypeForPath?.(interWidgetPath);
-  };
   getInputPaths = () => {
     const inputPaths = [];
     ___default["default"].each(this.widgetIds, widgetId => {
@@ -21040,11 +20983,11 @@ class Renderer extends React__namespace.Component {
     const combinedScore = Util.flattenScores(scores);
     return combinedScore;
   }
-  guessAndScore = () => {
+  guessAndScore() {
     const totalGuess = this.getUserInput();
     const totalScore = this.score();
     return [totalGuess, totalScore];
-  };
+  }
   examples = () => {
     const widgetIds = this.widgetIds;
     const examples = ___default["default"].compact(___default["default"].map(widgetIds, widgetId => {
@@ -21900,7 +21843,7 @@ const answerTypes = {
     forms: "pi"
   }
 };
-function inputNumberValidator(state, rubric, strings) {
+function inputNumberValidator(userInput, rubric, strings) {
   if (rubric.answerType == null) {
     rubric.answerType = "number";
   }
@@ -21918,7 +21861,7 @@ function inputNumberValidator(state, rubric, strings) {
 
   // We may have received TeX; try to parse it before grading.
   // If `currentValue` is not TeX, this should be a no-op.
-  const currentValue = ParseTex$1(state.currentValue);
+  const currentValue = ParseTex$1(userInput.currentValue);
   const result = val(currentValue);
 
   // TODO(eater): Seems silly to translate result to this invalid/points
@@ -22023,13 +21966,6 @@ class InputNumber extends React__namespace.Component {
     /* c8 ignore next */
     return [[]];
   };
-
-  // Note: We believe that this isn't used anywhere but are leaving it during
-  // the initial refactor
-  getGrammarTypeForPath = path => {
-    /* c8 ignore next */
-    return "number";
-  };
   setInputValue = (path, newValue, cb) => {
     this.props.onChange({
       currentValue: newValue
@@ -22067,17 +22003,13 @@ class InputNumber extends React__namespace.Component {
       }
       return input;
     }
-    // HACK(johnsullivan): Create a function with shared logic between
-    // this and NumericInput.
-    // TODO(jeremy): Deprecate this widget and prefer numeric-input.
-    const rubric = this.props.reviewModeRubric;
 
     // Note: This is _very_ similar to what `numeric-input.jsx` does. If
     // you modify this, double-check if you also need to modify that
     // component.
     const inputStyles = [styles$A.default, this.props.size === "small" ? styles$A.small : null, this.props.rightAlign ? styles$A.rightAlign : styles$A.leftAlign];
     // Unanswered
-    if (rubric && !this.props.currentValue) {
+    if (this.props.reviewMode && !this.props.currentValue) {
       inputStyles.push(styles$A.answerStateUnanswered);
     }
     return /*#__PURE__*/React__namespace.createElement(InputWithExamples
@@ -22378,10 +22310,6 @@ class NumericInput extends React__namespace.Component {
     /* c8 ignore next */
     return [[]];
   };
-  getGrammarTypeForPath = inputPath => {
-    /* c8 ignore next */
-    return "number";
-  };
   setInputValue = (path, newValue, cb) => {
     /* c8 ignore next */
     this.props.onChange({
@@ -22551,7 +22479,7 @@ var NumericInput$1 = {
  * Several widgets don't have "right"/"wrong" validation logic,
  * so this just says to move on past those widgets
  *
- * TODO(LEMS-2396) widgets that use this probably shouldn't have any
+ * TODO(LEMS-2543) widgets that use this probably shouldn't have any
  * validation logic and the thing validating an exercise
  * should just know to skip these
  */
@@ -24625,7 +24553,7 @@ class Passage extends React__namespace.Component {
     const enabled = this.state.stylesAreApplied;
 
     // Highlights are read-only in review mode.
-    const editable = !this.props.reviewModeRubric;
+    const editable = !this.props.reviewMode;
     return /*#__PURE__*/React__namespace.createElement(HighlightableContent, {
       editable: editable,
       enabled: enabled,
@@ -25887,6 +25815,7 @@ const BaseRadio = function (props) {
   const {
     apiOptions,
     reviewModeRubric,
+    reviewMode,
     choices,
     editMode,
     multipleSelect,
@@ -25999,7 +25928,6 @@ const BaseRadio = function (props) {
   });
 
   // some commonly used shorthands
-  const reviewMode = !!reviewModeRubric;
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
@@ -26600,7 +26528,7 @@ class Radio$1 extends React__namespace.Component {
         highlighted,
         previouslyAnswered
       } = choiceStates[i];
-      const reviewChoice = this.props.reviewModeRubric && this.props.reviewModeRubric.choices[i];
+      const reviewChoice = this.props.reviewModeRubric?.choices[i];
       return {
         content: this._renderRenderer(content),
         checked: selected,
@@ -26635,6 +26563,7 @@ class Radio$1 extends React__namespace.Component {
       choices: choicesProp,
       onChange: this.updateChoices,
       reviewModeRubric: this.props.reviewModeRubric,
+      reviewMode: this.props.reviewMode,
       deselectEnabled: this.props.deselectEnabled,
       apiOptions: this.props.apiOptions,
       isLastUsedWidget: this.props.isLastUsedWidget,
@@ -29393,7 +29322,7 @@ class Group extends React__namespace.Component {
       ref: ref => this.rendererRef = ref,
       apiOptions: apiOptions,
       findExternalWidgets: this.props.findWidgets,
-      reviewMode: !!this.props.reviewModeRubric,
+      reviewMode: this.props.reviewMode,
       onInteractWithWidget: onInteractWithWidget,
       linterContext: this.props.linterContext,
       strings: this.context.strings
@@ -39035,10 +38964,12 @@ function scoreMarker(marker) {
   }
   return score;
 }
-function labelImageValidator(state, rubric) {
+
+// TODO(LEMS-2440): May need to pull answers out of PerseusLabelImageWidgetOptions[markers] for the rubric
+function labelImageValidator(userInput, rubric) {
   let numAnswered = 0;
   let numCorrect = 0;
-  for (const marker of state.markers) {
+  for (const marker of userInput.markers) {
     const score = scoreMarker(marker);
     if (score.hasAnswers) {
       numAnswered++;
@@ -39049,7 +38980,7 @@ function labelImageValidator(state, rubric) {
   }
 
   // We expect all question markers to be answered before grading.
-  if (numAnswered !== state.markers.length) {
+  if (numAnswered !== userInput.markers.length) {
     return {
       type: "invalid",
       message: null
@@ -39059,7 +38990,7 @@ function labelImageValidator(state, rubric) {
     type: "points",
     // Markers with no expected answers are graded as correct if user
     // makes no answer selection.
-    earned: numCorrect === state.markers.length ? 1 : 0,
+    earned: numCorrect === userInput.markers.length ? 1 : 0,
     total: 1,
     message: null
   };
@@ -39325,8 +39256,6 @@ const styles$b = aphrodite.StyleSheet.create({
  * No diagonals allowed.
  */
 
-// TODO: should this be using WidgetProps / PerseusLabelImageWidgetOptions?
-
 class LabelImage extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   // The rendered markers on the question image for labeling.
@@ -39532,6 +39461,8 @@ class LabelImage extends React__namespace.Component {
       markers
     };
   }
+
+  // TODO(LEMS-2544): Investigate impact on scoring; possibly pull out &/or remove rubric parameter.
   showRationalesForCurrentlySelectedChoices(rubric) {
     const {
       markers
@@ -40975,9 +40906,6 @@ class Matrix extends React__namespace.Component {
     });
     return inputPaths;
   };
-  getGrammarTypeForPath = inputPath => {
-    return "number";
-  };
   _handleFocus = (row, col) => {
     this.props.onFocus(getInputPath$1(row, col));
   };
@@ -41294,7 +41222,7 @@ const defaultImage = {
 class Measurer extends React__namespace.Component {
   static defaultProps = {
     box: [480, 480],
-    image: {},
+    image: defaultImage,
     showProtractor: true,
     protractorX: 7.5,
     protractorY: 0.5,
@@ -42450,10 +42378,12 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
   };
 
   // Generate an array of tick numbers:
-  //    `Array(props.numDivisions)` makes an array of null values - one for every division marker
+  //    `Array(Math.round(numDivisions))` makes an array of null values - one for every division marker
   //    `.keys()` gets the index values for each marker placeholder
   //    `.map()` converts the index values into actual tick numbers
-  const initialTicks = [...Array(numDivisions).keys()].map(index => range[0] + index * tickStep);
+  // NOTE: 'numDivisions' can sometimes be a non-integer (i.e. 7.000001).
+  //       Using Math.round() to ensure that an integer is used in the Array setup.
+  const initialTicks = [...Array(Math.round(numDivisions)).keys()].map(index => range[0] + index * tickStep);
 
   // .sort() comparator
   const byNumericAscending = (a, b) => a - b;
@@ -42590,11 +42520,6 @@ class NumberLine extends React__namespace.Component {
     }
     return null;
   }
-  getGrammarTypeForPath(inputPath) {
-    if (inputPath?.length === 1 && inputPath[0] === "tick-ctrl") {
-      return "number";
-    }
-  }
   setInputValue = (inputPath, value, callback) => {
     if (inputPath.length === 1 && inputPath[0] === "tick-ctrl") {
       this.onNumDivisionsChange(value, callback);
@@ -44883,9 +44808,6 @@ class Table extends React__namespace.Component {
     });
     return inputPaths;
   };
-  getGrammarTypeForPath = inputPath => {
-    return "number";
-  };
   setInputValue = (path, newValue, cb) => {
     // Extract row, column information
     const row = getRowFromPath(path);
@@ -45179,7 +45101,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "38.0.0";
+const libVersion = "39.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45890,9 +45812,6 @@ class ServerItemRenderer extends React__namespace.Component {
   getDOMNodeForPath(path) {
     return this.questionRenderer.getDOMNodeForPath(path);
   }
-  getGrammarTypeForPath(path) {
-    return this.questionRenderer.getGrammarTypeForPath(path);
-  }
   getInputPaths() {
     const questionAreaInputPaths = this.questionRenderer.getInputPaths();
     return questionAreaInputPaths;
@@ -47193,7 +47112,6 @@ const styles = aphrodite.StyleSheet.create({
  * If you're writing new components, though, consider using the Item and Shape
  * types instead.
  */
-
 /**
  * Return a PropType that accepts Items of the given shape, and rejects other
  * objects.
@@ -47425,6 +47343,21 @@ function violatingWidgets(itemData) {
 }
 
 /* eslint-disable eqeqeq, @typescript-eslint/no-unused-vars */
+/*
+ * A class for formatting number to significant digits.
+ * Copyright (C) 2001 Stephen Ostermiller
+ * http://ostermiller.org/contact.pl?regarding?JavaScript+Significant+Figures
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ */
 
 /**
  * Format a floating point for display using the specified