@khanacademy/perseus 54.0.0 → 55.0.0

package/dist/widgets/interactive-graphs/graphs/sinusoid.d.ts

@@ -1,7 +1,14 @@
+import { vec } from "mafs";
 import { type I18nContextType } from "../../../components/i18n-context";
 import type { SinusoidGraphState, Dispatch, InteractiveGraphElementSuite } from "../types";
 import type { NamedSineCoefficient } from "@khanacademy/kmath";
 import type { Coord } from "@khanacademy/perseus-core";
 export declare function renderSinusoidGraph(state: SinusoidGraphState, dispatch: Dispatch, i18n: I18nContextType): InteractiveGraphElementSuite;
+export declare const getSinusoidKeyboardConstraint: (coords: ReadonlyArray<Coord>, snapStep: vec.Vector2, pointIndex: number) => {
+    up: vec.Vector2;
+    down: vec.Vector2;
+    left: vec.Vector2;
+    right: vec.Vector2;
+};
 export declare const computeSine: (x: number, sinusoidCoefficients: NamedSineCoefficient) => number;
 export declare const getSinusoidCoefficients: (coords: ReadonlyArray<Coord>) => NamedSineCoefficient | undefined;

package/dist/widgets/interactive-graphs/interactive-graph-question-builder.d.ts

@@ -5,7 +5,7 @@ export type LockedFunctionOptions = {
     color?: LockedFigureColor;
     strokeStyle?: LockedLineStyle;
     directionalAxis?: "x" | "y";
-    domain?: [min: number | null, max: number | null];
+    domain?: [min: number, max: number];
     labels?: LockedFigureLabelOptions[];
     ariaLabel?: string;
 };

package/dist/widgets/interactive-graphs/stateful-mafs-graph.d.ts

