@khanacademy/math-input 16.2.0 → 16.4.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.2.0";
+const libVersion = "16.4.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -131,6 +131,49 @@ class View extends React__namespace.Component {
   }
 }
 
+/**
+ * KeypadContext provides a way to the Keypad and Perseus Renderers to
+ * communicate.
+ *
+ * The StatefulKeypadContextProvider wraps the application
+ * while KeypadContext.Consumer wraps things that need this state:
+ * - mobile keypad usages
+ * - Perseus Renderers (Server/Item/Article)
+ */
+// @ts-expect-error - TS2322 - Type 'Context<{ setKeypadElement: (keypadElement: HTMLElement | null | undefined) => void; keypadElement: null; setRenderer: (renderer: RendererInterface | null | undefined) => void; renderer: null; setScrollableElement: (scrollableElement: HTMLElement | ... 1 more ... | undefined) => void; scrollableElement: null; }>' is not assignable to type 'Context<KeypadContext>'.
+const KeypadContext = /*#__PURE__*/React__namespace.createContext({
+  setKeypadActive: keypadActive => {},
+  keypadActive: false,
+  setKeypadElement: keypadElement => {},
+  keypadElement: null,
+  setRenderer: renderer => {},
+  renderer: null,
+  setScrollableElement: scrollableElement => {},
+  scrollableElement: null
+});
+function StatefulKeypadContextProvider(props) {
+  // whether or not to display the keypad
+  const [keypadActive, setKeypadActive] = React.useState(false);
+  // used to communicate between the keypad and the Renderer
+  const [keypadElement, setKeypadElement] = React.useState();
+  // this is a KeypadContextRendererInterface from Perseus
+  const [renderer, setRenderer] = React.useState();
+  const [scrollableElement, setScrollableElement] = React.useState();
+  const memoizedValue = React.useMemo(() => ({
+    keypadActive,
+    setKeypadActive,
+    keypadElement,
+    setKeypadElement,
+    renderer,
+    setRenderer,
+    scrollableElement,
+    setScrollableElement
+  }), [keypadActive, setKeypadActive, keypadElement, setKeypadElement, renderer, setRenderer, scrollableElement, setScrollableElement]);
+  return /*#__PURE__*/React__namespace.createElement(KeypadContext.Provider, {
+    value: memoizedValue
+  }, props.children);
+}
+
 /**
  * Common parameters used to style components.
  */
@@ -821,6 +864,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
@@ -1522,6 +1589,7 @@ class MathInput extends React__namespace.Component {
         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
@@ -1846,7 +1914,7 @@ class MathInput extends React__namespace.Component {
       context: this.mathField.contextForCursor()
     });
   };
