@khanacademy/perseus 83.0.0 → 83.0.1

package/dist/widgets/graded-group/graded-group.d.ts

@@ -16,15 +16,6 @@ type Props = WidgetProps<PerseusGradedGroupWidgetOptions, Empty, TrackingGradedG
     onNextQuestion?: () => unknown;
     dependencies: PerseusDependenciesV2;
 };
-type DefaultProps = {
-    title: Props["title"];
-    content: Props["content"];
-    widgets: Props["widgets"];
-    images: Props["images"];
-    hint: Props["hint"];
-    hasHint: Props["hasHint"];
-    linterContext: Props["linterContext"];
-};
 type State = {
     status: (typeof GRADING_STATUSES)[keyof typeof GRADING_STATUSES];
     showHint: boolean;
@@ -34,7 +25,6 @@ type State = {
 export declare class GradedGroup extends React.Component<Props, State> implements Widget {
     static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
     context: React.ContextType<typeof PerseusI18nContext>;
-    static defaultProps: DefaultProps;
     state: State;
     rendererRef: React.RefObject<Renderer>;
     hintRendererRef: React.RefObject<Renderer>;

package/dist/widgets/group/group.d.ts

@@ -13,17 +13,10 @@ import type { FocusPath, Widget, WidgetProps } from "../../types";
 import type { GroupPromptJSON } from "../../widget-ai-utils/group/group-ai-utils";
 import type { PerseusGroupUserInput, PerseusGroupWidgetOptions, PerseusRenderer } from "@khanacademy/perseus-core";
 type Props = WidgetProps<PerseusGroupWidgetOptions, PerseusGroupUserInput>;
-type DefaultProps = {
-    content: Props["content"];
-    widgets: Props["widgets"];
-    images: Props["images"];
-    linterContext: Props["linterContext"];
-};
 declare class Group extends React.Component<Props> implements Widget {
     static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
     context: React.ContextType<typeof PerseusI18nContext>;
     rendererRef: Renderer | null | undefined;
-    static defaultProps: DefaultProps;
     componentDidMount(): void;
     getPromptJSON(): GroupPromptJSON;
     /**

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

@@ -4,134 +4,12 @@ import type { StatefulMafsGraphType } from "./stateful-mafs-graph";
 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 { PerseusGraphType, PerseusInteractiveGraphWidgetOptions, GraphRange, InteractiveGraphPublicWidgetOptions, LockedFigure, PerseusImageBackground, MarkingsType, PerseusInteractiveGraphUserInput, AxisLabelLocation, ShowAxisArrows, ShowAxisTicks } from "@khanacademy/perseus-core";
-type InteractiveGraphProps = {
-    /**
-     * Where the little black axis lines & labels (ticks) should render.
-     * Also known as the tick step. default [1, 1]
-     *
-     * NOTE(kevinb): perseus_data.go defines this as Array<number>
-     */
-    step: [number, number];
-    /**
-     * Where the grid lines on the graph will render. default [1, 1]
-     *
-     * NOTE(kevinb): perseus_data.go defines this as Array<number>
-     */
-    gridStep?: [x: number, y: number];
-    /**
-     * Where the graph points will lock to when they are dragged. default [0.5, 0.5]
-     *
-     * NOTE(kevinb): perseus_data.go defines this as Array<number>
-     */
-    snapStep?: [x: number, y: number];
-    /**
-     * An optional image to use in the background
-     */
-    backgroundImage?: PerseusImageBackground;
-    /**
-     * The type of markings to display on the graph.
-     * - axes: shows the axes without the gride lines
-     * - graph: shows the axes and the grid lines
-     * - grid: shows only the grid lines
-     * - none: shows no markings
-     */
-    markings: MarkingsType;
-    /**
-     * How to label the X and Y axis.  default: ["x", "y"]
-     */
-    labels: string[];
-    /**
-     * Where to put the axis labels on the graph.  default: "onAxis"
-     */
-    labelLocation: AxisLabelLocation;
-    /**
-     * Whether to show the Protractor tool overlaid on top of the graph
-     */
-    showProtractor: boolean;
-    /**
-     * Whether to show the Ruler tool overlaid on top of the graph.
-     * @deprecated - no longer used by the InteractiveGraph widget. The
-     * property is kept on this type to prevent its accidental reuse in future
-     * features, since it may appear in production data.
-     */
-    showRuler?: boolean;
-    /**
-     * Whether to show tooltips on the graph
-     */
-    showTooltips?: boolean;
-    /**
-     * The unit to show on the ruler.  e.g. "mm", "cm",  "m", "km", "in", "ft",
-     * "yd", "mi".
-     * @deprecated - no longer used by the InteractiveGraph widget. The
-     * property is kept on this type to prevent its accidental reuse in future
-     * features, since it may appear in production data.
-     */
-    rulerLabel?: string;
-    /**
-     * How many ticks to show on the ruler.  e.g. 1, 2, 4, 8, 10, 16. Must be
-     * an integer.
-     * @deprecated - no longer used by the InteractiveGraph widget. The
-     * property is kept on this type to prevent its accidental reuse in future
-     * features, since it may appear in production data.
-     */
-    rulerTicks?: number;
-    /**
-     * The X and Y coordinate ranges for the view of the graph.  default: [[-10, 10], [-10, 10]]
-     *
-     * NOTE(kevinb): perseus_data.go defines this as Array<Array<number>>
-     */
-    range: GraphRange;
-    /**
-     * Whether to show the arrows on the axis.
-     */
-    showAxisArrows: ShowAxisArrows;
-    /**
-     * Whether to show tick marks and tick numbers per axis.
-     */
-    showAxisTicks: ShowAxisTicks;
-    /**
-     * The type of graph
-     */
-    graph: PerseusGraphType;
-    /**
-     * The correct answer for this widget.
-     */
-    correct?: PerseusGraphType;
-    /**
-     * Shapes (points, chords, etc) displayed on the graph that cannot be moved
-     * by the user.
-     */
-    lockedFigures: LockedFigure[];
-    /**
-     * Aria label that applies to the entire graph.
-     */
-    fullGraphAriaLabel?: string;
-    /**
-     * Aria description that applies to the entire graph.
-     */
-    fullGraphAriaDescription?: string;
-};
-export type Props = WidgetProps<InteractiveGraphProps, PerseusInteractiveGraphUserInput>;
-type DefaultProps = {
-    labels: string[];
-    labelLocation: Props["labelLocation"];
-    range: Props["range"];
-    showAxisArrows: Props["showAxisArrows"];
-    showAxisTicks: Props["showAxisTicks"];
-    step: Props["step"];
-    backgroundImage: Props["backgroundImage"];
-    markings: Props["markings"];
-    showTooltips: Props["showTooltips"];
-    showProtractor: Props["showProtractor"];
-    userInput: Props["userInput"];
-};
-type State = any;
-declare class InteractiveGraph extends React.Component<Props, State> {
+import type { PerseusGraphType, PerseusInteractiveGraphWidgetOptions, InteractiveGraphPublicWidgetOptions, PerseusInteractiveGraphUserInput } from "@khanacademy/perseus-core";
+export type Props = WidgetProps<PerseusInteractiveGraphWidgetOptions, PerseusInteractiveGraphUserInput>;
+declare class InteractiveGraph extends React.Component<Props> {
     static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
     context: React.ContextType<typeof PerseusI18nContext>;
     mafsRef: React.RefObject<StatefulMafsGraphType>;
-    static defaultProps: DefaultProps;
     static getEquationString(props: Props): string;
     getUserInput(): PerseusInteractiveGraphUserInput;
     getPromptJSON(): InteractiveGraphPromptJSON | UnsupportedWidgetPromptJSON;
@@ -144,20 +22,20 @@ declare class InteractiveGraph extends React.Component<Props, State> {
         step: [number, number];
         gridStep?: [x: number, y: number];
         snapStep?: [x: number, y: number];
-        backgroundImage?: PerseusImageBackground;
-        markings: MarkingsType;
+        backgroundImage: import("@khanacademy/perseus-core").PerseusImageBackground;
+        markings: import("@khanacademy/perseus-core").MarkingsType;
         labels: string[];
-        labelLocation: AxisLabelLocation;
+        labelLocation: import("@khanacademy/perseus-core").AxisLabelLocation;
+        showAxisArrows: import("@khanacademy/perseus-core").ShowAxisArrows;
+        showAxisTicks: import("@khanacademy/perseus-core").ShowAxisTicks;
         showProtractor: boolean;
         showRuler?: boolean;
-        showTooltips?: boolean;
+        showTooltips: boolean;
         rulerLabel?: string;
         rulerTicks?: number;
-        range: GraphRange;
-        showAxisArrows: ShowAxisArrows;
-        showAxisTicks: ShowAxisTicks;
-        correct?: PerseusGraphType;
-        lockedFigures: LockedFigure[];
+        range: import("@khanacademy/perseus-core").GraphRange;
+        correct: PerseusGraphType;
+        lockedFigures: import("@khanacademy/perseus-core").LockedFigure[];
         fullGraphAriaLabel?: string;
         fullGraphAriaDescription?: string;
         trackInteraction: (extraData?: Empty | undefined) => void;

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

@@ -1,3 +1,19 @@
 import type { StrokeWeight } from "@khanacademy/perseus-core";
+import type * as React from "react";
 export declare const strokeWeights: Record<StrokeWeight, number>;
+/**
+ * A dashed locked figure's `stroke-dasharray`, scaled to the stroke width so the
+ * dashes stay visible at every weight. mafs hardcodes `4, 3` regardless of
+ * width, making thick lines read as nearly solid; this restores legacy graphie's
+ * width-proportional pattern (Raphael's `[4, 3]` × width). Thin yields `4, 3`,
+ * unchanged.
+ */
+export declare function getDashArrayForWeight(weight: StrokeWeight): string;
+/**
+ * Inline `<g>` style that sets `--mafs-line-stroke-dash-style` to the
+ * weight-scaled dash pattern; mafs reads that variable for every dashed
+ * primitive (Line, Vector, Polygon, Ellipse, Plot) below. `undefined` for solid
+ * figures, so no inline style is emitted.
+ */
+export declare function dashedStrokeStyle(isDashed: boolean, weight: StrokeWeight): React.CSSProperties | undefined;
 export declare function clampDomain(domain: [number | null, number | null], graphBounds: [number, number]): [number, number] | null;

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

@@ -0,0 +1,27 @@
+import type { InteractiveGraphAction } from "../reducer/interactive-graph-action";
+import type { InteractiveGraphState } from "../types";
+import type { LockedFigure } from "@khanacademy/perseus-core";
+import type * as React from "react";
+/**
+ * A contiguous run of locked figures sharing the same clipping treatment.
+ * Points render unclipped (a boundary point would otherwise be sliced in half
+ * by the clip); every other figure is clipped to the graph's visible range.
+ */
+export interface LockedFigureClipRun {
+    clipped: boolean;
+    figures: LockedFigure[];
+}
+/**
+ * Group locked figures into contiguous runs by clipping treatment, preserving
+ * author order. Rendering all points in one pass would push them after every
+ * other figure, so the DOM (and screen-reader) order would no longer match the
+ * authored order; grouping into ordered runs keeps them interleaved as authored.
+ *
+ * Label figures are skipped: they render in GraphLockedLabelsLayer, not this
+ * layer, so including them would emit empty clip wrappers and split point runs.
+ */
+export declare function getLockedFigureClipRuns(lockedFigures: ReadonlyArray<LockedFigure>): ReadonlyArray<LockedFigureClipRun>;
+export declare function handleFocusEvent(event: React.FocusEvent, state: InteractiveGraphState, dispatch: (action: InteractiveGraphAction) => unknown): void;
+export declare function handleBlurEvent(_event: React.FocusEvent, state: InteractiveGraphState, dispatch: (action: InteractiveGraphAction) => unknown): void;
+export declare function handleKeyboardEvent(event: React.KeyboardEvent, state: InteractiveGraphState, dispatch: (action: InteractiveGraphAction) => unknown): void;
+export declare function describedByIds(...args: Array<string | false | 0 | null | undefined>): string | undefined;

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

@@ -5,9 +5,6 @@ import type { MockWidgetPromptJSON } from "../../widget-ai-utils/mock-widget/pro
 import type { PerseusMockWidgetUserInput } from "@khanacademy/perseus-score";
 type ExternalProps = WidgetProps<MockWidgetOptions, PerseusMockWidgetUserInput>;
 type Props = ExternalProps;
-type DefaultProps = {
-    userInput: Props["userInput"];
-};
 /**
  * This is a Mock Perseus widget, which is used for our various rendering tests
  * both internally and in consuming projects. It is a simple widget that renders
@@ -21,7 +18,6 @@ type DefaultProps = {
  * You can register this widget for your tests by calling `registerWidget("mock-widget", MockWidget);`
  */
 declare class MockWidgetComponent extends React.Component<Props> implements Widget {
-    static defaultProps: DefaultProps;
     inputRef: HTMLElement | null;
     getPromptJSON(): MockWidgetPromptJSON;
     focus: () => boolean;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "83.0.0",
+  "version": "83.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -43,40 +43,40 @@
     "mafs": "0.19.0",
     "tiny-invariant": "1.3.1",
     "uuid": "^10.0.0",
-    "@khanacademy/kas": "2.2.5",
-    "@khanacademy/keypad-context": "3.2.79",
-    "@khanacademy/kmath": "2.4.38",
-    "@khanacademy/math-input": "26.6.8",
-    "@khanacademy/perseus-core": "34.0.1",
-    "@khanacademy/perseus-linter": "5.1.19",
-    "@khanacademy/perseus-score": "8.12.11",
+    "@khanacademy/kas": "2.2.6",
+    "@khanacademy/keypad-context": "3.2.80",
+    "@khanacademy/kmath": "2.4.39",
+    "@khanacademy/math-input": "27.0.0",
+    "@khanacademy/perseus-core": "34.0.2",
+    "@khanacademy/perseus-linter": "5.1.20",
+    "@khanacademy/perseus-score": "8.12.12",
     "@khanacademy/perseus-utils": "2.1.5",
-    "@khanacademy/pure-markdown": "2.3.1",
-    "@khanacademy/simple-markdown": "3.0.0"
+    "@khanacademy/pure-markdown": "2.3.2",
+    "@khanacademy/simple-markdown": "3.0.1"
   },
   "devDependencies": {
     "@khanacademy/wonder-blocks-announcer": "1.1.1",
-    "@khanacademy/wonder-blocks-banner": "5.1.10",
-    "@khanacademy/wonder-blocks-button": "11.7.6",
-    "@khanacademy/wonder-blocks-clickable": "8.2.8",
+    "@khanacademy/wonder-blocks-banner": "5.1.11",
+    "@khanacademy/wonder-blocks-button": "11.7.7",
+    "@khanacademy/wonder-blocks-clickable": "8.2.9",
     "@khanacademy/wonder-blocks-core": "12.4.4",
     "@khanacademy/wonder-blocks-data": "15.0.3",
-    "@khanacademy/wonder-blocks-dropdown": "10.11.7",
-    "@khanacademy/wonder-blocks-form": "7.6.9",
-    "@khanacademy/wonder-blocks-icon": "5.3.22",
-    "@khanacademy/wonder-blocks-icon-button": "11.4.4",
-    "@khanacademy/wonder-blocks-labeled-field": "4.1.8",
-    "@khanacademy/wonder-blocks-layout": "3.1.59",
-    "@khanacademy/wonder-blocks-link": "10.3.8",
-    "@khanacademy/wonder-blocks-modal": "8.7.10",
-    "@khanacademy/wonder-blocks-pill": "3.1.72",
-    "@khanacademy/wonder-blocks-popover": "6.3.11",
-    "@khanacademy/wonder-blocks-progress-spinner": "3.1.59",
-    "@khanacademy/wonder-blocks-switch": "3.4.8",
+    "@khanacademy/wonder-blocks-dropdown": "10.11.8",
+    "@khanacademy/wonder-blocks-form": "7.6.10",
+    "@khanacademy/wonder-blocks-icon": "5.3.23",
+    "@khanacademy/wonder-blocks-icon-button": "11.4.5",
+    "@khanacademy/wonder-blocks-labeled-field": "4.1.9",
+    "@khanacademy/wonder-blocks-layout": "3.1.60",
+    "@khanacademy/wonder-blocks-link": "10.3.9",
+    "@khanacademy/wonder-blocks-modal": "8.7.11",
+    "@khanacademy/wonder-blocks-pill": "3.1.73",
+    "@khanacademy/wonder-blocks-popover": "6.3.12",
+    "@khanacademy/wonder-blocks-progress-spinner": "3.1.60",
+    "@khanacademy/wonder-blocks-switch": "3.4.9",
     "@khanacademy/wonder-blocks-timing": "7.1.0",
-    "@khanacademy/wonder-blocks-tokens": "17.2.0",
-    "@khanacademy/wonder-blocks-tooltip": "4.2.0",
-    "@khanacademy/wonder-blocks-typography": "5.0.2",
+    "@khanacademy/wonder-blocks-tokens": "17.3.0",
+    "@khanacademy/wonder-blocks-tooltip": "4.2.1",
+    "@khanacademy/wonder-blocks-typography": "5.0.3",
     "@khanacademy/wonder-stuff-core": "3.0.0",
     "@phosphor-icons/core": "2.0.2",
     "@popperjs/core": "2.10.2",
@@ -88,32 +88,32 @@
     "react-dom": "18.2.0",
     "react-popper": "^2.2.5",
     "underscore": "1.4.4",
-    "perseus-build-settings": "0.9.0",
+    "perseus-build-settings": "0.9.1",
     "raphael": "1.5.4"
   },
   "peerDependencies": {
     "@khanacademy/wonder-blocks-announcer": "^1.1.1",
-    "@khanacademy/wonder-blocks-banner": "^5.1.10",
-    "@khanacademy/wonder-blocks-button": "^11.7.6",
-    "@khanacademy/wonder-blocks-clickable": "^8.2.8",
+    "@khanacademy/wonder-blocks-banner": "^5.1.11",
+    "@khanacademy/wonder-blocks-button": "^11.7.7",
+    "@khanacademy/wonder-blocks-clickable": "^8.2.9",
     "@khanacademy/wonder-blocks-core": "^12.4.4",
     "@khanacademy/wonder-blocks-data": "^15.0.3",
-    "@khanacademy/wonder-blocks-dropdown": "^10.11.7",
-    "@khanacademy/wonder-blocks-form": "^7.6.9",
-    "@khanacademy/wonder-blocks-icon": "^5.3.22",
-    "@khanacademy/wonder-blocks-icon-button": "^11.4.4",
-    "@khanacademy/wonder-blocks-labeled-field": "^4.1.8",
-    "@khanacademy/wonder-blocks-layout": "^3.1.59",
-    "@khanacademy/wonder-blocks-link": "^10.3.8",
-    "@khanacademy/wonder-blocks-modal": "^8.7.10",
-    "@khanacademy/wonder-blocks-pill": "^3.1.72",
-    "@khanacademy/wonder-blocks-popover": "^6.3.11",
-    "@khanacademy/wonder-blocks-progress-spinner": "^3.1.59",
-    "@khanacademy/wonder-blocks-switch": "^3.4.8",
+    "@khanacademy/wonder-blocks-dropdown": "^10.11.8",
+    "@khanacademy/wonder-blocks-form": "^7.6.10",
+    "@khanacademy/wonder-blocks-icon": "^5.3.23",
+    "@khanacademy/wonder-blocks-icon-button": "^11.4.5",
+    "@khanacademy/wonder-blocks-labeled-field": "^4.1.9",
+    "@khanacademy/wonder-blocks-layout": "^3.1.60",
+    "@khanacademy/wonder-blocks-link": "^10.3.9",
+    "@khanacademy/wonder-blocks-modal": "^8.7.11",
+    "@khanacademy/wonder-blocks-pill": "^3.1.73",
+    "@khanacademy/wonder-blocks-popover": "^6.3.12",
+    "@khanacademy/wonder-blocks-progress-spinner": "^3.1.60",
+    "@khanacademy/wonder-blocks-switch": "^3.4.9",
     "@khanacademy/wonder-blocks-timing": "^7.1.0",
-    "@khanacademy/wonder-blocks-tokens": "^17.2.0",
-    "@khanacademy/wonder-blocks-tooltip": "^4.2.0",
-    "@khanacademy/wonder-blocks-typography": "^5.0.2",
+    "@khanacademy/wonder-blocks-tokens": "^17.3.0",
+    "@khanacademy/wonder-blocks-tooltip": "^4.2.1",
+    "@khanacademy/wonder-blocks-typography": "^5.0.3",
     "@khanacademy/wonder-stuff-core": "^3.0.0",
     "@phosphor-icons/core": "^2.0.2",
     "@popperjs/core": "^2.10.2",
@@ -128,7 +128,7 @@
   },
   "keywords": [],
   "khan": {
-    "catalogHash": "3f4a3330f0a56ab9"
+    "catalogHash": "bcf5b2d4681b77c1"
   },
   "scripts": {}
 }