@khanacademy/math-input 17.3.0 → 17.4.1

package/dist/fake-react-native-web/text.d.ts

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

package/dist/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var perseusCore = require('@khanacademy/perseus-core');
-var Color = require('@khanacademy/wonder-blocks-color');
 var i18n = require('@khanacademy/wonder-blocks-i18n');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var aphrodite = require('aphrodite');
 var React = require('react');
@@ -37,7 +37,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
@@ -47,7 +46,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 = "17.3.0";
+const libVersion = "17.4.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -1526,6 +1525,7 @@ class MathInput extends React__namespace.Component {
   };
   state = {
     focused: false,
+    showInputFocusStyle: false,
     handle: {
       animateIntoPosition: false,
       visible: false,
@@ -1608,6 +1608,8 @@ class MathInput extends React__namespace.Component {
       // multi-touch.
       if (this.state.focused && this.didTouchOutside && !this.didScroll) {
         this.blur();
+        this.mathField.blur();
+        this.props.onBlur?.();
       }
       this.didTouchOutside = false;
       this.didScroll = false;
@@ -1632,6 +1634,7 @@ class MathInput extends React__namespace.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();
             }
           }
         }
@@ -1726,15 +1729,14 @@ class MathInput extends React__namespace.Component {
   };
   blur = () => {
     this.mathField.blur();
-    this.props.onBlur && this.props.onBlur();
     this.setState({
-      focused: false,
+      showInputFocusStyle: false,
       handle: {
         visible: false
       }
     });
   };
