@khanacademy/math-input 9.0.0 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/math-input
 
+## 10.0.0
+
+### Major Changes
+
+-   dd800c22: Rename analytics prop from onEvent to onAnalyticsEvent
+
+### Minor Changes
+
+-   5352d512: Handle keypad resize better when it's positioned absolutely
+-   673f61b3: Introduce `dependencies` on Keypad.
+
+### Patch Changes
+
+-   Updated dependencies [dd800c22]
+    -   @khanacademy/perseus-core@0.2.0
+
 ## 9.0.0
 
 ### Major Changes

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

@@ -2,7 +2,7 @@
 import type Key from "../../data/keys";
 import type { ClickKeyCallback } from "../../types";
 import type { CursorContext } from "../input/cursor-contexts";
-import type { SendEventFn } from "@khanacademy/perseus-core";
+import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
 export type Props = {
     extraKeys: ReadonlyArray<Key>;
     cursorContext?: typeof CursorContext[keyof typeof CursorContext];
@@ -16,7 +16,7 @@ export type Props = {
     advancedRelations?: boolean;
     fractionsOnly?: boolean;
     onClickKey: ClickKeyCallback;
-    sendEvent?: SendEventFn;
+    onAnalyticsEvent: AnalyticsEventHandlerFn;
 };
 declare function Keypad(props: Props): JSX.Element;
 declare namespace Keypad {

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

@@ -20,6 +20,7 @@ type State = {
 };
 declare class KeypadContainer extends React.Component<Props, State> {
     _containerRef: React.RefObject<HTMLDivElement>;
+    _containerResizeObserver: ResizeObserver | null;
     _resizeTimeout: number | null | undefined;
     hasMounted: boolean | undefined;
     state: {

package/dist/es/index.js

@@ -4738,8 +4738,8 @@ function Keypad$2(props) {
     basicRelations,
     advancedRelations,
     showDismiss,
-    fractionsOnly,
-    sendEvent
+    onAnalyticsEvent,
+    fractionsOnly
   } = props;
 
   // Use a different grid for our fraction keypad
@@ -4751,7 +4751,7 @@ function Keypad$2(props) {
   }, [fractionsOnly, defaultSelectedPage]);
   useEffect(() => {
     if (!isMounted) {
-      sendEvent == null ? void 0 : sendEvent({
+      onAnalyticsEvent({
         type: "math-input:keypad-opened",
         payload: {
           virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"
@@ -4761,7 +4761,7 @@ function Keypad$2(props) {
     }
     return () => {
       if (isMounted) {
-        sendEvent == null ? void 0 : sendEvent({
+        onAnalyticsEvent({
           type: "math-input:keypad-closed",
           payload: {
             virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"
@@ -4770,7 +4770,7 @@ function Keypad$2(props) {
         setIsMounted(false);
       }
     };
-  }, [sendEvent, isMounted]);
+  }, [onAnalyticsEvent, isMounted]);
   return /*#__PURE__*/React.createElement(View$1, null, /*#__PURE__*/React.createElement(Tabbar, {
     items: availableTabs,
     selectedItem: selectedPage,
@@ -4937,7 +4937,7 @@ class MobileKeypad extends React.Component {
     }, /*#__PURE__*/React.createElement(Keypad$2
     // TODO(jeremy)
     , {
-      sendEvent: async function () {},
+      onAnalyticsEvent: async function () {},
       extraKeys: keypadConfig == null ? void 0 : keypadConfig.extraKeys,
       onClickKey: key => this._handleClickKey(key),
       cursorContext: cursor == null ? void 0 : cursor.context,
@@ -7973,6 +7973,7 @@ class KeypadContainer extends React.Component {
   constructor(...args) {
     super(...args);
     this._containerRef = /*#__PURE__*/React.createRef();
+    this._containerResizeObserver = null;
     this._resizeTimeout = void 0;
     this.hasMounted = void 0;
     this.state = {
@@ -8048,6 +8049,10 @@ 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);
+    }
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (!this.state.hasBeenActivated && nextProps.active) {
@@ -8062,8 +8067,10 @@ class KeypadContainer extends React.Component {
     }
   }
   componentWillUnmount() {
+    var _this$_containerResiz;
     window.removeEventListener("resize", this._throttleResizeHandler);
     window.removeEventListener("orientationchange", this._throttleResizeHandler);
+    (_this$_containerResiz = this._containerResizeObserver) == null ? void 0 : _this$_containerResiz.disconnect();
   }
   render() {
     const {