@khanacademy/perseus 8.0.0 → 10.0.0

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__/renderer.test.tsx

@@ -149,7 +149,6 @@ describe("renderer", () => {
             mockRunLinter.mockClear();
 
             // Act
-            // @ts-expect-error - TS2345 - Argument of type '{ problemNum: number; linterContext: { readonly contentType: "exercise"; readonly highlightLint: true; readonly paths: readonly []; readonly stack: readonly []; }; }' is not assignable to parameter of type 'Pick<{}, never> & InexactPartial<Pick<{}, never>> & InexactPartial<Pick<DefaultProps, keyof DefaultProps>>'.
             rerender(question1, {...extraProps, problemNum: 1});
 
             // Assert
@@ -1334,7 +1333,6 @@ describe("renderer", () => {
                     },
                 },
                 {},
-                // @ts-expect-error - TS2345 - Argument of type '{ problemNum: number; }' is not assignable to parameter of type 'Pick<{}, never> & InexactPartial<Pick<{}, never>> & InexactPartial<Pick<DefaultProps, keyof DefaultProps>>'.
                 {problemNum: 1},
             );
 

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,
@@ -25,6 +28,7 @@ import MockWidgetExport from "./mock-widget";
 import type {PerseusItem} from "../perseus-types";
 import type {APIOptions} from "../types";
 import type {MockAssetLoadingWidget} from "./mock-asset-loading-widget";
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
 // This looks alot like `widgets/__tests__/renderQuestion.jsx', except we use
 // the ServerItemRenderer instead of Renderer
@@ -32,10 +36,7 @@ const renderQuestion = (
     question: PerseusItem,
     apiOptions: APIOptions = Object.freeze({}),
     optionalProps: Partial<
-        JSX.LibraryManagedAttributes<
-            typeof WrappedServerItemRenderer,
-            React.ComponentProps<typeof WrappedServerItemRenderer>
-        >
+        PropsFor<typeof WrappedServerItemRenderer>
     > = Object.freeze({}),
 ): {
     container: HTMLElement;
@@ -51,6 +52,7 @@ const renderQuestion = (
                 item={question}
                 problemNum={0}
                 reviewMode={false}
+                dependencies={testDependenciesV2}
                 {...optionalProps}
             />
         </RenderStateRoot>,
@@ -228,6 +230,7 @@ describe("server item renderer", () => {
                     item={itemWithInput}
                     problemNum={0}
                     reviewMode={false}
+                    dependencies={testDependenciesV2}
                 />
             </RenderStateRoot>,
         );
@@ -243,6 +246,7 @@ describe("server item renderer", () => {
                     item={itemWithInput}
                     problemNum={1} // to force componentDidUpdate
                     reviewMode={false}
+                    dependencies={testDependenciesV2}
                 />
                 ,
             </RenderStateRoot>,
@@ -272,6 +276,7 @@ describe("server item renderer", () => {
                     problemNum={0}
                     reviewMode={false}
                     onRendered={onRendered}
+                    dependencies={testDependenciesV2}
                 />
             </RenderStateRoot>,
         );
@@ -293,6 +298,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/components/info-tip.tsx

@@ -9,10 +9,9 @@ import * as React from "react";
 
 import ReactComponentsInfoTip from "./info-tip/info-tip";
 
-type Props = JSX.LibraryManagedAttributes<
-    typeof ReactComponentsInfoTip,
-    React.ComponentProps<typeof ReactComponentsInfoTip>
->;
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
+
+type Props = PropsFor<typeof ReactComponentsInfoTip>;
 
 type State = {
     didMount: boolean;

package/src/components/input-with-examples.tsx

@@ -12,7 +12,7 @@ import MathOutput from "./math-output";
 import TextInput from "./text-input";
 import Tooltip, {HorizontalDirection, VerticalDirection} from "./tooltip";
 
-import type {LinterContextProps} from "../types";
+import type {LinterContextProps} from "@khanacademy/perseus-linter";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 const {captureScratchpadTouchStart} = Util;

package/src/components/sortable.tsx

@@ -13,8 +13,8 @@ import {ClassNames as ApiClassNames} from "../perseus-api";
 import Renderer from "../renderer";
 import Util from "../util";
 
-import type {LinterContextProps} from "../types";
 import type {Position} from "../util";
+import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
 export enum Layout {
     HORIZONTAL = "horizontal",

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/hint-renderer.tsx

@@ -8,7 +8,8 @@ import Renderer from "./renderer";
 import {baseUnitPx, hintBorderWidth, kaGreen, gray97} from "./styles/constants";
 import mediaQueries from "./styles/media-queries";
 
-import type {APIOptions, LinterContextProps} from "./types";
+import type {APIOptions} from "./types";
+import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
 type Props = {
     apiOptions: APIOptions;

package/src/hints-renderer.tsx

@@ -22,12 +22,9 @@ import Util from "./util";
 
 import type Renderer from "./renderer";
 import type {APIOptionsWithDefaults} from "./types";
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
-type Props = JSX.LibraryManagedAttributes<
-    Renderer,
-    // @ts-expect-error - TS2344 - Type 'Renderer' does not satisfy the constraint 'keyof IntrinsicElements | JSXElementConstructor<any>'.
-    React.ComponentProps<typeof Renderer>
-> & {
+type Props = PropsFor<typeof Renderer> & {
     className?: string;
     // note (mcurtis): I think this should be $ReadOnlyArray<PerseusRenderer>,
     // but things spiraled out of control when I tried to change it
@@ -36,7 +33,6 @@ type Props = JSX.LibraryManagedAttributes<
 };
 
 type DefaultProps = {
-    // @ts-expect-error - TS2339 - Property 'linterContext' does not exist on type '{ className?: string | undefined; hints: readonly any[]; hintsVisible?: number | undefined; }'.
     linterContext: Props["linterContext"];
 };
 
@@ -126,7 +122,6 @@ class HintsRenderer extends React.Component<Props, State> {
         // false in hints.
         return {
             ...ApiOptions.defaults,
-            // @ts-expect-error - TS2339 - Property 'apiOptions' does not exist on type 'Readonly<{ className?: string | undefined; hints: readonly any[]; hintsVisible?: number | undefined; }> & Readonly<{ children?: ReactNode; }>'.
             ...this.props.apiOptions,
             readOnly: false,
         };
@@ -196,10 +191,8 @@ class HintsRenderer extends React.Component<Props, State> {
                     ref={"hintRenderer" + i}
                     key={"hintRenderer" + i}
                     apiOptions={apiOptions}
-                    // @ts-expect-error - TS2339 - Property 'findExternalWidgets' does not exist on type 'Readonly<{ className?: string | undefined; hints: readonly any[]; hintsVisible?: number | undefined; }> & Readonly<{ children?: ReactNode; }>'.
                     findExternalWidgets={this.props.findExternalWidgets}
                     linterContext={PerseusLinter.pushContextStack(
-                        // @ts-expect-error - TS2339 - Property 'linterContext' does not exist on type 'Readonly<{ className?: string | undefined; hints: readonly any[]; hintsVisible?: number | undefined; }> & Readonly<{ children?: ReactNode; }>'.
                         this.props.linterContext,
                         "hints[" + i + "]",
                     )}

package/src/index.ts

@@ -109,7 +109,6 @@ export type {
     ImageUploader,
     JiptLabelStore,
     JiptRenderer,
-    LinterContextProps,
     PerseusDependencies,
     PerseusScore,
     Version,

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,8 +17,9 @@ 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, PerseusDependenciesV2} from "./types";
 import type {KEScore} from "@khanacademy/perseus-core";
+import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
 const {mapObject} = Objective;
 
@@ -46,6 +48,8 @@ type Props = // These props are used by the ProvideKeypad mixin.
         savedState: any;
         linterContext: LinterContextProps;
         legacyPerseusLint?: ReadonlyArray<string>;
+
+        dependencies: PerseusDependenciesV2;
     };
 
 type DefaultProps = {
@@ -176,53 +180,58 @@ 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}
+                    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 +513,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 />;