@khanacademy/math-input 16.3.0 → 16.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/math-input
 
+## 16.4.1
+
+### Patch Changes
+
+-   [#881](https://github.com/Khan/perseus/pull/881) [`f02eb991`](https://github.com/Khan/perseus/commit/f02eb991cec37dcff02056c0d6b54fc6dfd96948) Thanks [@nedredmond](https://github.com/nedredmond)! - Swap out Label Image custom dropdown for WonderBlocks
+
+## 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

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

@@ -5,7 +5,7 @@ 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.3.0";
+const libVersion = "16.4.1";
 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.
  */
@@ -1694,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
@@ -1713,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();
@@ -1721,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
@@ -1738,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();
@@ -2036,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
@@ -2101,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", {
@@ -2128,7 +2189,7 @@ class MathInput extends React.Component {
       onTouchMove: this.onCursorHandleTouchMove,
       onTouchEnd: this.onCursorHandleTouchEnd,
       onTouchCancel: this.onCursorHandleTouchCancel
-    })));
+    }))));
   }
 }
 MathInput.defaultProps = {
@@ -5091,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) {