@khanacademy/math-input 17.3.0 → 17.4.0

package/dist/components/aphrodite-css-transition-group/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../types/aphrodite.d.ts" />
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { CSSProperties } from "aphrodite";
 export type AnimationStyles = {

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { KeypadAPI } from "../../types";
+import type { KeypadAPI, KeypadContextType } from "../../types";
 type Props = {
     keypadElement?: KeypadAPI;
     onBlur: () => void;
@@ -21,6 +21,7 @@ type HandleState = {
 type State = {
     focused: boolean;
     handle: HandleState;
+    showInputFocusStyle: boolean;
 };
 declare class MathInput extends React.Component<Props, State> {
     didTouchOutside: boolean | null | undefined;
@@ -48,7 +49,7 @@ declare class MathInput extends React.Component<Props, State> {
     _hideCursorHandle: () => void;
     _handleScroll: () => void;
     blur: () => void;
-    focus: () => void;
+    focus: (setKeypadActive: KeypadContextType["setKeypadActive"]) => void;
     /**
      * Tries to determine which DOM node to place the cursor next to based on
      * where the user drags the cursor handle.  If it finds a node it will
@@ -82,8 +83,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: (e: React.TouchEvent<HTMLDivElement>, keypadActive: boolean, setKeypadActive: (keypadActive: boolean) => void) => void;
-    handleClick: (e: React.MouseEvent<HTMLDivElement>, keypadActive: boolean, setKeypadActive: (keypadActive: boolean) => void) => void;
+    handleTouchStart: (e: React.TouchEvent<HTMLDivElement>, keypadActive: KeypadContextType["keypadActive"], setKeypadActive: KeypadContextType["setKeypadActive"]) => void;
+    handleClick: (e: React.MouseEvent<HTMLDivElement>, keypadActive: KeypadContextType["keypadActive"], setKeypadActive: KeypadContextType["setKeypadActive"]) => void;
     handleTouchMove: (arg1: React.TouchEvent<HTMLDivElement>) => void;
     handleTouchEnd: (arg1: React.TouchEvent<HTMLDivElement>) => void;
     /**

package/dist/es/index.js

@@ -17,19 +17,21 @@ 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.3.0";
+const libVersion = "17.4.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
+
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
+
     return target;
   };
   return _extends.apply(this, arguments);
@@ -1499,6 +1501,7 @@ class MathInput extends React.Component {
     this._containerBounds = void 0;
     this.state = {
       focused: false,
+      showInputFocusStyle: false,
       handle: {
         animateIntoPosition: false,
         visible: false,
@@ -1564,15 +1567,14 @@ class MathInput extends React.Component {
     };
     this.blur = () => {
       this.mathField.blur();
-      this.props.onBlur && this.props.onBlur();
       this.setState({
-        focused: false,
+        showInputFocusStyle: false,
         handle: {
           visible: false
         }
       });
     };
-    this.focus = () => {
+    this.focus = setKeypadActive => {
       var _this$props$keypadEle, _this$props;
       // Pass this component's handleKey method to the keypad so it can call
       // it whenever it needs to trigger a keypress action.
@@ -1600,8 +1602,10 @@ class MathInput extends React.Component {
       });
       this.mathField.focus();
       (_this$props = this.props) == null || _this$props.onFocus();
+      setKeypadActive(true);
       this.setState({
-        focused: true
+        focused: true,
+        showInputFocusStyle: true
       }, () => {
         // NOTE(charlie): We use `setTimeout` to allow for a layout pass to
         // occur. Otherwise, the keypad is measured incorrectly. Ideally,
@@ -1814,7 +1818,7 @@ class MathInput extends React.Component {
 
       // Trigger a focus event, if we're not already focused.
       if (!this.state.focused) {
-        this.focus();
+        this.focus(setKeypadActive);
       }
 
       // If the user clicked on the input using a mouse or tap gesture,
@@ -1852,7 +1856,7 @@ class MathInput extends React.Component {
 
       // Trigger a focus event, if we're not already focused.
       if (!this.state.focused) {
-        this.focus();
+        this.focus(setKeypadActive);
       }
 
       // If the user clicked on the input using a mouse or tap gesture,
@@ -2125,7 +2129,10 @@ class MathInput extends React.Component {
       // dismissal. This code needs to be generalized to handle
       // multi-touch.
       if (this.state.focused && this.didTouchOutside && !this.didScroll) {
+        var _this$props$onBlur, _this$props2;
         this.blur();
+        this.mathField.blur();
+        (_this$props$onBlur = (_this$props2 = this.props).onBlur) == null || _this$props$onBlur.call(_this$props2);
       }
       this.didTouchOutside = false;
       this.didScroll = false;
@@ -2150,6 +2157,7 @@ class MathInput extends React.Component {
             // in which case we don't want to dismiss the keypad on check.
             if (!isWithinKeypadBounds(x, y)) {
               this.blur();
+              this.props.onBlur && this.props.onBlur();
             }
           }
         }
@@ -2188,7 +2196,7 @@ class MathInput extends React.Component {
   }
   render() {
     const {
-      focused,
+      showInputFocusStyle,
       handle
     } = this.state;
     const {
@@ -2196,7 +2204,7 @@ class MathInput extends React.Component {
     } = this.props;
     const innerStyle = _extends({}, inlineStyles.innerContainer, {
       borderWidth: this.getBorderWidthPx()
-    }, focused ? {
+    }, showInputFocusStyle ? {
       borderColor: Color.blue
     } : {}, style);
 
@@ -2231,13 +2239,17 @@ class MathInput extends React.Component {
       ref: node => {
         this.inputRef = node;
       },
+      onFocus: () => {
+        this.focus(setKeypadActive);
+      },
+      onBlur: this.blur,
       onKeyUp: this.handleKeyUp
     }, /*#__PURE__*/React.createElement("div", {
       ref: node => {
         this._mathContainer = ReactDOM.findDOMNode(node);
       },
       style: innerStyle
-    })), focused && handle.visible && /*#__PURE__*/React.createElement(CursorHandle, _extends({}, handle, {
+    })), showInputFocusStyle && handle.visible && /*#__PURE__*/React.createElement(CursorHandle, _extends({}, handle, {
       onTouchStart: this.onCursorHandleTouchStart,
       onTouchMove: this.onCursorHandleTouchMove,
       onTouchEnd: this.onCursorHandleTouchEnd,