@khanacademy/math-input 12.1.1 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/math-input
 
+## 13.1.0
+
+### Minor Changes
+
+-   3b19a1bf: Ensured that we're properly calling componentWillUnmount
+
+### Patch Changes
+
+-   7e2ae0ef: Bugfix for fraction button in v2 fraction keypad
+-   1dc460c7: Add tests for mobile MathInput
+
+## 13.0.0
+
+### Major Changes
+
+-   609aeb0a: Ensured that the multiplication symbol in our keypad matches the selected symbol from content.
+
+### Patch Changes
+
+-   91f88d0b: Bugfix: v1 and v2 keypad using different FRAC configs
+-   4aac71b3: Hide v2 mobile MathInput keypad when it's never been activated
+
 ## 12.1.1
 
 ### Patch Changes

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

@@ -8,7 +8,7 @@ export type Props = {
     cursorContext?: typeof CursorContext[keyof typeof CursorContext];
     showDismiss?: boolean;
     expandedView?: boolean;
-    multiplicationDot?: boolean;
+    convertDotToTimes?: boolean;
     divisionKey?: boolean;
     trigonometry?: boolean;
     preAlgebra?: boolean;

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

@@ -23,6 +23,7 @@ type Props = {
 type State = {
     active: boolean;
     containerWidth: number;
+    hasBeenActivated: boolean;
     keypadConfig?: KeypadConfiguration;
     keyHandler?: KeyHandler;
     cursor?: Cursor;
@@ -34,7 +35,7 @@ declare class MobileKeypad extends React.Component<Props, State> implements Keyp
     hasMounted: boolean;
     state: State;
     componentDidMount(): void;
-    componentWillUnMount(): void;
+    componentWillUnmount(): void;
     _resize: () => void;
     _throttleResizeHandler: () => void;
     activate: () => void;

package/dist/components/keypad/shared-keys.d.ts

@@ -5,7 +5,7 @@ type Props = {
     onClickKey: ClickKeyCallback;
     selectedPage: KeypadPageType;
     cursorContext?: typeof CursorContext[keyof typeof CursorContext];
-    multiplicationDot?: boolean;
+    convertDotToTimes?: boolean;
     divisionKey?: boolean;
 };
 export default function SharedKeys(props: Props): JSX.Element;

package/dist/es/index.js

@@ -4371,6 +4371,10 @@ const KeypadButton$2 = ({
       gridColumn: coord[0] + 1,
       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.createElement(Clickable, {
     onClick: e => onClickKey(keyConfig.id, e),
     style: styles$g.clickable,
@@ -4558,7 +4562,7 @@ function FractionsPage(props) {
     coord: [3, 1],
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton$2, {
-    keyConfig: KeyConfigs.FRAC_INCLUSIVE,
+    keyConfig: KeyConfigs.FRAC,
     onClickKey: onClickKey,
     coord: [3, 2],
     secondary: true
@@ -4869,7 +4873,7 @@ function SharedKeys(props) {
     onClickKey,
     cursorContext,
     divisionKey,
-    multiplicationDot,
+    convertDotToTimes,
     selectedPage
   } = props;
   const cursorKeyConfig = getCursorContextConfig(cursorContext);
@@ -4887,12 +4891,12 @@ function SharedKeys(props) {
     coord: [5, 0],
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton$2, {
-    keyConfig: KeyConfigs.FRAC_INCLUSIVE,
+    keyConfig: KeyConfigs.FRAC,
     onClickKey: onClickKey,
     coord: fractionCoord,
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton$2, {
-    keyConfig: multiplicationDot ? KeyConfigs.CDOT : KeyConfigs.TIMES,
+    keyConfig: convertDotToTimes ? KeyConfigs.TIMES : KeyConfigs.CDOT,
     onClickKey: onClickKey,
     coord: [4, 1],
     secondary: true
@@ -4963,7 +4967,7 @@ function Keypad$2(props) {
     onClickKey,
     cursorContext,
     extraKeys,
-    multiplicationDot,
+    convertDotToTimes,
     divisionKey,
     preAlgebra,
     logarithms,
@@ -5041,7 +5045,7 @@ function Keypad$2(props) {
   }), !fractionsOnly && /*#__PURE__*/React.createElement(SharedKeys, {
     onClickKey: onClickKey,
     cursorContext: cursorContext,
-    multiplicationDot: multiplicationDot,
+    convertDotToTimes: convertDotToTimes,
     divisionKey: divisionKey,
     selectedPage: selectedPage
   })), expandedView && /*#__PURE__*/React.createElement(NavigationPad$1, {
@@ -5101,7 +5105,8 @@ class MobileKeypad extends React.Component {
     this.hasMounted = false;
     this.state = {
       active: false,
-      containerWidth: 0
+      containerWidth: 0,
+      hasBeenActivated: false
     };
     this._resize = () => {
       var _this$_containerRef$c;
@@ -5122,7 +5127,8 @@ class MobileKeypad extends React.Component {
     };
     this.activate = () => {
       this.setState({
-        active: true
+        active: true,
+        hasBeenActivated: true
       });
     };
     this.dismiss = () => {
@@ -5177,7 +5183,7 @@ class MobileKeypad extends React.Component {
       }
     }
   }
-  componentWillUnMount() {
+  componentWillUnmount() {
     var _this$_containerResiz;
     window.removeEventListener("resize", this._throttleResizeHandler);
     window.removeEventListener("orientationchange", this._throttleResizeHandler);
@@ -5200,6 +5206,7 @@ class MobileKeypad extends React.Component {
     } = this.props;
     const {
       active,
+      hasBeenActivated,
       containerWidth,
       cursor,
       keypadConfig
@@ -5209,9 +5216,22 @@ class MobileKeypad extends React.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 ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
+    const convertDotToTimes = keypadConfig == null ? void 0 : keypadConfig.times;
     return /*#__PURE__*/React.createElement(View, {
       style: containerStyle,
+      dynamicStyle: dynamicStyle,
       forwardRef: this._containerRef,
       ref: element => {
         if (!this.hasMounted && element) {
@@ -5238,7 +5258,7 @@ class MobileKeypad extends React.Component {
       onClickKey: key => this._handleClickKey(key),
       cursorContext: cursor == null ? void 0 : cursor.context,
       fractionsOnly: !isExpression,
-      multiplicationDot: isExpression,
+      convertDotToTimes: convertDotToTimes,
       divisionKey: isExpression,
       trigonometry: isExpression,
       preAlgebra: isExpression,