@khanacademy/math-input 16.2.0 → 16.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/math-input
 
+## 16.4.0
+
+### Minor Changes
+
+-   [#871](https://github.com/Khan/perseus/pull/871) [`610ebba2`](https://github.com/Khan/perseus/commit/610ebba29ab8b2ee4ddf4879f8c8b87993f29b20) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Ensured that tapping an already focused math input will reopen the keypad if it is closed.
+
+## 16.3.0
+
+### Minor Changes
+
+-   [#863](https://github.com/Khan/perseus/pull/863) [`f910bd72`](https://github.com/Khan/perseus/commit/f910bd72fc5cbf88a1a00d57f8aefa8eea2c755d) Thanks [@handeyeco](https://github.com/handeyeco)! - Localize the multiplication symbol in MathInput
+
 ## 16.2.0
 
 ### Minor Changes

package/dist/components/input/math-input.d.ts

@@ -82,8 +82,8 @@ declare class MathInput extends React.Component<Props, State> {
      * @param {number} y - the y coordinate in the viewport
      */
     _insertCursorAtClosestNode: (arg1: number, arg2: number) => void;
-    handleTouchStart: (arg1: React.TouchEvent<HTMLDivElement>) => void;
-    handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleTouchStart: (e: React.TouchEvent<HTMLDivElement>, keypadActive: boolean, setKeypadActive: (keypadActive: boolean) => void) => void;
+    handleClick: (e: React.MouseEvent<HTMLDivElement>, keypadActive: boolean, setKeypadActive: (keypadActive: boolean) => void) => void;
     handleTouchMove: (arg1: React.TouchEvent<HTMLDivElement>) => void;
     handleTouchEnd: (arg1: React.TouchEvent<HTMLDivElement>) => void;
     /**

package/dist/es/index.js

@@ -1,11 +1,11 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
 import Color from '@khanacademy/wonder-blocks-color';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
-import { getDecimalSeparator } from '@khanacademy/wonder-blocks-i18n';
+import { getDecimalSeparator, getLocale } from '@khanacademy/wonder-blocks-i18n';
 import { entries } from '@khanacademy/wonder-stuff-core';
 import { StyleSheet, css } from 'aphrodite';
 import * as React from 'react';
-import { useEffect, useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import $ from 'jquery';
 import MathQuill from 'mathquill';
@@ -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 = "16.2.0";
+const libVersion = "16.4.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -100,6 +100,49 @@ View.styles = 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.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] = useState(false);
+  // used to communicate between the keypad and the Renderer
+  const [keypadElement, setKeypadElement] = useState();
+  // this is a KeypadContextRendererInterface from Perseus
+  const [renderer, setRenderer] = useState();
+  const [scrollableElement, setScrollableElement] = useState();
+  const memoizedValue = useMemo(() => ({
+    keypadActive,
+    setKeypadActive,
+    keypadElement,
+    setKeypadElement,
+    renderer,
+    setRenderer,
+    scrollableElement,
+    setScrollableElement
+  }), [keypadActive, setKeypadActive, keypadElement, setKeypadElement, renderer, setRenderer, scrollableElement, setScrollableElement]);
+  return /*#__PURE__*/React.createElement(KeypadContext.Provider, {
+    value: memoizedValue
+  }, props.children);
+}
+
 /**
  * Common parameters used to style components.
  */
@@ -789,6 +832,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 = 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 = 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
@@ -1670,7 +1737,7 @@ class MathInput extends React.Component {
         context: this.mathField.contextForCursor()
       });
     };
