@khanacademy/math-input 17.3.0 → 17.4.1

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

@@ -1,7 +1,7 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
-import Color from '@khanacademy/wonder-blocks-color';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import { getDecimalSeparator, getLocale } from '@khanacademy/wonder-blocks-i18n';
+import { color } from '@khanacademy/wonder-blocks-tokens';
 import { entries } from '@khanacademy/wonder-stuff-core';
 import { StyleSheet, css } from 'aphrodite';
 import * as React from 'react';
@@ -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.1";
 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,8 +2204,8 @@ class MathInput extends React.Component {
     } = this.props;
     const innerStyle = _extends({}, inlineStyles.innerContainer, {
       borderWidth: this.getBorderWidthPx()
-    }, focused ? {
-      borderColor: Color.blue
+    }, showInputFocusStyle ? {
+      borderColor: color.blue
     } : {}, style);
 
     // NOTE(diedra): This label explicitly refers to tapping because this field
@@ -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,
@@ -2288,9 +2300,9 @@ const inlineStyles = {
     boxSizing: "border-box",
     position: "relative",
     borderStyle: "solid",
-    borderColor: Color.offBlack50,
+    borderColor: color.offBlack50,
     borderRadius: 4,
-    color: Color.offBlack
+    color: color.offBlack
   }
 };
 
@@ -2415,7 +2427,7 @@ const styles$6 = StyleSheet.create({
     marginLeft: 1
   },
   hovered: {
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${color.white}`,
     border: "1px solid #1865F2"
   },
   pressed: {
@@ -2423,7 +2435,7 @@ const styles$6 = StyleSheet.create({
   },
   focused: {
     outline: "none",
-    border: `2px solid ${Color.blue}`
+    border: `2px solid ${color.blue}`
   },
   innerBox: {
     boxSizing: "border-box",
@@ -2435,7 +2447,7 @@ const styles$6 = StyleSheet.create({
     alignItems: "center"
   },
   innerBoxPressed: {
-    border: `1px solid ${Color.white}`
+    border: `1px solid ${color.white}`
   },
   activeIndicator: {
     position: "absolute",
@@ -2453,15 +2465,15 @@ const styles$6 = StyleSheet.create({
 });
 function imageTintColor(itemState, hovered, focused, pressed) {
   if (itemState === "disabled") {
-    return Color.offBlack64;
+    return color.offBlack64;
   } else if (pressed) {
-    return Color.white;
+    return color.white;
   } else if (itemState === "active") {
-    return Color.blue;
+    return color.blue;
   } else if (hovered) {
-    return Color.blue;
+    return color.blue;
   }
-  return Color.offBlack64;
+  return color.offBlack64;
 }
 class TabbarItem extends React.Component {
   render() {
@@ -4540,9 +4552,9 @@ const styles$4 = StyleSheet.create({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    boxShadow: `0px 1px 0px ${Color.offBlack32}`,
+    boxShadow: `0px 1px 0px ${color.offBlack32}`,
     boxSizing: "border-box",
-    background: Color.white,
+    background: color.white,
     borderRadius: 4,
     borderWidth: 2,
     borderStyle: "solid",
@@ -4553,19 +4565,19 @@ const styles$4 = StyleSheet.create({
     padding: 1
   },
   hovered: {
-    borderColor: Color.blue,
+    borderColor: color.blue,
     padding: 1,
     boxShadow: "none"
   },
   focused: {
-    borderColor: Color.blue,
+    borderColor: color.blue,
     padding: 0,
     boxShadow: "none"
   },
   pressed: {
     border: "2px solid #1B50B3",
     padding: 0,
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${color.white}`,
     boxShadow: "none"
   },
   outerBoxBase: {
@@ -4920,13 +4932,13 @@ const styles$3 = StyleSheet.create({
     width: "100%"
   },
   base: {
-    boxShadow: `0px 1px 0px ${Color.offBlack32}`,
+    boxShadow: `0px 1px 0px ${color.offBlack32}`,
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    background: Color.white,
+    background: color.white,
     borderWidth: 2,
-    borderColor: Color.white
+    borderColor: color.white
   },
   up: {
     borderTopLeftRadius: borderRadiusPx,
@@ -4945,16 +4957,16 @@ const styles$3 = StyleSheet.create({
     borderBottomLeftRadius: borderRadiusPx
   },
   hovered: {
-    borderColor: Color.blue,
+    borderColor: color.blue,
     boxShadow: "none"
   },
   focused: {
-    borderColor: Color.blue,
+    borderColor: color.blue,
     boxShadow: "none"
   },
   pressed: {
     border: "2px solid #1B50B3",
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${color.white}`,
     boxShadow: "none"
   }
 });
@@ -5004,7 +5016,7 @@ const styles$2 = StyleSheet.create({
   spacer: {
     gridColumn: 2,
     gridRow: 2,
-    background: Color.white
+    background: color.white
   }
 });
 
@@ -5198,11 +5210,11 @@ const styles$1 = StyleSheet.create({
     alignItems: "center"
   },
   wrapper: {
-    background: Color.white
+    background: color.white
   },
   expandedWrapper: {
     borderWidth: "1px 1px 0 1px",
-    borderColor: Color.offBlack32,
+    borderColor: color.offBlack32,
     maxWidth: expandedViewThreshold,
     borderRadius: "3px 3px 0 0"
   },