@khanacademy/math-input 16.1.2 → 16.3.0

package/dist/utils.d.ts

@@ -3,3 +3,15 @@ export declare const DecimalSeparator: {
     readonly PERIOD: ".";
 };
 export declare const decimalSeparator: string;
+/**
+ * convertDotToTimes (aka `times`) is an option the content creators have to
+ * use × (TIMES) rather than · (CDOT) for multiplication (for younger learners).
+ * Some locales _only_ use one or the other for all multiplication regardless
+ * of age.
+ *
+ * convertDotToTimesByLocale overrides convertDotToTimes for those locales.
+ *
+ * @param {boolean} convertDotToTimes - the setting set by content creators
+ * @returns {boolean} - true to convert to × (TIMES), false to use · (CDOT)
+ */
+export declare function convertDotToTimesByLocale(convertDotToTimes: boolean): boolean;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "16.1.2",
+    "version": "16.3.0",
     "publishConfig": {
         "access": "public"
     },

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

@@ -99,7 +99,7 @@ describe("math input integration", () => {
         ).not.toBeInTheDocument();
     });
 
-    it("shows the keypad after input interaction", async () => {
+    it("shows the keypad after input touch-interaction", async () => {
         render(<ConnectedMathInput />);
 
         const input = screen.getByLabelText(
@@ -115,6 +115,22 @@ describe("math input integration", () => {
         expect(screen.getByRole("button", {name: "1"})).toBeVisible();
     });
 
+    it("shows the keypad after input click-interaction", async () => {
+        render(<ConnectedMathInput />);
+
+        const input = screen.getByLabelText(
+            "Math input box Tap with one or two fingers to open keyboard",
+        );
+
+        userEvent.click(input);
+
+        await waitFor(() => {
+            expect(screen.getByRole("button", {name: "4"})).toBeVisible();
+        });
+
+        expect(screen.getByRole("button", {name: "1"})).toBeVisible();
+    });
+
     it("updates input when using keypad", async () => {
         render(<ConnectedMathInput />);
 

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

@@ -56,6 +56,8 @@ class MathInput extends React.Component<Props, State> {
     recordTouchStartOutside: (arg1: any) => void;
     // @ts-expect-error - TS2564 - Property 'blurOnTouchEndOutside' has no initializer and is not definitely assigned in the constructor.
     blurOnTouchEndOutside: (arg1: any) => void;
+    // @ts-expect-error - TS2564 - Property 'blurOnClickOutside' has no initializer and is not definitely assigned in the constructor.
+    blurOnClickOutside: (arg1: any) => void;
     dragListener: any;
     inputRef: HTMLDivElement | null | undefined;
     _isMounted: boolean | null | undefined;
@@ -65,7 +67,6 @@ class MathInput extends React.Component<Props, State> {
     _root: any;
     // @ts-expect-error - TS2564 - Property '_containerBounds' has no initializer and is not definitely assigned in the constructor.
     _containerBounds: ClientRect;
-    _keypadBounds: ClientRect | null | undefined;
 
     static defaultProps: DefaultProps = {
         style: {},
@@ -120,6 +121,24 @@ class MathInput extends React.Component<Props, State> {
         this._root = this._container.querySelector(".mq-root-block");
         this._root.addEventListener("scroll", this._handleScroll);
 
+        const isWithinKeypadBounds = (x: number, y: number): boolean => {
+            const bounds = this._getKeypadBounds();
+
+            // If there are no bounds, then the keypad is not mounted, so we
+            // assume that the event is not within the keypad bounds.
+            if (!bounds) {
+                return false;
+            }
+
+            return (
+                (bounds.left <= x &&
+                    bounds.right >= x &&
+                    bounds.top <= y &&
+                    bounds.bottom >= y) ||
+                bounds.bottom < y
+            );
+        };
+
         // Record the initial scroll displacement on touch start. This allows
         // us to detect whether a touch event was a scroll and only blur the
         // input on non-scrolls--blurring the input on scroll makes for a
@@ -139,19 +158,12 @@ class MathInput extends React.Component<Props, State> {
                         this.props.keypadElement &&
                         this.props.keypadElement.getDOMNode()
                     ) {
-                        const bounds = this._getKeypadBounds();
                         for (let i = 0; i < evt.changedTouches.length; i++) {
                             const [x, y] = [
                                 evt.changedTouches[i].clientX,
                                 evt.changedTouches[i].clientY,
                             ];
-                            if (
-                                (bounds.left <= x &&
-                                    bounds.right >= x &&
-                                    bounds.top <= y &&
-                                    bounds.bottom >= y) ||
-                                bounds.bottom < y
-                            ) {
+                            if (isWithinKeypadBounds(x, y)) {
                                 touchDidStartInOrBelowKeypad = true;
                                 break;
                             }
@@ -194,28 +206,34 @@ class MathInput extends React.Component<Props, State> {
             }
         };
 
+        // We want to allow the user to blur the input by clicking outside of it
+        // when using ChromeOS third-party browsers that use mobile user agents,
+        // but don't actually simulate touch events.
+        this.blurOnClickOutside = (evt: any) => {
+            if (this.state.focused) {
+                if (!this._container.contains(evt.target)) {
+                    if (
+                        this.props.keypadElement &&
+                        this.props.keypadElement.getDOMNode()
+                    ) {
+                        const [x, y] = [evt.clientX, evt.clientY];
+                        // We only want to blur if the click is above the keypad,
+                        // to the left of the keypad, or to the right of the keypad.
+                        // The reasoning for not blurring for any clicks below the keypad is
+                        // that the keypad may be anchored above the 'Check answer' bottom bar,
+                        // in which case we don't want to dismiss the keypad on check.
+                        if (!isWithinKeypadBounds(x, y)) {
+                            this.blur();
+                        }
+                    }
+                }
+            }
+        };
+
         window.addEventListener("touchstart", this.recordTouchStartOutside);
         window.addEventListener("touchend", this.blurOnTouchEndOutside);
         window.addEventListener("touchcancel", this.blurOnTouchEndOutside);
-
-        // HACK(benkomalo): if the window resizes, the keypad bounds can
-        // change. That's a bit peeking into the internals of the keypad
-        // itself, since we know bounds can change only when the viewport
-        // changes, but seems like a rare enough thing to get wrong that it's
-        // not worth wiring up extra things for the technical "purity" of
-        // having the keypad notify of changes to us.
-        window.addEventListener("resize", this._clearKeypadBoundsCache);
-        window.addEventListener(
-            "orientationchange",
-            this._clearKeypadBoundsCache,
-        );
-    }
-
-    // eslint-disable-next-line react/no-unsafe
-    UNSAFE_componentWillReceiveProps(props: Props) {
-        if (this.props.keypadElement !== props.keypadElement) {
-            this._clearKeypadBoundsCache();
-        }
+        window.addEventListener("click", this.blurOnClickOutside);
     }
 
     componentDidUpdate(prevProps: Props, prevState: State) {
@@ -234,23 +252,9 @@ 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 - TS2769 - No overload matches this call.
-        window.removeEventListener("resize", this._clearKeypadBoundsCache());
-        window.removeEventListener(
-            "orientationchange",
-            // @ts-expect-error - TS2769 - No overload matches this call.
-            this._clearKeypadBoundsCache(),
-        );
+        window.removeEventListener("click", this.blurOnClickOutside);
     }
 
-    _clearKeypadBoundsCache: () => void = () => {
-        this._keypadBounds = null;
-    };
-
-    _cacheKeypadBounds: (arg1: any) => void = (keypadNode) => {
-        this._keypadBounds = keypadNode.getBoundingClientRect();
-    };
-
     _updateInputPadding: () => void = () => {
         this._container = ReactDOM.findDOMNode(this) as HTMLDivElement;
         this._root = this._container.querySelector(".mq-root-block");
@@ -263,14 +267,17 @@ class MathInput extends React.Component<Props, State> {
         this._root.style.fontSize = `${fontSizePt}pt`;
     };
 
-    /** Gets and cache they bounds of the keypadElement */
-    _getKeypadBounds: () => any = () => {
-        if (!this._keypadBounds) {
-            const node = this.props.keypadElement?.getDOMNode();
-            this._cacheKeypadBounds(node);
+    /** Returns the current bounds of the keypadElement */
+    _getKeypadBounds(): DOMRect | null {
+        const keypadNode = this.props.keypadElement?.getDOMNode();
+
+        // If the keypad is mounted, return its bounds. Otherwise, return null.
+        if (keypadNode instanceof Element) {
+            return keypadNode.getBoundingClientRect();
         }
-        return this._keypadBounds;
-    };
+
+        return null;
+    }
 
     _updateCursorHandle: (arg1?: boolean) => void = (animateIntoPosition) => {
         const containerBounds = this._container.getBoundingClientRect();
@@ -624,6 +631,32 @@ class MathInput extends React.Component<Props, State> {
         }
     };
 
+    // We want to allow the user to be able to focus the input via click
+    // when using ChromeOS third-party browsers that use mobile user agents,
+    // but don't actually simulate touch events.
+    handleClick = (e: React.MouseEvent<HTMLDivElement>): void => {
+        e.stopPropagation();
+
+        // Hide the cursor handle on click
+        this._hideCursorHandle();
+
+        // Cache the container bounds, so as to avoid re-computing. If we don't
+        // have any content, then it's not necessary, since the cursor can't be
+        // moved anyway.
+        if (this.mathField.getContent() !== "") {
+            this._containerBounds = this._container.getBoundingClientRect();
+
+            // Make the cursor visible and set the handle-less cursor's
+            // location.
+            this._insertCursorAtClosestNode(e.clientX, e.clientY);
+        }
+
+        // Trigger a focus event, if we're not already focused.
+        if (!this.state.focused) {
+            this.focus();
+        }
+    };
+
     handleTouchMove: (arg1: React.TouchEvent<HTMLDivElement>) => void = (e) => {
         e.stopPropagation();
 
@@ -898,7 +931,7 @@ class MathInput extends React.Component<Props, State> {
                 onTouchStart={this.handleTouchStart}
                 onTouchMove={this.handleTouchMove}
                 onTouchEnd={this.handleTouchEnd}
-                onClick={(e) => e.stopPropagation()}
+                onClick={this.handleClick}
                 role={"textbox"}
                 ariaLabel={ariaLabel}
             >

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

@@ -1,3 +1,4 @@
+import * as wbi18n from "@khanacademy/wonder-blocks-i18n";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import * as React from "react";
@@ -155,6 +156,42 @@ describe("keypad", () => {
         expect(screen.getByTestId("TIMES")).toBeInTheDocument();
     });
 
+    it(`forces CDOT in locales that require it`, () => {
+        // Arrange
+        jest.spyOn(wbi18n, "getLocale").mockReturnValue("az");
+
+        // Act
+        render(
+            <Keypad
+                onClickKey={() => {}}
+                convertDotToTimes={true}
+                onAnalyticsEvent={async () => {}}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByTestId("CDOT")).toBeInTheDocument();
+        expect(screen.queryByTestId("TIMES")).not.toBeInTheDocument();
+    });
+
+    it(`forces TIMES in locales that require it`, () => {
+        // Arrange
+        jest.spyOn(wbi18n, "getLocale").mockReturnValue("fr");
+
+        // Act
+        render(
+            <Keypad
+                onClickKey={() => {}}
+                convertDotToTimes={false}
+                onAnalyticsEvent={async () => {}}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByTestId("TIMES")).toBeInTheDocument();
+        expect(screen.queryByTestId("CDOT")).not.toBeInTheDocument();
+    });
+
     it(`hides the tabs if providing the Fraction Keypad`, () => {
         // Arrange
         // Act

package/src/components/keypad/shared-keys.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import Keys from "../../data/key-configs";
+import {convertDotToTimesByLocale} from "../../utils";
 
 import {KeypadButton} from "./keypad-button";
 import {getCursorContextConfig} from "./utils";
@@ -56,7 +57,11 @@ export default function SharedKeys(props: Props) {
 
             {/* Row 2 */}
             <KeypadButton
-                keyConfig={convertDotToTimes ? Keys.TIMES : Keys.CDOT}
+                keyConfig={
+                    convertDotToTimesByLocale(!!convertDotToTimes)
+                        ? Keys.TIMES
+                        : Keys.CDOT
+                }
                 onClickKey={onClickKey}
                 coord={[4, 1]}
                 secondary

package/src/index.ts

@@ -40,6 +40,7 @@ export {
 // External API of the "Provided" keypad component
 export {keypadElementPropType} from "./components/prop-types";
 export type {KeypadAPI, KeypadConfiguration} from "./types";
+export {convertDotToTimesByLocale} from "./utils";
 
 // Key list, configuration map, and types
 export type {default as Keys} from "./data/keys";

package/src/utils.test.ts

@@ -0,0 +1,33 @@
+import * as wbi18n from "@khanacademy/wonder-blocks-i18n";
+
+import {convertDotToTimesByLocale} from "./utils";
+
+describe("utils", () => {
+    describe("multiplicationSymbol", () => {
+        it("passes through convertDotToTimes in locales that don't override it", () => {
+            jest.spyOn(wbi18n, "getLocale").mockReturnValue("en");
+
+            const result1 = convertDotToTimesByLocale(true);
+            const result2 = convertDotToTimesByLocale(false);
+
+            expect(result1).toBe(true);
+            expect(result2).toBe(false);
+        });
+
+        it("overrides with false for locales that only use dot", () => {
+            jest.spyOn(wbi18n, "getLocale").mockReturnValue("az");
+
+            const result = convertDotToTimesByLocale(true);
+
+            expect(result).toBe(false);
+        });
+
+        it("overrides with true for locales that only use x", () => {
+            jest.spyOn(wbi18n, "getLocale").mockReturnValue("fr");
+
+            const result = convertDotToTimesByLocale(false);
+
+            expect(result).toBe(true);
+        });
+    });
+});

package/src/utils.ts

@@ -1,4 +1,4 @@
-import {getDecimalSeparator} from "@khanacademy/wonder-blocks-i18n";
+import {getDecimalSeparator, getLocale} from "@khanacademy/wonder-blocks-i18n";
 
 export const DecimalSeparator = {
     COMMA: ",",
@@ -15,3 +15,47 @@ export const decimalSeparator: string =
     getDecimalSeparator() === ","
         ? DecimalSeparator.COMMA
         : DecimalSeparator.PERIOD;
+
+const CDOT_ONLY = [
+    "az",
+    "cs",
+    "da",
+    "de",
+    "hu",
+    "hy",
+    "kk",
+    "ky",
+    "lt",
+    "lv",
+    "nb",
+    "sk",
+    "sr",
+    "sv",
+    "uz",
+];
+const TIMES_ONLY = ["fr", "tr", "pt-pt"];
+
+/**
+ * convertDotToTimes (aka `times`) is an option the content creators have to
+ * use × (TIMES) rather than · (CDOT) for multiplication (for younger learners).
+ * Some locales _only_ use one or the other for all multiplication regardless
+ * of age.
+ *
+ * convertDotToTimesByLocale overrides convertDotToTimes for those locales.
+ *
+ * @param {boolean} convertDotToTimes - the setting set by content creators
+ * @returns {boolean} - true to convert to × (TIMES), false to use · (CDOT)
+ */
+export function convertDotToTimesByLocale(convertDotToTimes: boolean): boolean {
+    const locale = getLocale();
+
+    if (CDOT_ONLY.includes(locale)) {
+        return false;
+    }
+
+    if (TIMES_ONLY.includes(locale)) {
+        return true;
+    }
+
+    return convertDotToTimes;
+}