@khanacademy/perseus 65.3.7 → 65.5.0

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

@@ -1,9 +1,13 @@
+import { type PerseusRadioRubric, type PerseusRadioUserInput } from "@khanacademy/perseus-core";
 import * as React from "react";
 import RadioOld from "./radio-component";
 import type { RenderProps } from "./radio-component";
-import type { WidgetProps } from "../../types";
-import type { PerseusRadioRubric } from "@khanacademy/perseus-core";
-type Props = WidgetProps<RenderProps, PerseusRadioRubric>;
+import type { ChoiceState, WidgetProps } from "../../types";
+type Props = WidgetProps<RenderProps, PerseusRadioUserInput, PerseusRadioRubric>;
+type ChoiceStateWithoutSelected = Omit<ChoiceState, "selected">;
+type State = {
+    choiceStates: ChoiceStateWithoutSelected[];
+};
 /**
  * This is a wrapper around the old radio widget that allows us to
  * conditionally render the new radio widget when the feature flag is on.
@@ -16,7 +20,93 @@ type Props = WidgetProps<RenderProps, PerseusRadioRubric>;
 declare class Radio extends RadioOld {
     ffIsOn: boolean;
     radioRef: React.RefObject<RadioOld>;
+    state: State;
     constructor(props: Props);
+    /**
+     * @deprecated and likely very broken API
+     * [LEMS-3185] do not trust serializedState/restoreSerializedState
+     */
+    getSerializedState(): {
+        numCorrect: number;
+        hasNoneOfTheAbove?: boolean;
+        multipleSelect?: boolean;
+        countChoices?: boolean;
+        deselectEnabled?: boolean;
+        choices: import("./radio-component").RadioChoiceWithMetadata[];
+        selectedChoices: import("@khanacademy/perseus-core").PerseusRadioChoice["correct"][];
+        showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
+        choiceStates?: ChoiceState[];
+        values?: boolean[];
+        reviewModeRubric?: PerseusRadioRubric | null | undefined;
+        trackInteraction: (extraData?: Empty | undefined) => void;
+        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;
+            isMobileApp?: boolean;
+            setDrawingAreaAvailable?: (arg1: boolean) => unknown;
+            hintProgressColor?: string;
+            canScrollPage?: boolean;
+            editorChangeDelay?: number;
+            flags?: Record<"new-radio-widget", boolean>;
+            onWidgetStartProps?: (widgets: import("@khanacademy/perseus-core").PerseusWidgetsMap) => void;
+        }> & {
+            baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
+            canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
+            editorChangeDelay: NonNullable<import("../..").APIOptions["editorChangeDelay"]>;
+            groupAnnotator: NonNullable<import("../..").APIOptions["groupAnnotator"]>;
+            isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
+            isMobile: NonNullable<import("../..").APIOptions["isMobile"]>;
+            isMobileApp: NonNullable<import("../..").APIOptions["isMobileApp"]>;
+            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>;
+        reviewMode: boolean;
+        onChange: import("../..").ChangeHandler;
+        handleUserInput: (newUserInput: PerseusRadioUserInput, cb?: () => void, silent?: boolean) => void;
+        isLastUsedWidget: boolean;
+        linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
+        containerSizeClass: import("../../util/sizing-utils").SizeClass;
+    };
+    _handleChange(arg: {
+        choiceStates?: ChoiceState[];
+    }): void;
+    _mergePropsAndState(): Props;
     focus(choiceIndex?: number | null): boolean;
     render(): React.ReactNode;
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { WidgetProps, ChoiceState } from "../../types";
-import type { PerseusRadioChoice, ShowSolutions, PerseusRadioRubric } from "@khanacademy/perseus-core";
+import type { PerseusRadioChoice, ShowSolutions, PerseusRadioRubric, PerseusRadioUserInput } from "@khanacademy/perseus-core";
 export interface RadioChoiceWithMetadata extends PerseusRadioChoice {
     originalIndex: number;
     correct?: boolean;
@@ -17,7 +17,7 @@ export interface RenderProps {
     choiceStates?: ReadonlyArray<ChoiceState>;
     values?: ReadonlyArray<boolean>;
 }
-type RadioComponentProps = WidgetProps<RenderProps, PerseusRadioRubric>;
+type RadioComponentProps = WidgetProps<RenderProps, PerseusRadioUserInput, PerseusRadioRubric>;
 /**
  * This component is a duplicate of the Radio component in radio.tsx
  * for the Radio Revitalization Project. (LEMS-2933)

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

@@ -1,7 +1,10 @@
+import type { Props } from "./radio-component";
 import type { PerseusStrings } from "../../strings";
+import type { PerseusRadioUserInput } from "@khanacademy/perseus-core";
 /**
  * Given a choice's position in the radio widget, return the corresponding
  * "choice letter". (For example, in English, `getChoiceLetter(0)` is "A",
  * `getChoiceLetter(1)` is "B", etc.)
  */
 export declare function getChoiceLetter(pos: number, strings: PerseusStrings): string;
+export declare function getUserInputFromSerializedState(props: Props, unshuffle?: boolean): PerseusRadioUserInput;

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

@@ -2,36 +2,53 @@ 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, PerseusSorterUserInput } from "@khanacademy/perseus-core";
-type RenderProps = PerseusSorterWidgetOptions;
-type Props = WidgetProps<RenderProps>;
+import type { PerseusSorterWidgetOptions, PerseusSorterUserInput, SorterPublicWidgetOptions } from "@khanacademy/perseus-core";
+type Props = WidgetProps<PerseusSorterWidgetOptions, PerseusSorterUserInput>;
 type DefaultProps = {
     correct: Props["correct"];
     layout: Props["layout"];
     padding: Props["padding"];
     problemNum: Props["problemNum"];
-    onChange: Props["onChange"];
     linterContext: Props["linterContext"];
 };
