@khanacademy/math-input 0.7.2 → 1.0.1

package/dist/index.js

@@ -391,6 +391,9 @@ _defineProperty(CursorHandle, "defaultProps", {
 const touchSlopPx = 8;
 class DragListener {
   constructor(onDrag, initialEvent) {
+    _defineProperty(this, "_scrollListener", void 0);
+    _defineProperty(this, "_moveListener", void 0);
+    _defineProperty(this, "_endAndCancelListener", void 0);
     // We detect drags in two ways. First, by listening for the window
     // scroll event (we consider any legitimate scroll to be a drag).
     this._scrollListener = () => {
@@ -549,7 +552,7 @@ const IN_DENOMINATOR = "IN_DENOMINATOR";
 // write is non-leaf math (numbers and variables).
 const BEFORE_FRACTION = "BEFORE_FRACTION";
 
-var CursorContexts = /*#__PURE__*/Object.freeze({
+var cursorContexts = /*#__PURE__*/Object.freeze({
   __proto__: null,
   NONE: NONE,
   IN_PARENS: IN_PARENS,
@@ -560,12 +563,6 @@ var CursorContexts = /*#__PURE__*/Object.freeze({
   BEFORE_FRACTION: BEFORE_FRACTION
 });
 
-/**
- * This file contains a wrapper around MathQuill so that we can provide a
- * more regular interface for the functionality we need while insulating us
- * from MathQuill changes.
- */
-
 // Keeping `window` in place for test suite and GitHub Pages.
 // If it does not exist, fall back to CommonJS require. - jsatk
 
@@ -700,8 +697,14 @@ const KeysForJumpContext = {
   [IN_DENOMINATOR]: Keys.JUMP_OUT_DENOMINATOR
 };
 class MathWrapper {
+  // MathQuill interface
+  // MathQuill input
+
   constructor(element) {
     let callbacks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    _defineProperty(this, "MQ", void 0);
+    _defineProperty(this, "mathField", void 0);
+    _defineProperty(this, "callbacks", void 0);
     this.MQ = MathQuill__default["default"].getInterface(2);
     this.mathField = this.MQ.MathField(element, {
       // use a span instead of a textarea so that we don't bring up the
@@ -780,7 +783,7 @@ class MathWrapper {
       this._handleBackspace(cursor);
     } else if (key === Keys.LEFT) {
       this._handleLeftArrow(cursor);
-    } else if (key === Keys.RIGHT || key === Keys.JUMP_OUT) {
+    } else if (key === Keys.RIGHT) {
       this._handleRightArrow(cursor);
     } else if (/^[a-zA-Z]$/.test(key)) {
       this.mathField[WRITE](key);
@@ -1279,7 +1282,7 @@ class MathWrapper {
     if (this._isInsideEmptyNode(cursor)) {
       const grandparent = cursor.parent.parent;
       const command = this._maybeFindCommandBeforeParens(grandparent);
-      cursor.insLeftOf(command.startNode);
+      cursor.insLeftOf(command === null || command === void 0 ? void 0 : command.startNode);
       cursor.startSelection();
       if (grandparent[this.MQ.R] !== MQ_END) {
         cursor.insRightOf(grandparent[this.MQ.R]);
@@ -1443,18 +1446,6 @@ class MathWrapper {
  * TODO(charlie): Move this scroll logic out of our components and into a higher
  * level in the component tree--perhaps even into webapp, beyond Perseus.
  */
-
-// Taken from https://dev.opera.com/articles/fixing-the-scrolltop-bug/
-function bodyOrHtml() {
-  if ("scrollingElement" in document) {
-    return document.scrollingElement;
-  }
-  // Fallback for legacy browsers
-  if (navigator.userAgent.indexOf("WebKit") !== -1) {
-    return document.body;
-  }
-  return document.documentElement;
-}
 const scrollIntoView = (containerNode, keypadNode) => {
   // TODO(charlie): There's no need for us to be reading the keypad bounds
   // here, since they're pre-determined by logic in the store. We should
@@ -1464,7 +1455,7 @@ const scrollIntoView = (containerNode, keypadNode) => {
   const containerTopPx = containerBounds.top;
 
   // Get the element that scrolls the document.
-  const scrollNode = bodyOrHtml();
+  const scrollNode = document.scrollingElement;
   const desiredMarginPx = 16;
   if (keypadNode) {
     // NOTE(charlie): We can't use the bounding rect of the keypad,
@@ -1483,7 +1474,9 @@ const scrollIntoView = (containerNode, keypadNode) => {
       // the bottom of the input is just above the top of the keypad,
       // taking care not to scroll the input out of view.
       const scrollOffset = Math.min(containerBottomPx - keypadTopPx + desiredMarginPx, containerTopPx);
-      scrollNode.scrollTop += scrollOffset;
+      if (scrollNode) {
+        scrollNode.scrollTop += scrollOffset;
+      }
       return;
     }
   }
@@ -1491,7 +1484,7 @@ const scrollIntoView = (containerNode, keypadNode) => {
   // Alternatively, if the input is out of the viewport or nearly out
   // of the viewport, scroll it into view. We can do this regardless
   // of whether the keypad has been provided.
-  if (containerTopPx < desiredMarginPx) {
+  if (scrollNode && containerTopPx < desiredMarginPx) {
     scrollNode.scrollTop -= containerBounds.height + desiredMarginPx;
   }
 };
@@ -2199,323 +2192,11 @@ const inlineStyles$1 = {
 };
 
 /**
- * This file contains configuration settings for the buttons in the keypad.
+ * React PropTypes that may be shared between components.
  */
-const KeyConfigs = {
-  // Basic math keys.
-  [Keys.PLUS]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a plus sign.
-    ariaLabel: i18n__namespace._("Plus")
-  },
-  [Keys.MINUS]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a minus sign.
-    ariaLabel: i18n__namespace._("Minus")
-  },
-  [Keys.NEGATIVE]: {
-    type: KeyTypes.VALUE,
-    // I18N: A label for a minus sign.
-    ariaLabel: i18n__namespace._("Negative")
-  },
-  [Keys.TIMES]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a multiplication sign (represented with an 'x').
-    ariaLabel: i18n__namespace._("Multiply")
-  },
-  [Keys.DIVIDE]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a division sign.
-    ariaLabel: i18n__namespace._("Divide")
-  },
-  [Keys.DECIMAL]: {
-    type: KeyTypes.VALUE,
-    // I18N: A label for a decimal symbol.
-    ariaLabel: i18n__namespace._("Decimal"),
-    icon: decimalSeparator === DecimalSeparators.COMMA ? {
-      // TODO(charlie): Get an SVG icon for the comma, or verify with
-      // design that the text-rendered version is acceptable.
-      type: IconTypes.TEXT,
-      data: ","
-    } : {
-      type: IconTypes.SVG,
-      data: Keys.PERIOD
-    }
-  },
-  [Keys.PERCENT]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a percent sign.
-    ariaLabel: i18n__namespace._("Percent")
-  },
-  [Keys.CDOT]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a multiplication sign (represented as a dot).
-    ariaLabel: i18n__namespace._("Multiply")
-  },
-  [Keys.EQUAL]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Equals sign")
-  },
-  [Keys.NEQ]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Not-equals sign")
-  },
-  [Keys.GT]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a 'greater than' sign (represented as '>').
-    ariaLabel: i18n__namespace._("Greater than sign")
-  },
-  [Keys.LT]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a 'less than' sign (represented as '<').
-    ariaLabel: i18n__namespace._("Less than sign")
-  },
-  [Keys.GEQ]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Greater than or equal to sign")
-  },
-  [Keys.LEQ]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Less than or equal to sign")
-  },
-  // mobile native
-  [Keys.FRAC_INCLUSIVE]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that creates a new fraction and puts the
-    // current expression in the numerator of that fraction.
-    ariaLabel: i18n__namespace._("Fraction, with current expression in numerator")
-  },
-  // mobile native
-  [Keys.FRAC_EXCLUSIVE]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that creates a new fraction next to the
-    // cursor.
-    ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
-  },
-  // mobile web
-  [Keys.FRAC]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that creates a new fraction next to the
-    // cursor.
-    ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
-  },
-  [Keys.EXP]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that will allow the user to input a custom
-    // exponent.
-    ariaLabel: i18n__namespace._("Custom exponent")
-  },
-  [Keys.EXP_2]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that will square (take to the second
-    // power) some math.
-    ariaLabel: i18n__namespace._("Square")
-  },
-  [Keys.EXP_3]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a button that will cube (take to the third power)
-    // some math.
-    ariaLabel: i18n__namespace._("Cube")
-  },
-  [Keys.SQRT]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Square root")
-  },
-  [Keys.CUBE_ROOT]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Cube root")
-  },
-  [Keys.RADICAL]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Radical with custom root")
-  },
-  [Keys.LEFT_PAREN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Left parenthesis")
-  },
-  [Keys.RIGHT_PAREN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Right parenthesis")
-  },
-  [Keys.LN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Natural logarithm")
-  },
-  [Keys.LOG]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Logarithm with base 10")
-  },
-  [Keys.LOG_N]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Logarithm with custom base")
-  },
-  [Keys.SIN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Sine")
-  },
-  [Keys.COS]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Cosine")
-  },
-  [Keys.TAN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n__namespace._("Tangent")
-  },
-  [Keys.PI]: {
-    type: KeyTypes.VALUE,
-    ariaLabel: i18n__namespace._("Pi"),
-    icon: {
-      type: IconTypes.MATH,
-      data: "\\pi"
-    }
-  },
-  [Keys.THETA]: {
-    type: KeyTypes.VALUE,
-    ariaLabel: i18n__namespace._("Theta"),
-    icon: {
-      type: IconTypes.MATH,
-      data: "\\theta"
-    }
-  },
-  [Keys.NOOP]: {
-    type: KeyTypes.EMPTY
-  },
-  // Input navigation keys.
-  [Keys.UP]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Up arrow")
-  },
-  [Keys.RIGHT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Right arrow")
-  },
-  [Keys.DOWN]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Down arrow")
-  },
-  [Keys.LEFT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Left arrow")
-  },
-  [Keys.JUMP_OUT_PARENTHESES]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of a set of parentheses")
-  },
-  [Keys.JUMP_OUT_EXPONENT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of an exponent")
-  },
-  [Keys.JUMP_OUT_BASE]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of a base")
-  },
-  [Keys.JUMP_INTO_NUMERATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right into the numerator of a fraction")
-  },
-  [Keys.JUMP_OUT_NUMERATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of the numerator and into the denominator")
-  },
-  [Keys.JUMP_OUT_DENOMINATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of the denominator of a fraction")
-  },
-  [Keys.BACKSPACE]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    // I18N: A label for a button that will delete some input.
-    ariaLabel: i18n__namespace._("Delete")
-  },
-  // Keypad navigation keys.
-  [Keys.DISMISS]: {
-    type: KeyTypes.KEYPAD_NAVIGATION,
-    // I18N: A label for a button that will dismiss/hide a keypad.
-    ariaLabel: i18n__namespace._("Dismiss")
-  }
-};
-
-// Add in any multi-function buttons. By default, these keys will mix in any
-// configuration settings from their default child key (i.e., the first key in
-// the `childKeyIds` array).
-// TODO(charlie): Make the multi-function button's long-press interaction
-// accessible.
-// NOTE(kevinb): This is only used in the mobile native app.
-KeyConfigs[Keys.FRAC_MULTI] = {
-  childKeyIds: [Keys.FRAC_INCLUSIVE, Keys.FRAC_EXCLUSIVE]
-};
-
-// TODO(charlie): Use the numeral color for the 'Many' key.
-KeyConfigs[Keys.MANY] = {
-  type: KeyTypes.MANY
-  // childKeyIds will be configured by the client.
-};
-
-// Add in every numeral.
-const NUMBERS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-for (const num of NUMBERS) {
-  // TODO(charlie): Consider removing the SVG icons that we have for the
-  // numeral keys. They can be rendered just as easily with text (though that
-  // would mean that we'd be using text beyond the variable key).
-  const textRepresentation = "".concat(num);
-  KeyConfigs["NUM_".concat(num)] = {
-    type: KeyTypes.VALUE,
-    ariaLabel: textRepresentation,
-    icon: {
-      type: IconTypes.TEXT,
-      data: textRepresentation
-    }
-  };
-}
-
-// Add in every variable.
-const LETTERS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
-for (const letter of LETTERS) {
-  const lowerCaseVariable = letter.toLowerCase();
-  const upperCaseVariable = letter.toUpperCase();
-  for (const textRepresentation of [lowerCaseVariable, upperCaseVariable]) {
-    KeyConfigs[textRepresentation] = {
-      type: KeyTypes.VALUE,
-      ariaLabel: textRepresentation,
-      icon: {
-        type: IconTypes.MATH,
-        data: textRepresentation
-      }
-    };
-  }
-}
-for (const key of Object.keys(KeyConfigs)) {
-  KeyConfigs[key] = {
-    id: key,
-    // Default to an SVG icon indexed by the key name.
-    icon: {
-      type: IconTypes.SVG,
-      data: key
-    },
-    ...KeyConfigs[key]
-  };
-}
-
-/**
- * React PropTypes that may be shared between components.
- */
-const iconPropType = PropTypes__default["default"].shape({
-  type: PropTypes__default["default"].oneOf(Object.keys(IconTypes)).isRequired,
-  data: PropTypes__default["default"].string.isRequired
-});
-const keyIdPropType = PropTypes__default["default"].oneOf(Object.keys(KeyConfigs));
-const keyConfigPropType = PropTypes__default["default"].shape({
-  ariaLabel: PropTypes__default["default"].string,
-  id: keyIdPropType.isRequired,
-  type: PropTypes__default["default"].oneOf(Object.keys(KeyTypes)).isRequired,
-  childKeyIds: PropTypes__default["default"].arrayOf(keyIdPropType),
-  icon: iconPropType.isRequired
-});
-const keypadConfigurationPropType = PropTypes__default["default"].shape({
-  keypadType: PropTypes__default["default"].oneOf(Object.keys(KeypadTypes)).isRequired,
-  extraKeys: PropTypes__default["default"].arrayOf(keyIdPropType)
-});
 
 // 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,
