@khanacademy/math-input 11.0.0 → 12.0.1

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "11.0.0",
+    "version": "12.0.1",
     "publishConfig": {
         "access": "public"
     },
@@ -30,7 +30,7 @@
         "@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",
+        "@khanacademy/wonder-stuff-core": "^1.5.1",
         "aphrodite": "^1.1.0",
         "jquery": "^2.1.1",
         "katex": "^0.11.1",
@@ -49,7 +49,7 @@
         "@khanacademy/wonder-blocks-color": "^2.0.1",
         "@khanacademy/wonder-blocks-core": "^6.0.0",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-stuff-core": "^1.2.2",
+        "@khanacademy/wonder-stuff-core": "^1.5.1",
         "aphrodite": "^1.1.0",
         "jquery": "^2.1.1",
         "katex": "^0.11.1",

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

@@ -185,7 +185,7 @@ class MathInput extends React.Component<Props, State> {
             // dismissal. This code needs to be generalized to handle
             // multi-touch.
             if (this.state.focused && this.didTouchOutside && !this.didScroll) {
-                this.blur();
+                this.blur(true);
             }
 
             this.didTouchOutside = false;
@@ -332,9 +332,11 @@ class MathInput extends React.Component<Props, State> {
         }
     };
 
-    blur: () => void = () => {
+    blur: (callPropsOnBlur: boolean) => void = (callPropsOnBlur: boolean) => {
         this.mathField.blur();
-        this.props.onBlur && this.props.onBlur();
+        if (callPropsOnBlur) {
+            this.props.onBlur && this.props.onBlur();
+        }
         this.setState({focused: false, handle: {visible: false}});
     };
 
@@ -907,11 +909,17 @@ class MathInput extends React.Component<Props, State> {
                 overrides.css. */}
                 <div
                     className="keypad-input"
-                    // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
-                    tabIndex={"0"}
+                    tabIndex={0}
                     ref={(node) => {
                         this.inputRef = node;
                     }}
+                    onFocus={() => {
+                        this.focus();
+                    }}
+                    onBlur={() => {
+                        this._hideCursorHandle();
+                        this.blur(false);
+                    }}
                     onKeyUp={this.handleKeyUp}
                 >
                     {/* NOTE(charlie): This element must be styled with inline

package/src/components/keypad/mobile-keypad.tsx

@@ -13,6 +13,7 @@ import type {
     KeyHandler,
     KeypadAPI,
 } from "../../types";
+import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 import Keypad from "./index";
@@ -32,6 +33,7 @@ type Props = {
     onElementMounted?: (arg1: any) => void;
     onDismiss?: () => void;
     style?: StyleType;
+    onAnalyticsEvent: AnalyticsEventHandlerFn;
 };
 
 type State = {
@@ -62,12 +64,18 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
             this._throttleResizeHandler,
         );
 
-        this._containerResizeObserver = new ResizeObserver(
-            this._throttleResizeHandler,
-        );
-
-        if (this._containerRef.current) {
-            this._containerResizeObserver.observe(this._containerRef.current);
+        // LC-1213: some common older browsers (as of 2023-09-07)
+        // don't support ResizeObserver
+        if ("ResizeObserver" in window) {
+            this._containerResizeObserver = new window.ResizeObserver(
+                this._throttleResizeHandler,
+            );
+
+            if (this._containerRef.current) {
+                this._containerResizeObserver.observe(
+                    this._containerRef.current,
+                );
+            }
         }
     }
 
@@ -99,13 +107,17 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
     };
 
     activate: () => void = () => {
-        this.setState({active: true});
+        if (!this.state.active) {
+            this.setState({active: true});
+        }
     };
 
     dismiss: () => void = () => {
-        this.setState({active: false}, () => {
-            this.props.onDismiss?.();
-        });
+        if (this.state.active) {
+            this.setState({active: false}, () => {
+                this.props.onDismiss?.();
+            });
+        }
     };
 
     configure: (configuration: KeypadConfiguration, cb: () => void) => void = (
@@ -190,8 +202,7 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
                 }}
             >
                 <Keypad
-                    // TODO(jeremy)
-                    onAnalyticsEvent={async () => {}}
+                    onAnalyticsEvent={this.props.onAnalyticsEvent}
                     extraKeys={keypadConfig?.extraKeys}
                     onClickKey={(key) => this._handleClickKey(key)}
                     cursorContext={cursor?.context}

package/src/components/keypad-legacy/keypad-container.tsx

@@ -79,12 +79,18 @@ class KeypadContainer extends React.Component<Props, State> {
             this._throttleResizeHandler,
         );
 
-        this._containerResizeObserver = new ResizeObserver(
-            this._throttleResizeHandler,
-        );
+        // LC-1213: some common older browsers (as of 2023-09-07)
+        // don't support ResizeObserver
+        if ("ResizeObserver" in window) {
+            this._containerResizeObserver = new window.ResizeObserver(
+                this._throttleResizeHandler,
+            );
 
-        if (this._containerRef.current) {
-            this._containerResizeObserver.observe(this._containerRef.current);
+            if (this._containerRef.current) {
+                this._containerResizeObserver.observe(
+                    this._containerRef.current,
+                );
+            }
         }
     }
 

package/src/components/keypad-legacy/provided-keypad.tsx

@@ -18,12 +18,15 @@ import type {
     KeyHandler,
     KeypadAPI,
 } from "../../types";
+import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 type Props = {
     onElementMounted?: (arg1: any) => void;
     onDismiss?: () => void;
     style?: StyleType;
+
+    onAnalyticsEvent: AnalyticsEventHandlerFn;
 };
 
 class ProvidedKeypad extends React.Component<Props> implements KeypadAPI {
@@ -77,6 +80,13 @@ class ProvidedKeypad extends React.Component<Props> implements KeypadAPI {
             <Provider store={this.store}>
                 <KeypadContainer
                     onElementMounted={(element) => {
+                        this.props.onAnalyticsEvent({
+                            type: "math-input:keypad-opened",
+                            payload: {
+                                virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1",
+                            },
+                        });
+
                         // Append the dispatch methods that we want to expose
                         // externally to the returned React element.
                         const elementWithDispatchMethods = {
@@ -88,10 +98,18 @@ class ProvidedKeypad extends React.Component<Props> implements KeypadAPI {
                             setKeyHandler: this.setKeyHandler,
                             getDOMNode: this.getDOMNode,
                         } as const;
-                        onElementMounted &&
-                            onElementMounted(elementWithDispatchMethods);
+                        onElementMounted?.(elementWithDispatchMethods);
+                    }}
+                    onDismiss={() => {
+                        this.props.onAnalyticsEvent({
+                            type: "math-input:keypad-closed",
+                            payload: {
+                                virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1",
+                            },
+                        });
+
+                        onDismiss?.();
                     }}
-                    onDismiss={onDismiss}
                     style={style}
                 />
             </Provider>

package/src/components/keypad-switch.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import {MobileKeypad} from "./keypad";
 import LegacyKeypad from "./keypad-legacy";
 
+import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 type Props = {
@@ -11,6 +12,7 @@ type Props = {
     style?: StyleType;
 
     useV2Keypad?: boolean;
+    onAnalyticsEvent: AnalyticsEventHandlerFn;
 };
 
 function KeypadSwitch(props: Props) {
@@ -18,6 +20,9 @@ function KeypadSwitch(props: Props) {
 
     const KeypadComponent = useV2Keypad ? MobileKeypad : LegacyKeypad;
 
+    // Note: Although we pass the "onAnalyticsEvent" to both keypad components,
+    // only the current one uses it. There's no point in instrumenting the
+    // legacy keypad given that it's on its way out the door.
     return <KeypadComponent {...rest} />;
 }
 

package/src/full-math-input.stories.tsx

@@ -1,3 +1,4 @@
+import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
 import type {KeypadAPI} from "./types";
@@ -29,6 +30,8 @@ export const Basic = () => {
     // Whether the keypad is open or not
     const [keypadOpen, setKeypadOpen] = React.useState<boolean>(false);
 
+    const input = React.useRef<any>(null);
+
     const toggleKeypad = () => {
         if (keypadOpen) {
             keypadElement?.dismiss();
@@ -73,10 +76,11 @@ export const Basic = () => {
 
             <KeypadInput
                 value={value}
+                ref={input}
                 keypadElement={keypadElement}
                 onChange={(newValue, callback) => {
                     setValue(newValue);
-                    callback();
+                    callback?.();
                 }}
                 onFocus={() => {
                     keypadElement?.activate();
@@ -92,7 +96,11 @@ export const Basic = () => {
                         setKeypadElement(node);
                     }
                 }}
+                onDismiss={() => {
+                    input.current?.blur();
+                }}
                 useV2Keypad={v2Keypad}
+                onAnalyticsEvent={async (e) => action("onAnalyticsEvent")(e)}
             />
         </div>
     );