@khanacademy/math-input 10.1.1 → 12.0.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @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
+
+-   2af4f9fa: Switch from using ProvideKeypad in ArticleRenderer to passing the keypad element down instead
+
+### Patch Changes
+
+-   Updated dependencies [2af4f9fa]
+    -   @khanacademy/perseus-core@1.0.0
+
 ## 10.1.1
 
 ### Patch Changes
@@ -7,6 +39,7 @@
 -   3f7be05a: Updated Keypad V2 TabbarItemType to KeypadPageType as a more accurate description.
 -   810c7bd9: Resize letter SVGs
 -   b161d004: Ensured that the keypad is hidden from screen readers when it is closed.
+-   a99a9ca4: Fix direction types for MathQuill interface
 
 ## 10.1.0
 

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/input/mathquill-types.d.ts

@@ -1,7 +1,7 @@
 import type Key from "../../data/keys";
 export interface MathQuillInterface {
-    L: "L";
-    R: "R";
+    L: -1;
+    R: 1;
     /**
      * Creates an editable MathQuill initialized with the contents of the HTML
      * element and returns a MathField object.

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-context.d.ts

@@ -7,12 +7,13 @@
  * ExerciseFooter.
  */
 import * as React from "react";
-import type { RendererInterface } from "@khanacademy/perseus-core";
+import type { KeypadAPI } from "../types";
+import type { KeypadContextRendererInterface } from "@khanacademy/perseus-core";
 type KeypadContext = {
-    setKeypadElement: (keypadElement?: HTMLElement | null | undefined) => void;
-    keypadElement: HTMLElement | null | undefined;
-    setRenderer: (renderer?: RendererInterface | null | undefined) => void;
-    renderer: RendererInterface | null | undefined;
+    setKeypadElement: (keypadElement?: KeypadAPI) => void;
+    keypadElement: KeypadAPI | null | undefined;
+    setRenderer: (renderer?: KeypadContextRendererInterface | null | undefined) => void;
+    renderer: KeypadContextRendererInterface | null | undefined;
     setScrollableElement: (scrollableElement?: HTMLElement | null | undefined) => void;
     scrollableElement: HTMLElement | null | undefined;
 };

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: {
@@ -1564,7 +1566,7 @@ class MathInput extends React.Component {
       });
     };
     this.focus = () => {
-      var _this$props$keypadEle2;
+      var _this$props$keypadEle2, _this$props;
       // Pass this component's handleKey method to the keypad so it can call
       // it whenever it needs to trigger a keypress action.
       (_this$props$keypadEle2 = this.props.keypadElement) == null ? void 0 : _this$props$keypadEle2.setKeyHandler(key => {
@@ -1590,7 +1592,7 @@ class MathInput extends React.Component {
         return cursor;
       });
       this.mathField.focus();
-      this.props.onFocus && this.props.onFocus();
+      (_this$props = this.props) == null ? void 0 : _this$props.onFocus();
       this.setState({
         focused: true
       }, () => {
@@ -1600,13 +1602,14 @@ class MathInput extends React.Component {
         // Android Browser 4.3.
         setTimeout(() => {
           if (this._isMounted) {
+            var _this$props$keypadEle3;
             // TODO(benkomalo): the keypad is animating at this point,
             // so we can't call _cacheKeypadBounds(), even though
             // it'd be nice to do so. It should probably be the case
             // that the higher level controller tells us when the
             // keypad is settled (then scrollIntoView wouldn't have
             // to make assumptions about that either).
-            const maybeKeypadNode = this.props.keypadElement && this.props.keypadElement.getDOMNode();
+            const maybeKeypadNode = (_this$props$keypadEle3 = this.props.keypadElement) == null ? void 0 : _this$props$keypadEle3.getDOMNode();
             scrollIntoView(this._container, maybeKeypadNode);
           }
         });
@@ -2011,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;
@@ -2087,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 => {
@@ -5099,8 +5107,8 @@ class MobileKeypad extends React.Component {
     this._throttleResize = false;
     this.hasMounted = false;
     this.state = {
-      containerWidth: 0,
-      active: false
+      active: false,
+      containerWidth: 0
     };
     this._resize = () => {
       var _this$_containerRef$c;
@@ -5120,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({
@@ -5166,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() {
@@ -5226,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,
@@ -8344,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) {
@@ -9694,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, {
@@ -9704,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
     }));
   }
@@ -9719,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);
 }