@khanacademy/perseus 19.6.2 → 19.7.0

package/dist/perseus-api.d.ts

@@ -96,6 +96,7 @@ export declare const ApiOptions: {
         crossOutEnabled?: boolean | undefined;
         editorChangeDelay?: number | undefined;
         onWidgetStartProps?: ((widgets: import("./types").PerseusWidgetMap) => import("./types").PerseusWidgetMap) | undefined;
+        flags?: Record<string, boolean | Record<string, boolean>> | undefined;
     }> & {
         GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
         baseElements: {

package/dist/perseus-types.d.ts

@@ -244,7 +244,13 @@ export type PerseusInteractiveGraphWidgetOptions = {
     gridStep: [number, number];
     snapStep: [number, number];
     backgroundImage?: PerseusImageBackground;
-    markings: string;
+    /**
+     * The type of markings to display on the graph.
+     * - graph: shows the axes and the grid lines
+     * - grid: shows only the grid lines
+     * - none: shows no markings
+     */
+    markings: "graph" | "grid" | "none";
     labels: ReadonlyArray<string>;
     showProtractor: boolean;
     showRuler: boolean;
@@ -518,7 +524,13 @@ export type PerseusInteractionGraph = {
     labels: ReadonlyArray<string>;
     range: [Range, Range];
     gridStep: [number, number];
-    markings: string;
+    /**
+     * The type of markings to display on the graph.
+     * - graph: shows the axes and the grid lines
+     * - grid: shows only the grid lines
+     * - none: shows no markings
+     */
+    markings: "graph" | "grid" | "none";
     snapStep?: [number, number];
     valid?: boolean | string;
     backgroundImage?: PerseusImageBackground;

package/dist/renderer.d.ts

@@ -20,6 +20,15 @@ type WidgetUserInput = any;
 type SerializedState = {
     [id: string]: any;
 };
+/**
+ * The Widget type represents the common API that the Renderer uses to interact
+ * with all widgets. All widgets must implement the methods in this API, unless
+ * they are marked as optional (?: ...).
+ *
+ * These methods are called on the widget ref and allow the renderer to
+ * communicate with the individual widgets to coordinate actions such as
+ * scoring, state serialization/deserialization, and focus management.
+ */
 export type Widget = {
     focus: () => {
         id: string;

package/dist/server-item-renderer.d.ts

@@ -138,6 +138,7 @@ declare const ref: React.ForwardRefExoticComponent<Omit<Pick<OwnProps & HOCProps
         crossOutEnabled?: boolean | undefined;
         editorChangeDelay?: number | undefined;
         onWidgetStartProps?: ((widgets: import("./types").PerseusWidgetMap) => import("./types").PerseusWidgetMap) | undefined;
+        flags?: Record<string, boolean | Record<string, boolean>> | undefined;
     }> | undefined;
     linterContext?: PerseusLinter.LinterContextProps | undefined;
     onRendered?: ((isRendered: boolean) => void) | undefined;

package/dist/types.d.ts

@@ -106,6 +106,7 @@ export type APIOptions = Readonly<{
     crossOutEnabled?: boolean;
     editorChangeDelay?: number;
     onWidgetStartProps?: (widgets: PerseusWidgetMap) => PerseusWidgetMap;
+    flags?: Record<string, boolean | Record<string, boolean>>;
 }>;
 type TeXProps = {
     children: string;

package/dist/widgets/expression.d.ts

@@ -124,6 +124,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
+            flags?: Record<string, boolean | Record<string, boolean>> | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -190,6 +191,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
+            flags?: Record<string, boolean | Record<string, boolean>> | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -256,6 +258,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
+            flags?: Record<string, boolean | Record<string, boolean>> | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -319,6 +322,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
+            flags?: Record<string, boolean | Record<string, boolean>> | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -385,6 +389,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
+            flags?: Record<string, boolean | Record<string, boolean>> | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -451,6 +456,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
+            flags?: Record<string, boolean | Record<string, boolean>> | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { Coord } from "../interactive2/types";
 import type { PerseusGraphType, PerseusGraphTypeAngle, PerseusGraphTypePoint, PerseusGraphTypePolygon, PerseusGraphTypeSegment, PerseusInteractiveGraphWidgetOptions } from "../perseus-types";
+import type { Widget } from "../renderer";
 import type { PerseusScore, WidgetProps } from "../types";
 import type { QuadraticCoefficient, SineCoefficient, Range } from "../util/geometry";
 type RenderProps = PerseusInteractiveGraphWidgetOptions;
@@ -38,6 +39,7 @@ declare class InteractiveGraph extends React.Component<Props, State> {
     trashCan: any | null | undefined;
     vertHairline: any | null | undefined;
     static defaultProps: DefaultProps;
+    mafsRef: React.RefObject<Widget>;
     state: State;
     UNSAFE_componentWillMount(): void;
     componentDidMount(): void;

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

@@ -0,0 +1 @@
+export { SegmentGraph } from "./segment";

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { PerseusGraphTypeSegment } from "../../../perseus-types";
+import type { MafsGraphProps } from "../types";
+export type SegmentProps = MafsGraphProps<PerseusGraphTypeSegment>;
+export declare const SegmentGraph: (props: SegmentProps) => JSX.Element;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { SizeClass } from "../../util/sizing-utils";
+interface GridProps {
+    step: [number, number];
+    gridStep: [number, number];
+    range: [[number, number], [number, number]];
+    containerSizeClass: SizeClass;
+    markings: "graph" | "grid" | "none";
+}
+export declare const Grid: (props: GridProps) => JSX.Element | null;
+export {};

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

@@ -0,0 +1 @@
+export { MafsGraph } from "./mafs-graph";

package/dist/widgets/interactive-graphs/legacy-grid.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { PerseusImageBackground } from "../../perseus-types";
+/**
+ * If a graphie URL is provided in `backgroundImage`, will return the rendered graphie background.
+ * Otherwise, returns `null`.
+ */
+export declare const getLegacyGrid: (box: [number, number], backgroundImage?: PerseusImageBackground) => JSX.Element | null;

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

@@ -0,0 +1,79 @@
+import * as React from "react";
+import type { Widget } from "../../renderer";
+import "mafs/core.css";
+import "mafs/font.css";
+import "./mafs-styles.css";
+export declare const MafsGraph: React.ForwardRefExoticComponent<import("../../perseus-types").PerseusInteractiveGraphWidgetOptions & {
+    widgetId: string;
+    alignment: string | null | undefined;
+    static: boolean | null | undefined;
+    problemNum: number | null | undefined;
+    apiOptions: Readonly<Readonly<{
+        isArticle?: boolean | undefined;
+        onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+        onFocusChange?: ((newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+        GroupMetadataEditor?: React.ComponentType<any> | undefined;
+        showAlignmentOptions?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+        getAnotherHint?: (() => unknown) | undefined;
+        interactionCallback?: ((widgetData: {
+            [widgetId: string]: any;
+        }) => void) | undefined;
+        groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+        imagePlaceholder?: React.ReactNode;
+        widgetPlaceholder?: React.ReactNode;
+        baseElements?: {
+            Link: React.ComponentType<any>;
+        } | undefined;
+        imagePreloader?: ((dimensions: import("../../types").Dimensions) => React.ReactNode) | undefined;
+        trackInteraction?: ((args: {
+            type: string;
+            id: string;
+            correct?: boolean | undefined;
+        } & Partial<import("../../types").TrackingGradedGroupExtraArguments> & Partial<import("../../types").TrackingSequenceExtraArguments>) => void) | undefined;
+        customKeypad?: boolean | undefined;
+        nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
+        isMobile?: boolean | undefined;
+        setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+        useDraftEditor?: boolean | undefined;
+        hintProgressColor?: string | undefined;
+        canScrollPage?: boolean | undefined;
+        inModal?: boolean | undefined;
+        crossOutEnabled?: boolean | undefined;
+        editorChangeDelay?: number | undefined;
+        onWidgetStartProps?: ((widgets: import("../../types").PerseusWidgetMap) => import("../../types").PerseusWidgetMap) | undefined;
+        flags?: Record<string, boolean | Record<string, boolean>> | undefined;
+    }> & {
+        GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
+        baseElements: {
+            Link: React.ComponentType<any>;
+        };
+        canScrollPage: NonNullable<boolean | undefined>;
+        crossOutEnabled: NonNullable<boolean | undefined>;
+        editorChangeDelay: number;
+        groupAnnotator: (groupNumber: number, widgetId: string) => React.ReactNode;
+        inModal: NonNullable<boolean | undefined>;
+        isArticle: NonNullable<boolean | undefined>;
+        isMobile: NonNullable<boolean | undefined>;
+        onFocusChange: (newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+        onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
+        readOnly: NonNullable<boolean | undefined>;
+        setDrawingAreaAvailable: (arg1: boolean) => unknown;
+        showAlignmentOptions: NonNullable<boolean | undefined>;
+        useDraftEditor: NonNullable<boolean | undefined>;
+    }>;
+    keypadElement?: any;
+    questionCompleted?: boolean | undefined;
+    onFocus: (blurPath: import("../..").FocusPath) => void;
+    onBlur: (blurPath: import("../..").FocusPath) => void;
+    findWidgets: (arg1: import("../../types").FilterCriterion) => readonly any[];
+    reviewModeRubric: import("../../perseus-types").PerseusInteractiveGraphWidgetOptions;
+    onChange: import("../..").ChangeHandler;
+    trackInteraction: (extraData?: {} | undefined) => void;
+    isLastUsedWidget: boolean;
+    linterContext: import("../../../../perseus-linter/src").LinterContextProps;
+    containerSizeClass: import("../../util/sizing-utils").SizeClass;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<Partial<Widget>>>;

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

@@ -0,0 +1,9 @@
+import type { PerseusGraphType, PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
+import type { WidgetProps } from "../../types";
+export type InteractiveGraphProps = WidgetProps<PerseusInteractiveGraphWidgetOptions, PerseusInteractiveGraphWidgetOptions>;
+export type OnGraphChange<T extends PerseusGraphType> = (callback: (current: T) => T) => void;
+export type MafsGraphProps<T extends PerseusGraphType> = {
+    onGraphChange: OnGraphChange<T>;
+} & Omit<InteractiveGraphProps, "graph"> & {
+    graph: T;
+};

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

@@ -0,0 +1,15 @@
+import type { Coord } from "../../interactive2/types";
+import type { PerseusGraphTypeLinear, PerseusGraphTypeRay, PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
+import type { vec } from "mafs";
+import type { DependencyList } from "react";
+export declare const useInteractivePoint: (coords: vec.Vector2, snaps: [number, number], range: [[number, number], [number, number]]) => import("mafs").UseMovablePoint;
+/**
+ * We do not want to call `onGraphChange` until the user
+ * has interacted with the graph. See the test,
+ * "should reject no interaction"
+ */
+export declare const useEffectAfterFirstRender: (fn: () => void, deps: DependencyList) => void;
+export declare const constrain: (coord: [number, number], snapStep: [number, number], range: [[number, number], [number, number]]) => [number, number];
+export declare const normalizePoints: (range: PerseusInteractiveGraphWidgetOptions["range"], step: PerseusInteractiveGraphWidgetOptions["step"], coordsList: ReadonlyArray<Coord>, noSnap?: boolean) => Array<Coord>;
+export declare const normalizeCoords: (coordsList: ReadonlyArray<Coord>, ranges: PerseusInteractiveGraphWidgetOptions["range"]) => Array<Coord>;
+export declare const getLineCoords: (graph: PerseusGraphTypeRay | PerseusGraphTypeLinear, range: PerseusInteractiveGraphWidgetOptions["range"], step: PerseusInteractiveGraphWidgetOptions["step"]) => ReadonlyArray<Coord>;

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

@@ -128,6 +128,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
+            flags?: Record<string, boolean | Record<string, boolean>> | undefined;
         }>;
         choices: readonly string[];
         imageAlt: string;
@@ -181,6 +182,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
+            flags?: Record<string, boolean | Record<string, boolean>> | undefined;
         }>;
         choices: readonly string[];
         imageAlt: string;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "19.6.2",
+    "version": "19.7.0",
     "publishConfig": {
         "access": "public"
     },
@@ -32,7 +32,8 @@
         "@khanacademy/perseus-linter": "^0.3.12",
         "@khanacademy/pure-markdown": "^0.3.0",
         "@khanacademy/simple-markdown": "^0.11.3",
-        "@khanacademy/wonder-blocks-banner": "^3.0.33"
+        "@khanacademy/wonder-blocks-banner": "^3.0.33",
+        "mafs": "^0.18.0"
     },
     "devDependencies": {
         "@khanacademy/mathjax-renderer": "git+ssh://git@github.com:Khan/mathjax-renderer.git#v1.6.2",