@khanacademy/math-input 8.1.3 → 9.0.0

package/dist/types.d.ts

@@ -1,7 +1,8 @@
-import ReactDOM from "react-dom";
-import { CursorContext } from "./components/input/cursor-contexts";
-import Key from "./data/keys";
-import { BorderDirection, EchoAnimationType, IconType, KeyType, KeypadType } from "./enums";
+import type { CursorContext } from "./components/input/cursor-contexts";
+import type Key from "./data/keys";
+import type { BorderDirection, EchoAnimationType, IconType, KeyType, KeypadType } from "./enums";
+import type * as React from "react";
+import type ReactDOM from "react-dom";
 export type Border = Partial<ReadonlyArray<BorderDirection>>;
 export interface Bound {
     top: number;
@@ -62,7 +63,7 @@ export type ActiveNodesObj = {
 export type LayoutProps = {
     initialBounds: Bound;
 };
-export type ClickKeyCallback = (key: Key) => void;
+export type ClickKeyCallback = (key: Key, event?: React.SyntheticEvent) => void;
 export interface KeypadAPI {
     activate: () => void;
     dismiss: () => void;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "8.1.3",
+    "version": "9.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,16 +24,16 @@
         "performance-now": "^0.2.0"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-clickable": "^3.0.8",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.0",
         "@khanacademy/wonder-blocks-color": "^2.0.1",
-        "@khanacademy/wonder-blocks-core": "^5.0.4",
+        "@khanacademy/wonder-blocks-core": "^6.0.0",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-popover": "^2.0.11",
         "@khanacademy/wonder-stuff-core": "^1.2.2",
         "aphrodite": "^1.1.0",
         "jquery": "^2.1.1",
         "katex": "^0.11.1",
-        "perseus-build-settings": "^0.1.0",
+        "perseus-build-settings": "^0.2.0",
         "prop-types": "15.6.1",
         "react": "^16.8.0",
         "react-dom": "^16.8.0",
@@ -44,9 +44,9 @@
         "redux": "^4.0.0"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-clickable": "^3.0.8",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.0",
         "@khanacademy/wonder-blocks-color": "^2.0.1",
-        "@khanacademy/wonder-blocks-core": "^5.0.4",
+        "@khanacademy/wonder-blocks-core": "^6.0.0",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-stuff-core": "^1.2.2",
         "aphrodite": "^1.1.0",

package/src/components/input/cursor-contexts.ts

@@ -10,28 +10,28 @@
  * the radical.
  */
 
-export const CursorContext = {
+export enum CursorContext {
     // The cursor is not in any of the other viable contexts.
-    NONE: "NONE",
+    NONE = "NONE",
 
     // The cursor is within a set of parentheses.
-    IN_PARENS: "IN_PARENS",
+    IN_PARENS = "IN_PARENS",
 
     // The cursor is within a superscript (e.g., an exponent).
-    IN_SUPER_SCRIPT: "IN_SUPER_SCRIPT",
+    IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT",
 
     // The cursor is within a subscript (e.g., the base of a custom logarithm).
-    IN_SUB_SCRIPT: "IN_SUB_SCRIPT",
+    IN_SUB_SCRIPT = "IN_SUB_SCRIPT",
 
     // The cursor is in the numerator of a fraction.
-    IN_NUMERATOR: "IN_NUMERATOR",
+    IN_NUMERATOR = "IN_NUMERATOR",
 
     // The cursor is in the denominator of a fraction.
-    IN_DENOMINATOR: "IN_DENOMINATOR",
+    IN_DENOMINATOR = "IN_DENOMINATOR",
 
     // The cursor is sitting before a fraction; that is, the cursor is within
     // what looks to be a mixed number preceding a fraction. This will only be
     // the case when the only math between the cursor and the fraction to its
     // write is non-leaf math (numbers and variables).
-    BEFORE_FRACTION: "BEFORE_FRACTION",
-} as const;
+    BEFORE_FRACTION = "BEFORE_FRACTION",
+}

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

@@ -54,18 +54,18 @@ class MathInput extends React.Component<Props, State> {
     didTouchOutside: boolean | null | undefined;
     didScroll: boolean | null | undefined;
     mathField: any;
-    // @ts-expect-error [FEI-5003] - TS2564 - Property 'recordTouchStartOutside' has no initializer and is not definitely assigned in the constructor.
+    // @ts-expect-error - TS2564 - Property 'recordTouchStartOutside' has no initializer and is not definitely assigned in the constructor.
     recordTouchStartOutside: (arg1: any) => void;
-    // @ts-expect-error [FEI-5003] - TS2564 - Property 'blurOnTouchEndOutside' has no initializer and is not definitely assigned in the constructor.
+    // @ts-expect-error - TS2564 - Property 'blurOnTouchEndOutside' has no initializer and is not definitely assigned in the constructor.
     blurOnTouchEndOutside: (arg1: any) => void;
     dragListener: any;
     inputRef: HTMLDivElement | null | undefined;
     _isMounted: boolean | null | undefined;
     _mathContainer: any;
-    // @ts-expect-error [FEI-5003] - TS2564 - Property '_container' has no initializer and is not definitely assigned in the constructor.
+    // @ts-expect-error - TS2564 - Property '_container' has no initializer and is not definitely assigned in the constructor.
     _container: HTMLDivElement;
     _root: any;
-    // @ts-expect-error [FEI-5003] - TS2564 - Property '_containerBounds' has no initializer and is not definitely assigned in the constructor.
+    // @ts-expect-error - TS2564 - Property '_containerBounds' has no initializer and is not definitely assigned in the constructor.
     _containerBounds: ClientRect;
     _keypadBounds: ClientRect | null | undefined;
 
@@ -235,11 +235,11 @@ class MathInput extends React.Component<Props, State> {
         window.removeEventListener("touchstart", this.recordTouchStartOutside);
         window.removeEventListener("touchend", this.blurOnTouchEndOutside);
         window.removeEventListener("touchcancel", this.blurOnTouchEndOutside);
-        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+        // @ts-expect-error - TS2769 - No overload matches this call.
         window.removeEventListener("resize", this._clearKeypadBoundsCache());
         window.removeEventListener(
             "orientationchange",
-            // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+            // @ts-expect-error - TS2769 - No overload matches this call.
             this._clearKeypadBoundsCache(),
         );
     }
@@ -430,7 +430,7 @@ class MathInput extends React.Component<Props, State> {
             ];
 
             const elements = points
-                // @ts-expect-error [FEI-5003] - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+                // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
                 .map((point) => document.elementFromPoint(...point))
                 // We exclude the root container itself and any nodes marked
                 // as non-leaf which are fractions, parens, and roots.  The
@@ -468,16 +468,16 @@ class MathInput extends React.Component<Props, State> {
             const elementsById: Record<string, any> = {};
 
             for (const element of elements) {
-                // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
+                // @ts-expect-error - TS2531 - Object is possibly 'null'.
                 const id = element.getAttribute("mathquill-command-id");
                 if (id != null) {
-                    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | null' is not assignable to parameter of type 'HTMLElement | null'.
+                    // @ts-expect-error - TS2345 - Argument of type 'Element | null' is not assignable to parameter of type 'HTMLElement | null'.
                     leafElements.push(element);
 
                     counts[id] = (counts[id] || 0) + 1;
                     elementsById[id] = element;
                 } else {
-                    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | null' is not assignable to parameter of type 'HTMLElement | null'.
+                    // @ts-expect-error - TS2345 - Argument of type 'Element | null' is not assignable to parameter of type 'HTMLElement | null'.
                     nonLeafElements.push(element);
                 }
             }
@@ -506,7 +506,7 @@ class MathInput extends React.Component<Props, State> {
             // hit count in the situation should not have serious effects on
             // the overall accuracy of the algorithm.
             if (hitNode == null && nonLeafElements.length > 0) {
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'HTMLElement | null' is not assignable to type 'null'.
+                // @ts-expect-error - TS2322 - Type 'HTMLElement | null' is not assignable to type 'null'.
                 hitNode = nonLeafElements[0];
             }
 
@@ -908,7 +908,7 @@ class MathInput extends React.Component<Props, State> {
                 overrides.css. */}
                 <div
                     className="keypad-input"
-                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
+                    // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
                     tabIndex={"0"}
                     ref={(node) => {
                         this.inputRef = node;

package/src/components/input/math-wrapper.ts

@@ -16,8 +16,6 @@
 
 import $ from "jquery";
 
-import Key from "../../data/keys";
-import {Cursor} from "../../types";
 import handleBackspace from "../key-handlers/handle-backspace";
 import keyTranslator from "../key-handlers/key-translator";
 
@@ -27,7 +25,13 @@ import {
     maybeFindCommand,
 } from "./mathquill-helpers";
 import {createMathField, mathQuillInstance} from "./mathquill-instance";
-import {MathFieldInterface, MathFieldUpdaterCallback} from "./mathquill-types";
+
+import type Key from "../../data/keys";
+import type {Cursor} from "../../types";
+import type {
+    MathFieldInterface,
+    MathFieldUpdaterCallback,
+} from "./mathquill-types";
 
 const mobileKeyTranslator: Record<Key, MathFieldUpdaterCallback> = {
     ...keyTranslator,

package/src/components/input/mathquill-helpers.ts

@@ -1,10 +1,8 @@
 import {CursorContext} from "./cursor-contexts";
 import {mathQuillInstance} from "./mathquill-instance";
-import {
-    MathFieldActionType,
-    MathFieldCursor,
-    MathFieldInterface,
-} from "./mathquill-types";
+import {MathFieldActionType} from "./mathquill-types";
+
+import type {MathFieldCursor, MathFieldInterface} from "./mathquill-types";
 
 const Numerals = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const GreekLetters = ["\\theta", "\\pi"];

package/src/components/input/mathquill-instance.ts

@@ -1,6 +1,6 @@
 import MathQuill from "mathquill";
 
-import {MathQuillInterface, MathFieldConfig} from "./mathquill-types";
+import type {MathQuillInterface, MathFieldConfig} from "./mathquill-types";
 
 // We only need one MathQuill instance (referred to as MQ in the docs)
 // and that contains some MQ constants and the MathField constructor

package/src/components/input/mathquill-types.ts

@@ -1,4 +1,4 @@
-import Key from "../../data/keys";
+import type Key from "../../data/keys";
 
 export interface MathQuillInterface {
     L: "L";

package/src/components/key-handlers/handle-arrow.ts

@@ -1,13 +1,14 @@
-import Key from "../../data/keys";
 import {
     maybeFindCommand,
     maybeFindCommandBeforeParens,
     getCursor,
 } from "../input/mathquill-helpers";
 import {mathQuillInstance} from "../input/mathquill-instance";
-import {
+import {MathFieldActionType} from "../input/mathquill-types";
+
+import type Key from "../../data/keys";
+import type {
     MathFieldInterface,
-    MathFieldActionType,
     MathFieldCursor,
 } from "../input/mathquill-types";
 

package/src/components/key-handlers/handle-backspace.ts

@@ -10,8 +10,9 @@ import {
     maybeFindCommandBeforeParens,
 } from "../input/mathquill-helpers";
 import {mathQuillInstance} from "../input/mathquill-instance";
-import {
-    MathFieldActionType,
+import {MathFieldActionType} from "../input/mathquill-types";
+
+import type {
     MathFieldInterface,
     MathFieldCursor,
 } from "../input/mathquill-types";

package/src/components/key-handlers/handle-exponent.ts

@@ -1,10 +1,9 @@
-import Key from "../../data/keys";
 import {getCursor} from "../input/mathquill-helpers";
 import {mathQuillInstance} from "../input/mathquill-instance";
-import {
-    MathFieldInterface,
-    MathFieldActionType,
-} from "../input/mathquill-types";
+import {MathFieldActionType} from "../input/mathquill-types";
+
+import type Key from "../../data/keys";
+import type {MathFieldInterface} from "../input/mathquill-types";
 
 const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
 const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];

package/src/components/key-handlers/handle-jump-out.ts

@@ -1,4 +1,3 @@
-import Key from "../../data/keys";
 import {CursorContext} from "../input/cursor-contexts";
 import {
     isFraction,
@@ -7,10 +6,10 @@ import {
     getCursor,
 } from "../input/mathquill-helpers";
 import {mathQuillInstance} from "../input/mathquill-instance";
-import {
-    MathFieldInterface,
-    MathFieldActionType,
-} from "../input/mathquill-types";
+import {MathFieldActionType} from "../input/mathquill-types";
+
+import type Key from "../../data/keys";
+import type {MathFieldInterface} from "../input/mathquill-types";
 
 const KeysForJumpContext = {
     [CursorContext.IN_PARENS]: "JUMP_OUT_PARENTHESES",

package/src/components/key-handlers/key-translator.ts

@@ -1,16 +1,17 @@
-import Key from "../../data/keys";
 import {DecimalSeparator} from "../../enums";
 import {decimalSeparator} from "../../utils";
 import {mathQuillInstance} from "../input/mathquill-instance";
-import {
-    MathFieldInterface,
-    MathFieldUpdaterCallback,
-} from "../input/mathquill-types";
 
 import handleArrow from "./handle-arrow";
 import handleExponent from "./handle-exponent";
 import handleJumpOut from "./handle-jump-out";
 
+import type Key from "../../data/keys";
+import type {
+    MathFieldInterface,
+    MathFieldUpdaterCallback,
+} from "../input/mathquill-types";
+
 enum ActionType {
     WRITE = "write",
     CMD = "cmd",

package/src/components/keypad/__tests__/keypad-button.test.tsx

@@ -23,9 +23,10 @@ describe("<KeypadButton />", () => {
         ).toBeInTheDocument();
     });
 
-    it("handles onClickKey callback", () => {
+    it("handles onClickKey callback with click", () => {
         // Arrange
-        const mockClickKeyCallback = jest.fn();
+        // persist event to prevent React from releasing/nullifying before assertion
+        const mockClickKeyCallback = jest.fn((_, event) => event.persist());
         render(
             <KeypadButton
                 onClickKey={mockClickKeyCallback}
@@ -38,6 +39,46 @@ describe("<KeypadButton />", () => {
         userEvent.click(screen.getByRole("button", {name: "Left parenthesis"}));
 
         // Assert
-        expect(mockClickKeyCallback).toHaveBeenCalledWith("LEFT_PAREN");
+        expect(mockClickKeyCallback).toHaveBeenCalledWith(
+            "LEFT_PAREN",
+            expect.objectContaining({
+                type: "click",
+                detail: 1,
+            }),
+        );
+    });
+
+    it("handles onClickKey callback with keyboard press", () => {
+        // Arrange
+        // persist event to prevent React from releasing/nullifying before assertion
+        const mockClickKeyCallback = jest.fn((_, event) => event.persist());
+        render(
+            <KeypadButton
+                onClickKey={mockClickKeyCallback}
+                keyConfig={Keys.RIGHT_PAREN}
+                coord={[0, 0]}
+            />,
+        );
+
+        // Act
+        screen.getByRole("button", {name: "Right parenthesis"}).focus();
+        userEvent.keyboard("{enter}");
+
+        // Assert
+        expect(mockClickKeyCallback).toHaveBeenCalledWith(
+            "RIGHT_PAREN",
+            // In the browser, "enter" and "space" trigger a click event with detail 0.
+            //   However, there is a bug in this version (13.5) of RTL that prevents
+            //   "keypress" from being fired, which handles the click event.
+            //   https://github.com/testing-library/user-event/blob/5d946d51d643f0ef7e7730fa527b7ca96e330907/src/keyboard/plugins/functional.ts#L99
+            //   https://github.com/testing-library/user-event/issues/766
+            //   The only event fired is `keyDown`, which is inconsistent with the
+            //   browser. If you're reading this and we have upgraded to 14+, please
+            //   uncomment the `type` assertion below.
+            expect.objectContaining({
+                // type: "click",
+                detail: 0,
+            }),
+        );
     });
 });

package/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx

@@ -1,4 +1,3 @@
-import {PerseusAnalyticsEvent} from "@khanacademy/perseus-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Popover} from "@khanacademy/wonder-blocks-popover";
 import {render, screen} from "@testing-library/react";
@@ -7,12 +6,14 @@ import * as React from "react";
 
 import "@testing-library/jest-dom";
 
-import Key from "../../../data/keys";
 import {createMathField} from "../../input/mathquill-instance";
-import {MathFieldInterface} from "../../input/mathquill-types";
 import keyTranslator from "../../key-handlers/key-translator";
 import Keypad from "../index";
 
+import type Key from "../../../data/keys";
+import type {MathFieldInterface} from "../../input/mathquill-types";
+import type {PerseusAnalyticsEvent} from "@khanacademy/perseus-core";
+
 type Props = {
     onChangeMathInput: (mathInputTex: string) => void;
     keypadClosed?: boolean;

package/src/components/keypad/__tests__/keypad-v2.cypress.ts

@@ -1,46 +1,16 @@
 import renderSingleKeypad from "../../../../../../testing/render-keypad-with-cypress";
-import KeyConfigs from "../../../data/key-configs";
 
-const tabs = [
-    {
-        name: "Operators",
-        specialButton: "EXP_2",
-        label: KeyConfigs["EXP_2"].ariaLabel,
-    },
-    {name: "Extras", specialButton: "PI", label: KeyConfigs["PI"].ariaLabel},
-
-    {
-        name: "Geometry",
-        specialButton: "COS",
-        label: KeyConfigs["COS"].ariaLabel,
-    },
-    {
-        name: "Numbers",
-        specialButton: "NUM_7",
-        label: KeyConfigs["NUM_7"].ariaLabel,
-    },
-];
+import tabs from "./test-data-tabs";
 
 describe("Keypad v2", () => {
     tabs.forEach((tab) => {
         it(`switches to the correct tab: ${tab.name}`, () => {
-            renderSingleKeypad((key) => {});
+            renderSingleKeypad();
 
             // currently clicking on the bottom left due to button re-rendering
             // after mousedown but before mouseup (only in Cypress)
             cy.get('[aria-label="' + tab.name + '"]').click("bottomLeft");
             cy.get('[aria-label="' + tab.label + '"]').should("exist");
         });
-
-        it(`calls ${tab.specialButton} key callback in  ${tab.name} tab`, () => {
-            const onClickKeySpy = cy.spy().as("onClickKeySpy");
-            renderSingleKeypad(onClickKeySpy);
-            cy.get('[aria-label="' + tab.name + '"]').click();
-            cy.get('[aria-label="' + tab.label + '"]').click();
-            cy.get("@onClickKeySpy").should(
-                "have.been.calledOnceWithExactly",
-                tab.specialButton,
-            );
-        });
     });
 });

package/src/components/keypad/__tests__/keypad.test.tsx

@@ -1,4 +1,5 @@
 import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import * as React from "react";
 import "@testing-library/jest-dom";
 
@@ -6,6 +7,8 @@ import keyConfigs from "../../../data/key-configs";
 import {CursorContext} from "../../input/cursor-contexts";
 import Keypad from "../index";
 
+import tabs from "./test-data-tabs";
+
 const contextToKeyAria = {
     [CursorContext.IN_PARENS]: keyConfigs.JUMP_OUT_PARENTHESES.ariaLabel,
     [CursorContext.IN_SUPER_SCRIPT]: keyConfigs.JUMP_OUT_EXPONENT.ariaLabel,
@@ -74,4 +77,47 @@ describe("keypad", () => {
             }),
         ).not.toBeInTheDocument();
     });
+
+    it(`hides the tabs if providing the Fraction Keypad`, () => {
+        // Arrange
+        // Act
+        render(
+            <Keypad
+                onClickKey={() => {}}
+                fractionsOnly={true}
+                sendEvent={async () => {}}
+            />,
+        );
+
+        // Assert
+        expect(screen.queryByRole("tab")).not.toBeInTheDocument();
+    });
+
+    it(`clicking tab triggers callback`, () => {
+        // Arrange
+        const onClickKey = jest.fn();
+
+        // Act
+        render(
+            <Keypad
+                onClickKey={onClickKey}
+                preAlgebra
+                trigonometry
+                extraKeys={["PI"]}
+                sendEvent={async () => {}}
+            />,
+        );
+
+        for (const tabData of tabs) {
+            const tab = screen.getByLabelText(tabData.name);
+            expect(tab).toBeInTheDocument();
+            userEvent.click(tab);
+            const key = screen.getByLabelText(tabData.label);
+            expect(key).toBeInTheDocument();
+            userEvent.click(key);
+        }
+
+        // Assert
+        expect(onClickKey).toHaveBeenCalledTimes(tabs.length);
+    });
 });

package/src/components/keypad/__tests__/test-data-tabs.ts

@@ -0,0 +1,21 @@
+import KeyConfigs from "../../../data/key-configs";
+
+export default [
+    {
+        name: "Operators",
+        specialButton: "EXP_2",
+        label: KeyConfigs["EXP_2"].ariaLabel,
+    },
+    {name: "Extras", specialButton: "PI", label: KeyConfigs["PI"].ariaLabel},
+
+    {
+        name: "Geometry",
+        specialButton: "COS",
+        label: KeyConfigs["COS"].ariaLabel,
+    },
+    {
+        name: "Numbers",
+        specialButton: "NUM_7",
+        label: KeyConfigs["NUM_7"].ariaLabel,
+    },
+];