@khanacademy/perseus 6.5.1 → 6.7.0

package/dist/interaction-tracker.d.ts

@@ -1,15 +1,15 @@
-import type { APIOptions } from "./types";
+import type { APIOptions, Tracking } from "./types";
 /**
  * Wrapper for the trackInteraction apiOption.
  */
 declare class InteractionTracker {
     _tracked: boolean;
-    setting: string;
+    setting: Tracking;
     track: (extraData?: any) => void;
     trackApi: any;
     widgetID: string;
     widgetType: string;
-    constructor(trackApi: APIOptions["trackInteraction"], widgetType: string, widgetID: string, setting: "" | "all");
+    constructor(trackApi: APIOptions["trackInteraction"], widgetType: string, widgetID: string, setting: Tracking);
     /**
      * Function that actually calls the API to mark the interaction. This is
      * private. The public version is just `.track` and is bound to this object

package/dist/interaction-tracker.js.flow

@@ -4,14 +4,14 @@
  * Flowgen v1.21.0
  * @flow
  */
-import type { APIOptions } from "./types";
+import type { APIOptions, Tracking } from "./types";
 
 /**
  * Wrapper for the trackInteraction apiOption.
  */
 declare class InteractionTracker {
   _tracked: boolean;
-  setting: string;
+  setting: Tracking;
   track: (extraData?: any) => void;
   trackApi: any;
   widgetID: string;
@@ -20,7 +20,7 @@ declare class InteractionTracker {
     trackApi: $PropertyType<APIOptions, "trackInteraction">,
     widgetType: string,
     widgetID: string,
-    setting: "" | "all"
+    setting: Tracking
   ): this;
 
   /**

package/dist/perseus-api.d.ts

@@ -82,7 +82,7 @@ export declare const ApiOptions: {
             type: string;
             id: string;
             correct?: boolean | undefined;
-        }) => void) | undefined;
+        } & Record<string, unknown>) => void) | undefined;
         customKeypad?: boolean | undefined;
         nativeKeypadProxy?: (() => unknown) | undefined;
         isMobile?: boolean | undefined;

package/dist/perseus-api.js.flow

@@ -80,9 +80,12 @@ declare export var ApiOptions: {|
         | void,
       trackInteraction?:
         | ((args: {|
-            type: string,
-            id: string,
-            correct?: boolean | void,
+            ...{|
+              type: string,
+              id: string,
+              correct?: boolean | void,
+            |},
+            ...{ [key: string]: mixed },
           |}) => void)
         | void,
       customKeypad?: boolean | void,

package/dist/types.d.ts

@@ -112,7 +112,7 @@ export type APIOptions = Readonly<{
         type: string;
         id: string;
         correct?: boolean;
-    }) => void;
+    } & Record<string, unknown>) => void;
     customKeypad?: boolean;
     nativeKeypadProxy?: () => unknown;
     isMobile?: boolean;

package/dist/types.js.flow

@@ -133,9 +133,12 @@ export type APIOptions = $ReadOnly<{|
   |},
   imagePreloader?: (dimensions: Dimensions) => React.Node,
   trackInteraction?: (args: {|
-    type: string,
-    id: string,
-    correct?: boolean,
+    ...{|
+      type: string,
+      id: string,
+      correct?: boolean,
+    |},
+    ...{ [key: string]: mixed },
   |}) => void,
   customKeypad?: boolean,
   nativeKeypadProxy?: () => mixed,

package/dist/widgets/sequence.d.ts

@@ -1,56 +1,21 @@
-import PropTypes from "prop-types";
 import * as React from "react";
-declare class Sequence extends React.Component<any, any> {
-    static propTypes: {
-        apiOptions: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            isArticle: PropTypes.Validator<boolean>;
-            onInputError: PropTypes.Validator<(...args: any[]) => any>;
-            onFocusChange: PropTypes.Validator<(...args: any[]) => any>;
-            GroupMetadataEditor: PropTypes.Validator<(...args: any[]) => any>;
-            showAlignmentOptions: PropTypes.Validator<boolean>;
-            readOnly: PropTypes.Validator<boolean>;
-            answerableCallback: PropTypes.Requireable<(...args: any[]) => any>;
-            getAnotherHint: PropTypes.Requireable<(...args: any[]) => any>;
-            interactionCallback: PropTypes.Requireable<(...args: any[]) => any>;
-            groupAnnotator: PropTypes.Validator<(...args: any[]) => any>;
-            imagePlaceholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            widgetPlaceholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            baseElements: PropTypes.Requireable<PropTypes.InferProps<{
-                Link: PropTypes.Requireable<(...args: any[]) => any>;
-            }>>;
-            imagePreloader: PropTypes.Requireable<(...args: any[]) => any>;
-            trackInteraction: PropTypes.Requireable<(...args: any[]) => any>;
-            customKeypad: PropTypes.Requireable<boolean>;
-            nativeKeypadProxy: PropTypes.Requireable<(...args: any[]) => any>;
-            isMobile: PropTypes.Requireable<boolean>;
-            setDrawingAreaAvailable: PropTypes.Requireable<(...args: any[]) => any>;
-            useDraftEditor: PropTypes.Requireable<boolean>;
-            hintProgressColor: PropTypes.Requireable<string>;
-            canScrollPage: PropTypes.Requireable<boolean>;
-            inModal: PropTypes.Requireable<boolean>;
-            crossOutEnabled: PropTypes.Requireable<boolean>;
-            editorChangeDelay: PropTypes.Requireable<number>;
-        }>>>;
-        json: PropTypes.Requireable<(PropTypes.InferProps<{
-            content: PropTypes.Requireable<string>;
-            images: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            widgets: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-        }> | null | undefined)[]>;
-        trackInteraction: PropTypes.Validator<(...args: any[]) => any>;
-        linterContext: PropTypes.Requireable<PropTypes.InferProps<{
-            contentType: PropTypes.Requireable<string>;
-            highlightLint: PropTypes.Requireable<boolean>;
-            paths: PropTypes.Requireable<(string | null | undefined)[]>;
-            stack: PropTypes.Requireable<(string | null | undefined)[]>;
-        }>>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
+import { PerseusSequenceWidgetOptions } from "../perseus-types";
+import type { WidgetProps } from "../types";
+type Rubric = PerseusSequenceWidgetOptions;
+type ExternalProps = WidgetProps<PerseusSequenceWidgetOptions, Rubric>;
+type Props = ExternalProps;
+type DefaultProps = {
+    json: Props["json"];
+    linterContext: Props["linterContext"];
+};
+type State = {
+    visible: number;
+};
+declare class Sequence extends React.Component<Props, State> {
+    static defaultProps: DefaultProps;
+    state: {
+        visible: number;
     };
-    static defaultProps: any;
-    state: any;
     shouldComponentUpdate(nextProps: any, nextState: any): boolean;
     change: (arg1: any, arg2: any, arg3: any) => any;
     _handleInteraction: (arg1: string) => void;

package/dist/widgets/sequence.js.flow

@@ -5,71 +5,24 @@
  * @flow
  */
 import * as $Flowgen$Import$_2e__2e__2f_types from "../types";
-import PropTypes from "prop-types";
 import * as React from "react";
-declare class Sequence extends React.Component<any, any> {
-  static propTypes: {|
-    apiOptions: PropTypes.Validator<
-      $NonMaybeType<
-        PropTypes.InferProps<{|
-          isArticle: PropTypes.Validator<boolean>,
-          onInputError: PropTypes.Validator<(...args: any[]) => any>,
-          onFocusChange: PropTypes.Validator<(...args: any[]) => any>,
-          GroupMetadataEditor: PropTypes.Validator<(...args: any[]) => any>,
-          showAlignmentOptions: PropTypes.Validator<boolean>,
-          readOnly: PropTypes.Validator<boolean>,
-          answerableCallback: PropTypes.Requireable<(...args: any[]) => any>,
-          getAnotherHint: PropTypes.Requireable<(...args: any[]) => any>,
-          interactionCallback: PropTypes.Requireable<(...args: any[]) => any>,
-          groupAnnotator: PropTypes.Validator<(...args: any[]) => any>,
-          imagePlaceholder: PropTypes.Requireable<PropTypes.ReactNodeLike>,
-          widgetPlaceholder: PropTypes.Requireable<PropTypes.ReactNodeLike>,
-          baseElements: PropTypes.Requireable<
-            PropTypes.InferProps<{|
-              Link: PropTypes.Requireable<(...args: any[]) => any>,
-            |}>
-          >,
-          imagePreloader: PropTypes.Requireable<(...args: any[]) => any>,
-          trackInteraction: PropTypes.Requireable<(...args: any[]) => any>,
-          customKeypad: PropTypes.Requireable<boolean>,
-          nativeKeypadProxy: PropTypes.Requireable<(...args: any[]) => any>,
-          isMobile: PropTypes.Requireable<boolean>,
-          setDrawingAreaAvailable: PropTypes.Requireable<
-            (...args: any[]) => any
-          >,
-          useDraftEditor: PropTypes.Requireable<boolean>,
-          hintProgressColor: PropTypes.Requireable<string>,
-          canScrollPage: PropTypes.Requireable<boolean>,
-          inModal: PropTypes.Requireable<boolean>,
-          crossOutEnabled: PropTypes.Requireable<boolean>,
-          editorChangeDelay: PropTypes.Requireable<number>,
-        |}>
-      >
-    >,
-    json: PropTypes.Requireable<
-      (PropTypes.InferProps<{|
-        content: PropTypes.Requireable<string>,
-        images: PropTypes.Requireable<{
-          [x: string]: any,
-        }>,
-        widgets: PropTypes.Requireable<{
-          [x: string]: any,
-        }>,
-      |}> | null | void)[]
-    >,
-    trackInteraction: PropTypes.Validator<(...args: any[]) => any>,
-    linterContext: PropTypes.Requireable<
-      PropTypes.InferProps<{|
-        contentType: PropTypes.Requireable<string>,
-        highlightLint: PropTypes.Requireable<boolean>,
-        paths: PropTypes.Requireable<(string | null | void)[]>,
-        stack: PropTypes.Requireable<(string | null | void)[]>,
-      |}>
-    >,
-    onChange: PropTypes.Validator<(...args: any[]) => any>,
+import { PerseusSequenceWidgetOptions } from "../perseus-types";
+import type { WidgetProps } from "../types";
+declare type Rubric = PerseusSequenceWidgetOptions;
+declare type ExternalProps = WidgetProps<PerseusSequenceWidgetOptions, Rubric>;
+declare type Props = ExternalProps;
+declare type DefaultProps = {|
+  json: $PropertyType<Props, "json">,
+  linterContext: $PropertyType<Props, "linterContext">,
+|};
+declare type State = {|
+  visible: number,
+|};
+declare class Sequence extends React.Component<Props, State> {
+  static defaultProps: DefaultProps;
+  state: {|
+    visible: number,
   |};
-  static defaultProps: any;
-  state: any;
   shouldComponentUpdate(nextProps: any, nextState: any): boolean;
   change: (arg1: any, arg2: any, arg3: any) => any;
   _handleInteraction: (arg1: string) => void;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "6.5.1",
+    "version": "6.7.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,7 +23,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/math-input": "^6.0.3",
+        "@khanacademy/math-input": "^7.0.0",
         "@khanacademy/perseus-core": "0.0.2",
         "@khanacademy/perseus-linter": "^0.3.1",
         "@khanacademy/pure-markdown": "^0.2.3",

package/src/index.ts

@@ -128,6 +128,7 @@ export type {
     PerseusImageBackground,
     PerseusInteractiveGraphWidgetOptions,
     PerseusRadioWidgetOptions,
+    PerseusExpressionWidgetOptions,
     PerseusRenderer,
 } from "./perseus-types";
 export type {Coord} from "./interactive2/types";

package/src/interaction-tracker.ts

@@ -1,4 +1,4 @@
-import type {APIOptions} from "./types";
+import type {APIOptions, Tracking} from "./types";
 
 /**
  * This alternate version of `.track` does nothing as an optimization.
@@ -12,7 +12,7 @@ class InteractionTracker {
     // @ts-expect-error [FEI-5003] - TS2564 - Property '_tracked' has no initializer and is not definitely assigned in the constructor.
     _tracked: boolean;
     // @ts-expect-error [FEI-5003] - TS2564 - Property 'setting' has no initializer and is not definitely assigned in the constructor.
-    setting: string;
+    setting: Tracking;
     track: (extraData?: any) => void;
     trackApi: any;
     // @ts-expect-error [FEI-5003] - TS2564 - Property 'widgetID' has no initializer and is not definitely assigned in the constructor.
@@ -24,7 +24,7 @@ class InteractionTracker {
         trackApi: APIOptions["trackInteraction"],
         widgetType: string,
         widgetID: string,
-        setting: "" | "all", // "" means track once
+        setting: Tracking,
     ) {
         if (!trackApi) {
             this.track = _noop;

package/src/styles/articles.less

@@ -99,7 +99,7 @@
         // inline, so we rely on the "actual paragraph" check above
         // (a .paragraph that contains another .paragraph instead of a
         // .perseus-block-math).
-        .katex {
+        .katex, mjx-container {
             font-size: 100%;
         }
     }
@@ -282,7 +282,7 @@
             .paragraph {
                 .text(@choiceTextSize, @choiceLineHeight, @gray17);
 
-                .katex {
+                .katex, mjx-container {
                     color: @gray17;
                 }
             }
@@ -403,7 +403,7 @@
             .paragraph {
                 .text(@choiceTextSize, @choiceLineHeight, @gray17);
 
-                .katex {
+                .katex, mjx-container {
                     color: @gray17;
                 }
             }
@@ -430,13 +430,14 @@
 
     .math(@blockMathTextSize; @blockMathLineHeight;
           @inlineMathTextSize; @inlineMathLineHeight) {
-        .katex {
+        .katex, mjx-container {
             font-size: @inlineMathTextSize;
             line-height: @inlineMathLineHeight;
             color: @gray17;
         }
 
-        .perseus-block-math .katex {
+        .perseus-block-math .katex,
+        .perseus-block-math mjx-container {
             font-size: @blockMathTextSize;
             line-height: @blockMathLineHeight;
         }
@@ -446,7 +447,8 @@
         // https://github.com/Khan/KaTeX/blob/965b8a6164ee54212bf382108f256c6920eb7a70/static/katex.less#L18.
         // It's dangerous to resize labels, since they're deliberately
         // positioned relative to their background images.
-        .graphie-label .katex {
+        .graphie-label .katex,
+        .graphie-label mjx-container {
             font-size: 1.21em;
             line-height: 1.2;
         }

package/src/styles/widgets/interactive-graph.less

@@ -41,7 +41,7 @@
         border-radius: 5px;
         bottom: 50px;
 
-        .katex {
+        .katex, mjx-container {
             color: @kaGreen !important;
         }
 
@@ -55,7 +55,8 @@
         text-align: center;
     }
 
-    .graphie-label .katex {
+    .graphie-label .katex,
+    .graphie-label mjx-container {
         color: inherit !important;
     }
 }

package/src/styles/widgets/label-image.less

@@ -22,7 +22,7 @@
         .perseus-block-math {
             padding: 0;
 
-            .katex {
+            .katex, mjx-container {
                 font-size: initial !important;
                 line-height: initial !important;
             }

package/src/styles/widgets/passage.less

@@ -66,7 +66,7 @@
             }
         }
     }
-    .katex {
+    .katex, mjx-container {
         line-height: @line-height - 2;
     }
 

package/src/styles/widgets/plotter.less

@@ -22,7 +22,8 @@
         border: solid 0.5px @gray76;
         border-radius: 4px;
 
-        .graphie-label .katex {
+        .graphie-label .katex,
+        .graphie-label mjx-container {
             color: @gray41;
         }
     }

package/src/types.ts

@@ -179,15 +179,18 @@ export type APIOptions = Readonly<{
     // Function that takes dimensions and returns a React component
     // to display while an image is loading
     imagePreloader?: (dimensions: Dimensions) => React.ReactNode;
-    // Function that takes an object argument. The object should
-    // include type and id, both strings, at least and can optionally
-    // include a boolean "correct" value. This is used for keeping
-    // track of widget interactions.
-    trackInteraction?: (args: {
-        type: string;
-        id: string;
-        correct?: boolean;
-    }) => void;
+    // A function that is called when the user has interacted with a widget. It
+    // also includes any extra parameters that the originating widget provided.
+    // This is used for keeping track of widget interactions.
+    trackInteraction?: (
+        args: {
+            // The widget type that this interaction originates from
+            type: string;
+            // The widget id that this interaction originates from
+            id: string;
+            correct?: boolean;
+        } & Record<string, unknown>,
+    ) => void;
     // A boolean that indicates whether or not a custom keypad is
     // being used.  For mobile web this will be the ProvidedKeypad
     // component.  In this situation we use the MathInput component
@@ -375,7 +378,12 @@ export type LinterContextProps = {
     // additional properties can be added to the context by widgets
 };
 
-export type Tracking = "" | "all";
+export type Tracking =
+    // Track interactions once
+    | ""
+    // Track all interactions
+    | "all";
+
 export type Alignment =
     | "default"
     | "block"

package/src/widgets/sequence.tsx

@@ -1,36 +1,33 @@
-import {
-    linterContextProps,
-    linterContextDefault,
-} from "@khanacademy/perseus-linter";
-import PropTypes from "prop-types";
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as React from "react";
 import _ from "underscore";
 
 import InlineIcon from "../components/inline-icon";
 import {iconOk} from "../icon-paths";
 import * as Changeable from "../mixins/changeable";
-import {ApiOptions} from "../perseus-api";
+import {PerseusSequenceWidgetOptions} from "../perseus-types";
 import Renderer from "../renderer";
 import Util from "../util";
 
-import type {WidgetExports} from "../types";
-
-class Sequence extends React.Component<any, any> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        apiOptions: ApiOptions.propTypes,
-        json: PropTypes.arrayOf(
-            PropTypes.shape({
-                content: PropTypes.string,
-                images: PropTypes.objectOf(PropTypes.any),
-                widgets: PropTypes.objectOf(PropTypes.any),
-            }),
-        ),
-        trackInteraction: PropTypes.func.isRequired,
-        linterContext: linterContextProps,
-    };
+import type {WidgetExports, WidgetProps} from "../types";
+
+type Rubric = PerseusSequenceWidgetOptions;
+
+type ExternalProps = WidgetProps<PerseusSequenceWidgetOptions, Rubric>;
+
+type Props = ExternalProps;
+
+type DefaultProps = {
+    json: Props["json"];
+    linterContext: Props["linterContext"];
+};
+
+type State = {
+    visible: number;
+};
 
-    static defaultProps: any = {
+class Sequence extends React.Component<Props, State> {
+    static defaultProps: DefaultProps = {
         json: [
             {
                 content: "",
@@ -41,7 +38,7 @@ class Sequence extends React.Component<any, any> {
         linterContext: linterContextDefault,
     };
 
-    state: any = {
+    state = {
         visible: 1,
     };