@khanacademy/math-input 11.0.0 → 12.1.0

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.1.0",
     "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/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,
+                );
+            }
         }
     }
 
@@ -190,8 +198,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";
@@ -93,6 +94,7 @@ export const Basic = () => {
                     }
                 }}
                 useV2Keypad={v2Keypad}
+                onAnalyticsEvent={async (e) => action("onAnalyticsEvent")(e)}
             />
         </div>
     );