@khanacademy/perseus 19.1.1 → 19.1.3

package/dist/widgets/simulator.d.ts

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

package/dist/widgets/sorter.d.ts

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

package/dist/widgets/table.d.ts

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

package/dist/widgets/unit.d.ts

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

package/dist/widgets/video.d.ts

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

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "19.1.1",
+    "version": "19.1.3",
     "publishConfig": {
         "access": "public"
     },
@@ -23,8 +23,8 @@
     },
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
-        "@khanacademy/kmath": "^0.1.9",
-        "@khanacademy/math-input": "^17.0.1",
+        "@khanacademy/kmath": "^0.1.10",
+        "@khanacademy/math-input": "^17.0.2",
         "@khanacademy/perseus-core": "1.4.1",
         "@khanacademy/perseus-linter": "^0.3.10",
         "@khanacademy/pure-markdown": "^0.2.13",

package/src/__tests__/init.test.ts

@@ -0,0 +1,10 @@
+import init from "../init";
+import {getWidget} from "../widgets";
+
+describe("init", () => {
+    it("should correctly replace the transformer widget", async () => {
+        await init({skipMathJax: true});
+
+        expect(getWidget("transformer")).not.toBeNull();
+    });
+});

package/src/__tests__/widgets.test.ts

@@ -85,8 +85,7 @@ describe("replaceWidget", () => {
         expect(Widgets.getWidget("transformer")?.name).toBe("Radio");
     });
 
-    it("Does nothing when the replacement isn't available", () => {
-        Widgets.replaceWidget("radio", "dog-cat");
-        expect(Widgets.getWidget("radio")?.name).toBe("Radio");
+    it("Throws when the replacement isn't available", () => {
+        expect(() => Widgets.replaceWidget("radio", "dog-cat")).toThrow();
     });
 });

package/src/components/graph.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/no-unsafe */
+import {vector as kvector} from "@khanacademy/kmath";
 import $ from "jquery";
 import * as React from "react";
 import ReactDOM from "react-dom";
@@ -14,6 +15,7 @@ import SvgImage from "./svg-image";
 
 import type {Coord} from "../interactive2/types";
 import type {PerseusImageBackground} from "../perseus-types";