@@ -2524,29 +2205,6 @@ const keypadElementPropType = PropTypes__default["default"].shape({
   setKeyHandler: PropTypes__default["default"].func.isRequired,
   getDOMNode: PropTypes__default["default"].func.isRequired
 });
-const bordersPropType = PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(Object.keys(BorderDirections)));
-const boundingBoxPropType = PropTypes__default["default"].shape({
-  height: PropTypes__default["default"].number,
-  width: PropTypes__default["default"].number,
-  top: PropTypes__default["default"].number,
-  right: PropTypes__default["default"].number,
-  bottom: PropTypes__default["default"].number,
-  left: PropTypes__default["default"].number
-});
-const echoPropType = PropTypes__default["default"].shape({
-  animationId: PropTypes__default["default"].string.isRequired,
-  animationType: PropTypes__default["default"].oneOf(Object.keys(EchoAnimationTypes)).isRequired,
-  borders: bordersPropType,
-  id: keyIdPropType.isRequired,
-  initialBounds: boundingBoxPropType.isRequired
-});
-const cursorContextPropType = PropTypes__default["default"].oneOf(Object.keys(CursorContexts));
-const popoverPropType = PropTypes__default["default"].shape({
-  parentId: keyIdPropType.isRequired,
-  bounds: boundingBoxPropType.isRequired,
-  childKeyIds: PropTypes__default["default"].arrayOf(keyIdPropType).isRequired
-});
-PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].node), PropTypes__default["default"].node]);
 
 // naming convention: verb + noun
 // the noun should be one of the other properties in the object that's
