@khanacademy/perseus 63.0.0 → 63.1.0

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

@@ -9,8 +9,7 @@ import * as React from "react";
 import { PerseusI18nContext } from "../../components/i18n-context";
 import Marker from "./marker";
 import type { DependencyProps } from "../../dependencies";
-import type { ChangeableProps } from "../../mixins/changeable";
-import type { APIOptions, Widget } from "../../types";
+import type { Widget, WidgetProps } from "../../types";
 import type { LabelImagePromptJSON } from "../../widget-ai-utils/label-image/label-image-ai-utils";
 import type { InteractiveMarkerType, PerseusLabelImageWidgetOptions, PerseusLabelImageUserInput } from "@khanacademy/perseus-core";
 type PreferredPopoverDirection = "NONE" | "UP" | "DOWN" | "LEFT" | "RIGHT";
@@ -32,10 +31,13 @@ type Point = {
     x: number;
     y: number;
 };
-type LabelImageProps = ChangeableProps & DependencyProps & Omit<PerseusLabelImageWidgetOptions, "markers"> & {
-    apiOptions: APIOptions;
-    markers: ReadonlyArray<InteractiveMarkerType>;
-    questionCompleted: boolean;
+export type OptionalAnswersMarkerType = Omit<InteractiveMarkerType, "answers"> & {
+    answers?: string[];
+};
+type Options = Omit<PerseusLabelImageWidgetOptions, "markers"> & {
+    markers: ReadonlyArray<OptionalAnswersMarkerType>;
+};
+type Props = WidgetProps<Options> & DependencyProps & {
     preferredPopoverDirection?: PreferredPopoverDirection;
 };
 type LabelImageState = {
@@ -43,7 +45,7 @@ type LabelImageState = {
     markersInteracted: boolean;
     hideAnswers: boolean;
 };
-export declare class LabelImage extends React.Component<LabelImageProps, LabelImageState> implements Widget {
+export declare class LabelImage extends React.Component<Props, LabelImageState> implements Widget {
     static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
     context: React.ContextType<typeof PerseusI18nContext>;
     _markers: Array<Marker | null | undefined>;
@@ -64,14 +66,18 @@ export declare class LabelImage extends React.Component<LabelImageProps, LabelIm
      * Given a cardinal navigation direction (in the x or y axis), return the
      * next marker index to visit.
      */
-    static navigateToMarkerIndex(navigateDirection: Direction, markers: LabelImageProps["markers"], thisIndex: number): number;
-    constructor(props: LabelImageProps);
+    static navigateToMarkerIndex(navigateDirection: Direction, markers: ReadonlyArray<{
+        x: number;
+        y: number;
+        showCorrectness?: "correct" | "incorrect";
+    }>, thisIndex: number): number;
+    constructor(props: Props);
     componentDidMount(): void;
     componentWillUnmount(): void;
     getUserInput(): PerseusLabelImageUserInput;
     getPromptJSON(): LabelImagePromptJSON;
     showRationalesForCurrentlySelectedChoices(): void;
-    handleMarkerChange(index: number, marker: LabelImageProps["markers"][number]): void;
+    handleMarkerChange(index: number, marker: Props["markers"][number]): void;
     activateMarker(index: number, opened: boolean): void;
     handleMarkerKeyDown(index: number, e: React.KeyboardEvent): void;
     handleAnswerChoicesChangeForMarker(index: number, selection: ReadonlyArray<boolean>): void;
@@ -82,10 +88,9 @@ export declare class LabelImage extends React.Component<LabelImageProps, LabelIm
 declare const _default: {
     name: string;
     displayName: string;
-    widget: React.ForwardRefExoticComponent<Omit<ChangeableProps & Partial<import("../..").PerseusDependenciesV2> & Omit<PerseusLabelImageWidgetOptions, "markers"> & {
-        apiOptions: APIOptions;
-        markers: ReadonlyArray<InteractiveMarkerType>;
-        questionCompleted: boolean;
+    widget: React.ForwardRefExoticComponent<Omit<Omit<PerseusLabelImageWidgetOptions, "markers"> & {
+        markers: ReadonlyArray<OptionalAnswersMarkerType>;
+    } & import("../../types").UniversalWidgetProps<Empty, Empty> & Partial<import("../..").PerseusDependenciesV2> & {
         preferredPopoverDirection?: PreferredPopoverDirection;
     }, keyof import("../..").PerseusDependenciesV2> & React.RefAttributes<LabelImage>>;
     accessible: true;

package/dist/widgets/label-image/marker.d.ts

@@ -5,17 +5,16 @@
  */
 import * as React from "react";
 import { PerseusI18nContext } from "../../components/i18n-context";
-import type { AnalyticsEventHandlerFn, InteractiveMarkerType } from "@khanacademy/perseus-core";
 import type { CSSProperties } from "aphrodite";
-type Props = InteractiveMarkerType & {
+type Props = {
+    selected?: string[];
+    showCorrectness?: "correct" | "incorrect";
+    label: string;
     showSelected: boolean;
     showPulsate: boolean;
     answerSide: "top" | "bottom" | "left" | "right";
     answerStyles?: CSSProperties;
     showAnswer?: boolean;
-    analytics?: {
-        onAnalyticsEvent: AnalyticsEventHandlerFn;
-    };
     focused: boolean;
     hovered: boolean;
 };

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

@@ -40,14 +40,12 @@ export declare const NumericInputComponent: React.ForwardRefExoticComponent<impo
         setDrawingAreaAvailable?: (arg1: boolean) => unknown;
         hintProgressColor?: string;
         canScrollPage?: boolean;
-        crossOutEnabled?: 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"]>;
-        crossOutEnabled: NonNullable<import("../..").APIOptions["crossOutEnabled"]>;
         editorChangeDelay: NonNullable<import("../..").APIOptions["editorChangeDelay"]>;
         groupAnnotator: NonNullable<import("../..").APIOptions["groupAnnotator"]>;
         isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;

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

@@ -3,7 +3,6 @@ import * as React from "react";
 import type { APIOptions } from "../../types";
 export type ChoiceType = {
     checked: boolean;
-    crossedOut: boolean;
     content: React.ReactNode;
     rationale: React.ReactNode;
     hasRationale: boolean;
@@ -30,7 +29,6 @@ type Props = {
     reviewMode: boolean;
     onChange: (newValues: {
         checked: ReadonlyArray<boolean>;
-        crossedOut: ReadonlyArray<boolean>;
     }) => void;
     registerFocusFunction?: (arg1: FocusFunction) => void;
     isLastUsedWidget?: boolean;

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

@@ -3,7 +3,6 @@ import * as React from "react";
 import type { APIOptions } from "../../types";
 export type ChoiceType = {
     checked: boolean;
-    crossedOut: boolean;
     content: React.ReactNode;
     rationale: React.ReactNode;
     hasRationale: boolean;
@@ -29,7 +28,6 @@ type Props = {
     reviewMode: boolean;
     onChange: (newValues: {
         checked: ReadonlyArray<boolean>;
-        crossedOut: ReadonlyArray<boolean>;
     }) => void;
     isLastUsedWidget?: boolean;
 };

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

@@ -1,3 +1,3 @@
 import type { PerseusStrings } from "../../strings";
-declare function getA11yText(letter: string, checked: boolean, correct: boolean, crossedOut: boolean, showCorrectness: boolean, strings: PerseusStrings): string;
+declare function getA11yText(letter: string, checked: boolean, correct: boolean, showCorrectness: boolean, strings: PerseusStrings): string;
 export default getA11yText;

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

@@ -3,7 +3,7 @@ declare const styles: {
     readonly iconWrapper: {
         readonly display: "inline-block";
         readonly position: "relative";
-        readonly backgroundColor: string;
+        readonly background: "linear-gradient(to right, white 10%, transparent)";
     };
 };
 export default styles;

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

@@ -2,7 +2,6 @@ import * as React from "react";
 type ChoiceIconProps = {
     pos: number;
     checked: boolean;
-    crossedOut: boolean;
     focused: boolean;
     hovered: boolean;
     pressed: boolean;

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

@@ -2,7 +2,6 @@ import * as React from "react";
 type ChoiceIconProps = {
     pos: number;
     checked: boolean;
-    crossedOut: boolean;
     focused: boolean;
     hovered: boolean;
     pressed: boolean;

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

@@ -12,11 +12,9 @@ export type ChoiceProps = {
     showRationale: boolean;
     showCorrectness: boolean;
     multipleSelect: boolean;
-    crossedOut: boolean;
     previouslyAnswered?: boolean;
     onChange?: (newValues: {
         checked: boolean;
-        crossedOut: boolean;
     }) => void;
 };
 declare const _default: React.ForwardRefExoticComponent<ChoiceProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -12,11 +12,9 @@ export type ChoiceProps = {
     showRationale: boolean;
     showCorrectness: boolean;
     multipleSelect: boolean;
-    crossedOut: boolean;
     previouslyAnswered?: boolean;
     onChange?: (newValues: {
         checked: boolean;
-        crossedOut: boolean;
     }) => void;
 };
 /**

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

@@ -9,7 +9,6 @@ import * as React from "react";
 type Props = {
     correct: boolean;
     checked: boolean;
-    crossedOut: boolean;
     previouslyAnswered: boolean;
     reviewMode: boolean;
 };

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

@@ -9,7 +9,6 @@ import * as React from "react";
 type Props = {
     correct: boolean;
     checked: boolean;
-    crossedOut: boolean;
     previouslyAnswered: boolean;
     reviewMode: boolean;
 };
@@ -20,5 +19,5 @@ type Props = {
  *
  * TODO(LEMS-2994): Clean up this file.
  */
-declare const OptionStatus: ({ checked, correct, crossedOut, previouslyAnswered, reviewMode, }: Props) => React.ReactElement | null;
+declare const OptionStatus: ({ checked, correct, previouslyAnswered, reviewMode, }: Props) => React.ReactElement | null;
 export default OptionStatus;

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

@@ -34,7 +34,6 @@ declare class Radio extends React.Component<Props> implements Widget {
     registerFocusFunction(fun: FocusFunction): void;
     updateChoices: (newValueLists: Readonly<{
         checked: ReadonlyArray<boolean>;
-        crossedOut: ReadonlyArray<boolean>;
     }>) => void;
     getUserInput(): PerseusRadioUserInput;
     getPromptJSON(): RadioPromptJSON;

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

@@ -14,7 +14,6 @@ export declare const getChoiceLetter: (pos: number, strings: PerseusStrings) =>
 interface GetOptionStatusTextProps {
     checked: boolean;
     correct: boolean;
-    crossedOut: boolean;
     strings: PerseusStrings;
 }
 /**
@@ -22,11 +21,10 @@ interface GetOptionStatusTextProps {
  *
  * @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;
+export declare const getOptionStatusText: ({ checked, correct, strings, }: GetOptionStatusTextProps) => string;
 interface GetInstructionsTextProps {
     multipleSelect: boolean;
     countChoices: boolean | null | undefined;
@@ -50,7 +48,6 @@ interface GetA11yTextProps {
     letter: string;
     checked: boolean;
     correct: boolean;
-    crossedOut: boolean;
     showCorrectness: boolean;
     strings: PerseusStrings;
 }
@@ -68,5 +65,5 @@ interface GetA11yTextProps {
  * @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 declare const getA11yText: ({ letter, checked, correct, showCorrectness, strings, }: GetA11yTextProps) => string;
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "63.0.0",
+  "version": "63.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -41,37 +41,37 @@
     "mafs": "0.19.0",
     "tiny-invariant": "^1.3.1",
     "uuid": "^10.0.0",
-    "@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"
+    "@khanacademy/kas": "2.0.5",
+    "@khanacademy/keypad-context": "3.0.11",
+    "@khanacademy/kmath": "2.0.11",
+    "@khanacademy/math-input": "26.0.0",
+    "@khanacademy/perseus-core": "12.1.0",
+    "@khanacademy/perseus-linter": "3.0.11",
+    "@khanacademy/perseus-score": "7.0.1",
+    "@khanacademy/perseus-utils": "2.0.4",
+    "@khanacademy/pure-markdown": "2.0.5",
+    "@khanacademy/simple-markdown": "2.0.5"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-banner": "4.1.12",
-    "@khanacademy/wonder-blocks-button": "9.0.0",
-    "@khanacademy/wonder-blocks-clickable": "7.0.3",
+    "@khanacademy/wonder-blocks-banner": "4.1.16",
+    "@khanacademy/wonder-blocks-button": "10.0.1",
+    "@khanacademy/wonder-blocks-clickable": "7.1.2",
     "@khanacademy/wonder-blocks-core": "12.2.1",
     "@khanacademy/wonder-blocks-data": "14.1.3",
-    "@khanacademy/wonder-blocks-dropdown": "10.0.4",
-    "@khanacademy/wonder-blocks-form": "7.1.10",
-    "@khanacademy/wonder-blocks-icon-button": "9.0.4",
+    "@khanacademy/wonder-blocks-dropdown": "10.1.1",
+    "@khanacademy/wonder-blocks-form": "7.1.14",
+    "@khanacademy/wonder-blocks-icon-button": "10.0.0",
     "@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",
-    "@khanacademy/wonder-blocks-popover": "6.0.7",
-    "@khanacademy/wonder-blocks-progress-spinner": "3.1.9",
-    "@khanacademy/wonder-blocks-switch": "3.2.2",
-    "@khanacademy/wonder-blocks-tokens": "9.0.0",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.12",
-    "@khanacademy/wonder-blocks-typography": "3.1.3",
+    "@khanacademy/wonder-blocks-labeled-field": "3.0.9",
+    "@khanacademy/wonder-blocks-layout": "3.1.13",
+    "@khanacademy/wonder-blocks-link": "9.1.2",
+    "@khanacademy/wonder-blocks-pill": "3.1.14",
+    "@khanacademy/wonder-blocks-popover": "6.1.2",
+    "@khanacademy/wonder-blocks-progress-spinner": "3.1.13",
+    "@khanacademy/wonder-blocks-switch": "3.2.6",
+    "@khanacademy/wonder-blocks-tokens": "10.2.0",
+    "@khanacademy/wonder-blocks-tooltip": "4.1.16",
+    "@khanacademy/wonder-blocks-typography": "3.2.3",
     "@khanacademy/wonder-stuff-core": "1.5.4",
     "@phosphor-icons/core": "^2.0.2",
     "@popperjs/core": "^2.10.2",
@@ -86,29 +86,29 @@
     "react-dom": "^18.2.0",
     "react-popper": "^2.2.5",
     "underscore": "^1.4.4",
-    "perseus-build-settings": "0.6.1",
-    "raphael": "1.5.3"
+    "perseus-build-settings": "0.6.2",
+    "raphael": "1.5.4"
   },
   "peerDependencies": {
-    "@khanacademy/wonder-blocks-banner": "4.1.12",
-    "@khanacademy/wonder-blocks-button": "9.0.0",
-    "@khanacademy/wonder-blocks-clickable": "7.0.3",
+    "@khanacademy/wonder-blocks-banner": "4.1.16",
+    "@khanacademy/wonder-blocks-button": "10.0.1",
+    "@khanacademy/wonder-blocks-clickable": "7.1.2",
     "@khanacademy/wonder-blocks-core": "12.2.1",
     "@khanacademy/wonder-blocks-data": "14.1.3",
-    "@khanacademy/wonder-blocks-dropdown": "10.0.4",
-    "@khanacademy/wonder-blocks-form": "7.1.10",
+    "@khanacademy/wonder-blocks-dropdown": "10.1.1",
+    "@khanacademy/wonder-blocks-form": "7.1.14",
     "@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",
-    "@khanacademy/wonder-blocks-popover": "6.0.7",
-    "@khanacademy/wonder-blocks-progress-spinner": "3.1.9",
-    "@khanacademy/wonder-blocks-switch": "3.2.2",
-    "@khanacademy/wonder-blocks-tokens": "9.0.0",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.12",
-    "@khanacademy/wonder-blocks-typography": "3.1.3",
+    "@khanacademy/wonder-blocks-icon-button": "10.0.0",
+    "@khanacademy/wonder-blocks-labeled-field": "3.0.9",
+    "@khanacademy/wonder-blocks-layout": "3.1.13",
+    "@khanacademy/wonder-blocks-link": "9.1.2",
+    "@khanacademy/wonder-blocks-pill": "3.1.14",
+    "@khanacademy/wonder-blocks-popover": "6.1.2",
+    "@khanacademy/wonder-blocks-progress-spinner": "3.1.13",
+    "@khanacademy/wonder-blocks-switch": "3.2.6",
+    "@khanacademy/wonder-blocks-tokens": "10.2.0",
+    "@khanacademy/wonder-blocks-tooltip": "4.1.16",
+    "@khanacademy/wonder-blocks-typography": "3.2.3",
     "@khanacademy/wonder-stuff-core": "1.5.4",
     "@phosphor-icons/core": "^2.0.2",
     "@popperjs/core": "^2.10.2",

package/dist/widgets/radio/choice-icon/cross-out-line.d.ts

@@ -1,9 +0,0 @@
-import * as React from "react";
-/**
- * The "cross-out line" that appears over the icon when the choice has been
- * `crossedOut`.
- */
-declare const CrossOutLine: (props: {
-    color: string;
-}) => React.ReactElement;
-export default CrossOutLine;