@khanacademy/perseus 7.2.1 → 9.0.0

package/src/widgets/graded-group.tsx

@@ -22,12 +22,16 @@ import {
 } from "../styles/constants";
 import a11y from "../util/a11y";
 
-import GradedGroupAnswerBar, {
-    ANSWER_BAR_STATES,
-} from "./graded-group-answer-bar";
+import GradedGroupAnswerBar from "./graded-group-answer-bar";
 
 import type {PerseusGradedGroupWidgetOptions} from "../perseus-types";
-import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
+import type {
+    PerseusScore,
+    TrackingGradedGroupExtraArguments,
+    WidgetExports,
+    WidgetProps,
+} from "../types";
+import type {ANSWER_BAR_STATES} from "./graded-group-answer-bar";
 
 const GRADING_STATUSES = {
     ungraded: "ungraded" as const,
@@ -65,7 +69,11 @@ const DEFAULT_INVALID_MESSAGE =
 type Rubric = PerseusGradedGroupWidgetOptions;
 type RenderProps = PerseusGradedGroupWidgetOptions; // exports has no 'transform'
 
-type Props = WidgetProps<RenderProps, Rubric> & {
+type Props = WidgetProps<
+    RenderProps,
+    Rubric,
+    TrackingGradedGroupExtraArguments
+> & {
     inGradedGroupSet?: boolean; // Set by graded-group-set.jsx,
     onNextQuestion?: () => unknown; // Set by graded-group-set.jsx
 };
@@ -114,7 +122,7 @@ export class GradedGroup extends React.Component<Props, State> {
     }
 
     change: (...args: ReadonlyArray<unknown>) => any = (...args) => {
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+        // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
         return Changeable.change.apply(this, args);
     };
 
@@ -134,7 +142,7 @@ export class GradedGroup extends React.Component<Props, State> {
         if (this.refs.renderer) {
             this.change("widgets", this.props.widgets);
             // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'emptyWidgets' does not exist on type 'ReactInstance'.
+            // @ts-expect-error - TS2339 - Property 'emptyWidgets' does not exist on type 'ReactInstance'.
             const emptyWidgets = this.refs.renderer.emptyWidgets();
             const answerable = emptyWidgets.length === 0;
             const answerBarState = this.state.answerBarState;
@@ -146,10 +154,10 @@ export class GradedGroup extends React.Component<Props, State> {
 
     _checkAnswer: () => void = () => {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'showRationalesForCurrentlySelectedChoices' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'showRationalesForCurrentlySelectedChoices' does not exist on type 'ReactInstance'.
         this.refs.renderer.showRationalesForCurrentlySelectedChoices();
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'score' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'score' does not exist on type 'ReactInstance'.
         const score: PerseusScore = this.refs.renderer.score();
 
         const status =
@@ -180,7 +188,7 @@ export class GradedGroup extends React.Component<Props, State> {
     // Mobile API
     getInputPaths: () => ReadonlyArray<ReadonlyArray<string>> = () => {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getInputPaths' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'getInputPaths' does not exist on type 'ReactInstance'.
         return this.refs.renderer.getInputPaths();
     };
 
@@ -190,25 +198,25 @@ export class GradedGroup extends React.Component<Props, State> {
         cb,
     ) => {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'setInputValue' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'setInputValue' does not exist on type 'ReactInstance'.
         return this.refs.renderer.setInputValue(path, newValue, cb);
     };
 
     focus: () => boolean = () => {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         return this.refs.renderer.focus();
     };
 
     focusInputPath: (arg1: any) => void = (path) => {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focusPath' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'focusPath' does not exist on type 'ReactInstance'.
         this.refs.renderer.focusPath(path);
     };
 
     blurInputPath: (arg1: any) => void = (path) => {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'blurPath' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'blurPath' does not exist on type 'ReactInstance'.
         this.refs.renderer.blurPath(path);
     };
 
@@ -236,15 +244,15 @@ export class GradedGroup extends React.Component<Props, State> {
         // Colors are 10% darker than the colors in graded-group.less
         if (this.state.status === GRADING_STATUSES.correct) {
             // TODO(jeremy): update to a WB colour
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Element' is not assignable to type 'null'.
+            // @ts-expect-error - TS2322 - Type 'Element' is not assignable to type 'null'.
             icon = <InlineIcon {...iconOk} style={{color: "#526f03"}} />;
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type 'null'.
+            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
             gradeStatus = i18n._("Correct");
         } else if (this.state.status === GRADING_STATUSES.incorrect) {
             // TODO(jeremy): update to a WB colour
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Element' is not assignable to type 'null'.
+            // @ts-expect-error - TS2322 - Type 'Element' is not assignable to type 'null'.
             icon = <InlineIcon {...iconRemove} style={{color: "#ff5454"}} />;
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type 'null'.
+            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
             gradeStatus = i18n._("Incorrect");
         }
 
@@ -283,7 +291,7 @@ export class GradedGroup extends React.Component<Props, State> {
                  * props that are needed.
                  * TODO(FEI-4034): Only pass what the Renderer expects.
                  */}
-                {/* @ts-expect-error [FEI-5003] - TS2322 - Type '{ ref: string; apiOptions: any; onInteractWithWidget: (arg1: string) => void; linterContext: LinterContextProps; title: string; hasHint?: boolean | null | undefined; ... 22 more ...; children?: ReactNode; }' is not assignable to type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "keypadElement" | "problemNum" | "apiOptions" | "legacyPerseusLint">'. */}
+                {/* @ts-expect-error - TS2322 - Type '{ ref: string; apiOptions: any; onInteractWithWidget: (arg1: string) => void; linterContext: LinterContextProps; title: string; hasHint?: boolean | null | undefined; ... 22 more ...; children?: ReactNode; }' is not assignable to type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "keypadElement" | "problemNum" | "apiOptions" | "legacyPerseusLint">'. */}
                 <Renderer
                     {...this.props}
                     // eslint-disable-next-line react/no-string-refs
@@ -337,7 +345,7 @@ export class GradedGroup extends React.Component<Props, State> {
                         <div>
                             {/* Not using Button here bc the styles won't work. */}
                             <button
-                                // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
+                                // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
                                 tabIndex="0"
                                 className={css(styles.explanationTitle)}
                                 onClick={() => this.setState({showHint: false})}
@@ -364,7 +372,7 @@ export class GradedGroup extends React.Component<Props, State> {
                     ) : (
                         // Not using Button here bc the styles won't work.
                         <button
-                            // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
+                            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
                             tabIndex="0"
                             onClick={() => this.setState({showHint: true})}
                             onKeyPress={(e) => {

package/src/widgets/grapher/util.tsx

@@ -10,7 +10,7 @@ import Util from "../../util";
 import type {Coord} from "../../interactive2/types";
 import type {PerseusScore} from "../../types";
 
-// @ts-expect-error [FEI-5003] - TS2339 - Property 'Plot' does not exist on type 'typeof Graphie'.
+// @ts-expect-error - TS2339 - Property 'Plot' does not exist on type 'typeof Graphie'.
 const Plot = Graphie.Plot;
 
 export const DEFAULT_BACKGROUND_IMAGE = {
@@ -98,7 +98,7 @@ const PlotDefaults = {
 
     getPropsForCoeffs: function (coeffs) {
         return {
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'getFunctionForCoeffs' does not exist on type '{ readonly areEqual: (coeffs1: any, coeffs2: any) => boolean; readonly Movable: any; readonly getPropsForCoeffs: (coeffs: any) => any; }'.
+            // @ts-expect-error - TS2339 - Property 'getFunctionForCoeffs' does not exist on type '{ readonly areEqual: (coeffs1: any, coeffs2: any) => boolean; readonly Movable: any; readonly getPropsForCoeffs: (coeffs: any) => any; }'.
             fn: _.partial(this.getFunctionForCoeffs, coeffs),
         };
     },
@@ -149,7 +149,7 @@ const Quadratic = _.extend({}, PlotDefaults, {
         [0.5, 0.5],
         [0.75, 0.75],
     ],
-    // @ts-expect-error [FEI-5003] - TS2339 - Property 'Parabola' does not exist on type 'typeof Graphie'.
+    // @ts-expect-error - TS2339 - Property 'Parabola' does not exist on type 'typeof Graphie'.
     Movable: Graphie.Parabola,
 
     getCoefficients: function (coords) {
@@ -206,7 +206,7 @@ const Sinusoid = _.extend({}, PlotDefaults, {
         [0.5, 0.5],
         [0.6, 0.6],
     ],
-    // @ts-expect-error [FEI-5003] - TS2339 - Property 'Sinusoid' does not exist on type 'typeof Graphie'.
+    // @ts-expect-error - TS2339 - Property 'Sinusoid' does not exist on type 'typeof Graphie'.
     Movable: Graphie.Sinusoid,
 
     getCoefficients: function (coords) {
@@ -664,7 +664,7 @@ export const pointsFromNormalized = (
         return Math.floor((range[1] - range[0]) / step);
     };
 
-    // @ts-expect-error [FEI-5003] - TS2322 - Type 'number[][]' is not assignable to type 'readonly Coord[]'.
+    // @ts-expect-error - TS2322 - Type 'number[][]' is not assignable to type 'readonly Coord[]'.
     return coordsList.map((coords) => {
         const unsnappedPoint = coords.map((coord, i) => {
             const currRange = range[i];
@@ -719,7 +719,7 @@ export const defaultPlotProps = (type: string, graph: any): any => {
     // might get a free win.
     const model = functionForType(type);
     const gridStep = [1, 1];
-    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'number[]' is not assignable to parameter of type '[number, number]'.
+    // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type '[number, number]'.
     const snapStep = Util.snapStepFromGridStep(gridStep);
     return {
         type,

package/src/widgets/grapher.tsx

@@ -37,9 +37,9 @@ import type {PerseusGrapherWidgetOptions} from "../perseus-types";
 import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
 import type {GridDimensions} from "../util";
 
-// @ts-expect-error [FEI-5003] - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
+// @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
 const MovablePoint = Graphie.MovablePoint;
-// @ts-expect-error [FEI-5003] - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
+// @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
 const MovableLine = Graphie.MovableLine;
 
 function isFlipped(newCoord: Coord, oldCoord: Coord, line: Line) {
@@ -118,9 +118,9 @@ class FunctionGrapher extends React.Component<FunctionGrapherProps> {
                     coord={coord}
                     static={this.props.static}
                     constraints={[
-                        // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
+                        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                         Interactive2.MovablePoint.constraints.bound(),
-                        // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
+                        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                         Interactive2.MovablePoint.constraints.snap(),
                         (coord: any) => {
                             // Always enforce that this is a function
@@ -200,9 +200,9 @@ class FunctionGrapher extends React.Component<FunctionGrapherProps> {
         let image = null;
         if (imageDescription.url) {
             const scale = box[0] / interactiveSizes.defaultBoxSize;
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Element' is not assignable to type 'null'.
+            // @ts-expect-error - TS2322 - Type 'Element' is not assignable to type 'null'.
             image = (
-                // @ts-expect-error [FEI-5003] - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
+                // @ts-expect-error - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
                 <SvgImage
                     src={imageDescription.url}
                     width={imageDescription.width}
@@ -291,9 +291,9 @@ class FunctionGrapher extends React.Component<FunctionGrapherProps> {
                         });
                     }}
                     constraints={[
-                        // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
+                        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                         Interactive2.MovableLine.constraints.bound(),
-                        // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
+                        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                         Interactive2.MovableLine.constraints.snap(),
                         (newCoord, oldCoord: any) => {
                             // Calculate and apply proposed displacement
@@ -429,7 +429,7 @@ class Grapher extends React.Component<Props> {
 
         return (
             <div>
-                {/* @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. */}
+                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
                 <FunctionGrapher {...grapherProps} />
                 {this.props.availableTypes.length > 1 && typeSelector}
             </div>
@@ -638,7 +638,7 @@ const propTransform: (arg1: PerseusGrapherWidgetOptions) => RenderProps = (
     if (widgetProps.availableTypes.length === 1) {
         const graph = widgetProps.graph;
         const type = chooseType(widgetProps.availableTypes);
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
+        // @ts-expect-error - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
         widgetProps.plot = defaultPlotProps(type, graph);
     }
 

package/src/widgets/group.tsx

@@ -127,7 +127,7 @@ class Group extends React.Component<Props> {
         // really we should have a more unidirectional flow. TODO(marcia): fix.
         const groupWidgets: ReadonlyArray<Widget> =
             this.props.findWidgets("group");
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'this' is not assignable to parameter of type 'Widget'.
+        // @ts-expect-error - TS2345 - Argument of type 'this' is not assignable to parameter of type 'Widget'.
         const number: number = groupWidgets.indexOf(this);
         const problemNumComponent = this.props.apiOptions.groupAnnotator(
             number,
@@ -171,9 +171,9 @@ class Group extends React.Component<Props> {
                     onInteractWithWidget={onInteractWithWidget}
                     linterContext={this.props.linterContext}
                 />
-                {/* @ts-expect-error [FEI-5003] - TS2339 - Property 'icon' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'. */}
+                {/* @ts-expect-error - TS2339 - Property 'icon' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'. */}
                 {this.props.icon && (
-                    // @ts-expect-error [FEI-5003] - TS2339 - Property 'icon' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
+                    // @ts-expect-error - TS2339 - Property 'icon' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
                     <div className="group-icon">{this.props.icon}</div>
                 )}
             </div>

package/src/widgets/iframe.tsx

@@ -146,12 +146,12 @@ class Iframe extends React.Component<any> {
     }
 
     change: (...args: ReadonlyArray<unknown>) => any = (...args) => {
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+        // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
         return Changeable.change.apply(this, args);
     };
 
     simpleValidate: (arg1: any) => any = (rubric) => {
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'validate' does not exist on type 'typeof Iframe'.
+        // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Iframe'.
         return Iframe.validate(this.getUserInput(), rubric);
     };
 }

package/src/widgets/image.tsx

@@ -204,7 +204,7 @@ class ImageWidget extends React.Component<Props> {
                         <div
                             className={css(styles.caption)}
                             style={{
-                                // @ts-expect-error [FEI-5003] - TS2322 - Type 'string | null' is not assignable to type 'MinWidth<string | number> | undefined'.
+                                // @ts-expect-error - TS2322 - Type 'string | null' is not assignable to type 'MinWidth<string | number> | undefined'.
                                 minWidth: minWidth,
                             }}
                         >

package/src/widgets/input-number.tsx

@@ -217,20 +217,20 @@ class InputNumber extends React.Component<Props> {
 
     focus: () => boolean = () => {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         this.refs.input.focus();
         return true;
     };
 
     focusInputPath: (arg1: Path) => void = (inputPath) => {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         this.refs.input.focus();
     };
 
     blurInputPath: (arg1: Path) => void = (inputPath) => {
         // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
+        // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
         this.refs.input.blur();
     };
 
@@ -281,7 +281,7 @@ class InputNumber extends React.Component<Props> {
             forms,
             function (form) {
                 // eslint-disable-next-line @babel/no-invalid-this
-                // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+                // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                 // eslint-disable-next-line @babel/no-invalid-this
                 return formExamples[form](this.props);
             },