-  handleTouchStart = e => {
+  handleTouchStart = (e, keypadActive, setKeypadActive) => {
     e.stopPropagation();
 
     // Hide the cursor handle on touch start, if the handle itself isn't
@@ -1865,6 +1933,11 @@ class MathInput extends React__namespace.Component {
       this._insertCursorAtClosestNode(touch.clientX, touch.clientY);
     }
 
+    // If we're already focused, but the keypad isn't active, activate it.
+    if (this.state.focused && !keypadActive) {
+      setKeypadActive(true);
+    }
+
     // Trigger a focus event, if we're not already focused.
     if (!this.state.focused) {
       this.focus();
@@ -1874,7 +1947,7 @@ class MathInput extends React__namespace.Component {
   // 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 => {
+  handleClick = (e, keypadActive, setKeypadActive) => {
     e.stopPropagation();
 
     // Hide the cursor handle on click
@@ -1891,6 +1964,11 @@ class MathInput extends React__namespace.Component {
       this._insertCursorAtClosestNode(e.clientX, e.clientY);
     }
 
+    // If we're already focused, but the keypad isn't active, activate it.
+    if (this.state.focused && !keypadActive) {
+      setKeypadActive(true);
+    }
+
     // Trigger a focus event, if we're not already focused.
     if (!this.state.focused) {
       this.focus();
@@ -2114,34 +2192,44 @@ class MathInput extends React__namespace.Component {
     // TODO(diedra): Fix the bug that is causing Android to require a two finger tap
     // to the open the keyboard, and then remove the second half of this label.
     const ariaLabel = i18n__namespace._("Math input box") + " " + i18n__namespace._("Tap with one or two fingers to open keyboard");
-    return /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$7.input,
-      onTouchStart: this.handleTouchStart,
-      onTouchMove: this.handleTouchMove,
-      onTouchEnd: this.handleTouchEnd,
-      onClick: this.handleClick,
-      role: "textbox",
-      ariaLabel: ariaLabel
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "keypad-input"
-      // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
-      ,
-      tabIndex: "0",
-      ref: node => {
-        this.inputRef = node;
-      },
-      onKeyUp: this.handleKeyUp
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      ref: node => {
-        this._mathContainer = ReactDOM__default["default"].findDOMNode(node);
-      },
-      style: innerStyle
-    })), focused && handle.visible && /*#__PURE__*/React__namespace.createElement(CursorHandle, _extends({}, handle, {
-      onTouchStart: this.onCursorHandleTouchStart,
-      onTouchMove: this.onCursorHandleTouchMove,
-      onTouchEnd: this.onCursorHandleTouchEnd,
-      onTouchCancel: this.onCursorHandleTouchCancel
-    })));
+    return /*#__PURE__*/React__namespace.createElement(KeypadContext.Consumer, null, _ref => {
+      let {
+        keypadActive,
+        setKeypadActive
+      } = _ref;
+      return /*#__PURE__*/React__namespace.createElement(View, {
+        style: styles$7.input,
+        onTouchStart: e => {
+          this.handleTouchStart(e, keypadActive, setKeypadActive);
+        },
+        onTouchMove: this.handleTouchMove,
+        onTouchEnd: this.handleTouchEnd,
+        onClick: e => {
+          this.handleClick(e, keypadActive, setKeypadActive);
+        },
+        role: "textbox",
+        ariaLabel: ariaLabel
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: "keypad-input"
+        // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
+        ,
+        tabIndex: "0",
+        ref: node => {
+          this.inputRef = node;
+        },
+        onKeyUp: this.handleKeyUp
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        ref: node => {
+          this._mathContainer = ReactDOM__default["default"].findDOMNode(node);
+        },
+        style: innerStyle
+      })), focused && handle.visible && /*#__PURE__*/React__namespace.createElement(CursorHandle, _extends({}, handle, {
+        onTouchStart: this.onCursorHandleTouchStart,
+        onTouchMove: this.onCursorHandleTouchMove,
+        onTouchEnd: this.onCursorHandleTouchEnd,
+        onTouchCancel: this.onCursorHandleTouchCancel
+      })));
+    });
   }
 }
 const fontSizePt = 18;
@@ -5162,7 +5250,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
@@ -5349,49 +5437,6 @@ const styles$1 = aphrodite.StyleSheet.create({
   }
 });
 
-/**
- * KeypadContext provides a way to the Keypad and Perseus Renderers to
- * communicate.
- *
- * The StatefulKeypadContextProvider wraps the application
- * while KeypadContext.Consumer wraps things that need this state:
- * - mobile keypad usages
- * - Perseus Renderers (Server/Item/Article)
- */
-// @ts-expect-error - TS2322 - Type 'Context<{ setKeypadElement: (keypadElement: HTMLElement | null | undefined) => void; keypadElement: null; setRenderer: (renderer: RendererInterface | null | undefined) => void; renderer: null; setScrollableElement: (scrollableElement: HTMLElement | ... 1 more ... | undefined) => void; scrollableElement: null; }>' is not assignable to type 'Context<KeypadContext>'.
-const KeypadContext = /*#__PURE__*/React__namespace.createContext({
-  setKeypadActive: keypadActive => {},
-  keypadActive: false,
-  setKeypadElement: keypadElement => {},
-  keypadElement: null,
-  setRenderer: renderer => {},
-  renderer: null,
-  setScrollableElement: scrollableElement => {},
-  scrollableElement: null
-});
-function StatefulKeypadContextProvider(props) {
-  // whether or not to display the keypad
-  const [keypadActive, setKeypadActive] = React.useState(false);
-  // used to communicate between the keypad and the Renderer
-  const [keypadElement, setKeypadElement] = React.useState();
-  // this is a KeypadContextRendererInterface from Perseus
-  const [renderer, setRenderer] = React.useState();
-  const [scrollableElement, setScrollableElement] = React.useState();
-  const memoizedValue = React.useMemo(() => ({
-    keypadActive,
-    setKeypadActive,
-    keypadElement,
-    setKeypadElement,
-    renderer,
-    setRenderer,
-    scrollableElement,
-    setScrollableElement
-  }), [keypadActive, setKeypadActive, keypadElement, setKeypadElement, renderer, setRenderer, scrollableElement, setScrollableElement]);
-  return /*#__PURE__*/React__namespace.createElement(KeypadContext.Provider, {
-    value: memoizedValue
-  }, props.children);
-}
-
 function flatten(list) {
   const result = [];
   if (!list) {
@@ -5907,6 +5952,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;