@khanacademy/perseus 69.0.0 → 69.1.0

package/dist/widgets/image/image.class.d.ts

@@ -4,7 +4,7 @@ import type { WidgetProps, Widget } from "../../types";
 import type { ImagePromptJSON } from "../../widget-ai-utils/image/image-ai-utils";
 import type { PerseusImageWidgetOptions } from "@khanacademy/perseus-core";
 type ExternalProps = WidgetProps<PerseusImageWidgetOptions>;
-export interface Props extends ExternalProps {
+export interface ImageWidgetProps extends ExternalProps {
     alignment: NonNullable<ExternalProps["alignment"]>;
     title: NonNullable<ExternalProps["title"]>;
     range: NonNullable<ExternalProps["range"]>;
@@ -12,21 +12,23 @@ export interface Props extends ExternalProps {
     backgroundImage: NonNullable<ExternalProps["backgroundImage"]>;
     labels: NonNullable<ExternalProps["labels"]>;
     alt: NonNullable<ExternalProps["alt"]>;
+    longDescription: NonNullable<ExternalProps["longDescription"]>;
     caption: NonNullable<ExternalProps["caption"]>;
     linterContext: NonNullable<ExternalProps["linterContext"]>;
 }
-interface DefaultProps extends Partial<Props> {
-    alignment: Props["alignment"];
-    title: Props["title"];
-    range: Props["range"];
-    box: Props["box"];
-    backgroundImage: Props["backgroundImage"];
-    labels: Props["labels"];
-    alt: Props["alt"];
-    caption: Props["caption"];
-    linterContext: Props["linterContext"];
+interface DefaultProps extends Partial<ImageWidgetProps> {
+    alignment: ImageWidgetProps["alignment"];
+    title: ImageWidgetProps["title"];
+    range: ImageWidgetProps["range"];
+    box: ImageWidgetProps["box"];
+    backgroundImage: ImageWidgetProps["backgroundImage"];
+    labels: ImageWidgetProps["labels"];
+    alt: ImageWidgetProps["alt"];
+    longDescription: ImageWidgetProps["longDescription"];
+    caption: ImageWidgetProps["caption"];
+    linterContext: ImageWidgetProps["linterContext"];
 }
-declare class ImageWidget extends React.Component<Props> implements Widget {
+declare class ImageWidget extends React.Component<ImageWidgetProps> implements Widget {
     static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
     context: React.ContextType<typeof PerseusI18nContext>;
     static defaultProps: DefaultProps;

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-import type { Props } from "./image.class";
-export declare const ImageComponent: ({ apiOptions, alt, backgroundImage, box, caption, linterContext, labels, range, title, trackInteraction, }: Props) => React.JSX.Element;
+import type { ImageWidgetProps } from "./image.class";
+export declare const ImageComponent: (props: ImageWidgetProps) => React.JSX.Element | null;

package/dist/widgets/image/utils.d.ts

@@ -0,0 +1,15 @@
+export declare const earthMoonImage: {
+    url: string;
+    width: number;
+    height: number;
+};
+export declare const frescoImage: {
+    url: string;
+    width: number;
+    height: number;
+};
+export declare const monasteryImage: {
+    url: string;
+    width: number;
+    height: number;
+};

package/dist/widgets/interactive-graphs/graphs/components/angle-indicators.d.ts

@@ -37,5 +37,5 @@ export declare const shouldDrawArcOutside: (midpoint: vec.Vector2, vertex: vec.V
  * if the endpoints are clockwise itself - this has to be checked by the
  * caller. This is because of edge cases involving concave polygons.
  */
-export declare function shouldDrawArcOutsidePolygon(centerPoint: vec.Vector2, clockwiseEndpoints: [vec.Vector2, vec.Vector2]): boolean;
+export declare function isConcavePolygonVertex(centerPoint: vec.Vector2, clockwiseEndpoints: [vec.Vector2, vec.Vector2]): boolean;
 export {};

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

@@ -31,3 +31,8 @@ export declare function getSideLengthsFromPoints(points: Coord[], i: number, isP
  * exact side length or the approximate side length.
  */
 export declare function getPolygonSideString(sideLength: number, pointIndex: number, strings: PerseusStrings, locale: string): string;
+/**
+ * Calculate an appropriate radius for angle arcs based on the graph range.
+ * The radius scales with the range so it's visible at all graph sizes.
+ */
+export declare function calculateScaledRadius(range: [Interval, Interval]): number;

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

@@ -193,7 +193,7 @@ declare class InteractiveGraph extends React.Component<Props, State> {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
@@ -214,7 +214,6 @@ declare class InteractiveGraph extends React.Component<Props, State> {
         findWidgets: (criterion: import("../../types").FilterCriterion) => ReadonlyArray<import("../../types").Widget>;
         reviewMode: boolean;
         showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
-        onChange: import("../..").ChangeHandler;
         handleUserInput: (newUserInput: PerseusGraphType, cb?: () => void, silent?: boolean) => void;
         isLastUsedWidget: boolean;
         linterContext: import("@khanacademy/perseus-linter").LinterContextProps;

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

@@ -10,7 +10,6 @@ type DefaultProps = {
     orderMatters: Props["orderMatters"];
     padding: Props["padding"];
     problemNum: Props["problemNum"];
-    onChange: Props["onChange"];
     linterContext: Props["linterContext"];
     userInput: Props["userInput"];
 };

package/dist/widgets/mock-widgets/mock-widget.d.ts

@@ -76,7 +76,7 @@ declare class MockWidgetComponent extends React.Component<Props> implements Widg
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
@@ -97,7 +97,6 @@ declare class MockWidgetComponent extends React.Component<Props> implements Widg
         findWidgets: (criterion: import("../../types").FilterCriterion) => ReadonlyArray<Widget>;
         reviewMode: boolean;
         showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
-        onChange: import("../..").ChangeHandler;
         handleUserInput: (newUserInput: PerseusMockWidgetUserInput, cb?: () => void, silent?: boolean) => void;
         isLastUsedWidget: boolean;
         linterContext: import("@khanacademy/perseus-linter").LinterContextProps;

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

@@ -6,17 +6,7 @@ import type { PerseusNumberLineUserInput, PerseusNumberLineWidgetOptions, Number
 /**
  * The type of `this.props` inside the NumberLine widget.
  */
-type Props = WidgetProps<{
-    range: number[];
-    labelRange: Array<number | null>;
-    labelStyle: string;
-    labelTicks: boolean;
-    divisionRange: number[];
-    snapDivisions: number;
-    isTickCtrl: boolean;
-    isInequality: boolean;
-    showTooltips?: boolean;
-}, PerseusNumberLineUserInput>;
+type Props = WidgetProps<PerseusNumberLineWidgetOptions, PerseusNumberLineUserInput>;
 type CalculatedProps = Props & {
     tickStep: number;
 };
@@ -77,7 +67,7 @@ declare class NumberLine extends React.Component<Props, State> implements Widget
      */
     getSerializedState(): {
         alignment: string | null | undefined;
-        static: boolean | null | undefined;
+        static: boolean;
         range: number[];
         labelRange: (number | null)[];
         labelStyle: string;

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

@@ -83,7 +83,7 @@ export declare class NumericInput extends React.Component<NumericInputProps> imp
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
@@ -104,7 +104,6 @@ export declare class NumericInput extends React.Component<NumericInputProps> imp
         findWidgets: (criterion: import("../../types").FilterCriterion) => ReadonlyArray<Widget>;
         reviewMode: boolean;
         showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
-        onChange: import("../..").ChangeHandler;
         handleUserInput: (newUserInput: PerseusNumericInputUserInput, cb?: () => void, silent?: boolean) => void;
         isLastUsedWidget: boolean;
         linterContext: import("@khanacademy/perseus-linter").LinterContextProps;

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

@@ -41,7 +41,7 @@ export declare const NumericInputComponent: React.ForwardRefExoticComponent<impo
         hintProgressColor?: string;
         canScrollPage?: boolean;
         editorChangeDelay?: number;
-        flags?: Record<"new-radio-widget", boolean>;
+        flags?: Record<"new-radio-widget" | "image-widget-upgrade", boolean>;
     }> & {
         baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
         canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

package/dist/widgets/plotter/plotter.d.ts

@@ -130,7 +130,7 @@ export declare class Plotter extends React.Component<Props, State> implements Wi
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
@@ -151,7 +151,6 @@ export declare class Plotter extends React.Component<Props, State> implements Wi
         findWidgets: (criterion: import("../../types").FilterCriterion) => ReadonlyArray<Widget>;
         reviewMode: boolean;
         showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
-        onChange: import("../..").ChangeHandler;
         handleUserInput: (newUserInput: PerseusPlotterUserInput, cb?: () => void, silent?: boolean) => void;
         isLastUsedWidget: boolean;
         linterContext: import("@khanacademy/perseus-linter").LinterContextProps;

package/dist/widgets/radio/multiple-choice-widget.new.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ChoiceState, Widget } from "../../types";
+import type { ChoiceState, Widget, ChangeHandler } from "../../types";
 import type { PerseusRadioChoice, PerseusRadioRubric, PerseusRadioUserInput } from "@khanacademy/perseus-core";
 /**
  * Represents a single choice in the MultipleChoiceComponent
@@ -28,6 +28,7 @@ export type RadioProps = {
     choiceStates?: ReadonlyArray<ChoiceState>;
     editMode?: boolean;
     labelWrap?: boolean;
+    onChange: ChangeHandler;
 };
 /**
  * RadioChoiceWithMetadata is used for server-side scoring

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { PerseusI18nContext } from "../../components/i18n-context";
 import type { FocusFunction } from "./base-radio";
-import type { WidgetProps, ChoiceState, Widget } from "../../types";
+import type { WidgetProps, ChoiceState, Widget, ChangeHandler } from "../../types";
 import type { RadioPromptJSON } from "../../widget-ai-utils/radio/radio-ai-utils";
 import type { PerseusRadioChoice, ShowSolutions, PerseusRadioRubric, PerseusRadioUserInput, PerseusRadioWidgetOptions } from "@khanacademy/perseus-core";
 export type RadioProps = PerseusRadioWidgetOptions & {
@@ -13,6 +13,7 @@ export type RadioProps = PerseusRadioWidgetOptions & {
     choices: RadioChoiceWithMetadata[];
     showSolutions?: ShowSolutions;
     choiceStates?: ChoiceState[];
+    onChange: ChangeHandler;
 };
 export type Props = WidgetProps<RadioProps, PerseusRadioUserInput, PerseusRadioRubric>;
 type DefaultProps = Required<Pick<Props, "choices" | "multipleSelect" | "countChoices" | "deselectEnabled" | "linterContext" | "showSolutions">>;

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

@@ -37,6 +37,7 @@ declare class Radio extends RadioOld {
         deselectEnabled?: boolean;
         showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
         choiceStates?: ChoiceState[];
+        onChange: import("../..").ChangeHandler;
         reviewModeRubric?: PerseusRadioRubric | null | undefined;
         trackInteraction: (extraData?: Empty | undefined) => void;
         widgetId: string;
@@ -77,7 +78,7 @@ declare class Radio extends RadioOld {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
@@ -97,7 +98,6 @@ declare class Radio extends RadioOld {
         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;

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

@@ -60,7 +60,6 @@ interface GetA11yTextProps {
  * @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.

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

@@ -6,6 +6,7 @@ import type { PerseusTableWidgetOptions, PerseusTableUserInput } from "@khanacad
 type EditorProps = {
     editableHeaders: boolean;
     Editor: any;
+    onChange: (headers: PerseusTableWidgetOptions["headers"]) => void;
 };
 type Props = WidgetProps<PerseusTableWidgetOptions, PerseusTableUserInput> & EditorProps;
 type DefaultProps = {
@@ -52,10 +53,7 @@ declare class Table extends React.Component<Props> implements Widget {
         problemNum: number | null | undefined;
         apiOptions: Readonly<Readonly<{
             isArticle?: boolean;
-            onFocusChange?: (newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadHeight? /**
-             * @deprecated and likely very broken API
-             * [LEMS-3185] do not trust serializedState
-             */: number, focusedElement?: HTMLElement) => unknown;
+            onFocusChange?: (newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
             GroupMetadataEditor?: React.ComponentType<any>;
             showAlignmentOptions?: boolean;
             readOnly?: boolean;
@@ -86,7 +84,7 @@ declare class Table extends React.Component<Props> implements Widget {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
@@ -107,12 +105,12 @@ declare class Table extends React.Component<Props> implements Widget {
         findWidgets: (criterion: import("../../types").FilterCriterion) => ReadonlyArray<Widget>;
         reviewMode: boolean;
         showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
-        onChange: import("../..").ChangeHandler;
         handleUserInput: (newUserInput: PerseusTableUserInput, cb?: () => void, silent?: boolean) => void;
         isLastUsedWidget: boolean;
         linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
         containerSizeClass: import("../../util/sizing-utils").SizeClass;
         Editor: any;
+        onChange: (headers: PerseusTableWidgetOptions["headers"]) => void;
     };
     render(): React.ReactNode;
 }

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "69.0.0",
+  "version": "69.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -41,14 +41,14 @@
     "mafs": "0.19.0",
     "tiny-invariant": "1.3.1",
     "uuid": "^10.0.0",
-    "@khanacademy/kas": "2.1.0",
-    "@khanacademy/keypad-context": "3.2.4",
-    "@khanacademy/math-input": "26.2.4",
-    "@khanacademy/perseus-core": "19.0.2",
-    "@khanacademy/perseus-linter": "4.3.4",
-    "@khanacademy/perseus-score": "7.7.4",
+    "@khanacademy/kas": "2.1.1",
+    "@khanacademy/keypad-context": "3.2.6",
+    "@khanacademy/kmath": "2.2.6",
+    "@khanacademy/math-input": "26.2.6",
+    "@khanacademy/perseus-core": "19.1.0",
+    "@khanacademy/perseus-linter": "4.3.6",
+    "@khanacademy/perseus-score": "7.7.6",
     "@khanacademy/perseus-utils": "2.1.0",
-    "@khanacademy/kmath": "2.2.4",
     "@khanacademy/pure-markdown": "2.2.0",
     "@khanacademy/simple-markdown": "2.1.0"
   },
@@ -65,6 +65,7 @@
     "@khanacademy/wonder-blocks-labeled-field": "4.0.5",
     "@khanacademy/wonder-blocks-layout": "3.1.36",
     "@khanacademy/wonder-blocks-link": "9.2.3",
+    "@khanacademy/wonder-blocks-modal": "8.3.1",
     "@khanacademy/wonder-blocks-pill": "3.1.40",
     "@khanacademy/wonder-blocks-popover": "6.1.32",
     "@khanacademy/wonder-blocks-progress-spinner": "3.1.36",
@@ -86,8 +87,8 @@
     "react-dom": "18.2.0",
     "react-popper": "^2.2.5",
     "underscore": "1.4.4",
-    "raphael": "1.5.4",
-    "perseus-build-settings": "0.9.0"
+    "perseus-build-settings": "0.9.0",
+    "raphael": "1.5.4"
   },
   "peerDependencies": {
     "@khanacademy/wonder-blocks-banner": "^4.4.0",
@@ -102,6 +103,7 @@
     "@khanacademy/wonder-blocks-labeled-field": "^4.0.5",
     "@khanacademy/wonder-blocks-layout": "^3.1.36",
     "@khanacademy/wonder-blocks-link": "^9.2.3",
+    "@khanacademy/wonder-blocks-modal": "^8.3.1",
     "@khanacademy/wonder-blocks-pill": "^3.1.40",
     "@khanacademy/wonder-blocks-popover": "^6.1.32",
     "@khanacademy/wonder-blocks-progress-spinner": "^3.1.36",

package/dist/widgets/image/image-description-and-caption.d.ts

@@ -1,12 +0,0 @@
-import * as React from "react";
-import type { APIOptions } from "../../types";
-import type { PerseusImageBackground } from "@khanacademy/perseus-core";
-import type { LinterContextProps } from "@khanacademy/perseus-linter";
-interface Props {
-    caption: string;
-    backgroundImage: PerseusImageBackground;
-    apiOptions: APIOptions;
-    linterContext: LinterContextProps;
-}
-export declare const ImageDescriptionAndCaption: ({ caption, backgroundImage, apiOptions, linterContext, }: Props) => React.JSX.Element;
-export {};