-type State = {
-    changed: boolean;
-};
-declare class Sorter extends React.Component<Props, State> implements Widget {
+declare class Sorter extends React.Component<Props> implements Widget {
     _isMounted: boolean;
     static defaultProps: DefaultProps;
-    state: State;
     componentDidMount(): void;
     componentWillUnmount(): void;
     handleChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * TODO: remove this when everything is pulling from Renderer state
+     * @deprecated get user input from Renderer state
+     */
     getUserInput(): PerseusSorterUserInput;
+    /**
+     * This is kind of a problem. Sortable maintains an internal state
+     * but we also want the user input state to include the same state.
+     * This is to help keep the two in sync for now.
+     */
+    _getOptionsFromSortable(): string[];
     getPromptJSON(): SorterPromptJSON;
     moveOptionToIndex: (option: SortableOption, index: number) => void;
+    /**
+     * @deprecated and likely very broken API
+     * [LEMS-3185] do not trust serializedState/restoreSerializedState
+     */
+    getSerializedState(): any;
     render(): React.ReactNode;
 }
+declare function getStartUserInput(options: SorterPublicWidgetOptions, problemNum: number): PerseusSorterUserInput;
+/**
+ * @deprecated and likely a very broken API
+ * [LEMS-3185] do not trust serializedState/restoreSerializedState
+ */
+declare function getUserInputFromSerializedState(serializedState: any): PerseusSorterUserInput;
 declare const _default: {
     name: string;
     displayName: string;
     widget: typeof Sorter;
     isLintable: true;
+    getStartUserInput: typeof getStartUserInput;
+    getUserInputFromSerializedState: typeof getUserInputFromSerializedState;
 };
 export default _default;

package/dist/widgets/table/table.d.ts

@@ -8,15 +8,14 @@ type EditorProps = {
     editableHeaders: boolean;
     Editor: any;
 };
-type RenderProps = PerseusTableWidgetOptions & EditorProps;
-type Props = WidgetProps<PerseusTableWidgetOptions> & ChangeableProps & EditorProps;
+type RenderProps = Omit<PerseusTableWidgetOptions, "answers">;
+type Props = WidgetProps<RenderProps, PerseusTableUserInput> & ChangeableProps & EditorProps;
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
     headers: Props["headers"];
     editableHeaders: Props["editableHeaders"];
     rows: Props["rows"];
     columns: Props["columns"];
-    answers: Props["answers"];
     linterContext: Props["linterContext"];
 };
 declare class Table extends React.Component<Props> implements Widget {
@@ -39,15 +38,99 @@ declare class Table extends React.Component<Props> implements Widget {
     getDOMNodeForPath(path: FocusPath): ReturnType<typeof ReactDOM.findDOMNode>;
     getInputPaths(): string[][];
     setInputValue(path: FocusPath, newValue: string, cb: any): void;
+    /**
+     * @deprecated and likely very broken API
+     * [LEMS-3185] do not trust serializedState/restoreSerializedState
+     */
+    getSerializedState(): {
+        answers: PerseusTableUserInput;
+        columns: number;
+        rows: number;
+        headers: string[];
+        reviewModeRubric?: Empty | null | undefined;
+        trackInteraction: (extraData?: Empty | undefined) => void;
+        widgetId: string;
+        alignment: string | null | undefined;
+        static: boolean | null | undefined;
+        problemNum: number | null | undefined;
+        apiOptions: Readonly<Readonly<{
+            isArticle?: boolean;
+            onFocusChange?: (newFocusPath: FocusPath, oldFocusPath: 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;
+            isMobileApp?: boolean;
+            setDrawingAreaAvailable?: (arg1: boolean) => unknown;
+            hintProgressColor?: string;
+            canScrollPage?: boolean;
+            editorChangeDelay?: number;
+            flags?: Record<"new-radio-widget", boolean>;
+            onWidgetStartProps?: (widgets: import("@khanacademy/perseus-core").PerseusWidgetsMap) => void;
+        }> & {
+            baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
+            canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
+            editorChangeDelay: NonNullable<import("../..").APIOptions["editorChangeDelay"]>;
+            groupAnnotator: NonNullable<import("../..").APIOptions["groupAnnotator"]>;
+            isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
+            isMobile: NonNullable<import("../..").APIOptions["isMobile"]>;
+            isMobileApp: NonNullable<import("../..").APIOptions["isMobileApp"]>;
+            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: FocusPath) => void;
+        onBlur: (blurPath: FocusPath) => void;
+        findWidgets: (criterion: import("../../types").FilterCriterion) => ReadonlyArray<Widget>;
+        reviewMode: boolean;
+        showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
+        onChange: import("../..").ChangeHandler & ((values: {
+            [key: string]: any;
+        }, callback?: (() => unknown) | null | undefined, silent?: boolean) => unknown);
+        handleUserInput: (newUserInput: PerseusTableUserInput, cb?: () => void, silent?: boolean) => void;
+        isLastUsedWidget: boolean;
+        linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
+        containerSizeClass: import("../../util/sizing-utils").SizeClass;
+        Editor: any;
+    };
     render(): React.ReactNode;
 }
-declare function propTransform(options: Props): RenderProps;
+declare function getStartUserInput(options: PerseusTableWidgetOptions): PerseusTableUserInput;
+/**
+ * @deprecated - do not use in new code.
+ */
+declare function getUserInputFromSerializedState(serializedState: any): PerseusTableUserInput;
 declare const _default: {
     name: string;
     displayName: string;
     widget: typeof Table;
-    transform: typeof propTransform;
     hidden: true;
     isLintable: true;
+    getStartUserInput: typeof getStartUserInput;
+    getUserInputFromSerializedState: typeof getUserInputFromSerializedState;
 };
 export default _default;

package/dist/widgets/video/video.d.ts

@@ -17,7 +17,6 @@ declare class Video extends React.Component<Props> implements Widget {
     static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
     context: React.ContextType<typeof PerseusI18nContext>;
     isWidget: true;
-    change: (...args: ReadonlyArray<unknown>) => any;
     getPromptJSON(): UnsupportedWidgetPromptJSON;
     render(): React.ReactNode;
 }

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "65.3.7",
+  "version": "65.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,37 +42,37 @@
     "tiny-invariant": "1.3.1",
     "uuid": "^10.0.0",
     "@khanacademy/kas": "2.0.9",
-    "@khanacademy/keypad-context": "3.0.22",
-    "@khanacademy/kmath": "2.0.22",
-    "@khanacademy/math-input": "26.0.11",
-    "@khanacademy/perseus-core": "16.1.0",
-    "@khanacademy/perseus-linter": "4.0.9",
-    "@khanacademy/perseus-score": "7.1.9",
+    "@khanacademy/keypad-context": "3.0.24",
+    "@khanacademy/kmath": "2.0.24",
+    "@khanacademy/math-input": "26.0.13",
+    "@khanacademy/perseus-core": "17.0.0",
+    "@khanacademy/perseus-linter": "4.0.11",
+    "@khanacademy/perseus-score": "7.1.11",
     "@khanacademy/perseus-utils": "2.0.5",
-    "@khanacademy/pure-markdown": "2.0.9",
-    "@khanacademy/simple-markdown": "2.0.9"
+    "@khanacademy/pure-markdown": "2.0.10",
+    "@khanacademy/simple-markdown": "2.0.10"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-banner": "4.2.0",
-    "@khanacademy/wonder-blocks-button": "10.2.4",
-    "@khanacademy/wonder-blocks-clickable": "7.1.9",
+    "@khanacademy/wonder-blocks-banner": "4.2.4",
+    "@khanacademy/wonder-blocks-button": "10.2.8",
+    "@khanacademy/wonder-blocks-clickable": "7.1.12",
     "@khanacademy/wonder-blocks-core": "12.3.0",
     "@khanacademy/wonder-blocks-data": "14.1.4",
-    "@khanacademy/wonder-blocks-dropdown": "10.1.10",
-    "@khanacademy/wonder-blocks-form": "7.1.22",
-    "@khanacademy/wonder-blocks-icon-button": "10.3.3",
-    "@khanacademy/wonder-blocks-icon": "5.2.3",
-    "@khanacademy/wonder-blocks-labeled-field": "3.0.17",
-    "@khanacademy/wonder-blocks-layout": "3.1.20",
-    "@khanacademy/wonder-blocks-link": "9.1.9",
-    "@khanacademy/wonder-blocks-pill": "3.1.22",
-    "@khanacademy/wonder-blocks-popover": "6.1.11",
-    "@khanacademy/wonder-blocks-progress-spinner": "3.1.20",
-    "@khanacademy/wonder-blocks-switch": "3.3.2",
-    "@khanacademy/wonder-blocks-tokens": "11.1.0",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.25",
-    "@khanacademy/wonder-blocks-typography": "4.2.4",
-    "@khanacademy/wonder-stuff-core": "1.5.4",
+    "@khanacademy/wonder-blocks-dropdown": "10.2.2",
+    "@khanacademy/wonder-blocks-form": "7.1.26",
+    "@khanacademy/wonder-blocks-icon-button": "10.3.7",
+    "@khanacademy/wonder-blocks-icon": "5.2.6",
+    "@khanacademy/wonder-blocks-labeled-field": "3.0.21",
+    "@khanacademy/wonder-blocks-layout": "3.1.23",
+    "@khanacademy/wonder-blocks-link": "9.1.12",
+    "@khanacademy/wonder-blocks-pill": "3.1.27",
+    "@khanacademy/wonder-blocks-popover": "6.1.15",
+    "@khanacademy/wonder-blocks-progress-spinner": "3.1.23",
+    "@khanacademy/wonder-blocks-switch": "3.3.5",
+    "@khanacademy/wonder-blocks-tokens": "11.2.1",
+    "@khanacademy/wonder-blocks-tooltip": "4.1.29",
+    "@khanacademy/wonder-blocks-typography": "4.2.8",
+    "@khanacademy/wonder-stuff-core": "1.5.5",
     "@phosphor-icons/core": "2.0.2",
     "@popperjs/core": "2.10.2",
     "aphrodite": "1.2.5",
@@ -90,26 +90,26 @@
     "raphael": "1.5.4"
   },
   "peerDependencies": {
-    "@khanacademy/wonder-blocks-banner": "^4.2.0",
-    "@khanacademy/wonder-blocks-button": "^10.2.4",
-    "@khanacademy/wonder-blocks-clickable": "^7.1.9",
+    "@khanacademy/wonder-blocks-banner": "^4.2.4",
+    "@khanacademy/wonder-blocks-button": "^10.2.8",
+    "@khanacademy/wonder-blocks-clickable": "^7.1.12",
     "@khanacademy/wonder-blocks-core": "^12.3.0",
     "@khanacademy/wonder-blocks-data": "^14.1.4",
-    "@khanacademy/wonder-blocks-dropdown": "^10.1.10",
-    "@khanacademy/wonder-blocks-form": "^7.1.22",
-    "@khanacademy/wonder-blocks-icon": "^5.2.3",
-    "@khanacademy/wonder-blocks-icon-button": "^10.3.3",
-    "@khanacademy/wonder-blocks-labeled-field": "^3.0.17",
-    "@khanacademy/wonder-blocks-layout": "^3.1.20",
-    "@khanacademy/wonder-blocks-link": "^9.1.9",
-    "@khanacademy/wonder-blocks-pill": "^3.1.22",
-    "@khanacademy/wonder-blocks-popover": "^6.1.11",
-    "@khanacademy/wonder-blocks-progress-spinner": "^3.1.20",
-    "@khanacademy/wonder-blocks-switch": "^3.3.2",
-    "@khanacademy/wonder-blocks-tokens": "^11.1.0",
-    "@khanacademy/wonder-blocks-tooltip": "^4.1.25",
-    "@khanacademy/wonder-blocks-typography": "^4.2.4",
-    "@khanacademy/wonder-stuff-core": "^1.5.4",
+    "@khanacademy/wonder-blocks-dropdown": "^10.2.2",
+    "@khanacademy/wonder-blocks-form": "^7.1.26",
+    "@khanacademy/wonder-blocks-icon": "^5.2.6",
+    "@khanacademy/wonder-blocks-icon-button": "^10.3.7",
+    "@khanacademy/wonder-blocks-labeled-field": "^3.0.21",
+    "@khanacademy/wonder-blocks-layout": "^3.1.23",
+    "@khanacademy/wonder-blocks-link": "^9.1.12",
+    "@khanacademy/wonder-blocks-pill": "^3.1.27",
+    "@khanacademy/wonder-blocks-popover": "^6.1.15",
+    "@khanacademy/wonder-blocks-progress-spinner": "^3.1.23",
+    "@khanacademy/wonder-blocks-switch": "^3.3.5",
+    "@khanacademy/wonder-blocks-tokens": "^11.2.1",
+    "@khanacademy/wonder-blocks-tooltip": "^4.1.29",
+    "@khanacademy/wonder-blocks-typography": "^4.2.8",
+    "@khanacademy/wonder-stuff-core": "^1.5.5",
     "@phosphor-icons/core": "^2.0.2",
     "@popperjs/core": "^2.10.2",
     "aphrodite": "^1.2.5",