@khanacademy/perseus 19.1.1 → 19.1.3

package/dist/extra-widgets.d.ts

@@ -3,6 +3,7 @@ declare const _default: readonly Readonly<{
     name: string;
     displayName: string;
     getWidget?: (() => import("react").ComponentType<any>) | undefined;
+    widget: import("react").ComponentType<any>;
     accessible?: boolean | ((props: any) => boolean) | undefined;
     hidden?: boolean | undefined;
     version?: import("./types").Version | undefined;
@@ -17,6 +18,5 @@ declare const _default: readonly Readonly<{
     propUpgrades?: {
         [key: string]: (arg1: any) => any;
     } | undefined;
-    widget: import("react").ComponentType<any>;
 }>[];
 export default _default;

package/dist/index.js

@@ -9647,15 +9647,6 @@ const GraphUtils = {
   getDistance: function (point1, point2) {
     return kmath.point.distanceToPoint(point1, point2);
   },
-  /**
-   * Round the given coordinates to a given snap value
-   * (e.g., nearest 0.2 increment)
-   */
-  snapCoord: function (coord, snap) {
-    return coord.map(function (val, i) {
-      return KhanMath.roundToNearest(snap[i], val);
-    });
-  },
   // Find the angle in degrees between two or three points
   findAngle: function (point1, point2, vertex) {
     if (vertex === undefined) {
@@ -16175,6 +16166,9 @@ const {
 } = InteractiveUtil;
 class Graphie extends React__namespace.Component {
   graphieDivRef = /*#__PURE__*/React__namespace.createRef();
+  _graphie = new Graphie$1(document.createElement("div"));
+  _movables = {};
+  movables = {};
   static defaultProps = {
     range: [[-10, 10], [-10, 10]],
     options: {},
@@ -16217,7 +16211,6 @@ class Graphie extends React__namespace.Component {
    * Use it for good and not evil.
    */
   getGraphie = () => {
-    // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
     return this._graphie;
   };
 
@@ -16239,10 +16232,12 @@ class Graphie extends React__namespace.Component {
     };
     return [ensureMinSize(this.props.box[0]), ensureMinSize(this.props.box[1])];
   };
+
+  // @ts-expect-error -  TS2322: Type '() => number[]' is not assignable to type '() => Coord'.
   _scale = () => {
     const box = this._box();
     const range = this._range();
-    return ___default["default"].map(box, (pixelDim, i) => {
+    return box.map((pixelDim, i) => {
       const unitDim = range[i][1] - range[i][0];
       return pixelDim / unitDim;
     });
@@ -16250,9 +16245,10 @@ class Graphie extends React__namespace.Component {
   _setupGraphie = () => {
     this._removeMovables();
     const graphieDiv = ReactDOM__default["default"].findDOMNode(this.graphieDivRef.current);
-    // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
-    $__default["default"](graphieDiv).empty();
-    // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
+    if (graphieDiv == null || graphieDiv instanceof Text) {
+      throw new Error("No graphie container div found");
+    }
+    graphieDiv.innerHTML = "";
     const graphie = this._graphie = createGraphie(graphieDiv);
 
     // This has to be called before addMouseLayer. You can re-init
@@ -16264,6 +16260,7 @@ class Graphie extends React__namespace.Component {
     });
     // Only add the mouselayer if we actually want one.
     if (this.props.addMouseLayer) {
+      // @ts-expect-error - TS2339: Property 'addMouseLayer' does not exist on type 'Graphie'.
       graphie.addMouseLayer({
         onClick: this.props.onClick,
         onMouseDown: this.props.onMouseDown,
@@ -16272,12 +16269,13 @@ class Graphie extends React__namespace.Component {
         setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
       });
     }
+
+    // @ts-expect-error - TS2339: Property 'snap' does not exist on type 'Graphie'.
     graphie.snap = this.props.options.snapStep || [1, 1];
     if (this.props.responsive) {
       // Overwrite fixed styles set in init()
       // TODO(alex): Either make this component always responsive by
       // itself, or always wrap it in other components so that it is.
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2554 - Expected 2 arguments, but got 1.
       $__default["default"](graphieDiv).css({
         width: "100%",
         height: "100%"
@@ -16291,9 +16289,7 @@ class Graphie extends React__namespace.Component {
   };
   _removeMovables = () => {
     // _.invoke works even when this._movables is undefined
-    // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
     ___default["default"].invoke(this._movables, "remove");
-    // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
     this._movables = {};
   };
 
@@ -16390,7 +16386,6 @@ class Graphie extends React__namespace.Component {
         newMovables[key].toFront();
       }
       if (ref) {
-        // @ts-expect-error - TS2339 - Property 'movables' does not exist on type 'Graphie'.
         this.movables[ref] = newMovables[key];
       }
       return newMovables[key];
@@ -16399,15 +16394,10 @@ class Graphie extends React__namespace.Component {
 
   // Sort of like react diffing, but for movables
   _updateMovables = () => {
-    // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
     const graphie = this._graphie;
-
-    // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
     const oldMovables = this._movables;
     const newMovables = {};
-    // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
     this._movables = newMovables;
-    // @ts-expect-error - TS2339 - Property 'movables' does not exist on type 'Graphie'.
     this.movables = {};
 
     // @ts-expect-error - TS2345 - Argument of type 'ReactNode' is not assignable to parameter of type 'readonly any[]'.
@@ -18538,10 +18528,13 @@ const registerWidgets = widgets => {
  */
 const replaceWidget = (name, replacementName) => {
   const substituteWidget = widgets[replacementName];
-  if (!substituteWidget && Log) {
+
+  // If the replacement widget isn't found, we need to throw. Otherwise after
+  // removing the deprecated widget, we'll have data asking for a widget type
+  // that doesn't exist at all.
+  if (!substituteWidget) {
     const errorMsg = `Failed to replace ${name} with ${replacementName}`;
-    Log.error(errorMsg, Errors.Internal);
-    return;
+    throw new PerseusError(errorMsg, Errors.Internal);
   }
   registerWidget(name, substituteWidget);
 };
@@ -18629,7 +18622,10 @@ const getAllWidgetTypes = () => {
 };
 const upgradeWidgetInfoToLatestVersion = oldWidgetInfo => {
   const type = oldWidgetInfo.type;
-  // TODO(LP-10707): Remove unnecessary type checking (`type` is a string)
+  // NOTE(jeremy): This looks like it could be replaced by fixing types so
+  // that `type` is non-optional. But we're seeing this in Sentry today so I
+  // suspect we have legacy data (potentially unpublished) and we should
+  // figure that out before depending solely on types.
   if (!___default["default"].isString(type)) {
     throw new PerseusError("widget type must be a string, but was: " + type, Errors.Internal);
   }
@@ -27923,21 +27919,23 @@ class Graph extends React__namespace.Component {
     // `\text{Dollars}` to the Graph widget.
     const labels = this.props.labels.map(label => Util.unescapeMathMode(label));
     const range = this.props.range;
+    // @ts-expect-error - TS2345: Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
     const graphie = this._graphie = GraphUtils.createGraphie(graphieDiv);
     const gridConfig = this._getGridConfig();
+    // @ts-expect-error - TS2339: Property 'snap' does not exist on type 'Graphie'.
     graphie.snap = this.props.snapStep;
     if (this.props.markings === "graph") {
       graphie.graphInit({
         range: range,
-        scale: ___default["default"].pluck(gridConfig, "scale"),
+        scale: kmath.vector.map(gridConfig, g => g.scale),
         axisArrows: "<->",
         labelFormat: function (s) {
           return "\\small{" + s + "}";
         },
         gridStep: this.props.gridStep,
-        tickStep: ___default["default"].pluck(gridConfig, "tickStep"),
+        tickStep: kmath.vector.map(gridConfig, g => g.tickStep),
         labelStep: 1,
-        unityLabels: ___default["default"].pluck(gridConfig, "unityLabel"),
+        unityLabels: kmath.vector.map(gridConfig, g => g.unityLabel),
         isMobile: this.props.isMobile
       });
       graphie.label([0, range[1][1]], labels[1], this.props.isMobile ? "below right" : "above");
@@ -27945,7 +27943,7 @@ class Graph extends React__namespace.Component {
     } else if (this.props.markings === "grid") {
       graphie.graphInit({
         range: range,
-        scale: ___default["default"].pluck(gridConfig, "scale"),
+        scale: kmath.vector.map(gridConfig, g => g.scale),
         gridStep: this.props.gridStep,
         axes: false,
         ticks: false,
@@ -27955,7 +27953,7 @@ class Graph extends React__namespace.Component {
     } else if (this.props.markings === "none") {
       graphie.init({
         range: range,
-        scale: ___default["default"].pluck(gridConfig, "scale"),
+        scale: kmath.vector.map(gridConfig, g => g.scale),
         isMobile: this.props.isMobile
       });
     }
@@ -28002,6 +28000,7 @@ class Graph extends React__namespace.Component {
     } : null;
     /* eslint-enable indent */
 
+    // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
     graphie.addMouseLayer({
       onClick: this.props.onClick,
       onMouseDown: onMouseDown,
@@ -28027,10 +28026,7 @@ class Graph extends React__namespace.Component {
     }
   };
   _getGridConfig = () => {
-    const self = this;
-    return ___default["default"].map(self.props.step, function (step, i) {
-      return Util.gridDimensionConfig(step, self.props.range[i], self.props.box[i], self.props.gridStep[i]);
-    });
+    return kmath.vector.map(this.props.step, (step, i) => Util.gridDimensionConfig(step, this.props.range[i], this.props.box[i], this.props.gridStep[i]));
   };
   _updateProtractor = () => {
     if (this.protractor) {
@@ -31123,7 +31119,8 @@ class Marker extends React__namespace.Component {
       answerSide,
       answerStyles,
       hovered,
-      focused
+      focused,
+      label
     } = this.props;
 
     // We cannot make dropdown openers untabbable, so we isolate tabbing
@@ -31132,6 +31129,9 @@ class Marker extends React__namespace.Component {
     const active = hovered || focused;
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: [styles$g.marker, active && !markerDisabled && styles$g.markerActive]
+      // already translated in: /widgets/graded-group.tsx
+      ,
+      "aria-label": markerDisabled ? i18n__namespace._("Correct!") : label
     }, this.renderIcon()), !!selected && showAnswer && /*#__PURE__*/React__namespace.createElement(AnswerPill, {
       selectedAnswers: selected,
       showCorrectness: showCorrectness,
@@ -31679,15 +31679,12 @@ class LabelImage extends React__namespace.Component {
         disabled: disabled,
         opener: _ref => {
           let {
-            opened,
-            text
+            opened
           } = _ref;
           return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
             role: "button",
-            key: `marker-${marker.x}.${marker.y}`,
-            "aria-label":
-            // already translated in: /widgets/graded-group.tsx
-            showCorrectness === "correct" ? i18n__namespace._("Correct!") : marker.label
+            "aria-expanded": opened,
+            key: `marker-${marker.x}.${marker.y}`
           }, _ref2 => {
             let {
               hovered,
@@ -33802,6 +33799,7 @@ const Measurer = createReactClass__default["default"]({
     const graphieDiv = ReactDOM__default["default"].findDOMNode(this.refs.graphieDiv);
     // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
     $__default["default"](graphieDiv).empty();
+    // @ts-expect-error - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
     const graphie = this.graphie = GraphUtils.createGraphie(graphieDiv);
     const scale = [40, 40];
     const range = [[0, this.props.box[0] / scale[0]], [0, this.props.box[1] / scale[1]]];
@@ -33809,6 +33807,7 @@ const Measurer = createReactClass__default["default"]({
       range: range,
       scale: scale
     });
+    // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
     graphie.addMouseLayer({
       allowScratchpad: true,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
@@ -33817,12 +33816,14 @@ const Measurer = createReactClass__default["default"]({
       this.protractor.remove();
     }
     if (this.props.showProtractor) {
+      // @ts-expect-error - Property 'protractor' does not exist on type 'Graphie'.
       this.protractor = graphie.protractor([this.props.protractorX, this.props.protractorY]);
     }
     if (this.ruler) {
       this.ruler.remove();
     }
     if (this.props.showRuler) {
+      // @ts-expect-error - Property 'ruler' does not exist on type 'Graphie'.
       this.ruler = graphie.ruler({
         center: [(range[0][0] + range[0][1]) / 2, (range[1][0] + range[1][1]) / 2],
         label: this.props.rulerLabel,
@@ -38241,6 +38242,7 @@ class Plotter extends React__namespace.Component {
     const graphieDiv = ReactDOM__default["default"].findDOMNode(self.refs.graphieDiv);
     // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
     $__default["default"](graphieDiv).empty();
+    // @ts-expect-error - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
     const graphie = GraphUtils.createGraphie(graphieDiv);
 
     // TODO(jakesandlund): It's not the react way to hang
@@ -38348,6 +38350,7 @@ class Plotter extends React__namespace.Component {
       scale: c.scale,
       isMobile: this.props.apiOptions.isMobile
     });
+    // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
     graphie.addMouseLayer({
       allowScratchpad: true,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
@@ -41586,11 +41589,7 @@ var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Defin
 const init = function (options) {
   registerWidgets(basicWidgets);
   registerWidgets(extraWidgets);
-
-  // This section replaces widgets
-  // When it's time to replace the transformer widget
-  // uncomment this line
-  // Widgets.replaceWidget("transformer", "deprecated-standin");
+  replaceWidget("transformer", "deprecated-standin");
 
   // Pass skipMathJax: true if MathJax is already loaded and configured.
   const skipMathJax = options.skipMathJax;
@@ -41616,7 +41615,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "19.1.1";
+const libVersion = "19.1.3";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {