@khanacademy/math-input 17.1.0 → 17.2.1

package/dist/es/index.js

@@ -17,7 +17,7 @@ import PropTypes from 'prop-types';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "17.1.0";
+const libVersion = "17.2.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -1757,6 +1757,7 @@ class MathInput extends React.Component {
       });
     };
     this.handleTouchStart = (e, keypadActive, setKeypadActive) => {
+      var _this$inputRef;
       e.stopPropagation();
 
       // Hide the cursor handle on touch start, if the handle itself isn't
@@ -1784,11 +1785,19 @@ class MathInput extends React.Component {
       if (!this.state.focused) {
         this.focus();
       }
+
+      // If the user clicked on the input using a mouse or tap gesture,
+      // we want to set the focus to the inputRef so that the keyUp
+      // event will be triggered when the user types on the keyboard.
+      // This is necessary to support Chromebooks as they use mobile user
+      // agents, do not simulate touch events, and have physical keyboards.
+      (_this$inputRef = this.inputRef) == null || _this$inputRef.focus();
     };
     // We want to allow the user to be able to focus the input via click
     // when using ChromeOS third-party browsers that use mobile user agents,
     // but don't actually simulate touch events.
     this.handleClick = (e, keypadActive, setKeypadActive) => {
+      var _this$inputRef2;
       e.stopPropagation();
 
       // Hide the cursor handle on click
@@ -1814,6 +1823,13 @@ class MathInput extends React.Component {
       if (!this.state.focused) {
         this.focus();
       }
+
+      // If the user clicked on the input using a mouse or tap gesture,
+      // we want to set the focus to the inputRef so that the keyUp
+      // event will be triggered when the user types on the keyboard.
+      // This is necessary to support Chromebooks as they use mobile user
+      // agents, do not simulate touch events, and have physical keyboards.
+      (_this$inputRef2 = this.inputRef) == null || _this$inputRef2.focus();
     };
     this.handleTouchMove = e => {
       e.stopPropagation();
@@ -1969,7 +1985,7 @@ class MathInput extends React.Component {
         const value = this.mathField.getContent();
         if (this.props.value !== value) {
           this.mathField.setContent(this.props.value);
-          this.props.onChange(value, false);
+          this.props.onChange(value, () => {});
           this._hideCursorHandle();
         }
       }
@@ -2336,10 +2352,22 @@ const IconAsset = function IconAsset({
           fill: tintColor
         }));
       }
+    case "Fractions":
+      // The Fractions keypad is a special one that never displays anything
+      // in the tabbar. Ideally, we'd separate the KeypadPageType from the
+      // tab bar item types, but that's not easy given how the keypad manages
+      // the selected page. For now, we'll just return a dummy SVG to satisfy
+      // the types here.
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 44 44",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      });
     default:
       {
-        // type as never;
-        throw new Error("Invalid icon type");
+        throw new Error(`Invalid icon type: ${type}`);
       }
   }
 };