@khanacademy/perseus 39.0.0 → 40.0.0

package/dist/styles/global-styles.d.ts

@@ -1,48 +1,3 @@
 /// <reference path="../../types/aphrodite.d.ts" />
-import type { StyleDeclaration } from "aphrodite";
-export declare const colors: {
-    readonly white: "#FFFFFF";
-    readonly gray98: "#FAFAFA";
-    readonly gray97: "#F6F7F7";
-    readonly gray95: "#F0F1F2";
-    readonly gray90: "#E3E5E6";
-    readonly gray85: "#D6D8DA";
-    readonly gray76: "#BABEC2";
-    readonly gray72: "#999A9D";
-    readonly gray68: "#888D93";
-    readonly gray55: "#707378";
-    readonly gray41: "#626569";
-    readonly gray25: "#3B3E40";
-    readonly gray17: "#21242C";
-    readonly gray10: "#1499af";
-    readonly black: "#000000";
-    readonly alertRed: "#C42420";
-    readonly homepageBlue: "#46A8BF";
-    readonly kaBlue: "#314453";
-    readonly kaBlueLight: "#4D6779";
-    readonly kaGreen: "#71B307";
-    readonly kaGreenLight: "#BED47A";
-    readonly learnstormBlue: "#4898FC";
-    readonly backgroundBlue: "#00294A";
-    readonly adminGreen: "#78C008";
-    readonly kaBlueExtraLight: "#39c2db";
-    readonly kaBlueHover: "#0c7f99";
-    readonly kaGreenHover: "#518005";
-    readonly skyDark: "#001f4d";
-    readonly recommendationGold: "#ffbe26";
-    readonly starAced: "#ff9c39";
-    readonly google: "#C1432f";
-    readonly modernGoogle: "#be2612";
-    readonly modernGoogleHover: "#8c1c0d";
-    readonly facebook: "#4267B2";
-    readonly modernFacebook: "#4267B2";
-    readonly modernFacebookHover: "#00294a";
-    readonly wonderBlocksGold: "#FFB100";
-    readonly wonderBlocksLightBlue: "#37C5FD";
-    readonly breadcrumbs: "rgba(255, 255, 255, 0.7)";
-};
-export declare const borderRadius = 4;
-export declare const fonts: {
-    readonly regular: "inherit";
-};
-export declare const typography: StyleDeclaration;
+import type { CSSProperties } from "aphrodite";
+export declare const bodyXsmallBold: CSSProperties;

package/dist/validation.types.d.ts

@@ -1,4 +1,4 @@
-import type { GrapherAnswerTypes, PerseusDropdownChoice, PerseusExpressionAnswerForm, PerseusGradedGroupSetWidgetOptions, PerseusGradedGroupWidgetOptions, PerseusGraphType, PerseusGroupWidgetOptions, PerseusIFrameWidgetOptions, PerseusMatcherWidgetOptions, PerseusMatrixWidgetOptions, PerseusNumberLineWidgetOptions, PerseusNumericInputWidgetOptions, PerseusOrdererWidgetOptions, PerseusPlotterWidgetOptions, PerseusRadioWidgetOptions, PerseusSorterWidgetOptions, PerseusTableWidgetOptions } from "./perseus-types";
+import type { GrapherAnswerTypes, PerseusDropdownChoice, PerseusExpressionAnswerForm, PerseusGradedGroupSetWidgetOptions, PerseusGradedGroupWidgetOptions, PerseusGraphType, PerseusGroupWidgetOptions, PerseusMatcherWidgetOptions, PerseusMatrixWidgetAnswers, PerseusNumberLineWidgetOptions, PerseusNumericInputAnswer, PerseusOrdererWidgetOptions, PerseusPlotterWidgetOptions, PerseusRadioChoice, PerseusTableWidgetOptions } from "./perseus-types";
 import type { InteractiveMarkerType } from "./widgets/label-image/types";
 import type { Relationship } from "./widgets/number-line/number-line";
 export type UserInputStatus = "correct" | "incorrect" | "incomplete";
