@khanacademy/perseus 26.0.0 → 27.0.0

package/dist/perseus-types.d.ts

@@ -1,10 +1,6 @@
 import type { Coord } from "./interactive2/types";
 import type { Interval, vec } from "mafs";
 export type Range = Interval;
-export type Domain = {
-    min?: number;
-    max?: number;
-};
 export type Size = [number, number];
 export type CollinearTuple = [vec.Vector2, vec.Vector2];
 export type ShowSolutions = "all" | "selected" | "none";
@@ -76,8 +72,6 @@ export type PerseusWidgetsMap = {
     [key in `sorter ${number}`]: SorterWidget;
 } & {
     [key in `table ${number}`]: TableWidget;
-} & {
-    [key in `unit-input ${number}`]: UnitInputWidget;
 } & {
     [key in `video ${number}`]: VideoWidget;
 };
@@ -152,10 +146,9 @@ export type InputNumberWidget = Widget<'input-number', PerseusInputNumberWidgetO
 export type MoleculeRendererWidget = Widget<'molecule-renderer', PerseusMoleculeRendererWidgetOptions>;
 export type RefTargetWidget = Widget<'passage-ref-target', PerseusPassageRefTargetWidgetOptions>;
 export type SimpleMarkdownTesterWidget = Widget<'simple-markdown-tester', PerseusSimpleMarkdownTesterWidgetOptions>;
-export type UnitInputWidget = Widget<'unit-input', PerseusUnitInputWidgetOptions>;
 export type VideoWidget = Widget<'video', PerseusVideoWidgetOptions>;
 export type AutoCorrectWidget = Widget<'deprecated-standin', PerseusWidgetOptions>;
