@khanacademy/perseus 49.1.6 → 49.2.0

package/dist/components/math-input.d.ts

@@ -5,13 +5,14 @@ import type { LegacyButtonSets } from "../perseus-types";
 import type { Keys, MathFieldInterface } from "@khanacademy/math-input";
 import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
 type ButtonsVisibleType = "always" | "never" | "focused";
-type KeypadButtonSets = {
+export type KeypadButtonSets = {
     advancedRelations?: boolean;
     basicRelations?: boolean;
     divisionKey?: boolean;
     logarithms?: boolean;
     preAlgebra?: boolean;
     trigonometry?: boolean;
+    scientific?: boolean;
 };
 type Props = {
     className?: string;

package/dist/es/index.css

@@ -2747,6 +2747,11 @@ img.zoom-img {
   box-sizing: content-box;
   padding: 25px 25px 0 0;
 }
+.perseus-dropdown .perseus-renderer .paragraph {
+  /* overriding overly broad selectors in .framework-perseus rules */
+  margin-bottom: 0 !important;
+  font-size: 18px !important;
+}
 .categorizer-container {
   margin-top: 20px;
 }

package/dist/es/index.js

@@ -326,11 +326,11 @@ const mockStrings = {
     angleMeasure,
     vertexX,
     vertexY,
-    isX,
-    isY,
-    tsX,
-    tsY
-  }) => `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the initial side at ${isX} comma ${isY} and a point on the terminal side at ${tsX} comma ${tsY}.`
+    startingSideX,
+    startingSideY,
+    endingSideX,
+    endingSideY
+  }) => `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the starting side at ${startingSideX} comma ${startingSideY} and a point on the ending side at ${endingSideX} comma ${endingSideY}.`
   // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -741,6 +741,9 @@ const mapButtonSets = buttonSets => {
       case "trig":
         keypadButtonSets.trigonometry = true;
         break;
+      case "scientific":
+        keypadButtonSets.scientific = true;
+        break;
     }
   });
   return keypadButtonSets;
