@khanacademy/math-input 6.0.0 → 6.0.2

package/dist/index.js

@@ -5051,6 +5051,11 @@ const styles$8 = aphrodite.StyleSheet.create({
     width: 36,
     height: 3,
     marginLeft: 3
+  },
+  clickable: {
+    ":focus": {
+      outline: "none"
+    }
   }
 });
 function imageTintColor(itemState, hovered, focused, pressed) {
@@ -5076,6 +5081,7 @@ class TabbarItem extends React__namespace.Component {
       onClick: onClick,
       disabled: itemState === "disabled",
       "aria-label": itemType,
+      style: styles$8.clickable,
       "aria-selected": itemState === "active",
       role: "tab"
     }, _ref => {
@@ -8462,7 +8468,7 @@ const KeypadButton = _ref => {
       pressed
     } = _ref2;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$1.outerBoxBase, hovered && styles$1.outerBoxHover, pressed && styles$1.outerBoxPressed]
+      style: [styles$1.outerBoxBase]
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: [styles$1.base, tintColor != null ? {
         background: tintColor
@@ -8488,7 +8494,7 @@ const styles$1 = aphrodite.StyleSheet.create({
     padding: 1
   },
   hovered: {
-    border: "1px solid ".concat(Color__default["default"].blue),
+    border: "2px solid ".concat(Color__default["default"].blue),
     padding: 1,
     boxShadow: "none"
   },
@@ -8511,16 +8517,13 @@ const styles$1 = aphrodite.StyleSheet.create({
     borderRadius: 7,
     border: "2px solid transparent"
   },
-  outerBoxHover: {
-    border: "2px solid ".concat(Color__default["default"].blue)
-  },
-  outerBoxPressed: {
-    border: "2px solid #1B50B3"
-  },
   clickable: {
     width: "100%",
     height: "100%",
-    boxSizing: "border-box"
+    boxSizing: "border-box",
+    ":focus": {
+      outline: "none"
+    }
   }
 });
 
@@ -8793,6 +8796,7 @@ function allPages(props) {
 // keypad to learners for entering math expressions.
 function Keypad(props) {
   const [selectedPage, setSelectedPage] = React__namespace.useState("Numbers");
+  const [isMounted, setIsMounted] = React__namespace.useState(false);
   const availablePages = allPages(props);
   const {
     onClickKey,
@@ -8804,8 +8808,31 @@ function Keypad(props) {
     logarithms,
     basicRelations,
     advancedRelations,
-    showDismiss
+    showDismiss,
+    sendEvent
   } = props;
+  React.useEffect(() => {
+    if (!isMounted) {
+      sendEvent({
+        type: "math-input:keypad-opened",
+        payload: {
+          virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"
+        }
+      });
+      setIsMounted(true);
+    }
+    return () => {
+      if (isMounted) {
+        sendEvent({
+          type: "math-input:keypad-closed",
+          payload: {
+            virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"
+          }
+        });
+        setIsMounted(false);
+      }
+    };
+  }, [sendEvent, isMounted]);
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Tabbar, {
     items: availablePages,
     selectedItem: selectedPage,