-export type PerseusWidget = CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ExampleGraphieWidget | ExampleWidget | ExplanationWidget | ExpressionWidget | GradedGroupSetWidget | GradedGroupWidget | GrapherWidget | GroupWidget | IFrameWidget | ImageWidget | InputNumberWidget | InteractionWidget | InteractiveGraphWidget | LabelImageWidget | MatcherWidget | MatrixWidget | MeasurerWidget | MoleculeRendererWidget | NumberLineWidget | NumericInputWidget | OrdererWidget | PassageRefWidget | PassageWidget | PlotterWidget | PythonProgramWidget | RadioWidget | RefTargetWidget | SimpleMarkdownTesterWidget | SorterWidget | TableWidget | UnitInputWidget | VideoWidget | AutoCorrectWidget;
+export type PerseusWidget = CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ExampleGraphieWidget | ExampleWidget | ExplanationWidget | ExpressionWidget | GradedGroupSetWidget | GradedGroupWidget | GrapherWidget | GroupWidget | IFrameWidget | ImageWidget | InputNumberWidget | InteractionWidget | InteractiveGraphWidget | LabelImageWidget | MatcherWidget | MatrixWidget | MeasurerWidget | MoleculeRendererWidget | NumberLineWidget | NumericInputWidget | OrdererWidget | PassageRefWidget | PassageWidget | PlotterWidget | PythonProgramWidget | RadioWidget | RefTargetWidget | SimpleMarkdownTesterWidget | SorterWidget | TableWidget | VideoWidget | AutoCorrectWidget;
 export type PerseusImageBackground = {
     url: string | null | undefined;
     width?: number;
@@ -341,10 +334,30 @@ export type PerseusInteractiveGraphWidgetOptions = {
     markings: "graph" | "grid" | "none";
     labels: ReadonlyArray<string>;
     showProtractor: boolean;
-    showRuler: boolean;
+    /**
+     * Whether to show the Ruler tool overlayed 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;
     showTooltips?: boolean;
-    rulerLabel: string;
-    rulerTicks: number;
+    /**
+     * 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;
     range: GraphRange;
     graph: PerseusGraphType;
     correct: PerseusGraphType;
@@ -403,7 +416,7 @@ export type LockedFunctionType = {
         [k: string]: any;
     };
     directionalAxis: "x" | "y";
-    domain?: Domain;
+    domain?: Interval;
 };
 export type PerseusGraphType = PerseusGraphTypeAngle | PerseusGraphTypeCircle | PerseusGraphTypeLinear | PerseusGraphTypeLinearSystem | PerseusGraphTypePoint | PerseusGraphTypePolygon | PerseusGraphTypeQuadratic | PerseusGraphTypeRay | PerseusGraphTypeSegment | PerseusGraphTypeSinusoid;
 export type PerseusGraphTypeCommon = {

package/dist/renderer.d.ts

@@ -61,6 +61,13 @@ type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
     problemNum?: number;
     questionCompleted?: boolean;
     reviewMode?: boolean | null | undefined;
+    /**
+     * Some widgets (e.g. InteractiveGraph) support "hint mode", a state where
+     * the widget is non-editable, may have a partial solution filled in,
+     * and may have special styling. Setting hintMode to true will turn on hint
+     * mode for all rendered widgets.
+     */
+    hintMode?: boolean;
     /**
      * If set to "all", all rationales or solutions will be shown. If set to
      * "selected", soltions will only be shown for selected choices. If set to
@@ -100,7 +107,7 @@ type State = {
     jiptContent: any;
     lastUsedWidgetId: string | null | undefined;
 };
-type DefaultProps = Required<Pick<Props, "alwaysUpdate" | "content" | "findExternalWidgets" | "highlightedWidgets" | "images" | "linterContext" | "onInteractWithWidget" | "onRender" | "onSerializedStateUpdated" | "questionCompleted" | "showSolutions" | "reviewMode" | "serializedState" | "widgets">>;
+type DefaultProps = Required<Pick<Props, "alwaysUpdate" | "content" | "findExternalWidgets" | "highlightedWidgets" | "images" | "linterContext" | "onInteractWithWidget" | "onRender" | "onSerializedStateUpdated" | "questionCompleted" | "showSolutions" | "reviewMode" | "hintMode" | "serializedState" | "widgets">>;
 declare class Renderer extends React.Component<Props, State> {
     _currentFocus: FocusPath | null | undefined;
     _foundTextNodes: boolean;

package/dist/types.d.ts

@@ -373,6 +373,7 @@ export type WidgetProps<RenderProps, Rubric, TrackingExtraArgs = Empty> = Render
     onBlur: (blurPath: FocusPath) => void;
     findWidgets: (arg1: FilterCriterion) => ReadonlyArray<Widget>;
     reviewModeRubric: Rubric;
+    hintMode: boolean;
     onChange: ChangeHandler;
     trackInteraction: (extraData?: TrackingExtraArgs) => void;
     isLastUsedWidget: boolean;

package/dist/widget-container.d.ts

@@ -19,7 +19,7 @@ type State = {
 declare class WidgetContainer extends React.Component<Props, State> {
     widgetRef: React.RefObject<React.ComponentType<any>>;
     static defaultProps: DefaultProps;
-    state: any;
+    state: State;
     componentDidMount(): void;
     render(): React.ReactNode;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;

package/dist/widgets/expression.d.ts

@@ -175,6 +175,7 @@ declare const _default: Readonly<{
         onBlur: (blurPath: import("../types").FocusPath) => void;
         findWidgets: (arg1: import("../types").FilterCriterion) => readonly any[];
         reviewModeRubric: PerseusExpressionWidgetOptions;
+        hintMode: boolean;
         onChange: import("../types").ChangeHandler;
         trackInteraction: (extraData?: Empty | undefined) => void;
         isLastUsedWidget: boolean;
@@ -257,7 +258,7 @@ declare const _default: Readonly<{
         onFocus: (blurPath: import("../types").FocusPath) => void;
         times: boolean;
         value: string;
-    }, "analytics" | "onChange" | "buttonsVisible" | "static" | "containerSizeClass" | "widgetId" | "problemNum" | "questionCompleted" | "findWidgets" | "trackInteraction" | "keypadElement" | "keypadConfiguration" | "alignment" | "reviewModeRubric" | "isLastUsedWidget"> & {
+    }, "analytics" | "onChange" | "buttonsVisible" | "static" | "containerSizeClass" | "widgetId" | "problemNum" | "questionCompleted" | "findWidgets" | "hintMode" | "trackInteraction" | "keypadElement" | "keypadConfiguration" | "alignment" | "reviewModeRubric" | "isLastUsedWidget"> & {
         value?: string | undefined;
         buttonSets?: import("../perseus-types").LegacyButtonSets | undefined;
         onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;
@@ -415,6 +416,7 @@ declare const _default: Readonly<{
         onBlur: (blurPath: import("../types").FocusPath) => void;
         findWidgets: (arg1: import("../types").FilterCriterion) => readonly any[];
         reviewModeRubric: PerseusExpressionWidgetOptions;
+        hintMode: boolean;
         onChange: import("../types").ChangeHandler;
         trackInteraction: (extraData?: Empty | undefined) => void;
         isLastUsedWidget: boolean;
@@ -497,7 +499,7 @@ declare const _default: Readonly<{
         onFocus: (blurPath: import("../types").FocusPath) => void;
         times: boolean;
         value: string;
-    }, "analytics" | "onChange" | "buttonsVisible" | "static" | "containerSizeClass" | "widgetId" | "problemNum" | "questionCompleted" | "findWidgets" | "trackInteraction" | "keypadElement" | "keypadConfiguration" | "alignment" | "reviewModeRubric" | "isLastUsedWidget"> & {
+    }, "analytics" | "onChange" | "buttonsVisible" | "static" | "containerSizeClass" | "widgetId" | "problemNum" | "questionCompleted" | "findWidgets" | "hintMode" | "trackInteraction" | "keypadElement" | "keypadConfiguration" | "alignment" | "reviewModeRubric" | "isLastUsedWidget"> & {
         value?: string | undefined;
         buttonSets?: import("../perseus-types").LegacyButtonSets | undefined;
         onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;

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

@@ -21,9 +21,6 @@ type DefaultProps = {
     markings: Props["markings"];
     showTooltips: Props["showTooltips"];
     showProtractor: Props["showProtractor"];
-    showRuler: Props["showRuler"];
-    rulerLabel: Props["rulerLabel"];
-    rulerTicks: Props["rulerTicks"];
     graph: Props["graph"];
 };
 declare class LegacyInteractiveGraph extends React.Component<Props, State> {

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

@@ -16,6 +16,7 @@ declare class InteractiveGraphQuestionBuilder {
     private showProtractor;
     private interactiveFigureConfig;
     private lockedFigures;
+    private snapTo;
     build(): PerseusRenderer;
     withContent(content: string): InteractiveGraphQuestionBuilder;
     withBackgroundImage(url: string, height: number, width: number, options?: {
@@ -63,7 +64,7 @@ declare class InteractiveGraphQuestionBuilder {
         coords?: [Coord, Coord];
         startCoords?: [Coord, Coord];
     }): InteractiveGraphQuestionBuilder;
-    withPolygon(snapTo: "grid" | "angles" | "sides", options?: {
+    withPolygon(snapTo?: "grid" | "angles" | "sides", options?: {
         match?: "similar" | "congruent" | "approx";
         numSides?: number | "unlimited";
         showAngles?: boolean;

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

@@ -16,5 +16,6 @@ export type MafsGraphProps = {
     labels: InteractiveGraphProps["labels"];
     state: InteractiveGraphState;
     dispatch: React.Dispatch<InteractiveGraphAction>;
+    hintMode: boolean;
 };
 export declare const MafsGraph: (props: MafsGraphProps) => React.JSX.Element;

package/dist/widgets/interactive-graphs/reducer/initialize-graph-state.d.ts

@@ -1,4 +1,4 @@
-import type { PerseusGraphType, PerseusGraphTypeLinear, PerseusGraphTypeRay } from "../../../perseus-types";
+import type { PerseusGraphType, PerseusGraphTypeLinear, PerseusGraphTypeLinearSystem, PerseusGraphTypeRay, PerseusGraphTypeSegment } from "../../../perseus-types";
 import type { InteractiveGraphState, PairOfPoints } from "../types";
 import type { Interval } from "mafs";
 export type InitializeGraphStateParams = {
@@ -8,4 +8,6 @@ export type InitializeGraphStateParams = {
     graph: PerseusGraphType;
 };
 export declare function initializeGraphState(params: InitializeGraphStateParams): InteractiveGraphState;
+export declare function getSegmentCoords(graph: PerseusGraphTypeSegment, range: [x: Interval, y: Interval], step: [x: number, y: number]): PairOfPoints[];
 export declare function getLineCoords(graph: PerseusGraphTypeRay | PerseusGraphTypeLinear, range: [x: Interval, y: Interval], step: [x: number, y: number]): PairOfPoints;
+export declare function getLinearSystemCoords(graph: PerseusGraphTypeLinearSystem, range: [x: Interval, y: Interval], step: [x: number, y: number]): PairOfPoints[];

package/dist/widgets/interactive-graphs/reducer/use-graph-config.d.ts

@@ -11,6 +11,7 @@ export type GraphConfig = {
     width: number;
     height: number;
     labels: readonly string[];
+    hintMode?: boolean;
 };
 export declare const GraphConfigContext: React.Context<GraphConfig>;
 export default function useGraphConfig(): GraphConfig;

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

@@ -17,5 +17,6 @@ export type StatefulMafsGraphProps = {
     showTooltips: Required<InteractiveGraphProps["showTooltips"]>;
     showProtractor: boolean;
     labels: InteractiveGraphProps["labels"];
+    hintMode: boolean;
 };
 export declare const StatefulMafsGraph: React.ForwardRefExoticComponent<StatefulMafsGraphProps & React.RefAttributes<Partial<Widget>>>;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "26.0.0",
+    "version": "27.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -41,13 +41,13 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.10",
         "@khanacademy/kmath": "^0.1.13",
-        "@khanacademy/math-input": "^20.0.0",
+        "@khanacademy/math-input": "^20.0.2",
         "@khanacademy/perseus-core": "1.5.0",
         "@khanacademy/perseus-linter": "^1.0.0",
         "@khanacademy/pure-markdown": "^0.3.7",
         "@khanacademy/simple-markdown": "^0.13.0",
         "@use-gesture/react": "^10.2.27",
-        "mafs": "0.18.7"
+        "mafs": "0.19.0"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-banner": "3.0.42",
@@ -61,7 +61,7 @@
         "@khanacademy/wonder-blocks-layout": "2.0.32",
         "@khanacademy/wonder-blocks-link": "6.1.1",
         "@khanacademy/wonder-blocks-pill": "2.2.1",
-        "@khanacademy/wonder-blocks-popover": "3.2.2",
+        "@khanacademy/wonder-blocks-popover": "3.2.9",
         "@khanacademy/wonder-blocks-progress-spinner": "2.1.1",
         "@khanacademy/wonder-blocks-switch": "1.1.16",
         "@khanacademy/wonder-blocks-tokens": "1.3.0",
@@ -96,7 +96,7 @@
         "@khanacademy/wonder-blocks-layout": "2.0.32",
         "@khanacademy/wonder-blocks-link": "6.1.1",
         "@khanacademy/wonder-blocks-pill": "2.2.1",
-        "@khanacademy/wonder-blocks-popover": "3.2.2",
+        "@khanacademy/wonder-blocks-popover": "3.2.9",
         "@khanacademy/wonder-blocks-progress-spinner": "2.1.1",
         "@khanacademy/wonder-blocks-switch": "1.1.16",
         "@khanacademy/wonder-blocks-tokens": "1.3.0",

package/dist/widgets/unit.d.ts

@@ -1,85 +0,0 @@
-import * as React from "react";
-import { PerseusI18nContext } from "../components/i18n-context";
-import type { PerseusUnitInputWidgetOptions } from "../perseus-types";
-import type { PerseusStrings } from "../strings";
-import type { APIOptions, ChangeHandler, FocusPath } from "../types";
-export declare const countSigfigs: (value: string) => number;
-export declare const sigfigPrint: (num: number, sigfigs: number) => string;
-type Rubric = {
-    value: string;
-    sigfigs: number;
-    accepting: "all";
-} | {
-    value: string;
-    sigfigs: number;
-    accepting: "some";
-    acceptingUnits: ReadonlyArray<string>;
-};
-type ValidationResult = {
-    type: "points";
-    earned: 1 | 0;
-    message: string | null | undefined;
-    total: number;
-} | {
-    type: "invalid";
-    message: string | null | undefined;
-};
-type Props = {
-    apiOptions: APIOptions;
-    onChange: ChangeHandler;
-    value: PerseusUnitInputWidgetOptions["value"];
-    onBlur: (arg1: FocusPath) => unknown;
-    onFocus: (arg1: FocusPath) => unknown;
-};
-type DefaultProps = {
-    apiOptions: Props["apiOptions"];
-    value: Props["value"];
-};
-export declare class OldUnitInput extends React.Component<Props> {
-    static contextType: React.Context<{
-        strings: PerseusStrings;
-        locale: string;
-    }>;
-    context: React.ContextType<typeof PerseusI18nContext>;
-    _errorTimeout: number | null | undefined;
-    static defaultProps: DefaultProps;
-    static validate(userInput: string, rubric: Rubric, strings: PerseusStrings): ValidationResult;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    _showError: () => void;
-    _hideError: () => void;
-    change: (...args: ReadonlyArray<any>) => any | null | undefined;
-    handleBlur: () => void;
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    simpleValidate: (rubric: Rubric, onInputError?: () => unknown) => ValidationResult;
-    getUserInput: () => string;
-    getInputPaths: () => ReadonlyArray<ReadonlyArray<any>>;
-    focusInputPath: (inputPath: FocusPath) => void;
-    handleFocus: () => void;
-    blurInputPath: (inputPath: FocusPath) => void;
-    setInputValue: (path: FocusPath, newValue: string, cb: () => unknown) => void;
-    getDOMNodeForPath: () => null | Element | Text;
-    getGrammarTypeForPath: (inputPath: FocusPath) => string;
-    render(): React.ReactNode;
-}
-declare const _default: Readonly<{
-    name: string;
-    displayName: string;
-    getWidget?: (() => typeof OldUnitInput) | undefined;
-    widget: typeof OldUnitInput;
-    accessible?: boolean | ((props: any) => boolean) | undefined;
-    hidden?: boolean | undefined;
-    version?: import("../types").Version | undefined;
-    supportedAlignments?: readonly import("../types").Alignment[] | undefined;
-    defaultAlignment?: import("../types").Alignment | undefined;
-    getDefaultAlignment?: (() => import("../types").Alignment) | undefined;
-    isLintable?: boolean | undefined;
-    tracking?: import("../types").Tracking | undefined;
-    traverseChildWidgets?: any;
-    transform?: import("../types").WidgetTransform | undefined;
-    staticTransform?: import("../types").WidgetTransform | undefined;
-    propUpgrades?: {
-        [key: string]: (arg1: any) => any;
-    } | undefined;
-}>;
-export default _default;