@khanacademy/perseus 77.10.1 → 77.11.0

package/dist/testing/item-flipbook/item-flipbook-view-model.d.ts

@@ -0,0 +1,57 @@
+import type { PerseusItem } from "@khanacademy/perseus-core";
+export type NoItem = {
+    status: "no-item";
+};
+export type ParseError = {
+    status: "parse-error";
+    message: string;
+};
+export type Item = {
+    status: "item";
+    item: PerseusItem;
+    key: string;
+};
+/**
+ * The information displayed in the item display section of the UI. One of:
+ * - no item (if no data has been entered)
+ * - a parse error from the currently selected item
+ * - a valid item
+ */
+export type ItemDisplay = NoItem | ParseError | Item;
+export declare function noItem(): NoItem;
+export declare function parseError(message: string): ParseError;
+export declare function item(item: PerseusItem, key: string): Item;
+export declare function isItem(itemDisplay: ItemDisplay): itemDisplay is Item;
+export interface InputFieldChangeEvent {
+    target: {
+        value: string;
+    };
+}
+export interface InputField {
+    value: string;
+    onChange: (event: InputFieldChangeEvent) => void;
+}
+/**
+ * An abstract representation of the view. The ViewModel contains exactly the
+ * values that will be rendered in React components, but it has no dependency
+ * on React. This makes it easy to write tests that assert on exactly what the
+ * user will see, yet don't need to render components.
+ */
+export interface ViewModel {
+    /**
+     * Input where the user can type in newline-separated Perseus item JSON
+     * objects to render.
+     */
+    itemJsonInput: InputField;
+    /**
+     * Displays and controls which Perseus item from the `itemJsonInput` is
+     * currently selected for display.
+     */
+    selectedItemNumber: InputField;
+    /** The number of items, formatted for display. */
+    totalItems: string;
+    nextItem: () => void;
+    previousItem: () => void;
+    /** The data that should be rendered for the currently selected item. */
+    itemDisplay: ItemDisplay;
+}

package/dist/testing/item-flipbook/item-flipbook-view.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import type { ViewModel } from "./item-flipbook-view-model";
+interface ViewProps {
+    viewModel: ViewModel;
+}
+export declare function ItemFlipbookView({ viewModel }: ViewProps): React.JSX.Element;
+export {};

package/dist/testing/item-flipbook/item-flipbook.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function ItemFlipbook(): React.JSX.Element;

package/dist/testing/item-flipbook/safe-parse-perseus-item.d.ts

@@ -0,0 +1,2 @@
+import type { ParseFailureDetail, PerseusItem, Result } from "@khanacademy/perseus-core";
+export declare function safeParsePerseusItem(data: unknown): Result<PerseusItem, ParseFailureDetail>;

package/dist/testing/item-renderer-hooks.d.ts

@@ -39,7 +39,7 @@ export declare const useItemRenderer: (item: PerseusItem, apiOptions?: APIOption
         hintProgressColor?: string;
         canScrollPage?: boolean;
         editorChangeDelay?: number;
-        flags?: Record<"image-widget-upgrade-gif-controls" | "input-number-to-numeric-input", boolean>;
+        flags?: Record<"input-number-to-numeric-input", boolean>;
     };
     toggleMobile: (isMobile: boolean) => void;
     toggleRtl: (isRtl: boolean) => void;

package/dist/widgets/dropdown/dropdown.d.ts

