@khanacademy/perseus 6.5.0 → 6.6.0

package/dist/interaction-tracker.d.ts

@@ -1,15 +1,15 @@
+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: any, // original 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
@@ -18,6 +18,6 @@ declare class InteractionTracker {
      * @param extraData Any extra data to track about the event.
      * @private
      */
-    _track: (extraData: unknown) => void;
+    _track: (extraData: Record<string, any>) => void;
 }
 export default InteractionTracker;

package/dist/interaction-tracker.js.flow

@@ -4,21 +4,23 @@
  * Flowgen v1.21.0
  * @flow
  */
+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: any,
+    trackApi: $PropertyType<APIOptions, "trackInteraction">,
     widgetType: string,
     widgetID: string,
-    setting: "" | "all"
+    setting: Tracking
   ): this;
 
   /**
@@ -28,6 +30,6 @@ declare class InteractionTracker {
    * @param extraData Any extra data to track about the event.
    * @private
    */
-  _track: (extraData: mixed) => void;
+  _track: (extraData: { [key: string]: any }) => void;
 }
 declare export default typeof InteractionTracker;

package/dist/perseus-api.d.ts

@@ -78,7 +78,11 @@ export declare const ApiOptions: {
             Link: React.ComponentType<any>;
         } | undefined;
         imagePreloader?: ((dimensions: import("./types").Dimensions) => React.ReactNode) | undefined;
-        trackInteraction?: (() => unknown) | undefined;
+        trackInteraction?: ((args: {
+            type: string;
+            id: string;
+            correct?: boolean | undefined;
+        } & Record<string, unknown>) => void) | undefined;
         customKeypad?: boolean | undefined;
         nativeKeypadProxy?: (() => unknown) | undefined;
         isMobile?: boolean | undefined;

package/dist/perseus-api.js.flow

@@ -78,7 +78,16 @@ declare export var ApiOptions: {|
       imagePreloader?:
         | ((dimensions: $Flowgen$Import$_2e__2f_types.Dimensions) => React.Node)
         | void,
-      trackInteraction?: (() => mixed) | void,
+      trackInteraction?:
+        | ((args: {|
+            ...{|
+              type: string,
+              id: string,
+              correct?: boolean | void,
+            |},
+            ...{ [key: string]: mixed },
+          |}) => void)
+        | void,
       customKeypad?: boolean | void,
       nativeKeypadProxy?: (() => mixed) | void,
       isMobile?: boolean | void,

package/dist/server-item-renderer.js.flow

@@ -112,8 +112,8 @@ declare export class ServerItemRenderer
   setAssetStatus: (assetKey: string, status: boolean) => void;
   render(): React.Node;
 }
-declare var ref: React.ForwardRefExoticComponent<{|
-  ...$Diff<
+declare var ref: React.AbstractComponent<
+  $Diff<
     {|
       ...KeypadProps,
       ...{|
@@ -131,6 +131,6 @@ declare var ref: React.ForwardRefExoticComponent<{|
     |},
     { onRendered: any }
   >,
-  ...React.RefAttributes<ServerItemRenderer>,
-|}>;
+  ServerItemRenderer
+>;
 declare export default typeof ref;

package/dist/types.d.ts

@@ -108,7 +108,11 @@ export type APIOptions = Readonly<{
         Link: React.ComponentType<any>;
     };
     imagePreloader?: (dimensions: Dimensions) => React.ReactNode;
-    trackInteraction?: () => unknown;
+    trackInteraction?: (args: {
+        type: string;
+        id: string;
+        correct?: boolean;
+    } & Record<string, unknown>) => void;
     customKeypad?: boolean;
     nativeKeypadProxy?: () => unknown;
     isMobile?: boolean;

package/dist/types.js.flow

@@ -132,7 +132,14 @@ export type APIOptions = $ReadOnly<{|
     Link: React.ComponentType<any>,
   |},
   imagePreloader?: (dimensions: Dimensions) => React.Node,
-  trackInteraction?: () => mixed,
+  trackInteraction?: (args: {|
+    ...{|
+      type: string,
+      id: string,
+      correct?: boolean,
+    |},
+    ...{ [key: string]: mixed },
+  |}) => void,
   customKeypad?: boolean,
   nativeKeypadProxy?: () => mixed,
   isMobile?: boolean,

package/dist/widgets/radio/choice.js.flow

@@ -25,8 +25,5 @@ export type ChoiceProps = {|
     crossedOut: boolean,
   |}) => void,
 |};
