@khanacademy/math-input 6.0.2 → 7.0.0

package/dist/es/index.js

@@ -8,46 +8,14 @@ import { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import $ from 'jquery';
 import MathQuill from 'mathquill';
-import PropTypes from 'prop-types';
 import { connect, Provider } from 'react-redux';
 import katex from 'katex';
+import PropTypes from 'prop-types';
 import { View as View$1 } from '@khanacademy/wonder-blocks-core';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import * as Redux from '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 _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -72,7 +40,7 @@ class Text extends React.Component {
       numberOfLines,
       style
     } = this.props;
-    const className = css(styles$h.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$h.singleLineStyle);
+    const className = css(styles$i.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$i.singleLineStyle);
     return /*#__PURE__*/React.createElement("span", {
       className: className,
       style: this.props.dynamicStyle
@@ -81,7 +49,7 @@ class Text extends React.Component {
 }
 
 // https://github.com/necolas/react-native-web/blob/master/src/components/Text/index.js
-const styles$h = StyleSheet.create({
+const styles$i = StyleSheet.create({
   initial: {
     color: "inherit",
     display: "inline",
@@ -350,6 +318,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.getInterface(2);
@@ -1516,7 +1516,8 @@ class MathInput extends React.Component {
     };
     this._getKeypadBounds = () => {
       if (!this._keypadBounds) {
-        const node = this.props.keypadElement.getDOMNode();
+        var _this$props$keypadEle;
+        const node = (_this$props$keypadEle = this.props.keypadElement) == null ? void 0 : _this$props$keypadEle.getDOMNode();
         this._cacheKeypadBounds(node);
       }
       return this._keypadBounds;
@@ -1580,9 +1581,10 @@ class MathInput extends React.Component {
       });
     };
     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 ? 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
@@ -2094,7 +2096,7 @@ class MathInput extends React.Component {
     // 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, {
-      style: styles$g.input,
+      style: styles$h.input,
       onTouchStart: this.handleTouchStart,
       onTouchMove: this.handleTouchMove,
       onTouchEnd: this.handleTouchEnd,
@@ -2140,7 +2142,7 @@ const numeralHeightPx = 20;
 const totalDesiredPadding = 12;
 const minHeightPx = numeralHeightPx + totalDesiredPadding * 2;
 const minWidthPx = 64;
-const styles$g = StyleSheet.create({
+const styles$h = StyleSheet.create({
   input: {
     position: "relative",
     display: "inline-block",
@@ -2172,21 +2174,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.shape({
-  activate: PropTypes.func.isRequired,
-  dismiss: PropTypes.func.isRequired,
-  configure: PropTypes.func.isRequired,
-  setCursor: PropTypes.func.isRequired,
-  setKeyHandler: PropTypes.func.isRequired,
-  getDOMNode: PropTypes.func.isRequired
-});
-
 const getDefaultOperatorFields = ({
   key,
   keyType: _keyType = "OPERATOR",
@@ -2736,7 +2723,7 @@ class CornerDecal extends React.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.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React.createElement("svg", {
@@ -2752,7 +2739,7 @@ class CornerDecal extends React.Component {
 }
 
 const triangleSizePx = 7;
-const styles$f = StyleSheet.create({
+const styles$g = StyleSheet.create({
   container: {
     position: "absolute",
     top: 0,
@@ -2825,13 +2812,13 @@ class MathIcon extends React.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.createElement(View, {
       style: containerStyle
     });
   }
 }
-const styles$e = StyleSheet.create({
+const styles$f = StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -4079,48 +4066,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
 });
 
 /**
@@ -4154,13 +4141,13 @@ class TextIcon extends React.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.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React.createElement(Text, null, character));
   }
 }
-const styles$d = StyleSheet.create({
+const styles$e = StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -4183,7 +4170,7 @@ class Icon extends React.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.createElement(MathIcon, {
@@ -4209,7 +4196,7 @@ class Icon extends React.PureComponent {
     }
   }
 }
-const styles$c = StyleSheet.create({
+const styles$d = StyleSheet.create({
   unfocused: {
     color: unfocusedColor
   },
@@ -4251,19 +4238,19 @@ class MultiSymbolGrid extends React.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.createElement(View, {
-          style: [row$5, styles$b.size]
+          style: [row$5, styles$c.size]
         }, /*#__PURE__*/React.createElement(View, {
-          style: [column$3, centered$2, fullWidth$3, styles$b.middleLeft]
+          style: [column$3, centered$2, fullWidth$3, styles$c.middleLeft]
         }, /*#__PURE__*/React.createElement(Icon, {
           style: primaryIconStyle,
           icon: icons[0],
           focused: focused
         })), /*#__PURE__*/React.createElement(View, {
-          style: [column$3, centered$2, fullWidth$3, styles$b.middleRight]
+          style: [column$3, centered$2, fullWidth$3, styles$c.middleRight]
         }, /*#__PURE__*/React.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[1],
@@ -4271,17 +4258,17 @@ class MultiSymbolGrid extends React.Component {
         })));
       } else if (icons.length >= 3) {
         return /*#__PURE__*/React.createElement(View, {
-          style: [column$3, styles$b.size]
+          style: [column$3, styles$c.size]
         }, /*#__PURE__*/React.createElement(View, {
           style: row$5
         }, /*#__PURE__*/React.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$b.topLeft]
+          style: [centered$2, fullWidth$3, styles$c.topLeft]
         }, /*#__PURE__*/React.createElement(Icon, {
           style: primaryIconStyle,
           icon: icons[0],
           focused: focused
         })), /*#__PURE__*/React.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$b.topRight]
+          style: [centered$2, fullWidth$3, styles$c.topRight]
         }, /*#__PURE__*/React.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[1],
@@ -4289,13 +4276,13 @@ class MultiSymbolGrid extends React.Component {
         }))), /*#__PURE__*/React.createElement(View, {
           style: row$5
         }, /*#__PURE__*/React.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$b.bottomLeft]
+          style: [centered$2, fullWidth$3, styles$c.bottomLeft]
         }, /*#__PURE__*/React.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[2],
           focused: focused
         })), /*#__PURE__*/React.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$b.bottomRight]
+          style: [centered$2, fullWidth$3, styles$c.bottomRight]
         }, icons[3] && /*#__PURE__*/React.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[3],
@@ -4308,7 +4295,7 @@ class MultiSymbolGrid extends React.Component {
 }
 const verticalInsetPx = 2;
 const horizontalInsetPx = 4;
-const styles$b = StyleSheet.create({
+const styles$c = StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -4369,29 +4356,29 @@ class KeypadButton$1 extends React.PureComponent {
     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];
     };
     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;
@@ -4400,13 +4387,13 @@ class KeypadButton$1 extends React.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
@@ -4451,7 +4438,7 @@ class KeypadButton$1 extends React.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,
@@ -4462,7 +4449,7 @@ class KeypadButton$1 extends React.PureComponent {
       style: focusStyle
     });
     const maybeCornerDecal = !renderFocused && !disabled && childKeys && childKeys.length > 0 && /*#__PURE__*/React.createElement(CornerDecal, {
-      style: styles$a.decalInset
+      style: styles$b.decalInset
     });
     if (type === "EMPTY") {
       return /*#__PURE__*/React.createElement(View, _extends({
@@ -4511,7 +4498,7 @@ KeypadButton$1.defaultProps = {
 };
 const focusInsetPx = 4;
 const focusBoxZIndex = 0;
-const styles$a = StyleSheet.create({
+const styles$b = StyleSheet.create({
   buttonBase: {
     flex: 1,
     cursor: "pointer",
@@ -4669,7 +4656,7 @@ class TouchableKeypadButton extends React.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.createElement(KeypadButton$2, _extends({
       ref: node => gestureManager.registerDOMNode(id, ReactDOM.findDOMNode(node), childKeyIds),
       borders: borders,
@@ -4720,7 +4707,7 @@ const mapStateToProps$5 = (state, ownProps) => {
     childKeys
   }, extractProps(useFirstChildProps ? childKeys[0] : keyConfig));
 };
-const styles$9 = StyleSheet.create({
+const styles$a = StyleSheet.create({
   preventScrolls: {
     // Touch events that start in the touchable buttons shouldn't be
     // allowed to produce page scrolls.
@@ -4868,7 +4855,7 @@ const IconAsset = function IconAsset({
   }
 };
 
-const styles$8 = StyleSheet.create({
+const styles$9 = StyleSheet.create({
   base: {
     display: "flex",
     width: 44,
@@ -4939,7 +4926,7 @@ class TabbarItem extends React.Component {
       onClick: onClick,
       disabled: itemState === "disabled",
       "aria-label": itemType,
-      style: styles$8.clickable,
+      style: styles$9.clickable,
       "aria-selected": itemState === "active",
       role: "tab"
     }, ({
@@ -4949,14 +4936,14 @@ class TabbarItem extends React.Component {
     }) => {
       const tintColor = imageTintColor(itemState, hovered, focused, pressed);
       return /*#__PURE__*/React.createElement(View$1, {
-        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.createElement(View$1, {
-        style: [styles$8.innerBox, pressed && styles$8.innerBoxPressed]
+        style: [styles$9.innerBox, pressed && styles$9.innerBoxPressed]
       }, /*#__PURE__*/React.createElement(IconAsset, {
         type: itemType,
         tintColor: tintColor
       })), itemState === "active" && /*#__PURE__*/React.createElement(View$1, {
-        style: [styles$8.activeIndicator, {
+        style: [styles$9.activeIndicator, {
           backgroundColor: tintColor
         }]
       }));
@@ -4964,7 +4951,7 @@ class TabbarItem extends React.Component {
   }
 }
 
-const styles$7 = StyleSheet.create({
+const styles$8 = StyleSheet.create({
   tabbar: {
     display: "flex",
     flexDirection: "row",
@@ -4986,10 +4973,10 @@ function Tabbar(props) {
     style
   } = props;
   return /*#__PURE__*/React.createElement(View$1, {
-    style: [styles$7.tabbar, style],
+    style: [styles$8.tabbar, style],
     role: "tablist"
   }, /*#__PURE__*/React.createElement(View$1, {
-    style: [styles$7.pages]
+    style: [styles$8.pages]
   }, items.map(item => /*#__PURE__*/React.createElement(TabbarItem, {
     key: `tabbar-item-${item}`,
     itemState: item === selectedItem ? "active" : "inactive",
@@ -5139,7 +5126,7 @@ class MultiSymbolPopover extends React.Component {
     // TODO(charlie): We have to require this lazily because of a cyclic
     // dependence in our components.
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$6.container
+      style: styles$7.container
     }, keys.map(key => {
       return /*#__PURE__*/React.createElement(TouchableKeypadButton$1, {
         keyConfig: key,
@@ -5148,7 +5135,7 @@ class MultiSymbolPopover extends React.Component {
     }));
   }
 }
-const styles$6 = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   container: {
     flexDirection: "column-reverse",
     position: "relative",
@@ -5431,7 +5418,7 @@ class TwoPageKeypad extends React.Component {
     } = this.state;
     if (paginationEnabled) {
       return /*#__PURE__*/React.createElement(Keypad$2, {
-        style: [column$2, styles$5.keypad]
+        style: [column$2, styles$6.keypad]
       }, /*#__PURE__*/React.createElement(Tabbar, {
         items: ["Numbers", "Operators"],
         selectedItem: selectedPage,
@@ -5440,24 +5427,24 @@ class TwoPageKeypad extends React.Component {
             selectedPage: selectedItem
           });
         },
-        style: styles$5.tabbar
+        style: styles$6.tabbar
       }), /*#__PURE__*/React.createElement(View, {
-        style: styles$5.borderTop
+        style: styles$6.borderTop
       }, selectedPage === "Numbers" && rightPage, selectedPage === "Operators" && leftPage));
     } else {
       return /*#__PURE__*/React.createElement(Keypad$2, {
-        style: styles$5.keypad
+        style: styles$6.keypad
       }, /*#__PURE__*/React.createElement(View, {
         style: row$4
       }, /*#__PURE__*/React.createElement(View, {
         style: fullWidth$2
       }, leftPage), /*#__PURE__*/React.createElement(View, {
-        style: [styles$5.borderLeft, fullWidth$2]
+        style: [styles$6.borderLeft, fullWidth$2]
       }, rightPage)));
     }
   }
 }
-const styles$5 = StyleSheet.create({
+const styles$6 = 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.
@@ -5543,7 +5530,7 @@ class ExpressionKeypad extends React.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.createElement(View, {
       style: rightPageStyle
     }, /*#__PURE__*/React.createElement(View, {
@@ -5615,7 +5602,7 @@ class ExpressionKeypad extends React.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.createElement(View, {
       style: leftPageStyle
     }, /*#__PURE__*/React.createElement(View, {
@@ -5695,7 +5682,7 @@ class ExpressionKeypad extends React.Component {
     });
   }
 }
-const styles$4 = StyleSheet.create({
+const styles$5 = 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
@@ -5871,7 +5858,7 @@ class NavigationPad extends React.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.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React.createElement(View, {
@@ -5879,32 +5866,32 @@ class NavigationPad extends React.Component {
     }, /*#__PURE__*/React.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.createElement(View, {
       style: [row$1, centered$1, stretch]
     }, /*#__PURE__*/React.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.createElement(View, {
-      style: styles$3.horizontalSpacer
+      style: styles$4.horizontalSpacer
     }), /*#__PURE__*/React.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.createElement(View, {
       style: [row$1, centered$1]
     }, /*#__PURE__*/React.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 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   container: {
     backgroundColor: controlGrey,
     width: navigationPadWidthPx
@@ -6072,8 +6059,8 @@ class KeypadContainer extends React.Component {
     if (!active && !hasBeenActivated) {
       dynamicStyle = _extends({}, dynamicStyle, 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
@@ -6092,15 +6079,15 @@ class KeypadContainer extends React.Component {
       }
     }, navigationPadEnabled && /*#__PURE__*/React.createElement(NavigationPad, {
       roundTopLeft: layoutMode === LayoutMode.COMPACT,
-      style: styles$2.navigationPadContainer
+      style: styles$3.navigationPadContainer
     }), /*#__PURE__*/React.createElement(View, {
-      style: styles$2.keypadLayout
+      style: styles$3.keypadLayout
     }, this.renderKeypad())));
   }
 }
 const keypadAnimationDurationMs = 300;
 const borderWidthPx = 1;
-const styles$2 = StyleSheet.create({
+const styles$3 = StyleSheet.create({
   keypadContainer: {
     bottom: 0,
     left: 0,
@@ -8262,7 +8249,7 @@ const KeypadButton = ({
     }, style)
   }, /*#__PURE__*/React.createElement(Clickable, {
     onClick: () => onClickKey(keyConfig.id),
-    style: styles$1.clickable,
+    style: styles$2.clickable,
     "aria-label": keyConfig.ariaLabel
   }, ({
     hovered,
@@ -8270,17 +8257,17 @@ const KeypadButton = ({
     pressed
   }) => {
     return /*#__PURE__*/React.createElement(View$1, {
-      style: [styles$1.outerBoxBase]
+      style: [styles$2.outerBoxBase]
     }, /*#__PURE__*/React.createElement(View$1, {
-      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.createElement(ButtonAsset, {
       id: keyConfig.id
     })));
   }));
 };
-const styles$1 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   base: {
     display: "flex",
     justifyContent: "center",
@@ -8641,10 +8628,10 @@ function Keypad(props) {
     onSelectItem: tabbarItem => {
       setSelectedPage(tabbarItem);
     },
-    style: styles.tabbar,
+    style: styles$1.tabbar,
     onClickClose: showDismiss ? () => onClickKey("DISMISS") : undefined
   }), /*#__PURE__*/React.createElement(View$1, {
-    style: styles.grid,
+    style: styles$1.grid,
     role: "grid",
     tabIndex: 0,
     "aria-label": "Keypad"
@@ -8670,7 +8657,7 @@ function Keypad(props) {
   })));
 }
 Keypad.defaultProps = defaultProps;
-const styles = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   tabbar: {
     background: Color.white
   },
@@ -8678,11 +8665,157 @@ const styles = 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.Component {
+  constructor(...args) {
+    super(...args);
+    this.hasMounted = false;
+    this.state = {
+      active: false
+    };
+    this.activate = () => {
+      this.setState({
+        active: true
+      });
+    };
+    this.dismiss = () => {
+      this.setState({
+        active: false
+      }, () => {
+        var _this$props$onDismiss, _this$props;
+        (_this$props$onDismiss = (_this$props = this.props).onDismiss) == null ? void 0 : _this$props$onDismiss.call(_this$props);
+      });
+    };
+    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());
+    };
+    this.setCursor = cursor => {
+      this.setState({
+        cursor
+      });
+    };
+    this.setKeyHandler = keyHandler => {
+      this.setState({
+        keyHandler
+      });
+    };
+    this.getDOMNode = () => {
+      return ReactDOM.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 ? 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 ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
+    return /*#__PURE__*/React.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 = _extends({}, 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 ? void 0 : _this$props$onElement.call(_this$props2, elementWithDispatchMethods);
+        }
+      }
+    }, /*#__PURE__*/React.createElement(Keypad
+    // TODO(jeremy)
+    , {
+      sendEvent: async function () {},
+      extraKeys: keypadConfig == null ? void 0 : keypadConfig.extraKeys,
+      onClickKey: key => this._handleClickKey(key),
+      cursorContext: cursor == null ? void 0 : cursor.context,
+      multiplicationDot: isExpression,
+      divisionKey: isExpression,
+      trigonometry: isExpression,
+      preAlgebra: isExpression,
+      logarithms: isExpression,
+      basicRelations: isExpression,
+      advancedRelations: isExpression,
+      showDismiss: true
+    }));
   }
+}
+const styles = 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.shape({
+  activate: PropTypes.func.isRequired,
+  dismiss: PropTypes.func.isRequired,
+  configure: PropTypes.func.isRequired,
+  setCursor: PropTypes.func.isRequired,
+  setKeyHandler: PropTypes.func.isRequired,
+  getDOMNode: PropTypes.func.isRequired
 });
 
-export { CursorContext, KeyConfigs, Keypad, MathInput as KeypadInput, KeypadType, ProvidedKeypad as LegacyKeypad, createMathField, getCursorContext, keyToMathquillMap as keyTranslator, keypadElementPropType, mathQuillInstance };
+export { CursorContext, KeyConfigs, Keypad, MathInput as KeypadInput, KeypadType, ProvidedKeypad as LegacyKeypad, MobileKeypad, createMathField, getCursorContext, keyToMathquillMap as keyTranslator, keypadElementPropType, mathQuillInstance };
 //# sourceMappingURL=index.js.map