@@ -3821,7 +3824,9 @@ ZoomServiceClass.prototype._scrollHandler = function (e) {
   }
 };
 ZoomServiceClass.prototype._keyHandler = function (e) {
-  if (e.keyCode === 27) {
+  // 27: Esc, 13: Enter, 32: Space
+  const keyCodes = [27, 13, 32];
+  if (keyCodes.includes(e.keyCode)) {
     this._activeZoomClose();
   }
 };
@@ -3910,6 +3915,7 @@ Zoom.prototype.zoomImage = function () {
   }.bind(this);
   img.src = this._targetImage.src;
   img.alt = this._targetImage.alt;
+  img.tabIndex = 0;
   this.$zoomedImage = $zoomedImage;
 };
 Zoom.prototype._zoomOriginal = function () {
@@ -17020,6 +17026,7 @@ class ImageLoader extends React.Component {
       }
       const staticUrl = getDependencies().staticUrl;
       return /*#__PURE__*/React.createElement("img", _extends({
+        tabIndex: 0,
         src: staticUrl(src),
         onKeyUp: onKeyUp,
         onKeyDown: onKeyDown
@@ -22219,7 +22226,7 @@ function scoreNumericInput(userInput, 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(userInput.currentValue);
-  const normalizedAnswerExpected = rubric.answers.filter(answer => answer.status === "correct").every(answer => answer.value !== undefined && Math.abs(answer.value) <= 1);
+  const normalizedAnswerExpected = rubric.answers.filter(answer => answer.status === "correct").every(answer => answer.value != null && Math.abs(answer.value) <= 1);
 
   // The coefficient is an attribute of the widget
   let localValue = currentValue;
@@ -27427,8 +27434,7 @@ class Dropdown extends React.Component {
       disabled: true,
       label: /*#__PURE__*/React.createElement(Renderer, {
         content: this.props.placeholder,
-        strings: this.context.strings,
-        inline: true
+        strings: this.context.strings
       }),
       labelAsText: this.props.placeholder
     }), ...this.props.choices.map((choice, i) => /*#__PURE__*/React.createElement(OptionItem, {
@@ -27436,8 +27442,7 @@ class Dropdown extends React.Component {
       value: String(i + 1),
       label: /*#__PURE__*/React.createElement(Renderer, {
         content: choice,
-        strings: this.context.strings,
-        inline: true
+        strings: this.context.strings
       }),
       labelAsText: choice
     }))];
@@ -27457,6 +27462,7 @@ class Dropdown extends React.Component {
     }, this.props.visibleLabel), /*#__PURE__*/React.createElement(SingleSelect, {
       id: dropdownId,
       placeholder: "",
+      className: "perseus-dropdown",
       onChange: value => this._handleChange(parseInt(value)),
       selectedValue: String(this.props.selected),
       disabled: this.props.apiOptions.readOnly,
@@ -34133,10 +34139,10 @@ function AngleGraph(props) {
     angleMeasure,
     vertexX: srFormatNumber(coords[1][X], locale),
     vertexY: srFormatNumber(coords[1][Y], locale),
-    isX: srFormatNumber(coords[2][X], locale),
-    isY: srFormatNumber(coords[2][Y], locale),
-    tsX: srFormatNumber(coords[0][X], locale),
-    tsY: srFormatNumber(coords[0][Y], locale)
+    startingSideX: srFormatNumber(coords[2][X], locale),
+    startingSideY: srFormatNumber(coords[2][Y], locale),
+    endingSideX: srFormatNumber(coords[0][X], locale),
+    endingSideY: srFormatNumber(coords[0][Y], locale)
   });
   const formatCoordinates = (x, y) => ({
     x: srFormatNumber(x, locale),
@@ -45554,7 +45560,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "49.1.6";
+const libVersion = "49.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -47839,10 +47845,10 @@ class UnionBuilder {
     this.parser = parser;
   }
   or(newBranch) {
-    return new UnionBuilder(either(this.parser, newBranch));
+    return new UnionBuilder(either$1(this.parser, newBranch));
   }
 }
-function either(parseA, parseB) {
+function either$1(parseA, parseB) {
   return (rawValue, ctx) => {
     const resultA = parseA(rawValue, ctx);
     if (isSuccess(resultA)) {
@@ -47944,22 +47950,107 @@ const parseExplanationWidget = parseWidget(constant("explanation"), object({
   // We wrap parseWidgetsMap in a function here to make sure it is not
   // referenced before it is defined. There is an import cycle between
   // this file and widgets-map.ts that could cause it to be undefined.
-  widgets: (rawVal, ctx) => parseWidgetsMap(rawVal, ctx),
-  static: boolean
+  widgets: defaulted((rawVal, ctx) => parseWidgetsMap(rawVal, ctx), () => ({})),
+  static: defaulted(boolean, () => false)
 }));
 
-const parseAnswerForm = object({
-  value: string,
-  form: boolean,
-  simplify: boolean,
+// Given a function, creates a PartialParser that converts one type to another
+// using that function. The returned parser never fails.
+function convert(f) {
+  return (rawValue, ctx) => ctx.success(f(rawValue));
+}
+
+/**
+ * Creates a parser for a widget options type with multiple major versions. Old
+ * versions are migrated to the latest version. The parse fails if the input
+ * data does not match any of the versions.
+ *
+ * @example
+ * const parseOptions = versionedWidgetOptions(parseOptionsV3)
+ *     .withMigrationFrom(parseOptionsV2, migrateV2ToV3)
+ *     .withMigrationFrom(parseOptionsV1, migrateV1ToV2)
+ *     .withMigrationFrom(parseOptionsV0, migrateV0ToV1)
+ *     .parser;
+ *
+ * @param parseLatest a {@link Parser} for the latest version of the widget
+ * options. This should check version.major and fail if it's not the latest
+ * version.
+ * @returns a builder object, to which migrations from earlier versions can be
+ * added. Migrations must be added in "reverse chronological" order as in the
+ * example above.
+ */
+function versionedWidgetOptions(parseLatest) {
+  return new VersionedWidgetOptionsParserBuilder(parseLatest, latest => latest);
+}
+class VersionedWidgetOptionsParserBuilder {
+  constructor(parser, migrate) {
+    this.parser = parser;
+    this.migrate = migrate;
+  }
+
+  /**
+   * Add a migration from an old version of the widget options.
+   *
+   * @returns a VersionedWidgetOptionsParserBuilder whose `parser` function
+   * is capable of migrating the old version to the latest version. The parser
+   * will always return the latest version of the widget options on a
+   * successful parse.
+   * @param parseOldVersion should be a {@link Parser} for the old options
+   * type. It should fail if version.major isn't correct.
+   * @param migrateToNextVersion should migrate the `Old` data to the
+   * `Migratable` version of the current VersionedWidgetOptionsParserBuilder.
+   * Usually, this means migrating to the next major version.
+   */
+  withMigrationFrom(parseOldVersion, migrateToNextVersion) {
+    const parseLatestVersion = this.parser;
+    const migrateToLatest = old => this.migrate(migrateToNextVersion(old));
+    return new VersionedWidgetOptionsParserBuilder((raw, ctx) => {
+      const resultOfParsingLatest = parseLatestVersion(raw, ctx);
+      if (isSuccess(resultOfParsingLatest)) {
+        return resultOfParsingLatest;
+      }
+      const resultOfParsingOld = parseOldVersion(raw, ctx);
+      if (isSuccess(resultOfParsingOld)) {
+        return success(migrateToLatest(resultOfParsingOld.value));
+      }
+
+      // If we're here, neither parse succeeded. Return the failure.
+      return resultOfParsingOld;
+    }, migrateToLatest);
+  }
+}
+
+const parsePossiblyInvalidAnswerForm = object({
+  // `value` is the possibly invalid part of this. It should always be a
+  // string, but some answer forms don't have it. The Expression widget
+  // ignores invalid values, so we can safely filter them out during parsing.
+  value: optional(string),
+  form: defaulted(boolean, () => false),
+  simplify: defaulted(boolean, () => false),
   considered: enumeration("correct", "wrong", "ungraded"),
   key: pipeParsers(optional(union(string).or(number).parser)).then((key, ctx) => ctx.success(String(key))).parser
 });
-const parseExpressionWidgetV1 = parseWidgetWithVersion(object({
+function removeInvalidAnswerForms(possiblyInvalid) {
+  const valid = [];
+  for (const answerForm of possiblyInvalid) {
+    const {
+      value
+    } = answerForm;
+    if (value != null) {
+      // Copying the object seems to be needed to make TypeScript happy
+      valid.push(_extends({}, answerForm, {
+        value
+      }));
+    }
+  }
+  return valid;
+}
+const version1 = object({
   major: constant(1),
   minor: number
-}), constant("expression"), object({
-  answerForms: array(parseAnswerForm),
+});
+const parseExpressionWidgetV1 = parseWidgetWithVersion(version1, constant("expression"), object({
+  answerForms: pipeParsers(array(parsePossiblyInvalidAnswerForm)).then(convert(removeInvalidAnswerForms)).parser,
   functions: array(string),
   times: boolean,
   visibleLabel: optional(string),
@@ -47967,10 +48058,11 @@ const parseExpressionWidgetV1 = parseWidgetWithVersion(object({
   buttonSets: array(enumeration("basic", "basic+div", "trig", "prealgebra", "logarithms", "basic relations", "advanced relations")),
   buttonsVisible: optional(enumeration("always", "never", "focused"))
 }));
-const parseExpressionWidgetV0 = parseWidgetWithVersion(optional(object({
+const version0 = optional(object({
   major: constant(0),
   minor: number
-})), constant("expression"), object({
+}));
+const parseExpressionWidgetV0 = parseWidgetWithVersion(version0, constant("expression"), object({
   functions: array(string),
   times: boolean,
   visibleLabel: optional(string),
@@ -47981,11 +48073,11 @@ const parseExpressionWidgetV0 = parseWidgetWithVersion(optional(object({
   buttonSets: array(enumeration("basic", "basic+div", "trig", "prealgebra", "logarithms", "basic relations", "advanced relations")),
   buttonsVisible: optional(enumeration("always", "never", "focused"))
 }));
-function migrateV0ToV1(widget, ctx) {
+function migrateV0ToV1(widget) {
   const {
     options
   } = widget;
-  return ctx.success(_extends({}, widget, {
+  return _extends({}, widget, {
     version: {
       major: 1,
       minor: 0
@@ -48004,9 +48096,9 @@ function migrateV0ToV1(widget, ctx) {
         value: options.value
       }]
     }
-  }));
+  });
 }
-const parseExpressionWidget = union(parseExpressionWidgetV1).or(pipeParsers(parseExpressionWidgetV0).then(migrateV0ToV1).parser).parser;
+const parseExpressionWidget = versionedWidgetOptions(parseExpressionWidgetV1).withMigrationFrom(parseExpressionWidgetV0, migrateV0ToV1).parser;
 
 const parsePerseusRenderer = defaulted(object({
   // TODO(benchristel): content is also defaulted to empty string in
@@ -48052,31 +48144,70 @@ const parseGradedGroupSetWidget = parseWidget(constant("graded-group-set"), obje
   gradedGroups: array(parseGradedGroupWidgetOptions)
 }));
 
+// discriminatedUnion() should be preferred over union() when parsing a
+// discriminated union type, because discriminatedUnion() produces more
+// understandable failure messages. It takes the discriminant as the source of
+// truth for which variant is to be parsed, and expects the other data to match
+// that variant.
+function discriminatedUnion(narrow, parseVariant) {
+  return new DiscriminatedUnionBuilder(pipeParsers(narrow).then(parseVariant).parser);
+}
+class DiscriminatedUnionBuilder {
+  constructor(parser) {
+    this.parser = parser;
+  }
+  or(narrow, parseVariant) {
+    return new DiscriminatedUnionBuilder(either(narrow, parseVariant, this.parser));
+  }
+}
+function either(narrowToA, parseA, parseB) {
+  return (rawValue, ctx) => {
+    if (isSuccess(narrowToA(rawValue, ctx))) {
+      return parseA(rawValue, ctx);
+    }
+    return parseB(rawValue, ctx);
+  };
+}
+
 const pairOfNumbers$3 = pair(number, number);
 const pairOfPoints = pair(pairOfNumbers$3, pairOfNumbers$3);
 const parseGrapherWidget = parseWidget(constant("grapher"), object({
   availableTypes: array(enumeration("absolute_value", "exponential", "linear", "logarithm", "quadratic", "sinusoid", "tangent")),
-  correct: union(object({
+  correct: discriminatedUnion(object({
+    type: constant("absolute_value")
+  }), object({
     type: constant("absolute_value"),
     coords: pairOfPoints
   })).or(object({
+    type: constant("exponential")
+  }), object({
     type: constant("exponential"),
     asymptote: pairOfPoints,
     coords: pairOfPoints
   })).or(object({
+    type: constant("linear")
+  }), object({
     type: constant("linear"),
     coords: pairOfPoints
   })).or(object({
+    type: constant("logarithm")
+  }), object({
     type: constant("logarithm"),
     asymptote: pairOfPoints,
     coords: pairOfPoints
   })).or(object({
+    type: constant("quadratic")
+  }), object({
     type: constant("quadratic"),
     coords: pairOfPoints
   })).or(object({
+    type: constant("sinusoid")
+  }), object({
     type: constant("sinusoid"),
     coords: pairOfPoints
   })).or(object({
+    type: constant("tangent")
+  }), object({
     type: constant("tangent"),
     coords: pairOfPoints
   })).parser,
@@ -48136,15 +48267,22 @@ const stringToNumber = (rawValue, ctx) => {
   return ctx.success(parsedNumber);
 };
 
-const numericToNumber = pipeParsers(union(number).or(string).parser).then(stringToNumber).parser;
+function emptyToZero(x) {
+  return x === "" ? 0 : x;
+}
+const imageDimensionToNumber = pipeParsers(union(number).or(string).parser)
+// In this specific case, empty string is equivalent to zero. An empty
+// string parses to either NaN (using parseInt) or 0 (using unary +) and
+// CSS will treat NaN as invalid and default to 0 instead.
+.then(convert(emptyToZero)).then(stringToNumber).parser;
 const parsePerseusImageBackground = object({
   url: optional(nullable(string)),
-  width: optional(numericToNumber),
-  height: optional(numericToNumber),
-  top: optional(numericToNumber),
-  left: optional(numericToNumber),
-  bottom: optional(numericToNumber),
-  scale: optional(numericToNumber)
+  width: optional(imageDimensionToNumber),
+  height: optional(imageDimensionToNumber),
+  top: optional(imageDimensionToNumber),
+  left: optional(imageDimensionToNumber),
+  bottom: optional(imageDimensionToNumber),
+  scale: optional(imageDimensionToNumber)
 });
 
 const pairOfNumbers$2 = pair(number, number);
@@ -48185,8 +48323,10 @@ const parseInputNumberWidget = parseWidget(constant("input-number"), object({
 }));
 
 const pairOfNumbers$1 = pair(number, number);
+const stringOrEmpty = defaulted(string, () => "");
+const parseFunctionType = constant("function");
 const parseFunctionElement = object({
-  type: constant("function"),
+  type: parseFunctionType,
   key: string,
   options: object({
     value: string,
@@ -48198,8 +48338,9 @@ const parseFunctionElement = object({
     strokeWidth: number
   })
 });
+const parseLabelType = constant("label");
 const parseLabelElement = object({
-  type: constant("label"),
+  type: parseLabelType,
   key: string,
   options: object({
     label: string,
@@ -48208,8 +48349,9 @@ const parseLabelElement = object({
     coordY: string
   })
 });
+const parseLineType = constant("line");
 const parseLineElement = object({
-  type: constant("line"),
+  type: parseLineType,
   key: string,
   options: object({
     color: string,
@@ -48222,8 +48364,9 @@ const parseLineElement = object({
     arrows: string
   })
 });
+const parseMovableLineType = constant("movable-line");
 const parseMovableLineElement = object({
-  type: constant("movable-line"),
+  type: parseMovableLineType,
   key: string,
   options: object({
     startX: string,
@@ -48241,8 +48384,9 @@ const parseMovableLineElement = object({
     constraintYMax: string
   })
 });
+const parseMovablePointType = constant("movable-point");
 const parseMovablePointElement = object({
-  type: constant("movable-point"),
+  type: parseMovablePointType,
   key: string,
   options: object({
     startX: string,
@@ -48251,14 +48395,15 @@ const parseMovablePointElement = object({
     constraint: string,
     snap: number,
     constraintFn: string,
-    constraintXMin: string,
-    constraintXMax: string,
-    constraintYMin: string,
-    constraintYMax: string
+    constraintXMin: stringOrEmpty,
+    constraintXMax: stringOrEmpty,
+    constraintYMin: stringOrEmpty,
+    constraintYMax: stringOrEmpty
   })
 });
+const parseParametricType = constant("parametric");
 const parseParametricElement = object({
-  type: constant("parametric"),
+  type: parseParametricType,
   key: string,
   options: object({
     x: string,
@@ -48270,8 +48415,9 @@ const parseParametricElement = object({
     strokeWidth: number
   })
 });
+const parsePointType = constant("point");
 const parsePointElement = object({
-  type: constant("point"),
+  type: parsePointType,
   key: string,
   options: object({
     color: string,
@@ -48279,8 +48425,9 @@ const parsePointElement = object({
     coordY: string
   })
 });
+const parseRectangleType = constant("rectangle");
 const parseRectangleElement = object({
-  type: constant("rectangle"),
+  type: parseRectangleType,
   key: string,
   options: object({
     color: string,
@@ -48291,7 +48438,7 @@ const parseRectangleElement = object({
   })
 });
 const parseInteractionWidget = parseWidget(constant("interaction"), object({
-  static: boolean,
+  static: defaulted(boolean, () => false),
   graph: object({
     editableSettings: optional(array(enumeration("canvas", "graph"))),
     box: pairOfNumbers$1,
@@ -48308,7 +48455,23 @@ const parseInteractionWidget = parseWidget(constant("interaction"), object({
     rulerTicks: optional(number),
     tickStep: pairOfNumbers$1
   }),
-  elements: array(union(parseFunctionElement).or(parseLabelElement).or(parseLineElement).or(parseMovableLineElement).or(parseMovablePointElement).or(parseParametricElement).or(parsePointElement).or(parseRectangleElement).parser)
+  elements: array(discriminatedUnion(object({
+    type: parseFunctionType
+  }), parseFunctionElement).or(object({
+    type: parseLabelType
+  }), parseLabelElement).or(object({
+    type: parseLineType
+  }), parseLineElement).or(object({
+    type: parseMovableLineType
+  }), parseMovableLineElement).or(object({
+    type: parseMovablePointType
+  }), parseMovablePointElement).or(object({
+    type: parseParametricType
+  }), parseParametricElement).or(object({
+    type: parsePointType
+  }), parsePointElement).or(object({
+    type: parseRectangleType
+  }), parseRectangleElement).parser)
 }));
 
 // Used to represent 2-D points and ranges
@@ -48531,10 +48694,11 @@ const parseMatcherWidget = parseWidget(constant("matcher"), object({
   padding: boolean
 }));
 
+const numeric = pipeParsers(union(number).or(string).parser).then(stringToNumber).parser;
 const parseMatrixWidget = parseWidget(defaulted(constant("matrix"), () => "matrix"), object({
   prefix: optional(string),
   suffix: optional(string),
-  answers: array(array(number)),
+  answers: array(array(numeric)),
   cursorPosition: optional(array(number)),
   matrixBoardSize: array(number),
   static: optional(boolean)
@@ -48582,12 +48746,18 @@ const parseMathFormat = enumeration("integer", "mixed", "improper", "proper", "d
 const parseNumericInputWidget = parseWidget(constant("numeric-input"), object({
   answers: array(object({
     message: string,
-    value: optional(number),
+    // TODO(benchristel): value should never be null or undefined,
+    // but we have some content where it is anyway. If we backfill
+    // the data, simplify this.
+    value: optional(nullable(number)),
     status: string,
     answerForms: optional(array(parseMathFormat)),
     strict: boolean,
     maxError: optional(nullable(number)),
-    simplify: optional(nullable(string))
+    // TODO(benchristel): simplify should never be `true`, but we
+    // have some content where it is anyway. If we ever backfill
+    // the data, we should simplify `simplify`.
+    simplify: optional(nullable(union(string).or(pipeParsers(constant(true)).then(convert(String)).parser).parser))
   })),
   labelText: optional(string),
   size: string,
@@ -48623,7 +48793,7 @@ const parseOrdererWidget = parseWidget(constant("orderer"), object({
 const parsePassageRefWidget = parseWidget(constant("passage-ref"), object({
   passageNumber: number,
   referenceNumber: number,
-  summaryText: string
+  summaryText: optional(string)
 }));
 
 const parsePassageWidget = parseWidget(constant("passage"), object({
@@ -48811,6 +48981,8 @@ const parseWidgetsMapEntry = ([key, widget], widgetMap, ctx) => {
       // sequence is a deprecated widget type, and the corresponding
       // widget component no longer exists.
       return parseAndAssign(`sequence ${id}`, parseDeprecatedWidget);
+    case "lights-puzzle":
+      return parseAndAssign(`lights-puzzle ${id}`, parseDeprecatedWidget);
     default:
       if (getWidget(type)) {
         // @ts-expect-error - 'type' is not a valid widget type