-  focus = () => {
+  focus = setKeypadActive => {
     // Pass this component's handleKey method to the keypad so it can call
     // it whenever it needs to trigger a keypress action.
     this.props.keypadElement?.setKeyHandler(key => {
@@ -1761,8 +1763,10 @@ class MathInput extends React__namespace.Component {
     });
     this.mathField.focus();
     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,
@@ -1975,7 +1979,7 @@ class MathInput extends React__namespace.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,
@@ -2013,7 +2017,7 @@ class MathInput extends React__namespace.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,
@@ -2218,7 +2222,7 @@ class MathInput extends React__namespace.Component {
   };
   render() {
     const {
-      focused,
+      showInputFocusStyle,
       handle
     } = this.state;
     const {
@@ -2227,8 +2231,8 @@ class MathInput extends React__namespace.Component {
     const innerStyle = {
       ...inlineStyles.innerContainer,
       borderWidth: this.getBorderWidthPx(),
-      ...(focused ? {
-        borderColor: Color__default["default"].blue
+      ...(showInputFocusStyle ? {
+        borderColor: wonderBlocksTokens.color.blue
       } : {}),
       ...style
     };
@@ -2266,13 +2270,17 @@ class MathInput extends React__namespace.Component {
         ref: node => {
           this.inputRef = node;
         },
+        onFocus: () => {
+          this.focus(setKeypadActive);
+        },
+        onBlur: this.blur,
         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, {
+      })), showInputFocusStyle && handle.visible && /*#__PURE__*/React__namespace.createElement(CursorHandle, _extends({}, handle, {
         onTouchStart: this.onCursorHandleTouchStart,
         onTouchMove: this.onCursorHandleTouchMove,
         onTouchEnd: this.onCursorHandleTouchEnd,
@@ -2320,9 +2328,9 @@ const inlineStyles = {
     boxSizing: "border-box",
     position: "relative",
     borderStyle: "solid",
-    borderColor: Color__default["default"].offBlack50,
+    borderColor: wonderBlocksTokens.color.offBlack50,
     borderRadius: 4,
-    color: Color__default["default"].offBlack
+    color: wonderBlocksTokens.color.offBlack
   }
 };
 
@@ -2448,7 +2456,7 @@ const styles$6 = aphrodite.StyleSheet.create({
     marginLeft: 1
   },
   hovered: {
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color__default["default"].white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${wonderBlocksTokens.color.white}`,
     border: "1px solid #1865F2"
   },
   pressed: {
@@ -2456,7 +2464,7 @@ const styles$6 = aphrodite.StyleSheet.create({
   },
   focused: {
     outline: "none",
-    border: `2px solid ${Color__default["default"].blue}`
+    border: `2px solid ${wonderBlocksTokens.color.blue}`
   },
   innerBox: {
     boxSizing: "border-box",
@@ -2468,7 +2476,7 @@ const styles$6 = aphrodite.StyleSheet.create({
     alignItems: "center"
   },
   innerBoxPressed: {
-    border: `1px solid ${Color__default["default"].white}`
+    border: `1px solid ${wonderBlocksTokens.color.white}`
   },
   activeIndicator: {
     position: "absolute",
@@ -2486,15 +2494,15 @@ const styles$6 = aphrodite.StyleSheet.create({
 });
 function imageTintColor(itemState, hovered, focused, pressed) {
   if (itemState === "disabled") {
-    return Color__default["default"].offBlack64;
+    return wonderBlocksTokens.color.offBlack64;
   } else if (pressed) {
-    return Color__default["default"].white;
+    return wonderBlocksTokens.color.white;
   } else if (itemState === "active") {
-    return Color__default["default"].blue;
+    return wonderBlocksTokens.color.blue;
   } else if (hovered) {
-    return Color__default["default"].blue;
+    return wonderBlocksTokens.color.blue;
   }
-  return Color__default["default"].offBlack64;
+  return wonderBlocksTokens.color.offBlack64;
 }
 class TabbarItem extends React__namespace.Component {
   render() {
@@ -4818,9 +4826,9 @@ const styles$4 = aphrodite.StyleSheet.create({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    boxShadow: `0px 1px 0px ${Color__default["default"].offBlack32}`,
+    boxShadow: `0px 1px 0px ${wonderBlocksTokens.color.offBlack32}`,
     boxSizing: "border-box",
-    background: Color__default["default"].white,
+    background: wonderBlocksTokens.color.white,
     borderRadius: 4,
     borderWidth: 2,
     borderStyle: "solid",
@@ -4831,19 +4839,19 @@ const styles$4 = aphrodite.StyleSheet.create({
     padding: 1
   },
   hovered: {
-    borderColor: Color__default["default"].blue,
+    borderColor: wonderBlocksTokens.color.blue,
     padding: 1,
     boxShadow: "none"
   },
   focused: {
-    borderColor: Color__default["default"].blue,
+    borderColor: wonderBlocksTokens.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__default["default"].white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${wonderBlocksTokens.color.white}`,
     boxShadow: "none"
   },
   outerBoxBase: {
@@ -5202,13 +5210,13 @@ const styles$3 = aphrodite.StyleSheet.create({
     width: "100%"
   },
   base: {
-    boxShadow: `0px 1px 0px ${Color__default["default"].offBlack32}`,
+    boxShadow: `0px 1px 0px ${wonderBlocksTokens.color.offBlack32}`,
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    background: Color__default["default"].white,
+    background: wonderBlocksTokens.color.white,
     borderWidth: 2,
-    borderColor: Color__default["default"].white
+    borderColor: wonderBlocksTokens.color.white
   },
   up: {
     borderTopLeftRadius: borderRadiusPx,
@@ -5227,16 +5235,16 @@ const styles$3 = aphrodite.StyleSheet.create({
     borderBottomLeftRadius: borderRadiusPx
   },
   hovered: {
-    borderColor: Color__default["default"].blue,
+    borderColor: wonderBlocksTokens.color.blue,
     boxShadow: "none"
   },
   focused: {
-    borderColor: Color__default["default"].blue,
+    borderColor: wonderBlocksTokens.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__default["default"].white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${wonderBlocksTokens.color.white}`,
     boxShadow: "none"
   }
 });
@@ -5286,7 +5294,7 @@ const styles$2 = aphrodite.StyleSheet.create({
   spacer: {
     gridColumn: 2,
     gridRow: 2,
-    background: Color__default["default"].white
+    background: wonderBlocksTokens.color.white
   }
 });
 
@@ -5479,11 +5487,11 @@ const styles$1 = aphrodite.StyleSheet.create({
     alignItems: "center"
   },
   wrapper: {
-    background: Color__default["default"].white
+    background: wonderBlocksTokens.color.white
   },
   expandedWrapper: {
     borderWidth: "1px 1px 0 1px",
-    borderColor: Color__default["default"].offBlack32,
+    borderColor: wonderBlocksTokens.color.offBlack32,
     maxWidth: expandedViewThreshold,
     borderRadius: "3px 3px 0 0"
   },