@khanacademy/perseus 61.2.1 → 63.0.0

package/dist/widgets/phet-simulation/phet-simulation.d.ts

@@ -15,6 +15,7 @@ type State = {
         kind: "warning" | "critical";
     } | null;
     url: URL | null;
+    isFullScreen: boolean;
 };
 export declare class PhetSimulation extends React.Component<Props, State> implements Widget {
     static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
@@ -31,6 +32,25 @@ export declare class PhetSimulation extends React.Component<Props, State> implem
     displayLoadFailure: () => void;
     updateSimState(urlString: string): Promise<void>;
     showLocaleWarning(url: URL): Promise<boolean>;
+    /**
+     * Mobile App Fullscreen Implementation
+     *
+     * The mobile app environment doesn't support the standard browser fullscreen API.
+     * Instead, we implement a "fake" fullscreen mode with the following approach:
+     *
+     * 1. When fullscreen is toggled, we use a fixed position container that covers
+     *    almost the entire viewport (appFullScreenWidgetContainer)
+     * 2. We leave space at the bottom for the mobile app's Check Answer bar (66px)
+     * 3. We position a close button in the top-right corner for exiting fullscreen
+     * 4. The iframe container expands to fill the available space
+     *
+     * This differs from the web implementation which uses the browser's
+     * native Fullscreen API via requestFullscreen().
+     *
+     * Note: Unfortunately, full screen is not supported in iOS mobile web due to
+     * the lack of support for the Fullscreen API.
+     */
+    toggleFullScreen: () => void;
     render(): React.ReactNode;
 }
 export declare const makeSafeUrl: (urlString: string, locale: string) => URL | null;

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

@@ -16,7 +16,6 @@ export type ChoiceType = {
     revealNoneOfTheAbove: boolean;
     disabled: boolean;
 };
-export type FocusFunction = (choiceIndex?: number | null | undefined) => boolean;
 type Props = {
     apiOptions: APIOptions;
     choices: ReadonlyArray<ChoiceType>;
@@ -32,7 +31,6 @@ type Props = {
         checked: ReadonlyArray<boolean>;
         crossedOut: ReadonlyArray<boolean>;
     }) => void;
-    registerFocusFunction?: (arg1: FocusFunction) => void;
     isLastUsedWidget?: boolean;
 };
 /**
@@ -45,5 +43,5 @@ type Props = {
  *
  * TODO(LEMS-2994): Clean up this file.
  */
-declare const BaseRadio: ({ apiOptions, reviewModeRubric, reviewMode, choices, editMode, multipleSelect, labelWrap, countChoices, numCorrect, isLastUsedWidget, onChange, registerFocusFunction, }: Props) => React.ReactElement;
+declare const BaseRadio: ({ apiOptions, reviewModeRubric, reviewMode, choices, editMode, multipleSelect, labelWrap, countChoices, numCorrect, isLastUsedWidget, onChange, }: Props) => React.ReactElement;
 export default BaseRadio;

package/dist/widgets/radio/choice-icon/choice-icon-styles.d.ts

@@ -0,0 +1,9 @@
+export declare const CHOICE_ICON_SIZE = 24;
+declare const styles: {
+    readonly iconWrapper: {
+        readonly display: "inline-block";
+        readonly position: "relative";
+        readonly backgroundColor: string;
+    };
+};
+export default styles;

package/dist/widgets/radio/choice-none-above.new.d.ts

@@ -1,6 +1,14 @@
 import * as React from "react";
-import type { ChoiceProps } from "./choice";
-declare const _default: React.ForwardRefExoticComponent<ChoiceProps & {
+import type { ChoiceProps } from "./choice.new";
+interface Props extends ChoiceProps {
     showContent?: boolean;
-} & React.RefAttributes<HTMLButtonElement>>;
-export default _default;
+}
+/**
+ * This component is a duplicate of the ChoiceNoneAbove component in choice-none-above.tsx
+ * for the Radio Revitalization Project. (LEMS-2933)
+ * This component will eventually replace choice-none-above.tsx when the feature flag is no longer needed.
+ *
+ * TODO(LEMS-2994): Clean up this file.
+ */
+declare const ChoiceNoneAbove: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export default ChoiceNoneAbove;

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

@@ -19,5 +19,12 @@ export type ChoiceProps = {
         crossedOut: boolean;
     }) => void;
 };