@@ -31,7 +31,7 @@ export type PerseusGrapherRubric = {
     correct: GrapherAnswerTypes;
 };
 export type PerseusGrapherUserInput = PerseusGrapherRubric["correct"];
-export type PerseusIFrameRubric = PerseusIFrameWidgetOptions;
+export type PerseusIFrameRubric = Empty;
 export type PerseusIFrameUserInput = {
     status: UserInputStatus;
     message: string | null;
@@ -60,9 +60,11 @@ export type PerseusMatcherUserInput = {
     left: ReadonlyArray<string>;
     right: ReadonlyArray<string>;
 };
-export type PerseusMatrixRubric = PerseusMatrixWidgetOptions;
+export type PerseusMatrixRubric = {
+    answers: PerseusMatrixWidgetAnswers;
+};
 export type PerseusMatrixUserInput = {
-    answers: ReadonlyArray<ReadonlyArray<number>>;
+    answers: PerseusMatrixRubric["answers"];
 };
 export type PerseusNumberLineRubric = PerseusNumberLineWidgetOptions & {
     isInequality: boolean;
@@ -74,7 +76,10 @@ export type PerseusNumberLineUserInput = {
     numDivisions: number;
     divisionRange: ReadonlyArray<number>;
 };
-export type PerseusNumericInputRubric = PerseusNumericInputWidgetOptions;
+export type PerseusNumericInputRubric = {
+    answers: ReadonlyArray<PerseusNumericInputAnswer>;
+    coefficient: boolean;
+};
 export type PerseusNumericInputUserInput = {
     currentValue: string;
 };
@@ -84,15 +89,18 @@ export type PerseusOrdererUserInput = {
 };
 export type PerseusPlotterRubric = PerseusPlotterWidgetOptions;
 export type PerseusPlotterUserInput = ReadonlyArray<number>;
-export type PerseusRadioRubric = PerseusRadioWidgetOptions;
+export type PerseusRadioRubric = {
+    choices: ReadonlyArray<PerseusRadioChoice>;
+};
 export type PerseusRadioUserInput = {
-    countChoices?: boolean;
     choicesSelected: ReadonlyArray<boolean>;
     numCorrect?: number;
     noneOfTheAboveIndex?: number | null | undefined;
     noneOfTheAboveSelected?: boolean;
 };
-export type PerseusSorterRubric = PerseusSorterWidgetOptions;
+export type PerseusSorterRubric = {
+    correct: ReadonlyArray<string>;
+};
 export type PerseusSorterUserInput = {
     options: ReadonlyArray<string>;
     changed: boolean;

package/dist/widgets/grapher/util.d.ts

@@ -1,8 +1,5 @@
 import type { LinearType, QuadraticType, SinusoidType, TangentType, ExponentialType, LogarithmType, AbsoluteValueType } from "./grapher-types";
 import type { Coord } from "../../interactive2/types";
-export declare const DEFAULT_BACKGROUND_IMAGE: {
-    readonly url: null;
-};
 declare const functionTypeMapping: {
     readonly linear: LinearType;
     readonly quadratic: QuadraticType;
@@ -17,7 +14,6 @@ type FunctionTypeMappingKeys = keyof typeof functionTypeMapping;
 type ConditionalGraderType<T extends FunctionTypeMappingKeys> = T extends "linear" ? LinearType : T extends "quadratic" ? QuadraticType : T extends "sinusoid" ? SinusoidType : T extends "tangent" ? TangentType : T extends "exponential" ? ExponentialType : T extends "logarithm" ? LogarithmType : T extends "absolute_value" ? AbsoluteValueType : never;
 export declare function functionForType<T extends FunctionTypeMappingKeys>(type: T): ConditionalGraderType<T>;
 export declare const getEquationString: (props: any) => string;
-export declare const pointsFromNormalized: (coordsList: ReadonlyArray<Coord>, range: [Coord, Coord], step: [number, number], snapStep: [number, number]) => ReadonlyArray<Coord>;
 export declare const maybePointsFromNormalized: (coordsList: ReadonlyArray<Coord> | null | undefined, range: [Coord, Coord], step: [number, number], snapStep: [number, number]) => ReadonlyArray<Coord> | null | undefined;
 export declare const defaultPlotProps: (type: FunctionTypeMappingKeys, graph: any) => any;
 export declare const chooseType: <T>(list: ReadonlyArray<T>) => T | undefined;

package/dist/widgets/iframe/iframe-validator.d.ts

@@ -1,3 +1,3 @@
 import type { PerseusScore } from "../../types";
 import type { PerseusIFrameUserInput } from "../../validation.types";
-export declare function iframeValidator(state: PerseusIFrameUserInput): PerseusScore;
+export declare function iframeValidator(userInput: PerseusIFrameUserInput): PerseusScore;

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

@@ -5,19 +5,9 @@ type Props = {
     point: vec.Vector2;
     color?: string | undefined;
     dragging: boolean;
-    focusBehavior: FocusBehaviorConfig;
+    showFocusRing: boolean;
     cursor?: CSSCursor | undefined;
     onClick?: () => unknown;
 };
-type FocusBehaviorConfig = ControlledFocusBehavior | UncontrolledFocusBehavior;
-type ControlledFocusBehavior = {
-    type: "controlled";
-    showFocusRing: boolean;
-};
-type UncontrolledFocusBehavior = {
-    type: "uncontrolled";
-    tabIndex: number;
-    onFocusChange?: (event: React.FocusEvent, isFocused: boolean) => unknown;
-};
 export declare const MovablePointView: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGGElement>>;
 export {};

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

@@ -9,7 +9,8 @@ type Props = {
     color?: string;
     cursor?: CSSCursor | undefined;
     constrain?: KeyboardMovementConstraint;
-    onFocusChange?: (event: React.FocusEvent, isFocused: boolean) => unknown;
+    onFocus?: ((event: React.FocusEvent) => unknown) | undefined;
+    onBlur?: ((event: React.FocusEvent) => unknown) | undefined;
 };
 export declare const MovablePoint: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGGElement | null>>;
 export {};

package/dist/widgets/interactive-graphs/graphs/components/use-control-point.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { CSSCursor } from "./css-cursor";
+import type { KeyboardMovementConstraint } from "../use-draggable";
+import type { vec } from "mafs";
+type Params = {
+    point: vec.Vector2;
+    color?: string | undefined;
+    cursor?: CSSCursor | undefined;
+    constrain?: KeyboardMovementConstraint;
+    onMove?: ((newPoint: vec.Vector2) => unknown) | undefined;
+    onClick?: (() => unknown) | undefined;
+    onFocus?: ((event: React.FocusEvent) => unknown) | undefined;
+    onBlur?: ((event: React.FocusEvent) => unknown) | undefined;
+    forwardedRef?: React.ForwardedRef<SVGGElement | null> | undefined;
+};
+type Return = {
+    focusableHandle: React.ReactNode;
+    visiblePoint: React.ReactNode;
+    focusableHandleRef: React.RefObject<SVGGElement>;
+    visiblePointRef: React.RefObject<SVGGElement>;
+};
+export declare function useControlPoint(params: Params): Return;
+export {};

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

@@ -1,6 +1,8 @@
 import * as React from "react";
 import type { MafsGraphProps, PolygonGraphState } from "../types";
 type Props = MafsGraphProps<PolygonGraphState>;
-export declare const PolygonGraph: (props: Props) => React.JSX.Element;
+export declare const LimitedPolygonGraph: (props: Props) => React.JSX.Element;
+export declare const UnlimitedPolygonGraph: (props: Props) => React.JSX.Element;
 export declare const hasFocusVisible: (element: Element | null | undefined) => boolean;
+export declare const PolygonGraph: (props: Props) => React.JSX.Element;
 export {};

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

@@ -24,7 +24,6 @@ export type MafsGraphProps = {
     readOnly: boolean;
     static: boolean | null | undefined;
 };
-export declare const REMOVE_BUTTON_ID = "perseus_mafs_remove_button";
 export declare const MafsGraph: (props: MafsGraphProps) => React.JSX.Element;
 export declare const calculateNestedSVGCoords: (range: vec.Vector2[], width: number, height: number) => {
     viewboxX: number;

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

@@ -34,6 +34,11 @@ export declare const actions: {
     polygon: {
         movePoint: typeof movePoint;
         moveAll: typeof moveAll;
+        addPoint: typeof addPoint;
+        removePoint: typeof removePoint;
+        focusPoint: typeof focusPoint;
+        blurPoint: typeof blurPoint;
+        clickPoint: typeof clickPoint;
     };
     quadratic: {
         movePoint: typeof movePoint;

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

@@ -8,7 +8,9 @@ export type MafsGraphProps<T extends InteractiveGraphState> = {
     graphState: T;
     dispatch: (action: InteractiveGraphAction) => unknown;
 };
+export type InteractiveGraphType = "none" | "angle" | "segment" | "linear-system" | "linear" | "ray" | "polygon" | "point" | "circle" | "quadratic" | "sinusoid";
 export type InteractiveGraphState = AngleGraphState | SegmentGraphState | LinearSystemGraphState | LinearGraphState | RayGraphState | NoneGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState;
+export type UnlimitedGraphState = PointGraphState | PolygonGraphState;
 export interface InteractiveGraphStateCommon {
     hasBeenInteractedWith: boolean;
     range: [xRange: Interval, yRange: Interval];
@@ -49,6 +51,11 @@ export interface PolygonGraphState extends InteractiveGraphStateCommon {
     showSides: boolean;
     snapTo: "grid" | "angles" | "sides";
     coords: Coord[];
+    numSides?: number | "unlimited";
+    focusedPointIndex: number | null;
+    showRemovePointButton: boolean;
+    interactionMode: InteractionMode;
+    showKeyboardInteractionInvitation: boolean;
 }
 export interface CircleGraphState extends InteractiveGraphStateCommon {
     type: "circle";

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

@@ -1,3 +1,4 @@
+import type { InteractiveGraphState, UnlimitedGraphState } from "./types";
 import type { Coord } from "../../interactive2/types";
 import type { PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
 import type { Interval, vec } from "mafs";
@@ -6,6 +7,7 @@ import type { Interval, vec } from "mafs";
  * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
  */
 export declare const TARGET_SIZE = 44;
+export declare const REMOVE_BUTTON_ID = "perseus_mafs_remove_button";
 export declare const normalizePoints: <A extends Coord[]>(range: PerseusInteractiveGraphWidgetOptions["range"], step: PerseusInteractiveGraphWidgetOptions["step"], coordsList: A, noSnap?: boolean) => A;
 export declare const normalizeCoords: <A extends Coord[]>(coordsList: A, ranges: PerseusInteractiveGraphWidgetOptions["range"]) => A;
 export declare function bound({ snapStep, range, point, }: {
@@ -13,3 +15,4 @@ export declare function bound({ snapStep, range, point, }: {
     range: [Interval, Interval];
     point: vec.Vector2;
 }): vec.Vector2;
+export declare function isUnlimitedGraphState(state: InteractiveGraphState): state is UnlimitedGraphState;

package/dist/widgets/matrix/matrix-validator.d.ts

@@ -1,5 +1,5 @@
 import type { PerseusStrings } from "../../strings";
 import type { PerseusScore } from "../../types";
 import type { PerseusMatrixRubric, PerseusMatrixUserInput } from "../../validation.types";
-declare function matrixValidator(state: PerseusMatrixUserInput, rubric: PerseusMatrixRubric, strings: PerseusStrings): PerseusScore;
+declare function matrixValidator(userInput: PerseusMatrixUserInput, rubric: PerseusMatrixRubric, strings: PerseusStrings): PerseusScore;
 export default matrixValidator;

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

@@ -21,11 +21,11 @@ type Props = {
     apiOptions: APIOptions;
     choices: ReadonlyArray<ChoiceType>;
     deselectEnabled?: boolean;
-    editMode: boolean;
+    editMode?: boolean;
     labelWrap: boolean;
     countChoices: boolean | null | undefined;
     numCorrect: number;
-    multipleSelect: boolean;
+    multipleSelect?: boolean;
     reviewModeRubric?: PerseusRadioWidgetOptions | null;
     reviewMode: boolean;
     onChange: (newValues: {
@@ -35,11 +35,5 @@ type Props = {
     registerFocusFunction?: (arg1: FocusFunction) => void;
     isLastUsedWidget?: boolean;
 };
-declare const BaseRadio: {
-    (props: Props): React.ReactElement;
-    defaultProps: {
-        editMode: boolean;
-        multipleSelect: boolean;
-    };
-};
+declare const BaseRadio: ({ apiOptions, reviewModeRubric, reviewMode, choices, editMode, multipleSelect, labelWrap, countChoices, numCorrect, isLastUsedWidget, onChange, registerFocusFunction, }: Props) => React.ReactElement;
 export default BaseRadio;

package/dist/widgets/radio/focus-ring.d.ts

@@ -4,16 +4,9 @@
 import * as React from "react";
 type Props = {
     children?: React.ReactNode;
-    visible: boolean;
-    color: string;
-    multipleSelect: boolean;
-};
-declare const FocusRing: {
-    (props: Props): React.ReactElement;
-    defaultProps: {
-        visible: boolean;
-        color: string;
-        multipleSelect: boolean;
-    };
+    visible?: boolean;
+    color?: string;
+    multipleSelect?: boolean;
 };
+declare const FocusRing: ({ visible, color, multipleSelect, children, }: Props) => React.ReactElement;
 export default FocusRing;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "39.0.0",
+    "version": "40.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -40,14 +40,14 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.15",
-        "@khanacademy/keypad-context": "^1.0.3",
-        "@khanacademy/kmath": "^0.1.15",
-        "@khanacademy/math-input": "^21.1.1",
-        "@khanacademy/perseus-core": "1.5.2",
-        "@khanacademy/perseus-linter": "^1.2.3",
-        "@khanacademy/pure-markdown": "^0.3.10",
-        "@khanacademy/simple-markdown": "^0.13.3",
+        "@khanacademy/kas": "^0.3.16",
+        "@khanacademy/keypad-context": "^1.0.4",
+        "@khanacademy/kmath": "^0.1.16",
+        "@khanacademy/math-input": "^21.1.3",
+        "@khanacademy/perseus-core": "1.5.3",
+        "@khanacademy/perseus-linter": "^1.2.4",
+        "@khanacademy/pure-markdown": "^0.3.11",
+        "@khanacademy/simple-markdown": "^0.13.4",
         "@types/classnames": "2.2.0",
         "@use-gesture/react": "^10.2.27",
         "mafs": "0.19.0",
@@ -78,6 +78,7 @@
         "aphrodite": "^1.2.5",
         "classnames": "1.1.4",
         "create-react-class": "15.6.3",
+        "csstype": "^3.1.3",
         "intersection-observer": "^0.12.0",
         "jquery": "^2.1.1",
         "lodash.debounce": "^4.0.8",

package/dist/components/constants.d.ts

@@ -1,7 +0,0 @@
-export declare const devices: {
-    readonly PHONE: "phone";
-    readonly TABLET: "tablet";
-    readonly DESKTOP: "desktop";
-};
-export declare const lintGutterWidth = 36;
-export declare const perseusFrameBorderWidth = 1;