@khanacademy/perseus 11.6.1 → 12.0.0

package/dist/perseus-types.d.ts

@@ -133,9 +133,10 @@ export type PerseusExplanationWidgetOptions = {
     };
     static: boolean;
 };
+export type LegacyButtonSets = ReadonlyArray<"basic" | "basic+div" | "trig" | "prealgebra" | "logarithms" | "basic relations" | "advanced relations">;
 export type PerseusExpressionWidgetOptions = {
     answerForms: ReadonlyArray<PerseusExpressionAnswerForm>;
-    buttonSets: ReadonlyArray<string>;
+    buttonSets: LegacyButtonSets;
     functions: ReadonlyArray<string>;
     times: boolean;
     buttonsVisible?: "always" | "never" | "focused";

package/dist/strings.js

@@ -48,6 +48,7 @@ module.exports = [
     i18n._("Click on the tiles to change the lights.", {}),
     i18n._("Click to add points", {}),
     i18n._("Click to add vertices", {}),
+    i18n._("close math keypad", {}),
     i18n._("Correct", {}),
     i18n._("Correct (but you crossed it out)", {}),
     i18n._("Correct (selected)", {}),
@@ -109,6 +110,8 @@ module.exports = [
     i18n._("Note: For this question, the shape will not move.", {}),
     i18n._("Number of divisions:", {}),
     i18n._("Number of trials:", {}),
+    i18n._("Oops!", {}),
+    i18n._("open math keypad", {}),
     i18n._("Parameter", {}),
     i18n._("Phi", {}),
     i18n._("Pi", {}),

package/dist/widgets/expression.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useDependencies } from "../dependencies";
+import type { DependenciesContext } from "../dependencies";
 import type { PerseusExpressionWidgetOptions } from "../perseus-types";
 import type { PerseusScore, WidgetProps } from "../types";
 import type { Keys as Key, KeypadConfiguration } from "@khanacademy/math-input";
@@ -13,7 +13,7 @@ type RenderProps = {
     keypadConfiguration: ReturnType<typeof keypadConfigurationForProps>;
 };
 type ExternalProps = WidgetProps<RenderProps, Rubric>;
-export type Props = ExternalProps & ReturnType<typeof useDependencies> & {
+export type Props = ExternalProps & Partial<React.ContextType<typeof DependenciesContext>> & {
     apiOptions: NonNullable<ExternalProps["apiOptions"]>;
     buttonSets: NonNullable<ExternalProps["buttonSets"]>;
     functions: NonNullable<ExternalProps["functions"]>;
@@ -24,8 +24,9 @@ export type Props = ExternalProps & ReturnType<typeof useDependencies> & {
     value: string;
 };
 export type ExpressionState = {
+    invalid: boolean;
     showErrorTooltip: boolean;
-    showErrorText: boolean;
+    showErrorStyle: boolean;
 };
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
@@ -40,7 +41,6 @@ type DefaultProps = {
 type OnInputErrorFunctionType = (arg1?: any, arg2?: any, arg3?: any) => boolean | null | undefined;
 export declare class Expression extends React.Component<Props, ExpressionState> {
     _isMounted: boolean;
-    errorTimeout: null | number;
     static validate(userInput: string, rubric: Rubric, onInputError?: OnInputErrorFunctionType): PerseusScore;
     static getUserInputFromProps(props: Props): string;
     static getOneCorrectAnswerFromRubric(rubric: Rubric): string | null | undefined;
@@ -50,6 +50,7 @@ export declare class Expression extends React.Component<Props, ExpressionState>
     componentDidMount: () => void;
     componentDidUpdate: (prevProps: Props) => void;
     componentWillUnmount: () => void;
+    _handleMouseDown: () => void;
     simpleValidate: (rubric: Rubric, onInputError: OnInputErrorFunctionType) => PerseusScore;
     getUserInput: () => string;
     change: (...args: any) => any | undefined;
@@ -151,7 +152,7 @@ declare const _default: Readonly<{
         isLastUsedWidget: boolean;
         linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
         containerSizeClass: import("../util/sizing-utils").SizeClass;
-    } & import("../types").PerseusDependenciesV2 & {
+    } & Partial<import("../types").PerseusDependenciesV2> & {
         apiOptions: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
@@ -205,14 +206,14 @@ declare const _default: Readonly<{
             showAlignmentOptions: NonNullable<boolean | undefined>;
             useDraftEditor: NonNullable<boolean | undefined>;
         }>;
-        buttonSets: readonly string[];
+        buttonSets: import("../perseus-types").LegacyButtonSets;
         functions: readonly string[];
         linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
         onBlur: (blurPath: import("../types").FocusPath) => void;
         onFocus: (blurPath: import("../types").FocusPath) => void;
         times: boolean;
         value: string;
-    }, "static" | "trackInteraction" | "onChange" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget" | "analytics"> & {
+    }, "static" | "trackInteraction" | "onChange" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "analytics" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget"> & {
         value?: string | undefined;
         onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;
         onBlur?: ((blurPath: import("../types").FocusPath) => void) | undefined;
@@ -270,9 +271,9 @@ declare const _default: Readonly<{
             showAlignmentOptions: NonNullable<boolean | undefined>;
             useDraftEditor: NonNullable<boolean | undefined>;
         }> | undefined;
-        times?: boolean | undefined;
-        buttonSets?: readonly string[] | undefined;
+        buttonSets?: import("../perseus-types").LegacyButtonSets | undefined;
         functions?: readonly string[] | undefined;
+        times?: boolean | undefined;
     } & {}, "analytics"> & React.RefAttributes<Expression>>) | undefined;
     accessible?: boolean | ((props: any) => boolean) | undefined;
     hidden?: boolean | undefined;
@@ -357,7 +358,7 @@ declare const _default: Readonly<{
         isLastUsedWidget: boolean;
         linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
         containerSizeClass: import("../util/sizing-utils").SizeClass;
-    } & import("../types").PerseusDependenciesV2 & {
+    } & Partial<import("../types").PerseusDependenciesV2> & {
         apiOptions: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
@@ -411,14 +412,14 @@ declare const _default: Readonly<{
             showAlignmentOptions: NonNullable<boolean | undefined>;
             useDraftEditor: NonNullable<boolean | undefined>;
         }>;
-        buttonSets: readonly string[];
+        buttonSets: import("../perseus-types").LegacyButtonSets;
         functions: readonly string[];
         linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
         onBlur: (blurPath: import("../types").FocusPath) => void;
         onFocus: (blurPath: import("../types").FocusPath) => void;
         times: boolean;
         value: string;
-    }, "static" | "trackInteraction" | "onChange" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget" | "analytics"> & {
+    }, "static" | "trackInteraction" | "onChange" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "analytics" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget"> & {
         value?: string | undefined;
         onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;
         onBlur?: ((blurPath: import("../types").FocusPath) => void) | undefined;
@@ -476,9 +477,9 @@ declare const _default: Readonly<{
             showAlignmentOptions: NonNullable<boolean | undefined>;
             useDraftEditor: NonNullable<boolean | undefined>;
         }> | undefined;
-        times?: boolean | undefined;
-        buttonSets?: readonly string[] | undefined;
+        buttonSets?: import("../perseus-types").LegacyButtonSets | undefined;
         functions?: readonly string[] | undefined;
+        times?: boolean | undefined;
     } & {}, "analytics"> & React.RefAttributes<Expression>>;
 }>;
 export default _default;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "11.6.1",