+import type {GridDimensions} from "../util";
 
 const defaultBackgroundImage = {
     url: null,
@@ -43,12 +45,12 @@ function numSteps(range: any, step: any) {
 }
 
 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;
@@ -201,23 +203,26 @@ class Graph extends React.Component<Props> {
             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();
+        const gridConfig: [GridDimensions, GridDimensions] =
+            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: kvector.map(gridConfig, (g) => g.scale),
                 axisArrows: "<->",
                 labelFormat: function (s) {
                     return "\\small{" + s + "}";
                 },
                 gridStep: this.props.gridStep,
-                tickStep: _.pluck(gridConfig, "tickStep"),
+                tickStep: kvector.map(gridConfig, (g) => g.tickStep),
                 labelStep: 1,
-                unityLabels: _.pluck(gridConfig, "unityLabel"),
+                unityLabels: kvector.map(gridConfig, (g) => g.unityLabel),
                 isMobile: this.props.isMobile,
             });
             graphie.label(
@@ -233,7 +238,7 @@ class Graph extends React.Component<Props> {
         } else if (this.props.markings === "grid") {
             graphie.graphInit({
                 range: range,
-                scale: _.pluck(gridConfig, "scale"),
+                scale: kvector.map(gridConfig, (g) => g.scale),
                 gridStep: this.props.gridStep,
                 axes: false,
                 ticks: false,
@@ -243,7 +248,7 @@ class Graph extends React.Component<Props> {
         } else if (this.props.markings === "none") {
             graphie.init({
                 range: range,
-                scale: _.pluck(gridConfig, "scale"),
+                scale: kvector.map(gridConfig, (g) => g.scale),
                 isMobile: this.props.isMobile,
             });
         }
@@ -303,6 +308,7 @@ class Graph extends React.Component<Props> {
             : null;
         /* eslint-enable indent */
 
+        // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
         graphie.addMouseLayer({
             onClick: this.props.onClick,
             onMouseDown: onMouseDown,
@@ -329,16 +335,15 @@ class Graph extends React.Component<Props> {
         }
     };
 
-    _getGridConfig: () => any = () => {
-        const self = this;
-        return _.map(self.props.step, function (step, i) {
-            return Util.gridDimensionConfig(
+    _getGridConfig: () => [GridDimensions, GridDimensions] = () => {
+        return kvector.map(this.props.step, (step, i) =>
+            Util.gridDimensionConfig(
                 step,
-                self.props.range[i],
-                self.props.box[i],
-                self.props.gridStep[i],
-            );
-        });
+                this.props.range[i],
+                this.props.box[i],
+                this.props.gridStep[i],
+            ),
+        );
     };
 
     _updateProtractor: () => void = () => {

package/src/components/graphie.tsx

@@ -7,6 +7,7 @@ import InteractiveUtil from "../interactive2/interactive-util";
 import {Errors, Log} from "../logging/log";
 import Util from "../util";
 import GraphUtils from "../util/graph-utils";
+import {Graphie as GraphieDrawingContext} from "../util/graphie";
 
 import GraphieClasses from "./graphie-classes";
 import Movables from "./graphie-movables";
@@ -59,8 +60,17 @@ type DefaultProps = {
     addMouseLayer: Props["addMouseLayer"];
 };
 
+interface Movable {
+    remove(): void;
+}
+
 class Graphie extends React.Component<Props> {
     graphieDivRef = React.createRef<HTMLDivElement>();
+    _graphie: GraphieDrawingContext = new GraphieDrawingContext(
+        document.createElement("div"),
+    );
+    _movables: Record<string, Movable> = {};
+    movables: Record<string, Movable> = {};
 
     static defaultProps: DefaultProps = {
         range: [
@@ -120,7 +130,6 @@ class Graphie extends React.Component<Props> {
      * Use it for good and not evil.
      */
     getGraphie: () => any = () => {
-        // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
         return this._graphie;
     };
 
@@ -151,10 +160,11 @@ class Graphie extends React.Component<Props> {
         ];
     };
 
-    _scale: () => ReadonlyArray<number> = () => {
+    // @ts-expect-error -  TS2322: Type '() => number[]' is not assignable to type '() => Coord'.
+    _scale: () => Coord = () => {
         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;
         });
@@ -164,9 +174,10 @@ class Graphie extends React.Component<Props> {
         this._removeMovables();
 
         const graphieDiv = ReactDOM.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
@@ -178,6 +189,7 @@ class Graphie extends React.Component<Props> {
         });
         // 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,
@@ -187,13 +199,13 @@ class Graphie extends React.Component<Props> {
             });
         }
 
+        // @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%"});
             graphie.raphael.setSize("100%", "100%");
         }
@@ -212,9 +224,7 @@ class Graphie extends React.Component<Props> {
 
     _removeMovables: () => void = () => {
         // _.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 = {};
     };
 
@@ -333,7 +343,6 @@ class Graphie extends React.Component<Props> {
             }
 
             if (ref) {
-                // @ts-expect-error - TS2339 - Property 'movables' does not exist on type 'Graphie'.
                 this.movables[ref] = newMovables[key];
             }
 
@@ -343,15 +352,11 @@ class Graphie extends React.Component<Props> {
 
     // Sort of like react diffing, but for movables
     _updateMovables: () => void = () => {
-        // @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: Record<string, any> = {};
-        // @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[]'.

package/src/init.ts

@@ -21,10 +21,7 @@ const init = function (options: PerseusOptions): Promise<undefined> {
     Widgets.registerWidgets(basicWidgets);
     Widgets.registerWidgets(extraWidgets);
 
-    // This section replaces widgets
-    // When it's time to replace the transformer widget
-    // uncomment this line
-    // Widgets.replaceWidget("transformer", "deprecated-standin");
+    Widgets.replaceWidget("transformer", "deprecated-standin");
 
     // Pass skipMathJax: true if MathJax is already loaded and configured.
     const skipMathJax = options.skipMathJax;

package/src/perseus-types.ts

@@ -1036,11 +1036,11 @@ export type PerseusInteractionGraph = {
     // The Axis ranges. e.g. [[-10, 10], [-10, 10]]
     range: [Range, Range];
     // The steps in the grid. default [1, 1]
-    gridStep: Readonly<[number, number]>;
+    gridStep: [number, number];
     // What to show on the graph.  "graph", "grid", or "none"
     markings: string;
     // The snap steps. default [0.5, 0.5]
-    snapStep?: Readonly<[number, number]>;
+    snapStep?: [number, number];
     // Whether the grid is valid or not.  Do the numbers all make sense?
     // NOTE(jeremy) The editor for this widget sometimes stores the graph
     // editor validation error message into this field. It seems innocuous
@@ -1058,7 +1058,7 @@ export type PerseusInteractionGraph = {
     // How many ticks to show on the ruler.  e.g. 1, 2, 4, 8, 10, 16
     rulerTicks?: number;
     // This controls the number (and position) of the tick marks for the X and Y axis. e.g. [1, 1]
-    tickStep: Readonly<[number, number]>;
+    tickStep: [number, number];
 };
 
 export type PerseusInteractionElement =

package/src/types.ts

@@ -411,9 +411,13 @@ export type WidgetExports<
 > = Readonly<{
     name: string;
     displayName: string;
+
+    // Widgets should provide _one_ of these two properties only!
     // TODO: figure out how to ensure that the component returned supports
     // the `validate` method.
     getWidget?: () => T;
+    widget: T;
+
     accessible?: boolean | ((props: any) => boolean);
     /** Supresses widget from showing up in the dropdown in the content editor */
     hidden?: boolean;
@@ -449,8 +453,6 @@ export type WidgetExports<
     propUpgrades?: {
         [key: string]: (arg1: any) => any;
     }; // OldProps => NewProps,
-
-    widget: T;
 }>;
 
 export type PerseusWidgetMap = {

package/src/util/graphie.test.ts

@@ -40,7 +40,7 @@ function createFakeRaphaelSet() {
 }
 
 function createAndInitGraphie(): Graphie {
-    const graphie = GraphUtils.createGraphie();
+    const graphie = GraphUtils.createGraphie(document.createElement("div"));
     graphie.raphael = createMockRaphael();
 
     // The graph is 50px by 50px
@@ -1244,20 +1244,6 @@ describe("Graphie drawing tools", () => {
     });
 });
 
-describe("GraphUtils", () => {
-    describe("snapCoord", () => {
-        it("snaps to the nearest integer coordinates", () => {
-            expect(GraphUtils.snapCoord([0.1, 0.9], [1, 1])).toEqual([0, 1]);
-        });
-
-        it("snaps to the nearest half", () => {
-            expect(GraphUtils.snapCoord([0.4, 2.2], [0.5, 0.5])).toEqual([
-                0.5, 2,
-            ]);
-        });
-    });
-});
-
 describe("normalizeRange", () => {
     it("does nothing to a range specified as [[xMin, xMax], [yMin, yMax]]", () => {
         expect(

package/src/util/graphie.ts

@@ -91,7 +91,7 @@ interface LabelMethod {
 }
 
 export class Graphie {
-    el: HTMLElement;
+    el: Element;
     #bounds?: GraphBounds;
     #drawingTransform?: DrawingTransform;
     raphael?: any;
@@ -111,7 +111,7 @@ export class Graphie {
     xpixels?: number;
     ypixels?: number;
 
-    constructor(el: HTMLElement) {
+    constructor(el: Element) {
         this.el = el;
         $(el).css("position", "relative");
         this.raphael = Raphael(el);
@@ -180,7 +180,7 @@ export class Graphie {
         grid?: boolean;
         gridRange?: [Interval, Interval] | Coord;
         scale: Coord | number;
-        axes?: true;
+        axes?: boolean;
         axisArrows?: "<->" | "->" | true | "";
         axisOpacity?: number;
         axisCenter?: Coord;
@@ -269,8 +269,8 @@ export class Graphie {
             unityLabels = [unityLabels, unityLabels];
         }
 
-        const minusIgnorer = function (lf: any) {
-            return function (a) {
+        const minusIgnorer = function (lf: (a: number) => string) {
+            return function (a: number) {
                 return (lf(a) + "").replace(/-(\d)/g, "\\llap{-}$1");
             };
         };
@@ -580,7 +580,7 @@ export class Graphie {
         return this.#bounds;
     }
 
-    style(attrs: any, fn: any) {
+    style<T>(attrs: any, fn?: (this: Graphie) => T): T | undefined {
         const processed = this.processAttributes(attrs);
 
         if (typeof fn === "function") {
@@ -983,7 +983,7 @@ export class Graphie {
             };
 
             // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
-            $span.processText = function (text: any) {
+            $span.processText = function (text: string) {
                 $span.html(text);
                 const width = span.scrollWidth;
                 const height = span.scrollHeight;
@@ -1098,7 +1098,7 @@ export class Graphie {
             .join("");
     };
 
-    svgParabolaPath = (a: any, b: any, c: any) => {
+    svgParabolaPath = (a: number, b: number, c: number) => {
         const computeParabola = function (x) {
             return (a * x + b) * x + c;
         };
@@ -1346,7 +1346,7 @@ export class Graphie {
         return this.drawingTransform().unscaleVector(point);
     };
 
-    private processAttributes(attrs: any) {
+    private processAttributes(attrs: Record<string, any> | undefined) {
         const transformers = {
             scale: (scale) => {
                 this.drawingTransform().setScale(scale);
@@ -1515,14 +1515,14 @@ const setLabelMargins = function (span: HTMLElement, size: Coord): void {
     }
 };
 
-const GraphUtils: any = {
+const GraphUtils = {
     Graphie,
 
-    createGraphie: function (el: any): Graphie {
+    createGraphie: function (el: Element): Graphie {
         return new Graphie(el);
     },
 
-    unscaledSvgPath: function (points) {
+    unscaledSvgPath: function (points: (Coord | true)[]): string {
         // If this is an empty closed path, return "" instead of "z", which
         // would give an error
         if (points[0] === true) {
@@ -1538,22 +1538,12 @@ const GraphUtils: any = {
             .join("");
     },
 
-    getDistance: function (point1, point2) {
+    getDistance: function (point1: Coord, point2: Coord): number {
         return kpoint.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) {
+    findAngle: function (point1: Coord, point2: Coord, vertex?: Coord) {
         if (vertex === undefined) {
             const x = point1[0] - point2[0];
             const y = point1[1] - point2[1];

package/src/util/interactive.ts

@@ -3982,8 +3982,8 @@ _.extend(MovableAngle.prototype, {
 
         // Drag ray control points to move each ray individually
         _.each([0, 2], function (i) {
-            points[i].onMove = function (x: any, y) {
-                const newPoint = [x, y];
+            points[i].onMove = function (x: number, y: number) {
+                const newPoint: Coord = [x, y];
                 const vertex = points[1].coord;
 
                 // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'never[]'.

package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap

@@ -182,7 +182,7 @@ exports[`rendering supports mobile rendering: mobile render 1`] = `
                   class="mq-textarea"
                 >
                   <span
-                    aria-label="Math Input:"
+                    aria-label="Math input box:"
                   />
                 </span>
                 <span

package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap

@@ -44,7 +44,7 @@ exports[`Numeric input widget styles differently on mobile: mobile render 1`] =
                   class="mq-textarea"
                 >
                   <span
-                    aria-label="Math Input:"
+                    aria-label="Math input box:"
                   />
                 </span>
                 <span

package/src/widgets/label-image/marker.tsx

@@ -7,6 +7,7 @@
 
 import Color from "@khanacademy/wonder-blocks-color";
 import {View, type StyleType} from "@khanacademy/wonder-blocks-core";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -127,6 +128,7 @@ export default class Marker extends React.Component<Props> {
             answerStyles,
             hovered,
             focused,
+            label,
         } = this.props;
 
         // We cannot make dropdown openers untabbable, so we isolate tabbing
@@ -141,6 +143,8 @@ export default class Marker extends React.Component<Props> {
                         styles.marker,
                         active && !markerDisabled && styles.markerActive,
                     ]}
+                    // already translated in: /widgets/graded-group.tsx
+                    aria-label={markerDisabled ? i18n._("Correct!") : label}
                 >
                     {this.renderIcon()}
                 </View>

package/src/widgets/label-image.tsx

@@ -598,16 +598,11 @@ export class LabelImage extends React.Component<
                         }
                         // cannot change answer choices once question is answered
                         disabled={disabled}
-                        opener={({opened, text}) => (
+                        opener={({opened}) => (
                             <Clickable
                                 role="button"
+                                aria-expanded={opened}
                                 key={`marker-${marker.x}.${marker.y}`}
-                                aria-label={
-                                    // already translated in: /widgets/graded-group.tsx
-                                    showCorrectness === "correct"
-                                        ? i18n._("Correct!")
-                                        : marker.label
-                                }
                             >
                                 {({hovered, focused, pressed}) => (
                                     <Marker