@khanacademy/math-input 11.0.0 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @khanacademy/math-input
 
+## 12.1.0
+
+### Minor Changes
+
+-   a5a60852: revert focus changes to math input
+
+## 12.0.1
+
+### Patch Changes
+
+-   a383823d: Bump @khanacademy/wonder-stuff-core to v1.5.1 (which adds needed support for `isTruthy` helper function)
+
+## 12.0.0
+
+### Major Changes
+
+-   fa5f463b: Added onAnalyticsEvent prop to the LegacyKeypad (aka ProvidedKeypad). You must now pass in this prop, which is a function, to handle analytics events originating from the legacy keypad.
+-   6d8ede65: Added `onAnalyticsEvent` prop to MobileKeypad to pipe out Perseus analytics
+
+### Minor Changes
+
+-   fa1bb6b4: Implemented some focus management fixes and improved the full-math-input story.
+
+### Patch Changes
+
+-   3afc0da2: Check for ResizeObserver before using it
+
 ## 11.0.0
 
 ### Major Changes

package/dist/components/keypad/mobile-keypad.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import type Key from "../../data/keys";
 import type { Cursor, KeypadConfiguration, KeyHandler, KeypadAPI } from "../../types";
+import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 /**
  * This is the v2 equivalent of v1's ProvidedKeypad. It follows the same
@@ -17,6 +18,7 @@ type Props = {
     onElementMounted?: (arg1: any) => void;
     onDismiss?: () => void;
     style?: StyleType;
+    onAnalyticsEvent: AnalyticsEventHandlerFn;
 };
 type State = {
     active: boolean;

package/dist/components/keypad-legacy/provided-keypad.d.ts

@@ -1,11 +1,13 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
 import type { Cursor, KeypadConfiguration, 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;
 };
 declare class ProvidedKeypad extends React.Component<Props> implements KeypadAPI {
     store: any;

package/dist/components/keypad-switch.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+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;
     useV2Keypad?: boolean;
+    onAnalyticsEvent: AnalyticsEventHandlerFn;
 };
 declare function KeypadSwitch(props: Props): JSX.Element;
 export default KeypadSwitch;

package/dist/es/index.js

@@ -5167,9 +5167,14 @@ class MobileKeypad extends React.Component {
     this._resize();
     window.addEventListener("resize", this._throttleResizeHandler);
     window.addEventListener("orientationchange", 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);
+      }
     }
   }
   componentWillUnMount() {
@@ -5227,10 +5232,8 @@ class MobileKeypad extends React.Component {
           (_this$props$onElement = (_this$props2 = this.props).onElementMounted) == null ? void 0 : _this$props$onElement.call(_this$props2, elementWithDispatchMethods);
         }
       }
-    }, /*#__PURE__*/React.createElement(Keypad$2
-    // TODO(jeremy)
-    , {
-      onAnalyticsEvent: async function () {},
+    }, /*#__PURE__*/React.createElement(Keypad$2, {
+      onAnalyticsEvent: this.props.onAnalyticsEvent,
       extraKeys: keypadConfig == null ? void 0 : keypadConfig.extraKeys,
       onClickKey: key => this._handleClickKey(key),
       cursorContext: cursor == null ? void 0 : cursor.context,
@@ -8345,9 +8348,14 @@ class KeypadContainer extends React.Component {
     // And update it on resize.
     window.addEventListener("resize", this._throttleResizeHandler);
     window.addEventListener("orientationchange", 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);
+      }
     }
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -9695,6 +9703,13 @@ class ProvidedKeypad extends React.Component {
       store: this.store
     }, /*#__PURE__*/React.createElement(KeypadContainer$1, {
       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 = _extends({}, element, {
@@ -9705,9 +9720,17 @@ class ProvidedKeypad extends React.Component {
           setKeyHandler: this.setKeyHandler,
           getDOMNode: this.getDOMNode
         });
-        onElementMounted && onElementMounted(elementWithDispatchMethods);
+        onElementMounted == null ? void 0 : onElementMounted(elementWithDispatchMethods);
+      },
+      onDismiss: () => {
+        this.props.onAnalyticsEvent({
+          type: "math-input:keypad-closed",
+          payload: {
+            virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1"
+          }
+        });
+        onDismiss == null ? void 0 : onDismiss();
       },
-      onDismiss: onDismiss,
       style: style
     }));
   }
@@ -9720,6 +9743,10 @@ function KeypadSwitch(props) {
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   const KeypadComponent = useV2Keypad ? MobileKeypad : ProvidedKeypad;
+
+  // 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 /*#__PURE__*/React.createElement(KeypadComponent, rest);
 }