@khanacademy/perseus 61.2.1 → 62.0.0

package/dist/server-item-renderer.d.ts

@@ -144,6 +144,7 @@ declare const ref: React.ForwardRefExoticComponent<Omit<Pick<SharedRendererProps
         customKeypad?: boolean;
         nativeKeypadProxy?: (blur: () => void) => KeypadAPI;
         isMobile?: boolean;
+        isMobileApp?: boolean;
         setDrawingAreaAvailable?: (arg1: boolean) => unknown;
         hintProgressColor?: string;
         canScrollPage?: boolean;

package/dist/types.d.ts

@@ -186,6 +186,8 @@ export type APIOptions = Readonly<{
     nativeKeypadProxy?: (blur: () => void) => KeypadAPI;
     /** Indicates whether or not to use mobile styling. */
     isMobile?: boolean;
+    /** Indicates whether or not to use mobile app styling. */
+    isMobileApp?: boolean;
     /** A function, called with a bool indicating whether use of the
      * drawing area (scratchpad) should be allowed/disallowed.
      *
@@ -332,6 +334,7 @@ export type APIOptionsWithDefaults = Readonly<APIOptions & {
     groupAnnotator: NonNullable<APIOptions["groupAnnotator"]>;
     isArticle: NonNullable<APIOptions["isArticle"]>;
     isMobile: NonNullable<APIOptions["isMobile"]>;
+    isMobileApp: NonNullable<APIOptions["isMobileApp"]>;
     onFocusChange: NonNullable<APIOptions["onFocusChange"]>;
     readOnly: NonNullable<APIOptions["readOnly"]>;
     setDrawingAreaAvailable: NonNullable<APIOptions["setDrawingAreaAvailable"]>;

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

@@ -115,6 +115,7 @@ declare const _default: {
             customKeypad?: boolean;
             nativeKeypadProxy?: (blur: () => void) => import("@khanacademy/math-input").KeypadAPI;
             isMobile?: boolean;
+            isMobileApp?: boolean;
             setDrawingAreaAvailable?: (arg1: boolean) => unknown;
             hintProgressColor?: string;
             canScrollPage?: boolean;
@@ -130,6 +131,7 @@ declare const _default: {
             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"]>;

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

@@ -4,7 +4,7 @@ import type { Coord } from "../../interactive2/types";
 import type { Widget, WidgetProps } from "../../types";
 import type { GridDimensions } from "../../util";
 import type { GrapherPromptJSON } from "../../widget-ai-utils/grapher/grapher-ai-utils";
-import type { MarkingsType, PerseusGrapherWidgetOptions, PerseusGrapherUserInput, GrapherPublicWidgetOptions } from "@khanacademy/perseus-core";
+import type { PerseusGrapherWidgetOptions, PerseusGrapherUserInput, GrapherPublicWidgetOptions } from "@khanacademy/perseus-core";
 import type { PropsFor } from "@khanacademy/wonder-blocks-core";
 type RenderProps = Pick<GrapherPublicWidgetOptions, "availableTypes" | "graph"> & {
     plot?: PerseusGrapherWidgetOptions["correct"];
@@ -12,7 +12,6 @@ type RenderProps = Pick<GrapherPublicWidgetOptions, "availableTypes" | "graph">
 type ExternalProps = WidgetProps<RenderProps>;
 type Props = ExternalProps & {
     plot: NonNullable<RenderProps["plot"]>;
-    markings: MarkingsType;
 };
 type DefaultProps = {
     plot: RenderProps["plot"];

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

@@ -36,6 +36,7 @@ export declare const NumericInputComponent: React.ForwardRefExoticComponent<impo
         customKeypad?: boolean;
         nativeKeypadProxy?: (blur: () => void) => import("@khanacademy/math-input").KeypadAPI;
         isMobile?: boolean;
+        isMobileApp?: boolean;
         setDrawingAreaAvailable?: (arg1: boolean) => unknown;
         hintProgressColor?: string;
         canScrollPage?: boolean;
@@ -51,6 +52,7 @@ export declare const NumericInputComponent: React.ForwardRefExoticComponent<impo
         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"]>;

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-none-above.new.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ChoiceProps } from "./choice";
+import type { ChoiceProps } from "./choice.new";
 declare const _default: React.ForwardRefExoticComponent<ChoiceProps & {
     showContent?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;

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;
@@ -23,37 +21,26 @@ export type RadioChoiceWithMetadata = PerseusRadioChoice & {
     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: (props: RadioComponentProps) => React.JSX.Element;
+export default RadioComponent;

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": "62.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.9",
+    "@khanacademy/kmath": "2.0.9",
+    "@khanacademy/math-input": "25.1.4",
+    "@khanacademy/perseus-core": "11.0.0",
+    "@khanacademy/perseus-linter": "3.0.9",
+    "@khanacademy/perseus-score": "6.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",