@khanacademy/perseus 8.0.0 → 9.0.0

package/dist/widgets/graded-group.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { PerseusGradedGroupWidgetOptions } from "../perseus-types";
-import type { WidgetProps } from "../types";
+import type { TrackingGradedGroupExtraArguments, WidgetProps } from "../types";
 import type { ANSWER_BAR_STATES } from "./graded-group-answer-bar";
 declare const GRADING_STATUSES: {
     readonly ungraded: "ungraded";
@@ -10,7 +10,7 @@ declare const GRADING_STATUSES: {
 };
 type Rubric = PerseusGradedGroupWidgetOptions;
 type RenderProps = PerseusGradedGroupWidgetOptions;
-type Props = WidgetProps<RenderProps, Rubric> & {
+type Props = WidgetProps<RenderProps, Rubric, TrackingGradedGroupExtraArguments> & {
     inGradedGroupSet?: boolean;
     onNextQuestion?: () => unknown;
 };

package/dist/widgets/sequence.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import type { PerseusSequenceWidgetOptions } from "../perseus-types";
-import type { WidgetProps } from "../types";
+import type { TrackingSequenceExtraArguments, WidgetProps } from "../types";
 type Rubric = PerseusSequenceWidgetOptions;
-type ExternalProps = WidgetProps<PerseusSequenceWidgetOptions, Rubric>;
+type ExternalProps = WidgetProps<PerseusSequenceWidgetOptions, Rubric, TrackingSequenceExtraArguments>;
 type Props = ExternalProps;
 type DefaultProps = {
     json: Props["json"];

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "8.0.0",
+    "version": "9.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,8 +23,8 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.2",
-        "@khanacademy/math-input": "^9.0.0",
-        "@khanacademy/perseus-core": "0.1.1",
+        "@khanacademy/math-input": "^10.0.0",
+        "@khanacademy/perseus-core": "0.2.0",
         "@khanacademy/perseus-linter": "^0.3.2",
         "@khanacademy/pure-markdown": "^0.2.4",
         "@khanacademy/simple-markdown": "^0.10.0"

package/src/__stories__/article-renderer.stories.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 
-import {passageArticle} from "../__testdata__/article-renderer.testdata";
+import {storybookDependenciesV2} from "../../../../testing/test-dependencies";
+import {
+    singleSectionArticle,
+    multiSectionArticle,
+    passageArticle,
+} from "../__testdata__/article-renderer.testdata";
 import ArticleRenderer from "../article-renderer";
 
 export default {
@@ -12,6 +17,34 @@ export default {
     },
 };
 
+export const ASingleSectionArticle = (args: {
+    useNewStyles;
+}): React.ReactElement => {
+    return (
+        <ArticleRenderer
+            json={singleSectionArticle}
+            dependencies={storybookDependenciesV2}
+            useNewStyles={args.useNewStyles}
+        />
+    );
+};
+
+export const BMultiSectionArticle = (args: {
+    useNewStyles;
+}): React.ReactElement => {
+    return (
+        <ArticleRenderer
+            json={multiSectionArticle}
+            dependencies={storybookDependenciesV2}
+            useNewStyles={args.useNewStyles}
+        />
+    );
+};
+
 export const PassageArticle = ({useNewStyles}): any => (
-    <ArticleRenderer json={passageArticle} useNewStyles={useNewStyles} />
+    <ArticleRenderer
+        json={passageArticle}
+        dependencies={storybookDependenciesV2}
+        useNewStyles={useNewStyles}
+    />
 );

package/src/__testdata__/article-renderer.testdata.ts

@@ -1,5 +1,37 @@
 import type {PerseusRenderer} from "../perseus-types";
 
+export const singleSectionArticle: PerseusRenderer = {
+    content:
+        "[[☃ image 2]]\n\n**Part A:** Return to the main characters from your three favorite films. \n\n- What was one important choice they had to make where the stakes were **high**?\n\n-  What were the **stakes**?\n\n- Can you identify them as internal, external or philosophical?\n\n**Part B:** Think about a difficult choice you had to make in your own life.  What was at stake? \n\n**Part C:** Return to one of the obstacles your character might face from the previous exercise. Now think of the **choice** this obstacle forces them to make. Answer the following:\n\n- What are the possible stakes of this choice?\n\n- Can you come up with an internal, external or philosophical stake which applies to this choice? \n",
+    images: {},
+    widgets: {
+        "image 2": {
+            type: "image",
+            alignment: "block",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                title: "",
+                range: [
+                    [0, 10],
+                    [0, 10],
+                ],
+                box: [1258, 703],
+                backgroundImage: {
+                    url: "https://ka-perseus-images.s3.amazonaws.com/b08029bc1786fbe54468a2ddc96aaa20be7a663a.png",
+                    width: 1258,
+                    height: 703,
+                },
+                labels: [],
+                alt: 'A scene from Pixar\'s film "Toy Story 3" where the characters are swimming in a sea of trash and look very afraid.',
+                caption: "",
+            },
+            version: {major: 0, minor: 0},
+        },
+    },
+};
+
 export const passageArticle: PerseusRenderer = {
     content:
         "###Group/Pair Activity \n\nThis passage is adapted from Ed Yong, “Turtles Use the Earth’s Magnetic Field as Global GPS.” ©2011 by Kalmbach Publishing Co.\n\n[[☃ passage 1]]\n\n**Question 9**\n\nThe passage most strongly suggests that Adelita used which of the following to navigate her 9,000-mile journey?\n\nA) The current of the North Atlantic gyre\n\nB) Cues from electromagnetic coils designed by Putman and Lohmann\n\nC) The inclination and intensity of Earth’s magnetic field\n\nD) A simulated “magnetic signature” configured by Lohmann\n\n10) Which choice provides the best evidence for the answer to the previous question?\n\nA) Lines 1–2 (“In 1996...way”)\n\nB) Lines 20–21 (“Using...surface”)\n\nC) Lines 36–37 (“In the wild...stars”)\n\nD) Lines 43–45 (“Neither...it is”)\n\n**Question 12** \n\nBased on the passage, which choice best describes the relationship between Putman’s and Lohmann’s research?\n\nA) Putman’s research contradicts Lohmann’s.\n\nB) Putman’s research builds on Lohmann’s.\n\nC) Lohmann’s research confirms Putman’s.\n\nD) Lohmann’s research corrects Putman’s.",
@@ -25,3 +57,42 @@ export const passageArticle: PerseusRenderer = {
         },
     },
 };
+
+export const multiSectionArticle: ReadonlyArray<PerseusRenderer> = [
+    {
+        content:
+            "## What is a matrix?\n\nA matrix is a rectangular array of numbers arranged in rows and columns.\n\nMatrices can be useful for organizing and manipulating data. They can also be used as a tool to help solve systems of equations.",
+        images: {},
+        widgets: {},
+    },
+    {
+        content:
+            "## How do we multiply a matrix by a scalar?\n\nTo multiply a matrix by a scalar, we multiply each entry in the matrix by the scalar. For example, if \n\n$A = \\begin{bmatrix} \n2 & 3 \\\\\n1 & 4 \\\\\n\\end{bmatrix}$\n\nand we want to multiply $A$ by $2$, we can multiply each entry by $2$ to get:\n\n$2A = \\begin{bmatrix} \n4 & 6 \\\\\n2 & 8 \\\\\n\\end{bmatrix}$",
+        images: {},
+        widgets: {},
+    },
+    {
+        content:
+            "## How do we add or subtract two matrices?\n\nTo add or subtract two matrices, we add or subtract corresponding entries. So if \n\n$A = \\begin{bmatrix} \n2 & 3 \\\\\n1 & 4 \\\\\n\\end{bmatrix}$ \n\nand \n\n$B = \\begin{bmatrix} \n5 & 2 \\\\\n3 & 1 \\\\\n\\end{bmatrix}$,\n\nthen \n\n$A+B = \\begin{bmatrix} \n7 & 5 \\\\\n4 & 5 \\\\\n\\end{bmatrix}$\n\nand \n\n$A-B = \\begin{bmatrix} \n-3 & 1 \\\\\n-2 & 3 \\\\\n\\end{bmatrix}$",
+        images: {},
+        widgets: {},
+    },
+    {
+        content:
+            "## How do we multiply two matrices together?\n\nThis one's a bit trickier. To multiply two matrices together, we take the dot product of the rows from the first matrix with the columns from the second matrix. The result is a new matrix. For example, if \n\n$A = \\begin{bmatrix} \n2 & 3 \\\\\n1 & 4 \\\\\n\\end{bmatrix}$ \n\nand \n\n$B = \\begin{bmatrix} \n5 & 2 \\\\\n3 & 1 \\\\\n\\end{bmatrix}$,\n\nthen \n\n$AB = \\begin{bmatrix} \n2\\cdot5+3\\cdot3 & 2\\cdot2+3\\cdot1 \\\\\n1\\cdot5+4\\cdot3 & 1\\cdot2+4\\cdot1 \\\\\n\\end{bmatrix} = \\begin{bmatrix} \n19 & 7 \\\\\n17 & 6 \\\\\n\\end{bmatrix}.$",
+        images: {},
+        widgets: {},
+    },
+    {
+        content:
+            "## What can we do with the inverse of a matrix?\n\nFinding the inverse of a matrix can be useful for solving linear systems of equations. If $A$ is the matrix representing the system of equations, and $b$ is the vector of solutions, then $Ax=b$. If we can find the inverse of $A$, we can multiply both sides of the equation by it to isolate $x$:\n\n$A^{-1}Ax=A^{-1}b \\Rightarrow x=A^{-1}b.$",
+        images: {},
+        widgets: {},
+    },
+    {
+        content:
+            "## Where are matrices used in the real world?\n\nMatrices have tons of real-world applications! They can be used in computer graphics to perform transformations on images, in physics to model physical systems, and in statistics to analyze data, just to name a few.",
+        images: {},
+        widgets: {},
+    },
+];

package/src/__tests__/item-renderer.test.tsx

@@ -4,7 +4,10 @@ import userEvent from "@testing-library/user-event";
 import * as React from "react";
 import "@testing-library/jest-dom"; // Imports custom matchers
 
-import {testDependencies} from "../../../../testing/test-dependencies";
+import {
+    testDependencies,
+    testDependenciesV2,
+} from "../../../../testing/test-dependencies";
 import {
     itemWithInput,
     labelImageItem,
@@ -76,6 +79,7 @@ export const renderQuestion = (
                 reviewMode={false}
                 savedState=""
                 controlPeripherals={false}
+                dependencies={testDependenciesV2}
                 {...optionalProps}
             />
             {/* The ItemRenderer _requires_ two divs: a work area and hints
@@ -132,6 +136,13 @@ describe("item renderer", () => {
     });
 
     beforeEach(() => {
+        // Mock ResizeObserver used by the mobile keypad
+        window.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn(),
+        }));
+
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,
         );

package/src/__tests__/server-item-renderer.test.tsx

@@ -4,7 +4,10 @@ import userEvent from "@testing-library/user-event";
 import * as React from "react";
 import "@testing-library/jest-dom"; // Imports custom matchers
 
-import {testDependencies} from "../../../../testing/test-dependencies";
+import {
+    testDependencies,
+    testDependenciesV2,
+} from "../../../../testing/test-dependencies";
 import {
     itemWithInput,
     mockedItem,
@@ -51,6 +54,7 @@ const renderQuestion = (
                 item={question}
                 problemNum={0}
                 reviewMode={false}
+                dependencies={testDependenciesV2}
                 {...optionalProps}
             />
         </RenderStateRoot>,
@@ -228,6 +232,7 @@ describe("server item renderer", () => {
                     item={itemWithInput}
                     problemNum={0}
                     reviewMode={false}
+                    dependencies={testDependenciesV2}
                 />
             </RenderStateRoot>,
         );
@@ -243,6 +248,7 @@ describe("server item renderer", () => {
                     item={itemWithInput}
                     problemNum={1} // to force componentDidUpdate
                     reviewMode={false}
+                    dependencies={testDependenciesV2}
                 />
                 ,
             </RenderStateRoot>,
@@ -272,6 +278,7 @@ describe("server item renderer", () => {
                     problemNum={0}
                     reviewMode={false}
                     onRendered={onRendered}
+                    dependencies={testDependenciesV2}
                 />
             </RenderStateRoot>,
         );
@@ -293,6 +300,7 @@ describe("server item renderer", () => {
                     problemNum={1}
                     reviewMode={false}
                     onRendered={onRendered}
+                    dependencies={testDependenciesV2}
                 />
             </RenderStateRoot>,
         );

package/src/article-renderer.tsx

@@ -7,6 +7,7 @@ import * as PerseusLinter from "@khanacademy/perseus-linter";
 import classNames from "classnames";
 import * as React from "react";
 
+import {DependenciesContext} from "./dependencies";
 import ProvideKeypad from "./mixins/provide-keypad";
 import {ClassNames as ApiClassNames, ApiOptions} from "./perseus-api";
 import Renderer from "./renderer";
@@ -14,13 +15,12 @@ import Util from "./util";
 
 import type {KeypadProps} from "./mixins/provide-keypad";
 import type {PerseusRenderer} from "./perseus-types";
-import type {APIOptions} from "./types";
+import type {APIOptions, PerseusDependenciesV2} from "./types";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
 type Props = {
     apiOptions: APIOptions;
     json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
-
     // Whether to use the new Bibliotron styles for articles
     /**
      * @deprecated Does nothing
@@ -28,6 +28,8 @@ type Props = {
     useNewStyles: boolean;
     linterContext: LinterContextProps;
     legacyPerseusLint?: ReadonlyArray<string>;
+
+    dependencies: PerseusDependenciesV2;
 } & KeypadProps;
 
 type DefaultProps = {
@@ -180,34 +182,40 @@ class ArticleRenderer extends React.Component<Props, State> {
         const sections = this._sections().map((section, i) => {
             const refForSection = `section-${i}`;
             return (
-                <div key={i} className="clearfix">
-                    <Renderer
-                        {...section}
-                        ref={refForSection}
-                        key={i}
-                        key_={i}
-                        keypadElement={this.keypadElement()}
-                        apiOptions={{
-                            ...apiOptions,
-                            onFocusChange: (newFocusPath, oldFocusPath) => {
-                                // Prefix the paths with the relevant section,
-                                // so as to allow us to distinguish between
-                                // equivalently-named inputs across Renderers.
-                                this._handleFocusChange(
-                                    newFocusPath &&
-                                        [refForSection].concat(newFocusPath),
-                                    oldFocusPath &&
-                                        [refForSection].concat(oldFocusPath),
-                                );
-                            },
-                        }}
-                        linterContext={PerseusLinter.pushContextStack(
-                            this.props.linterContext,
-                            "article",
-                        )}
-                        legacyPerseusLint={this.props.legacyPerseusLint}
-                    />
-                </div>
+                <DependenciesContext.Provider value={this.props.dependencies}>
+                    <div key={i} className="clearfix">
+                        <Renderer
+                            {...section}
+                            ref={refForSection}
+                            key={i}
+                            key_={i}
+                            keypadElement={this.keypadElement()}
+                            apiOptions={{
+                                ...apiOptions,
+                                onFocusChange: (newFocusPath, oldFocusPath) => {
+                                    // Prefix the paths with the relevant section,
+                                    // so as to allow us to distinguish between
+                                    // equivalently-named inputs across Renderers.
+                                    this._handleFocusChange(
+                                        newFocusPath &&
+                                            [refForSection].concat(
+                                                newFocusPath,
+                                            ),
+                                        oldFocusPath &&
+                                            [refForSection].concat(
+                                                oldFocusPath,
+                                            ),
+                                    );
+                                },
+                            }}
+                            linterContext={PerseusLinter.pushContextStack(
+                                this.props.linterContext,
+                                "article",
+                            )}
+                            legacyPerseusLint={this.props.legacyPerseusLint}
+                        />
+                    </div>
+                </DependenciesContext.Provider>
             );
         });
 

package/src/dependencies.ts

@@ -1,4 +1,6 @@
-import type {PerseusDependencies} from "./types";
+import * as React from "react";
+
+import type {PerseusDependencies, PerseusDependenciesV2} from "./types";
 
 let _dependencies: PerseusDependencies | null | undefined = null;
 
@@ -19,3 +21,16 @@ export const getDependencies = (): PerseusDependencies => {
         ].join("\n"),
     );
 };
+
+export const DependenciesContext = React.createContext<PerseusDependenciesV2>({
+    analytics: {onAnalyticsEvent: async () => {}},
+});
+
+/**
+ * useDependencies provides easy access to the current Perseus dependencies.
+ */
+export const useDependencies = (): PerseusDependenciesV2 => {
+    const deps = React.useContext(DependenciesContext);
+
+    return deps;
+};

package/src/interaction-tracker.ts

@@ -8,12 +8,12 @@ function _noop() {}
 /**
  * Wrapper for the trackInteraction apiOption.
  */
-class InteractionTracker {
+class InteractionTracker<T> {
     // @ts-expect-error - TS2564 - Property '_tracked' has no initializer and is not definitely assigned in the constructor.
     _tracked: boolean;
     // @ts-expect-error - TS2564 - Property 'setting' has no initializer and is not definitely assigned in the constructor.
     setting: Tracking;
-    track: (extraData?: any) => void;
+    track: (extraData?: T) => void;
     trackApi: any;
     // @ts-expect-error - TS2564 - Property 'widgetID' has no initializer and is not definitely assigned in the constructor.
     widgetID: string;
@@ -46,7 +46,7 @@ class InteractionTracker {
      * @param extraData Any extra data to track about the event.
      * @private
      */
-    _track: (extraData: Record<string, any>) => void = (extraData) => {
+    _track: (extraData: T) => void = (extraData) => {
         if (this._tracked && !this.setting) {
             return;
         }

package/src/item-renderer.tsx

@@ -6,6 +6,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import _ from "underscore";
 
+import {DependenciesContext} from "./dependencies";
 import HintsRenderer from "./hints-renderer";
 import Objective from "./interactive2/objective_";
 import ProvideKeypad from "./mixins/provide-keypad";
@@ -16,7 +17,12 @@ import reactRender from "./util/react-render";
 
 import type {KeypadProps} from "./mixins/provide-keypad";
 import type {PerseusItem} from "./perseus-types";
-import type {APIOptions, FocusPath, LinterContextProps} from "./types";
+import type {
+    APIOptions,
+    FocusPath,
+    LinterContextProps,
+    PerseusDependenciesV2,
+} from "./types";
 import type {KEScore} from "@khanacademy/perseus-core";
 
 const {mapObject} = Objective;
@@ -46,6 +52,8 @@ type Props = // These props are used by the ProvideKeypad mixin.
         savedState: any;
         linterContext: LinterContextProps;
         legacyPerseusLint?: ReadonlyArray<string>;
+
+        dependencies: PerseusDependenciesV2;
     };
 
 type DefaultProps = {
@@ -176,53 +184,59 @@ class ItemRenderer extends React.Component<Props, State> {
         // strangeness instead of relying on React's normal render() method.
         // TODO(alpert): Figure out how to clean this up somehow
         reactRender(
-            <Renderer
-                ref={(node) => {
-                    if (!node) {
-                        return;
-                    }
-                    this.questionRenderer = node;
-
-                    // NOTE(jeremy): Why don't we just pass this into the
-                    // renderer as a prop?
-                    const {answerableCallback} = apiOptions;
-                    if (answerableCallback) {
-                        const isAnswerable =
-                            this.questionRenderer.emptyWidgets().length === 0;
-                        answerableCallback(isAnswerable);
-                    }
-                }}
-                keypadElement={this.keypadElement()}
-                problemNum={this.props.problemNum}
-                onInteractWithWidget={this.handleInteractWithWidget}
-                highlightedWidgets={this.state.questionHighlightedWidgets}
-                apiOptions={apiOptions}
-                questionCompleted={this.state.questionCompleted}
-                reviewMode={this.props.reviewMode}
-                savedState={this.props.savedState}
-                linterContext={PerseusLinter.pushContextStack(
-                    this.props.linterContext,
-                    "question",
-                )}
-                {...this.props.item.question}
-                legacyPerseusLint={this.props.legacyPerseusLint}
-            />,
+            <DependenciesContext.Provider value={this.props.dependencies}>
+                <Renderer
+                    ref={(node) => {
+                        if (!node) {
+                            return;
+                        }
+                        this.questionRenderer = node;
+
+                        // NOTE(jeremy): Why don't we just pass this into the
+                        // renderer as a prop?
+                        const {answerableCallback} = apiOptions;
+                        if (answerableCallback) {
+                            const isAnswerable =
+                                this.questionRenderer.emptyWidgets().length ===
+                                0;
+                            answerableCallback(isAnswerable);
+                        }
+                    }}
+                    keypadElement={this.keypadElement()}
+                    problemNum={this.props.problemNum}
+                    onInteractWithWidget={this.handleInteractWithWidget}
+                    highlightedWidgets={this.state.questionHighlightedWidgets}
+                    apiOptions={apiOptions}
+                    questionCompleted={this.state.questionCompleted}
+                    reviewMode={this.props.reviewMode}
+                    savedState={this.props.savedState}
+                    linterContext={PerseusLinter.pushContextStack(
+                        this.props.linterContext,
+                        "question",
+                    )}
+                    {...this.props.item.question}
+                    legacyPerseusLint={this.props.legacyPerseusLint}
+                />
+            </DependenciesContext.Provider>,
             // @ts-expect-error - TS2345 - Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
             workArea,
         );
 
         reactRender(
-            <HintsRenderer
-                ref={(node) => (this.hintsRenderer = node)}
-                hints={this.props.item.hints}
-                hintsVisible={this.state.hintsVisible}
-                // @ts-expect-error - TS2769 - No overload matches this call.
-                apiOptions={apiOptions}
-                linterContext={PerseusLinter.pushContextStack(
-                    this.props.linterContext,
-                    "hints",
-                )}
-            />,
+            <DependenciesContext.Provider value={this.props.dependencies}>
+                <HintsRenderer
+                    ref={(node) => (this.hintsRenderer = node)}
+                    hints={this.props.item.hints}
+                    hintsVisible={this.state.hintsVisible}
+                    // @ts-expect-error - TS2769 - No overload matches this call.
+                    apiOptions={apiOptions}
+                    linterContext={PerseusLinter.pushContextStack(
+                        this.props.linterContext,
+                        "hints",
+                    )}
+                />
+            </DependenciesContext.Provider>,
+
             // @ts-expect-error - TS2345 - Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
             hintsArea,
         );
@@ -504,7 +518,11 @@ class ItemRenderer extends React.Component<Props, State> {
     }
 
     render(): React.ReactNode {
-        return <div />;
+        return (
+            <DependenciesContext.Provider value={this.props.dependencies}>
+                <div />
+            </DependenciesContext.Provider>
+        );
     }
 }
 

package/src/multi-items/__tests__/multi-renderer.test.tsx

@@ -4,7 +4,10 @@ import userEvent from "@testing-library/user-event";
 import * as React from "react";
 import "@testing-library/jest-dom"; // Imports custom mathers
 
-import {testDependencies} from "../../../../../testing/test-dependencies";
+import {
+    testDependencies,
+    testDependenciesV2,
+} from "../../../../../testing/test-dependencies";
 import MockWidgetExport from "../../__tests__/mock-widget";
 import * as Dependencies from "../../dependencies";
 import {registerAllWidgetsForTesting} from "../../util/register-all-widgets-for-testing";
@@ -50,6 +53,7 @@ const renderSimpleQuestion = (question: Item) => {
                 item={question}
                 shape={simpleQuestionShape}
                 ref={(r) => (renderer = r)}
+                dependencies={testDependenciesV2}
             >
                 {({renderers}) => <SimpleLayout renderers={renderers} />}
             </MultiRenderer>
@@ -119,6 +123,7 @@ describe("multi-item renderer", () => {
                 <MultiRenderer
                     item={question1}
                     shape={shapes.shape({broken: shapes.content})}
+                    dependencies={testDependenciesV2}
                 >
                     {({renderers}) => {
                         return <div />;

package/src/multi-items/multi-renderer.tsx

@@ -41,6 +41,7 @@ import {StyleSheet, css} from "aphrodite"; // eslint-disable-line import/no-extr
 import lens from "hubble"; // eslint-disable-line import/no-extraneous-dependencies
 import * as React from "react";
 
+import {DependenciesContext} from "../dependencies";
 import HintsRenderer from "../hints-renderer";
 import {Errors, Log} from "../logging/log";
 import Renderer from "../renderer";
@@ -50,7 +51,12 @@ import {itemToTree} from "./items";
 import {buildMapper} from "./trees";
 
 import type {Widget} from "../renderer";
-import type {APIOptions, FilterCriterion, PerseusScore} from "../types";
+import type {
+    APIOptions,
+    FilterCriterion,
+    PerseusDependenciesV2,
+    PerseusScore,
+} from "../types";
 import type {Item, ContentNode, HintNode, TagsNode} from "./item-types";
 import type {Shape, ArrayShape} from "./shape-types";
 import type {Tree} from "./tree-types";
@@ -109,6 +115,8 @@ type Props = {
     onInteractWithWidget?: (id: string) => void;
     apiOptions?: APIOptions;
     reviewMode?: boolean | null | undefined;
+
+    dependencies: PerseusDependenciesV2;
 };
 type State = {
     // We cache functions to generate renderers and refs in `rendererDataTree`,
@@ -547,9 +555,13 @@ class MultiRenderer extends React.Component<Props, State> {
 
         // Pass the renderer tree to the `children` function, which will
         // determine the actual content of this component.
-        return this.props.children({
-            renderers: this._getRenderers(),
-        });
+        return (
+            <DependenciesContext.Provider value={this.props.dependencies}>
+                {this.props.children({
+                    renderers: this._getRenderers(),
+                })}
+            </DependenciesContext.Provider>
+        );
     }
 }
 

package/src/renderer.tsx

@@ -213,7 +213,7 @@ class Renderer extends React.Component<Props, State> {
     _foundTextNodes: boolean;
     // @ts-expect-error - TS2564 - Property '_interactionTrackers' has no initializer and is not definitely assigned in the constructor.
     _interactionTrackers: {
-        [id: string]: InteractionTracker;
+        [id: string]: InteractionTracker<any>;
     };
     // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
     _isMounted: boolean;