@@ -52,7 +52,7 @@ declare const _default: {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"image-widget-upgrade-gif-controls" | "input-number-to-numeric-input", boolean>;
+            flags?: Record<"input-number-to-numeric-input", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

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

@@ -42,7 +42,7 @@ export declare const Expression: React.ForwardRefExoticComponent<PerseusExpressi
         hintProgressColor?: string;
         canScrollPage?: boolean;
         editorChangeDelay?: number;
-        flags?: Record<"image-widget-upgrade-gif-controls" | "input-number-to-numeric-input", boolean>;
+        flags?: Record<"input-number-to-numeric-input", boolean>;
     }> & {
         baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
         canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
@@ -122,7 +122,7 @@ declare const _default: {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"image-widget-upgrade-gif-controls" | "input-number-to-numeric-input", boolean>;
+            flags?: Record<"input-number-to-numeric-input", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

package/dist/widgets/interactive-graphs/graphs/components/movable-asymptote.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { AriaLive } from "../../types";
 import type { KeyboardMovementConstraint } from "../use-draggable";
 import type { vec } from "mafs";
 type Props = {
@@ -21,6 +22,13 @@ type Props = {
     orientation: "horizontal" | "vertical";
     /** Accessible label for the asymptote drag target. */
     ariaLabel: string;
+    /**
+     * Overrides the internal aria-live used to announce moves. Defaults to
+     * "polite".
+     * TODO(LEMS-4189): Remove once exponential is also wired to the announcer
+     * and the internal aria-live can be dropped.
+     */
+    ariaLive?: AriaLive;
     /**
      * Content rendered between the asymptote lines and the drag handle.
      * Use this to render the curve so it appears above the dashed line

package/dist/widgets/interactive-graphs/graphs/components/movable-line/index.d.ts

@@ -0,0 +1,2 @@
+export { MovableLine } from "./movable-line";
+export { getMovableLineKeyboardConstraint, insetTipAlongRay, trimRange, } from "./util";

package/dist/widgets/interactive-graphs/graphs/components/movable-line/line.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { AriaLive } from "../../../types";
+import type { vec } from "mafs";
+export interface LineProps {
+    start: vec.Vector2;
+    end: vec.Vector2;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    ariaLive?: AriaLive;
+    extend?: undefined | {
+        start: boolean;
+        end: boolean;
+    };
+    onMove: (newStart: vec.Vector2) => unknown;
+}
+export declare const Line: (props: LineProps) => React.JSX.Element;

package/dist/widgets/interactive-graphs/graphs/components/movable-line/movable-line.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { AriaLive } from "../../../types";
+import type { vec } from "mafs";
+export interface MovableLineProps {
+    points: Readonly<[vec.Vector2, vec.Vector2]>;
+    ariaLabels?: {
+        point1AriaLabel?: string;
+        point2AriaLabel?: string;
+        grabHandleAriaLabel?: string;
+    };
+    ariaDescribedBy?: string;
+    ariaLive?: AriaLive;
+    extend?: {
+        start: boolean;
+        end: boolean;
+    };
+    onMovePoint?: (endpointIndex: number, destination: vec.Vector2) => unknown;
+    onMoveLine?: (newStart: vec.Vector2) => unknown;
+}
+export declare const MovableLine: (props: MovableLineProps) => React.JSX.Element;

package/dist/widgets/interactive-graphs/graphs/components/{movable-line.d.ts → movable-line/util.d.ts}

@@ -1,24 +1,5 @@
 import { vec } from "mafs";
-import * as React from "react";
-import type { AriaLive } from "../../types";
 import type { Interval } from "mafs";
-type Props = {
-    points: Readonly<[vec.Vector2, vec.Vector2]>;
-    ariaLabels?: {
-        point1AriaLabel?: string;
-        point2AriaLabel?: string;
-        grabHandleAriaLabel?: string;
-    };
-    ariaDescribedBy?: string;
-    ariaLive?: AriaLive;
-    extend?: {
-        start: boolean;
-        end: boolean;
-    };
-    onMovePoint?: (endpointIndex: number, destination: vec.Vector2) => unknown;
-    onMoveLine?: (newStart: vec.Vector2) => unknown;
-};
-export declare const MovableLine: (props: Props) => React.JSX.Element;
 export declare const getMovableLineKeyboardConstraint: (line: [vec.Vector2, vec.Vector2], snapStep: vec.Vector2, pointIndex: number) => {
     up: vec.Vector2;
     down: vec.Vector2;
@@ -33,4 +14,3 @@ export declare function trimRange(range: [Interval, Interval], graphDimensionsIn
  * viewport edge.
  */
 export declare function insetTipAlongRay(tail: vec.Vector2, tip: vec.Vector2, range: [Interval, Interval], graphDimensionsInPixels: vec.Vector2): vec.Vector2;
-export {};

package/dist/widgets/interactive-graphs/graphs/screenreader-text.d.ts

@@ -1,7 +1,13 @@
 import type { InteractiveGraphStateAnnouncement } from "../types";
 import type { PerseusStrings } from "@khanacademy/perseus/strings";
+import type { Coord } from "@khanacademy/perseus-core";
 export declare function getAnnouncementText(state: InteractiveGraphStateAnnouncement, strings: PerseusStrings, locale: string): string;
 export declare function srCircleRadiusPointLabel(x: number, y: number, centerX: number, strings: PerseusStrings, locale: string): string;
 export declare function srCircleCenterLabel(x: number, y: number, strings: PerseusStrings, locale: string): string;
+type GraphLocations = "origin" | "x-axis" | "y-axis" | 1 | 2 | 3 | 4;
+export declare function getCoordQuadrant(coord: Coord): GraphLocations;
+export declare function getQuadraticVertexString(vertex: Coord, strings: PerseusStrings): string;
+export declare function getQuadraticPointString(pointNumber: any, coord: Coord, strings: PerseusStrings, locale: string): string;
 export declare function srFormatNumber(a: number, locale: string, maximumFractionDigits?: number): string;
 export declare function getPiMultiple(a: number): string | null;
+export {};

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

@@ -1,6 +1,7 @@
 import { vec } from "mafs";
 import type { PerseusStrings } from "../../../strings";
 import type { PairOfPoints } from "../types";
+import type { QuadraticCoefficient } from "@khanacademy/kmath";
 import type { Coord } from "@khanacademy/perseus-core";
 import type { Interval } from "mafs";
 /**
@@ -14,9 +15,14 @@ export declare const getIntersectionOfRayWithBox: (initialPoint: vec.Vector2, th
 export declare function getArrayWithoutDuplicates(array: Array<Coord>): Array<Coord>;
 export declare function getSlopeStringForLine(line: PairOfPoints, strings: PerseusStrings): string;
 export declare function getInterceptStringForLine(line: PairOfPoints, strings: PerseusStrings, locale: string): string;
-export declare function getQuadraticVertexString(vertex: Coord, strings: PerseusStrings): string;
-export declare function getQuadraticPointString(pointNumber: any, coord: Coord, strings: PerseusStrings, locale: string): string;
 export declare function getQuadraticXIntercepts(a: number, b: number, c: number): number[];
+/**
+ * Calculate the vertex of a quadratic from its coefficients.
+ *
+ * When a === 0 the parabola degenerates to a line and has no vertex, so
+ * we return undefined; otherwise the vertex is (-b/2a, c - b²/4a).
+ */
+export declare function getQuadraticVertex(coeffs: QuadraticCoefficient): Coord | undefined;
 /**
  * Given a list of points, return the angle made by the point at index i
  * with the points at indices i - 1 and i + 1.

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

@@ -199,7 +199,7 @@ declare class InteractiveGraph extends React.Component<Props, State> {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"image-widget-upgrade-gif-controls" | "input-number-to-numeric-input", boolean>;
+            flags?: Record<"input-number-to-numeric-input", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

package/dist/widgets/interactive-graphs/point-labels.d.ts

@@ -0,0 +1,2 @@
+export declare function resolveVisibleLabel(pointLabels: string[] | undefined, index: number): string | undefined;
+export declare function getEffectivePointLabels(showPointLabels: boolean | undefined, pointLabels: string[] | undefined, count: number): string[] | undefined;

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

@@ -35,6 +35,14 @@ type MoveCenterAnnouncement = {
     x: number;
     y: number;
 };
+type MoveQuadraticPointAnnouncement = {
+    type: "move-quadratic-point";
+    pointIndex: number;
+    pointLabel: string | number;
+    x: number;
+    y: number;
+    vertex: Coord | undefined;
+};
 type MoveVectorPointAnnouncement = {
     type: "move-vector-point";
     pointIndex: number;
@@ -94,6 +102,42 @@ type MoveSinusoidPointAnnouncement = {
     y: number;
     otherY: number;
 };
+type MoveExponentialPointAnnouncement = {
+    type: "move-exponential-point";
+    pointIndex: number;
+    pointLabel: string | number;
+    x: number;
+    y: number;
+};
+type MoveLogarithmPointAnnouncement = {
+    type: "move-logarithm-point";
+    pointIndex: number;
+    pointLabel: string | number;
+    x: number;
+    y: number;
+};
+type MoveExponentialAsymptoteAnnouncement = {
+    type: "move-exponential-asymptote";
+    asymptoteY: number;
+};
+type MoveTangentPointAnnouncement = {
+    type: "move-tangent-point";
+    pointIndex: number;
+    pointLabel: string | number;
+    x: number;
+    y: number;
+};
+type MoveLogarithmAsymptoteAnnouncement = {
+    type: "move-logarithm-asymptote";
+    asymptoteX: number;
+};
+type MoveAbsoluteValuePointAnnouncement = {
+    type: "move-absolute-value-point";
+    pointIndex: number;
+    pointLabel: string | number;
+    x: number;
+    y: number;
+};
 type MoveAnglePointAnnouncement = {
     type: "move-angle-point";
     pointIndex: number;
@@ -107,10 +151,11 @@ type MovePolygonAnnouncement = {
     coords: ReadonlyArray<Coord>;
     pointLabels?: ReadonlyArray<string>;
 };
-export type InteractiveGraphStateAnnouncement = MovePointAnnouncement | MoveRadiusPointAnnouncement | MoveCenterAnnouncement | MoveVectorPointAnnouncement | MoveVectorLineAnnouncement | MoveSegmentPointAnnouncement | MoveSegmentLineAnnouncement | MoveLinearSystemPointAnnouncement | MoveLinearSystemLineAnnouncement | MoveRayPointAnnouncement | MoveRayLineAnnouncement | MoveLinearLineAnnouncement | MoveSinusoidPointAnnouncement | MoveAnglePointAnnouncement | MovePolygonAnnouncement;
+export type InteractiveGraphStateAnnouncement = MovePointAnnouncement | MoveRadiusPointAnnouncement | MoveCenterAnnouncement | MoveQuadraticPointAnnouncement | MoveVectorPointAnnouncement | MoveVectorLineAnnouncement | MoveSegmentPointAnnouncement | MoveSegmentLineAnnouncement | MoveLinearSystemPointAnnouncement | MoveLinearSystemLineAnnouncement | MoveRayPointAnnouncement | MoveRayLineAnnouncement | MoveLinearLineAnnouncement | MoveSinusoidPointAnnouncement | MoveExponentialPointAnnouncement | MoveExponentialAsymptoteAnnouncement | MoveLogarithmPointAnnouncement | MoveLogarithmAsymptoteAnnouncement | MoveTangentPointAnnouncement | MoveAbsoluteValuePointAnnouncement | MoveAnglePointAnnouncement | MovePolygonAnnouncement;
 export interface InteractiveGraphStateCommon {
     hasBeenInteractedWith: boolean;
     pointLabels?: string[];
+    showPointLabels?: boolean;
     range: [xRange: Interval, yRange: Interval];
     snapStep: vec.Vector2;
     stateAnnouncement?: InteractiveGraphStateAnnouncement;

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

@@ -151,7 +151,7 @@ declare const _default: {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"image-widget-upgrade-gif-controls" | "input-number-to-numeric-input", boolean>;
+            flags?: Record<"input-number-to-numeric-input", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

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

@@ -75,7 +75,7 @@ declare class MockWidgetComponent extends React.Component<Props> implements Widg
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"image-widget-upgrade-gif-controls" | "input-number-to-numeric-input", boolean>;
+            flags?: Record<"input-number-to-numeric-input", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

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<"image-widget-upgrade-gif-controls" | "input-number-to-numeric-input", boolean>;
+            flags?: Record<"input-number-to-numeric-input", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

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

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

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

@@ -83,7 +83,7 @@ declare class Table extends React.Component<Props> implements Widget {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"image-widget-upgrade-gif-controls" | "input-number-to-numeric-input", boolean>;
+            flags?: Record<"input-number-to-numeric-input", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "77.10.1",
+  "version": "77.11.0",
   "publishConfig": {
     "access": "public"
   },
@@ -43,12 +43,12 @@
     "tiny-invariant": "1.3.1",
     "uuid": "^10.0.0",
     "@khanacademy/kas": "2.2.3",
-    "@khanacademy/keypad-context": "3.2.60",
-    "@khanacademy/kmath": "2.4.18",
-    "@khanacademy/math-input": "26.4.32",
-    "@khanacademy/perseus-core": "27.3.0",
-    "@khanacademy/perseus-linter": "5.0.15",
-    "@khanacademy/perseus-score": "8.11.2",
+    "@khanacademy/keypad-context": "3.2.61",
+    "@khanacademy/kmath": "2.4.19",
+    "@khanacademy/math-input": "26.4.33",
+    "@khanacademy/perseus-core": "27.4.0",
+    "@khanacademy/perseus-linter": "5.1.0",
+    "@khanacademy/perseus-score": "8.11.3",
     "@khanacademy/perseus-utils": "2.1.5",
     "@khanacademy/pure-markdown": "2.2.8",
     "@khanacademy/simple-markdown": "2.2.3"