@khanacademy/perseus 6.5.0 → 6.5.1

package/dist/interaction-tracker.d.ts

@@ -1,3 +1,4 @@
+import type { APIOptions } from "./types";
 /**
  * Wrapper for the trackInteraction apiOption.
  */
@@ -8,8 +9,7 @@ declare class InteractionTracker {
     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: "" | "all");
     /**
      * 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,6 +4,8 @@
  * Flowgen v1.21.0
  * @flow
  */
+import type { APIOptions } from "./types";
+
 /**
  * Wrapper for the trackInteraction apiOption.
  */
@@ -15,7 +17,7 @@ declare class InteractionTracker {
   widgetID: string;
   widgetType: string;
   constructor(
-    trackApi: any,
+    trackApi: $PropertyType<APIOptions, "trackInteraction">,
     widgetType: string,
     widgetID: string,
     setting: "" | "all"
@@ -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;
+        }) => void) | undefined;
         customKeypad?: boolean | undefined;
         nativeKeypadProxy?: (() => unknown) | undefined;
         isMobile?: boolean | undefined;

package/dist/perseus-api.js.flow

@@ -78,7 +78,13 @@ 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,
+          |}) => 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;
+    }) => void;
     customKeypad?: boolean;
     nativeKeypadProxy?: () => unknown;
     isMobile?: boolean;

package/dist/types.js.flow

@@ -132,7 +132,11 @@ export type APIOptions = $ReadOnly<{|
     Link: React.ComponentType<any>,
   |},
   imagePreloader?: (dimensions: Dimensions) => React.Node,
-  trackInteraction?: () => mixed,
+  trackInteraction?: (args: {|
+    type: string,
+    id: string,
+    correct?: boolean,
+  |}) => 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/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.5.1",
     "publishConfig": {
         "access": "public"
     },

package/src/interaction-tracker.ts

@@ -1,3 +1,5 @@
+import type {APIOptions} from "./types";
+
 /**
  * This alternate version of `.track` does nothing as an optimization.
  */