-declare var _default: React.ForwardRefExoticComponent<{|
-  ...ChoiceProps,
-  ...React.RefAttributes<HTMLButtonElement>,
-|}>;
+declare var _default: React.AbstractComponent<ChoiceProps, HTMLButtonElement>;
 declare export default typeof _default;

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.0",
+    "version": "6.6.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,3 +1,5 @@
+import type {APIOptions, Tracking} from "./types";
+
 /**
  * This alternate version of `.track` does nothing as an optimization.
  */
@@ -10,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.
@@ -19,10 +21,10 @@ class InteractionTracker {
     widgetType: string;
 
     constructor(
-        trackApi: any, // original apiOptions.trackInteraction
+        trackApi: APIOptions["trackInteraction"],
         widgetType: string,
         widgetID: string,
-        setting: "" | "all", // "" means track once
+        setting: Tracking,
     ) {
         if (!trackApi) {
             this.track = _noop;
@@ -44,7 +46,7 @@ class InteractionTracker {
      * @param extraData Any extra data to track about the event.
      * @private
      */
-    _track: (extraData: unknown) => void = (extraData: unknown) => {
+    _track: (extraData: Record<string, any>) => void = (extraData) => {
         if (this._tracked && !this.setting) {
             return;
         }
@@ -52,7 +54,6 @@ class InteractionTracker {
         this.trackApi({
             type: this.widgetType,
             id: this.widgetID,
-            // @ts-expect-error [FEI-5003] - TS2698 - Spread types may only be created from object types.
             ...extraData,
         });
     };

package/src/styles/widgets/passage.less

@@ -1,4 +1,6 @@
-.perseus-widget-passage-container {
+// this selector increases specificity to beat out other stylesheets while still
+//   allowing for more than one passage widget on a page
+[id^="perseus-widget-passage-container"] {
     // NOTE(mdr): This is similar to Wonder Blocks "BodySerif" typesetting, but
     //     not quite: it's a bit smaller, for consistency with the sorta-small
     //     type styles in rest of the Perseus.
@@ -8,7 +10,7 @@
     @font-size: 16px;
     @line-height: 20px;
 
-    .perseus-widget-passage {
+    [id^="perseus-widget-passage"] {
         line-height: @line-height;
         margin: 22px;
         position: relative;
@@ -31,35 +33,43 @@
         //     switch to the BodySerif component (TP-3112), and remove this
         //     special font-family rule.
         div.paragraph {
-            font-family: "minion-pro", KaTeX_Main, Times, "Times New Roman", serif;
+            font-family: "minion-pro", KaTeX_Main, Times, "Times New Roman",
+                serif;
         }
-    }
-    .katex {
-        line-height: @line-height - 2;
-    }
-    .passage-title div.paragraph {
-        font-family: "Noto Serif", serif;
-        font-weight: 700;
-        font-size: 20px;
-        line-height: 22px;
 
-        margin: 0 0 10px;
-    }
+        .passage-title div.paragraph {
+            font-family: "Noto Serif", serif;
+            font-weight: 700;
+            font-size: 20px;
+            line-height: 22px;
 
-    // note(matthewc): If you need to change any of this,
-    // check that line numbers line up correctly.
-    // The margin should probably be 0 or the line height
-    .passage-text div.paragraph {
-        font-weight: 400;
-        font-size: @font-size;
-        line-height: @line-height;
-        text-indent: 20px;
-        margin: 0;
+            margin: 0 0 10px;
+        }
 
-        span {
-            text-indent: 0;
+        // note(matthewc): If you need to change any of this,
+        // check that line numbers line up correctly.
+        // The margin should probably be 0 or the line height
+        .passage-text div.paragraph {
+            font-weight: 400;
+            font-size: @font-size;
+            line-height: @line-height;
+            text-indent: 20px;
+            margin: 0;
+
+            span {
+                text-indent: 0;
+            }
+
+            em {
+                // prevents italicized text from disrupting the line height
+                line-height: 0;
+            }
         }
     }
+    .katex {
+        line-height: @line-height - 2;
+    }
+
     .footnotes {
         margin-top: 22px;
         div.paragraph {
@@ -68,10 +78,10 @@
         }
     }
     .perseus-highlight {
-        background-color: #FFFABE;
+        background-color: #fffabe;
     }
     .perseus-review-highlight {
-        background-color: #EEE7B2;
+        background-color: #eee7b2;
     }
     .perseus-passage-square-label,
     .perseus-passage-circle-label,
@@ -138,7 +148,6 @@
 }
 
 .perseus-widget-passage-editor {
-
     .perseus-single-editor {
         font-family: Times, "Times New Roman", serif;
 

package/src/types.ts

@@ -179,11 +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?: () => unknown;
+    // 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
@@ -371,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"
@@ -462,6 +474,10 @@ export type WidgetProps<RenderProps, Rubric> = RenderProps & {
     findWidgets: (arg1: FilterCriterion) => ReadonlyArray<Widget>;
     reviewModeRubric: Rubric;
     onChange: ChangeHandler;
+    // This is slightly different from the `trackInteraction` function in
+    // APIOptions. This provides the widget an easy way to notify the renderer
+    // of an interaction. The Renderer then enriches the data provided with the
+    // widget's id and type before calling APIOptions.trackInteraction.
     trackInteraction: (extraData?: any) => void;
     isLastUsedWidget: boolean;
     // provided by widget-container.jsx#render()

package/src/widgets/__stories__/passage-ref.stories.tsx

@@ -1,9 +1,10 @@
+import {View} from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
 import {question1, question2} from "../__testdata__/passage-ref.testdata";
 
-type StoryArgs = Record<any, any>;
+import type {PerseusRenderer} from "../../perseus-types";
 
 type Story = {
     title: string;
@@ -13,10 +14,20 @@ export default {
     title: "Perseus/Widgets/PassageRef",
 } as Story;
 
-export const ShortPassage = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
-};
+const Template = (props: {question: PerseusRenderer}): React.ReactElement => (
+    <View
+        style={{
+            paddingLeft: 20,
+        }}
+    >
+        <RendererWithDebugUI question={props.question} />
+    </View>
+);
 
-export const LongPassage = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question2} />;
-};
+export const ShortPassage = (): React.ReactElement => (
+    <Template question={question1} />
+);
+
+export const LongPassage = (): React.ReactElement => (
+    <Template question={question2} />
+);

package/src/widgets/__stories__/passage.stories.tsx

@@ -1,3 +1,4 @@
+import {View} from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
@@ -7,20 +8,32 @@ import {
     question3,
 } from "../__testdata__/passage.testdata";
 
+import type {PerseusRenderer} from "../../perseus-types";
+
 export default {
     title: "Perseus/Widgets/Passage",
 };
 
 type StoryArgs = Record<any, any>;
 
+const Template = (props: {question: PerseusRenderer}): React.ReactElement => (
+    <View
+        style={{
+            paddingLeft: 20,
+        }}
+    >
+        <RendererWithDebugUI question={props.question} />
+    </View>
+);
+
 export const SimpleQuestion = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
+    return <Template question={question1} />;
 };
 
 export const MultiPassageQuestion = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question2} />;
+    return <Template question={question2} />;
 };
 
 export const SingleNumberedPassage = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question3} />;
+    return <Template question={question3} />;
 };