@khanacademy/perseus 21.3.1 → 21.4.0

package/dist/perseus-types.d.ts

@@ -3,6 +3,7 @@ import type { Interval, vec } from "mafs";
 export type Range = Interval;
 export type Size = [number, number];
 export type CollinearTuple = readonly [vec.Vector2, vec.Vector2];
+export type ShowSolutions = "all" | "selected" | "none";
 export type StyleParams = {
     fill?: string;
     stroke?: string;

package/dist/renderer.d.ts

@@ -3,7 +3,7 @@ import InteractionTracker from "./interaction-tracker";
 import TranslationLinter from "./translation-linter";
 import WidgetContainer from "./widget-container";
 import type { DependenciesContext } from "./dependencies";
-import type { PerseusRenderer, PerseusWidget, PerseusWidgetOptions, PerseusWidgetsMap } from "./perseus-types";
+import type { PerseusRenderer, PerseusWidget, PerseusWidgetOptions, PerseusWidgetsMap, ShowSolutions } from "./perseus-types";
 import type { APIOptions, APIOptionsWithDefaults, FilterCriterion, FocusPath, PerseusScore, WidgetProps } from "./types";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
 import "./styles/perseus-renderer.less";
@@ -60,14 +60,31 @@ type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
     problemNum?: number;
     questionCompleted?: boolean;
     reviewMode?: boolean | null | undefined;
+    /**
+     * 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
+     * "none", solutions will not be shown-- equivalent to `undefined`.
+     */
+    showSolutions?: ShowSolutions;
     content: PerseusRenderer["content"];
     serializedState?: any;
+    /**
+     * Callback which is called when serialized state changes with the new
+     * serialized state.
+     */
     onSerializedStateUpdated: (serializedState: {
         [key: string]: any;
     }) => unknown;
+    /**
+     * If linterContext.highlightLint is true, then content will be passed to
+     * the linter and any warnings will be highlighted in the rendered output.
+     */
     linterContext: LinterContextProps;
     legacyPerseusLint?: ReadonlyArray<string>;
     widgets: PerseusRenderer["widgets"];
+    /**
+     *  Skip adding paragraph class
+     */
     inline?: boolean;
 };
 type State = {
@@ -81,21 +98,7 @@ type State = {
     jiptContent: any;
     lastUsedWidgetId: string | null | undefined;
 };
-type DefaultProps = {
-    alwaysUpdate: Props["alwaysUpdate"];
-    content: Props["content"];
-    findExternalWidgets: Props["findExternalWidgets"];
-    highlightedWidgets: Props["highlightedWidgets"];
-    images: Props["images"];
-    linterContext: Props["linterContext"];
-    onInteractWithWidget: Props["onInteractWithWidget"];
-    onRender: Props["onRender"];
-    onSerializedStateUpdated: Props["onSerializedStateUpdated"];
-    questionCompleted: Props["questionCompleted"];
-    reviewMode: Props["reviewMode"];
-    serializedState: Props["serializedState"];
-    widgets: Props["widgets"];
-};
+type DefaultProps = Required<Pick<Props, "alwaysUpdate" | "content" | "findExternalWidgets" | "highlightedWidgets" | "images" | "linterContext" | "onInteractWithWidget" | "onRender" | "onSerializedStateUpdated" | "questionCompleted" | "showSolutions" | "reviewMode" | "serializedState" | "widgets">>;
 declare class Renderer extends React.Component<Props, State> {
     _currentFocus: FocusPath | null | undefined;
     _foundTextNodes: boolean;

package/dist/util/svg.d.ts

@@ -0,0 +1,9 @@
+export declare function pathBuilder(): PathBuilder;
+export declare class PathBuilder {
+    private path;
+    private scaleFactor;
+    build(): string;
+    move(x: number, y: number): PathBuilder;
+    curve(control1X: number, control1Y: number, control2X: number, control2Y: number, endX: number, endY: number): PathBuilder;
+    scale(factor: number): PathBuilder;
+}

package/dist/widgets/interactive-graphs/axis-ticks.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+export declare const showTickLabel: (gridStep: number, tickStep: number, label: number) => boolean;
 export declare function generateTickLocations(tickStep: number, min: number, max: number): number[];
 type Props = {
     tickStep: [number, number];
     range: [[number, number], [number, number]];
+    gridStep: [number, number];
 };
 export declare const AxisTicks: (props: Props) => JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/components/arrowhead.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    x: number;
+    y: number;
+    angle: number;
+};
+export declare function Arrowhead(props: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import type { vec } from "mafs";
+import type { SVGProps } from "react";
+export type Props = {
+    start: vec.Vector2;
+    end: vec.Vector2;
+    style?: SVGProps<SVGLineElement>["style"];
+    className?: string;
+    testId?: string;
+};
+export declare function SVGLine(props: Props): JSX.Element;

package/dist/widgets/interactive-graphs/graphs/components/vector.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { vec } from "mafs";
+type Props = {
+    tail: vec.Vector2;
+    tip: vec.Vector2;
+    color: string;
+};
+export declare function Vector(props: Props): JSX.Element;
+export {};

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

@@ -1,9 +1,6 @@
-import type { CollinearTuple } from "../../../perseus-types";
-import type { Interval, vec } from "mafs";
+import type { vec } from "mafs";
 export interface InteractiveLineProps {
-    collinearPair: Readonly<CollinearTuple>;
-    snaps: [number, number];
-    range: [x: Interval, y: Interval];
+    points: Readonly<[vec.Vector2, vec.Vector2]>;
     onMovePoint: (endpointIndex: number, destination: vec.Vector2) => unknown;
     onMoveLine: (delta: vec.Vector2) => unknown;
 }

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

@@ -1,10 +1,11 @@
 import type { PerseusGraphType } from "../../../perseus-types";
-import type { InteractiveGraphState } from "../types";
-import type { Interval, vec } from "mafs";
-export declare function initializeGraphState(params: {
-    range: [Interval, Interval];
-    step: vec.Vector2;
-    snapStep: vec.Vector2;
-    graph: PerseusGraphType;
-}): InteractiveGraphState;
+import type { InteractiveGraphProps, InteractiveGraphState } from "../types";
+export type InitializeGraphStateParam = {
+    range: InteractiveGraphProps["range"];
+    step: InteractiveGraphProps["step"];
+    snapStep: InteractiveGraphProps["snapStep"];
+    graph: InteractiveGraphProps["graph"];
+    markings: InteractiveGraphProps["markings"];
+};
+export declare function initializeGraphState(params: InitializeGraphStateParam): InteractiveGraphState;
 export declare function getGradableGraph(state: InteractiveGraphState, initialGraph: PerseusGraphType): PerseusGraphType;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { Interval, vec } from "mafs";
+type GraphConfig = {
+    range: [Interval, Interval];
+    snapStep: vec.Vector2;
+    markings: "graph" | "grid" | "none";
+};
+export declare const GraphConfigContext: React.Context<GraphConfig>;
+export default function useGraphConfig(): GraphConfig;
+export {};

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

@@ -18,6 +18,7 @@ export interface InteractiveGraphStateCommon {
     hasBeenInteractedWith: boolean;
     range: [Interval, Interval];
     snapStep: vec.Vector2;
+    markings: InteractiveGraphProps["markings"];
 }
 export interface SegmentGraphState extends InteractiveGraphStateCommon {
     type: "segment";

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { FocusFunction } from "./base-radio";
-import type { PerseusRadioChoice, PerseusRadioWidgetOptions } from "../../perseus-types";
+import type { PerseusRadioChoice, PerseusRadioWidgetOptions, ShowSolutions } from "../../perseus-types";
 import type { PerseusScore, WidgetProps, ChoiceState } from "../../types";
 export type RenderProps = {
     numCorrect: number;
@@ -10,6 +10,7 @@ export type RenderProps = {
     deselectEnabled?: boolean;
     choices: ReadonlyArray<RadioChoiceWithMetadata>;
     selectedChoices: ReadonlyArray<PerseusRadioChoice["correct"]>;
+    showSolutions?: ShowSolutions;
     choiceStates?: ReadonlyArray<ChoiceState>;
     values?: ReadonlyArray<boolean>;
 };
@@ -22,13 +23,7 @@ type UserInput = {
 };
 type Rubric = PerseusRadioWidgetOptions;
 type Props = WidgetProps<RenderProps, Rubric>;
-type DefaultProps = {
-    choices: Props["choices"];
-    multipleSelect: Props["multipleSelect"];
-    countChoices: Props["countChoices"];
-    deselectEnabled: Props["deselectEnabled"];
-    linterContext: Props["linterContext"];
-};
+type DefaultProps = Required<Pick<Props, "choices" | "multipleSelect" | "countChoices" | "deselectEnabled" | "linterContext" | "showSolutions">>;
 export type RadioChoiceWithMetadata = PerseusRadioChoice & {
     originalIndex: number;
     correct: boolean;
@@ -38,6 +33,7 @@ declare class Radio extends React.Component<Props> {
     static defaultProps: DefaultProps;
     static validate(userInput: UserInput, rubric: Rubric): PerseusScore;
     static getUserInputFromProps(props: Props): UserInput;
+    componentDidUpdate(prevProps: Props): void;
     _renderRenderer: (content?: string) => React.ReactElement;
     focus(choiceIndex?: number | null): boolean;
     registerFocusFunction(fun: FocusFunction): void;
@@ -51,6 +47,7 @@ declare class Radio extends React.Component<Props> {
      * Turn on rationale display for the currently selected choices. Note that
      * this leaves rationales on for choices that are already showing
      * rationales.
+     * @deprecated Internal only. Use `showSolutions` prop instead.
      */
     showRationalesForCurrentlySelectedChoices: (arg1: PerseusRadioWidgetOptions) => void;
     /**

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "21.3.1",
+    "version": "21.4.0",
     "publishConfig": {
         "access": "public"
     },

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

@@ -1,11 +0,0 @@
-import React from "react";
-import type { InteractiveGraphAction } from "./interactive-graph-action";
-import type { InteractiveGraphState } from "../types";
-export declare const GraphStateContext: React.Context<{
-    state: InteractiveGraphState;
-    dispatch: React.Dispatch<InteractiveGraphAction>;
-}>;
-export default function useGraphState(): {
-    state: InteractiveGraphState;
-    dispatch: React.Dispatch<InteractiveGraphAction>;
-};