@@ -6,7 +6,12 @@ export type StatefulMafsGraphProps = {
     box: [number, number];
     backgroundImage?: InteractiveGraphProps["backgroundImage"];
     graph: PerseusGraphType;
-    correct: PerseusGraphType;
+    /**
+     * The correct answer for this widget. Will be undefined if the graph is
+     * being provided answerless data (e.g. because the learner has not yet
+     * submitted their guess).
+     */
+    correct?: PerseusGraphType;
     lockedFigures?: InteractiveGraphProps["lockedFigures"];
     range: InteractiveGraphProps["range"];
     snapStep: [x: number, y: number];

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

@@ -1 +1 @@
-export { default } from "./numeric-input";
+export { default } from "./numeric-input.class";

package/dist/widgets/numeric-input/input-with-examples.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The InputWithExamples component is a child component of the NumericInput
+ * and InputNumber components. It is responsible for rendering the UI elements
+ * for the desktop versions of these widgets, and displays a tooltip with
+ * examples of how to input the selected answer forms.
+ */
+declare const InputWithExamples: any;
+export default InputWithExamples;

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

@@ -0,0 +1,66 @@
+import * as React from "react";
+import type { FocusPath, Widget, WidgetProps } from "../../types";
+import type { NumericInputPromptJSON } from "../../widget-ai-utils/numeric-input/prompt-utils";
+import type { PerseusNumericInputWidgetOptions, PerseusNumericInputAnswerForm } from "@khanacademy/perseus-core";
+import type { PerseusNumericInputRubric, PerseusNumericInputUserInput } from "@khanacademy/perseus-score";
+type ExternalProps = WidgetProps<PerseusNumericInputWidgetOptions, PerseusNumericInputRubric>;
+export type NumericInputProps = ExternalProps & {
+    size: NonNullable<ExternalProps["size"]>;
+    rightAlign: NonNullable<ExternalProps["rightAlign"]>;
+    apiOptions: NonNullable<ExternalProps["apiOptions"]>;
+    coefficient: NonNullable<ExternalProps["coefficient"]>;
+    answerForms: ReadonlyArray<PerseusNumericInputAnswerForm>;
+    labelText: string;
+    linterContext: NonNullable<ExternalProps["linterContext"]>;
+    currentValue: string;
+};
+type DefaultProps = Pick<NumericInputProps, "currentValue" | "size" | "rightAlign" | "apiOptions" | "coefficient" | "answerForms" | "labelText" | "linterContext">;
+type RenderProps = {
+    answerForms: ReadonlyArray<PerseusNumericInputAnswerForm>;
+    labelText?: string;
+    size: string;
+    coefficient: boolean;
+    rightAlign?: boolean;
+    static: boolean;
+};
+/**
+ * The NumericInput widget is a numeric input field that supports a variety of
+ * answer forms, including integers, decimals, fractions, and mixed numbers.
+ *
+ * [Jan 2025] We're currenly migrating from class-based components to functional
+ * components. While we cannot fully migrate this component yet, we can start
+ * by using the functional component for the rendering the UI of the widget.
+ */
+export declare class NumericInput extends React.Component<NumericInputProps> implements Widget {
+    inputRef: React.RefObject<any>;
+    static defaultProps: DefaultProps;
+    static getUserInputFromProps(props: NumericInputProps): PerseusNumericInputUserInput;
+    focus: () => boolean;
+    focusInputPath: () => void;
+    blurInputPath: () => void;
+    getInputPaths: () => ReadonlyArray<ReadonlyArray<string>>;
+    /**
+     * Sets the value of the input at the given path.
+     */
+    setInputValue: (path: FocusPath, newValue: string, cb?: () => unknown | null | undefined) => void;
+    /**
+     * Returns the value the user has currently input for this widget.
+     */
+    getUserInput(): PerseusNumericInputUserInput;
+    /**
+     * Returns the JSON representation of the prompt for this widget.
+     * This is used by the AI to determine the prompt for the widget.
+     */
+    getPromptJSON(): NumericInputPromptJSON;
+    render(): React.ReactNode;
+}
+declare const _default: {
+    name: string;
+    displayName: string;
+    accessible: true;
+    widget: typeof NumericInput;
+    transform: (widgetOptions: PerseusNumericInputWidgetOptions) => RenderProps;
+    isLintable: true;
+    getOneCorrectAnswerFromRubric(rubric: PerseusNumericInputRubric): string | null | undefined;
+};
+export default _default;

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

@@ -1,80 +1,126 @@
 import * as React from "react";
-import { PerseusI18nContext } from "../../components/i18n-context";
-import InputWithExamples from "../../components/input-with-examples";
-import SimpleKeypadInput from "../../components/simple-keypad-input";
-import type { FocusPath, Widget, WidgetProps } from "../../types";
-import type { NumericInputPromptJSON } from "../../widget-ai-utils/numeric-input/prompt-utils";
-import type { PerseusNumericInputWidgetOptions, PerseusNumericInputAnswerForm } from "@khanacademy/perseus-core";
-import type { PerseusNumericInputRubric, PerseusNumericInputUserInput } from "@khanacademy/perseus-score";
-type ExternalProps = WidgetProps<PerseusNumericInputWidgetOptions, PerseusNumericInputRubric>;
-type Props = ExternalProps & {
-    size: NonNullable<ExternalProps["size"]>;
-    rightAlign: NonNullable<ExternalProps["rightAlign"]>;
-    apiOptions: NonNullable<ExternalProps["apiOptions"]>;
-    coefficient: NonNullable<ExternalProps["coefficient"]>;
-    answerForms: NonNullable<ExternalProps["answerForms"]>;
-    labelText: string;
-    linterContext: NonNullable<ExternalProps["linterContext"]>;
-    currentValue: string;
-};
-type DefaultProps = {
-    currentValue: Props["currentValue"];
-    size: Props["size"];
-    rightAlign: Props["rightAlign"];
-    apiOptions: Props["apiOptions"];
-    coefficient: Props["coefficient"];
-    answerForms: Props["answerForms"];
-    labelText: Props["labelText"];
-    linterContext: Props["linterContext"];
-};
-type State = {
-    previousValues: ReadonlyArray<string>;
-    isFocused: boolean;
-};
-export declare class NumericInput extends React.Component<Props, State> implements Widget {
-    static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
-    context: React.ContextType<typeof PerseusI18nContext>;
-    inputRef: SimpleKeypadInput | InputWithExamples | null | undefined;
-    static defaultProps: DefaultProps;
-    static getUserInputFromProps(props: Props): PerseusNumericInputUserInput;
-    state: State;
-    /**
-     * Generates a string that demonstrates how to input the various supported
-     * answer forms.
-     */
-    examples(): ReadonlyArray<string>;
-    shouldShowExamples: () => boolean;
-    focus: () => boolean;
-    focusInputPath: () => void;
-    blurInputPath: () => void;
-    getInputPaths: () => ReadonlyArray<ReadonlyArray<string>>;
-    setInputValue: (arg1: FocusPath, arg2: string, arg3?: () => unknown | null | undefined) => void;
-    getUserInput(): PerseusNumericInputUserInput;
-    getPromptJSON(): NumericInputPromptJSON;
-    handleChange: (arg1: string, arg2?: () => unknown | null | undefined) => void;
-    _handleFocus: () => void;
-    _handleBlur: () => void;
-    render(): React.ReactNode;
-}
-export declare const unionAnswerForms: (arg1: ReadonlyArray<ReadonlyArray<PerseusNumericInputAnswerForm>>) => ReadonlyArray<PerseusNumericInputAnswerForm>;
-type RenderProps = {
-    answerForms: ReadonlyArray<{
-        simplify: "required" | "correct" | "enforced" | null | undefined;
-        name: "integer" | "decimal" | "proper" | "improper" | "mixed" | "pi";
+/**
+ * The NumericInputComponent is a child component of the NumericInput class
+ * component. It is responsible for rendering the UI elements of the Numeric
+ * Input widget.
+ */
+export declare const NumericInputComponent: React.ForwardRefExoticComponent<import("@khanacademy/perseus-core").PerseusNumericInputWidgetOptions & {
+    widgetId: string;
+    alignment: string | null | undefined;
+    static: boolean | null | undefined;
+    problemNum: number | null | undefined;
+    apiOptions: Readonly<Readonly<{
+        isArticle?: boolean;
+        onFocusChange?: (newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
+        GroupMetadataEditor?: React.ComponentType<any>;
+        showAlignmentOptions?: boolean;
+        readOnly?: boolean;
+        answerableCallback?: (arg1: boolean) => unknown;
+        getAnotherHint?: () => unknown;
+        interactionCallback?: (widgetData: {
+            [widgetId: string]: any;
+        }) => void;
+        groupAnnotator?: (groupNumber: number, widgetId: string) => React.ReactNode;
+        imagePlaceholder?: React.ReactNode;
+        widgetPlaceholder?: React.ReactNode;
+        baseElements?: {
+            Link: React.ComponentType<any>;
+        };
+        imagePreloader?: (dimensions: import("../../types").Dimensions) => React.ReactNode;
+        trackInteraction?: (args: {
+            type: string;
+            id: string;
+            correct?: boolean;
+        } & Partial<import("../../types").TrackingGradedGroupExtraArguments> & Partial<{
+            visible: number;
+        }>) => void;
+        customKeypad?: boolean;
+        nativeKeypadProxy?: (blur: () => void) => import("@khanacademy/math-input").KeypadAPI;
+        isMobile?: boolean;
+        setDrawingAreaAvailable?: (arg1: boolean) => unknown;
+        hintProgressColor?: string;
+        canScrollPage?: boolean;
+        crossOutEnabled?: boolean;
+        editorChangeDelay?: number;
+        onWidgetStartProps?: (widgets: import("@khanacademy/perseus-core").PerseusWidgetsMap) => void;
+    }> & {
+        baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
+        canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
+        crossOutEnabled: NonNullable<import("../..").APIOptions["crossOutEnabled"]>;
+        editorChangeDelay: NonNullable<import("../..").APIOptions["editorChangeDelay"]>;
+        groupAnnotator: NonNullable<import("../..").APIOptions["groupAnnotator"]>;
+        isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
+        isMobile: NonNullable<import("../..").APIOptions["isMobile"]>;
+        onFocusChange: NonNullable<import("../..").APIOptions["onFocusChange"]>;
+        readOnly: NonNullable<import("../..").APIOptions["readOnly"]>;
+        setDrawingAreaAvailable: NonNullable<import("../..").APIOptions["setDrawingAreaAvailable"]>;
+        showAlignmentOptions: NonNullable<import("../..").APIOptions["showAlignmentOptions"]>;
     }>;
+    keypadElement?: any;
+    questionCompleted?: boolean;
+    onFocus: (blurPath: import("../..").FocusPath) => void;
+    onBlur: (blurPath: import("../..").FocusPath) => void;
+    findWidgets: (criterion: import("../../types").FilterCriterion) => ReadonlyArray<import("../../types").Widget>;
+    reviewModeRubric?: import("@khanacademy/perseus-score").PerseusNumericInputRubric | null | undefined;
+    reviewMode: boolean;
+    onChange: import("../..").ChangeHandler;
+    trackInteraction: (extraData?: Empty | undefined) => void;
+    isLastUsedWidget: boolean;
+    linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
+    containerSizeClass: import("../../util/sizing-utils").SizeClass;
+} & {
+    size: NonNullable<string>;
+    rightAlign: NonNullable<boolean | undefined>;
+    apiOptions: NonNullable<Readonly<Readonly<{
+        isArticle?: boolean;
+        onFocusChange?: (newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
+        GroupMetadataEditor?: React.ComponentType<any>;
+        showAlignmentOptions?: boolean;
+        readOnly?: boolean;
+        answerableCallback?: (arg1: boolean) => unknown;
+        getAnotherHint?: () => unknown;
+        interactionCallback?: (widgetData: {
+            [widgetId: string]: any;
+        }) => void;
+        groupAnnotator?: (groupNumber: number, widgetId: string) => React.ReactNode;
+        imagePlaceholder?: React.ReactNode;
+        widgetPlaceholder?: React.ReactNode;
+        baseElements?: {
+            Link: React.ComponentType<any>;
+        };
+        imagePreloader?: (dimensions: import("../../types").Dimensions) => React.ReactNode;
+        trackInteraction?: (args: {
+            type: string;
+            id: string;
+            correct?: boolean;
+        } & Partial<import("../../types").TrackingGradedGroupExtraArguments> & Partial<{
+            visible: number;
+        }>) => void;
+        customKeypad?: boolean;
+        nativeKeypadProxy?: (blur: () => void) => import("@khanacademy/math-input").KeypadAPI;
+        isMobile?: boolean;
+        setDrawingAreaAvailable?: (arg1: boolean) => unknown;
+        hintProgressColor?: string;
+        canScrollPage?: boolean;
+        crossOutEnabled?: boolean;
+        editorChangeDelay?: number;
+        onWidgetStartProps?: (widgets: import("@khanacademy/perseus-core").PerseusWidgetsMap) => void;
+    }> & {
+        baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
+        canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
+        crossOutEnabled: NonNullable<import("../..").APIOptions["crossOutEnabled"]>;
+        editorChangeDelay: NonNullable<import("../..").APIOptions["editorChangeDelay"]>;
+        groupAnnotator: NonNullable<import("../..").APIOptions["groupAnnotator"]>;
+        isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
+        isMobile: NonNullable<import("../..").APIOptions["isMobile"]>;
+        onFocusChange: NonNullable<import("../..").APIOptions["onFocusChange"]>;
+        readOnly: NonNullable<import("../..").APIOptions["readOnly"]>;
+        setDrawingAreaAvailable: NonNullable<import("../..").APIOptions["setDrawingAreaAvailable"]>;
+        showAlignmentOptions: NonNullable<import("../..").APIOptions["showAlignmentOptions"]>;
+    }>>;
+    coefficient: NonNullable<boolean>;
+    answerForms: ReadonlyArray<import("@khanacademy/perseus-core").PerseusNumericInputAnswerForm>;
     labelText: string;
-    size: "normal" | "small";
-    coefficient: boolean;
-    rightAlign?: boolean;
-    static: boolean;
-};
-declare const _default: {
-    name: string;
-    displayName: string;
-    accessible: true;
-    widget: typeof NumericInput;
-    transform: (widgetOptions: PerseusNumericInputWidgetOptions) => RenderProps;
-    isLintable: true;
-    getOneCorrectAnswerFromRubric(rubric: PerseusNumericInputRubric): string | null | undefined;
-};
-export default _default;
+    linterContext: NonNullable<import("@khanacademy/perseus-linter").LinterContextProps>;
+    currentValue: string;
+} & React.RefAttributes<unknown>>;

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

@@ -0,0 +1,25 @@
+import type { PerseusStrings } from "../../strings";
+import type { PerseusNumericInputAnswerForm } from "@khanacademy/perseus-core";
+/**
+ * The full list of available strings for the numeric input widget,
+ * based on whether the Content Creator has specified that the answer must be simplified.
+ */
+export declare const NumericExampleStrings: {
+    [key: string]: (form: PerseusNumericInputAnswerForm, strings: PerseusStrings) => string;
+};
+/**
+ * Generates the specific set of examples for the current question.
+ * This string is shown as examples to the user in a tooltip.
+ */
+export declare const generateExamples: (answerForms: readonly PerseusNumericInputAnswerForm[], strings: PerseusStrings) => ReadonlyArray<string>;
+/**
+ * Determines whether to show examples of how to input the various supported answer forms.
+ * We do not show examples if all forms are accepted or if no forms are accepted.
+ */
+export declare const shouldShowExamples: (answerForms: readonly PerseusNumericInputAnswerForm[]) => boolean;
+/**
+ * Takes a list of lists of answer forms, and returns a list of the forms
+ * in each of these lists in the same order that they're listed in the
+ * `formExamples` forms from above.
+ */
+export declare const unionAnswerForms: (answerFormsList: ReadonlyArray<ReadonlyArray<PerseusNumericInputAnswerForm>>) => ReadonlyArray<PerseusNumericInputAnswerForm>;

package/dist/widgets/radio/radio.d.ts

@@ -1,7 +1,7 @@
-import { type PerseusRadioWidgetOptions } from "@khanacademy/perseus-core";
 import Radio from "./radio-component";
 import type { RenderProps } from "./radio-component";
 import type { PerseusStrings } from "../../strings";
+import type { PerseusRadioWidgetOptions } from "@khanacademy/perseus-core";
 declare const _default: {
     name: string;
     displayName: string;

package/dist/widgets/sorter/sorter.d.ts

@@ -1,8 +1,8 @@
-import { type PerseusSorterWidgetOptions } from "@khanacademy/perseus-core";
 import * as React from "react";
 import type { SortableOption } from "../../components/sortable";
 import type { Widget, WidgetProps } from "../../types";
 import type { SorterPromptJSON } from "../../widget-ai-utils/sorter/sorter-ai-utils";
+import type { PerseusSorterWidgetOptions } from "@khanacademy/perseus-core";
 import type { PerseusSorterRubric, PerseusSorterUserInput } from "@khanacademy/perseus-score";
 type RenderProps = PerseusSorterWidgetOptions;
 type Props = WidgetProps<RenderProps, PerseusSorterRubric>;