-    this.handleTouchStart = e => {
+    this.handleTouchStart = (e, keypadActive, setKeypadActive) => {
       e.stopPropagation();
 
       // Hide the cursor handle on touch start, if the handle itself isn't
@@ -1689,6 +1756,11 @@ class MathInput extends React.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();
@@ -1697,7 +1769,7 @@ class MathInput extends React.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.
-    this.handleClick = e => {
+    this.handleClick = (e, keypadActive, setKeypadActive) => {
       e.stopPropagation();
 
       // Hide the cursor handle on click
@@ -1714,6 +1786,11 @@ class MathInput extends React.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();
@@ -2012,6 +2089,7 @@ class MathInput extends React.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
@@ -2077,12 +2155,19 @@ class MathInput extends React.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._("Math input box") + " " + i18n._("Tap with one or two fingers to open keyboard");
-    return /*#__PURE__*/React.createElement(View, {
+    return /*#__PURE__*/React.createElement(KeypadContext.Consumer, null, ({
+      keypadActive,
+      setKeypadActive
+    }) => /*#__PURE__*/React.createElement(View, {
       style: styles$7.input,
-      onTouchStart: this.handleTouchStart,
+      onTouchStart: e => {
+        this.handleTouchStart(e, keypadActive, setKeypadActive);
+      },
       onTouchMove: this.handleTouchMove,
       onTouchEnd: this.handleTouchEnd,
-      onClick: this.handleClick,
+      onClick: e => {
+        this.handleClick(e, keypadActive, setKeypadActive);
+      },
       role: "textbox",
       ariaLabel: ariaLabel
     }, /*#__PURE__*/React.createElement("div", {
@@ -2104,7 +2189,7 @@ class MathInput extends React.Component {
       onTouchMove: this.onCursorHandleTouchMove,
       onTouchEnd: this.onCursorHandleTouchEnd,
       onTouchCancel: this.onCursorHandleTouchCancel
-    })));
+    }))));
   }
 }
 MathInput.defaultProps = {
@@ -4879,7 +4964,7 @@ function SharedKeys(props) {
     coord: fractionCoord,
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: convertDotToTimes ? KeyConfigs.TIMES : KeyConfigs.CDOT,
+    keyConfig: convertDotToTimesByLocale(!!convertDotToTimes) ? KeyConfigs.TIMES : KeyConfigs.CDOT,
     onClickKey: onClickKey,
     coord: [4, 1],
     secondary: true
@@ -5067,49 +5152,6 @@ const styles$1 = 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.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] = useState(false);
-  // used to communicate between the keypad and the Renderer
-  const [keypadElement, setKeypadElement] = useState();
-  // this is a KeypadContextRendererInterface from Perseus
-  const [renderer, setRenderer] = useState();
-  const [scrollableElement, setScrollableElement] = useState();
-  const memoizedValue = useMemo(() => ({
-    keypadActive,
-    setKeypadActive,
-    keypadElement,
-    setKeypadElement,
-    renderer,
-    setRenderer,
-    scrollableElement,
-    setScrollableElement
-  }), [keypadActive, setKeypadActive, keypadElement, setKeypadElement, renderer, setRenderer, scrollableElement, setScrollableElement]);
-  return /*#__PURE__*/React.createElement(KeypadContext.Provider, {
-    value: memoizedValue
-  }, props.children);
-}
-
 function flatten(list) {
   const result = [];
   if (!list) {
@@ -5619,5 +5661,5 @@ let KeypadType = /*#__PURE__*/function (KeypadType) {
   return KeypadType;
 }({});
 
-export { CursorContext, Keypad as DesktopKeypad, KeyArray, KeyConfigs, KeypadContext, MathInput as KeypadInput, KeypadType, MobileKeypad, StatefulKeypadContextProvider, createMathField, getCursorContext, keyToMathquillMap as keyTranslator, keypadElementPropType, libVersion, mathQuillInstance };
+export { CursorContext, Keypad as DesktopKeypad, KeyArray, KeyConfigs, KeypadContext, MathInput as KeypadInput, KeypadType, MobileKeypad, StatefulKeypadContextProvider, convertDotToTimesByLocale, createMathField, getCursorContext, keyToMathquillMap as keyTranslator, keypadElementPropType, libVersion, mathQuillInstance };
 //# sourceMappingURL=index.js.map