@khanacademy/math-input 16.1.2 → 16.3.0

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { default as DesktopKeypad } from "./components/keypad";
 export { KeypadContext, StatefulKeypadContextProvider, } from "./components/keypad-context";
 export { keypadElementPropType } from "./components/prop-types";
 export type { KeypadAPI, KeypadConfiguration } from "./types";
+export { convertDotToTimesByLocale } from "./utils";
 export type { default as Keys } from "./data/keys";
 export { KeyArray } from "./data/keys";
 export { default as KeyConfigs } from "./data/key-configs";

package/dist/index.js

@@ -48,7 +48,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "16.1.2";
+const libVersion = "16.3.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -821,6 +821,30 @@ const DecimalSeparator = {
 // - Some languages/locales use different decimal separators than the ones
 //   listed here.  Much of the Arab world uses U+066C.
 const decimalSeparator = i18n.getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
+const CDOT_ONLY = ["az", "cs", "da", "de", "hu", "hy", "kk", "ky", "lt", "lv", "nb", "sk", "sr", "sv", "uz"];
+const TIMES_ONLY = ["fr", "tr", "pt-pt"];
+
+/**
+ * convertDotToTimes (aka `times`) is an option the content creators have to
+ * use × (TIMES) rather than · (CDOT) for multiplication (for younger learners).
+ * Some locales _only_ use one or the other for all multiplication regardless
+ * of age.
+ *
+ * convertDotToTimesByLocale overrides convertDotToTimes for those locales.
+ *
+ * @param {boolean} convertDotToTimes - the setting set by content creators
+ * @returns {boolean} - true to convert to × (TIMES), false to use · (CDOT)
+ */
+function convertDotToTimesByLocale(convertDotToTimes) {
+  const locale = i18n.getLocale();
+  if (CDOT_ONLY.includes(locale)) {
+    return false;
+  }
+  if (TIMES_ONLY.includes(locale)) {
+    return true;
+  }
+  return convertDotToTimes;
+}
 
 function handleLeftArrow(mathField, cursor) {
   // If we're inside a function, and just after the left parentheses, we
@@ -1399,6 +1423,8 @@ class MathInput extends React__namespace.Component {
 
   // @ts-expect-error - TS2564 - Property 'blurOnTouchEndOutside' has no initializer and is not definitely assigned in the constructor.
 
+  // @ts-expect-error - TS2564 - Property 'blurOnClickOutside' has no initializer and is not definitely assigned in the constructor.
+
   // @ts-expect-error - TS2564 - Property '_container' has no initializer and is not definitely assigned in the constructor.
 
   // @ts-expect-error - TS2564 - Property '_containerBounds' has no initializer and is not definitely assigned in the constructor.
@@ -1446,6 +1472,16 @@ class MathInput extends React__namespace.Component {
     this._container = ReactDOM__default["default"].findDOMNode(this);
     this._root = this._container.querySelector(".mq-root-block");
     this._root.addEventListener("scroll", this._handleScroll);
+    const isWithinKeypadBounds = (x, y) => {
+      const bounds = this._getKeypadBounds();
+
+      // If there are no bounds, then the keypad is not mounted, so we
+      // assume that the event is not within the keypad bounds.
+      if (!bounds) {
+        return false;
+      }
+      return bounds.left <= x && bounds.right >= x && bounds.top <= y && bounds.bottom >= y || bounds.bottom < y;
+    };
 
     // Record the initial scroll displacement on touch start. This allows
     // us to detect whether a touch event was a scroll and only blur the
@@ -1463,10 +1499,9 @@ class MathInput extends React__namespace.Component {
         if (!this._container.contains(evt.target)) {
           let touchDidStartInOrBelowKeypad = false;
           if (this.props.keypadElement && this.props.keypadElement.getDOMNode()) {
-            const bounds = this._getKeypadBounds();
             for (let i = 0; i < evt.changedTouches.length; i++) {
               const [x, y] = [evt.changedTouches[i].clientX, evt.changedTouches[i].clientY];
-              if (bounds.left <= x && bounds.right >= x && bounds.top <= y && bounds.bottom >= y || bounds.bottom < y) {
+              if (isWithinKeypadBounds(x, y)) {
                 touchDidStartInOrBelowKeypad = true;
                 break;
               }
@@ -1502,25 +1537,31 @@ class MathInput extends React__namespace.Component {
         this.dragListener.detach();
       }
     };
+
+    // We want to allow the user to blur the input by clicking outside of it
+    // when using ChromeOS third-party browsers that use mobile user agents,
+    // but don't actually simulate touch events.
+    this.blurOnClickOutside = evt => {
+      if (this.state.focused) {
+        if (!this._container.contains(evt.target)) {
+          if (this.props.keypadElement && this.props.keypadElement.getDOMNode()) {
+            const [x, y] = [evt.clientX, evt.clientY];
+            // We only want to blur if the click is above the keypad,
+            // to the left of the keypad, or to the right of the keypad.
+            // The reasoning for not blurring for any clicks below the keypad is
+            // that the keypad may be anchored above the 'Check answer' bottom bar,
+            // in which case we don't want to dismiss the keypad on check.
+            if (!isWithinKeypadBounds(x, y)) {
+              this.blur();
+            }
+          }
+        }
+      }
+    };
     window.addEventListener("touchstart", this.recordTouchStartOutside);
     window.addEventListener("touchend", this.blurOnTouchEndOutside);
     window.addEventListener("touchcancel", this.blurOnTouchEndOutside);
-
-    // HACK(benkomalo): if the window resizes, the keypad bounds can
-    // change. That's a bit peeking into the internals of the keypad
-    // itself, since we know bounds can change only when the viewport
-    // changes, but seems like a rare enough thing to get wrong that it's
-    // not worth wiring up extra things for the technical "purity" of
-    // having the keypad notify of changes to us.
-    window.addEventListener("resize", this._clearKeypadBoundsCache);
-    window.addEventListener("orientationchange", this._clearKeypadBoundsCache);
-  }
-
-  // eslint-disable-next-line react/no-unsafe
-  UNSAFE_componentWillReceiveProps(props) {
-    if (this.props.keypadElement !== props.keypadElement) {
-      this._clearKeypadBoundsCache();
-    }
+    window.addEventListener("click", this.blurOnClickOutside);
   }
   componentDidUpdate(prevProps, prevState) {
     if (this.mathField.getContent() !== this.props.value) {
@@ -1535,18 +1576,8 @@ class MathInput extends React__namespace.Component {
     window.removeEventListener("touchstart", this.recordTouchStartOutside);
     window.removeEventListener("touchend", this.blurOnTouchEndOutside);
     window.removeEventListener("touchcancel", this.blurOnTouchEndOutside);
-    // @ts-expect-error - TS2769 - No overload matches this call.
-    window.removeEventListener("resize", this._clearKeypadBoundsCache());
-    window.removeEventListener("orientationchange",
-    // @ts-expect-error - TS2769 - No overload matches this call.
-    this._clearKeypadBoundsCache());
+    window.removeEventListener("click", this.blurOnClickOutside);
   }
-  _clearKeypadBoundsCache = () => {
-    this._keypadBounds = null;
-  };
-  _cacheKeypadBounds = keypadNode => {
-    this._keypadBounds = keypadNode.getBoundingClientRect();
-  };
   _updateInputPadding = () => {
     this._container = ReactDOM__default["default"].findDOMNode(this);
     this._root = this._container.querySelector(".mq-root-block");
@@ -1556,14 +1587,16 @@ class MathInput extends React__namespace.Component {
     this._root.style.fontSize = `${fontSizePt}pt`;
   };
 
-  /** Gets and cache they bounds of the keypadElement */
-  _getKeypadBounds = () => {
-    if (!this._keypadBounds) {
-      const node = this.props.keypadElement?.getDOMNode();
-      this._cacheKeypadBounds(node);
+  /** Returns the current bounds of the keypadElement */
+  _getKeypadBounds() {
+    const keypadNode = this.props.keypadElement?.getDOMNode();
+
+    // If the keypad is mounted, return its bounds. Otherwise, return null.
+    if (keypadNode instanceof Element) {
+      return keypadNode.getBoundingClientRect();
     }
-    return this._keypadBounds;
-  };
+    return null;
+  }
   _updateCursorHandle = animateIntoPosition => {
     const containerBounds = this._container.getBoundingClientRect();
     const cursor = this._container.querySelector(".mq-cursor");
@@ -1861,6 +1894,32 @@ class MathInput extends React__namespace.Component {
       this.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.
+  handleClick = e => {
+    e.stopPropagation();
+
+    // Hide the cursor handle on click
+    this._hideCursorHandle();
+
+    // Cache the container bounds, so as to avoid re-computing. If we don't
+    // have any content, then it's not necessary, since the cursor can't be
+    // moved anyway.
+    if (this.mathField.getContent() !== "") {
+      this._containerBounds = this._container.getBoundingClientRect();
+
+      // Make the cursor visible and set the handle-less cursor's
+      // location.
+      this._insertCursorAtClosestNode(e.clientX, e.clientY);
+    }
+
+    // Trigger a focus event, if we're not already focused.
+    if (!this.state.focused) {
+      this.focus();
+    }
+  };
   handleTouchMove = e => {
     e.stopPropagation();
 
@@ -2084,7 +2143,7 @@ class MathInput extends React__namespace.Component {
       onTouchStart: this.handleTouchStart,
       onTouchMove: this.handleTouchMove,
       onTouchEnd: this.handleTouchEnd,
-      onClick: e => e.stopPropagation(),
+      onClick: this.handleClick,
       role: "textbox",
       ariaLabel: ariaLabel
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -5127,7 +5186,7 @@ function SharedKeys(props) {
     coord: fractionCoord,
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: convertDotToTimes ? KeyConfigs.TIMES : KeyConfigs.CDOT,
+    keyConfig: convertDotToTimesByLocale(!!convertDotToTimes) ? KeyConfigs.TIMES : KeyConfigs.CDOT,
     onClickKey: onClickKey,
     coord: [4, 1],
     secondary: true
@@ -5872,6 +5931,7 @@ exports.KeypadInput = MathInput;
 exports.KeypadType = KeypadType;
 exports.MobileKeypad = MobileKeypad;
 exports.StatefulKeypadContextProvider = StatefulKeypadContextProvider;
+exports.convertDotToTimesByLocale = convertDotToTimesByLocale;
 exports.createMathField = createMathField;
 exports.getCursorContext = getCursorContext;
 exports.keyTranslator = keyToMathquillMap;