@khanacademy/math-input 12.1.1 → 13.1.0

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { default as MobileKeypad } from "./components/keypad-switch";
 export { default as DesktopKeypad } from "./components/keypad";
 export { default as KeypadContext } from "./components/keypad-context";
 export { keypadElementPropType } from "./components/prop-types";
-export type { KeypadAPI } from "./types";
+export type { KeypadAPI, KeypadConfiguration } from "./types";
 export type { default as Keys } from "./data/keys";
 export { default as KeyConfigs } from "./data/key-configs";
 export { type KeyType, KeypadType } from "./enums";

package/dist/index.js

@@ -4665,6 +4665,10 @@ const KeypadButton$2 = _ref => {
       gridRow: coord[1] + 1,
       ...style
     }
+    // Unfortunately the CDOT and TIMES buttons are identical in the DOM
+    // apart from the ICON SVG, so we need to use testId.
+    ,
+    testId: keyConfig.id
   }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
     onClick: e => onClickKey(keyConfig.id, e),
     style: styles$g.clickable,
@@ -4853,7 +4857,7 @@ function FractionsPage(props) {
     coord: [3, 1],
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton$2, {
-    keyConfig: KeyConfigs.FRAC_INCLUSIVE,
+    keyConfig: KeyConfigs.FRAC,
     onClickKey: onClickKey,
     coord: [3, 2],
     secondary: true
@@ -5168,7 +5172,7 @@ function SharedKeys(props) {
     onClickKey,
     cursorContext,
     divisionKey,
-    multiplicationDot,
+    convertDotToTimes,
     selectedPage
   } = props;
   const cursorKeyConfig = getCursorContextConfig(cursorContext);
@@ -5186,12 +5190,12 @@ function SharedKeys(props) {
     coord: [5, 0],
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton$2, {
-    keyConfig: KeyConfigs.FRAC_INCLUSIVE,
+    keyConfig: KeyConfigs.FRAC,
     onClickKey: onClickKey,
     coord: fractionCoord,
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton$2, {
-    keyConfig: multiplicationDot ? KeyConfigs.CDOT : KeyConfigs.TIMES,
+    keyConfig: convertDotToTimes ? KeyConfigs.TIMES : KeyConfigs.CDOT,
     onClickKey: onClickKey,
     coord: [4, 1],
     secondary: true
@@ -5262,7 +5266,7 @@ function Keypad$2(props) {
     onClickKey,
     cursorContext,
     extraKeys,
-    multiplicationDot,
+    convertDotToTimes,
     divisionKey,
     preAlgebra,
     logarithms,
@@ -5340,7 +5344,7 @@ function Keypad$2(props) {
   }), !fractionsOnly && /*#__PURE__*/React__namespace.createElement(SharedKeys, {
     onClickKey: onClickKey,
     cursorContext: cursorContext,
-    multiplicationDot: multiplicationDot,
+    convertDotToTimes: convertDotToTimes,
     divisionKey: divisionKey,
     selectedPage: selectedPage
   })), expandedView && /*#__PURE__*/React__namespace.createElement(NavigationPad$1, {
@@ -5400,7 +5404,8 @@ class MobileKeypad extends React__namespace.Component {
     _defineProperty(this, "hasMounted", false);
     _defineProperty(this, "state", {
       active: false,
-      containerWidth: 0
+      containerWidth: 0,
+      hasBeenActivated: false
     });
     _defineProperty(this, "_resize", () => {
       var _this$_containerRef$c;
@@ -5421,7 +5426,8 @@ class MobileKeypad extends React__namespace.Component {
     });
     _defineProperty(this, "activate", () => {
       this.setState({
-        active: true
+        active: true,
+        hasBeenActivated: true
       });
     });
     _defineProperty(this, "dismiss", () => {
@@ -5476,7 +5482,7 @@ class MobileKeypad extends React__namespace.Component {
       }
     }
   }
-  componentWillUnMount() {
+  componentWillUnmount() {
     var _this$_containerResiz;
     window.removeEventListener("resize", this._throttleResizeHandler);
     window.removeEventListener("orientationchange", this._throttleResizeHandler);
@@ -5499,6 +5505,7 @@ class MobileKeypad extends React__namespace.Component {
     } = this.props;
     const {
       active,
+      hasBeenActivated,
       containerWidth,
       cursor,
       keypadConfig
@@ -5508,9 +5515,22 @@ class MobileKeypad extends React__namespace.Component {
     styles$c.keypadContainer, active && styles$c.activeKeypadContainer,
     // styles passed as props
     ...(Array.isArray(style) ? style : [style])];
+
+    // If the keypad is yet to have ever been activated, we keep it invisible
+    // so as to avoid, e.g., the keypad flashing at the bottom of the page
+    // during the initial render.
+    // Done inline (dynamicStyle) since stylesheets might not be loaded yet.
+    let dynamicStyle = {};
+    if (!active && !hasBeenActivated) {
+      dynamicStyle = {
+        visibility: "hidden"
+      };
+    }
     const isExpression = (keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
+    const convertDotToTimes = keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.times;
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle,
+      dynamicStyle: dynamicStyle,
       forwardRef: this._containerRef,
       ref: element => {
         if (!this.hasMounted && element) {
@@ -5538,7 +5558,7 @@ class MobileKeypad extends React__namespace.Component {
       onClickKey: key => this._handleClickKey(key),
       cursorContext: cursor === null || cursor === void 0 ? void 0 : cursor.context,
       fractionsOnly: !isExpression,
-      multiplicationDot: isExpression,
+      convertDotToTimes: convertDotToTimes,
       divisionKey: isExpression,
       trigonometry: isExpression,
       preAlgebra: isExpression,