@khanacademy/math-input 11.0.0 → 12.0.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/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/input/math-input.d.ts

@@ -50,7 +50,7 @@ declare class MathInput extends React.Component<Props, State> {
     _updateCursorHandle: (arg1?: boolean) => void;
     _hideCursorHandle: () => void;
     _handleScroll: () => void;
-    blur: () => void;
+    blur: (callPropsOnBlur: boolean) => void;
     focus: () => void;
     /**
      * Tries to determine which DOM node to place the cursor next to based on

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

@@ -1553,9 +1553,11 @@ class MathInput extends React.Component {
         this._hideCursorHandle();
       }
     };
-    this.blur = () => {
+    this.blur = callPropsOnBlur => {
       this.mathField.blur();
-      this.props.onBlur && this.props.onBlur();
+      if (callPropsOnBlur) {
+        this.props.onBlur && this.props.onBlur();
+      }
       this.setState({
         focused: false,
         handle: {
@@ -2012,7 +2014,7 @@ class MathInput extends React.Component {
       // 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;
       this.didScroll = false;
@@ -2088,13 +2090,18 @@ class MathInput extends React.Component {
       role: "textbox",
       ariaLabel: ariaLabel
     }, /*#__PURE__*/React.createElement("div", {
-      className: "keypad-input"
-      // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
-      ,
-      tabIndex: "0",
+      className: "keypad-input",
+      tabIndex: 0,
       ref: node => {
         this.inputRef = node;
       },
+      onFocus: () => {
+        this.focus();
+      },
+      onBlur: () => {
+        this._hideCursorHandle();
+        this.blur(false);
+      },
       onKeyUp: this.handleKeyUp
     }, /*#__PURE__*/React.createElement("div", {
       ref: node => {
@@ -5121,17 +5128,21 @@ class MobileKeypad extends React.Component {
       }, 100);
     };
     this.activate = () => {
-      this.setState({
-        active: true
-      });
+      if (!this.state.active) {
+        this.setState({
+          active: true
+        });
+      }
     };
     this.dismiss = () => {
-      this.setState({
-        active: false
-      }, () => {
-        var _this$props$onDismiss, _this$props;
-        (_this$props$onDismiss = (_this$props = this.props).onDismiss) == null ? void 0 : _this$props$onDismiss.call(_this$props);
-      });
+      if (this.state.active) {
+        this.setState({
+          active: false
+        }, () => {
+          var _this$props$onDismiss, _this$props;
+          (_this$props$onDismiss = (_this$props = this.props).onDismiss) == null ? void 0 : _this$props$onDismiss.call(_this$props);
+        });
+      }
     };
     this.configure = (configuration, cb) => {
       this.setState({
@@ -5167,9 +5178,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 +5243,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 +8359,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 +9714,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 +9731,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 +9754,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);
 }