+    "version": "12.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.2",
         "@khanacademy/kmath": "^0.1.3",
-        "@khanacademy/math-input": "^14.0.1",
+        "@khanacademy/math-input": "^14.1.0",
         "@khanacademy/perseus-core": "1.1.1",
         "@khanacademy/perseus-linter": "^0.3.5",
         "@khanacademy/pure-markdown": "^0.2.7",

package/src/__tests__/mock-asset-loading-widget.tsx

@@ -5,14 +5,13 @@ import AssetContext from "../asset-context";
 import type {PerseusItem} from "../perseus-types";
 import type {WidgetExports} from "../types";
 
-// @ts-expect-error - TS2322 - Type '"mocked-asset-widget"' is not assignable to type '"categorizer" | "cs-program" | "definition" | "dropdown" | "example-graphie-widget" | "example-widget" | "explanation" | "expression" | "graded-group-set" | "graded-group" | ... 29 more ... | "video"'.
 export const mockedAssetItem: PerseusItem = {
     question: {
         content: "[[\u2603 mocked-asset-widget 1]]",
         images: Object.freeze({}),
         widgets: {
             "mocked-asset-widget 1": {
-                type: "mocked-asset-widget",
+                type: "mocked-asset-widget" as any,
                 alignment: "default",
                 static: false,
                 graded: true,

package/src/components/__stories__/math-input.stories.tsx

@@ -13,8 +13,16 @@ export default {
 } as Story;
 
 const defaultObject = {
-    buttonSets: ["basic"],
+    keypadButtonSets: {
+        advancedRelations: true,
+        basicRelations: true,
+        divisionKey: true,
+        logarithms: true,
+        preAlgebra: true,
+        trigonometry: true,
+    },
     onChange: () => {},
+    analytics: {onAnalyticsEvent: () => Promise.resolve()},
 } as const;
 
 export const DefaultWithBasicButtonSet = (
@@ -22,9 +30,14 @@ export const DefaultWithBasicButtonSet = (
 ): React.ReactElement => {
     return <MathInput {...defaultObject} />;
 };
-export const AlwaysVisibleButtonSet = (args: StoryArgs): React.ReactElement => {
-    return <MathInput {...defaultObject} buttonsVisible="always" />;
-};
 export const DefaultWithAriaLabel = (args: StoryArgs): React.ReactElement => {
     return <MathInput {...defaultObject} labelText="Sample label" />;
 };
+
+export const KeypadOpenByDefault = (args: StoryArgs): React.ReactElement => {
+    return <MathInput {...defaultObject} buttonsVisible="always" />;
+};
+
+export const KeypadNeverVisible = (args: StoryArgs): React.ReactElement => {
+    return <MathInput {...defaultObject} buttonsVisible="never" />;
+};

package/src/components/__tests__/math-input.test.tsx

@@ -7,6 +7,15 @@ import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
 import MathInput from "../math-input";
 
+const allButtonSets = {
+    advancedRelations: true,
+    basicRelations: true,
+    divisionKey: true,
+    logarithms: true,
+    preAlgebra: true,
+    trigonometry: true,
+};
+
 describe("Perseus' MathInput", () => {
     beforeEach(() => {
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
@@ -19,8 +28,9 @@ describe("Perseus' MathInput", () => {
         render(
             <MathInput
                 onChange={() => {}}
-                buttonSets={["basic"]}
+                keypadButtonSets={allButtonSets}
                 labelText="test"
+                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
             />,
         );
 
@@ -31,7 +41,13 @@ describe("Perseus' MathInput", () => {
     it("is possible to type in the input", () => {
         // Assemble
         const mockOnChange = jest.fn();
-        render(<MathInput onChange={mockOnChange} buttonSets={["basic"]} />);
+        render(
+            <MathInput
+                onChange={mockOnChange}
+                keypadButtonSets={allButtonSets}
+                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
+            />,
+        );
 
         // Act
         userEvent.type(screen.getByRole("textbox"), "12345");
@@ -43,18 +59,89 @@ describe("Perseus' MathInput", () => {
     it("is possible to use buttons", () => {
         // Assemble
         const mockOnChange = jest.fn();
-        render(<MathInput onChange={mockOnChange} buttonSets={["basic"]} />);
+        render(
+            <MathInput
+                onChange={mockOnChange}
+                keypadButtonSets={allButtonSets}
+                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
+            />,
+        );
 
         // Act
-        // focusing the input triggers the popover
-        screen.getByRole("textbox").focus();
-        userEvent.type(screen.getByRole("textbox"), "1");
+        screen.getByRole("switch").click();
+        userEvent.click(screen.getByRole("button", {name: "1"}));
         userEvent.click(screen.getByRole("button", {name: "Plus"}));
-        userEvent.type(screen.getByRole("textbox"), "2");
+        userEvent.click(screen.getByRole("button", {name: "2"}));
         userEvent.click(screen.getByRole("button", {name: "Minus"}));
-        userEvent.type(screen.getByRole("textbox"), "3");
+        userEvent.click(screen.getByRole("button", {name: "3"}));
 
         // Assert
         expect(mockOnChange).toHaveBeenLastCalledWith("1+2-3");
     });
+
+    it("is possible to use buttons with legacy props", () => {
+        // Assemble
+        const mockOnChange = jest.fn();
+        render(
+            <MathInput
+                onChange={mockOnChange}
+                buttonSets={["basic+div"]}
+                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
+            />,
+        );
+
+        // Act
+        // focusing the input triggers the popover
+        screen.getByRole("switch").click();
+        userEvent.click(screen.getByRole("button", {name: "1"}));
+        userEvent.click(screen.getByRole("button", {name: "Plus"}));
+        userEvent.click(screen.getByRole("button", {name: "2"}));
+        userEvent.click(screen.getByRole("button", {name: "Divide"}));
+        userEvent.click(screen.getByRole("button", {name: "3"}));
+
+        // Assert
+        expect(mockOnChange).toHaveBeenLastCalledWith("1+2\\div3");
+    });
+
+    it("returns focus to input after button click", () => {
+        // Assemble
+        render(
+            <MathInput
+                onChange={() => {}}
+                keypadButtonSets={allButtonSets}
+                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
+            />,
+        );
+
+        // Act
+        // focusing the input triggers the popover
+        screen.getByRole("switch").click();
+        userEvent.click(screen.getByRole("button", {name: "1"}));
+
+        // Assert
+        expect(screen.getByRole("textbox")).toHaveFocus();
+    });
+
+    it("does not return focus to input after button press via keyboard", () => {
+        // Assemble
+        render(
+            <MathInput
+                onChange={() => {}}
+                keypadButtonSets={allButtonSets}
+                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
+            />,
+        );
+
+        // Act
+        // focusing the input triggers the popover
+        screen.getByRole("switch").click();
+        userEvent.tab(); // to "123" tab
+        userEvent.tab(); // to extra keys tab
+        userEvent.tab(); // to whole keypad
+        userEvent.tab(); // to "1" button
+        userEvent.keyboard("{enter}");
+
+        // Assert
+        expect(screen.getByRole("textbox")).not.toHaveFocus();
+    });
 });