@khanacademy/perseus-editor 38.1.3 → 40.0.0

package/dist/item-editor.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import CombinedHintsEditor from "./combined-hints-editor";
 import { A11yContext } from "./components/a11y-context";
 import Editor from "./editor";
-import ItemExtrasEditor from "./item-extras-editor";
+import ExtrasEditor from "./extras-editor";
 import type { A11yReport } from "./preview/use-preview-controller";
 import type { APIOptions, ImageUploader, ChangeHandler, DeviceType } from "@khanacademy/perseus";
 import type { PerseusAnswerArea, PerseusRenderer, PerseusItem, Hint } from "@khanacademy/perseus-core";
@@ -40,7 +40,7 @@ declare class ItemEditor extends React.Component<Props> {
         question: Record<any, any>;
     };
     questionEditor: React.RefObject<Editor>;
-    itemExtrasEditor: React.RefObject<ItemExtrasEditor>;
+    extrasEditor: React.RefObject<ExtrasEditor>;
     hintsEditor: React.RefObject<CombinedHintsEditor>;
     derivePreviewContent: (inputs: import("./util/derive-question-preview-content").DerivePreviewContentInputs) => {
         type: "question";
@@ -48,7 +48,7 @@ declare class ItemEditor extends React.Component<Props> {
     } | null;
     updateProps: (newProps: Partial<PerseusItem>) => void;
     handleEditorChange: ChangeHandler;
-    handleItemExtrasChange: (newProps: Partial<PerseusAnswerArea>) => void;
+    handleExtrasChange: (newProps: Partial<PerseusAnswerArea>) => void;
     getSaveWarnings: () => any;
     handleA11yReport: (report: A11yReport | null) => void;
     serialize(): PerseusItem;

package/dist/styles/global-colors.d.ts

@@ -1,7 +1,2 @@
-export declare const gray98 = "#FAFAFA";
-export declare const gray95 = "#F0F1F2";
-export declare const gray85 = "#D6D8DA";
-export declare const gray76 = "#BABEC2";
 export declare const gray68 = "#888D93";
 export declare const gray41 = "#626569";
-export declare const gray17 = "#21242C";

package/dist/testing/feature-flags-util.d.ts

@@ -7,6 +7,8 @@ declare const DEFAULT_FEATURE_FLAGS: Record<"perseus-test-flag-1" | "perseus-tes
 export declare function getFeatureFlags(overrides?: Partial<typeof DEFAULT_FEATURE_FLAGS>): {
     "perseus-renderer-upgrade": boolean;
     "desmos-calculator": boolean;
+    "article-extras": boolean;
+    "dnd-widget-fitb": boolean;
     "perseus-test-flag-1": boolean;
     "perseus-test-flag-2": boolean;
 };

package/dist/widgets/categorizer-editor/categorizer-editor.d.ts

@@ -9,7 +9,6 @@ interface Props extends PerseusCategorizerWidgetOptions, ChangeableProps {
  * An editor for adding a categorizer widget that allows users to sort items into categories.
  */
 declare class CategorizerEditor extends React.Component<Props> {
-    static widgetName: "categorizer";
     static defaultProps: PerseusCategorizerWidgetOptions;
     change: (arg1: any, arg2: any, arg3: any) => any;
     serialize: () => any;

package/dist/widgets/cs-program-editor/cs-program-editor.d.ts

@@ -10,7 +10,6 @@ interface CSProgramEditorProps extends PerseusCSProgramWidgetOptions, Changeable
  * This is the main editor for this widget, to specify all the options.
  */
 declare class CSProgramEditor extends React.Component<CSProgramEditorProps> {
-    static widgetName: "cs-program";
     change: (...args: ReadonlyArray<unknown>) => any;
     _handleSettingsChange: (arg1: any) => void;
     _handleProgramIDChange: (arg1: string) => void;

package/dist/widgets/definition-editor/definition-editor.d.ts

@@ -11,7 +11,6 @@ interface Props extends PerseusDefinitionWidgetOptions, ChangeableProps {
  * editors to embed clickable terms with expandable explanations within content.
  */
 declare class DefinitionEditor extends React.Component<Props> {
-    static widgetName: "definition";
     static defaultProps: PerseusDefinitionWidgetOptions;
     static initializeWidgetOptions(params: InitializeWidgetOptionsParams): PerseusDefinitionWidgetOptions;
     change: (arg1: any, arg2: any, arg3: any) => any;

package/dist/widgets/deprecated-standin-editor/deprecated-standin-editor.d.ts

@@ -3,7 +3,6 @@ type Props = {
     onChange: (options: any) => void;
 };
 declare class DeprecatedStandinEditor extends React.Component<Props> {
-    static widgetName: "deprecated-standin";
     serialize(): any;
     render(): React.ReactNode;
 }

package/dist/widgets/dropdown-editor/dropdown-editor.d.ts

@@ -9,7 +9,6 @@ declare class DropdownEditor extends React.Component<Props> {
         choices: any;
         placeholder: any;
     };
-    static widgetName: "dropdown";
     static defaultProps: PerseusDropdownWidgetOptions;
     onVisibleLabelChange: (arg1: string) => void;
     onAriaLabelChange: (arg1: string) => void;

package/dist/widgets/explanation-editor/explanation-editor.d.ts

@@ -9,7 +9,6 @@ interface Props extends PerseusExplanationWidgetOptions, ChangeableProps {
  * An editor for adding an explanation widget that provides supplementary information to users.
  */
 declare class ExplanationEditor extends React.Component<Props> {
-    static widgetName: "explanation";
     static defaultProps: PerseusExplanationWidgetOptions;
     change: (arg1: any, arg2: any, arg3: any) => any;
     serialize: () => any;

package/dist/widgets/expression-editor/expression-editor.d.ts

@@ -16,7 +16,6 @@ interface State {
  * An editor for adding an expression widget that allows users to enter mathematical expressions.
  */
 declare class ExpressionEditor extends React.Component<Props, State> {
-    static widgetName: "expression";
     static defaultProps: any;
     constructor(props: Props);
     serialize(): PerseusExpressionWidgetOptions;

package/dist/widgets/free-response-editor/free-response-editor.d.ts

@@ -10,7 +10,6 @@ type Props = PerseusFreeResponseWidgetOptions & {
  */
 declare class FreeResponseEditor extends React.Component<Props> {
     static defaultProps: any;
-    static widgetName: "free-response";
     serialize: () => PerseusFreeResponseWidgetOptions;
     getSaveWarnings: () => Array<string>;
     handleUpdateCharacterLimit: (newValue: string) => void;

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

@@ -7,7 +7,6 @@ interface Props extends PerseusGradedGroupWidgetOptions, ChangeableProps {
     apiOptions?: APIOptionsWithDefaults;
 }
 declare class GradedGroupEditor extends React.Component<Props> {
-    static widgetName: "graded-group";
     static defaultProps: PerseusGradedGroupWidgetOptions;
     editor: React.RefObject<Editor>;
     hintEditor: React.RefObject<Editor>;

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

@@ -7,7 +7,6 @@ interface Props extends PerseusGradedGroupSetWidgetOptions, ChangeableProps {
 }
 declare class GradedGroupSetEditor extends React.Component<Props> {
     _editors: Array<any>;
-    static widgetName: "graded-group-set";
     static defaultProps: PerseusGradedGroupSetWidgetOptions;
     UNSAFE_componentWillMount(): void;
     change: (arg1: any, arg2: any, arg3: any) => any;

package/dist/widgets/grapher-editor/grapher-editor.d.ts

@@ -9,7 +9,6 @@ type Props = {
     apiOptions: APIOptionsWithDefaults;
 };
 declare class GrapherEditor extends React.Component<Props> {
-    static widgetName: "grapher";
     static defaultProps: PerseusGrapherWidgetOptions;
     handleAvailableTypesChange: (newAvailableTypes: Array<any>) => void;
     serialize: () => any;

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

@@ -9,7 +9,6 @@ declare class GroupEditor extends React.Component<Props> {
         images: any;
         apiOptions: any;
     };
-    static widgetName: "group";
     static defaultProps: PerseusGroupWidgetOptions;
     editor: React.RefObject<Editor>;
     getSaveWarnings: () => ReadonlyArray<any>;

package/dist/widgets/iframe-editor/iframe-editor.d.ts

@@ -7,7 +7,6 @@ interface IframeEditorProps extends PerseusIFrameWidgetOptions, ChangeableProps
  * This is the main editor for this widget, to specify all the options.
  */
 declare class IframeEditor extends React.Component<IframeEditorProps> {
-    static widgetName: "iframe";
     static defaultProps: PerseusIFrameWidgetOptions;
     change: (arg1: any, arg2: any, arg3: any) => any;
     handleSettingsChange: (arg1: any) => void;

package/dist/widgets/image-editor/image-editor.d.ts

@@ -10,7 +10,6 @@ export interface Props extends PerseusImageWidgetOptions {
  */
 declare class ImageEditor extends React.Component<Props> {
     static displayName: string;
-    static widgetName: string;
     static defaultProps: PerseusImageWidgetOptions;
     serialize(): any;
     render(): React.JSX.Element;

package/dist/widgets/input-number-editor/input-number-editor.d.ts

@@ -3,6 +3,5 @@ import NumericInputEditor from "../numeric-input-editor";
  * An editor for adding an input number widget that allows users to enter numerical values.
  */
 declare class InputNumberEditor extends NumericInputEditor {
-    static widgetName: "input-number";
 }
 export default InputNumberEditor;

package/dist/widgets/interaction-editor/interaction-editor.d.ts

@@ -24,7 +24,6 @@ type State = any;
  * and their properties.
  */
 declare class InteractionEditor extends React.Component<Props, State> {
-    static widgetName: "interaction";
     static defaultProps: PerseusInteractionWidgetOptions;
     state: State;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;

package/dist/widgets/interactive-graph-editor/interactive-graph-editor.d.ts

@@ -21,11 +21,14 @@ declare const InteractiveGraph: {
                 isArticle?: boolean;
                 onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                 showAlignmentOptions?: boolean;
+                renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                 readOnly?: boolean;
                 editingDisabled?: boolean;
                 answerableCallback?: (arg1: boolean) => unknown;
                 getAnotherHint?: () => unknown;
-                interactionCallback?: (widgetData: {
+                interactionCallback? /**
+                 * The labels for the x and y axes.
+                 */: (widgetData: {
                     [widgetId: string]: any;
                 }) => void;
                 imagePlaceholder?: React.ReactNode;
@@ -42,16 +45,15 @@ declare const InteractiveGraph: {
                 }>) => void;
                 customKeypad?: boolean;
                 isMobile?: boolean;
-                isMobileApp? /**
-                 * The range of the graph in the x and y directions.
-                 */: boolean;
+                isMobileApp?: boolean;
                 hintProgressColor?: string;
-                flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
             }> & {
                 baseElements: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -75,12 +77,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["baseElements"]>;
                 isArticle: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -104,12 +107,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["isArticle"]>;
                 isMobile: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -133,12 +137,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["isMobile"]>;
                 isMobileApp: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -162,12 +167,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["isMobileApp"]>;
                 editingDisabled: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -191,12 +197,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["editingDisabled"]>;
                 onFocusChange: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -220,12 +227,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["onFocusChange"]>;
                 readOnly: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -249,12 +257,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["readOnly"]>;
                 showAlignmentOptions: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -278,7 +287,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["showAlignmentOptions"]>;
             }>;
             keypadElement?: any;
@@ -287,7 +296,15 @@ declare const InteractiveGraph: {
             findWidgets: import("../../../../perseus/src/types").FindWidgetsFunction;
             reviewMode: boolean;
             showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
-            handleUserInput: (newUserInput: PerseusGraphType, cb?: () => void, silent?: boolean) => void;
+            handleUserInput: (newUserInput: PerseusGraphType, cb
+            /**
+             * Whether to show tooltips on the graph.
+             * (Currently not used, but will be in the future.)
+             */
+            ? /**
+             * Whether to show tooltips on the graph.
+             * (Currently not used, but will be in the future.)
+             */: () => void, silent?: boolean) => void;
             linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
             containerSizeClass: import("../../../../perseus/src/util/sizing-utils").SizeClass;
             step: [number, number];
@@ -349,11 +366,14 @@ declare const InteractiveGraph: {
                 isArticle?: boolean;
                 onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                 showAlignmentOptions?: boolean;
+                renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                 readOnly?: boolean;
                 editingDisabled?: boolean;
                 answerableCallback?: (arg1: boolean) => unknown;
                 getAnotherHint?: () => unknown;
-                interactionCallback?: (widgetData: {
+                interactionCallback? /**
+                 * The labels for the x and y axes.
+                 */: (widgetData: {
                     [widgetId: string]: any;
                 }) => void;
                 imagePlaceholder?: React.ReactNode;
@@ -370,16 +390,15 @@ declare const InteractiveGraph: {
                 }>) => void;
                 customKeypad?: boolean;
                 isMobile?: boolean;
-                isMobileApp? /**
-                 * The range of the graph in the x and y directions.
-                 */: boolean;
+                isMobileApp?: boolean;
                 hintProgressColor?: string;
-                flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
             }> & {
                 baseElements: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -403,12 +422,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["baseElements"]>;
                 isArticle: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -432,12 +452,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["isArticle"]>;
                 isMobile: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -461,12 +482,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["isMobile"]>;
                 isMobileApp: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -490,12 +512,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["isMobileApp"]>;
                 editingDisabled: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -519,12 +542,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["editingDisabled"]>;
                 onFocusChange: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -548,12 +572,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["onFocusChange"]>;
                 readOnly: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -577,12 +602,13 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["readOnly"]>;
                 showAlignmentOptions: NonNullable<Readonly<{
                     isArticle?: boolean;
                     onFocusChange?: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
                     showAlignmentOptions?: boolean;
+                    renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
                     readOnly?: boolean;
                     editingDisabled?: boolean;
                     answerableCallback?: (arg1: boolean) => unknown;
@@ -606,7 +632,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+                    flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
                 }>["showAlignmentOptions"]>;
             }>;
             keypadElement?: any;
@@ -615,7 +641,15 @@ declare const InteractiveGraph: {
             findWidgets: import("../../../../perseus/src/types").FindWidgetsFunction;
             reviewMode: boolean;
             showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
-            handleUserInput: (newUserInput: PerseusGraphType, cb?: () => void, silent?: boolean) => void;
+            handleUserInput: (newUserInput: PerseusGraphType, cb
+            /**
+             * Whether to show tooltips on the graph.
+             * (Currently not used, but will be in the future.)
+             */
+            ? /**
+             * Whether to show tooltips on the graph.
+             * (Currently not used, but will be in the future.)
+             */: () => void, silent?: boolean) => void;
             linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
             containerSizeClass: import("../../../../perseus/src/util/sizing-utils").SizeClass;
             step: [number, number];
@@ -767,7 +801,6 @@ export type Props = {
  * Used in the exercise editor.
  */
 declare class InteractiveGraphEditor extends React.Component<Props> {
-    static widgetName: string;
     static bestPractices: {
         url: string;
         label: string;

package/dist/widgets/label-image-editor/label-image-editor.d.ts

@@ -25,7 +25,6 @@ interface Props {
 declare class LabelImageEditor extends React.Component<Props> {
     private _questionMarkers;
     static defaultProps: PerseusLabelImageWidgetOptions;
-    static widgetName: "label-image";
     componentDidUpdate(prevProps: Props): void;
     getSaveWarnings: () => ReadonlyArray<any | string>;
     serialize(): any;

package/dist/widgets/label-image-editor/marker.d.ts

@@ -6,26 +6,12 @@
  */
 import * as React from "react";
 import type { PerseusLabelImageWidgetOptions } from "@khanacademy/perseus-core";
-type MarkerProps = PerseusLabelImageWidgetOptions["markers"][number] & {
+export type MarkerHandle = {
+    openDropdown: () => void;
+};
+declare const Marker: React.ForwardRefExoticComponent<import("@khanacademy/perseus-core").PerseusLabelImageMarker & {
     choices: PerseusLabelImageWidgetOptions["choices"];
     onChange: (marker: PerseusLabelImageWidgetOptions["markers"][number]) => void;
     onRemove: () => void;
-};
-type State = {
-    showDropdown: boolean;
-};
-declare class Marker extends React.Component<MarkerProps, State> {
-    _marker: HTMLElement | null | undefined;
-    state: State;
-    componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: MarkerProps): void;
-    componentWillUnmount(): void;
-    openDropdown(): void;
-    updateAnswers(answers: string[]): void;
-    updateLabel(label: string): void;
-    handleClick: (e: MouseEvent) => void;
-    handleLabelChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    handleSelectAnswer: (toggleAnswer: string) => void;
-    render(): React.ReactNode;
-}
+} & React.RefAttributes<MarkerHandle>>;
 export default Marker;

package/dist/widgets/matcher-editor/matcher-editor.d.ts

@@ -7,7 +7,6 @@ type Props = PerseusMatcherWidgetOptions & {
  * An editor for adding a matcher widget that allows users to match items from two different sets.
  */
 declare class MatcherEditor extends React.Component<Props> {
-    static widgetName: "matcher";
     static defaultProps: PerseusMatcherWidgetOptions;
     onLabelChange: (index: number, e: React.ChangeEvent<HTMLInputElement>) => void;
     getSaveWarnings: () => string[];

package/dist/widgets/matrix-editor/matrix-editor.d.ts

@@ -6,7 +6,6 @@ interface Props extends PerseusMatrixWidgetOptions, ChangeableProps {
     apiOptions: APIOptionsWithDefaults;
 }
 declare class MatrixEditor extends React.Component<Props> {
-    static widgetName: "matrix";
     static defaultProps: PerseusMatrixWidgetOptions;
     change: (arg1: any, arg2?: any, arg3?: any) => any;
     onMatrixBoardSizeChange: (arg1: [number, number]) => void;

package/dist/widgets/measurer-editor/measurer-editor.d.ts

@@ -4,7 +4,6 @@ import type { PerseusMeasurerWidgetOptions } from "@khanacademy/perseus-core";
 interface Props extends PerseusMeasurerWidgetOptions, ChangeableProps {
 }
 declare class MeasurerEditor extends React.Component<Props> {
-    static widgetName: "measurer";
     static defaultProps: PerseusMeasurerWidgetOptions;
     className: string;
     change: (arg1: any, arg2: any, arg3: any) => any;

package/dist/widgets/number-line-editor/number-line-editor.d.ts

@@ -23,7 +23,6 @@ type Props = {
  * positions, intervals, and points on a number line.
  */
 declare class NumberLineEditor extends React.Component<Props> {
-    static widgetName: "number-line";
     static defaultProps: PerseusNumberLineWidgetOptions;
     onRangeChange: (arg1: Range) => void;
     onLabelRangeChange: (arg1: number, arg2: number) => void;

package/dist/widgets/numeric-input-editor/numeric-input-editor.d.ts

@@ -17,7 +17,6 @@ interface State {
  * numerical values with specific validation rules.
  */
 declare class NumericInputEditor extends React.Component<Props, State> {
-    static widgetName: string;
     static displayName: string;
     static defaultProps: any;
     constructor(props: Props);

package/dist/widgets/orderer-editor/orderer-editor.d.ts

@@ -4,7 +4,6 @@ type Props = PerseusOrdererWidgetOptions & {
     onChange: (newOptions: Partial<PerseusOrdererWidgetOptions>, callback?: () => void) => void;
 };
 declare class OrdererEditor extends React.Component<Props> {
-    static widgetName: "orderer";
     static defaultProps: PerseusOrdererWidgetOptions;
     onOptionsChange: (whichOptions: "correctOptions" | "otherOptions", options: string[]) => void;
     onLayoutChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;