@@ -2565,9 +2223,8 @@ const activateKeypad = () => {
 
 /**
  * Configure the keypad with the provided configuration parameters.
- *
- * See: `prop-types.js#keypadConfigurationPropType`.
  */
+
 const configureKeypad = configuration => {
   return {
     type: "ConfigureKeypad",
@@ -2589,6 +2246,7 @@ const removeEcho = animationId => {
 };
 
 // Input-related actions.
+
 const setKeyHandler = keyHandler => {
   return {
     type: "SetKeyHandler",
@@ -2602,135 +2260,33 @@ const setCursor = cursor => {
   };
 };
 
-/**
- * An algorithm for computing the appropriate layout parameters for the keypad,
- * including the size of the buttons and whether or not to render fullscreen,
- * taking into account a number of factors including the size of the screen, the
- * orientation of the screen, the presence of browser chrome, the presence of
- * other exercise-related chrome, the size of the input box, the parameters that
- * define the keypad (i.e., the number of rows, columns, and pages), and so
- * forth.
- *
- * The computations herein make some strong assumptions about the sizes of
- * various other elements and the situations under which they will be visible
- * (e.g., browser chrome). However, this is just a heuristic--it's not crucial
- * that our buttons are sized in a pixel-perfect manner, but rather, that we
- * make a balanced use of space.
- *
- * Note that one goal of the algorithm is to avoid resizing the keypad in the
- * face of dynamic browser chrome. In order to avoid that awkwardness, we tend
- * to be conservative in our measurements and make things smaller than they
- * might need to be.
- */
-const minButtonHeight = 48;
-const maxButtonSize = 64;
-const minSpaceAboveKeypad = 32;
-
-// These values are taken from an iPhone 5, but should be consistent with the
-// iPhone 4 as well. Regardless, these are meant to be representative of the
-// possible types of browser chrome that could appear in various context, rather
-// than pixel-perfect for every device.
-const safariNavBarWhenShrunk = 44;
-const safariNavBarWhenExpanded = 64;
-const safariToolbar = 44;
-
-// In mobile Safari, the browser chrome is completely hidden in landscape,
-// though a shrunken navbar and full-sized toolbar on scroll. In portrait, the
-// shrunken navbar is always visible, but expands on scroll (and the toolbar
-// appears as well).
-const maxLandscapeBrowserChrome = safariNavBarWhenShrunk + safariToolbar;
-const maxPortraitBrowserChrome = safariToolbar + (safariNavBarWhenExpanded - safariNavBarWhenShrunk);
-
-// This represents the 'worst case' aspect ratio that we care about (for
-// portrait layouts). It's taken from the iPhone 4. The height is computed by
-// taking the height of the device and removing the persistent, shrunken navbar.
-// (We don't need to account for the expanded navbar, since we include the
-// difference when reserving space above the keypad.)
-const worstCaseAspectRatio = 320 / (480 - safariNavBarWhenShrunk);
-const computeLayoutParameters = (_ref, _ref2, _ref3, _ref4) => {
-  let {
-    numColumns,
-    numMaxVisibleRows,
-    numPages
-  } = _ref;
-  let {
-    pageWidthPx,
-    pageHeightPx
-  } = _ref2;
-  let {
-    deviceOrientation,
-    deviceType
-  } = _ref3;
-  let {
-    navigationPadEnabled,
-    paginationEnabled,
-    toolbarEnabled
-  } = _ref4;
-  // First, compute some values that will be used in multiple computations.
-  const effectiveNumColumns = paginationEnabled ? numColumns : numColumns * numPages;
-
-  // Then, compute the button dimensions based on the provided parameters.
-  let buttonDimensions;
-  if (deviceType === DeviceTypes.PHONE) {
-    const isLandscape = deviceOrientation === DeviceOrientations.LANDSCAPE;
-
-    // In many cases, the browser chrome will already have been factored
-    // into `pageHeightPx`. But we have no way of knowing if that's
-    // the case or not. As such, we take a conservative approach and
-    // assume that the chrome is _never_ included in `pageHeightPx`.
-    const browserChromeHeight = isLandscape ? maxLandscapeBrowserChrome : maxPortraitBrowserChrome;
-
-    // Count up all the space that we need to reserve on the page.
-    // Namely, we need to account for:
-    //  1. Space between the keypad and the top of the page.
-    //  2. The presence of the exercise toolbar.
-    //  3. The presence of the view pager indicator.
-    //  4. Any browser chrome that may appear later.
-    const reservedSpace = minSpaceAboveKeypad + browserChromeHeight + (toolbarEnabled ? toolbarHeightPx : 0) + (paginationEnabled ? pageIndicatorHeightPx : 0);
-
-    // Next, compute the effective width and height. We can use the page
-    // width as the effective width. For the height, though, we take
-    // another conservative measure when in portrait by assuming that
-    // the device has the worst possible aspect ratio. In other words,
-    // we ignore the device height in portrait and assume the worst.
-    // This prevents the keypad from changing size when browser chrome
-    // appears and disappears.
-    const effectiveWidth = pageWidthPx;
-    const effectiveHeight = isLandscape ? pageHeightPx : pageWidthPx / worstCaseAspectRatio;
-    const maxKeypadHeight = effectiveHeight - reservedSpace;
-
-    // Finally, compute the button height and width. In computing the
-    // height, accommodate for the maximum number of rows that will ever be
-    // visible (since the toggling of popovers can increase the number of
-    // visible rows).
-    const buttonHeightPx = Math.max(Math.min(maxKeypadHeight / numMaxVisibleRows, maxButtonSize), minButtonHeight);
-    let buttonWidthPx;
-    if (numPages > 1) {
-      const effectiveNumColumns = paginationEnabled ? numColumns : numColumns * numPages;
-      buttonWidthPx = effectiveWidth / effectiveNumColumns;
-    } else {
-      buttonWidthPx = isLandscape ? maxButtonSize : effectiveWidth / numColumns;
-    }
-    buttonDimensions = {
-      widthPx: buttonWidthPx,
-      heightPx: buttonHeightPx
-    };
-  } else if (deviceType === DeviceTypes.TABLET) {
-    buttonDimensions = {
-      widthPx: maxButtonSize,
-      heightPx: maxButtonSize
-    };
-  } else {
-    throw new Error("Invalid device type: " + deviceType);
-  }
+// Gesture actions
 
-  // Finally, determine whether the keypad should be rendered in the
-  // fullscreen layout by determining its resultant width.
-  const numSeparators = (navigationPadEnabled ? 1 : 0) + (!paginationEnabled ? numPages - 1 : 0);
-  const keypadWidth = effectiveNumColumns * buttonDimensions.widthPx + (navigationPadEnabled ? navigationPadWidthPx : 0) + numSeparators * innerBorderWidthPx;
+const onSwipeChange = dx => {
   return {
-    buttonDimensions,
-    layoutMode: keypadWidth >= pageWidthPx ? LayoutModes.FULLSCREEN : LayoutModes.COMPACT
+    type: "OnSwipeChange",
+    dx
+  };
+};
+const onSwipeEnd = dx => {
+  return {
+    type: "OnSwipeEnd",
+    dx
+  };
+};
+const setActiveNodes = activeNodes => {
+  return {
+    type: "SetActiveNodes",
+    activeNodes
+  };
+};
+const pressKey = (key, borders, initialBounds, inPopover) => {
+  return {
+    type: "PressKey",
+    key,
+    borders,
+    initialBounds,
+    inPopover
   };
 };
 
@@ -2742,16 +2298,24 @@ const computeLayoutParameters = (_ref, _ref2, _ref3, _ref4) => {
  * multi-touch interactions, tracking gesture state on a per-touch basis.
  */
 
-const defaults = {
+// exported for tests
+
+const defaultOptions = {
   longPressWaitTimeMs: 50,
   swipeThresholdPx: 20,
   holdIntervalMs: 250
 };
 class GestureStateMachine {
   constructor(handlers, options, swipeDisabledNodeIds, multiPressableKeys) {
+    _defineProperty(this, "handlers", void 0);
+    _defineProperty(this, "options", void 0);
+    _defineProperty(this, "swipeDisabledNodeIds", void 0);
+    _defineProperty(this, "multiPressableKeys", void 0);
+    _defineProperty(this, "touchState", void 0);
+    _defineProperty(this, "swipeState", void 0);
     this.handlers = handlers;
     this.options = {
-      ...defaults,
+      ...defaultOptions,
       ...options
     };
     this.swipeDisabledNodeIds = swipeDisabledNodeIds || [];
@@ -3020,6 +2584,10 @@ class GestureStateMachine {
 
 class NodeManager {
   constructor() {
+    _defineProperty(this, "_nodesById", void 0);
+    _defineProperty(this, "_bordersById", void 0);
+    _defineProperty(this, "_orderedIds", void 0);
+    _defineProperty(this, "_cachedBoundingBoxesById", void 0);
     // A mapping from IDs to DOM nodes.
     this._nodesById = {};
 
@@ -3069,6 +2637,7 @@ class NodeManager {
     const seenIds = {};
     for (const id of allIds) {
       if (!seenIds[id]) {
+        // @ts-expect-error TS2345
         orderedIds.push(id);
         seenIds[id] = true;
       }
@@ -3137,6 +2706,9 @@ class NodeManager {
 
 class PopoverStateMachine {
   constructor(handlers) {
+    _defineProperty(this, "handlers", void 0);
+    _defineProperty(this, "popovers", void 0);
+    _defineProperty(this, "activePopover", void 0);
     this.handlers = handlers;
     this.activePopover = null;
     this.popovers = {};
@@ -3233,8 +2805,8 @@ class PopoverStateMachine {
       this.activePopover = id;
       this.handlers.onActiveNodesChanged({
         popover: {
-          parentId: this.activePopover,
-          childIds: this.popovers[this.activePopover]
+          parentId: id,
+          childIds: this.popovers[id]
         },
         focus: this._defaultNodeForPopover(this.activePopover)
       });
@@ -3296,16 +2868,16 @@ class PopoverStateMachine {
   }
 }
 
-/**
- * A high-level manager for our gesture system. In particular, this class
- * connects our various bits of logic for managing gestures and interactions,
- * and links them together.
- */
 const coordsForEvent = evt => {
   return [evt.changedTouches[0].clientX, evt.changedTouches[0].clientY];
 };
 class GestureManager {
   constructor(options, handlers, disabledSwipeKeys, multiPressableKeys) {
+    _defineProperty(this, "swipeEnabled", void 0);
+    _defineProperty(this, "trackEvents", void 0);
+    _defineProperty(this, "nodeManager", void 0);
+    _defineProperty(this, "popoverStateMachine", void 0);
+    _defineProperty(this, "gestureStateMachine", void 0);
     const {
       swipeEnabled
     } = options;
@@ -3488,51 +3060,430 @@ class GestureManager {
   }
 }
 
-class CornerDecal extends React__namespace.Component {
-  render() {
-    const {
-      style
-    } = this.props;
-    const containerStyle = [styles$d.container, ...(Array.isArray(style) ? style : [style])];
-    return /*#__PURE__*/React__namespace.createElement(View, {
-      style: containerStyle
-    }, /*#__PURE__*/React__namespace.createElement("svg", {
-      width: triangleSizePx,
-      height: triangleSizePx,
-      viewBox: "4 4 8 8"
-    }, /*#__PURE__*/React__namespace.createElement("path", {
-      fill: offBlack,
-      opacity: "0.3",
-      d: "M5.29289322,5.70710678 L10.2928932,10.7071068 C10.9228581,11.3370716 12,10.8909049 12,10 L12,5 C12,4.44771525 11.5522847,4 11,4 L6,4 C5.10909515,4 4.66292836,5.07714192 5.29289322,5.70710678 Z" // @Nolint
-    })));
-  }
-}
-_defineProperty(CornerDecal, "propTypes", {
-  style: PropTypes__default["default"].any
-});
-const triangleSizePx = 7;
-const styles$d = aphrodite.StyleSheet.create({
-  container: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    width: triangleSizePx,
-    height: triangleSizePx
-  }
-});
-
 /**
- * Common styles shared across components.
+ * This file contains configuration settings for the buttons in the keypad.
  */
-var Styles = aphrodite.StyleSheet.create({
-  row: {
-    flexDirection: "row"
+const KeyConfigs = {
+  // Basic math keys.
+  [Keys.PLUS]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a plus sign.
+    ariaLabel: i18n__namespace._("Plus")
   },
-  column: {
-    flexDirection: "column"
+  [Keys.MINUS]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a minus sign.
+    ariaLabel: i18n__namespace._("Minus")
   },
-  oneColumn: {
-    flexGrow: 1
+  [Keys.NEGATIVE]: {
+    type: KeyTypes.VALUE,
+    // I18N: A label for a minus sign.
+    ariaLabel: i18n__namespace._("Negative")
+  },
+  [Keys.TIMES]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a multiplication sign (represented with an 'x').
+    ariaLabel: i18n__namespace._("Multiply")
+  },
+  [Keys.DIVIDE]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a division sign.
+    ariaLabel: i18n__namespace._("Divide")
+  },
+  [Keys.DECIMAL]: {
+    type: KeyTypes.VALUE,
+    // I18N: A label for a decimal symbol.
+    ariaLabel: i18n__namespace._("Decimal"),
+    icon: decimalSeparator === DecimalSeparators.COMMA ? {
+      // TODO(charlie): Get an SVG icon for the comma, or verify with
+      // design that the text-rendered version is acceptable.
+      type: IconTypes.TEXT,
+      data: ","
+    } : {
+      type: IconTypes.SVG,
+      data: Keys.PERIOD
+    }
+  },
+  [Keys.PERCENT]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a percent sign.
+    ariaLabel: i18n__namespace._("Percent")
+  },
+  [Keys.CDOT]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a multiplication sign (represented as a dot).
+    ariaLabel: i18n__namespace._("Multiply")
+  },
+  [Keys.EQUAL]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Equals sign")
+  },
+  [Keys.NEQ]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Not-equals sign")
+  },
+  [Keys.GT]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a 'greater than' sign (represented as '>').
+    ariaLabel: i18n__namespace._("Greater than sign")
+  },
+  [Keys.LT]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a 'less than' sign (represented as '<').
+    ariaLabel: i18n__namespace._("Less than sign")
+  },
+  [Keys.GEQ]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Greater than or equal to sign")
+  },
+  [Keys.LEQ]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Less than or equal to sign")
+  },
+  // mobile native
+  [Keys.FRAC_INCLUSIVE]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that creates a new fraction and puts the
+    // current expression in the numerator of that fraction.
+    ariaLabel: i18n__namespace._("Fraction, with current expression in numerator")
+  },
+  // mobile native
+  [Keys.FRAC_EXCLUSIVE]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that creates a new fraction next to the
+    // cursor.
+    ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
+  },
+  // mobile web
+  [Keys.FRAC]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that creates a new fraction next to the
+    // cursor.
+    ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
+  },
+  [Keys.EXP]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that will allow the user to input a custom
+    // exponent.
+    ariaLabel: i18n__namespace._("Custom exponent")
+  },
+  [Keys.EXP_2]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that will square (take to the second
+    // power) some math.
+    ariaLabel: i18n__namespace._("Square")
+  },
+  [Keys.EXP_3]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a button that will cube (take to the third power)
+    // some math.
+    ariaLabel: i18n__namespace._("Cube")
+  },
+  [Keys.SQRT]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Square root")
+  },
+  [Keys.CUBE_ROOT]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Cube root")
+  },
+  [Keys.RADICAL]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Radical with custom root")
+  },
+  [Keys.LEFT_PAREN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Left parenthesis")
+  },
+  [Keys.RIGHT_PAREN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Right parenthesis")
+  },
+  [Keys.LN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Natural logarithm")
+  },
+  [Keys.LOG]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Logarithm with base 10")
+  },
+  [Keys.LOG_N]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Logarithm with custom base")
+  },
+  [Keys.SIN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Sine")
+  },
+  [Keys.COS]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Cosine")
+  },
+  [Keys.TAN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n__namespace._("Tangent")
+  },
+  [Keys.PI]: {
+    type: KeyTypes.VALUE,
+    ariaLabel: i18n__namespace._("Pi"),
+    icon: {
+      type: IconTypes.MATH,
+      data: "\\pi"
+    }
+  },
+  [Keys.THETA]: {
+    type: KeyTypes.VALUE,
+    ariaLabel: i18n__namespace._("Theta"),
+    icon: {
+      type: IconTypes.MATH,
+      data: "\\theta"
+    }
+  },
+  [Keys.NOOP]: {
+    type: KeyTypes.EMPTY
+  },
+  // Input navigation keys.
+  [Keys.UP]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Up arrow")
+  },
+  [Keys.RIGHT]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Right arrow")
+  },
+  [Keys.DOWN]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Down arrow")
+  },
+  [Keys.LEFT]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Left arrow")
+  },
+  [Keys.JUMP_OUT_PARENTHESES]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right out of a set of parentheses")
+  },
+  [Keys.JUMP_OUT_EXPONENT]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right out of an exponent")
+  },
+  [Keys.JUMP_OUT_BASE]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right out of a base")
+  },
+  [Keys.JUMP_INTO_NUMERATOR]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right into the numerator of a fraction")
+  },
+  [Keys.JUMP_OUT_NUMERATOR]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right out of the numerator and into the denominator")
+  },
+  [Keys.JUMP_OUT_DENOMINATOR]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n__namespace._("Navigate right out of the denominator of a fraction")
+  },
+  [Keys.BACKSPACE]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    // I18N: A label for a button that will delete some input.
+    ariaLabel: i18n__namespace._("Delete")
+  },
+  // Keypad navigation keys.
+  [Keys.DISMISS]: {
+    type: KeyTypes.KEYPAD_NAVIGATION,
+    // I18N: A label for a button that will dismiss/hide a keypad.
+    ariaLabel: i18n__namespace._("Dismiss")
+  }
+};
+
+// Add in any multi-function buttons. By default, these keys will mix in any
+// configuration settings from their default child key (i.e., the first key in
+// the `childKeyIds` array).
+// TODO(charlie): Make the multi-function button's long-press interaction
+// accessible.
+// NOTE(kevinb): This is only used in the mobile native app.
+KeyConfigs[Keys.FRAC_MULTI] = {
+  childKeyIds: [Keys.FRAC_INCLUSIVE, Keys.FRAC_EXCLUSIVE]
+};
+
+// TODO(charlie): Use the numeral color for the 'Many' key.
+KeyConfigs[Keys.MANY] = {
+  type: KeyTypes.MANY
+  // childKeyIds will be configured by the client.
+};
+
+// Add in every numeral.
+const NUMBERS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+for (const num of NUMBERS) {
+  // TODO(charlie): Consider removing the SVG icons that we have for the
+  // numeral keys. They can be rendered just as easily with text (though that
+  // would mean that we'd be using text beyond the variable key).
+  const textRepresentation = "".concat(num);
+  KeyConfigs["NUM_".concat(num)] = {
+    type: KeyTypes.VALUE,
+    ariaLabel: textRepresentation,
+    icon: {
+      type: IconTypes.TEXT,
+      data: textRepresentation
+    }
+  };
+}
+
+// Add in every variable.
+const LETTERS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
+for (const letter of LETTERS) {
+  const lowerCaseVariable = letter.toLowerCase();
+  const upperCaseVariable = letter.toUpperCase();
+  for (const textRepresentation of [lowerCaseVariable, upperCaseVariable]) {
+    KeyConfigs[textRepresentation] = {
+      type: KeyTypes.VALUE,
+      ariaLabel: textRepresentation,
+      icon: {
+        type: IconTypes.MATH,
+        data: textRepresentation
+      }
+    };
+  }
+}
+for (const key of Object.keys(KeyConfigs)) {
+  KeyConfigs[key] = {
+    id: key,
+    // Default to an SVG icon indexed by the key name.
+    icon: {
+      type: IconTypes.SVG,
+      data: key
+    },
+    ...KeyConfigs[key]
+  };
+}
+
+// Used to generate unique animation IDs for the echo animations. The actual
+// values are irrelevant as long as they are unique.
+let _lastAnimationId = 0;
+const initialEchoState = {
+  echoes: []
+};
+const echoReducer = function () {
+  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialEchoState;
+  let action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case "PressKey":
+      const keyConfig = KeyConfigs[action.key];
+
+      // Add in the echo animation if the user performs a math
+      // operation.
+      if (keyConfig.type === KeyTypes.VALUE || keyConfig.type === KeyTypes.OPERATOR) {
+        return {
+          ...state,
+          echoes: [...state.echoes, {
+            animationId: "" + _lastAnimationId++,
+            animationType: action.inPopover ? EchoAnimationTypes.LONG_FADE_ONLY : EchoAnimationTypes.FADE_ONLY,
+            borders: action.borders,
+            id: keyConfig.id,
+            initialBounds: action.initialBounds
+          }]
+        };
+      }
+      return state;
+    case "RemoveEcho":
+      const remainingEchoes = state.echoes.filter(echo => {
+        return echo.animationId !== action.animationId;
+      });
+      return {
+        ...state,
+        echoes: remainingEchoes
+      };
+    default:
+      return state;
+  }
+};
+
+const initialInputState = {
+  keyHandler: null,
+  cursor: {
+    context: NONE
+  }
+};
+const inputReducer = function () {
+  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialInputState;
+  let action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case "SetKeyHandler":
+      return {
+        ...state,
+        keyHandler: action.keyHandler
+      };
+    case "PressKey":
+      const keyConfig = KeyConfigs[action.key];
+      if (keyConfig.type !== KeyTypes.KEYPAD_NAVIGATION) {
+        var _state$keyHandler;
+        // This is probably an anti-pattern but it works for the
+        // case where we don't actually control the state but we
+        // still want to communicate with the other object
+        return {
+          ...state,
+          cursor: (_state$keyHandler = state.keyHandler) === null || _state$keyHandler === void 0 ? void 0 : _state$keyHandler.call(state, keyConfig.id)
+        };
+      }
+
+      // TODO(kevinb) get state from MathQuill and store it?
+      return state;
+    case "SetCursor":
+      return {
+        ...state,
+        cursor: action.cursor
+      };
+    default:
+      return state;
+  }
+};
+
+/**
+ * A small triangular decal to sit in the corner of a parent component.
+ */
+class CornerDecal extends React__namespace.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    const containerStyle = [styles$d.container, ...(Array.isArray(style) ? style : [style])];
+    return /*#__PURE__*/React__namespace.createElement(View, {
+      style: containerStyle
+    }, /*#__PURE__*/React__namespace.createElement("svg", {
+      width: triangleSizePx,
+      height: triangleSizePx,
+      viewBox: "4 4 8 8"
+    }, /*#__PURE__*/React__namespace.createElement("path", {
+      fill: offBlack,
+      opacity: "0.3",
+      d: "M5.29289322,5.70710678 L10.2928932,10.7071068 C10.9228581,11.3370716 12,10.8909049 12,10 L12,5 C12,4.44771525 11.5522847,4 11,4 L6,4 C5.10909515,4 4.66292836,5.07714192 5.29289322,5.70710678 Z" // @Nolint
+    })));
+  }
+}
+
+const triangleSizePx = 7;
+const styles$d = aphrodite.StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    width: triangleSizePx,
+    height: triangleSizePx
+  }
+});
+
+/**
+ * Common styles shared across components.
+ */
+var Styles = aphrodite.StyleSheet.create({
+  row: {
+    flexDirection: "row"
+  },
+  column: {
+    flexDirection: "column"
+  },
+  oneColumn: {
+    flexGrow: 1
   },
   fullWidth: {
     width: "100%"
@@ -3587,10 +3538,6 @@ class MathIcon extends React__namespace.Component {
     });
   }
 }
