@khanacademy/math-input 6.0.2 → 7.0.0

package/dist/index.js

@@ -10,9 +10,9 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var $ = require('jquery');
 var MathQuill = require('mathquill');
-var PropTypes = require('prop-types');
 var reactRedux = require('react-redux');
 var katex = require('katex');
+var PropTypes = require('prop-types');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
 var reactTransitionGroup = require('react-transition-group');
@@ -21,21 +21,21 @@ var Redux = require('redux');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
@@ -44,43 +44,11 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
 var MathQuill__default = /*#__PURE__*/_interopDefaultLegacy(MathQuill);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var katex__default = /*#__PURE__*/_interopDefaultLegacy(katex);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 var Redux__namespace = /*#__PURE__*/_interopNamespace(Redux);
 
-/**
- * Enum that defines the various contexts in which a cursor can exist. The
- * active context is determined first by looking at the cursor's siblings (e.g.,
- * for the `BEFORE_FRACTION` context), and then at its direct parent. Though a
- * cursor could in theory be nested in multiple contexts, we only care about the
- * immediate context.
- *
- * TODO(charlie): Add a context to represent being inside of a radical. Right
- * now, we show the dismiss button rather than allowing the user to jump out of
- * the radical.
- */
-
-const CursorContext = {
-  // The cursor is not in any of the other viable contexts.
-  NONE: "NONE",
-  // The cursor is within a set of parentheses.
-  IN_PARENS: "IN_PARENS",
-  // The cursor is within a superscript (e.g., an exponent).
-  IN_SUPER_SCRIPT: "IN_SUPER_SCRIPT",
-  // The cursor is within a subscript (e.g., the base of a custom logarithm).
-  IN_SUB_SCRIPT: "IN_SUB_SCRIPT",
-  // The cursor is in the numerator of a fraction.
-  IN_NUMERATOR: "IN_NUMERATOR",
-  // The cursor is in the denominator of a fraction.
-  IN_DENOMINATOR: "IN_DENOMINATOR",
-  // The cursor is sitting before a fraction; that is, the cursor is within
-  // what looks to be a mixed number preceding a fraction. This will only be
-  // the case when the only math between the cursor and the fraction to its
-  // write is non-leaf math (numbers and variables).
-  BEFORE_FRACTION: "BEFORE_FRACTION"
-};
-
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);
   if (key in obj) {
@@ -130,7 +98,7 @@ class Text extends React__namespace.Component {
       numberOfLines,
       style
     } = this.props;
-    const className = aphrodite.css(styles$h.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$h.singleLineStyle);
+    const className = aphrodite.css(styles$i.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$i.singleLineStyle);
     return /*#__PURE__*/React__namespace.createElement("span", {
       className: className,
       style: this.props.dynamicStyle
@@ -139,7 +107,7 @@ class Text extends React__namespace.Component {
 }
 
 // https://github.com/necolas/react-native-web/blob/master/src/components/Text/index.js
-const styles$h = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   initial: {
     color: "inherit",
     display: "inline",
@@ -409,6 +377,38 @@ class DragListener {
   }
 }
 
+/**
+ * Enum that defines the various contexts in which a cursor can exist. The
+ * active context is determined first by looking at the cursor's siblings (e.g.,
+ * for the `BEFORE_FRACTION` context), and then at its direct parent. Though a
+ * cursor could in theory be nested in multiple contexts, we only care about the
+ * immediate context.
+ *
+ * TODO(charlie): Add a context to represent being inside of a radical. Right
+ * now, we show the dismiss button rather than allowing the user to jump out of
+ * the radical.
+ */
+
+const CursorContext = {
+  // The cursor is not in any of the other viable contexts.
+  NONE: "NONE",
+  // The cursor is within a set of parentheses.
+  IN_PARENS: "IN_PARENS",
+  // The cursor is within a superscript (e.g., an exponent).
+  IN_SUPER_SCRIPT: "IN_SUPER_SCRIPT",
+  // The cursor is within a subscript (e.g., the base of a custom logarithm).
+  IN_SUB_SCRIPT: "IN_SUB_SCRIPT",
+  // The cursor is in the numerator of a fraction.
+  IN_NUMERATOR: "IN_NUMERATOR",
+  // The cursor is in the denominator of a fraction.
+  IN_DENOMINATOR: "IN_DENOMINATOR",
+  // The cursor is sitting before a fraction; that is, the cursor is within
+  // what looks to be a mixed number preceding a fraction. This will only be
+  // the case when the only math between the cursor and the fraction to its
+  // write is non-leaf math (numbers and variables).
+  BEFORE_FRACTION: "BEFORE_FRACTION"
+};
+
 // We only need one MathQuill instance (referred to as MQ in the docs)
 // and that contains some MQ constants and the MathField constructor
 const mathQuillInstance = MathQuill__default["default"].getInterface(2);
@@ -1578,7 +1578,8 @@ class MathInput extends React__namespace.Component {
     });
     _defineProperty(this, "_getKeypadBounds", () => {
       if (!this._keypadBounds) {
-        const node = this.props.keypadElement.getDOMNode();
+        var _this$props$keypadEle;
+        const node = (_this$props$keypadEle = this.props.keypadElement) === null || _this$props$keypadEle === void 0 ? void 0 : _this$props$keypadEle.getDOMNode();
         this._cacheKeypadBounds(node);
       }
       return this._keypadBounds;
@@ -1642,9 +1643,10 @@ class MathInput extends React__namespace.Component {
       });
     });
     _defineProperty(this, "focus", () => {
+      var _this$props$keypadEle2;
       // 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 => {
+      (_this$props$keypadEle2 = this.props.keypadElement) === null || _this$props$keypadEle2 === void 0 ? void 0 : _this$props$keypadEle2.setKeyHandler(key => {
         const cursor = this.mathField.pressKey(key);
 
         // Trigger an `onChange` if the value in the input changed, and hide
@@ -2159,7 +2161,7 @@ class MathInput extends React__namespace.Component {
     // to the open the keyboard, and then remove the second half of this label.
     const ariaLabel = i18n__namespace._("Math input box") + " " + i18n__namespace._("Tap with one or two fingers to open keyboard");
     return /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$g.input,
+      style: styles$h.input,
       onTouchStart: this.handleTouchStart,
       onTouchMove: this.handleTouchMove,
       onTouchEnd: this.handleTouchEnd,
@@ -2205,7 +2207,7 @@ const numeralHeightPx = 20;
 const totalDesiredPadding = 12;
 const minHeightPx = numeralHeightPx + totalDesiredPadding * 2;
 const minWidthPx = 64;
-const styles$g = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   input: {
     position: "relative",
     display: "inline-block",
@@ -2237,21 +2239,6 @@ const inlineStyles$1 = {
   }
 };
 
-/**
- * React PropTypes that may be shared between components.
- */
-
-// NOTE(jared): This is no longer guaranteed to be React element
-// NOTE(matthewc): only seems to be used in Perseus
-const keypadElementPropType = PropTypes__default["default"].shape({
-  activate: PropTypes__default["default"].func.isRequired,
-  dismiss: PropTypes__default["default"].func.isRequired,
-  configure: PropTypes__default["default"].func.isRequired,
-  setCursor: PropTypes__default["default"].func.isRequired,
-  setKeyHandler: PropTypes__default["default"].func.isRequired,
-  getDOMNode: PropTypes__default["default"].func.isRequired
-});
-
 /**
  * This file contains configuration settings for the buttons in the keypad.
  */
@@ -3025,7 +3012,7 @@ class CornerDecal extends React__namespace.Component {
     const {
       style
     } = this.props;
-    const containerStyle = [styles$f.container, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [styles$g.container, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React__namespace.createElement("svg", {
@@ -3041,7 +3028,7 @@ class CornerDecal extends React__namespace.Component {
 }
 
 const triangleSizePx = 7;
-const styles$f = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   container: {
     position: "absolute",
     top: 0,
@@ -3111,13 +3098,13 @@ class MathIcon extends React__namespace.Component {
     const {
       style
     } = this.props;
-    const containerStyle = [row$7, centered$4, styles$e.size, styles$e.base, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [row$7, centered$4, styles$f.size, styles$f.base, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     });
   }
 }
-const styles$e = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -4225,48 +4212,48 @@ const JumpOutDenominator = () => {
  */
 
 var Iconography = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    COS: Cos,
-    LOG: Log,
-    EQUAL: Equal,
-    BACKSPACE: Backspace,
-    SQRT: Sqrt,
-    EXP: Exp,
-    NEQ: Neq,
-    GEQ: Geq,
-    LN: Ln,
-    DISMISS: Dismiss,
-    SIN: Sin,
-    LT: Lt,
-    CUBE_ROOT: CubeRoot,
-    PLUS: Plus,
-    TAN: Tan,
-    LEFT: Left,
-    UP: Up,
-    DOWN: Down,
-    LEFT_PAREN: LeftParen,
-    RIGHT_PAREN: RightParen,
-    GT: Gt,
-    DIVIDE: Divide,
-    PERIOD: Period,
-    PERCENT: Percent,
-    TIMES: Times,
-    EXP_3: Exp3,
-    EXP_2: Exp2,
-    RIGHT: Right,
-    CDOT: Cdot,
-    LOG_N: LogN,
-    LEQ: Leq,
-    MINUS: Minus,
-    NEGATIVE: Minus,
-    RADICAL: Radical,
-    FRAC: FracInclusive,
-    JUMP_OUT_PARENTHESES: JumpOutParentheses,
-    JUMP_OUT_EXPONENT: JumpOutExponent,
-    JUMP_OUT_BASE: JumpOutBase,
-    JUMP_INTO_NUMERATOR: JumpIntoNumerator,
-    JUMP_OUT_NUMERATOR: JumpOutNumerator,
-    JUMP_OUT_DENOMINATOR: JumpOutDenominator
+  __proto__: null,
+  COS: Cos,
+  LOG: Log,
+  EQUAL: Equal,
+  BACKSPACE: Backspace,
+  SQRT: Sqrt,
+  EXP: Exp,
+  NEQ: Neq,
+  GEQ: Geq,
+  LN: Ln,
+  DISMISS: Dismiss,
+  SIN: Sin,
+  LT: Lt,
+  CUBE_ROOT: CubeRoot,
+  PLUS: Plus,
+  TAN: Tan,
+  LEFT: Left,
+  UP: Up,
+  DOWN: Down,
+  LEFT_PAREN: LeftParen,
+  RIGHT_PAREN: RightParen,
+  GT: Gt,
+  DIVIDE: Divide,
+  PERIOD: Period,
+  PERCENT: Percent,
+  TIMES: Times,
+  EXP_3: Exp3,
+  EXP_2: Exp2,
+  RIGHT: Right,
+  CDOT: Cdot,
+  LOG_N: LogN,
+  LEQ: Leq,
+  MINUS: Minus,
+  NEGATIVE: Minus,
+  RADICAL: Radical,
+  FRAC: FracInclusive,
+  JUMP_OUT_PARENTHESES: JumpOutParentheses,
+  JUMP_OUT_EXPONENT: JumpOutExponent,
+  JUMP_OUT_BASE: JumpOutBase,
+  JUMP_INTO_NUMERATOR: JumpIntoNumerator,
+  JUMP_OUT_NUMERATOR: JumpOutNumerator,
+  JUMP_OUT_DENOMINATOR: JumpOutDenominator
 });
 
 /**
@@ -4300,13 +4287,13 @@ class TextIcon extends React__namespace.Component {
       character,
       style
     } = this.props;
-    const containerStyle = [row$6, centered$3, styles$d.size, styles$d.base, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [row$6, centered$3, styles$e.size, styles$e.base, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React__namespace.createElement(Text, null, character));
   }
 }
-const styles$d = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -4329,7 +4316,7 @@ class Icon extends React__namespace.PureComponent {
       icon,
       style
     } = this.props;
-    const styleWithFocus = [focused ? styles$c.focused : styles$c.unfocused, ...(Array.isArray(style) ? style : [style])];
+    const styleWithFocus = [focused ? styles$d.focused : styles$d.unfocused, ...(Array.isArray(style) ? style : [style])];
     switch (icon.type) {
       case IconType.MATH:
         return /*#__PURE__*/React__namespace.createElement(MathIcon, {
@@ -4355,7 +4342,7 @@ class Icon extends React__namespace.PureComponent {
     }
   }
 }
-const styles$c = aphrodite.StyleSheet.create({
+const styles$d = aphrodite.StyleSheet.create({
   unfocused: {
     color: unfocusedColor
   },
@@ -4397,19 +4384,19 @@ class MultiSymbolGrid extends React__namespace.Component {
         focused: focused
       });
     } else {
-      const primaryIconStyle = styles$b.base;
-      const secondaryIconStyle = [styles$b.base, styles$b.secondary];
+      const primaryIconStyle = styles$c.base;
+      const secondaryIconStyle = [styles$c.base, styles$c.secondary];
       if (icons.length === 2) {
         return /*#__PURE__*/React__namespace.createElement(View, {
-          style: [row$5, styles$b.size]
+          style: [row$5, styles$c.size]
         }, /*#__PURE__*/React__namespace.createElement(View, {
-          style: [column$3, centered$2, fullWidth$3, styles$b.middleLeft]
+          style: [column$3, centered$2, fullWidth$3, styles$c.middleLeft]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: primaryIconStyle,
           icon: icons[0],
           focused: focused
         })), /*#__PURE__*/React__namespace.createElement(View, {
-          style: [column$3, centered$2, fullWidth$3, styles$b.middleRight]
+          style: [column$3, centered$2, fullWidth$3, styles$c.middleRight]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[1],
@@ -4417,17 +4404,17 @@ class MultiSymbolGrid extends React__namespace.Component {
         })));
       } else if (icons.length >= 3) {
         return /*#__PURE__*/React__namespace.createElement(View, {
-          style: [column$3, styles$b.size]
+          style: [column$3, styles$c.size]
         }, /*#__PURE__*/React__namespace.createElement(View, {
           style: row$5
         }, /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$b.topLeft]
+          style: [centered$2, fullWidth$3, styles$c.topLeft]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: primaryIconStyle,
           icon: icons[0],
           focused: focused
         })), /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$b.topRight]
+          style: [centered$2, fullWidth$3, styles$c.topRight]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[1],
@@ -4435,13 +4422,13 @@ class MultiSymbolGrid extends React__namespace.Component {
         }))), /*#__PURE__*/React__namespace.createElement(View, {
           style: row$5
         }, /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$b.bottomLeft]
+          style: [centered$2, fullWidth$3, styles$c.bottomLeft]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[2],
           focused: focused
         })), /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$b.bottomRight]
+          style: [centered$2, fullWidth$3, styles$c.bottomRight]
         }, icons[3] && /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[3],
@@ -4454,7 +4441,7 @@ class MultiSymbolGrid extends React__namespace.Component {
 }
 const verticalInsetPx = 2;
 const horizontalInsetPx = 4;
-const styles$b = aphrodite.StyleSheet.create({
+const styles$c = aphrodite.StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -4515,29 +4502,29 @@ class KeypadButton$1 extends React__namespace.PureComponent {
     _defineProperty(this, "_getFocusStyle", type => {
       let focusBackgroundStyle;
       if (type === "INPUT_NAVIGATION" || type === "KEYPAD_NAVIGATION") {
-        focusBackgroundStyle = styles$a.light;
+        focusBackgroundStyle = styles$b.light;
       } else {
-        focusBackgroundStyle = styles$a.bright;
+        focusBackgroundStyle = styles$b.bright;
       }
-      return [styles$a.focusBox, focusBackgroundStyle];
+      return [styles$b.focusBox, focusBackgroundStyle];
     });
     _defineProperty(this, "_getButtonStyle", (type, borders, style) => {
       // Select the appropriate style for the button.
       let backgroundStyle;
       switch (type) {
         case "EMPTY":
-          backgroundStyle = styles$a.empty;
+          backgroundStyle = styles$b.empty;
           break;
         case "MANY":
         case "VALUE":
-          backgroundStyle = styles$a.value;
+          backgroundStyle = styles$b.value;
           break;
         case "OPERATOR":
-          backgroundStyle = styles$a.operator;
+          backgroundStyle = styles$b.operator;
           break;
         case "INPUT_NAVIGATION":
         case "KEYPAD_NAVIGATION":
-          backgroundStyle = styles$a.control;
+          backgroundStyle = styles$b.control;
           break;
         case "ECHO":
           backgroundStyle = null;
@@ -4546,13 +4533,13 @@ class KeypadButton$1 extends React__namespace.PureComponent {
       const borderStyle = [];
       if (borders.includes(BorderDirection.LEFT)) {
         // @ts-expect-error TS2345
-        borderStyle.push(styles$a.leftBorder);
+        borderStyle.push(styles$b.leftBorder);
       }
       if (borders.includes(BorderDirection.BOTTOM)) {
         // @ts-expect-error TS2345
-        borderStyle.push(styles$a.bottomBorder);
+        borderStyle.push(styles$b.bottomBorder);
       }
-      return [styles$a.buttonBase, backgroundStyle, ...borderStyle, type === "ECHO" && styles$a.echo, this.buttonSizeStyle,
+      return [styles$b.buttonBase, backgroundStyle, ...borderStyle, type === "ECHO" && styles$b.echo, this.buttonSizeStyle,
       // React Native allows you to set the 'style' props on user defined
       // components.
       //   See: https://facebook.github.io/react-native/docs/style.html
@@ -4597,7 +4584,7 @@ class KeypadButton$1 extends React__namespace.PureComponent {
     const renderFocused = !disabled && focused || popoverEnabled || type === "ECHO";
     const buttonStyle = this._getButtonStyle(type, borders, style);
     const focusStyle = this._getFocusStyle(type);
-    const iconWrapperStyle = [styles$a.iconWrapper, disabled ? styles$a.disabled : undefined];
+    const iconWrapperStyle = [styles$b.iconWrapper, disabled ? styles$b.disabled : undefined];
     const eventHandlers = {
       onTouchCancel,
       onTouchEnd,
@@ -4608,7 +4595,7 @@ class KeypadButton$1 extends React__namespace.PureComponent {
       style: focusStyle
     });
     const maybeCornerDecal = !renderFocused && !disabled && childKeys && childKeys.length > 0 && /*#__PURE__*/React__namespace.createElement(CornerDecal, {
-      style: styles$a.decalInset
+      style: styles$b.decalInset
     });
     if (type === "EMPTY") {
       return /*#__PURE__*/React__namespace.createElement(View, _extends({
@@ -4657,7 +4644,7 @@ _defineProperty(KeypadButton$1, "defaultProps", {
 });
 const focusInsetPx = 4;
 const focusBoxZIndex = 0;
-const styles$a = aphrodite.StyleSheet.create({
+const styles$b = aphrodite.StyleSheet.create({
   buttonBase: {
     flex: 1,
     cursor: "pointer",
@@ -4810,7 +4797,7 @@ class TouchableKeypadButton extends React__namespace.Component {
       onTouchMove: evt => gestureManager.onTouchMove(evt),
       onTouchCancel: evt => gestureManager.onTouchCancel(evt)
     };
-    const styleWithAddons = [...(Array.isArray(style) ? style : [style]), styles$9.preventScrolls];
+    const styleWithAddons = [...(Array.isArray(style) ? style : [style]), styles$a.preventScrolls];
     return /*#__PURE__*/React__namespace.createElement(KeypadButton$2, _extends({
       ref: node => gestureManager.registerDOMNode(id, ReactDOM__default["default"].findDOMNode(node), childKeyIds),
       borders: borders,
@@ -4863,7 +4850,7 @@ const mapStateToProps$5 = (state, ownProps) => {
     ...extractProps(useFirstChildProps ? childKeys[0] : keyConfig)
   };
 };
-const styles$9 = aphrodite.StyleSheet.create({
+const styles$a = aphrodite.StyleSheet.create({
   preventScrolls: {
     // Touch events that start in the touchable buttons shouldn't be
     // allowed to produce page scrolls.
@@ -5010,7 +4997,7 @@ const IconAsset = function (_ref) {
   }
 };
 
-const styles$8 = aphrodite.StyleSheet.create({
+const styles$9 = aphrodite.StyleSheet.create({
   base: {
     display: "flex",
     width: 44,
@@ -5081,7 +5068,7 @@ class TabbarItem extends React__namespace.Component {
       onClick: onClick,
       disabled: itemState === "disabled",
       "aria-label": itemType,
-      style: styles$8.clickable,
+      style: styles$9.clickable,
       "aria-selected": itemState === "active",
       role: "tab"
     }, _ref => {
@@ -5092,14 +5079,14 @@ class TabbarItem extends React__namespace.Component {
       } = _ref;
       const tintColor = imageTintColor(itemState, hovered, focused, pressed);
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$8.base, itemState !== "disabled" && hovered && styles$8.hovered, focused && styles$8.focused, pressed && styles$8.pressed]
+        style: [styles$9.base, itemState !== "disabled" && hovered && styles$9.hovered, focused && styles$9.focused, pressed && styles$9.pressed]
       }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$8.innerBox, pressed && styles$8.innerBoxPressed]
+        style: [styles$9.innerBox, pressed && styles$9.innerBoxPressed]
       }, /*#__PURE__*/React__namespace.createElement(IconAsset, {
         type: itemType,
         tintColor: tintColor
       })), itemState === "active" && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$8.activeIndicator, {
+        style: [styles$9.activeIndicator, {
           backgroundColor: tintColor
         }]
       }));
@@ -5107,7 +5094,7 @@ class TabbarItem extends React__namespace.Component {
   }
 }
 
-const styles$7 = aphrodite.StyleSheet.create({
+const styles$8 = aphrodite.StyleSheet.create({
   tabbar: {
     display: "flex",
     flexDirection: "row",
@@ -5129,10 +5116,10 @@ function Tabbar(props) {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$7.tabbar, style],
+    style: [styles$8.tabbar, style],
     role: "tablist"
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$7.pages]
+    style: [styles$8.pages]
   }, items.map(item => /*#__PURE__*/React__namespace.createElement(TabbarItem, {
     key: "tabbar-item-".concat(item),
     itemState: item === selectedItem ? "active" : "inactive",
@@ -5283,7 +5270,7 @@ class MultiSymbolPopover extends React__namespace.Component {
     // TODO(charlie): We have to require this lazily because of a cyclic
     // dependence in our components.
     return /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$6.container
+      style: styles$7.container
     }, keys.map(key => {
       return /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
         keyConfig: key,
@@ -5292,7 +5279,7 @@ class MultiSymbolPopover extends React__namespace.Component {
     }));
   }
 }
-const styles$6 = aphrodite.StyleSheet.create({
+const styles$7 = aphrodite.StyleSheet.create({
   container: {
     flexDirection: "column-reverse",
     position: "relative",
@@ -5578,7 +5565,7 @@ class TwoPageKeypad extends React__namespace.Component {
     } = this.state;
     if (paginationEnabled) {
       return /*#__PURE__*/React__namespace.createElement(Keypad$2, {
-        style: [column$2, styles$5.keypad]
+        style: [column$2, styles$6.keypad]
       }, /*#__PURE__*/React__namespace.createElement(Tabbar, {
         items: ["Numbers", "Operators"],
         selectedItem: selectedPage,
@@ -5587,24 +5574,24 @@ class TwoPageKeypad extends React__namespace.Component {
             selectedPage: selectedItem
           });
         },
-        style: styles$5.tabbar
+        style: styles$6.tabbar
       }), /*#__PURE__*/React__namespace.createElement(View, {
-        style: styles$5.borderTop
+        style: styles$6.borderTop
       }, selectedPage === "Numbers" && rightPage, selectedPage === "Operators" && leftPage));
     } else {
       return /*#__PURE__*/React__namespace.createElement(Keypad$2, {
-        style: styles$5.keypad
+        style: styles$6.keypad
       }, /*#__PURE__*/React__namespace.createElement(View, {
         style: row$4
       }, /*#__PURE__*/React__namespace.createElement(View, {
         style: fullWidth$2
       }, leftPage), /*#__PURE__*/React__namespace.createElement(View, {
-        style: [styles$5.borderLeft, fullWidth$2]
+        style: [styles$6.borderLeft, fullWidth$2]
       }, rightPage)));
     }
   }
 }
-const styles$5 = aphrodite.StyleSheet.create({
+const styles$6 = aphrodite.StyleSheet.create({
   keypad: {
     // Set the background to light grey, so that when the user drags the
     // keypad pages past the edges, there's a grey backdrop.
@@ -5690,7 +5677,7 @@ class ExpressionKeypad extends React__namespace.Component {
     } else {
       dismissOrJumpOutKey = KeyConfigs.DISMISS;
     }
-    const rightPageStyle = [row$3, fullWidth$1, styles$4.rightPage, roundTopRight && roundedTopRight$1];
+    const rightPageStyle = [row$3, fullWidth$1, styles$5.rightPage, roundTopRight && roundedTopRight$1];
     const rightPage = /*#__PURE__*/React__namespace.createElement(View, {
       style: rightPageStyle
     }, /*#__PURE__*/React__namespace.createElement(View, {
@@ -5762,7 +5749,7 @@ class ExpressionKeypad extends React__namespace.Component {
       keyConfig: dismissOrJumpOutKey,
       borders: BorderStyles.LEFT
     })));
-    const leftPageStyle = [row$3, fullWidth$1, styles$4.leftPage, roundTopLeft && roundedTopLeft$2];
+    const leftPageStyle = [row$3, fullWidth$1, styles$5.leftPage, roundTopLeft && roundedTopLeft$2];
     const leftPage = /*#__PURE__*/React__namespace.createElement(View, {
       style: leftPageStyle
     }, /*#__PURE__*/React__namespace.createElement(View, {
@@ -5842,7 +5829,7 @@ class ExpressionKeypad extends React__namespace.Component {
     });
   }
 }
-const styles$4 = aphrodite.StyleSheet.create({
+const styles$5 = aphrodite.StyleSheet.create({
   // NOTE(charlie): These backgrounds are applied to as to fill in some
   // unfortunate 'cracks' in the layout. However, not all keys in the first
   // page use this background color (namely, the 'command' keys, backspace and
@@ -6018,7 +6005,7 @@ class NavigationPad extends React__namespace.Component {
       roundTopLeft,
       style
     } = this.props;
-    const containerStyle = [column, centered$1, styles$3.container, roundTopLeft && roundedTopLeft, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [column, centered$1, styles$4.container, roundTopLeft && roundedTopLeft, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React__namespace.createElement(View, {
@@ -6026,32 +6013,32 @@ class NavigationPad extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.UP,
       borders: BorderStyles.NONE,
-      style: [styles$3.navigationKey, styles$3.topArrow]
+      style: [styles$4.navigationKey, styles$4.topArrow]
     })), /*#__PURE__*/React__namespace.createElement(View, {
       style: [row$1, centered$1, stretch]
     }, /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.LEFT,
       borders: BorderStyles.NONE,
-      style: [styles$3.navigationKey, styles$3.leftArrow]
+      style: [styles$4.navigationKey, styles$4.leftArrow]
     }), /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$3.horizontalSpacer
+      style: styles$4.horizontalSpacer
     }), /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.RIGHT,
       borders: BorderStyles.NONE,
-      style: [styles$3.navigationKey, styles$3.rightArrow]
+      style: [styles$4.navigationKey, styles$4.rightArrow]
     })), /*#__PURE__*/React__namespace.createElement(View, {
       style: [row$1, centered$1]
     }, /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.DOWN,
       borders: BorderStyles.NONE,
-      style: [styles$3.navigationKey, styles$3.bottomArrow]
+      style: [styles$4.navigationKey, styles$4.bottomArrow]
     })));
   }
 }
 const buttonSizePx = 48;
 const borderRadiusPx = 4;
 const borderWidthPx$1 = 1;
-const styles$3 = aphrodite.StyleSheet.create({
+const styles$4 = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: controlGrey,
     width: navigationPadWidthPx
@@ -6224,8 +6211,8 @@ class KeypadContainer extends React__namespace.Component {
         ...inlineStyles.invisible
       };
     }
-    const keypadContainerStyle = [row, centered, fullWidth, styles$2.keypadContainer, ...(Array.isArray(style) ? style : [style])];
-    const keypadStyle = [row, styles$2.keypadBorder, layoutMode === LayoutMode.FULLSCREEN ? styles$2.fullscreen : styles$2.compact];
+    const keypadContainerStyle = [row, centered, fullWidth, styles$3.keypadContainer, ...(Array.isArray(style) ? style : [style])];
+    const keypadStyle = [row, styles$3.keypadBorder, layoutMode === LayoutMode.FULLSCREEN ? styles$3.fullscreen : styles$3.compact];
 
     // TODO(charlie): When the keypad is shorter than the width of the
     // screen, add a border on its left and right edges, and round out the
@@ -6244,15 +6231,15 @@ class KeypadContainer extends React__namespace.Component {
       }
     }, navigationPadEnabled && /*#__PURE__*/React__namespace.createElement(NavigationPad, {
       roundTopLeft: layoutMode === LayoutMode.COMPACT,
-      style: styles$2.navigationPadContainer
+      style: styles$3.navigationPadContainer
     }), /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$2.keypadLayout
+      style: styles$3.keypadLayout
     }, this.renderKeypad())));
   }
 }
 const keypadAnimationDurationMs = 300;
 const borderWidthPx = 1;
-const styles$2 = aphrodite.StyleSheet.create({
+const styles$3 = aphrodite.StyleSheet.create({
   keypadContainer: {
     bottom: 0,
     left: 0,
@@ -8459,7 +8446,7 @@ const KeypadButton = _ref => {
     }
   }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
     onClick: () => onClickKey(keyConfig.id),
-    style: styles$1.clickable,
+    style: styles$2.clickable,
     "aria-label": keyConfig.ariaLabel
   }, _ref2 => {
     let {
@@ -8468,17 +8455,17 @@ const KeypadButton = _ref => {
       pressed
     } = _ref2;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$1.outerBoxBase]
+      style: [styles$2.outerBoxBase]
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$1.base, tintColor != null ? {
+      style: [styles$2.base, tintColor != null ? {
         background: tintColor
-      } : undefined, hovered && styles$1.hovered, focused && styles$1.focused, pressed && styles$1.pressed]
+      } : undefined, hovered && styles$2.hovered, focused && styles$2.focused, pressed && styles$2.pressed]
     }, /*#__PURE__*/React__namespace.createElement(ButtonAsset, {
       id: keyConfig.id
     })));
   }));
 };
-const styles$1 = aphrodite.StyleSheet.create({
+const styles$2 = aphrodite.StyleSheet.create({
   base: {
     display: "flex",
     justifyContent: "center",
@@ -8839,10 +8826,10 @@ function Keypad(props) {
     onSelectItem: tabbarItem => {
       setSelectedPage(tabbarItem);
     },
-    style: styles.tabbar,
+    style: styles$1.tabbar,
     onClickClose: showDismiss ? () => onClickKey("DISMISS") : undefined
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles.grid,
+    style: styles$1.grid,
     role: "grid",
     tabIndex: 0,
     "aria-label": "Keypad"
@@ -8868,7 +8855,7 @@ function Keypad(props) {
   })));
 }
 Keypad.defaultProps = defaultProps;
-const styles = aphrodite.StyleSheet.create({
+const styles$1 = aphrodite.StyleSheet.create({
   tabbar: {
     background: Color__default["default"].white
   },
@@ -8876,18 +8863,166 @@ const styles = aphrodite.StyleSheet.create({
     display: "grid",
     gridTemplateColumns: "repeat(6, 1fr)",
     gridTemplateRows: "repeat(4, 1fr)",
-    backgroundColor: "#DBDCDD",
-    maxHeight: 200,
-    maxWidth: 300
+    backgroundColor: "#DBDCDD"
   }
 });
 
+/**
+ * This is the v2 equivalent of v1's ProvidedKeypad. It follows the same
+ * external API so that it can be hot-swapped with the v1 keypad and
+ * is responsible for connecting the keypad with MathInput and the Renderer.
+ *
+ * Ideally this strategy of attaching methods on the class component for
+ * other components to call will be replaced props/callbacks since React
+ * doesn't support this type of code anymore (functional components
+ * can't have methods attached to them).
+ */
+
+class MobileKeypad extends React__namespace.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "hasMounted", false);
+    _defineProperty(this, "state", {
+      active: false
+    });
+    _defineProperty(this, "activate", () => {
+      this.setState({
+        active: true
+      });
+    });
+    _defineProperty(this, "dismiss", () => {
+      this.setState({
+        active: false
+      }, () => {
+        var _this$props$onDismiss, _this$props;
+        (_this$props$onDismiss = (_this$props = this.props).onDismiss) === null || _this$props$onDismiss === void 0 ? void 0 : _this$props$onDismiss.call(_this$props);
+      });
+    });
+    _defineProperty(this, "configure", (configuration, cb) => {
+      this.setState({
+        keypadConfig: configuration
+      });
+
+      // TODO(matthewc)[LC-1080]: this was brought in from v1's ProvidedKeypad.
+      // We need to investigate whether we still need this.
+      // HACK(charlie): In Perseus, triggering a focus causes the keypad to
+      // animate into view and re-configure. We'd like to provide the option
+      // to re-render the re-configured keypad before animating it into view,
+      // to avoid jank in the animation. As such, we support passing a
+      // callback into `configureKeypad`. However, implementing this properly
+      // would require middleware, etc., so we just hack it on with
+      // `setTimeout` for now.
+      setTimeout(() => cb && cb());
+    });
+    _defineProperty(this, "setCursor", cursor => {
+      this.setState({
+        cursor
+      });
+    });
+    _defineProperty(this, "setKeyHandler", keyHandler => {
+      this.setState({
+        keyHandler
+      });
+    });
+    _defineProperty(this, "getDOMNode", () => {
+      return ReactDOM__default["default"].findDOMNode(this);
+    });
+  }
+  _handleClickKey(key) {
+    var _this$state$keyHandle, _this$state;
+    if (key === "DISMISS") {
+      this.dismiss();
+      return;
+    }
+    const cursor = (_this$state$keyHandle = (_this$state = this.state).keyHandler) === null || _this$state$keyHandle === void 0 ? void 0 : _this$state$keyHandle.call(_this$state, key);
+    this.setState({
+      cursor
+    });
+  }
+  render() {
+    const {
+      active,
+      cursor,
+      keypadConfig
+    } = this.state;
+    const containerStyle = [styles.keypadContainer, active ? styles.activeKeypadContainer : null];
+    const isExpression = (keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
+    return /*#__PURE__*/React__namespace.createElement(View, {
+      style: containerStyle,
+      ref: element => {
+        if (!this.hasMounted && element) {
+          var _this$props$onElement, _this$props2;
+          // TODO(matthewc)[LC-1081]: clean up this weird
+          // object and type the onElementMounted callback
+          // Append the dispatch methods that we want to expose
+          // externally to the returned React element.
+          const elementWithDispatchMethods = {
+            ...element,
+            activate: this.activate,
+            dismiss: this.dismiss,
+            configure: this.configure,
+            setCursor: this.setCursor,
+            setKeyHandler: this.setKeyHandler,
+            getDOMNode: this.getDOMNode
+          };
+          this.hasMounted = true;
+          (_this$props$onElement = (_this$props2 = this.props).onElementMounted) === null || _this$props$onElement === void 0 ? void 0 : _this$props$onElement.call(_this$props2, elementWithDispatchMethods);
+        }
+      }
+    }, /*#__PURE__*/React__namespace.createElement(Keypad
+    // TODO(jeremy)
+    , {
+      sendEvent: async () => {},
+      extraKeys: keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.extraKeys,
+      onClickKey: key => this._handleClickKey(key),
+      cursorContext: cursor === null || cursor === void 0 ? void 0 : cursor.context,
+      multiplicationDot: isExpression,
+      divisionKey: isExpression,
+      trigonometry: isExpression,
+      preAlgebra: isExpression,
+      logarithms: isExpression,
+      basicRelations: isExpression,
+      advancedRelations: isExpression,
+      showDismiss: true
+    }));
+  }
+}
+const styles = aphrodite.StyleSheet.create({
+  keypadContainer: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    position: "fixed",
+    transition: "200ms ease-out",
+    transitionProperty: "transform",
+    transform: "translate3d(0, 100%, 0)"
+  },
+  activeKeypadContainer: {
+    transform: "translate3d(0, 0, 0)"
+  }
+});
+
+/**
+ * React PropTypes that may be shared between components.
+ */
+
+// NOTE(jared): This is no longer guaranteed to be React element
+const keypadElementPropType = PropTypes__default["default"].shape({
+  activate: PropTypes__default["default"].func.isRequired,
+  dismiss: PropTypes__default["default"].func.isRequired,
+  configure: PropTypes__default["default"].func.isRequired,
+  setCursor: PropTypes__default["default"].func.isRequired,
+  setKeyHandler: PropTypes__default["default"].func.isRequired,
+  getDOMNode: PropTypes__default["default"].func.isRequired
+});
+
 exports.CursorContext = CursorContext;
 exports.KeyConfigs = KeyConfigs;
 exports.Keypad = Keypad;
 exports.KeypadInput = MathInput;
 exports.KeypadType = KeypadType;
 exports.LegacyKeypad = ProvidedKeypad;
+exports.MobileKeypad = MobileKeypad;
 exports.createMathField = createMathField;
 exports.getCursorContext = getCursorContext;
 exports.keyTranslator = keyToMathquillMap;