@khanacademy/math-input 0.7.2 → 1.0.0

package/dist/es/index.js

@@ -330,6 +330,9 @@ CursorHandle.defaultProps = {
 const touchSlopPx = 8;
 class DragListener {
   constructor(onDrag, initialEvent) {
+    this._scrollListener = void 0;
+    this._moveListener = void 0;
+    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 = () => {
@@ -488,7 +491,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,
@@ -639,7 +642,13 @@ const KeysForJumpContext = {
   [IN_DENOMINATOR]: Keys.JUMP_OUT_DENOMINATOR
 };
 class MathWrapper {
+  // MathQuill interface
+  // MathQuill input
+
   constructor(element, options = {}, callbacks = {}) {
+    this.MQ = void 0;
+    this.mathField = void 0;
+    this.callbacks = void 0;
     this.MQ = MathQuill.getInterface(2);
     this.mathField = this.MQ.MathField(element, {
       // use a span instead of a textarea so that we don't bring up the
@@ -718,7 +727,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);
@@ -1217,7 +1226,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 ? void 0 : command.startNode);
       cursor.startSelection();
       if (grandparent[this.MQ.R] !== MQ_END) {
         cursor.insRightOf(grandparent[this.MQ.R]);
@@ -1381,18 +1390,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
@@ -1402,7 +1399,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,
@@ -1421,7 +1418,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;
     }
   }
@@ -1429,7 +1428,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;
   }
 };
@@ -2133,320 +2132,12 @@ const inlineStyles$1 = {
   }
 };
 
-const KeyConfigs = {
-  // Basic math keys.
-  [Keys.PLUS]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a plus sign.
-    ariaLabel: i18n._("Plus")
-  },
-  [Keys.MINUS]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a minus sign.
-    ariaLabel: i18n._("Minus")
-  },
-  [Keys.NEGATIVE]: {
-    type: KeyTypes.VALUE,
-    // I18N: A label for a minus sign.
-    ariaLabel: i18n._("Negative")
-  },
-  [Keys.TIMES]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a multiplication sign (represented with an 'x').
-    ariaLabel: i18n._("Multiply")
-  },
-  [Keys.DIVIDE]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a division sign.
-    ariaLabel: i18n._("Divide")
-  },
-  [Keys.DECIMAL]: {
-    type: KeyTypes.VALUE,
-    // I18N: A label for a decimal symbol.
-    ariaLabel: i18n._("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._("Percent")
-  },
-  [Keys.CDOT]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a multiplication sign (represented as a dot).
-    ariaLabel: i18n._("Multiply")
-  },
-  [Keys.EQUAL]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Equals sign")
-  },
-  [Keys.NEQ]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Not-equals sign")
-  },
-  [Keys.GT]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a 'greater than' sign (represented as '>').
-    ariaLabel: i18n._("Greater than sign")
-  },
-  [Keys.LT]: {
-    type: KeyTypes.OPERATOR,
-    // I18N: A label for a 'less than' sign (represented as '<').
-    ariaLabel: i18n._("Less than sign")
-  },
-  [Keys.GEQ]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Greater than or equal to sign")
-  },
-  [Keys.LEQ]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("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._("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._("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._("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._("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._("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._("Cube")
-  },
-  [Keys.SQRT]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Square root")
-  },
-  [Keys.CUBE_ROOT]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Cube root")
-  },
-  [Keys.RADICAL]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Radical with custom root")
-  },
-  [Keys.LEFT_PAREN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Left parenthesis")
-  },
-  [Keys.RIGHT_PAREN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Right parenthesis")
-  },
-  [Keys.LN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Natural logarithm")
-  },
-  [Keys.LOG]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Logarithm with base 10")
-  },
-  [Keys.LOG_N]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Logarithm with custom base")
-  },
-  [Keys.SIN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Sine")
-  },
-  [Keys.COS]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Cosine")
-  },
-  [Keys.TAN]: {
-    type: KeyTypes.OPERATOR,
-    ariaLabel: i18n._("Tangent")
-  },
-  [Keys.PI]: {
-    type: KeyTypes.VALUE,
-    ariaLabel: i18n._("Pi"),
-    icon: {
-      type: IconTypes.MATH,
-      data: "\\pi"
-    }
-  },
-  [Keys.THETA]: {
-    type: KeyTypes.VALUE,
-    ariaLabel: i18n._("Theta"),
-    icon: {
-      type: IconTypes.MATH,
-      data: "\\theta"
-    }
-  },
-  [Keys.NOOP]: {
-    type: KeyTypes.EMPTY
-  },
-  // Input navigation keys.
-  [Keys.UP]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n._("Up arrow")
-  },
-  [Keys.RIGHT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n._("Right arrow")
-  },
-  [Keys.DOWN]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n._("Down arrow")
-  },
-  [Keys.LEFT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n._("Left arrow")
-  },
-  [Keys.JUMP_OUT_PARENTHESES]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n._("Navigate right out of a set of parentheses")
-  },
-  [Keys.JUMP_OUT_EXPONENT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n._("Navigate right out of an exponent")
-  },
-  [Keys.JUMP_OUT_BASE]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n._("Navigate right out of a base")
-  },
-  [Keys.JUMP_INTO_NUMERATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n._("Navigate right into the numerator of a fraction")
-  },
-  [Keys.JUMP_OUT_NUMERATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n._("Navigate right out of the numerator and into the denominator")
-  },
-  [Keys.JUMP_OUT_DENOMINATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
-    ariaLabel: i18n._("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._("Delete")
-  },
-  // Keypad navigation keys.
-  [Keys.DISMISS]: {
-    type: KeyTypes.KEYPAD_NAVIGATION,
-    // I18N: A label for a button that will dismiss/hide a keypad.
-    ariaLabel: i18n._("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 = `${num}`;
-  KeyConfigs[`NUM_${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] = _extends({
-    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.shape({
-  type: PropTypes.oneOf(Object.keys(IconTypes)).isRequired,
-  data: PropTypes.string.isRequired
-});
-const keyIdPropType = PropTypes.oneOf(Object.keys(KeyConfigs));
-const keyConfigPropType = PropTypes.shape({
-  ariaLabel: PropTypes.string,
-  id: keyIdPropType.isRequired,
-  type: PropTypes.oneOf(Object.keys(KeyTypes)).isRequired,
-  childKeyIds: PropTypes.arrayOf(keyIdPropType),
-  icon: iconPropType.isRequired
-});
-const keypadConfigurationPropType = PropTypes.shape({
-  keypadType: PropTypes.oneOf(Object.keys(KeypadTypes)).isRequired,
-  extraKeys: PropTypes.arrayOf(keyIdPropType)
-});
+/**
+ * React PropTypes that may be shared between components.
+ */
 
 // NOTE(jared): This is no longer guaranteed to be React element
+// NOTE(matthewc): only seems to be used in Perseus
 const keypadElementPropType = PropTypes.shape({
   activate: PropTypes.func.isRequired,
   dismiss: PropTypes.func.isRequired,
@@ -2455,44 +2146,6 @@ const keypadElementPropType = PropTypes.shape({
   setKeyHandler: PropTypes.func.isRequired,
   getDOMNode: PropTypes.func.isRequired
 });
-const bordersPropType = PropTypes.arrayOf(PropTypes.oneOf(Object.keys(BorderDirections)));
-const boundingBoxPropType = PropTypes.shape({
-  height: PropTypes.number,
-  width: PropTypes.number,
-  top: PropTypes.number,
-  right: PropTypes.number,
-  bottom: PropTypes.number,
-  left: PropTypes.number
-});
-const echoPropType = PropTypes.shape({
-  animationId: PropTypes.string.isRequired,
-  animationType: PropTypes.oneOf(Object.keys(EchoAnimationTypes)).isRequired,
-  borders: bordersPropType,
-  id: keyIdPropType.isRequired,
-  initialBounds: boundingBoxPropType.isRequired
-});
-const cursorContextPropType = PropTypes.oneOf(Object.keys(CursorContexts));
-const popoverPropType = PropTypes.shape({
-  parentId: keyIdPropType.isRequired,
-  bounds: boundingBoxPropType.isRequired,
-  childKeyIds: PropTypes.arrayOf(keyIdPropType).isRequired
-});
-PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]);
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
 
 // naming convention: verb + noun
 // the noun should be one of the other properties in the object that's
@@ -2511,8 +2164,6 @@ const activateKeypad = () => {
 
 /**
  * Configure the keypad with the provided configuration parameters.
- *
- * See: `prop-types.js#keypadConfigurationPropType`.
  */
 const configureKeypad = configuration => {
   return {
@@ -2548,133 +2199,20 @@ 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 = ({
-  numColumns,
-  numMaxVisibleRows,
-  numPages
-}, {
-  pageWidthPx,
-  pageHeightPx
-}, {
-  deviceOrientation,
-  deviceType
-}, {
-  navigationPadEnabled,
-  paginationEnabled,
-  toolbarEnabled
-}) => {
-  // 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;
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-    // 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);
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
 
-  // 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 {
-    buttonDimensions,
-    layoutMode: keypadWidth >= pageWidthPx ? LayoutModes.FULLSCREEN : LayoutModes.COMPACT
-  };
-};
+  return target;
+}
 
 /**
  * The state machine that backs our gesture system. In particular, this state
@@ -2684,15 +2222,23 @@ const computeLayoutParameters = ({
  * 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) {
+    this.handlers = void 0;
+    this.options = void 0;
+    this.swipeDisabledNodeIds = void 0;
+    this.multiPressableKeys = void 0;
+    this.touchState = void 0;
+    this.swipeState = void 0;
     this.handlers = handlers;
-    this.options = _extends({}, defaults, options);
+    this.options = _extends({}, defaultOptions, options);
     this.swipeDisabledNodeIds = swipeDisabledNodeIds || [];
     this.multiPressableKeys = multiPressableKeys || [];
 
@@ -2953,6 +2499,10 @@ class GestureStateMachine {
 
 class NodeManager {
   constructor() {
+    this._nodesById = void 0;
+    this._bordersById = void 0;
+    this._orderedIds = void 0;
+    this._cachedBoundingBoxesById = void 0;
     // A mapping from IDs to DOM nodes.
     this._nodesById = {};
 
@@ -3002,6 +2552,7 @@ class NodeManager {
     const seenIds = {};
     for (const _id of allIds) {
       if (!seenIds[_id]) {
+        // @ts-expect-error TS2345
         orderedIds.push(_id);
         seenIds[_id] = true;
       }
@@ -3070,6 +2621,9 @@ class NodeManager {
 
 class PopoverStateMachine {
   constructor(handlers) {
+    this.handlers = void 0;
+    this.popovers = void 0;
+    this.activePopover = void 0;
     this.handlers = handlers;
     this.activePopover = null;
     this.popovers = {};
@@ -3166,8 +2720,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)
       });
@@ -3229,12 +2783,17 @@ class PopoverStateMachine {
   }
 }
 
-const _excluded$5 = ["popover"];
+const _excluded$4 = ["popover"];
 const coordsForEvent = evt => {
   return [evt.changedTouches[0].clientX, evt.changedTouches[0].clientY];
 };
 class GestureManager {
   constructor(options, handlers, disabledSwipeKeys, multiPressableKeys) {
+    this.swipeEnabled = void 0;
+    this.trackEvents = void 0;
+    this.nodeManager = void 0;
+    this.popoverStateMachine = void 0;
+    this.gestureStateMachine = void 0;
     const {
       swipeEnabled
     } = options;
@@ -3248,7 +2807,7 @@ class GestureManager {
         const {
             popover
           } = activeNodes,
-          rest = _objectWithoutPropertiesLoose(activeNodes, _excluded$5);
+          rest = _objectWithoutPropertiesLoose(activeNodes, _excluded$4);
         handlers.onActiveNodesChanged(_extends({
           popover: popover && {
             parentId: popover.parentId,
@@ -3416,50 +2975,413 @@ class GestureManager {
   }
 }
 
-/**
- * A small triangular decal to sit in the corner of a parent component.
- */
-class CornerDecal extends React.Component {
-  render() {
-    const {
-      style
-    } = this.props;
-    const containerStyle = [styles$d.container, ...(Array.isArray(style) ? style : [style])];
-    return /*#__PURE__*/React.createElement(View, {
-      style: containerStyle
-    }, /*#__PURE__*/React.createElement("svg", {
-      width: triangleSizePx,
-      height: triangleSizePx,
-      viewBox: "4 4 8 8"
-    }, /*#__PURE__*/React.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
-    })));
-  }
-}
-CornerDecal.propTypes = {
-  style: PropTypes.any
-};
-const triangleSizePx = 7;
-const styles$d = StyleSheet.create({
-  container: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    width: triangleSizePx,
-    height: triangleSizePx
-  }
-});
-
-/**
- * Common styles shared across components.
- */
-var Styles = StyleSheet.create({
-  row: {
-    flexDirection: "row"
+const KeyConfigs = {
+  // Basic math keys.
+  [Keys.PLUS]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a plus sign.
+    ariaLabel: i18n._("Plus")
   },
-  column: {
+  [Keys.MINUS]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a minus sign.
+    ariaLabel: i18n._("Minus")
+  },
+  [Keys.NEGATIVE]: {
+    type: KeyTypes.VALUE,
+    // I18N: A label for a minus sign.
+    ariaLabel: i18n._("Negative")
+  },
+  [Keys.TIMES]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a multiplication sign (represented with an 'x').
+    ariaLabel: i18n._("Multiply")
+  },
+  [Keys.DIVIDE]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a division sign.
+    ariaLabel: i18n._("Divide")
+  },
+  [Keys.DECIMAL]: {
+    type: KeyTypes.VALUE,
+    // I18N: A label for a decimal symbol.
+    ariaLabel: i18n._("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._("Percent")
+  },
+  [Keys.CDOT]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a multiplication sign (represented as a dot).
+    ariaLabel: i18n._("Multiply")
+  },
+  [Keys.EQUAL]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Equals sign")
+  },
+  [Keys.NEQ]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Not-equals sign")
+  },
+  [Keys.GT]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a 'greater than' sign (represented as '>').
+    ariaLabel: i18n._("Greater than sign")
+  },
+  [Keys.LT]: {
+    type: KeyTypes.OPERATOR,
+    // I18N: A label for a 'less than' sign (represented as '<').
+    ariaLabel: i18n._("Less than sign")
+  },
+  [Keys.GEQ]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Greater than or equal to sign")
+  },
+  [Keys.LEQ]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("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._("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._("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._("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._("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._("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._("Cube")
+  },
+  [Keys.SQRT]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Square root")
+  },
+  [Keys.CUBE_ROOT]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Cube root")
+  },
+  [Keys.RADICAL]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Radical with custom root")
+  },
+  [Keys.LEFT_PAREN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Left parenthesis")
+  },
+  [Keys.RIGHT_PAREN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Right parenthesis")
+  },
+  [Keys.LN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Natural logarithm")
+  },
+  [Keys.LOG]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Logarithm with base 10")
+  },
+  [Keys.LOG_N]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Logarithm with custom base")
+  },
+  [Keys.SIN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Sine")
+  },
+  [Keys.COS]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Cosine")
+  },
+  [Keys.TAN]: {
+    type: KeyTypes.OPERATOR,
+    ariaLabel: i18n._("Tangent")
+  },
+  [Keys.PI]: {
+    type: KeyTypes.VALUE,
+    ariaLabel: i18n._("Pi"),
+    icon: {
+      type: IconTypes.MATH,
+      data: "\\pi"
+    }
+  },
+  [Keys.THETA]: {
+    type: KeyTypes.VALUE,
+    ariaLabel: i18n._("Theta"),
+    icon: {
+      type: IconTypes.MATH,
+      data: "\\theta"
+    }
+  },
+  [Keys.NOOP]: {
+    type: KeyTypes.EMPTY
+  },
+  // Input navigation keys.
+  [Keys.UP]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n._("Up arrow")
+  },
+  [Keys.RIGHT]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n._("Right arrow")
+  },
+  [Keys.DOWN]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n._("Down arrow")
+  },
+  [Keys.LEFT]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n._("Left arrow")
+  },
+  [Keys.JUMP_OUT_PARENTHESES]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n._("Navigate right out of a set of parentheses")
+  },
+  [Keys.JUMP_OUT_EXPONENT]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n._("Navigate right out of an exponent")
+  },
+  [Keys.JUMP_OUT_BASE]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n._("Navigate right out of a base")
+  },
+  [Keys.JUMP_INTO_NUMERATOR]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n._("Navigate right into the numerator of a fraction")
+  },
+  [Keys.JUMP_OUT_NUMERATOR]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n._("Navigate right out of the numerator and into the denominator")
+  },
+  [Keys.JUMP_OUT_DENOMINATOR]: {
+    type: KeyTypes.INPUT_NAVIGATION,
+    ariaLabel: i18n._("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._("Delete")
+  },
+  // Keypad navigation keys.
+  [Keys.DISMISS]: {
+    type: KeyTypes.KEYPAD_NAVIGATION,
+    // I18N: A label for a button that will dismiss/hide a keypad.
+    ariaLabel: i18n._("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 = `${num}`;
+  KeyConfigs[`NUM_${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] = _extends({
+    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 echoReducer(state = initialEchoState, action) {
+  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 _extends({}, 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 _extends({}, state, {
+        echoes: remainingEchoes
+      });
+    default:
+      return state;
+  }
+};
+
+const initialInputState = {
+  keyHandler: null,
+  cursor: {
+    context: NONE
+  }
+};
+const inputReducer = function inputReducer(state = initialInputState, action) {
+  switch (action.type) {
+    case "SetKeyHandler":
+      return _extends({}, 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 _extends({}, state, {
+          cursor: state.keyHandler == null ? void 0 : state.keyHandler(keyConfig.id)
+        });
+      }
+
+      // TODO(kevinb) get state from MathQuill and store it?
+      return state;
+    case "SetCursor":
+      return _extends({}, state, {
+        cursor: action.cursor
+      });
+    default:
+      return state;
+  }
+};
+
+/**
+ * A small triangular decal to sit in the corner of a parent component.
+ */
+class CornerDecal extends React.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    const containerStyle = [styles$d.container, ...(Array.isArray(style) ? style : [style])];
+    return /*#__PURE__*/React.createElement(View, {
+      style: containerStyle
+    }, /*#__PURE__*/React.createElement("svg", {
+      width: triangleSizePx,
+      height: triangleSizePx,
+      viewBox: "4 4 8 8"
+    }, /*#__PURE__*/React.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 = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    width: triangleSizePx,
+    height: triangleSizePx
+  }
+});
+
+/**
+ * Common styles shared across components.
+ */
+var Styles = StyleSheet.create({
+  row: {
+    flexDirection: "row"
+  },
+  column: {
     flexDirection: "column"
   },
   oneColumn: {
@@ -3521,10 +3443,6 @@ class MathIcon extends React.Component {
     });
   }
 }
-MathIcon.propTypes = {
-  math: PropTypes.string.isRequired,
-  style: PropTypes.any
-};
 const styles$c = StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
@@ -4834,10 +4752,6 @@ class SvgIcon extends React.Component {
     });
   }
 }
-SvgIcon.propTypes = {
-  color: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired
-};
 
 /**
  * A component that renders a text-based icon.
@@ -4858,10 +4772,6 @@ class TextIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Text, null, character));
   }
 }
-TextIcon.propTypes = {
-  character: PropTypes.string.isRequired,
-  style: PropTypes.any
-};
 const styles$b = StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
@@ -4906,18 +4816,11 @@ class Icon extends React.PureComponent {
           character: icon.data,
           style: styleWithFocus
         });
+      default:
+        throw new Error("No icon or symbol provided");
     }
-    throw new Error("No icon or symbol provided");
   }
 }
-Icon.propTypes = {
-  focused: PropTypes.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.any
-};
 const styles$a = StyleSheet.create({
   unfocused: {
     color: unfocusedColor
@@ -5012,13 +4915,9 @@ class MultiSymbolGrid extends React.Component {
         }))));
       }
     }
-    throw new Error("Invalid number of icons:", icons.length);
+    throw new Error(`Invalid number of icons: ${icons.length}`);
   }
 }
-MultiSymbolGrid.propTypes = {
-  focused: PropTypes.bool,
-  icons: PropTypes.arrayOf(iconPropType).isRequired
-};
 const verticalInsetPx = 2;
 const horizontalInsetPx = 4;
 const styles$9 = StyleSheet.create({
@@ -5062,6 +4961,7 @@ const styles$9 = StyleSheet.create({
 class KeypadButton extends React.PureComponent {
   constructor(...args) {
     super(...args);
+    this.buttonSizeStyle = void 0;
     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
@@ -5110,10 +5010,12 @@ class KeypadButton extends React.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,
@@ -5161,7 +5063,7 @@ class KeypadButton extends React.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,
@@ -5212,32 +5114,6 @@ class KeypadButton extends React.PureComponent {
     }
   }
 }
-KeypadButton.propTypes = {
-  ariaLabel: PropTypes.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.arrayOf(keyConfigPropType),
-  // Whether the button should be rendered in a 'disabled' state, i.e.,
-  // without any touch feedback.
-  disabled: PropTypes.bool,
-  focused: PropTypes.bool,
-  heightPx: PropTypes.number.isRequired,
-  icon: iconPropType,
-  onTouchCancel: PropTypes.func,
-  onTouchEnd: PropTypes.func,
-  onTouchMove: PropTypes.func,
-  onTouchStart: PropTypes.func,
-  popoverEnabled: PropTypes.bool,
-  style: PropTypes.any,
-  type: PropTypes.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.number.isRequired
-};
 KeypadButton.defaultProps = {
   borders: BorderStyles.ALL,
   childKeys: [],
@@ -5249,8 +5125,6 @@ const focusInsetPx = 4;
 const focusBoxZIndex = 0;
 const styles$8 = 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
@@ -5326,20 +5200,23 @@ 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 = connect(mapStateToProps$7, null, null, {
   forwardRef: true
 })(KeypadButton);
 
-const _excluded$4 = ["gestureManager"];
+const _excluded$3 = ["gestureManager"];
 class EmptyKeypadButton extends React.Component {
   render() {
     const _this$props = this.props,
       {
         gestureManager
       } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
 
     // Register touch events on the button, but don't register its DOM node
     // or compute focus state or anything like that. We want the gesture
@@ -5354,9 +5231,6 @@ class EmptyKeypadButton extends React.Component {
     }, KeyConfigs.NOOP, rest));
   }
 }
-EmptyKeypadButton.propTypes = {
-  gestureManager: PropTypes.instanceOf(GestureManager)
-};
 const mapStateToProps$6 = state => {
   const {
     gestures
@@ -5369,7 +5243,7 @@ var EmptyKeypadButton$1 = connect(mapStateToProps$6, null, null, {
   forwardRef: true
 })(EmptyKeypadButton);
 
-const _excluded$3 = ["borders", "childKeyIds", "disabled", "gestureManager", "id", "style"],
+const _excluded$2 = ["borders", "childKeyIds", "disabled", "gestureManager", "id", "style"],
   _excluded2 = ["keyConfig"];
 class TouchableKeypadButton extends React.Component {
   shouldComponentUpdate(newProps) {
@@ -5396,7 +5270,7 @@ class TouchableKeypadButton extends React.Component {
         id,
         style
       } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
 
     // Only bind the relevant event handlers if the key is enabled.
     const eventHandlers = disabled ? {
@@ -5416,17 +5290,6 @@ class TouchableKeypadButton extends React.Component {
     }, eventHandlers, rest));
   }
 }
-TouchableKeypadButton.propTypes = {
-  borders: bordersPropType,
-  childKeyIds: PropTypes.arrayOf(keyIdPropType),
-  disabled: PropTypes.bool,
-  focused: PropTypes.bool,
-  gestureManager: PropTypes.instanceOf(GestureManager),
-  id: keyIdPropType.isRequired,
-  popoverEnabled: PropTypes.bool,
-  style: PropTypes.any,
-  type: PropTypes.oneOf(Object.keys(KeyTypes)).isRequired
-};
 const extractProps = keyConfig => {
   const {
     ariaLabel,
@@ -5479,20 +5342,20 @@ var TouchableKeypadButton$1 = connect(mapStateToProps$5, null, null, {
   forwardRef: true
 })(TouchableKeypadButton);
 
-const _excluded$2 = ["keys"];
+const _excluded$1 = ["keys"];
 class ManyKeypadButton extends React.Component {
   render() {
     const _this$props = this.props,
       {
         keys
       } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
     // If we have no extra symbols, render an empty button. If we have just
     // one, render a standard button. Otherwise, capture them all in a
     // single button.
     if (keys.length === 0) {
-      return /*#__PURE__*/React.createElement(EmptyKeypadButton$1, rest);
+      return /*#__PURE__*/React.createElement(EmptyKeypadButton$1, null);
     } else if (keys.length === 1) {
       const keyConfig = KeyConfigs[keys[0]];
       return /*#__PURE__*/React.createElement(TouchableKeypadButton$1, _extends({
@@ -5510,8 +5373,8 @@ class ManyKeypadButton extends React.Component {
     }
   }
 }
-ManyKeypadButton.propTypes = {
-  keys: PropTypes.arrayOf(keyIdPropType).isRequired
+ManyKeypadButton.defaultProps = {
+  keys: []
 };
 
 /**
@@ -5559,20 +5422,12 @@ class Echo extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       style: containerStyle
     }, /*#__PURE__*/React.createElement(KeypadButton$1, {
-      name: id,
       icon: icon,
       type: KeyTypes.ECHO,
       borders: borders
     }));
   }
 }
-Echo.propTypes = {
-  animationDurationMs: PropTypes.number.isRequired,
-  borders: bordersPropType,
-  id: keyIdPropType.isRequired,
-  initialBounds: boundingBoxPropType.isRequired,
-  onAnimationFinish: PropTypes.func.isRequired
-};
 class EchoManager extends React.Component {
   constructor(...args) {
     super(...args);
@@ -5595,7 +5450,7 @@ class EchoManager extends React.Component {
           animationTransitionName = "echo-long-fade-only";
           break;
         default:
-          throw new Error("Invalid echo animation type:", animationType);
+          throw new Error(`Invalid echo animation type: ${animationType}`);
       }
       return {
         animationDurationMs,
@@ -5640,16 +5495,12 @@ class EchoManager extends React.Component {
           key: animationId
         }, /*#__PURE__*/React.createElement(Echo, _extends({
           animationDurationMs: animationDurationMs,
-          onAnimationFinish: () => onAnimationFinish(animationId)
+          onAnimationFinish: () => onAnimationFinish == null ? void 0 : onAnimationFinish(animationId)
         }, echo)));
       }));
     }));
   }
 }
-EchoManager.propTypes = {
-  echoes: PropTypes.arrayOf(echoPropType),
-  onAnimationFinish: PropTypes.func.isRequired
-};
 
 /**
  * A popover that renders a set of keys floating above the page.
@@ -5673,9 +5524,6 @@ class MultiSymbolPopover extends React.Component {
     }));
   }
 }
-MultiSymbolPopover.propTypes = {
-  keys: PropTypes.arrayOf(keyConfigPropType)
-};
 const styles$6 = StyleSheet.create({
   container: {
     flexDirection: "column-reverse",
@@ -5696,7 +5544,6 @@ const styles$6 = StyleSheet.create({
 // 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.Component {
@@ -5715,10 +5562,6 @@ class PopoverContainer extends React.Component {
     }));
   }
 }
-PopoverContainer.propTypes = {
-  bounds: boundingBoxPropType.isRequired,
-  childKeys: PropTypes.arrayOf(keyConfigPropType).isRequired
-};
 class PopoverManager extends React.Component {
   render() {
     const {
@@ -5739,16 +5582,15 @@ class PopoverManager extends React.Component {
     })) : null;
   }
 }
-PopoverManager.propTypes = {
-  popover: popoverPropType
-};
-
-const _excluded$1 = ["initialBounds"];
 
+const _excluded = ["initialBounds"];
 // eslint-disable-next-line react/no-unsafe
 class Keypad extends React.Component {
   constructor(...args) {
     super(...args);
+    this._isMounted = void 0;
+    this._resizeTimeout = void 0;
+    this._container = void 0;
     this._computeContainer = () => {
       const domNode = ReactDOM.findDOMNode(this);
       this._container = domNode.getBoundingClientRect();
@@ -5770,7 +5612,7 @@ class Keypad extends React.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();
@@ -5808,12 +5650,16 @@ class Keypad extends React.Component {
       const {
           initialBounds
         } = echo,
-        rest = _objectWithoutPropertiesLoose(echo, _excluded$1);
+        rest = _objectWithoutPropertiesLoose(echo, _excluded);
       return _extends({}, 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
@@ -5826,7 +5672,12 @@ class Keypad extends React.Component {
     // the bottom left corners of the keys over which they appear.
     const relativePopover = popover && _extends({}, 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
       }
@@ -5841,23 +5692,12 @@ class Keypad extends React.Component {
     }));
   }
 }
-Keypad.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  removeEcho: PropTypes.func.isRequired,
-  style: PropTypes.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.bool,
-  echoes: PropTypes.arrayOf(echoPropType).isRequired,
-  popover: popoverPropType
-};
 const mapStateToProps$4 = state => {
-  return _extends({}, state.echoes, {
+  return {
+    echoes: state.echoes.echoes,
     active: state.keypad.active,
     popover: state.gestures.popover
-  });
+  };
 };
 const mapDispatchToProps$1 = dispatch => {
   return {
@@ -6093,12 +5933,6 @@ class TwoPageKeypad extends React.Component {
     }
   }
 }
-TwoPageKeypad.propTypes = {
-  currentPage: PropTypes.oneOf([0, 1]).isRequired,
-  leftPage: PropTypes.node.isRequired,
-  paginationEnabled: PropTypes.bool.isRequired,
-  rightPage: PropTypes.node.isRequired
-};
 const styles$3 = StyleSheet.create({
   keypad: {
     // Set the background to light grey, so that when the user drags the
@@ -6133,11 +5967,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.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,
@@ -6191,8 +6030,7 @@ class ExpressionKeypad extends React.Component {
       keyConfig: KeyConfigs.NUM_1,
       borders: BorderStyles.BOTTOM
     }), /*#__PURE__*/React.createElement(ManyKeypadButton, {
-      keys: extraKeys,
-      borders: BorderStyles.NONE
+      keys: extraKeys
     })), /*#__PURE__*/React.createElement(View, {
       style: [column$1, oneColumn]
     }, /*#__PURE__*/React.createElement(TouchableKeypadButton$1, {
@@ -6330,18 +6168,6 @@ class ExpressionKeypad extends React.Component {
     });
   }
 }
-ExpressionKeypad.propTypes = {
-  currentPage: PropTypes.number.isRequired,
-  cursorContext: cursorContextPropType.isRequired,
-  dynamicJumpOut: PropTypes.bool,
-  extraKeys: PropTypes.arrayOf(keyIdPropType),
-  roundTopLeft: PropTypes.bool,
-  roundTopRight: PropTypes.bool
-};
-ExpressionKeypad.rows = 4;
-ExpressionKeypad.columns = 5;
-ExpressionKeypad.maxVisibleRows = 4;
-ExpressionKeypad.numPages = 2;
 const styles$2 = 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
@@ -6356,9 +6182,10 @@ const styles$2 = 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 ? void 0 : _state$input$cursor.context,
     dynamicJumpOut: !state.layout.navigationPadEnabled
   };
 };
@@ -6375,11 +6202,16 @@ const {
   roundedTopLeft: roundedTopLeft$1,
   roundedTopRight
 } = Styles;
-class FractionKeypad extends React.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.Component {
   render() {
     const {
       cursorContext,
@@ -6482,29 +6314,290 @@ class FractionKeypad extends React.Component {
       borders: BorderStyles.LEFT
     })));
   }
-}
-FractionKeypad.propTypes = {
-  cursorContext: cursorContextPropType.isRequired,
-  dynamicJumpOut: PropTypes.bool,
-  roundTopLeft: PropTypes.bool,
-  roundTopRight: PropTypes.bool
-};
-FractionKeypad.rows = 4;
-FractionKeypad.columns = 4;
-FractionKeypad.maxVisibleRows = 5;
-FractionKeypad.numPages = 1;
-const mapStateToProps$1 = state => {
+}
+const mapStateToProps$1 = state => {
+  var _state$input$cursor;
+  return {
+    cursorContext: (_state$input$cursor = state.input.cursor) == null ? void 0 : _state$input$cursor.context,
+    dynamicJumpOut: !state.layout.navigationPadEnabled
+  };
+};
+var FractionKeypad$1 = 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 keypadReducer(state = initialKeypadState, action) {
+  switch (action.type) {
+    case "DismissKeypad":
+      return _extends({}, state, {
+        active: false
+      });
+    case "ActivateKeypad":
+      return _extends({}, state, {
+        active: true
+      });
+    case "ConfigureKeypad":
+      return _extends({}, state, {
+        // Default `extraKeys` to the empty array.
+        extraKeys: []
+      }, 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;
+  }
+};
+
+/**
+ * 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 = ({
+  numColumns,
+  numMaxVisibleRows,
+  numPages
+}, {
+  pageWidthPx,
+  pageHeightPx
+}, {
+  deviceOrientation,
+  deviceType
+}, {
+  navigationPadEnabled,
+  paginationEnabled,
+  toolbarEnabled
+}) => {
+  // 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 = 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
+};
+
+/**
+ * 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 _extends({}, 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 layoutReducer(state = initialLayoutState, action) {
+  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 _extends({}, state, layoutParametersForDimensions(state.pageDimensions, gridDimensions), {
+        gridDimensions
+      });
+    case "SetPageSize":
+      const {
+        pageWidthPx,
+        pageHeightPx
+      } = action;
+      const pageDimensions = {
+        pageWidthPx,
+        pageHeightPx
+      };
+      return _extends({}, state, layoutParametersForDimensions(pageDimensions, state.gridDimensions), {
+        pageDimensions
+      });
+    default:
+      return state;
+  }
+};
 
 class VelocityTracker {
   constructor(options) {
+    this.options = void 0;
+    this._events = void 0;
     this.options = _extends({
       velocityTimeout: 100
     }, options);
@@ -6567,195 +6660,119 @@ 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 inputReducer(state = initialInputState, action) {
-    switch (action.type) {
-      case "SetKeyHandler":
-        return _extends({}, 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 _extends({}, state, {
-            cursor: state.keyHandler(keyConfig.id)
-          });
-        }
-
-        // TODO(kevinb) get state from MathQuill and store it?
-        return state;
-      case "SetCursor":
-        return _extends({}, 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 keypadReducer(state = initialKeypadState, action) {
-    switch (action.type) {
-      case "DismissKeypad":
-        return _extends({}, state, {
-          active: false
-        });
-      case "ActivateKeypad":
-        return _extends({}, state, {
-          active: true
-        });
-      case "ConfigureKeypad":
-        return _extends({}, state, {
-          // Default `extraKeys` to the empty array.
-          extraKeys: []
-        }, 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;
-    }
-  };
-
-  // 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 pagerReducer(state = initialPagerState, action) {
-    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 _extends({}, state, {
-          numPages,
-          animateToPosition: false,
-          currentPage: getDefaultPage(numPages),
-          dx: 0
-        });
-      case "SetPageSize":
-        return _extends({}, 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":
-        return _extends({}, state, {
-          animateToPosition: true,
-          // We start at the right-most page.
-          currentPage: getDefaultPage(state.numPages),
-          dx: 0
-        });
-      case "PageKeypadRight":
-        const nextPage = Math.min(state.currentPage + 1, state.numPages - 1);
-        return _extends({}, state, {
-          animateToPosition: true,
-          currentPage: nextPage,
-          dx: 0
-        });
-      case "PageKeypadLeft":
-        const prevPage = Math.max(state.currentPage - 1, 0);
-        return _extends({}, state, {
-          animateToPosition: true,
-          currentPage: prevPage,
-          dx: 0
+const pagerReducer = function pagerReducer(state = initialPagerState, action) {
+  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 _extends({}, state, {
+        numPages,
+        animateToPosition: false,
+        currentPage: getDefaultPage(numPages),
+        dx: 0
+      });
+    case "SetPageSize":
+      return _extends({}, 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"
         });
-      case "OnSwipeChange":
+      }
+      return state;
+    case "ResetKeypadPage":
+      return _extends({}, state, {
+        animateToPosition: true,
+        // We start at the right-most page.
+        currentPage: getDefaultPage(state.numPages),
+        dx: 0
+      });
+    case "PageKeypadRight":
+      const nextPage = Math.min(state.currentPage + 1, state.numPages - 1);
+      return _extends({}, state, {
+        animateToPosition: true,
+        currentPage: nextPage,
+        dx: 0
+      });
+    case "PageKeypadLeft":
+      const prevPage = Math.max(state.currentPage - 1, 0);
+      return _extends({}, state, {
+        animateToPosition: true,
+        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 _extends({}, state, {
+        animateToPosition: false,
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
-        state.velocityTracker.push(action.dx);
-        return _extends({}, state, {
-          animateToPosition: false,
-          // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
-          dx: action.dx
+        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"
         });
-      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 _extends({}, state, {
-          animateToPosition: true,
-          dx: 0
+      } else if (shouldPageLeft) {
+        return pagerReducer(state, {
+          type: "PageKeypadLeft"
         });
-      default:
-        return state;
-    }
-  };
+      }
+      return _extends({}, 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
@@ -6829,136 +6846,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 echoReducer(state = initialEchoState, action) {
-    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 _extends({}, 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 _extends({}, 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 _extends({}, 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 layoutReducer(state = initialLayoutState, action) {
-    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 _extends({}, state, layoutParametersForDimensions(state.pageDimensions, gridDimensions), {
-          gridDimensions
-        });
-      case "SetPageSize":
-        const {
-          pageWidthPx,
-          pageHeightPx
-        } = action;
-        const pageDimensions = {
-          pageWidthPx,
-          pageHeightPx
-        };
-        return _extends({}, state, layoutParametersForDimensions(pageDimensions, state.gridDimensions), {
-          pageDimensions
-        });
-      default:
-        return state;
-    }
-  };
   const reducer = Redux.combineReducers({
     input: inputReducer,
     keypad: keypadReducer,
@@ -7025,10 +6912,6 @@ class NavigationPad extends React.Component {
     })));
   }
 }
-NavigationPad.propTypes = {
-  roundTopLeft: PropTypes.bool,
-  style: PropTypes.any
-};
 const buttonSizePx = 48;
 const borderRadiusPx = 4;
 const borderWidthPx$1 = 1;
@@ -7087,11 +6970,12 @@ const {
   centered,
   fullWidth
 } = Styles;
-
 // eslint-disable-next-line react/no-unsafe
 class KeypadContainer extends React.Component {
   constructor(...args) {
     super(...args);
+    this._resizeTimeout = void 0;
+    this.hasMounted = void 0;
     this.state = {
       hasBeenActivated: false,
       viewportWidth: "100vw"
@@ -7100,19 +6984,20 @@ class KeypadContainer extends React.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);
       }
     };
     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 ? void 0 : _this$props$onPageSiz.call(_this$props, window.innerWidth, window.innerHeight);
     };
     this.renderKeypad = () => {
       const {
@@ -7194,7 +7079,10 @@ class KeypadContainer extends React.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 = _extends({}, active ? inlineStyles.active : inlineStyles.hidden, !active && !hasBeenActivated ? inlineStyles.invisible : {});
+    let dynamicStyle = _extends({}, active ? inlineStyles.active : inlineStyles.hidden);
+    if (!active && !hasBeenActivated) {
+      dynamicStyle = _extends({}, 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];
 
@@ -7221,19 +7109,6 @@ class KeypadContainer extends React.Component {
     }, this.renderKeypad())));
   }
 }
-KeypadContainer.propTypes = {
-  active: PropTypes.bool,
-  extraKeys: PropTypes.arrayOf(keyIdPropType),
-  keypadType: PropTypes.oneOf(Object.keys(KeypadTypes)).isRequired,
-  layoutMode: PropTypes.oneOf(Object.keys(LayoutModes)).isRequired,
-  navigationPadEnabled: PropTypes.bool.isRequired,
-  onDismiss: PropTypes.func,
-  // A callback that should be triggered with the root React element on
-  // mount.
-  onElementMounted: PropTypes.func,
-  onPageSizeChange: PropTypes.func.isRequired,
-  style: PropTypes.any
-};
 const keypadAnimationDurationMs = 300;
 const borderWidthPx = 1;
 const styles = StyleSheet.create({
@@ -7293,10 +7168,13 @@ const inlineStyles = {
   }
 };
 const mapStateToProps = state => {
-  return _extends({}, state.keypad, {
+  return {
+    extraKeys: state.keypad.extraKeys,
+    keypadType: state.keypad.keypadType,
+    active: state.keypad.active,
     layoutMode: state.layout.layoutMode,
     navigationPadEnabled: state.layout.navigationPadEnabled
-  });
+  };
 };
 const mapDispatchToProps = dispatch => {
   return {
@@ -7309,7 +7187,6 @@ var KeypadContainer$1 = connect(mapStateToProps, mapDispatchToProps, null, {
   forwardRef: true
 })(KeypadContainer);
 
-const _excluded = ["onElementMounted"];
 class ProvidedKeypad extends React.Component {
   constructor(...args) {
     super(...args);
@@ -7353,14 +7230,14 @@ class ProvidedKeypad extends React.Component {
     this.mounted = false;
   }
   render() {
-    const _this$props = this.props,
-      {
-        onElementMounted
-      } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
+    const {
+      onElementMounted,
+      onDismiss,
+      style
+    } = this.props;
     return /*#__PURE__*/React.createElement(Provider, {
       store: this.store
-    }, /*#__PURE__*/React.createElement(KeypadContainer$1, _extends({
+    }, /*#__PURE__*/React.createElement(KeypadContainer$1, {
       onElementMounted: element => {
         // Append the dispatch methods that we want to expose
         // externally to the returned React element.
@@ -7373,10 +7250,12 @@ class ProvidedKeypad extends React.Component {
           getDOMNode: this.getDOMNode
         });
         onElementMounted && onElementMounted(elementWithDispatchMethods);
-      }
-    }, rest)));
+      },
+      onDismiss: onDismiss,
+      style: style
+    }));
   }
 }
 
-export { CursorContexts, KeyConfigs, ProvidedKeypad as Keypad, MathInput as KeypadInput, KeypadTypes, keypadConfigurationPropType, keypadElementPropType };
+export { cursorContexts as CursorContexts, KeyConfigs, ProvidedKeypad as Keypad, MathInput as KeypadInput, KeypadTypes, keypadElementPropType };
 //# sourceMappingURL=index.js.map