-_defineProperty(MathIcon, "propTypes", {
-  math: PropTypes__default["default"].string.isRequired,
-  style: PropTypes__default["default"].any
-});
 const styles$c = aphrodite.StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
@@ -4743,6 +4690,9 @@ var Iconography = /*#__PURE__*/Object.freeze({
   JUMP_OUT_DENOMINATOR: JumpOutDenominator
 });
 
+/**
+ * A component that renders a single SVG icon.
+ */
 class SvgIcon extends React__namespace.Component {
   render() {
     const {
@@ -4757,11 +4707,10 @@ class SvgIcon extends React__namespace.Component {
     });
   }
 }
-_defineProperty(SvgIcon, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired,
-  name: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * A component that renders a text-based icon.
+ */
 const {
   row: row$6,
   centered: centered$3
@@ -4778,10 +4727,6 @@ class TextIcon extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(Text, null, character));
   }
 }
-_defineProperty(TextIcon, "propTypes", {
-  character: PropTypes__default["default"].string.isRequired,
-  style: PropTypes__default["default"].any
-});
 const styles$b = aphrodite.StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
@@ -4793,6 +4738,9 @@ const styles$b = aphrodite.StyleSheet.create({
   }
 });
 
+/**
+ * A component that renders an icon for a symbol with the given name.
+ */
 const focusedColor = "#FFF";
 const unfocusedColor = offBlack;
 class Icon extends React__namespace.PureComponent {
@@ -4823,18 +4771,11 @@ class Icon extends React__namespace.PureComponent {
           character: icon.data,
           style: styleWithFocus
         });
+      default:
+        throw new Error("No icon or symbol provided");
     }
-    throw new Error("No icon or symbol provided");
   }
 }
-_defineProperty(Icon, "propTypes", {
-  focused: PropTypes__default["default"].bool,
-  icon: iconPropType.isRequired,
-  // An Aphrodite style object, or an array of Aphrodite style objects.
-  // Note that custom styles will only be applied to text and math icons
-  // (and not SVG icons).
-  style: PropTypes__default["default"].any
-});
 const styles$a = aphrodite.StyleSheet.create({
   unfocused: {
     color: unfocusedColor
@@ -4844,6 +4785,10 @@ const styles$a = aphrodite.StyleSheet.create({
   }
 });
 
+/**
+ * A grid of symbols, rendered as text and positioned based on the number of
+ * symbols provided. Up to four symbols will be shown.
+ */
 const {
   row: row$5,
   column: column$3,
@@ -4925,13 +4870,9 @@ class MultiSymbolGrid extends React__namespace.Component {
         }))));
       }
     }
-    throw new Error("Invalid number of icons:", icons.length);
+    throw new Error("Invalid number of icons: ".concat(icons.length));
   }
 }