@@ -19,7 +21,7 @@ class InteractionTracker {
     widgetType: string;
 
     constructor(
-        trackApi: any, // original apiOptions.trackInteraction
+        trackApi: APIOptions["trackInteraction"],
         widgetType: string,
         widgetID: string,
         setting: "" | "all", // "" means track once
@@ -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

@@ -183,7 +183,11 @@ export type APIOptions = Readonly<{
     // 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;
+    trackInteraction?: (args: {
+        type: string;
+        id: string;
+        correct?: boolean;
+    }) => 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
@@ -462,6 +466,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} />;
 };

package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap

@@ -17,7 +17,7 @@ exports[`passage-ref widget should render with invalid reference 1`] = `
         >
           <div>
             <div
-              class="perseus-widget-passage-container"
+              id="perseus-widget-passage-container-"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -26,7 +26,7 @@ exports[`passage-ref widget should render with invalid reference 1`] = `
 
               </div>
               <div
-                class="perseus-widget-passage"
+                id="perseus-widget-passage-"
               >
                 <h3
                   class="perseus-sr-only"
@@ -158,7 +158,7 @@ exports[`passage-ref widget should render with multi-line reference 1`] = `
         >
           <div>
             <div
-              class="perseus-widget-passage-container"
+              id="perseus-widget-passage-container-"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -167,7 +167,7 @@ exports[`passage-ref widget should render with multi-line reference 1`] = `
 
               </div>
               <div
-                class="perseus-widget-passage"
+                id="perseus-widget-passage-"
               >
                 <h3
                   class="perseus-sr-only"
@@ -304,7 +304,7 @@ exports[`passage-ref widget should render with single-line reference 1`] = `
         >
           <div>
             <div
-              class="perseus-widget-passage-container"
+              id="perseus-widget-passage-container-"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -313,7 +313,7 @@ exports[`passage-ref widget should render with single-line reference 1`] = `
 
               </div>
               <div
-                class="perseus-widget-passage"
+                id="perseus-widget-passage-"
               >
                 <h3
                   class="perseus-sr-only"

package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap

@@ -97,7 +97,7 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
         >
           <div>
             <div
-              class="perseus-widget-passage-container"
+              id="perseus-widget-passage-container-passage-1"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -136,7 +136,7 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
                 </div>
               </div>
               <div
-                class="perseus-widget-passage"
+                id="perseus-widget-passage-passage-1"
               >
                 <h3
                   class="passage-title"
@@ -590,7 +590,7 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
         >
           <div>
             <div
-              class="perseus-widget-passage-container"
+              id="perseus-widget-passage-container-passage-2"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -626,7 +626,7 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
                 </div>
               </div>
               <div
-                class="perseus-widget-passage"
+                id="perseus-widget-passage-passage-2"
               >
                 <h3
                   class="passage-title"
@@ -956,7 +956,7 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
         >
           <div>
             <div
-              class="perseus-widget-passage-container"
+              id="perseus-widget-passage-container-passage-1"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -995,7 +995,7 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
                 </div>
               </div>
               <div
-                class="perseus-widget-passage"
+                id="perseus-widget-passage-passage-1"
               >
                 <h3
                   class="passage-title"
@@ -1449,7 +1449,7 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
         >
           <div>
             <div
-              class="perseus-widget-passage-container"
+              id="perseus-widget-passage-container-passage-2"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -1485,7 +1485,7 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
                 </div>
               </div>
               <div
-                class="perseus-widget-passage"
+                id="perseus-widget-passage-passage-2"
               >
                 <h3
                   class="passage-title"
@@ -1778,7 +1778,7 @@ exports[`passage widget should snapshot simple passage (mobile: false) 1`] = `
         >
           <div>
             <div
-              class="perseus-widget-passage-container"
+              id="perseus-widget-passage-container-"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -1787,7 +1787,7 @@ exports[`passage widget should snapshot simple passage (mobile: false) 1`] = `
 
               </div>
               <div
-                class="perseus-widget-passage"
+                id="perseus-widget-passage-"
               >
                 <h3
                   class="perseus-sr-only"
@@ -1875,7 +1875,7 @@ exports[`passage widget should snapshot simple passage (mobile: true) 1`] = `
         >
           <div>
             <div
-              class="perseus-widget-passage-container"
+              id="perseus-widget-passage-container-"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -1884,7 +1884,7 @@ exports[`passage widget should snapshot simple passage (mobile: true) 1`] = `
 
               </div>
               <div
-                class="perseus-widget-passage"
+                id="perseus-widget-passage-"
               >
                 <h3
                   class="perseus-sr-only"

package/src/widgets/passage.tsx

@@ -509,12 +509,13 @@ export class Passage extends React.Component<PassageProps, PassageState> {
         );
         // Check if the title has any non-empty text in it.
         const hasTitle = /\S/.test(this.props.passageTitle);
+        const joinedTitle = joinString(this.props.passageTitle);
 
         return (
             <div>
-                <div className="perseus-widget-passage-container">
+                <div id={"perseus-widget-passage-container" + joinedTitle}>
                     {this._renderInstructions(parseState)}
-                    <div className="perseus-widget-passage">
+                    <div id={"perseus-widget-passage" + joinedTitle}>
                         {hasTitle && (
                             <h3 className="passage-title">
                                 <Renderer
@@ -567,6 +568,16 @@ export class Passage extends React.Component<PassageProps, PassageState> {
     }
 }
 
+// That's All, Folks! => -thats-all-folks
+const joinString = (title: string): string =>
+    "-" +
+    title
+        .toLowerCase()
+        .replace(/[^\w\s]/gi, "")
+        .trim()
+        .split(/\s+/)
+        .join("-");
+
 export default {
     name: "passage",
     displayName: "Passage (SAT only)",