@khanacademy/perseus 66.4.0 → 66.5.0

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

@@ -6,7 +6,7 @@ import type { WidgetProps } from "../../types";
 import type { InteractiveGraphPromptJSON } from "../../widget-ai-utils/interactive-graph/interactive-graph-ai-utils";
 import type { UnsupportedWidgetPromptJSON } from "../../widget-ai-utils/unsupported-widget";
 import type { QuadraticCoefficient, SineCoefficient, Range } from "@khanacademy/kmath";
-import type { PerseusGraphType, PerseusGraphTypeAngle, PerseusGraphTypePoint, PerseusGraphTypeSegment, PerseusInteractiveGraphWidgetOptions, GraphRange, InteractiveGraphPublicWidgetOptions, LockedFigure, PerseusImageBackground, MarkingsType, PerseusInteractiveGraphUserInput, AxisLabelLocation } from "@khanacademy/perseus-core";
+import type { PerseusGraphType, PerseusGraphTypeAngle, PerseusGraphTypePoint, PerseusGraphTypeSegment, PerseusInteractiveGraphWidgetOptions, GraphRange, InteractiveGraphPublicWidgetOptions, LockedFigure, PerseusImageBackground, MarkingsType, PerseusInteractiveGraphUserInput, AxisLabelLocation, ShowAxisArrows } from "@khanacademy/perseus-core";
 type RenderProps = {
     /**
      * Where the little black axis lines & labels (ticks) should render.
@@ -87,12 +87,7 @@ type RenderProps = {
     /**
      * Whether to show the arrows on the axis.
      */
-    showAxisArrows: {
-        xMin: boolean;
-        xMax: boolean;
-        yMin: boolean;
-        yMax: boolean;
-    };
+    showAxisArrows: ShowAxisArrows;
     /**
      * The type of graph
      */
@@ -153,12 +148,7 @@ declare class InteractiveGraph extends React.Component<Props, State> {
         rulerLabel?: string;
         rulerTicks?: number;
         range: GraphRange;
-        showAxisArrows: {
-            xMin: boolean;
-            xMax: boolean;
-            yMin: boolean;
-            yMax: boolean;
-        };
+        showAxisArrows: ShowAxisArrows;
         correct?: PerseusGraphType;
         lockedFigures: LockedFigure[];
         fullGraphAriaLabel?: string;

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

@@ -13,14 +13,6 @@ export type NumericInputProps = ExternalProps & {
     linterContext: NonNullable<ExternalProps["linterContext"]>;
 };
 type DefaultProps = Pick<NumericInputProps, "size" | "rightAlign" | "apiOptions" | "coefficient" | "answerForms" | "labelText" | "linterContext" | "userInput">;
-type RenderProps = {
-    answerForms: ReadonlyArray<PerseusNumericInputAnswerForm>;
-    labelText?: string;
-    size: string;
-    coefficient: boolean;
-    rightAlign?: boolean;
-    static: boolean;
-};
 /**
  * The NumericInput widget is a numeric input field that supports a variety of
  * answer forms, including integers, decimals, fractions, and mixed numbers.
@@ -47,7 +39,6 @@ export declare class NumericInput extends React.Component<NumericInputProps> imp
      */
     getSerializedState(): {
         currentValue: string;
-        answers: import("@khanacademy/perseus-core").PerseusNumericInputAnswer[];
         labelText: string;
         size: string;
         coefficient: boolean;
@@ -132,7 +123,6 @@ declare const _default: {
     name: string;
     displayName: string;
     widget: typeof NumericInput;
-    transform: (widgetOptions: PerseusNumericInputWidgetOptions) => RenderProps;
     isLintable: true;
     getOneCorrectAnswerFromRubric(rubric: PerseusNumericInputRubric): string | null | undefined;
     getStartUserInput: typeof getStartUserInput;

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

@@ -1,5 +1,5 @@
 import type { PerseusStrings } from "../../strings";
-import type { PerseusNumericInputAnswerForm } from "@khanacademy/perseus-core";
+import type { PerseusNumericInputAnswerForm, PerseusNumericInputWidgetOptions } from "@khanacademy/perseus-core";
 /**
  * The full list of available strings for the numeric input widget,
  * based on whether the Content Creator has specified that the answer must be simplified.
@@ -23,3 +23,8 @@ export declare const shouldShowExamples: (answerForms: readonly PerseusNumericIn
  * `formExamples` forms from above.
  */
 export declare const unionAnswerForms: (answerFormsList: ReadonlyArray<ReadonlyArray<PerseusNumericInputAnswerForm>>) => ReadonlyArray<PerseusNumericInputAnswerForm>;
+/**
+ * Filter out the correct answers and map them to the answer forms
+ * so that we can generate the examples for the widget.
+ */
+export declare function normalizeCorrectAnswerForms(answers: PerseusNumericInputWidgetOptions["answers"]): ReadonlyArray<PerseusNumericInputAnswerForm>;

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

@@ -1,11 +1,17 @@
-import * as React from "react";
-export type IndicatorProps = {
+import React from "react";
+export interface IndicatorContent {
+    visible: string;
+    screenReader: string;
+    labelledBy?: string;
+    describedBy?: string;
+}
+export interface IndicatorProps {
     buttonRef: React.Ref<HTMLButtonElement>;
     checked: boolean;
-    content: string;
+    content: IndicatorContent;
     shape: "circle" | "square";
     showCorrectness?: "correct" | "wrong";
     updateChecked: (isChecked: boolean) => void;
-};
+}
 declare const Indicator: (props: IndicatorProps) => React.JSX.Element;
 export default Indicator;

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

@@ -1,8 +1,9 @@
 import React from "react";
+import type { IndicatorContent } from "./choice-indicator.new";
 export interface IndicatorProps {
     checked: boolean;
     children: React.ReactNode | React.ReactNode[];
-    indicatorContent: string;
+    indicatorContent: IndicatorContent;
     isMultiSelect: boolean;
     showCorrectness?: "correct" | "wrong";
     updateChecked: (isChecked: boolean) => void;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import type { ChoiceType } from "./multiple-choice-widget.new";
 /**
  * Props for the MultipleChoiceComponent
@@ -20,6 +20,18 @@ export interface MultipleChoiceComponentProps {
  *
  * Supports both radio button (single select) and checkbox (multiple select) modes.
  *
+ * NOTE: This widget does not implement standard radio button or checkbox elements.
+ *       The key difference is that the single-select (aka radio button) should
+ *           allow the user to deselect a choice, whereas regular radio buttons
+ *           can only be deselected by selecting another choice.
+ *       Another difference is that keyboard navigation with single-select is
+ *           done with the tab key, whereas regular radio buttons use the arrow keys,
+ *           and the radio buttons are automatically selected when navigating to them.
+ *       Since interactions with the single-select version of this widget don't
+ *           follow the standard radio button behavior, we decided to use toggle
+ *           button semantics for both versions of the widget,
+ *           and implement additional ARIA attributes where needed.
+ *
  * Created as part of the Radio Revitalization Project (LEMS-2933).
  */
 declare const MultipleChoiceComponent: ({ choices, countChoices, multipleSelect, numCorrect, onChoiceChange, reviewMode, }: MultipleChoiceComponentProps) => React.ReactElement;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "66.4.0",
+  "version": "66.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,14 +42,14 @@
     "tiny-invariant": "1.3.1",
     "uuid": "^10.0.0",
     "@khanacademy/kas": "2.1.0",
-    "@khanacademy/keypad-context": "3.1.3",
-    "@khanacademy/kmath": "2.1.3",
-    "@khanacademy/math-input": "26.1.4",
-    "@khanacademy/perseus-core": "18.6.0",
-    "@khanacademy/perseus-linter": "4.2.3",
-    "@khanacademy/perseus-score": "7.6.0",
+    "@khanacademy/keypad-context": "3.1.4",
+    "@khanacademy/kmath": "2.1.4",
+    "@khanacademy/math-input": "26.1.5",
+    "@khanacademy/perseus-core": "18.7.0",
+    "@khanacademy/perseus-linter": "4.2.4",
     "@khanacademy/perseus-utils": "2.1.0",
     "@khanacademy/pure-markdown": "2.2.0",
+    "@khanacademy/perseus-score": "7.6.1",
     "@khanacademy/simple-markdown": "2.1.0"
   },
   "devDependencies": {