-_defineProperty(MultiSymbolGrid, "propTypes", {
-  focused: PropTypes__default["default"].bool,
-  icons: PropTypes__default["default"].arrayOf(iconPropType).isRequired
-});
 const verticalInsetPx = 2;
 const horizontalInsetPx = 4;
 const styles$9 = aphrodite.StyleSheet.create({
@@ -4975,6 +4916,7 @@ const styles$9 = aphrodite.StyleSheet.create({
 class KeypadButton extends React__namespace.PureComponent {
   constructor() {
     super(...arguments);
+    _defineProperty(this, "buttonSizeStyle", void 0);
     _defineProperty(this, "_preInjectStyles", () => {
       // HACK(charlie): Pre-inject all of the possible styles for the button.
       // This avoids a flickering effect in the echo animation whereby the
@@ -5023,10 +4965,12 @@ class KeypadButton extends React__namespace.PureComponent {
           break;
       }
       const borderStyle = [];
-      if (borders.indexOf(BorderDirections.LEFT) !== -1) {
+      if (borders.includes(BorderDirections.LEFT)) {
+        // @ts-expect-error TS2345
         borderStyle.push(styles$8.leftBorder);
       }
-      if (borders.indexOf(BorderDirections.BOTTOM) !== -1) {
+      if (borders.includes(BorderDirections.BOTTOM)) {
+        // @ts-expect-error TS2345
         borderStyle.push(styles$8.bottomBorder);
       }
       return [styles$8.buttonBase, backgroundStyle, ...borderStyle, type === KeyTypes.ECHO && styles$8.echo, this.buttonSizeStyle,
@@ -5074,7 +5018,7 @@ class KeypadButton extends React__namespace.PureComponent {
     const renderFocused = !disabled && focused || popoverEnabled || type === KeyTypes.ECHO;
     const buttonStyle = this._getButtonStyle(type, borders, style);
     const focusStyle = this._getFocusStyle(type);
-    const iconWrapperStyle = [styles$8.iconWrapper, disabled && styles$8.disabled];
+    const iconWrapperStyle = [styles$8.iconWrapper, disabled ? styles$8.disabled : undefined];
     const eventHandlers = {
       onTouchCancel,
       onTouchEnd,
@@ -5125,32 +5069,6 @@ class KeypadButton extends React__namespace.PureComponent {
     }
   }
 }
-_defineProperty(KeypadButton, "propTypes", {
-  ariaLabel: PropTypes__default["default"].string,
-  // The borders to display on the button. Typically, this should be set
-  // using one of the preset `BorderStyles` options.
-  borders: bordersPropType,
-  // Any additional keys that can be accessed by long-pressing on the
-  // button.
-  childKeys: PropTypes__default["default"].arrayOf(keyConfigPropType),
-  // Whether the button should be rendered in a 'disabled' state, i.e.,
-  // without any touch feedback.
-  disabled: PropTypes__default["default"].bool,
-  focused: PropTypes__default["default"].bool,
-  heightPx: PropTypes__default["default"].number.isRequired,
-  icon: iconPropType,
-  onTouchCancel: PropTypes__default["default"].func,
-  onTouchEnd: PropTypes__default["default"].func,
-  onTouchMove: PropTypes__default["default"].func,
-  onTouchStart: PropTypes__default["default"].func,
-  popoverEnabled: PropTypes__default["default"].bool,
-  style: PropTypes__default["default"].any,
-  type: PropTypes__default["default"].oneOf(Object.keys(KeyTypes)).isRequired,
-  // NOTE(charlie): We may want to make this optional for phone layouts
-  // (and rely on Flexbox instead), since it might not be pixel perfect
-  // with borders and such.
-  widthPx: PropTypes__default["default"].number.isRequired
-});
 _defineProperty(KeypadButton, "defaultProps", {
   borders: BorderStyles.ALL,
   childKeys: [],
@@ -5162,8 +5080,6 @@ const focusInsetPx = 4;
 const focusBoxZIndex = 0;
 const styles$8 = aphrodite.StyleSheet.create({
   buttonBase: {
-    // HACK(benkomalo): support old style flex box in Android browsers
-    "-webkit-box-flex": "1",
     flex: 1,
     cursor: "pointer",
     // Make the text unselectable
@@ -5239,7 +5155,10 @@ const styleForButtonDimensions = (heightPx, widthPx) => {
   }).buttonSize;
 };
 const mapStateToProps$7 = state => {
-  return state.layout.buttonDimensions;
+  return {
+    heightPx: state.layout.buttonDimensions.heightPx,
+    widthPx: state.layout.buttonDimensions.widthPx
+  };
 };
 var KeypadButton$1 = reactRedux.connect(mapStateToProps$7, null, null, {
   forwardRef: true
@@ -5265,9 +5184,6 @@ class EmptyKeypadButton extends React__namespace.Component {
     }, KeyConfigs.NOOP, rest));
   }
 }
-_defineProperty(EmptyKeypadButton, "propTypes", {
-  gestureManager: PropTypes__default["default"].instanceOf(GestureManager)
-});
 const mapStateToProps$6 = state => {
   const {
     gestures
@@ -5324,17 +5240,6 @@ class TouchableKeypadButton extends React__namespace.Component {
     }, eventHandlers, rest));
   }
 }
-_defineProperty(TouchableKeypadButton, "propTypes", {
-  borders: bordersPropType,
-  childKeyIds: PropTypes__default["default"].arrayOf(keyIdPropType),
-  disabled: PropTypes__default["default"].bool,
-  focused: PropTypes__default["default"].bool,
-  gestureManager: PropTypes__default["default"].instanceOf(GestureManager),
-  id: keyIdPropType.isRequired,
-  popoverEnabled: PropTypes__default["default"].bool,
-  style: PropTypes__default["default"].any,
-  type: PropTypes__default["default"].oneOf(Object.keys(KeyTypes)).isRequired
-});
 const extractProps = keyConfig => {
   const {
     ariaLabel,
@@ -5400,7 +5305,7 @@ class ManyKeypadButton extends React__namespace.Component {
     // one, render a standard button. Otherwise, capture them all in a
     // single button.
     if (keys.length === 0) {
-      return /*#__PURE__*/React__namespace.createElement(EmptyKeypadButton$1, rest);
+      return /*#__PURE__*/React__namespace.createElement(EmptyKeypadButton$1, null);
     } else if (keys.length === 1) {
       const keyConfig = KeyConfigs[keys[0]];
       return /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, _extends({
@@ -5418,8 +5323,8 @@ class ManyKeypadButton extends React__namespace.Component {
     }
   }
 }
-_defineProperty(ManyKeypadButton, "propTypes", {
-  keys: PropTypes__default["default"].arrayOf(keyIdPropType).isRequired
+_defineProperty(ManyKeypadButton, "defaultProps", {
+  keys: []
 });
 
 /**
@@ -5468,20 +5373,12 @@ class Echo extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: containerStyle
     }, /*#__PURE__*/React__namespace.createElement(KeypadButton$1, {
-      name: id,
       icon: icon,
       type: KeyTypes.ECHO,
       borders: borders
     }));
   }
 }
-_defineProperty(Echo, "propTypes", {
-  animationDurationMs: PropTypes__default["default"].number.isRequired,
-  borders: bordersPropType,
-  id: keyIdPropType.isRequired,
-  initialBounds: boundingBoxPropType.isRequired,
-  onAnimationFinish: PropTypes__default["default"].func.isRequired
-});
 class EchoManager extends React__namespace.Component {
   constructor() {
     super(...arguments);
@@ -5504,7 +5401,7 @@ class EchoManager extends React__namespace.Component {
           animationTransitionName = "echo-long-fade-only";
           break;
         default:
-          throw new Error("Invalid echo animation type:", animationType);
+          throw new Error("Invalid echo animation type: ".concat(animationType));
       }
       return {
         animationDurationMs,
@@ -5549,17 +5446,16 @@ class EchoManager extends React__namespace.Component {
           key: animationId
         }, /*#__PURE__*/React__namespace.createElement(Echo, _extends({
           animationDurationMs: animationDurationMs,
-          onAnimationFinish: () => onAnimationFinish(animationId)
+          onAnimationFinish: () => onAnimationFinish === null || onAnimationFinish === void 0 ? void 0 : onAnimationFinish(animationId)
         }, echo)));
       }));
     }));
   }
 }
-_defineProperty(EchoManager, "propTypes", {
-  echoes: PropTypes__default["default"].arrayOf(echoPropType),
-  onAnimationFinish: PropTypes__default["default"].func.isRequired
-});
 
+/**
+ * A popover that renders a set of keys floating above the page.
+ */
 class MultiSymbolPopover extends React__namespace.Component {
   render() {
     const {
@@ -5579,9 +5475,6 @@ class MultiSymbolPopover extends React__namespace.Component {
     }));
   }
 }
-_defineProperty(MultiSymbolPopover, "propTypes", {
-  keys: PropTypes__default["default"].arrayOf(keyConfigPropType)
-});
 const styles$6 = aphrodite.StyleSheet.create({
   container: {
     flexDirection: "column-reverse",
@@ -5598,11 +5491,14 @@ const styles$6 = aphrodite.StyleSheet.create({
   }
 });
 
+/**
+ * A component that renders and animates the popovers that appear over the
+ * multi-functional keys.
+ */
 // NOTE(charlie): These must be kept in sync with the transition durations and
 // classnames specified in popover.less.
 const animationTransitionName = "popover";
 const animationDurationMs = 200;
-
 // A container component used to position a popover absolutely at a specific
 // position.
 class PopoverContainer extends React__namespace.Component {
@@ -5622,10 +5518,6 @@ class PopoverContainer extends React__namespace.Component {
     }));
   }
 }
-_defineProperty(PopoverContainer, "propTypes", {
-  bounds: boundingBoxPropType.isRequired,
-  childKeys: PropTypes__default["default"].arrayOf(keyConfigPropType).isRequired
-});
 class PopoverManager extends React__namespace.Component {
   render() {
     const {
@@ -5646,14 +5538,14 @@ class PopoverManager extends React__namespace.Component {
     })) : null;
   }
 }
-_defineProperty(PopoverManager, "propTypes", {
-  popover: popoverPropType
-});
 
 // eslint-disable-next-line react/no-unsafe
 class Keypad extends React__namespace.Component {
   constructor() {
     super(...arguments);
+    _defineProperty(this, "_isMounted", void 0);
+    _defineProperty(this, "_resizeTimeout", void 0);
+    _defineProperty(this, "_container", void 0);
     _defineProperty(this, "_computeContainer", () => {
       const domNode = ReactDOM__default["default"].findDOMNode(this);
       this._container = domNode.getBoundingClientRect();
@@ -5675,7 +5567,7 @@ class Keypad extends React__namespace.Component {
       // Throttle resize events -- taken from:
       //    https://developer.mozilla.org/en-US/docs/Web/Events/resize
       if (this._resizeTimeout == null) {
-        this._resizeTimeout = setTimeout(() => {
+        this._resizeTimeout = window.setTimeout(() => {
           this._resizeTimeout = null;
           if (this._isMounted) {
             this._updateSizeAndPosition();
@@ -5717,9 +5609,13 @@ class Keypad extends React__namespace.Component {
       return {
         ...rest,
         initialBounds: {
+          // @ts-expect-error TS2533
           top: initialBounds.top - this._container.top,
+          // @ts-expect-error TS2533
           right: initialBounds.right - this._container.left,
+          // @ts-expect-error TS2533
           bottom: initialBounds.bottom - this._container.top,
+          // @ts-expect-error TS2533
           left: initialBounds.left - this._container.left,
           width: initialBounds.width,
           height: initialBounds.height
@@ -5733,7 +5629,12 @@ class Keypad extends React__namespace.Component {
     const relativePopover = popover && {
       ...popover,
       bounds: {
-        bottom: this._container.height - (popover.bounds.bottom - this._container.top),
+        bottom:
+        // @ts-expect-error TS2533
+        this._container.height - (
+        // @ts-expect-error TS2533
+        popover.bounds.bottom - this._container.top),
+        // @ts-expect-error TS2533
         left: popover.bounds.left - this._container.left,
         width: popover.bounds.width
       }
@@ -5748,21 +5649,9 @@ class Keypad extends React__namespace.Component {
     }));
   }
 }
-_defineProperty(Keypad, "propTypes", {
-  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].node), PropTypes__default["default"].node]),
-  removeEcho: PropTypes__default["default"].func.isRequired,
-  style: PropTypes__default["default"].any,
-  // The props below are injected by redux
-
-  // Whether the keypad is active, i.e., whether it should be rendered as
-  // visible or invisible.
-  active: PropTypes__default["default"].bool,
-  echoes: PropTypes__default["default"].arrayOf(echoPropType).isRequired,
-  popover: popoverPropType
-});
 const mapStateToProps$4 = state => {
   return {
-    ...state.echoes,
+    echoes: state.echoes.echoes,
     active: state.keypad.active,
     popover: state.gestures.popover
   };
@@ -6000,12 +5889,6 @@ class TwoPageKeypad extends React__namespace.Component {
     }
   }
 }
-_defineProperty(TwoPageKeypad, "propTypes", {
-  currentPage: PropTypes__default["default"].oneOf([0, 1]).isRequired,
-  leftPage: PropTypes__default["default"].node.isRequired,
-  paginationEnabled: PropTypes__default["default"].bool.isRequired,
-  rightPage: PropTypes__default["default"].node.isRequired
-});
 const styles$3 = aphrodite.StyleSheet.create({
   keypad: {
     // Set the background to light grey, so that when the user drags the
@@ -6029,6 +5912,9 @@ var TwoPageKeypad$1 = reactRedux.connect(mapStateToProps$3, null, null, {
   forwardRef: true
 })(TwoPageKeypad);
 
+/**
+ * A keypad that includes all of the expression symbols.
+ */
 const {
   row: row$3,
   column: column$1,
@@ -6037,11 +5923,16 @@ const {
   roundedTopLeft: roundedTopLeft$2,
   roundedTopRight: roundedTopRight$1
 } = Styles;
+const expressionKeypadLayout = {
+  rows: 4,
+  columns: 5,
+  numPages: 2,
+  // Since we include a two-key popover in the top-right, when the popover
+  // is visible, the keypad will expand to fill the equivalent of five
+  // rows vertically.
+  maxVisibleRows: 4
+};
 class ExpressionKeypad extends React__namespace.Component {
-  // Though we include an infinite-key popover in the bottom-left, it's
-  // assumed that we don't need to accommodate cases in which that key
-  // contains more than four children.
-
   render() {
     const {
       currentPage,
@@ -6095,8 +5986,7 @@ class ExpressionKeypad extends React__namespace.Component {
       keyConfig: KeyConfigs.NUM_1,
       borders: BorderStyles.BOTTOM
     }), /*#__PURE__*/React__namespace.createElement(ManyKeypadButton, {
-      keys: extraKeys,
-      borders: BorderStyles.NONE
+      keys: extraKeys
     })), /*#__PURE__*/React__namespace.createElement(View, {
       style: [column$1, oneColumn]
     }, /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
@@ -6234,18 +6124,6 @@ class ExpressionKeypad extends React__namespace.Component {
     });
   }
 }
-_defineProperty(ExpressionKeypad, "propTypes", {
-  currentPage: PropTypes__default["default"].number.isRequired,
-  cursorContext: cursorContextPropType.isRequired,
-  dynamicJumpOut: PropTypes__default["default"].bool,
-  extraKeys: PropTypes__default["default"].arrayOf(keyIdPropType),
-  roundTopLeft: PropTypes__default["default"].bool,
-  roundTopRight: PropTypes__default["default"].bool
-});
-_defineProperty(ExpressionKeypad, "rows", 4);
-_defineProperty(ExpressionKeypad, "columns", 5);
-_defineProperty(ExpressionKeypad, "maxVisibleRows", 4);
-_defineProperty(ExpressionKeypad, "numPages", 2);
 const styles$2 = 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
@@ -6260,9 +6138,10 @@ const styles$2 = aphrodite.StyleSheet.create({
   }
 });
 const mapStateToProps$2 = state => {
+  var _state$input$cursor;
   return {
     currentPage: state.pager.currentPage,
-    cursorContext: state.input.cursor.context,
+    cursorContext: (_state$input$cursor = state.input.cursor) === null || _state$input$cursor === void 0 ? void 0 : _state$input$cursor.context,
     dynamicJumpOut: !state.layout.navigationPadEnabled
   };
 };
@@ -6270,16 +6149,25 @@ var ExpressionKeypad$1 = reactRedux.connect(mapStateToProps$2, null, null, {
   forwardRef: true
 })(ExpressionKeypad);
 
+/**
+ * A keypad that includes the digits, as well as the symbols required to deal
+ * with fractions, decimals, and percents.
+ */
 const {
   row: row$2,
   roundedTopLeft: roundedTopLeft$1,
   roundedTopRight
 } = Styles;
-class FractionKeypad extends React__namespace.Component {
+const fractionKeypadLayout = {
+  rows: 4,
+  columns: 4,
+  numPages: 1,
   // Since we include a two-key popover in the top-right, when the popover
   // is visible, the keypad will expand to fill the equivalent of five
   // rows vertically.
-
+  maxVisibleRows: 5
+};
+class FractionKeypad extends React__namespace.Component {
   render() {
     const {
       cursorContext,
@@ -6382,35 +6270,306 @@ class FractionKeypad extends React__namespace.Component {
       borders: BorderStyles.LEFT
     })));
   }
-}
-_defineProperty(FractionKeypad, "propTypes", {
-  cursorContext: cursorContextPropType.isRequired,
-  dynamicJumpOut: PropTypes__default["default"].bool,
-  roundTopLeft: PropTypes__default["default"].bool,
-  roundTopRight: PropTypes__default["default"].bool
-});
-_defineProperty(FractionKeypad, "rows", 4);
-_defineProperty(FractionKeypad, "columns", 4);
-_defineProperty(FractionKeypad, "maxVisibleRows", 5);
-_defineProperty(FractionKeypad, "numPages", 1);
-const mapStateToProps$1 = state => {
+}
+const mapStateToProps$1 = state => {
+  var _state$input$cursor;
+  return {
+    cursorContext: (_state$input$cursor = state.input.cursor) === null || _state$input$cursor === void 0 ? void 0 : _state$input$cursor.context,
+    dynamicJumpOut: !state.layout.navigationPadEnabled
+  };
+};
+var FractionKeypad$1 = reactRedux.connect(mapStateToProps$1, null, null, {
+  forwardRef: true
+})(FractionKeypad);
+
+const defaultKeypadType = KeypadTypes.EXPRESSION;
+const keypadForType = {
+  [KeypadTypes.FRACTION]: fractionKeypadLayout,
+  [KeypadTypes.EXPRESSION]: expressionKeypadLayout
+};
+
+const initialKeypadState = {
+  extraKeys: ["x", "y", Keys.THETA, Keys.PI],
+  keypadType: defaultKeypadType,
+  active: false
+};
+const keypadReducer = function () {
+  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialKeypadState;
+  let action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case "DismissKeypad":
+      return {
+        ...state,
+        active: false
+      };
+    case "ActivateKeypad":
+      return {
+        ...state,
+        active: true
+      };
+    case "ConfigureKeypad":
+      return {
+        ...state,
+        // Default `extraKeys` to the empty array.
+        extraKeys: [],
+        ...action.configuration
+      };
+    case "PressKey":
+      const keyConfig = KeyConfigs[action.key];
+      // NOTE(charlie): Our keypad system operates by triggering key
+      // presses with key IDs in a dumb manner, such that the keys
+      // don't know what they can do--instead, the store is
+      // responsible for interpreting key presses and triggering the
+      // right actions when they occur. Hence, we figure off a
+      // dismissal here rather than dispatching a dismiss action in
+      // the first place.
+      if (keyConfig.id === Keys.DISMISS) {
+        return keypadReducer(state, {
+          type: "DismissKeypad"
+        });
+      }
+      return state;
+    default:
+      return state;
+  }
+};
+
+/**
+ * An algorithm for computing the appropriate layout parameters for the keypad,
+ * including the size of the buttons and whether or not to render fullscreen,
+ * taking into account a number of factors including the size of the screen, the
+ * orientation of the screen, the presence of browser chrome, the presence of
+ * other exercise-related chrome, the size of the input box, the parameters that
+ * define the keypad (i.e., the number of rows, columns, and pages), and so
+ * forth.
+ *
+ * The computations herein make some strong assumptions about the sizes of
+ * various other elements and the situations under which they will be visible
+ * (e.g., browser chrome). However, this is just a heuristic--it's not crucial
+ * that our buttons are sized in a pixel-perfect manner, but rather, that we
+ * make a balanced use of space.
+ *
+ * Note that one goal of the algorithm is to avoid resizing the keypad in the
+ * face of dynamic browser chrome. In order to avoid that awkwardness, we tend
+ * to be conservative in our measurements and make things smaller than they
+ * might need to be.
+ */
+const minButtonHeight = 48;
+const maxButtonSize = 64;
+const minSpaceAboveKeypad = 32;
+
+// These values are taken from an iPhone 5, but should be consistent with the
+// iPhone 4 as well. Regardless, these are meant to be representative of the
+// possible types of browser chrome that could appear in various context, rather
+// than pixel-perfect for every device.
+const safariNavBarWhenShrunk = 44;
+const safariNavBarWhenExpanded = 64;
+const safariToolbar = 44;
+
+// In mobile Safari, the browser chrome is completely hidden in landscape,
+// though a shrunken navbar and full-sized toolbar on scroll. In portrait, the
+// shrunken navbar is always visible, but expands on scroll (and the toolbar
+// appears as well).
+const maxLandscapeBrowserChrome = safariNavBarWhenShrunk + safariToolbar;
+const maxPortraitBrowserChrome = safariToolbar + (safariNavBarWhenExpanded - safariNavBarWhenShrunk);
+
+// This represents the 'worst case' aspect ratio that we care about (for
+// portrait layouts). It's taken from the iPhone 4. The height is computed by
+// taking the height of the device and removing the persistent, shrunken navbar.
+// (We don't need to account for the expanded navbar, since we include the
+// difference when reserving space above the keypad.)
+const worstCaseAspectRatio = 320 / (480 - safariNavBarWhenShrunk);
+const computeLayoutParameters = (_ref, _ref2, _ref3, _ref4) => {
+  let {
+    numColumns,
+    numMaxVisibleRows,
+    numPages
+  } = _ref;
+  let {
+    pageWidthPx,
+    pageHeightPx
+  } = _ref2;
+  let {
+    deviceOrientation,
+    deviceType
+  } = _ref3;
+  let {
+    navigationPadEnabled,
+    paginationEnabled,
+    toolbarEnabled
+  } = _ref4;
+  // First, compute some values that will be used in multiple computations.
+  const effectiveNumColumns = paginationEnabled ? numColumns : numColumns * numPages;
+
+  // Then, compute the button dimensions based on the provided parameters.
+  let buttonDimensions;
+  if (deviceType === DeviceTypes.PHONE) {
+    const isLandscape = deviceOrientation === DeviceOrientations.LANDSCAPE;
+
+    // In many cases, the browser chrome will already have been factored
+    // into `pageHeightPx`. But we have no way of knowing if that's
+    // the case or not. As such, we take a conservative approach and
+    // assume that the chrome is _never_ included in `pageHeightPx`.
+    const browserChromeHeight = isLandscape ? maxLandscapeBrowserChrome : maxPortraitBrowserChrome;
+
+    // Count up all the space that we need to reserve on the page.
+    // Namely, we need to account for:
+    //  1. Space between the keypad and the top of the page.
+    //  2. The presence of the exercise toolbar.
+    //  3. The presence of the view pager indicator.
+    //  4. Any browser chrome that may appear later.
+    const reservedSpace = minSpaceAboveKeypad + browserChromeHeight + (toolbarEnabled ? toolbarHeightPx : 0) + (paginationEnabled ? pageIndicatorHeightPx : 0);
+
+    // Next, compute the effective width and height. We can use the page
+    // width as the effective width. For the height, though, we take
+    // another conservative measure when in portrait by assuming that
+    // the device has the worst possible aspect ratio. In other words,
+    // we ignore the device height in portrait and assume the worst.
+    // This prevents the keypad from changing size when browser chrome
+    // appears and disappears.
+    const effectiveWidth = pageWidthPx;
+    const effectiveHeight = isLandscape ? pageHeightPx : pageWidthPx / worstCaseAspectRatio;
+    const maxKeypadHeight = effectiveHeight - reservedSpace;
+
+    // Finally, compute the button height and width. In computing the
+    // height, accommodate for the maximum number of rows that will ever be
+    // visible (since the toggling of popovers can increase the number of
+    // visible rows).
+    const buttonHeightPx = Math.max(Math.min(maxKeypadHeight / numMaxVisibleRows, maxButtonSize), minButtonHeight);
+    let buttonWidthPx;
+    if (numPages > 1) {
+      const effectiveNumColumns = paginationEnabled ? numColumns : numColumns * numPages;
+      buttonWidthPx = effectiveWidth / effectiveNumColumns;
+    } else {
+      buttonWidthPx = isLandscape ? maxButtonSize : effectiveWidth / numColumns;
+    }
+    buttonDimensions = {
+      widthPx: buttonWidthPx,
+      heightPx: buttonHeightPx
+    };
+  } else if (deviceType === DeviceTypes.TABLET) {
+    buttonDimensions = {
+      widthPx: maxButtonSize,
+      heightPx: maxButtonSize
+    };
+  } else {
+    throw new Error("Invalid device type: " + deviceType);
+  }
+
+  // Finally, determine whether the keypad should be rendered in the
+  // fullscreen layout by determining its resultant width.
+  const numSeparators = (navigationPadEnabled ? 1 : 0) + (!paginationEnabled ? numPages - 1 : 0);
+  const keypadWidth = effectiveNumColumns * buttonDimensions.widthPx + (navigationPadEnabled ? navigationPadWidthPx : 0) + numSeparators * innerBorderWidthPx;
   return {
-    cursorContext: state.input.cursor.context,
-    dynamicJumpOut: !state.layout.navigationPadEnabled
+    buttonDimensions,
+    layoutMode: keypadWidth >= pageWidthPx ? LayoutModes.FULLSCREEN : LayoutModes.COMPACT
   };
 };
-var FractionKeypad$1 = reactRedux.connect(mapStateToProps$1, null, null, {
-  forwardRef: true
-})(FractionKeypad);
+
+const initialLayoutState = {
+  gridDimensions: {
+    numRows: keypadForType[defaultKeypadType].rows,
+    numColumns: keypadForType[defaultKeypadType].columns,
+    numMaxVisibleRows: keypadForType[defaultKeypadType].maxVisibleRows,
+    numPages: keypadForType[defaultKeypadType].numPages
+  },
+  buttonDimensions: {
+    widthPx: 48,
+    heightPx: 48
+  },
+  pageDimensions: {
+    pageWidthPx: 0,
+    pageHeightPx: 0
+  },
+  layoutMode: LayoutModes.FULLSCREEN,
+  paginationEnabled: false,
+  navigationPadEnabled: false
+};
 
 /**
- * A system for tracking gesture velocity in a single dimension.
- *
- * Velocity is computed by smoothing linearly over the gestures that have
- * occurred in the last 100 milliseconds.
+ * Compute the additional layout state based on the provided page and grid
+ * dimensions.
  */
+const layoutParametersForDimensions = (pageDimensions, gridDimensions) => {
+  const {
+    pageWidthPx,
+    pageHeightPx
+  } = pageDimensions;
+
+  // Determine the device type and orientation.
+  const deviceOrientation = pageWidthPx > pageHeightPx ? DeviceOrientations.LANDSCAPE : DeviceOrientations.PORTRAIT;
+  const deviceType = Math.min(pageWidthPx, pageHeightPx) > tabletCutoffPx ? DeviceTypes.TABLET : DeviceTypes.PHONE;
+
+  // Using that information, make some decisions (or assumptions)
+  // about the resulting layout.
+  const navigationPadEnabled = deviceType === DeviceTypes.TABLET;
+  const paginationEnabled = deviceType === DeviceTypes.PHONE && deviceOrientation === DeviceOrientations.PORTRAIT;
+  const deviceInfo = {
+    deviceOrientation,
+    deviceType
+  };
+  const layoutOptions = {
+    navigationPadEnabled,
+    paginationEnabled,
+    // HACK(charlie): It's not great that we're making assumptions about
+    // the toolbar (which is rendered by webapp, and should always be
+    // visible and anchored to the bottom of the page for phone and
+    // tablet exercises). But this is primarily a heuristic (the goal is
+    // to preserve a 'good' amount of space between the top of the
+    // keypad and the top of the page) so we afford to have some margin
+    // of error.
+    toolbarEnabled: true
+  };
+  return {
+    ...computeLayoutParameters(gridDimensions, pageDimensions, deviceInfo, layoutOptions),
+    // Pass along some of the layout information, so that other
+    // components in the heirarchy can adapt appropriately.
+    navigationPadEnabled,
+    paginationEnabled
+  };
+};
+const layoutReducer = function () {
+  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialLayoutState;
+  let action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case "ConfigureKeypad":
+      const {
+        keypadType
+      } = action.configuration;
+      const gridDimensions = {
+        numRows: keypadForType[keypadType].rows,
+        numColumns: keypadForType[keypadType].columns,
+        numMaxVisibleRows: keypadForType[keypadType].maxVisibleRows,
+        numPages: keypadForType[keypadType].numPages
+      };
+      return {
+        ...state,
+        ...layoutParametersForDimensions(state.pageDimensions, gridDimensions),
+        gridDimensions
+      };
+    case "SetPageSize":
+      const {
+        pageWidthPx,
+        pageHeightPx
+      } = action;
+      const pageDimensions = {
+        pageWidthPx,
+        pageHeightPx
+      };
+      return {
+        ...state,
+        ...layoutParametersForDimensions(pageDimensions, state.gridDimensions),
+        pageDimensions
+      };
+    default:
+      return state;
+  }
+};
+
 class VelocityTracker {
   constructor(options) {
+    _defineProperty(this, "options", void 0);
+    _defineProperty(this, "_events", void 0);
     this.options = {
       velocityTimeout: 100,
       ...options
@@ -6474,149 +6633,48 @@ class VelocityTracker {
   }
 }
 
-const keypadForType = {
-  [KeypadTypes.FRACTION]: FractionKeypad$1,
-  [KeypadTypes.EXPRESSION]: ExpressionKeypad$1
+// We default to the right-most page. This is done so-as to enforce a
+// consistent orientation between the view pager layout and the flattened
+// layout, where our default page appears on the far right.
+const getDefaultPage = numPages => numPages - 1;
+const initialPagerState = {
+  animateToPosition: false,
+  currentPage: getDefaultPage(keypadForType[defaultKeypadType].numPages),
+  // The cumulative differential in the horizontal direction for the
+  // current swipe.
+  dx: 0,
+  numPages: keypadForType[defaultKeypadType].numPages,
+  pageWidthPx: 0,
+  velocityTracker: new VelocityTracker()
 };
-const createStore = () => {
-  const initialInputState = {
-    keyHandler: null,
-    cursor: {
-      context: NONE
-    }
-  };
-  const inputReducer = function () {
-    let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialInputState;
-    let action = arguments.length > 1 ? arguments[1] : undefined;
-    switch (action.type) {
-      case "SetKeyHandler":
-        return {
-          ...state,
-          keyHandler: action.keyHandler
-        };
-      case "PressKey":
-        const keyConfig = KeyConfigs[action.key];
-        if (keyConfig.type !== KeyTypes.KEYPAD_NAVIGATION) {
-          // This is probably an anti-pattern but it works for the
-          // case where we don't actually control the state but we
-          // still want to communicate with the other object
-          return {
-            ...state,
-            cursor: state.keyHandler(keyConfig.id)
-          };
-        }
-
-        // TODO(kevinb) get state from MathQuill and store it?
-        return state;
-      case "SetCursor":
-        return {
-          ...state,
-          cursor: action.cursor
-        };
-      default:
-        return state;
-    }
-  };
-  const defaultKeypadType = KeypadTypes.EXPRESSION;
-  const initialKeypadState = {
-    extraKeys: ["x", "y", Keys.THETA, Keys.PI],
-    keypadType: defaultKeypadType,
-    active: false
-  };
-  const keypadReducer = function () {
-    let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialKeypadState;
-    let action = arguments.length > 1 ? arguments[1] : undefined;
-    switch (action.type) {
-      case "DismissKeypad":
-        return {
-          ...state,
-          active: false
-        };
-      case "ActivateKeypad":
-        return {
-          ...state,
-          active: true
-        };
-      case "ConfigureKeypad":
-        return {
-          ...state,
-          // Default `extraKeys` to the empty array.
-          extraKeys: [],
-          // @ts-expect-error [FEI-5003] - TS2339 - Property 'configuration' does not exist on type '{ type: string; }'.
-          ...action.configuration
-        };
-      case "PressKey":
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'key' does not exist on type '{ type: string; }'.
-        const keyConfig = KeyConfigs[action.key];
-        // NOTE(charlie): Our keypad system operates by triggering key
-        // presses with key IDs in a dumb manner, such that the keys
-        // don't know what they can do--instead, the store is
-        // responsible for interpreting key presses and triggering the
-        // right actions when they occur. Hence, we figure off a
-        // dismissal here rather than dispatching a dismiss action in
-        // the first place.
-        if (keyConfig.id === Keys.DISMISS) {
-          return keypadReducer(state, {
-            type: "DismissKeypad"
-          });
-        }
-        return state;
-      default:
-        return state;
-    }
-  };
+const pagerReducer = function () {
+  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialPagerState;
+  let action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case "ConfigureKeypad":
+      const {
+        keypadType
+      } = action.configuration;
+      const {
+        numPages
+      } = keypadForType[keypadType];
+      return {
+        ...state,
+        numPages,
+        animateToPosition: false,
+        currentPage: getDefaultPage(numPages),
+        dx: 0
+      };
+    case "SetPageSize":
+      return {
+        ...state,
+        pageWidthPx: action.pageWidthPx
+      };
+    case "PressKey":
+      const keyConfig = KeyConfigs[action.key];
 
-  // We default to the right-most page. This is done so-as to enforce a
-  // consistent orientation between the view pager layout and the flattened
-  // layout, where our default page appears on the far right.
-  const getDefaultPage = numPages => numPages - 1;
-  const initialPagerState = {
-    animateToPosition: false,
-    currentPage: getDefaultPage(keypadForType[defaultKeypadType].numPages),
-    // The cumulative differential in the horizontal direction for the
-    // current swipe.
-    dx: 0,
-    numPages: keypadForType[defaultKeypadType].numPages,
-    pageWidthPx: 0,
-    velocityTracker: new VelocityTracker()
-  };
-  const pagerReducer = function () {
-    let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialPagerState;
-    let action = arguments.length > 1 ? arguments[1] : undefined;
-    switch (action.type) {
-      case "ConfigureKeypad":
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'configuration' does not exist on type '{ type: string; }'.
-        const {
-          keypadType
-        } = action.configuration;
-        const {
-          numPages
-        } = keypadForType[keypadType];
-        return {
-          ...state,
-          numPages,
-          animateToPosition: false,
-          currentPage: getDefaultPage(numPages),
-          dx: 0
-        };
-      case "SetPageSize":
-        return {
-          ...state,
-          // @ts-expect-error [FEI-5003] - TS2339 - Property 'pageWidthPx' does not exist on type '{ type: string; }'.
-          pageWidthPx: action.pageWidthPx
-        };
-      case "PressKey":
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'key' does not exist on type '{ type: string; }'.
-        const keyConfig = KeyConfigs[action.key];
-
-        // Reset the keypad page if the user performs a math operation.
-        if (keyConfig.type === KeyTypes.VALUE || keyConfig.type === KeyTypes.OPERATOR) {
-          return pagerReducer(state, {
-            type: "ResetKeypadPage"
-          });
-        }
-        return state;
-      case "ResetKeypadPage":
+      // Reset the keypad page if the user performs a math operation.
+      if (keyConfig.type === KeyTypes.VALUE || keyConfig.type === KeyTypes.OPERATOR) {
         return {
           ...state,
           animateToPosition: true,
@@ -6624,7 +6682,32 @@ const createStore = () => {
           currentPage: getDefaultPage(state.numPages),
           dx: 0
         };
-      case "PageKeypadRight":
+      }
+      return state;
+    case "OnSwipeChange":
+      state.velocityTracker.push(action.dx);
+      return {
+        ...state,
+        animateToPosition: false,
+        dx: action.dx
+      };
+    case "OnSwipeEnd":
+      const {
+        pageWidthPx,
+        velocityTracker
+      } = state;
+      const {
+        dx
+      } = action;
+      const velocity = velocityTracker.getVelocity();
+
+      // NOTE(charlie): These will need refinement. The velocity comes
+      // from Framer.
+      const minFlingVelocity = 0.1;
+      const minFlingDistance = 10;
+      const shouldPageRight = dx < -pageWidthPx / 2 || velocity < -minFlingVelocity && dx < -minFlingDistance;
+      const shouldPageLeft = dx > pageWidthPx / 2 || velocity > minFlingVelocity && dx > minFlingDistance;
+      if (shouldPageRight) {
         const nextPage = Math.min(state.currentPage + 1, state.numPages - 1);
         return {
           ...state,
@@ -6632,7 +6715,7 @@ const createStore = () => {
           currentPage: nextPage,
           dx: 0
         };
-      case "PageKeypadLeft":
+      } else if (shouldPageLeft) {
         const prevPage = Math.max(state.currentPage - 1, 0);
         return {
           ...state,
@@ -6640,79 +6723,35 @@ const createStore = () => {
           currentPage: prevPage,
           dx: 0
         };
-      case "OnSwipeChange":
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
-        state.velocityTracker.push(action.dx);
-        return {
-          ...state,
-          animateToPosition: false,
-          // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
-          dx: action.dx
-        };
-      case "OnSwipeEnd":
-        const {
-          pageWidthPx,
-          velocityTracker
-        } = state;
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
-        const {
-          dx
-        } = action;
-        const velocity = velocityTracker.getVelocity();
-
-        // NOTE(charlie): These will need refinement. The velocity comes
-        // from Framer.
-        const minFlingVelocity = 0.1;
-        const minFlingDistance = 10;
-        const shouldPageRight = dx < -pageWidthPx / 2 || velocity < -minFlingVelocity && dx < -minFlingDistance;
-        const shouldPageLeft = dx > pageWidthPx / 2 || velocity > minFlingVelocity && dx > minFlingDistance;
-        if (shouldPageRight) {
-          return pagerReducer(state, {
-            type: "PageKeypadRight"
-          });
-        } else if (shouldPageLeft) {
-          return pagerReducer(state, {
-            type: "PageKeypadLeft"
-          });
-        }
-        return {
-          ...state,
-          animateToPosition: true,
-          dx: 0
-        };
-      default:
-        return state;
-    }
-  };
+      }
+      return {
+        ...state,
+        animateToPosition: true,
+        dx: 0
+      };
+    default:
+      return state;
+  }
+};
+
+const createStore = () => {
+  // TODO(matthewc)[LC-752]: gestureReducer can't be moved from this file
+  // because it depends on `store` being in scope (see note below)
   const createGestureManager = swipeEnabled => {
     return new GestureManager({
       swipeEnabled
     }, {
       onSwipeChange: dx => {
-        store.dispatch({
-          type: "OnSwipeChange",
-          dx
-        });
+        store.dispatch(onSwipeChange(dx));
       },
       onSwipeEnd: dx => {
-        store.dispatch({
-          type: "OnSwipeEnd",
-          dx
-        });
+        store.dispatch(onSwipeEnd(dx));
       },
       onActiveNodesChanged: activeNodes => {
-        store.dispatch({
-          type: "SetActiveNodes",
-          activeNodes
-        });
+        store.dispatch(setActiveNodes(activeNodes));
       },
       onClick: (key, layoutProps, inPopover) => {
-        store.dispatch({
-          type: "PressKey",
-          key,
-          ...layoutProps,
-          inPopover
-        });
+        store.dispatch(pressKey(key, layoutProps.borders, layoutProps.initialBounds, inPopover));
       }
     }, [], [Keys.BACKSPACE, Keys.UP, Keys.RIGHT, Keys.DOWN, Keys.LEFT]);
   };
@@ -6762,147 +6801,6 @@ const createStore = () => {
         return state;
     }
   };
-
-  // Used to generate unique animation IDs for the echo animations. The actual
-  // values are irrelevant as long as they are unique.
-  let _lastAnimationId = 0;
-  const initialEchoState = {
-    echoes: []
-  };
-  const echoReducer = function () {
-    let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialEchoState;
-    let action = arguments.length > 1 ? arguments[1] : undefined;
-    switch (action.type) {
-      case "PressKey":
-        const keyConfig = KeyConfigs[action.key];
-
-        // Add in the echo animation if the user performs a math
-        // operation.
-        if (keyConfig.type === KeyTypes.VALUE || keyConfig.type === KeyTypes.OPERATOR) {
-          return {
-            ...state,
-            echoes: [...state.echoes, {
-              animationId: "" + _lastAnimationId++,
-              animationType: action.inPopover ? EchoAnimationTypes.LONG_FADE_ONLY : EchoAnimationTypes.FADE_ONLY,
-              borders: action.borders,
-              id: keyConfig.id,
-              initialBounds: action.initialBounds
-            }]
-          };
-        }
-        return state;
-      case "RemoveEcho":
-        const remainingEchoes = state.echoes.filter(echo => {
-          // @ts-expect-error [FEI-5003] - TS2339 - Property 'animationId' does not exist on type 'never'.
-          return echo.animationId !== action.animationId;
-        });
-        return {
-          ...state,
-          echoes: remainingEchoes
-        };
-      default:
-        return state;
-    }
-  };
-  const initialLayoutState = {
-    gridDimensions: {
-      numRows: keypadForType[defaultKeypadType].rows,
-      numColumns: keypadForType[defaultKeypadType].columns,
-      numMaxVisibleRows: keypadForType[defaultKeypadType].maxVisibleRows,
-      numPages: keypadForType[defaultKeypadType].numPages
-    },
-    buttonDimensions: {
-      widthPx: 48,
-      heightPx: 48
-    },
-    pageDimensions: {
-      pageWidthPx: 0,
-      pageHeightPx: 0
-    },
-    layoutMode: LayoutModes.FULLSCREEN,
-    paginationEnabled: false,
-    navigationPadEnabled: false
-  };
-
-  /**
-   * Compute the additional layout state based on the provided page and grid
-   * dimensions.
-   */
-  const layoutParametersForDimensions = (pageDimensions, gridDimensions) => {
-    const {
-      pageWidthPx,
-      pageHeightPx
-    } = pageDimensions;
-
-    // Determine the device type and orientation.
-    const deviceOrientation = pageWidthPx > pageHeightPx ? DeviceOrientations.LANDSCAPE : DeviceOrientations.PORTRAIT;
-    const deviceType = Math.min(pageWidthPx, pageHeightPx) > tabletCutoffPx ? DeviceTypes.TABLET : DeviceTypes.PHONE;
-
-    // Using that information, make some decisions (or assumptions)
-    // about the resulting layout.
-    const navigationPadEnabled = deviceType === DeviceTypes.TABLET;
-    const paginationEnabled = deviceType === DeviceTypes.PHONE && deviceOrientation === DeviceOrientations.PORTRAIT;
-    const deviceInfo = {
-      deviceOrientation,
-      deviceType
-    };
-    const layoutOptions = {
-      navigationPadEnabled,
-      paginationEnabled,
-      // HACK(charlie): It's not great that we're making assumptions about
-      // the toolbar (which is rendered by webapp, and should always be
-      // visible and anchored to the bottom of the page for phone and
-      // tablet exercises). But this is primarily a heuristic (the goal is
-      // to preserve a 'good' amount of space between the top of the
-      // keypad and the top of the page) so we afford to have some margin
-      // of error.
-      toolbarEnabled: true
-    };
-    return {
-      ...computeLayoutParameters(gridDimensions, pageDimensions, deviceInfo, layoutOptions),
-      // Pass along some of the layout information, so that other
-      // components in the heirarchy can adapt appropriately.
-      navigationPadEnabled,
-      paginationEnabled
-    };
-  };
-  const layoutReducer = function () {
-    let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialLayoutState;
-    let action = arguments.length > 1 ? arguments[1] : undefined;
-    switch (action.type) {
-      case "ConfigureKeypad":
-        const {
-          keypadType
-        } = action.configuration;
-        const gridDimensions = {
-          numRows: keypadForType[keypadType].rows,
-          numColumns: keypadForType[keypadType].columns,
-          numMaxVisibleRows: keypadForType[keypadType].maxVisibleRows,
-          numPages: keypadForType[keypadType].numPages
-        };
-        return {
-          ...state,
-          ...layoutParametersForDimensions(state.pageDimensions, gridDimensions),
-          gridDimensions
-        };
-      case "SetPageSize":
-        const {
-          pageWidthPx,
-          pageHeightPx
-        } = action;
-        const pageDimensions = {
-          pageWidthPx,
-          pageHeightPx
-        };
-        return {
-          ...state,
-          ...layoutParametersForDimensions(pageDimensions, state.gridDimensions),
-          pageDimensions
-        };
-      default:
-        return state;
-    }
-  };
   const reducer = Redux__namespace.combineReducers({
     input: inputReducer,
     keypad: keypadReducer,
@@ -6920,6 +6818,10 @@ const createStore = () => {
   return store;
 };
 
+/**
+ * A component that renders a navigation pad, which consists of an arrow for
+ * each possible direction.
+ */
 const {
   row: row$1,
   column,
@@ -6965,10 +6867,6 @@ class NavigationPad extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(NavigationPad, "propTypes", {
-  roundTopLeft: PropTypes__default["default"].bool,
-  style: PropTypes__default["default"].any
-});
 const buttonSizePx = 48;
 const borderRadiusPx = 4;
 const borderWidthPx$1 = 1;
@@ -7027,11 +6925,12 @@ const {
   centered,
   fullWidth
 } = Styles;
-
 // eslint-disable-next-line react/no-unsafe
 class KeypadContainer extends React__namespace.Component {
   constructor() {
     super(...arguments);
+    _defineProperty(this, "_resizeTimeout", void 0);
+    _defineProperty(this, "hasMounted", void 0);
     _defineProperty(this, "state", {
       hasBeenActivated: false,
       viewportWidth: "100vw"
@@ -7040,19 +6939,20 @@ class KeypadContainer extends React__namespace.Component {
       // Throttle the resize callbacks.
       // https://developer.mozilla.org/en-US/docs/Web/Events/resize
       if (this._resizeTimeout == null) {
-        this._resizeTimeout = setTimeout(() => {
+        this._resizeTimeout = window.setTimeout(() => {
           this._resizeTimeout = null;
           this._onResize();
         }, 66);
       }
     });
     _defineProperty(this, "_onResize", () => {
+      var _this$props$onPageSiz, _this$props;
       // Whenever the page resizes, we need to force an update, as the button
       // heights and keypad width are computed based on horizontal space.
       this.setState({
         viewportWidth: window.innerWidth
       });
-      this.props.onPageSizeChange(window.innerWidth, window.innerHeight);
+      (_this$props$onPageSiz = (_this$props = this.props).onPageSizeChange) === null || _this$props$onPageSiz === void 0 ? void 0 : _this$props$onPageSiz.call(_this$props, window.innerWidth, window.innerHeight);
     });
     _defineProperty(this, "renderKeypad", () => {
       const {
@@ -7134,10 +7034,15 @@ class KeypadContainer extends React__namespace.Component {
     // NOTE(charlie): We render the transforms as pure inline styles to
     // avoid an Aphrodite bug in mobile Safari.
     //   See: https://github.com/Khan/aphrodite/issues/68.
-    const dynamicStyle = {
-      ...(active ? inlineStyles.active : inlineStyles.hidden),
-      ...(!active && !hasBeenActivated ? inlineStyles.invisible : {})
+    let dynamicStyle = {
+      ...(active ? inlineStyles.active : inlineStyles.hidden)
     };
+    if (!active && !hasBeenActivated) {
+      dynamicStyle = {
+        ...dynamicStyle,
+        ...inlineStyles.invisible
+      };
+    }
     const keypadContainerStyle = [row, centered, fullWidth, styles.keypadContainer, ...(Array.isArray(style) ? style : [style])];
     const keypadStyle = [row, styles.keypadBorder, layoutMode === LayoutModes.FULLSCREEN ? styles.fullscreen : styles.compact];
 
@@ -7164,19 +7069,6 @@ class KeypadContainer extends React__namespace.Component {
     }, this.renderKeypad())));
   }
 }
-_defineProperty(KeypadContainer, "propTypes", {
-  active: PropTypes__default["default"].bool,
-  extraKeys: PropTypes__default["default"].arrayOf(keyIdPropType),
-  keypadType: PropTypes__default["default"].oneOf(Object.keys(KeypadTypes)).isRequired,
-  layoutMode: PropTypes__default["default"].oneOf(Object.keys(LayoutModes)).isRequired,
-  navigationPadEnabled: PropTypes__default["default"].bool.isRequired,
-  onDismiss: PropTypes__default["default"].func,
-  // A callback that should be triggered with the root React element on
-  // mount.
-  onElementMounted: PropTypes__default["default"].func,
-  onPageSizeChange: PropTypes__default["default"].func.isRequired,
-  style: PropTypes__default["default"].any
-});
 const keypadAnimationDurationMs = 300;
 const borderWidthPx = 1;
 const styles = aphrodite.StyleSheet.create({
@@ -7237,7 +7129,9 @@ const inlineStyles = {
 };
 const mapStateToProps = state => {
   return {
-    ...state.keypad,
+    extraKeys: state.keypad.extraKeys,
+    keypadType: state.keypad.keypadType,
+    active: state.keypad.active,
     layoutMode: state.layout.layoutMode,
     navigationPadEnabled: state.layout.navigationPadEnabled
   };
@@ -7254,9 +7148,8 @@ var KeypadContainer$1 = reactRedux.connect(mapStateToProps, mapDispatchToProps,
 })(KeypadContainer);
 
 class ProvidedKeypad extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "mounted", void 0);
+  constructor(props) {
+    super(props);
     _defineProperty(this, "store", void 0);
     _defineProperty(this, "activate", () => {
       this.store.dispatch(activateKeypad());
@@ -7285,24 +7178,17 @@ class ProvidedKeypad extends React__namespace.Component {
     _defineProperty(this, "getDOMNode", () => {
       return ReactDOM__default["default"].findDOMNode(this);
     });
-  }
-  UNSAFE_componentWillMount() {
     this.store = createStore();
   }
-  componentDidMount() {
-    this.mounted = true;
-  }
-  componentWillUnmount() {
-    this.mounted = false;
-  }
   render() {
     const {
       onElementMounted,
-      ...rest
+      onDismiss,
+      style
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement(reactRedux.Provider, {
       store: this.store
-    }, /*#__PURE__*/React__namespace.createElement(KeypadContainer$1, _extends({
+    }, /*#__PURE__*/React__namespace.createElement(KeypadContainer$1, {
       onElementMounted: element => {
         // Append the dispatch methods that we want to expose
         // externally to the returned React element.
@@ -7316,16 +7202,17 @@ class ProvidedKeypad extends React__namespace.Component {
           getDOMNode: this.getDOMNode
         };
         onElementMounted && onElementMounted(elementWithDispatchMethods);
-      }
-    }, rest)));
+      },
+      onDismiss: onDismiss,
+      style: style
+    }));
   }
 }
 
-exports.CursorContexts = CursorContexts;
+exports.CursorContexts = cursorContexts;
 exports.KeyConfigs = KeyConfigs;
 exports.Keypad = ProvidedKeypad;
 exports.KeypadInput = MathInput;
 exports.KeypadTypes = KeypadTypes;
-exports.keypadConfigurationPropType = keypadConfigurationPropType;
 exports.keypadElementPropType = keypadElementPropType;
 //# sourceMappingURL=index.js.map