@khanacademy/perseus 8.0.0 → 10.0.0

package/dist/widgets/expression.d.ts

@@ -1,11 +1,20 @@
+import { KeypadType } from "@khanacademy/math-input";
 import * as React from "react";
+import { useDependencies } from "../dependencies";
 import type { PerseusExpressionWidgetOptions } from "../perseus-types";
 import type { PerseusScore, WidgetProps } from "../types";
 import type { Keys as Key } from "@khanacademy/math-input";
 type InputPath = ReadonlyArray<string>;
 type Rubric = PerseusExpressionWidgetOptions;
+type RenderProps = {
+    buttonSets: PerseusExpressionWidgetOptions["buttonSets"];
+    buttonsVisible?: PerseusExpressionWidgetOptions["buttonsVisible"];
+    functions: PerseusExpressionWidgetOptions["functions"];
+    times: PerseusExpressionWidgetOptions["times"];
+    keypadConfiguration: ReturnType<typeof keypadConfigurationForProps>;
+};
 type ExternalProps = WidgetProps<RenderProps, Rubric>;
-export type Props = ExternalProps & {
+export type Props = ExternalProps & ReturnType<typeof useDependencies> & {
     apiOptions: NonNullable<ExternalProps["apiOptions"]>;
     buttonSets: NonNullable<ExternalProps["buttonSets"]>;
     functions: NonNullable<ExternalProps["functions"]>;
@@ -56,22 +65,219 @@ export declare class Expression extends React.Component<Props, ExpressionState>
     getInputPaths: () => ReadonlyArray<ReadonlyArray<any>>;
     getGrammarTypeForPath: (inputPath: string) => string;
     setInputValue: (path: string, newValue: string, cb: () => void) => void;
+    sendExpressionEvaluatedEvent(result: "correct" | "incorrect" | "invalid"): void;
     render(): React.ReactNode | React.ReactElement<React.ComponentProps<"div">>;
 }
-type RenderProps = {
-    buttonSets: any;
-    buttonsVisible?: "always" | "focused" | "never";
-    functions: ReadonlyArray<string>;
-    keypadConfiguration: {
-        extraKeys: ReadonlyArray<any | string>;
-        keypadType: any;
-    };
-    times: boolean;
+/**
+ * Determine the keypad configuration parameters for the input, based on the
+ * provided properties.
+ *
+ * There are two configuration parameters to be passed to the keypad:
+ *   (1) The keypad type. For the Expression widget, we always use the
+ *       Expression keypad.
+ *   (2) The extra keys; namely, any variables or constants (like Pi) that need
+ *       to be included as keys on the keypad. These are scraped from the answer
+ *       forms.
+ */
+declare const keypadConfigurationForProps: (widgetOptions: PerseusExpressionWidgetOptions) => {
+    keypadType: KeypadType;
+    extraKeys: string[];
 };
 declare const _default: Readonly<{
     name: string;
     displayName: string;
-    getWidget?: (() => typeof Expression) | undefined;
+    getWidget?: (() => React.ForwardRefExoticComponent<Omit<Pick<RenderProps & {
+        widgetId: string;
+        alignment: string | null | undefined;
+        static: boolean | null | undefined;
+        problemNum: number | null | undefined;
+        apiOptions: Readonly<Readonly<{
+            isArticle?: boolean | undefined;
+            onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            GroupMetadataEditor?: React.ComponentType<any> | undefined;
+            showAlignmentOptions?: boolean | undefined;
+            readOnly?: boolean | undefined;
+            answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+            getAnotherHint?: (() => unknown) | undefined;
+            interactionCallback?: (() => unknown) | undefined;
+            groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+            imagePlaceholder?: React.ReactNode;
+            widgetPlaceholder?: React.ReactNode;
+            baseElements?: {
+                Link: React.ComponentType<any>;
+            } | undefined;
+            imagePreloader?: ((dimensions: import("../types").Dimensions) => React.ReactNode) | undefined;
+            trackInteraction?: ((args: {
+                type: string;
+                id: string;
+                correct?: boolean | undefined;
+            } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
+            customKeypad?: boolean | undefined;
+            useV2Keypad?: boolean | undefined;
+            nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
+            isMobile?: boolean | undefined;
+            setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+            useDraftEditor?: boolean | undefined;
+            hintProgressColor?: string | undefined;
+            canScrollPage?: boolean | undefined;
+            inModal?: boolean | undefined;
+            crossOutEnabled?: boolean | undefined;
+            editorChangeDelay?: number | undefined;
+        }> & {
+            GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
+            baseElements: {
+                Link: React.ComponentType<any>;
+            };
+            canScrollPage: NonNullable<boolean | undefined>;
+            crossOutEnabled: NonNullable<boolean | undefined>;
+            editorChangeDelay: number;
+            groupAnnotator: (groupNumber: number, widgetId: string) => React.ReactNode;
+            inModal: NonNullable<boolean | undefined>;
+            isArticle: NonNullable<boolean | undefined>;
+            isMobile: NonNullable<boolean | undefined>;
+            useV2Keypad: NonNullable<boolean | undefined>;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
+            readOnly: NonNullable<boolean | undefined>;
+            setDrawingAreaAvailable: (arg1: boolean) => unknown;
+            showAlignmentOptions: NonNullable<boolean | undefined>;
+            useDraftEditor: NonNullable<boolean | undefined>;
+        }>;
+        keypadElement?: any;
+        questionCompleted?: boolean | undefined;
+        onFocus: (blurPath: import("../types").FocusPath) => void;
+        onBlur: (blurPath: import("../types").FocusPath) => void;
+        findWidgets: (arg1: import("../types").FilterCriterion) => readonly any[];
+        reviewModeRubric: PerseusExpressionWidgetOptions;
+        onChange: import("../types").ChangeHandler;
+        trackInteraction: (extraData?: {} | undefined) => void;
+        isLastUsedWidget: boolean;
+        linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
+        containerSizeClass: import("../util/sizing-utils").SizeClass;
+    } & import("../types").PerseusDependenciesV2 & {
+        apiOptions: Readonly<Readonly<{
+            isArticle?: boolean | undefined;
+            onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            GroupMetadataEditor?: React.ComponentType<any> | undefined;
+            showAlignmentOptions?: boolean | undefined;
+            readOnly?: boolean | undefined;
+            answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+            getAnotherHint?: (() => unknown) | undefined;
+            interactionCallback?: (() => unknown) | undefined;
+            groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+            imagePlaceholder?: React.ReactNode;
+            widgetPlaceholder?: React.ReactNode;
+            baseElements?: {
+                Link: React.ComponentType<any>;
+            } | undefined;
+            imagePreloader?: ((dimensions: import("../types").Dimensions) => React.ReactNode) | undefined;
+            trackInteraction?: ((args: {
+                type: string;
+                id: string;
+                correct?: boolean | undefined;
+            } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
+            customKeypad?: boolean | undefined;
+            useV2Keypad?: boolean | undefined;
+            nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
+            isMobile?: boolean | undefined;
+            setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+            useDraftEditor?: boolean | undefined;
+            hintProgressColor?: string | undefined;
+            canScrollPage?: boolean | undefined;
+            inModal?: boolean | undefined;
+            crossOutEnabled?: boolean | undefined;
+            editorChangeDelay?: number | undefined;
+        }> & {
+            GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
+            baseElements: {
+                Link: React.ComponentType<any>;
+            };
+            canScrollPage: NonNullable<boolean | undefined>;
+            crossOutEnabled: NonNullable<boolean | undefined>;
+            editorChangeDelay: number;
+            groupAnnotator: (groupNumber: number, widgetId: string) => React.ReactNode;
+            inModal: NonNullable<boolean | undefined>;
+            isArticle: NonNullable<boolean | undefined>;
+            isMobile: NonNullable<boolean | undefined>;
+            useV2Keypad: NonNullable<boolean | undefined>;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
+            readOnly: NonNullable<boolean | undefined>;
+            setDrawingAreaAvailable: (arg1: boolean) => unknown;
+            showAlignmentOptions: NonNullable<boolean | undefined>;
+            useDraftEditor: NonNullable<boolean | undefined>;
+        }>;
+        buttonSets: readonly string[];
+        functions: readonly string[];
+        linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
+        onBlur: (blurPath: import("../types").FocusPath) => void;
+        onFocus: (blurPath: import("../types").FocusPath) => void;
+        times: boolean;
+        value: string;
+    }, "static" | "trackInteraction" | "onChange" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget" | "analytics"> & {
+        value?: string | undefined;
+        onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;
+        onBlur?: ((blurPath: import("../types").FocusPath) => void) | undefined;
+        linterContext?: import("@khanacademy/perseus-linter").LinterContextProps | undefined;
+        apiOptions?: Readonly<Readonly<{
+            isArticle?: boolean | undefined;
+            onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            GroupMetadataEditor?: React.ComponentType<any> | undefined;
+            showAlignmentOptions?: boolean | undefined;
+            readOnly?: boolean | undefined;
+            answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+            getAnotherHint?: (() => unknown) | undefined;
+            interactionCallback?: (() => unknown) | undefined;
+            groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+            imagePlaceholder?: React.ReactNode;
+            widgetPlaceholder?: React.ReactNode;
+            baseElements?: {
+                Link: React.ComponentType<any>;
+            } | undefined;
+            imagePreloader?: ((dimensions: import("../types").Dimensions) => React.ReactNode) | undefined;
+            trackInteraction?: ((args: {
+                type: string;
+                id: string;
+                correct?: boolean | undefined;
+            } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
+            customKeypad?: boolean | undefined;
+            useV2Keypad?: boolean | undefined;
+            nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
+            isMobile?: boolean | undefined;
+            setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+            useDraftEditor?: boolean | undefined;
+            hintProgressColor?: string | undefined;
+            canScrollPage?: boolean | undefined;
+            inModal?: boolean | undefined;
+            crossOutEnabled?: boolean | undefined;
+            editorChangeDelay?: number | undefined;
+        }> & {
+            GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
+            baseElements: {
+                Link: React.ComponentType<any>;
+            };
+            canScrollPage: NonNullable<boolean | undefined>;
+            crossOutEnabled: NonNullable<boolean | undefined>;
+            editorChangeDelay: number;
+            groupAnnotator: (groupNumber: number, widgetId: string) => React.ReactNode;
+            inModal: NonNullable<boolean | undefined>;
+            isArticle: NonNullable<boolean | undefined>;
+            isMobile: NonNullable<boolean | undefined>;
+            useV2Keypad: NonNullable<boolean | undefined>;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
+            readOnly: NonNullable<boolean | undefined>;
+            setDrawingAreaAvailable: (arg1: boolean) => unknown;
+            showAlignmentOptions: NonNullable<boolean | undefined>;
+            useDraftEditor: NonNullable<boolean | undefined>;
+        }> | undefined;
+        times?: boolean | undefined;
+        buttonSets?: readonly string[] | undefined;
+        functions?: readonly string[] | undefined;
+    } & {}, "analytics"> & React.RefAttributes<Expression>>) | undefined;
     accessible?: boolean | ((props: any) => boolean) | undefined;
     hidden?: boolean | undefined;
     version?: import("../types").Version | undefined;
@@ -86,6 +292,197 @@ declare const _default: Readonly<{
     propUpgrades?: {
         [key: string]: (arg1: any) => any;
     } | undefined;
-    widget: typeof Expression;
+    widget: React.ForwardRefExoticComponent<Omit<Pick<RenderProps & {
+        widgetId: string;
+        alignment: string | null | undefined;
+        static: boolean | null | undefined;
+        problemNum: number | null | undefined;
+        apiOptions: Readonly<Readonly<{
+            isArticle?: boolean | undefined;
+            onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            GroupMetadataEditor?: React.ComponentType<any> | undefined;
+            showAlignmentOptions?: boolean | undefined;
+            readOnly?: boolean | undefined;
+            answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+            getAnotherHint?: (() => unknown) | undefined;
+            interactionCallback?: (() => unknown) | undefined;
+            groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+            imagePlaceholder?: React.ReactNode;
+            widgetPlaceholder?: React.ReactNode;
+            baseElements?: {
+                Link: React.ComponentType<any>;
+            } | undefined;
+            imagePreloader?: ((dimensions: import("../types").Dimensions) => React.ReactNode) | undefined;
+            trackInteraction?: ((args: {
+                type: string;
+                id: string;
+                correct?: boolean | undefined;
+            } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
+            customKeypad?: boolean | undefined;
+            useV2Keypad?: boolean | undefined;
+            nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
+            isMobile?: boolean | undefined;
+            setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+            useDraftEditor?: boolean | undefined;
+            hintProgressColor?: string | undefined;
+            canScrollPage?: boolean | undefined;
+            inModal?: boolean | undefined;
+            crossOutEnabled?: boolean | undefined;
+            editorChangeDelay?: number | undefined;
+        }> & {
+            GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
+            baseElements: {
+                Link: React.ComponentType<any>;
+            };
+            canScrollPage: NonNullable<boolean | undefined>;
+            crossOutEnabled: NonNullable<boolean | undefined>;
+            editorChangeDelay: number;
+            groupAnnotator: (groupNumber: number, widgetId: string) => React.ReactNode;
+            inModal: NonNullable<boolean | undefined>;
+            isArticle: NonNullable<boolean | undefined>;
+            isMobile: NonNullable<boolean | undefined>;
+            useV2Keypad: NonNullable<boolean | undefined>;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
+            readOnly: NonNullable<boolean | undefined>;
+            setDrawingAreaAvailable: (arg1: boolean) => unknown;
+            showAlignmentOptions: NonNullable<boolean | undefined>;
+            useDraftEditor: NonNullable<boolean | undefined>;
+        }>;
+        keypadElement?: any;
+        questionCompleted?: boolean | undefined;
+        onFocus: (blurPath: import("../types").FocusPath) => void;
+        onBlur: (blurPath: import("../types").FocusPath) => void;
+        findWidgets: (arg1: import("../types").FilterCriterion) => readonly any[];
+        reviewModeRubric: PerseusExpressionWidgetOptions;
+        onChange: import("../types").ChangeHandler;
+        trackInteraction: (extraData?: {} | undefined) => void;
+        isLastUsedWidget: boolean;
+        linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
+        containerSizeClass: import("../util/sizing-utils").SizeClass;
+    } & import("../types").PerseusDependenciesV2 & {
+        apiOptions: Readonly<Readonly<{
+            isArticle?: boolean | undefined;
+            onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            GroupMetadataEditor?: React.ComponentType<any> | undefined;
+            showAlignmentOptions?: boolean | undefined;
+            readOnly?: boolean | undefined;
+            answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+            getAnotherHint?: (() => unknown) | undefined;
+            interactionCallback?: (() => unknown) | undefined;
+            groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+            imagePlaceholder?: React.ReactNode;
+            widgetPlaceholder?: React.ReactNode;
+            baseElements?: {
+                Link: React.ComponentType<any>;
+            } | undefined;
+            imagePreloader?: ((dimensions: import("../types").Dimensions) => React.ReactNode) | undefined;
+            trackInteraction?: ((args: {
+                type: string;
+                id: string;
+                correct?: boolean | undefined;
+            } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
+            customKeypad?: boolean | undefined;
+            useV2Keypad?: boolean | undefined;
+            nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
+            isMobile?: boolean | undefined;
+            setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+            useDraftEditor?: boolean | undefined;
+            hintProgressColor?: string | undefined;
+            canScrollPage?: boolean | undefined;
+            inModal?: boolean | undefined;
+            crossOutEnabled?: boolean | undefined;
+            editorChangeDelay?: number | undefined;
+        }> & {
+            GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
+            baseElements: {
+                Link: React.ComponentType<any>;
+            };
+            canScrollPage: NonNullable<boolean | undefined>;
+            crossOutEnabled: NonNullable<boolean | undefined>;
+            editorChangeDelay: number;
+            groupAnnotator: (groupNumber: number, widgetId: string) => React.ReactNode;
+            inModal: NonNullable<boolean | undefined>;
+            isArticle: NonNullable<boolean | undefined>;
+            isMobile: NonNullable<boolean | undefined>;
+            useV2Keypad: NonNullable<boolean | undefined>;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
+            readOnly: NonNullable<boolean | undefined>;
+            setDrawingAreaAvailable: (arg1: boolean) => unknown;
+            showAlignmentOptions: NonNullable<boolean | undefined>;
+            useDraftEditor: NonNullable<boolean | undefined>;
+        }>;
+        buttonSets: readonly string[];
+        functions: readonly string[];
+        linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
+        onBlur: (blurPath: import("../types").FocusPath) => void;
+        onFocus: (blurPath: import("../types").FocusPath) => void;
+        times: boolean;
+        value: string;
+    }, "static" | "trackInteraction" | "onChange" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget" | "analytics"> & {
+        value?: string | undefined;
+        onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;
+        onBlur?: ((blurPath: import("../types").FocusPath) => void) | undefined;
+        linterContext?: import("@khanacademy/perseus-linter").LinterContextProps | undefined;
+        apiOptions?: Readonly<Readonly<{
+            isArticle?: boolean | undefined;
+            onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            GroupMetadataEditor?: React.ComponentType<any> | undefined;
+            showAlignmentOptions?: boolean | undefined;
+            readOnly?: boolean | undefined;
+            answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+            getAnotherHint?: (() => unknown) | undefined;
+            interactionCallback?: (() => unknown) | undefined;
+            groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+            imagePlaceholder?: React.ReactNode;
+            widgetPlaceholder?: React.ReactNode;
+            baseElements?: {
+                Link: React.ComponentType<any>;
+            } | undefined;
+            imagePreloader?: ((dimensions: import("../types").Dimensions) => React.ReactNode) | undefined;
+            trackInteraction?: ((args: {
+                type: string;
+                id: string;
+                correct?: boolean | undefined;
+            } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
+            customKeypad?: boolean | undefined;
+            useV2Keypad?: boolean | undefined;
+            nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
+            isMobile?: boolean | undefined;
+            setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+            useDraftEditor?: boolean | undefined;
+            hintProgressColor?: string | undefined;
+            canScrollPage?: boolean | undefined;
+            inModal?: boolean | undefined;
+            crossOutEnabled?: boolean | undefined;
+            editorChangeDelay?: number | undefined;
+        }> & {
+            GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
+            baseElements: {
+                Link: React.ComponentType<any>;
+            };
+            canScrollPage: NonNullable<boolean | undefined>;
+            crossOutEnabled: NonNullable<boolean | undefined>;
+            editorChangeDelay: number;
+            groupAnnotator: (groupNumber: number, widgetId: string) => React.ReactNode;
+            inModal: NonNullable<boolean | undefined>;
+            isArticle: NonNullable<boolean | undefined>;
+            isMobile: NonNullable<boolean | undefined>;
+            useV2Keypad: NonNullable<boolean | undefined>;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
+            readOnly: NonNullable<boolean | undefined>;
+            setDrawingAreaAvailable: (arg1: boolean) => unknown;
+            showAlignmentOptions: NonNullable<boolean | undefined>;
+            useDraftEditor: NonNullable<boolean | undefined>;
+        }> | undefined;
+        times?: boolean | undefined;
+        buttonSets?: readonly string[] | undefined;
+        functions?: readonly string[] | undefined;
+    } & {}, "analytics"> & React.RefAttributes<Expression>>;
 }>;
 export default _default;

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/grapher.d.ts

@@ -4,6 +4,7 @@ import type { Coord } from "../interactive2/types";
 import type { PerseusGrapherWidgetOptions } from "../perseus-types";
 import type { PerseusScore, WidgetProps } from "../types";
 import type { GridDimensions } from "../util";
+import type { PropsFor } from "@khanacademy/wonder-blocks-core";
 type UserInput = any;
 type RenderProps = {
     availableTypes: PerseusGrapherWidgetOptions["availableTypes"];
@@ -30,7 +31,7 @@ declare class Grapher extends React.Component<Props> {
         box: NonNullable<Props["graph"]["box"]>;
         gridStep: NonNullable<Props["graph"]["gridStep"]>;
     }): ReadonlyArray<GridDimensions>;
-    _calculateMobileTickStep(gridStep: JSX.LibraryManagedAttributes<typeof Graphie, Required<React.ComponentProps<typeof Graphie>>>["gridStep"], step: JSX.LibraryManagedAttributes<typeof Graphie, Required<React.ComponentProps<typeof Graphie>>>["step"], ranges: JSX.LibraryManagedAttributes<typeof Graphie, Required<React.ComponentProps<typeof Graphie>>>["ranges"]): any;
+    _calculateMobileTickStep(gridStep: NonNullable<PropsFor<typeof Graphie>["gridStep"]>, step: NonNullable<PropsFor<typeof Graphie>["step"]>, ranges: NonNullable<PropsFor<typeof Graphie>["ranges"]>): any;
     _setupGraphie: (arg1: any, arg2: any) => void;
     showHairlines: (arg1: Coord) => void;
     hideHairlines: () => void;

package/dist/widgets/passage-ref.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { PerseusPassageRefWidgetOptions } from "../perseus-types";
-import type { ChangeFn, PerseusScore, WidgetProps, LinterContextProps } from "../types";
+import type { ChangeFn, PerseusScore, WidgetProps } from "../types";
+import type { LinterContextProps } from "@khanacademy/perseus-linter";
 type UserInput = RenderProps & {
     static: boolean | null | undefined;
     reviewModeRubric: Rubric;

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": "10.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.1",
+        "@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}
+    />
 );