-declare const _default: React.ForwardRefExoticComponent<ChoiceProps & React.RefAttributes<HTMLButtonElement>>;
-export default _default;
+/**
+ * This component is a duplicate of the Choice component in choice.tsx
+ * for the Radio Revitalization Project. (LEMS-2933)
+ * This component will eventually replace choice.tsx when the feature flag is no longer needed.
+ *
+ * TODO(LEMS-2994): Clean up this file.
+ */
+declare const Choice: React.ForwardRefExoticComponent<ChoiceProps & React.RefAttributes<HTMLButtonElement>>;
+export default Choice;

package/dist/widgets/radio/option-status.new.d.ts

@@ -20,5 +20,5 @@ type Props = {
  *
  * TODO(LEMS-2994): Clean up this file.
  */
-declare const OptionStatus: (props: Props) => React.ReactElement;
+declare const OptionStatus: ({ checked, correct, crossedOut, previouslyAnswered, reviewMode, }: Props) => React.ReactElement | null;
 export default OptionStatus;

package/dist/widgets/radio/{radio-component.new.d.ts → radio.class.new.d.ts}

@@ -1,9 +1,7 @@
 import * as React from "react";
-import { PerseusI18nContext } from "../../components/i18n-context";
-import type { FocusFunction } from "./base-radio.new";
 import type { WidgetProps, ChoiceState, Widget } from "../../types";
 import type { RadioPromptJSON } from "../../widget-ai-utils/radio/radio-ai-utils";
-import type { PerseusRadioChoice, ShowSolutions, PerseusRadioRubric, PerseusRadioUserInput, RecursiveReadonly } from "@khanacademy/perseus-core";
+import type { PerseusRadioChoice, ShowSolutions, PerseusRadioRubric, PerseusRadioUserInput, PerseusRadioWidgetOptions } from "@khanacademy/perseus-core";
 export type RenderProps = {
     numCorrect: number;
     hasNoneOfTheAbove?: boolean;
@@ -18,42 +16,31 @@ export type RenderProps = {
 };
 type Props = WidgetProps<RenderProps, PerseusRadioRubric>;
 type DefaultProps = Required<Pick<Props, "choices" | "multipleSelect" | "countChoices" | "deselectEnabled" | "linterContext" | "showSolutions">>;
-export type RadioChoiceWithMetadata = PerseusRadioChoice & {
+export interface RadioChoiceWithMetadata extends PerseusRadioChoice {
     originalIndex: number;
     correct?: boolean;
-};
+}
 /**
- * This component is a duplicate of the Radio component in radio.tsx
- * for the Radio Revitalization Project. (LEMS-2933)
- * This component will be split up to move the rendering logic to a new functional component.
- * This file will be renamed to radio.class.tsx and will supercede radio-component.tsx when
- * the feature flag is no longer needed.
+ * This component is holds the class methods for the radio widget, that were split
+ * out of radio-component.new.tsx for the Radio Revitalization Project. (LEMS-2933)
+ * This component will be the main entry point for the radio widget when the feature
+ * flag is no longer needed.
  *
  * TODO(LEMS-2994): Clean up this file.
  */
 declare class Radio extends React.Component<Props> implements Widget {
-    static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
-    context: React.ContextType<typeof PerseusI18nContext>;
-    focusFunction: FocusFunction;
     static defaultProps: DefaultProps;
     static getUserInputFromProps(props: Props, unshuffle?: boolean): PerseusRadioUserInput;
-    componentDidUpdate(prevProps: Props): void;
-    _renderRenderer: (content?: string) => React.ReactElement;
-    focus(choiceIndex?: number | null): boolean;
-    registerFocusFunction(fun: FocusFunction): void;
-    updateChoices: (newValueLists: Readonly<{
-        checked: ReadonlyArray<boolean>;
-        crossedOut: ReadonlyArray<boolean>;
-    }>) => void;
     getUserInput(): PerseusRadioUserInput;
     getPromptJSON(): RadioPromptJSON;
     /**
      * Turn on rationale display for the currently selected choices. Note that
      * this leaves rationales on for choices that are already showing
      * rationales.
+     * TODO: LEMS-3077 Remove deprecated class function
      * @deprecated Internal only. Use `showSolutions` prop instead.
      */
-    showRationalesForCurrentlySelectedChoices: (arg1: RecursiveReadonly<PerseusRadioRubric>) => void;
+    showRationalesForCurrentlySelectedChoices: (arg1: PerseusRadioWidgetOptions) => void;
     /**
      * Deselects any currently-selected choices that are not correct choices.
      */

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

@@ -1,6 +1,5 @@
 import * as React from "react";
 import RadioOld from "./radio-component";
-import RadioNew from "./radio-component.new";
 import type { RenderProps } from "./radio-component";
 import type { WidgetProps } from "../../types";
 import type { PerseusRadioRubric } from "@khanacademy/perseus-core";
@@ -16,7 +15,7 @@ type Props = WidgetProps<RenderProps, PerseusRadioRubric>;
  */
 declare class Radio extends RadioOld {
     ffIsOn: boolean;
-    radioRef: React.RefObject<RadioOld | RadioNew>;
+    radioRef: React.RefObject<RadioOld>;
     constructor(props: Props);
     focus(choiceIndex?: number | null): boolean;
     render(): React.ReactNode;

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { WidgetProps, ChoiceState } from "../../types";
+import type { PerseusRadioChoice, ShowSolutions, PerseusRadioRubric } from "@khanacademy/perseus-core";
+export interface RadioChoiceWithMetadata extends PerseusRadioChoice {
+    originalIndex: number;
+    correct?: boolean;
+}
+export interface RenderProps {
+    numCorrect: number;
+    hasNoneOfTheAbove?: boolean;
+    multipleSelect?: boolean;
+    countChoices?: boolean;
+    deselectEnabled?: boolean;
+    choices: ReadonlyArray<RadioChoiceWithMetadata>;
+    selectedChoices: ReadonlyArray<PerseusRadioChoice["correct"]>;
+    showSolutions?: ShowSolutions;
+    choiceStates?: ReadonlyArray<ChoiceState>;
+    values?: ReadonlyArray<boolean>;
+}
+type RadioComponentProps = WidgetProps<RenderProps, PerseusRadioRubric>;
+/**
+ * This component is a duplicate of the Radio component in radio.tsx
+ * for the Radio Revitalization Project. (LEMS-2933)
+ * This component has been split up to move the rendering logic to a new functional component.
+ * The class methods are now in radio.class.new.tsx.
+ *
+ * TODO(LEMS-2994): Clean up this file.
+ */
+declare const RadioComponent: ({ choices, multipleSelect, countChoices, deselectEnabled, linterContext, showSolutions, static: isStatic, reviewModeRubric, reviewMode, apiOptions, isLastUsedWidget, questionCompleted, findWidgets, onChange, trackInteraction, numCorrect, choiceStates, values, }: RadioComponentProps) => React.ReactElement;
+export default RadioComponent;

package/dist/widgets/radio/utils/general-utils.d.ts

@@ -0,0 +1,35 @@
+import { type ShowSolutions } from "@khanacademy/perseus-core";
+import type { ChoiceState } from "../../../types";
+import type { RadioChoiceWithMetadata } from "../radio.new";
+interface GetChoiceStatesProps {
+    choices: ReadonlyArray<RadioChoiceWithMetadata>;
+    isStatic?: boolean | null;
+    showSolutions?: ShowSolutions;
+    choiceStates?: ReadonlyArray<ChoiceState>;
+    values?: ReadonlyArray<boolean>;
+}
+/**
+ * Determine the updated choice states for the Radio widget, based on the
+ * widget's static / showSolutions states, choiceStates, and values.
+ *
+ * @param choices - The choices for the Radio widget.
+ * @param isStatic - Whether the widget is static.
+ * @param showSolutions - Whether the widget is in showSolutions mode.
+ * @param choiceStates - The choice states for the widget. (The user's current selection states.)
+ * @param values - The values for the widget. (Deprecated: The user's current selection states for old content.)
+ * @returns The updated choice states for the widget.
+ */
+export declare const getChoiceStates: ({ choices, isStatic, showSolutions, choiceStates, values, }: GetChoiceStatesProps) => ReadonlyArray<ChoiceState>;
+/**
+ * Parse the nested widgets in the content of a Radio widget.
+ * Currently this only supports passage-ref widgets, but can
+ * be extended to support other nested widgets in the future.
+ *
+ * @param content - The content of the Radio widget.
+ * @returns The parsed content and the extracted widgets.
+ */
+export declare const parseNestedWidgets: (content: string) => {
+    parsedContent: string;
+    extractedWidgets: Record<string, any>;
+};
+export {};

package/dist/widgets/radio/utils/string-utils.d.ts

@@ -0,0 +1,72 @@
+import type { PerseusStrings } from "../../../strings";
+/**
+ * Given a choice's position in the radio widget, return the corresponding
+ * "choice letter". (For example, `getChoiceLetter(0)` is "A",
+ * `getChoiceLetter(1)` is "B", etc.)
+ *
+ * All locales use English letters for the choice letters.
+ *
+ * @param pos - The position of the choice in the radio widget.
+ * @param strings - The strings for the Radio widget.
+ * @returns The choice letter for the given position.
+ */
+export declare const getChoiceLetter: (pos: number, strings: PerseusStrings) => string;
+interface GetOptionStatusTextProps {
+    checked: boolean;
+    correct: boolean;
+    crossedOut: boolean;
+    strings: PerseusStrings;
+}
+/**
+ * Get the correct (translated) string for an option status (correct, incorrect, selected, etc.)
+ *
+ * @param checked - Whether the option is checked.
+ * @param correct - Whether the option is correct.
+ * @param crossedOut - Whether the option is crossed out.
+ * @param strings - The strings for the Radio widget.
+ * @returns The appropriate string for the option status.
+ */
+export declare const getOptionStatusText: ({ checked, correct, crossedOut, strings, }: GetOptionStatusTextProps) => string;
+interface GetInstructionsTextProps {
+    multipleSelect: boolean;
+    countChoices: boolean | null | undefined;
+    numCorrect: number;
+    strings: PerseusStrings;
+}
+/**
+ * Get the (translated) instructions string for a Radio widget.
+ *
+ * This is the text that appears above the widget that explains
+ * how many choices the user should select.
+ *
+ * @param multipleSelect - Whether the widget is a multiple-select widget.
+ * @param countChoices - Whether the widget counts choices.
+ * @param numCorrect - The number of correct choices.
+ * @param strings - The strings for the Radio widget.
+ * @returns The instructions string for the widget.
+ */
+export declare const getInstructionsText: ({ multipleSelect, countChoices, numCorrect, strings, }: GetInstructionsTextProps) => string;
+interface GetA11yTextProps {
+    letter: string;
+    checked: boolean;
+    correct: boolean;
+    crossedOut: boolean;
+    showCorrectness: boolean;
+    strings: PerseusStrings;
+}
+/**
+ * Get the (translated) a11y string for a Radio widget.
+ *
+ * This string is provided to screen readers to help the user
+ * understand the current state of a Radio option.
+ *
+ * @param letter - The letter for the choice.
+ * @param checked - Whether the choice is checked.
+ * @param correct - Whether the choice is correct.
+ * @param crossedOut - Whether the choice is crossed out.
+ * @param showCorrectness - Whether the correctness is shown.
+ * @param strings - The strings for the Radio widget.
+ * @returns The a11y string for the Radio option.
+ */
+export declare const getA11yText: ({ letter, checked, correct, crossedOut, showCorrectness, strings, }: GetA11yTextProps) => string;
+export {};

package/dist/widgets.d.ts

@@ -3,38 +3,38 @@ import type { Tracking, WidgetExports, WidgetTransform } from "./types";
 import type { PerseusWidget, Version } from "@khanacademy/perseus-core";
 import type * as React from "react";
 type Editor = any;
-export declare const registerWidget: (name: string, widget: WidgetExports) => void;
-export declare const registerWidgets: (widgets: ReadonlyArray<WidgetExports>) => void;
+export declare const registerWidget: (type: string, widget: WidgetExports) => void;
+export declare const registerWidgets: (widgetArr: ReadonlyArray<WidgetExports>) => void;
 /**
  *
- * @param name - the widget that you are trying to replace
- * @param replacementName - the name of the widget that takes its place
+ * @param type - the widget that you are trying to replace
+ * @param replacementType - the type of the widget that takes its place
  *
  * e.g. replaceWidget("transformer", "deprecated-standin") will make it so the
  * transformer widget is replaced by the always correct widget
  */
-export declare const replaceWidget: (name: string, replacementName: string) => void;
+export declare const replaceWidget: (type: string, replacementType: string) => void;
 export declare const replaceDeprecatedWidgets: () => void;
 export declare const registerEditors: (editorsToRegister: ReadonlyArray<Editor>) => void;
 /**
  *
- * @param name - the widget that you are trying to replace
- * @param replacementName - the name of the widget that takes its place
+ * @param type - the widget that you are trying to replace
+ * @param replacementType - the type of the widget that takes its place
  *
  * e.g. replaceEditor("transformer", "deprecated-standin") will make it so the
  * transformer widget is replaced by the deprecated stand-in widget
  */
-export declare const replaceEditor: (name: string, replacementName: string) => void;
+export declare const replaceEditor: (type: string, replacementType: string) => void;
 export declare const replaceDeprecatedEditors: () => void;
-export declare const getWidget: (name: string) => React.ComponentType<any> | null | undefined;
-export declare const getWidgetExport: (name: string) => WidgetExports | null;
-export declare const getEditor: (name: string) => Editor | null | undefined;
-export declare const getTransform: (name: string) => WidgetTransform | null | undefined;
-export declare const getVersion: (name: string) => Version | undefined;
+export declare const getWidget: (type: string) => React.ComponentType<any> | null | undefined;
+export declare const getWidgetExport: (type: string) => WidgetExports | null;
+export declare const getEditor: (type: string) => Editor | null;
+export declare const getTransform: (type: string) => WidgetTransform | null | undefined;
+export declare const getVersion: (type: string) => Version | undefined;
 export declare const getVersionVector: () => {
     [key: string]: Version;
 };
-export declare const getPublicWidgets: () => ReadonlyArray<WidgetExports>;
+export declare const getPublicWidgets: () => Record<string, WidgetExports>;
 export declare const isAccessible: (widgetInfo: PerseusWidget) => boolean;
 export declare const getAllWidgetTypes: () => ReadonlyArray<string>;
 export declare const getRendererPropsForWidgetInfo: (widgetInfo: PerseusWidget, strings: PerseusStrings, problemNum?: number) => PerseusWidget;
@@ -47,7 +47,7 @@ export declare const traverseChildWidgets: (widgetInfo: PerseusWidget, traverseR
  * A widget implicitly supports static mode if it exports a
  * staticTransform function.
  */
-export declare const supportsStaticMode: (type: string) => boolean;
+export declare const supportsStaticMode: (type: string) => boolean | undefined;
 /**
  * Return the staticTransform function used to convert the editorProps to
  * the rendered widget state.

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "61.2.1",
+  "version": "63.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -41,16 +41,16 @@
     "mafs": "0.19.0",
     "tiny-invariant": "^1.3.1",
     "uuid": "^10.0.0",
-    "@khanacademy/kas": "2.0.3",
-    "@khanacademy/keypad-context": "3.0.8",
-    "@khanacademy/kmath": "2.0.8",
-    "@khanacademy/math-input": "25.1.3",
-    "@khanacademy/perseus-core": "10.1.0",
-    "@khanacademy/perseus-linter": "3.0.8",
-    "@khanacademy/perseus-score": "5.0.5",
-    "@khanacademy/perseus-utils": "2.0.2",
-    "@khanacademy/pure-markdown": "2.0.3",
-    "@khanacademy/simple-markdown": "2.0.3"
+    "@khanacademy/kas": "2.0.4",
+    "@khanacademy/keypad-context": "3.0.10",
+    "@khanacademy/kmath": "2.0.10",
+    "@khanacademy/math-input": "25.1.5",
+    "@khanacademy/perseus-core": "12.0.0",
+    "@khanacademy/perseus-linter": "3.0.10",
+    "@khanacademy/perseus-score": "7.0.0",
+    "@khanacademy/perseus-utils": "2.0.3",
+    "@khanacademy/pure-markdown": "2.0.4",
+    "@khanacademy/simple-markdown": "2.0.4"
   },
   "devDependencies": {
     "@khanacademy/wonder-blocks-banner": "4.1.12",
@@ -62,6 +62,7 @@
     "@khanacademy/wonder-blocks-form": "7.1.10",
     "@khanacademy/wonder-blocks-icon-button": "9.0.4",
     "@khanacademy/wonder-blocks-icon": "5.1.3",
+    "@khanacademy/wonder-blocks-labeled-field": "3.0.6",
     "@khanacademy/wonder-blocks-layout": "3.1.9",
     "@khanacademy/wonder-blocks-link": "9.0.3",
     "@khanacademy/wonder-blocks-pill": "3.1.10",
@@ -98,6 +99,7 @@
     "@khanacademy/wonder-blocks-form": "7.1.10",
     "@khanacademy/wonder-blocks-icon": "5.1.3",
     "@khanacademy/wonder-blocks-icon-button": "9.0.4",
+    "@khanacademy/wonder-blocks-labeled-field": "3.0.6",
     "@khanacademy/wonder-blocks-layout": "3.1.9",
     "@khanacademy/wonder-blocks-link": "9.0.3",
     "@khanacademy/wonder-blocks-pill": "3.1.10",

package/dist/widgets/radio/choice-a11y-text.new.d.ts

@@ -1,14 +0,0 @@
-import type { PerseusStrings } from "../../strings";
-/**
- * This function is used to generate the a11y text for the radio widget.
- * It is used in the radio-component.tsx file to generate the a11y text for the radio widget.
- *
- * This function is a duplicate of the getA11yText function in choice-a11y-text.ts
- * for the Radio Revitalization Project. (LEMS-2933)
- *
- * This function will eventually replace choice-a11y-text.ts when the feature flag is no longer needed.
- *
- * TODO(LEMS-2994): Clean up this file.
- */
-declare function getA11yText(letter: string, checked: boolean, correct: boolean, crossedOut: boolean, showCorrectness: boolean, strings: PerseusStrings): string;
-export default getA11yText;