@khanacademy/perseus 11.6.0 → 12.0.0

package/src/widgets/__stories__/expression.stories.tsx

@@ -1,7 +1,7 @@
 import {KeypadContext, KeypadType} from "@khanacademy/math-input";
 import * as React from "react";
 
-import {ItemRendererWithDebugUI} from "../../../../../testing/item-renderer-with-debug-ui";
+import {ServerItemRendererWithDebugUI} from "../../../../../testing/server-item-renderer-with-debug-ui";
 import {
     expressionItem2,
     expressionItem3,
@@ -10,7 +10,7 @@ import expressionExport from "../expression";
 
 import TestKeypadContextWrapper from "./test-keypad-context-wrapper";
 
-import type {PerseusItem} from "../../perseus-types";
+import type {LegacyButtonSets, PerseusItem} from "../../perseus-types";
 import type {Keys as Key} from "@khanacademy/math-input";
 
 type StoryArgs = {
@@ -25,20 +25,27 @@ type Story = {
 type WrappedKeypadContextProps = {
     item: PerseusItem;
     customKeypad: boolean;
+    isMobile?: boolean;
 };
 
-const WrappedKeypadContext = (props: WrappedKeypadContextProps) => {
+const WrappedKeypadContext = ({
+    item,
+    customKeypad,
+    isMobile = false,
+}: WrappedKeypadContextProps) => {
     return (
         <TestKeypadContextWrapper>
             <KeypadContext.Consumer>
-                {({keypadElement, setRenderer, scrollableElement}) => {
+                {({keypadElement}) => {
                     return (
-                        <ItemRendererWithDebugUI
-                            item={props.item}
+                        <ServerItemRendererWithDebugUI
+                            item={item}
+                            keypadElement={keypadElement}
                             // Hardcoding the V2 Keypad to true as the Storybook Args
                             // were not working.
                             apiOptions={{
-                                customKeypad: props.customKeypad,
+                                isMobile: isMobile,
+                                customKeypad: customKeypad,
                                 useV2Keypad: true,
                             }}
                         />
@@ -62,12 +69,12 @@ export const DesktopKitchenSink = (args: StoryArgs): React.ReactElement => {
             "logarithms",
             "basic relations",
             "advanced relations",
-        ],
+        ] as LegacyButtonSets,
     };
 
     const keypadConfiguration = {
         keypadType: KeypadType.EXPRESSION,
-        extraKeys: ["x", "y", "z"] as Key[],
+        extraKeys: ["x", "y", "z"] as Array<Key>,
     };
 
     return (
@@ -98,13 +105,17 @@ export const Mobile = (args: StoryArgs): React.ReactElement => {
     return (
         <div>
             <p>
-                For some reason you need to be{" "}
+                MathInput uses touch events;{" "}
                 <a href="https://developer.chrome.com/docs/devtools/device-mode/">
-                    emulating mobile
+                    emulate mobile
                 </a>{" "}
-                to see the custom keypad.
+                to use the custom keypad.
             </p>
-            <WrappedKeypadContext item={expressionItem3} customKeypad={true} />
+            <WrappedKeypadContext
+                item={expressionItem3}
+                customKeypad
+                isMobile
+            />
         </div>
     );
 };

package/src/widgets/__tests__/expression.test.tsx

@@ -1,5 +1,5 @@
 import {it, describe, beforeEach} from "@jest/globals";
-import {screen, fireEvent} from "@testing-library/react";
+import {screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 
@@ -428,93 +428,20 @@ describe("error tooltip", () => {
         );
     });
 
-    it("shows on error", () => {
+    it("shows error text in tooltip", async () => {
         // Arrange
         const {renderer} = renderQuestion(expressionItem2.question);
         const expression = renderer.findWidgets("expression 1")[0];
 
         // Act
         expression.insert("x&&&&&^1");
+        screen.getByRole("textbox").blur();
         renderer.guessAndScore();
-        jest.runOnlyPendingTimers();
 
         // Assert
-        const errorMessage = screen.getByText(
-            "Sorry, I don't understand that!",
-        );
-        expect(errorMessage).not.toBeUndefined();
-    });
-
-    it("shows error text on mouse over", async () => {
-        // Arrange
-        const {renderer} = renderQuestion(expressionItem2.question);
-        const expression = renderer.findWidgets("expression 1")[0];
-
-        // Act
-        expression.insert("x&&&&&^1");
-        renderer.guessAndScore();
-        jest.runOnlyPendingTimers();
-
-        const tooltip = await screen.findByTestId("test-error-icon");
-
-        // eslint-disable-next-line testing-library/prefer-user-event
-        fireEvent.mouseEnter(tooltip);
-
-        // Assert
-        expect(
-            screen.getByText("Sorry, I don't understand that!"),
-        ).toBeVisible();
-    });
-    it("hides error text on mouse leave", async () => {
-        // Arrange
-        const {renderer} = renderQuestion(expressionItem2.question);
-        const expression = renderer.findWidgets("expression 1")[0];
-
-        expression.insert("x&&&&&^1");
-        renderer.guessAndScore();
-        jest.runOnlyPendingTimers();
-
-        const tooltip = await screen.findByTestId("test-error-icon");
-
-        // Act
-        // NOTE(Nicole): The existing perseus code requires explicit events
-        // eslint-disable-next-line testing-library/prefer-user-event
-        fireEvent.mouseEnter(tooltip);
-        // NOTE(Nicole): The existing perseus code requires explicit events
-        // eslint-disable-next-line testing-library/prefer-user-event
-        fireEvent.mouseLeave(tooltip);
-
-        // Assert
-        expect(
-            screen.getByText("Sorry, I don't understand that!"),
-        ).not.toBeVisible();
-    });
-
-    it("toggles error text on click", async () => {
-        // Arrange
-        const {renderer} = renderQuestion(expressionItem2.question);
-        const expression = renderer.findWidgets("expression 1")[0];
-
-        expression.insert("x&&&&&^1");
-        renderer.guessAndScore();
-        jest.runOnlyPendingTimers();
-
-        const tooltip = await screen.findByTestId("test-error-icon");
-
-        // Act & Assert
-        // NOTE(Nicole): The existing perseus code requires explicit events
-        // eslint-disable-next-line testing-library/prefer-user-event
-        fireEvent.click(tooltip);
+        expect(screen.getByText("Oops!")).toBeVisible();
         expect(
             screen.getByText("Sorry, I don't understand that!"),
         ).toBeVisible();
-
-        // Act & Assert
-        // NOTE(Nicole): The existing perseus code requires explicit events
-        // eslint-disable-next-line testing-library/prefer-user-event
-        fireEvent.click(tooltip);
-        expect(
-            screen.getByText("Sorry, I don't understand that!"),
-        ).not.toBeVisible();
     });
 });

package/src/widgets/expression.tsx

@@ -1,24 +1,22 @@
 import * as KAS from "@khanacademy/kas";
-import {KeypadInput, KeypadType} from "@khanacademy/math-input";
+import {KeyArray, KeypadInput, KeypadType} from "@khanacademy/math-input";
 import {linterContextDefault} from "@khanacademy/perseus-linter";
+import {View} from "@khanacademy/wonder-blocks-core";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import Tooltip from "@khanacademy/wonder-blocks-tooltip";
 import classNames from "classnames";
 import * as React from "react";
 import _ from "underscore";
 
-import InlineIcon from "../components/inline-icon";
 import MathInput from "../components/math-input";
-import Tooltip, {
-    HorizontalDirection,
-    VerticalDirection,
-} from "../components/tooltip";
 import {useDependencies} from "../dependencies";
-import {iconExclamationSign} from "../icon-paths";
 import {Errors as PerseusErrors, Log} from "../logging/log";
 import * as Changeable from "../mixins/changeable";
 import {ApiOptions, ClassNames as ApiClassNames} from "../perseus-api";
+import a11y from "../util/a11y";
 import KhanAnswerTypes from "../util/answer-types";
 
+import type {DependenciesContext} from "../dependencies";
 import type {
     PerseusExpressionWidgetOptions,
     PerseusExpressionAnswerForm,
@@ -34,6 +32,7 @@ import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
 type InputPath = ReadonlyArray<string>;
 
+const ERROR_TITLE = i18n._("Oops!");
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
 
 const insertBraces = (value) => {
@@ -85,7 +84,7 @@ type RenderProps = {
 type ExternalProps = WidgetProps<RenderProps, Rubric>;
 
 export type Props = ExternalProps &
-    ReturnType<typeof useDependencies> & {
+    Partial<React.ContextType<typeof DependenciesContext>> & {
         apiOptions: NonNullable<ExternalProps["apiOptions"]>;
         buttonSets: NonNullable<ExternalProps["buttonSets"]>;
         functions: NonNullable<ExternalProps["functions"]>;
@@ -97,8 +96,9 @@ export type Props = ExternalProps &
     };
 
 export type ExpressionState = {
+    invalid: boolean;
     showErrorTooltip: boolean;
-    showErrorText: boolean;
+    showErrorStyle: boolean;
 };
 
 type DefaultProps = {
@@ -121,7 +121,6 @@ type OnInputErrorFunctionType = (
 // The new, MathQuill input expression widget
 export class Expression extends React.Component<Props, ExpressionState> {
     _isMounted = false;
-    errorTimeout: null | number = null;
 
     //#region Previously a class extension
     /* Content creators input a list of answers which are matched from top to
@@ -315,11 +314,14 @@ export class Expression extends React.Component<Props, ExpressionState> {
     displayName = "Expression";
 
     state: ExpressionState = {
+        invalid: false,
         showErrorTooltip: false,
-        showErrorText: false,
+        showErrorStyle: false,
     };
 
     componentDidMount: () => void = () => {
+        document.addEventListener("mousedown", this._handleMouseDown);
+
         // TODO(scottgrant): This is a hack to remove the deprecated call to
         // this.isMounted() but is still considered an anti-pattern.
         this._isMounted = true;
@@ -334,42 +336,38 @@ export class Expression extends React.Component<Props, ExpressionState> {
             !_.isEqual(this.props.value, prevProps.value) ||
             !_.isEqual(this.props.functions, prevProps.functions)
         ) {
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-            // eslint-disable-next-line no-restricted-syntax
-            // @ts-expect-error - TS2769 - No overload matches this call.
-            clearTimeout(this.errorTimeout);
-
-            if (this.parse(this.props.value, this.props).parsed) {
-                // eslint-disable-next-line react/no-did-update-set-state
-                this.setState({showErrorTooltip: false});
-            } else {
-                // Store timeout ID so that we can clear it above
-                // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-                // eslint-disable-next-line no-restricted-syntax
-                // @ts-expect-error - TS2322 - Type 'Timeout' is not assignable to type 'number'.
-                this.errorTimeout = setTimeout(() => {
-                    const apiResult = this.props.apiOptions.onInputError(
-                        null, // reserved for some widget identifier
-                        this.props.value,
-                        ERROR_MESSAGE,
-                    );
-                    if (apiResult !== false) {
-                        this.setState({showErrorTooltip: true});
-                    }
-                }, 2000);
+            this.setState({
+                invalid: false,
+                showErrorTooltip: false,
+                showErrorStyle: false,
+            });
+            if (!this.parse(this.props.value, this.props).parsed) {
+                const apiResult = this.props.apiOptions.onInputError(
+                    null, // reserved for some widget identifier
+                    this.props.value,
+                    ERROR_MESSAGE,
+                );
+                if (apiResult !== false) {
+                    this.setState({
+                        invalid: true,
+                    });
+                }
             }
         }
     };
 
     componentWillUnmount: () => void = () => {
-        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-        // eslint-disable-next-line no-restricted-syntax
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        clearTimeout(this.errorTimeout);
-
         this._isMounted = false;
     };
 
+    _handleMouseDown = () => {
+        if (this._isMounted && this.state.showErrorTooltip) {
+            this.setState({
+                showErrorTooltip: false,
+            });
+        }
+    };
+
     simpleValidate: (
         rubric: Rubric,
         onInputError: OnInputErrorFunctionType,
@@ -422,7 +420,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     };
 
     _handleFocus: () => void = () => {
-        this.props.analytics.onAnalyticsEvent({
+        this.props.analytics?.onAnalyticsEvent({
             type: "perseus:expression-focused",
             payload: null,
         });
@@ -497,7 +495,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     };
 
     sendExpressionEvaluatedEvent(result: "correct" | "incorrect" | "invalid") {
-        this.props.analytics.onAnalyticsEvent({
+        this.props.analytics?.onAnalyticsEvent({
             type: "perseus:expression-evaluated",
             payload: {
                 result,
@@ -536,41 +534,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
                 />
             );
         }
-        // TODO(alex): Style this tooltip to be more consistent with other
-        // tooltips on the site; align to left middle (once possible)
-        const errorTooltip = (
-            <span className="error-tooltip" role="tooltip">
-                <Tooltip
-                    className="error-text-container"
-                    horizontalPosition={HorizontalDirection.Right}
-                    horizontalAlign={HorizontalDirection.Left}
-                    verticalPosition={VerticalDirection.Top}
-                    arrowSize={10}
-                    borderColor="#fcc335"
-                    show={this.state.showErrorText}
-                >
-                    <span
-                        className="error-icon"
-                        data-test-id="test-error-icon"
-                        onMouseEnter={() => {
-                            this.setState({showErrorText: true});
-                        }}
-                        onMouseLeave={() => {
-                            this.setState({showErrorText: false});
-                        }}
-                        onClick={() => {
-                            // TODO(alex): Better error feedback for mobile
-                            this.setState({
-                                showErrorText: !this.state.showErrorText,
-                            });
-                        }}
-                    >
-                        <InlineIcon {...iconExclamationSign} />
-                    </span>
-                    <div className="error-text">{ERROR_MESSAGE}</div>
-                </Tooltip>
-            </span>
-        );
 
         const className = classNames({
             "perseus-widget-expression": true,
@@ -578,20 +541,54 @@ export class Expression extends React.Component<Props, ExpressionState> {
         });
 
         return (
-            <div className={className}>
-                <MathInput
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="input"
-                    className={ApiClassNames.INTERACTIVE}
-                    value={this.props.value}
-                    onChange={this.changeAndTrack}
-                    convertDotToTimes={this.props.times}
-                    buttonsVisible={this.props.buttonsVisible || "focused"}
-                    buttonSets={this.props.buttonSets}
-                    onFocus={this._handleFocus}
-                    onBlur={this._handleBlur}
-                />
-                {this.state.showErrorTooltip && errorTooltip}
+            <div
+                className={className}
+                onBlur={() =>
+                    this.state.invalid &&
+                    this.setState({
+                        showErrorTooltip: true,
+                        showErrorStyle: true,
+                    })
+                }
+                onFocus={() =>
+                    this.setState({
+                        showErrorTooltip: false,
+                    })
+                }
+            >
+                {/**
+                * This is a visually hidden container for the error tooltip.
+                https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role#example_3_visually_hidden_alert_container_for_screen_reader_notifications
+            */}
+                <View style={a11y.srOnly} role="alert">
+                    {this.state.showErrorTooltip &&
+                        ERROR_TITLE + " " + ERROR_MESSAGE}
+                </View>
+                <Tooltip
+                    forceAnchorFocusivity={false}
+                    opened={this.state.showErrorTooltip}
+                    title={ERROR_TITLE}
+                    content={ERROR_MESSAGE}
+                >
+                    <MathInput
+                        // eslint-disable-next-line react/no-string-refs
+                        ref="input"
+                        className={ApiClassNames.INTERACTIVE}
+                        value={this.props.value}
+                        onChange={this.changeAndTrack}
+                        convertDotToTimes={this.props.times}
+                        buttonSets={this.props.buttonSets}
+                        onFocus={this._handleFocus}
+                        onBlur={this._handleBlur}
+                        hasError={this.state.showErrorStyle}
+                        extraKeys={this.props.keypadConfiguration?.extraKeys}
+                        analytics={
+                            this.props.analytics ?? {
+                                onAnalyticsEvent: async () => {},
+                            }
+                        }
+                    />
+                </Tooltip>
             </div>
         );
     }
@@ -616,8 +613,8 @@ const keypadConfigurationForProps = (
     const keypadType = KeypadType.EXPRESSION;
 
     // Extract any and all variables and constants from the answer forms.
-    const uniqueExtraVariables: Record<string, any> = {};
-    const uniqueExtraConstants: Record<string, any> = {};
+    const uniqueExtraVariables: Partial<Record<Key, boolean>> = {};
+    const uniqueExtraConstants: Partial<Record<Key, boolean>> = {};
     for (const answerForm of widgetOptions.answerForms) {
         const maybeExpr = KAS.parse(answerForm.value, widgetOptions);
         if (maybeExpr.parsed) {
@@ -630,12 +627,20 @@ const keypadConfigurationForProps = (
                 symbol === "pi" || symbol === "theta";
             const toKey = (symbol: any) =>
                 isGreek(symbol) ? symbol.toUpperCase() : symbol;
+            const isKey = (key: string): key is Key =>
+                KeyArray.includes(key as Key);
 
             for (const variable of expr.getVars()) {
-                uniqueExtraVariables[toKey(variable)] = true;
+                const maybeKey = toKey(variable);
+                if (isKey(maybeKey)) {
+                    uniqueExtraVariables[maybeKey] = true;
+                }
             }
             for (const constant of expr.getConsts()) {
-                uniqueExtraConstants[toKey(constant)] = true;
+                const maybeKey = toKey(constant);
+                if (isKey(maybeKey)) {
+                    uniqueExtraConstants[maybeKey] = true;
+                }
             }
         }
     }

package/tsconfig-build.json

@@ -18,6 +18,7 @@
         {"path": "../kmath/tsconfig-build.json"},
         {"path": "../math-input/tsconfig-build.json"},
         {"path": "../perseus-core/tsconfig-build.json"},
+        {"path": "../perseus-core/tsconfig-build.json"},
         {"path": "../perseus-linter/tsconfig-build.json"},
         {"path": "../pure-markdown/tsconfig-build.json"},
         {"path": "../simple-markdown/tsconfig-build.json"},