@khanacademy/perseus 19.1.1 → 19.1.3

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/perseus
 
+## 19.1.3
+
+### Patch Changes
+
+-   [#957](https://github.com/Khan/perseus/pull/957) [`19114138`](https://github.com/Khan/perseus/commit/1911413844b59ef87d5b2329f6120e4568be9ae3) Thanks [@nedredmond](https://github.com/nedredmond)! - Updated tests
+
+*   [#952](https://github.com/Khan/perseus/pull/952) [`6bebefcb`](https://github.com/Khan/perseus/commit/6bebefcb4ce54c3ed0d57707c34d4399f763368f) Thanks [@nedredmond](https://github.com/nedredmond)! - Screenreader reads Label Image Widget answer pills
+
+-   [#961](https://github.com/Khan/perseus/pull/961) [`03e1461f`](https://github.com/Khan/perseus/commit/03e1461fe16d5dd31fd1f6d11669126dce96f088) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Ensure the deprecated-standin widget replaces the transformer widget which is now removed
+
+-   Updated dependencies [[`19114138`](https://github.com/Khan/perseus/commit/1911413844b59ef87d5b2329f6120e4568be9ae3)]:
+    -   @khanacademy/math-input@17.0.2
+
+## 19.1.2
+
+### Patch Changes
+
+-   [#954](https://github.com/Khan/perseus/pull/954) [`43820ff9`](https://github.com/Khan/perseus/commit/43820ff9ce391682b951279a4c6fb9e3db966eb9) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Fix @ts-expect-errors related to Graphie
+
+*   [#956](https://github.com/Khan/perseus/pull/956) [`14e107f5`](https://github.com/Khan/perseus/commit/14e107f57c10fb3a442e55506810eb309caced24) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Fix bug when replacing transformer widget with deprecated-standin
+
+*   Updated dependencies [[`43820ff9`](https://github.com/Khan/perseus/commit/43820ff9ce391682b951279a4c6fb9e3db966eb9)]:
+    -   @khanacademy/kmath@0.1.10
+
 ## 19.1.1
 
 ### Patch Changes

package/dist/all-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/basic-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/components/graph.d.ts

@@ -1,13 +1,14 @@
 import * as React from "react";
 import type { Coord } from "../interactive2/types";
 import type { PerseusImageBackground } from "../perseus-types";
+import type { GridDimensions } from "../util";
 type Props = {
-    box: Readonly<[number, number]>;
+    box: [number, number];
     labels: ReadonlyArray<string>;
-    range: Readonly<[Coord, Coord]>;
-    step: Readonly<[number, number]>;
-    gridStep: Readonly<[number, number]>;
-    snapStep: Readonly<[number, number]>;
+    range: [Coord, Coord];
+    step: [number, number];
+    gridStep: [number, number];
+    snapStep: [number, number];
     markings: string;
     backgroundImage: PerseusImageBackground;
     showProtractor: boolean;
@@ -51,7 +52,7 @@ declare class Graph extends React.Component<Props> {
     graphie: () => any;
     pointsFromNormalized: (arg1: any, arg2: any) => any;
     _setupGraphie: (arg1: any) => void;
-    _getGridConfig: () => any;
+    _getGridConfig: () => [GridDimensions, GridDimensions];
     _updateProtractor: () => void;
     _updateRuler: () => void;
     toJSON: () => any;

package/dist/components/graphie.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Graphie as GraphieDrawingContext } from "../util/graphie";
 import type { Coord } from "../interactive2/types";
 import type { Range, Size } from "../perseus-types";
 type Props = {
@@ -29,8 +30,14 @@ type DefaultProps = {
     responsive: Props["responsive"];
     addMouseLayer: Props["addMouseLayer"];
 };
+interface Movable {
+    remove(): void;
+}
 declare class Graphie extends React.Component<Props> {
     graphieDivRef: React.RefObject<HTMLDivElement>;
+    _graphie: GraphieDrawingContext;
+    _movables: Record<string, Movable>;
+    movables: Record<string, Movable>;
     static defaultProps: DefaultProps;
     componentDidMount(): void;
     shouldComponentUpdate(nextProps: Props): boolean;
@@ -46,7 +53,7 @@ declare class Graphie extends React.Component<Props> {
     getGraphie: () => any;
     _range: () => [Coord, Coord];
     _box: () => Size;
-    _scale: () => ReadonlyArray<number>;
+    _scale: () => Coord;
     _setupGraphie: () => void;
     _removeMovables: () => void;
     _renderMovables: (children: ReadonlyArray<any>, arg2: any) => React.ReactElement;

package/dist/es/index.js

@@ -2,7 +2,7 @@ import * as KAS from '@khanacademy/kas';
 import { keyTranslator, CursorContext, createMathField, convertDotToTimesByLocale, mathQuillInstance, getCursorContext, DesktopKeypad, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
-import { View, RenderStateRoot, useUniqueIdWithMock, Text } from '@khanacademy/wonder-blocks-core';
+import { View, RenderStateRoot, useUniqueIdWithMock, Text as Text$1 } from '@khanacademy/wonder-blocks-core';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
@@ -9644,15 +9644,6 @@ const GraphUtils = {
   getDistance: function (point1, point2) {
     return 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) {
@@ -16167,6 +16158,9 @@ class Graphie extends React.Component {
   constructor(...args) {
     super(...args);
     this.graphieDivRef = /*#__PURE__*/React.createRef();
+    this._graphie = new Graphie$1(document.createElement("div"));
+    this._movables = {};
+    this.movables = {};
     /**
      * Allow parents of the <Graphie> component to grab a reference to the
      * underlying graphie object using
@@ -16176,7 +16170,6 @@ class Graphie extends React.Component {
      * Use it for good and not evil.
      */
     this.getGraphie = () => {
-      // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
       return this._graphie;
     };
     // bounds-checked range
@@ -16197,10 +16190,11 @@ class Graphie extends React.Component {
       };
       return [ensureMinSize(this.props.box[0]), ensureMinSize(this.props.box[1])];
     };
+    // @ts-expect-error -  TS2322: Type '() => number[]' is not assignable to type '() => Coord'.
     this._scale = () => {
       const box = this._box();
       const range = this._range();
-      return _.map(box, (pixelDim, i) => {
+      return box.map((pixelDim, i) => {
         const unitDim = range[i][1] - range[i][0];
         return pixelDim / unitDim;
       });
@@ -16208,9 +16202,10 @@ class Graphie extends React.Component {
     this._setupGraphie = () => {
       this._removeMovables();
       const graphieDiv = ReactDOM__default.findDOMNode(this.graphieDivRef.current);
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
-      $(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
@@ -16222,6 +16217,7 @@ class Graphie extends React.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,
@@ -16230,12 +16226,13 @@ class Graphie extends React.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.
         $(graphieDiv).css({
           width: "100%",
           height: "100%"
@@ -16249,9 +16246,7 @@ class Graphie extends React.Component {
     };
     this._removeMovables = () => {
       // _.invoke works even when this._movables is undefined
-      // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
       _.invoke(this._movables, "remove");
-      // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
       this._movables = {};
     };
     // @ts-expect-error - TS2322 - Type '(children: readonly any[], options: any) => ReactElement<any, string | JSXElementConstructor<any>> | readonly ReactElement<any, string | JSXElementConstructor<any>>[]' is not assignable to type '(children: readonly any[], arg2: any) => ReactElement<any, string | JSXElementConstructor<any>>'.
@@ -16347,7 +16342,6 @@ class Graphie extends React.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];
@@ -16355,15 +16349,10 @@ class Graphie extends React.Component {
     };
     // Sort of like react diffing, but for movables
     this._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[]'.
@@ -18502,10 +18491,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);
 };
@@ -18593,7 +18585,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 (!_.isString(type)) {
     throw new PerseusError("widget type must be a string, but was: " + type, Errors.Internal);
   }
@@ -27761,21 +27756,23 @@ class Graph extends React.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: _.pluck(gridConfig, "scale"),
+          scale: vector$1.map(gridConfig, g => g.scale),
           axisArrows: "<->",
           labelFormat: function (s) {
             return "\\small{" + s + "}";
           },
           gridStep: this.props.gridStep,
-          tickStep: _.pluck(gridConfig, "tickStep"),
+          tickStep: vector$1.map(gridConfig, g => g.tickStep),
           labelStep: 1,
-          unityLabels: _.pluck(gridConfig, "unityLabel"),
+          unityLabels: vector$1.map(gridConfig, g => g.unityLabel),
           isMobile: this.props.isMobile
         });
         graphie.label([0, range[1][1]], labels[1], this.props.isMobile ? "below right" : "above");
@@ -27783,7 +27780,7 @@ class Graph extends React.Component {
       } else if (this.props.markings === "grid") {
         graphie.graphInit({
           range: range,
-          scale: _.pluck(gridConfig, "scale"),
+          scale: vector$1.map(gridConfig, g => g.scale),
           gridStep: this.props.gridStep,
           axes: false,
           ticks: false,
@@ -27793,7 +27790,7 @@ class Graph extends React.Component {
       } else if (this.props.markings === "none") {
         graphie.init({
           range: range,
-          scale: _.pluck(gridConfig, "scale"),
+          scale: vector$1.map(gridConfig, g => g.scale),
           isMobile: this.props.isMobile
         });
       }
@@ -27840,6 +27837,7 @@ class Graph extends React.Component {
       } : null;
       /* eslint-enable indent */
 
+      // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
       graphie.addMouseLayer({
         onClick: this.props.onClick,
         onMouseDown: onMouseDown,
@@ -27865,10 +27863,7 @@ class Graph extends React.Component {
       }
     };
     this._getGridConfig = () => {
-      const self = this;
-      return _.map(self.props.step, function (step, i) {
-        return Util.gridDimensionConfig(step, self.props.range[i], self.props.box[i], self.props.gridStep[i]);
-      });
+      return vector$1.map(this.props.step, (step, i) => Util.gridDimensionConfig(step, this.props.range[i], this.props.box[i], this.props.gridStep[i]));
     };
     this._updateProtractor = () => {
       if (this.protractor) {
@@ -31020,7 +31015,8 @@ class Marker extends React.Component {
       answerSide,
       answerStyles,
       hovered,
-      focused
+      focused,
+      label
     } = this.props;
 
     // We cannot make dropdown openers untabbable, so we isolate tabbing
@@ -31029,6 +31025,9 @@ class Marker extends React.Component {
     const active = hovered || focused;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
       style: [styles$g.marker, active && !markerDisabled && styles$g.markerActive]
+      // already translated in: /widgets/graded-group.tsx
+      ,
+      "aria-label": markerDisabled ? i18n._("Correct!") : label
     }, this.renderIcon()), !!selected && showAnswer && /*#__PURE__*/React.createElement(AnswerPill, {
       selectedAnswers: selected,
       showCorrectness: showCorrectness,
@@ -31577,14 +31576,11 @@ class LabelImage extends React.Component {
         ,
         disabled: disabled,
         opener: ({
-          opened,
-          text
+          opened
         }) => /*#__PURE__*/React.createElement(Clickable, {
           role: "button",
-          key: `marker-${marker.x}.${marker.y}`,
-          "aria-label":
-          // already translated in: /widgets/graded-group.tsx
-          showCorrectness === "correct" ? i18n._("Correct!") : marker.label
+          "aria-expanded": opened,
+          key: `marker-${marker.x}.${marker.y}`
         }, ({
           hovered,
           focused,
@@ -33687,6 +33683,7 @@ const Measurer = createReactClass({
     const graphieDiv = ReactDOM__default.findDOMNode(this.refs.graphieDiv);
     // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
     $(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]]];
@@ -33694,6 +33691,7 @@ const Measurer = createReactClass({
       range: range,
       scale: scale
     });
+    // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
     graphie.addMouseLayer({
       allowScratchpad: true,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
@@ -33702,12 +33700,14 @@ const Measurer = createReactClass({
       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,
@@ -38092,6 +38092,7 @@ class Plotter extends React.Component {
       const graphieDiv = ReactDOM__default.findDOMNode(self.refs.graphieDiv);
       // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
       $(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
@@ -38199,6 +38200,7 @@ class Plotter extends React.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
@@ -41328,7 +41330,7 @@ const VideoTranscriptLink = props => {
         const video = (_result$data = result.data) == null ? void 0 : _result$data.video;
         return /*#__PURE__*/React.createElement(View, {
           style: styles$6.transcriptLink
-        }, /*#__PURE__*/React.createElement(Text, null, video == null ? void 0 : video.title), /*#__PURE__*/React.createElement(Strut, {
+        }, /*#__PURE__*/React.createElement(Text$1, null, video == null ? void 0 : video.title), /*#__PURE__*/React.createElement(Strut, {
           size: 10
         }), /*#__PURE__*/React.createElement(Link, {
           href: "/transcript/" + ((video == null ? void 0 : video.contentId) || "videoNotFound"),
@@ -41471,11 +41473,7 @@ var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Defin
 const init = function init(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;
@@ -41501,7 +41499,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 = "19.1.1";
+const libVersion = "19.1.3";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {