@khanacademy/perseus 11.6.1 → 12.0.1

package/src/components/math-input.tsx

@@ -1,41 +1,79 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {
+    DesktopKeypad,
     keyTranslator,
     createMathField,
     mathQuillInstance,
+    CursorContext,
+    getCursorContext,
 } from "@khanacademy/math-input";
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import Color, {fade} from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {StyleSheet} from "aphrodite";
 import classNames from "classnames";
 import $ from "jquery";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import _ from "underscore";
 
-import TexButtons from "./tex-buttons";
-
-import type {ButtonSetsType} from "./tex-buttons";
-import type {MathFieldInterface} from "@khanacademy/math-input";
+import type {LegacyButtonSets} from "../perseus-types";
+import type {PerseusDependenciesV2} from "../types";
+import type {Keys, MathFieldInterface} from "@khanacademy/math-input";
 
 type ButtonsVisibleType = "always" | "never" | "focused";
 
+type KeypadButtonSets = {
+    advancedRelations?: boolean;
+    basicRelations?: boolean;
+    divisionKey?: boolean;
+    logarithms?: boolean;
+    preAlgebra?: boolean;
+    trigonometry?: boolean;
+};
+
 type Props = {
     className?: string;
     value: string;
     onChange: any;
     convertDotToTimes: boolean;
-    buttonsVisible: ButtonsVisibleType;
-    buttonSets: ButtonSetsType;
+    /**
+     * @deprecated Use `keypadButtonSets` instead. Maps to `keypadButtonSets`.
+     * @see keypadButtonSets
+     */
+    buttonSets?: LegacyButtonSets;
+    /**
+     * Overrides deprecated `buttonSets` prop.
+     */
+    keypadButtonSets?: KeypadButtonSets;
     labelText?: string;
     onFocus?: () => void;
     onBlur?: () => void;
+    hasError?: boolean;
+    extraKeys?: ReadonlyArray<Keys>;
+    /**
+     * Whether to show the keypad buttons.
+     * The strings now misleading, but we keep them for backwards compatibility.
+     * - `focused` means that the keypad **appears on toggle, *off* by default**.
+     * - `always` means that the keypad **appears on toggle, *on* by default.**
+     * - `never` means that the keypad is **never shown**.
+     */
+    buttonsVisible?: ButtonsVisibleType;
+    analytics: PerseusDependenciesV2["analytics"];
 };
 
 type DefaultProps = {
     value: Props["value"];
     convertDotToTimes: Props["convertDotToTimes"];
-    buttonsVisible: Props["buttonsVisible"];
 };
 
 type State = {
     focused: boolean;
+    keypadOpen: boolean;
+    cursorContext: typeof CursorContext[keyof typeof CursorContext];
+    openedWithEventType?: string;
 };
 
 const customKeyTranslator = {
@@ -62,81 +100,30 @@ class MathInput extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
         value: "",
         convertDotToTimes: false,
-        buttonsVisible: "focused",
     };
 
-    state: State = {focused: false};
+    state: State = {
+        focused: false,
+        keypadOpen: this.props.buttonsVisible === "always" ? true : false,
+        cursorContext: CursorContext.NONE,
+    };
 
     componentDidMount() {
-        window.addEventListener("mousedown", this.handleMouseDown);
-        window.addEventListener("mouseup", this.handleMouseUp);
-
         // Ideally, we would be able to pass an initial value directly into
         // the constructor
         this.mathField()?.latex(this.props.value);
     }
 
-    componentWillUnmount() {
-        window.removeEventListener("mousedown", this.handleMouseDown);
-        window.removeEventListener("mouseup", this.handleMouseUp);
-    }
-
-    // handlers:
-    // keep track of two related bits of state:
-    // * this.state.focused - whether the buttons are currently shown
-    // * this.mouseDown - whether a mouse click is active that started in the
-    //   buttons div
-
-    handleFocus: () => void = () => {
-        this.setState({focused: true});
-        // TODO(joel) fix properly - we should probably allow onFocus handlers
-        // to this property, but we need to work correctly with them.
-        // if (this.props.onFocus) {
-        //     this.props.onFocus();
-        // }
-    };
-
-    handleMouseDown: (arg1: MouseEvent) => void = (event) => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2345 - Argument of type 'EventTarget | null' is not assignable to parameter of type 'Node | null'.
-        const focused = ReactDOM.findDOMNode(this).contains(event.target);
-        this.mouseDown = focused;
-        if (!focused) {
-            this.setState({focused: false});
-        }
-    };
-
-    handleMouseUp: (arg1: MouseEvent) => void = () => {
-        // this mouse click started in the buttons div so we should focus the
-        // input
-        if (this.mouseDown) {
-            this.focus();
-        }
-        this.mouseDown = false;
-    };
-
-    handleBlur: (arg1: React.FocusEvent) => void = (e) => {
-        // TODO(michaelpolyak): Consider trapping focus within the button group.
-        // Focusing back on the input when TAB out of the last button in the
-        // group. This will probably require ESCAPE key handling to enable to
-        // close (blur) the button group in order to focus on next page element.
-        if (
-            !this.mouseDown &&
-            // @ts-expect-error - TS2531 - Object is possibly 'null'.
-            !ReactDOM.findDOMNode(this).contains(e.relatedTarget)
-        ) {
-            this.setState({focused: false});
-        }
-    };
-
-    _shouldShowButtons: () => boolean = () => {
-        if (this.props.buttonsVisible === "always") {
-            return true;
-        }
+    openKeypad() {
         if (this.props.buttonsVisible === "never") {
-            return false;
+            return;
         }
-        return this.state.focused;
-    };
+        this.setState({keypadOpen: true});
+    }
+
+    closeKeypad() {
+        this.setState({keypadOpen: false});
+    }
 
     insert: (value: any) => void = (value) => {
         const input = this.mathField();
@@ -206,6 +193,9 @@ class MathInput extends React.Component<Props, State> {
                             if (this.props.value !== value) {
                                 this.props.onChange(value);
                             }
+                            this.setState({
+                                cursorContext: getCursorContext(mathField),
+                            });
                         },
                         enter: () => {
                             // NOTE(kevinb): This isn't how answers to exercises are
@@ -239,9 +229,31 @@ class MathInput extends React.Component<Props, State> {
         this.setState({focused: true});
     };
 
-    blur: () => void = () => {
-        this.mathField()?.blur();
-        this.setState({focused: false});
+    // removing mathfield focus here makes the cursor vanished when the
+    // input is still focused
+    blur: () => void = () => this.setState({focused: false});
+
+    handleKeypadPress: (key: Keys, e: any) => void = (key, e) => {
+        const translator = keyTranslator[key];
+        const mathField = this.mathField();
+
+        if (mathField) {
+            if (translator) {
+                translator(mathField, key);
+            }
+            this.setState({
+                cursorContext: getCursorContext(mathField),
+            });
+        }
+
+        // We want to prevent taking focus from input when clicking on keypad
+        //   Clickable handles "onClick" differently than react;
+        //   a keyboard event is "keydown" type.
+        //   In react without WonderBlocks, "enter" or "space" keydown events
+        //   are also "click" events, differentiated by "detail".
+        if (e.type === "click") {
+            this.focus();
+        }
     };
 
     render(): React.ReactNode {
@@ -258,36 +270,202 @@ class MathInput extends React.Component<Props, State> {
             className = className + " " + this.props.className;
         }
 
-        let buttons = null;
-        if (this._shouldShowButtons()) {
-            // @ts-expect-error - TS2322 - Type 'Element' is not assignable to type 'null'.
-            buttons = (
-                <TexButtons
-                    sets={this.props.buttonSets}
-                    className="math-input-buttons absolute"
-                    convertDotToTimes={this.props.convertDotToTimes}
-                    onInsert={this.insert}
-                />
-            );
-        }
-
         return (
-            <div style={{display: "inline-block"}}>
-                <div style={{display: "inline-block"}}>
+            <View
+                style={[
+                    styles.outerWrapper,
+                    this.state.focused && styles.wrapperFocused,
+                    this.props.hasError && styles.wrapperError,
+                ]}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        padding: 1,
+                    }}
+                    onClick={() => {
+                        const mathField = this.mathField();
+                        if (!mathField) {
+                            return;
+                        }
+                        this.setState({
+                            cursorContext: getCursorContext(mathField),
+                        });
+                    }}
+                >
                     <span
                         className={className}
                         ref={(ref) => (this.__mathFieldWrapperRef = ref)}
                         aria-label={this.props.labelText}
-                        onFocus={this.handleFocus}
-                        onBlur={this.handleBlur}
+                        onFocus={() => this.focus()}
+                        onBlur={() => this.blur()}
                     />
+                    <Popover
+                        opened={this.state.keypadOpen}
+                        onClose={() => this.closeKeypad()}
+                        dismissEnabled
+                        content={() => (
+                            <PopoverContentCore
+                                closeButtonVisible
+                                style={styles.popoverContent}
+                            >
+                                <DesktopKeypad
+                                    onAnalyticsEvent={
+                                        this.props.analytics.onAnalyticsEvent
+                                    }
+                                    extraKeys={this.props.extraKeys}
+                                    onClickKey={this.handleKeypadPress}
+                                    cursorContext={this.state.cursorContext}
+                                    convertDotToTimes={
+                                        this.props.convertDotToTimes
+                                    }
+                                    {...(this.props.keypadButtonSets ??
+                                        mapButtonSets(this.props?.buttonSets))}
+                                />
+                            </PopoverContentCore>
+                        )}
+                    >
+                        {this.props.buttonsVisible === "never" ? (
+                            <MathInputIcon
+                                hovered={false}
+                                focused={false}
+                                active={false}
+                            />
+                        ) : (
+                            <Clickable
+                                aria-label={
+                                    this.state.keypadOpen
+                                        ? i18n._("close math keypad")
+                                        : i18n._("open math keypad")
+                                }
+                                aria-checked={this.state.keypadOpen}
+                                role="switch"
+                                onClick={() =>
+                                    this.state.keypadOpen
+                                        ? this.closeKeypad()
+                                        : this.openKeypad()
+                                }
+                            >
+                                {(props) => (
+                                    <MathInputIcon
+                                        active={this.state.keypadOpen}
+                                        {...props}
+                                    />
+                                )}
+                            </Clickable>
+                        )}
+                    </Popover>
                 </div>
-                <div style={{position: "relative"}} onBlur={this.handleBlur}>
-                    {buttons}
-                </div>
-            </div>
+            </View>
         );
     }
 }
 
+const MathInputIcon = ({hovered, focused, active}) => {
+    let color: string | undefined;
+    switch (true) {
+        case focused || active:
+            color = Color.white;
+            break;
+        case hovered:
+            color = Color.blue;
+            break;
+        default:
+            color = Color.offBlack;
+            break;
+    }
+    const dynamicClass =
+        active || focused ? styles.iconActive : styles.iconInactive;
+    return (
+        <View style={[styles.iconContainer, dynamicClass]}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                fill={color}
+                viewBox="0 0 256 256"
+            >
+                <path d="M112,72a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16h64A8,8,0,0,1,112,72Zm-8,104H80V152a8,8,0,0,0-16,0v24H40a8,8,0,0,0,0,16H64v24a8,8,0,0,0,16,0V192h24a8,8,0,0,0,0-16Zm48,0h64a8,8,0,0,0,0-16H152a8,8,0,0,0,0,16Zm64,16H152a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm-61.66-90.34a8,8,0,0,0,11.32,0L184,83.31l18.34,18.35a8,8,0,0,0,11.32-11.32L195.31,72l18.35-18.34a8,8,0,0,0-11.32-11.32L184,60.69,165.66,42.34a8,8,0,0,0-11.32,11.32L172.69,72,154.34,90.34A8,8,0,0,0,154.34,101.66Z" />
+            </svg>
+        </View>
+    );
+};
+
+const mapButtonSets = (buttonSets?: LegacyButtonSets) => {
+    const keypadButtonSets: KeypadButtonSets = {};
+    if (!buttonSets) {
+        return keypadButtonSets;
+    }
+    buttonSets.forEach((buttonSet) => {
+        switch (buttonSet) {
+            case "advanced relations":
+                keypadButtonSets.advancedRelations = true;
+                break;
+            case "basic relations":
+                keypadButtonSets.basicRelations = true;
+                break;
+            case "basic+div":
+                keypadButtonSets.divisionKey = true;
+                break;
+            case "logarithms":
+                keypadButtonSets.logarithms = true;
+                break;
+            case "prealgebra":
+                keypadButtonSets.preAlgebra = true;
+                break;
+            case "trig":
+                keypadButtonSets.trigonometry = true;
+                break;
+            case "basic":
+            default:
+                break;
+        }
+    });
+    return keypadButtonSets;
+};
+
+const inputFocused = {
+    borderWidth: 2,
+    borderColor: Color.blue,
+    margin: -1,
+};
+
+const styles = StyleSheet.create({
+    iconContainer: {
+        display: "flex",
+        justifyContent: "center",
+        height: "100%",
+        padding: Spacing.xxxSmall_4,
+        borderRadius: 1,
+    },
+    iconInactive: {
+        backgroundColor: Color.offBlack8,
+    },
+    iconActive: {
+        backgroundColor: Color.offBlack64,
+    },
+    outerWrapper: {
+        display: "inline-block",
+        borderStyle: "solid",
+        borderWidth: 1,
+        borderColor: Color.offBlack50,
+        borderRadius: 3,
+        background: Color.white,
+        ":hover": inputFocused,
+    },
+    wrapperFocused: inputFocused,
+    wrapperError: {
+        borderColor: Color.red,
+        background: fade(Color.red, 0.08),
+        ":hover": {
+            borderColor: Color.red,
+        },
+    },
+    popoverContent: {
+        padding: 0,
+        paddingBottom: Spacing.xxSmall_6,
+        maxWidth: "initial",
+    },
+});
+
 export default MathInput;

package/src/components/tex-buttons.tsx

@@ -6,6 +6,7 @@ import _ from "underscore";
 
 import {getDependencies} from "../dependencies";
 
+import type {LegacyButtonSets} from "../perseus-types";
 import type {Keys} from "@khanacademy/math-input";
 
 const prettyBig = {fontSize: "150%"} as const;
@@ -22,7 +23,7 @@ type ButtonSet = (props: any) => [
 ];
 
 type ButtonSets = {
-    readonly [key: string]: ReadonlyArray<ButtonSet>;
+    readonly [key in LegacyButtonSets[number]]: ReadonlyArray<ButtonSet>;
 };
 
 // These are functions because we want to generate a new component for each use
@@ -285,7 +286,6 @@ class TexButtons extends React.Component<Props> {
         // for _.keys() to return the keys in an arbitrary order, but in
         // practice, they will be ordered as listed above.
         const sortedButtonSets = _.sortBy(this.props.sets, (setName) =>
-            // @ts-expect-error - TS2345 - Argument of type 'string | number' is not assignable to parameter of type 'string'.
             _.keys(buttonSets).indexOf(setName),
         );
 

package/src/perseus-types.ts

@@ -311,11 +311,21 @@ export type PerseusExplanationWidgetOptions = {
     static: boolean;
 };
 
+export type LegacyButtonSets = ReadonlyArray<
+    | "basic"
+    | "basic+div"
+    | "trig"
+    | "prealgebra"
+    | "logarithms"
+    | "basic relations"
+    | "advanced relations"
+>;
+
 export type PerseusExpressionWidgetOptions = {
     // The expression forms the answer may come in
     answerForms: ReadonlyArray<PerseusExpressionAnswerForm>;
     // Different buttons sets that can show in the expression. Options are "basic", "basic+div", "trig", "prealgebra", "logarithms", "basic relations", "advanced relations"
-    buttonSets: ReadonlyArray<string>;
+    buttonSets: LegacyButtonSets;
     // Variables that can be used as functions.  Default: ["f", "g", "h"]
     functions: ReadonlyArray<string>;
     // Use x for rendering multiplication instead of a center dot.

package/src/styles/perseus-renderer.less

@@ -598,8 +598,7 @@
 }
 
 .perseus-math-input.mq-editable-field.mq-math-mode {
-    // Mimic native text input
-    background: #fff;
+    background-color: transparent;
 
     // If the font-size is too small, super/subscripts become hard to input
     font-size: 18px;
@@ -607,11 +606,11 @@
     // Make the click target easier to hit
     min-width: 100px;
 
-    // Mimic native text input w/o using -moz/-webkit-apperance: textfield
-    // border-color: rgb(78, 187, 212);
-    border-color: #a4a4a4;
+    border: unset;
 
-    border-radius: 5px;
+    &.mq-focused {
+        box-shadow: unset;
+    }
 
     & > .mq-root-block {
         // A bit of extra whitespace here greatly improves legibility

package/src/styles/widgets/expression.less

@@ -26,12 +26,6 @@
         width: 210px;
     }
 
-    &.show-error-tooltip
-        .perseus-math-input.mq-editable-field.mq-math-mode
-        > .mq-root-block {
-        padding-right: 25px;
-    }
-
     .perseus-formats-tooltip {
         width: 190px;
     }

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

@@ -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 = {
@@ -69,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 (

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();
     });
 });