@khanacademy/math-input 1.0.1 → 2.0.0

package/dist/es/index.js

@@ -16,6 +16,29 @@ import { View as View$1 } from '@khanacademy/wonder-blocks-core';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import now from 'performance-now';
 
+/**
+ * Enum that defines the various contexts in which a cursor can exist. The
+ * active context is determined first by looking at the cursor's siblings (e.g.,
+ * for the `BEFORE_FRACTION` context), and then at its direct parent. Though a
+ * cursor could in theory be nested in multiple contexts, we only care about the
+ * immediate context.
+ *
+ * TODO(charlie): Add a context to represent being inside of a radical. Right
+ * now, we show the dismiss button rather than allowing the user to jump out of
+ * the radical.
+ */
+
+let CursorContext = /*#__PURE__*/function (CursorContext) {
+  CursorContext["NONE"] = "NONE";
+  CursorContext["IN_PARENS"] = "IN_PARENS";
+  CursorContext["IN_SUPER_SCRIPT"] = "IN_SUPER_SCRIPT";
+  CursorContext["IN_SUB_SCRIPT"] = "IN_SUB_SCRIPT";
+  CursorContext["IN_NUMERATOR"] = "IN_NUMERATOR";
+  CursorContext["IN_DENOMINATOR"] = "IN_DENOMINATOR";
+  CursorContext["BEFORE_FRACTION"] = "BEFORE_FRACTION";
+  return CursorContext;
+}({});
+
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -38,69 +61,61 @@ function _extends() {
  * This file contains constants for keypad buttons that aren't single
  * alphanumeric characters.
  */
-
 // TODO(charlie): There's duplication between this file and key-configs.js.
 // We should clean it up by removing this file and requiring clients to use the
 // `id` field on the key configurations.
-const Keys = {
-  PLUS: "PLUS",
-  MINUS: "MINUS",
-  NEGATIVE: "NEGATIVE",
-  TIMES: "TIMES",
-  DIVIDE: "DIVIDE",
-  DECIMAL: "DECIMAL",
-  PERIOD: "PERIOD",
-  PERCENT: "PERCENT",
-  CDOT: "CDOT",
-  EQUAL: "EQUAL",
-  NEQ: "NEQ",
-  GT: "GT",
-  LT: "LT",
-  GEQ: "GEQ",
-  LEQ: "LEQ",
-  FRAC_INCLUSIVE: "FRAC_INCLUSIVE",
-  // mobile native only
-  FRAC_EXCLUSIVE: "FRAC_EXCLUSIVE",
-  // mobile native only
-  FRAC: "FRAC",
-  EXP: "EXP",
-  EXP_2: "EXP_2",
-  EXP_3: "EXP_3",
-  SQRT: "SQRT",
-  CUBE_ROOT: "CUBE_ROOT",
-  RADICAL: "RADICAL",
-  LEFT_PAREN: "LEFT_PAREN",
-  RIGHT_PAREN: "RIGHT_PAREN",
-  LN: "LN",
-  LOG: "LOG",
-  LOG_N: "LOG_N",
-  SIN: "SIN",
-  COS: "COS",
-  TAN: "TAN",
-  // TODO(charlie): Add in additional Greek letters.
-  PI: "PI",
-  THETA: "THETA",
-  UP: "UP",
-  RIGHT: "RIGHT",
-  DOWN: "DOWN",
-  LEFT: "LEFT",
-  BACKSPACE: "BACKSPACE",
-  DISMISS: "DISMISS",
-  JUMP_OUT_PARENTHESES: "JUMP_OUT_PARENTHESES",
-  JUMP_OUT_EXPONENT: "JUMP_OUT_EXPONENT",
-  JUMP_OUT_BASE: "JUMP_OUT_BASE",
-  JUMP_INTO_NUMERATOR: "JUMP_INTO_NUMERATOR",
-  JUMP_OUT_NUMERATOR: "JUMP_OUT_NUMERATOR",
-  JUMP_OUT_DENOMINATOR: "JUMP_OUT_DENOMINATOR",
-  NOOP: "NOOP",
-  // Multi-functional keys.
-  FRAC_MULTI: "FRAC_MULTI",
-  // mobile native only
-
-  // A custom key that captures an arbitrary number of symbols but has no
-  // 'default' symbol or action.
-  MANY: "MANY"
-};
+var Keys = /*#__PURE__*/function (Keys) {
+  Keys["PLUS"] = "PLUS";
+  Keys["MINUS"] = "MINUS";
+  Keys["NEGATIVE"] = "NEGATIVE";
+  Keys["TIMES"] = "TIMES";
+  Keys["DIVIDE"] = "DIVIDE";
+  Keys["DECIMAL"] = "DECIMAL";
+  Keys["PERIOD"] = "PERIOD";
+  Keys["PERCENT"] = "PERCENT";
+  Keys["CDOT"] = "CDOT";
+  Keys["EQUAL"] = "EQUAL";
+  Keys["NEQ"] = "NEQ";
+  Keys["GT"] = "GT";
+  Keys["LT"] = "LT";
+  Keys["GEQ"] = "GEQ";
+  Keys["LEQ"] = "LEQ";
+  Keys["FRAC_INCLUSIVE"] = "FRAC_INCLUSIVE";
+  Keys["FRAC_EXCLUSIVE"] = "FRAC_EXCLUSIVE";
+  Keys["FRAC"] = "FRAC";
+  Keys["EXP"] = "EXP";
+  Keys["EXP_2"] = "EXP_2";
+  Keys["EXP_3"] = "EXP_3";
+  Keys["SQRT"] = "SQRT";
+  Keys["CUBE_ROOT"] = "CUBE_ROOT";
+  Keys["RADICAL"] = "RADICAL";
+  Keys["LEFT_PAREN"] = "LEFT_PAREN";
+  Keys["RIGHT_PAREN"] = "RIGHT_PAREN";
+  Keys["LN"] = "LN";
+  Keys["LOG"] = "LOG";
+  Keys["LOG_N"] = "LOG_N";
+  Keys["SIN"] = "SIN";
+  Keys["COS"] = "COS";
+  Keys["TAN"] = "TAN";
+  Keys["PI"] = "PI";
+  Keys["THETA"] = "THETA";
+  Keys["UP"] = "UP";
+  Keys["RIGHT"] = "RIGHT";
+  Keys["DOWN"] = "DOWN";
+  Keys["LEFT"] = "LEFT";
+  Keys["BACKSPACE"] = "BACKSPACE";
+  Keys["DISMISS"] = "DISMISS";
+  Keys["JUMP_OUT_PARENTHESES"] = "JUMP_OUT_PARENTHESES";
+  Keys["JUMP_OUT_EXPONENT"] = "JUMP_OUT_EXPONENT";
+  Keys["JUMP_OUT_BASE"] = "JUMP_OUT_BASE";
+  Keys["JUMP_INTO_NUMERATOR"] = "JUMP_INTO_NUMERATOR";
+  Keys["JUMP_OUT_NUMERATOR"] = "JUMP_OUT_NUMERATOR";
+  Keys["JUMP_OUT_DENOMINATOR"] = "JUMP_OUT_DENOMINATOR";
+  Keys["NOOP"] = "NOOP";
+  Keys["FRAC_MULTI"] = "FRAC_MULTI";
+  Keys["MANY"] = "MANY";
+  return Keys;
+}(Keys || {});
 
 class Text extends React.Component {
   render() {
@@ -390,66 +405,64 @@ class DragListener {
  * Constants that are shared between multiple files.
  */
 
-// TODO: Retire this in favour of KeypadType (above)
-const KeypadTypes = {
-  FRACTION: "FRACTION",
-  EXPRESSION: "EXPRESSION"
-};
-const KeyTypes = {
-  EMPTY: "EMPTY",
-  // For numerals, variables, and any other characters that themselves
-  // compose 'values'.
-  VALUE: "VALUE",
-  // For buttons that insert or adjust math in an input.
-  OPERATOR: "OPERATOR",
-  // For buttons that move the cursor in an input (including via
-  // deletion).
-  INPUT_NAVIGATION: "INPUT_NAVIGATION",
-  // For buttons that modify the broader keypad state (e.g., by changing
-  // the visible pane).
-  KEYPAD_NAVIGATION: "KEYPAD_NAVIGATION",
-  // For buttons that house multiple buttons and have no action
-  // themselves.
-  MANY: "MANY",
-  // For the echo animation that appears on press.
-  ECHO: "ECHO"
-};
-const DeviceOrientations = {
-  LANDSCAPE: "LANDSCAPE",
-  PORTRAIT: "PORTRAIT"
-};
-const DeviceTypes = {
-  PHONE: "PHONE",
-  TABLET: "TABLET"
-};
-const LayoutModes = {
-  FULLSCREEN: "FULLSCREEN",
-  COMPACT: "COMPACT"
-};
-const BorderDirections = {
-  LEFT: "LEFT",
-  BOTTOM: "BOTTOM"
-};
+let KeypadType = /*#__PURE__*/function (KeypadType) {
+  KeypadType["FRACTION"] = "FRACTION";
+  KeypadType["EXPRESSION"] = "EXPRESSION";
+  return KeypadType;
+}({});
+let KeyType = /*#__PURE__*/function (KeyType) {
+  KeyType["EMPTY"] = "EMPTY";
+  KeyType["VALUE"] = "VALUE";
+  KeyType["OPERATOR"] = "OPERATOR";
+  KeyType["INPUT_NAVIGATION"] = "INPUT_NAVIGATION";
+  KeyType["KEYPAD_NAVIGATION"] = "KEYPAD_NAVIGATION";
+  KeyType["MANY"] = "MANY";
+  KeyType["ECHO"] = "ECHO";
+  return KeyType;
+}({});
+let DeviceOrientation = /*#__PURE__*/function (DeviceOrientation) {
+  DeviceOrientation["LANDSCAPE"] = "LANDSCAPE";
+  DeviceOrientation["PORTRAIT"] = "PORTRAIT";
+  return DeviceOrientation;
+}({});
+let DeviceType = /*#__PURE__*/function (DeviceType) {
+  DeviceType["PHONE"] = "PHONE";
+  DeviceType["TABLET"] = "TABLET";
+  return DeviceType;
+}({});
+let LayoutMode = /*#__PURE__*/function (LayoutMode) {
+  LayoutMode["FULLSCREEN"] = "FULLSCREEN";
+  LayoutMode["COMPACT"] = "COMPACT";
+  return LayoutMode;
+}({});
+let BorderDirection = /*#__PURE__*/function (BorderDirection) {
+  BorderDirection["LEFT"] = "LEFT";
+  BorderDirection["BOTTOM"] = "BOTTOM";
+  return BorderDirection;
+}({});
 const BorderStyles = {
-  LEFT: ["LEFT"],
-  BOTTOM: ["BOTTOM"],
-  ALL: ["LEFT", "BOTTOM"],
+  LEFT: [BorderDirection.LEFT],
+  BOTTOM: [BorderDirection.BOTTOM],
+  ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
   NONE: []
 };
-const IconTypes = {
-  MATH: "MATH",
-  SVG: "SVG",
-  TEXT: "TEXT"
-};
-const DecimalSeparators = {
-  COMMA: "COMMA",
-  PERIOD: "PERIOD"
-};
-const EchoAnimationTypes = {
-  SLIDE_AND_FADE: "SLIDE_AND_FADE",
-  FADE_ONLY: "FADE_ONLY",
-  LONG_FADE_ONLY: "LONG_FADE_ONLY"
-};
+let IconType = /*#__PURE__*/function (IconType) {
+  IconType["MATH"] = "MATH";
+  IconType["SVG"] = "SVG";
+  IconType["TEXT"] = "TEXT";
+  return IconType;
+}({});
+let DecimalSeparator = /*#__PURE__*/function (DecimalSeparator) {
+  DecimalSeparator["COMMA"] = "COMMA";
+  DecimalSeparator["PERIOD"] = "PERIOD";
+  return DecimalSeparator;
+}({});
+let EchoAnimationType = /*#__PURE__*/function (EchoAnimationType) {
+  EchoAnimationType["SLIDE_AND_FADE"] = "SLIDE_AND_FADE";
+  EchoAnimationType["FADE_ONLY"] = "FADE_ONLY";
+  EchoAnimationType["LONG_FADE_ONLY"] = "LONG_FADE_ONLY";
+  return EchoAnimationType;
+}({});
 
 // NOTES(kevinb):
 // - In order to get the correct decimal separator for the current locale,
@@ -457,50 +470,7 @@ const EchoAnimationTypes = {
 //   imported from wonder-blocks-i18n.
 // - Some languages/locales use different decimal separators than the ones
 //   listed here.  Much of the Arab world uses U+066C.
-const decimalSeparator = getDecimalSeparator() === "," ? DecimalSeparators.COMMA : DecimalSeparators.PERIOD;
-
-/**
- * Constants that define the various contexts in which a cursor can exist. The
- * active context is determined first by looking at the cursor's siblings (e.g.,
- * for the `BEFORE_FRACTION` context), and then at its direct parent. Though a
- * cursor could in theory be nested in multiple contexts, we only care about the
- * immediate context.
- *
- * TODO(charlie): Add a context to represent being inside of a radical. Right
- * now, we show the dismiss button rather than allowing the user to jump out of
- * the radical.
- */
-
-// TODO: Get rid of these constants in favour of CursorContext type.
-
-// The cursor is not in any of the other viable contexts.
-const NONE = "NONE";
-// The cursor is within a set of parentheses.
-const IN_PARENS = "IN_PARENS";
-// The cursor is within a superscript (e.g., an exponent).
-const IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT";
-// The cursor is within a subscript (e.g., the base of a custom logarithm).
-const IN_SUB_SCRIPT = "IN_SUB_SCRIPT";
-// The cursor is in the numerator of a fraction.
-const IN_NUMERATOR = "IN_NUMERATOR";
-// The cursor is in the denominator of a fraction.
-const IN_DENOMINATOR = "IN_DENOMINATOR";
-// The cursor is sitting before a fraction; that is, the cursor is within
-// what looks to be a mixed number preceding a fraction. This will only be
-// the case when the only math between the cursor and the fraction to its
-// write is non-leaf math (numbers and variables).
-const BEFORE_FRACTION = "BEFORE_FRACTION";
-
-var cursorContexts = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  NONE: NONE,
-  IN_PARENS: IN_PARENS,
-  IN_SUPER_SCRIPT: IN_SUPER_SCRIPT,
-  IN_SUB_SCRIPT: IN_SUB_SCRIPT,
-  IN_NUMERATOR: IN_NUMERATOR,
-  IN_DENOMINATOR: IN_DENOMINATOR,
-  BEFORE_FRACTION: BEFORE_FRACTION
-});
+const decimalSeparator = getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
 
 /**
  * This file contains a wrapper around MathQuill so that we can provide a
@@ -511,110 +481,111 @@ var cursorContexts = /*#__PURE__*/Object.freeze({
 // Keeping `window` in place for test suite and GitHub Pages.
 // If it does not exist, fall back to CommonJS require. - jsatk
 
-const decimalSymbol = decimalSeparator === DecimalSeparators.COMMA ? "," : ".";
-const WRITE = "write";
-const CMD = "cmd";
-const KEYSTROKE = "keystroke";
-const MQ_END = 0;
-
-// A mapping from keys that can be pressed on a keypad to the way in which
+const decimalSymbol = decimalSeparator === DecimalSeparator.COMMA ? "," : ".";
+var ActionType = /*#__PURE__*/function (ActionType) {
+  ActionType["WRITE"] = "write";
+  ActionType["CMD"] = "cmd";
+  ActionType["KEYSTROKE"] = "keystroke";
+  ActionType[ActionType["MQ_END"] = 0] = "MQ_END";
+  return ActionType;
+}(ActionType || {}); // A mapping from keys that can be pressed on a keypad to the way in which
 // MathQuill should modify its input in response to that key-press. Any keys
 // that do not provide explicit actions (like the numeral keys) will merely
 // write their contents to MathQuill.
 const KeyActions = {
   [Keys.PLUS]: {
     str: "+",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.MINUS]: {
     str: "-",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.NEGATIVE]: {
     str: "-",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.TIMES]: {
     str: "\\times",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.DIVIDE]: {
     str: "\\div",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.DECIMAL]: {
     str: decimalSymbol,
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.EQUAL]: {
     str: "=",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.NEQ]: {
     str: "\\neq",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.CDOT]: {
     str: "\\cdot",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.PERCENT]: {
     str: "%",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.LEFT_PAREN]: {
     str: "(",
-    fn: CMD
+    fn: ActionType.CMD
   },
   [Keys.RIGHT_PAREN]: {
     str: ")",
-    fn: CMD
+    fn: ActionType.CMD
   },
   [Keys.SQRT]: {
     str: "sqrt",
-    fn: CMD
+    fn: ActionType.CMD
   },
   [Keys.PI]: {
     str: "pi",
-    fn: CMD
+    fn: ActionType.CMD
   },
   [Keys.THETA]: {
     str: "theta",
-    fn: CMD
+    fn: ActionType.CMD
   },
   [Keys.RADICAL]: {
     str: "nthroot",
-    fn: CMD
+    fn: ActionType.CMD
   },
   [Keys.LT]: {
     str: "<",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.LEQ]: {
     str: "\\leq",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.GT]: {
     str: ">",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.GEQ]: {
     str: "\\geq",
-    fn: WRITE
+    fn: ActionType.WRITE
   },
   [Keys.UP]: {
     str: "Up",
-    fn: KEYSTROKE
+    fn: ActionType.KEYSTROKE
   },
   [Keys.DOWN]: {
     str: "Down",
-    fn: KEYSTROKE
+    fn: ActionType.KEYSTROKE
   },
   // The `FRAC_EXCLUSIVE` variant is handled manually, since we may need to do
   // some additional navigation depending on the cursor position.
   [Keys.FRAC_INCLUSIVE]: {
     str: "/",
-    fn: CMD
+    fn: ActionType.CMD
   }
 };
 const NormalCommands = {
@@ -634,12 +605,12 @@ const Letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M"
 // leaf nodes.
 const ValidLeaves = [...Numerals, ...GreekLetters, ...Letters.map(letter => letter.toLowerCase()), ...Letters.map(letter => letter.toUpperCase())];
 const KeysForJumpContext = {
-  [IN_PARENS]: Keys.JUMP_OUT_PARENTHESES,
-  [IN_SUPER_SCRIPT]: Keys.JUMP_OUT_EXPONENT,
-  [IN_SUB_SCRIPT]: Keys.JUMP_OUT_BASE,
-  [BEFORE_FRACTION]: Keys.JUMP_INTO_NUMERATOR,
-  [IN_NUMERATOR]: Keys.JUMP_OUT_NUMERATOR,
-  [IN_DENOMINATOR]: Keys.JUMP_OUT_DENOMINATOR
+  [CursorContext.IN_PARENS]: Keys.JUMP_OUT_PARENTHESES,
+  [CursorContext.IN_SUPER_SCRIPT]: Keys.JUMP_OUT_EXPONENT,
+  [CursorContext.IN_SUB_SCRIPT]: Keys.JUMP_OUT_BASE,
+  [CursorContext.BEFORE_FRACTION]: Keys.JUMP_INTO_NUMERATOR,
+  [CursorContext.IN_NUMERATOR]: Keys.JUMP_OUT_NUMERATOR,
+  [CursorContext.IN_DENOMINATOR]: Keys.JUMP_OUT_DENOMINATOR
 };
 class MathWrapper {
   // MathQuill interface
@@ -702,14 +673,14 @@ class MathWrapper {
     } else if (key === Keys.FRAC_EXCLUSIVE) {
       // If there's nothing to the left of the cursor, then we want to
       // leave the cursor to the left of the fraction after creating it.
-      const shouldNavigateLeft = cursor[this.MQ.L] === MQ_END;
+      const shouldNavigateLeft = cursor[this.MQ.L] === ActionType.MQ_END;
       this.mathField.cmd("\\frac");
       if (shouldNavigateLeft) {
         this.mathField.keystroke("Left");
       }
     } else if (key === Keys.FRAC) {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      cursor[this.MQ.L] === MQ_END;
+      cursor[this.MQ.L] === ActionType.MQ_END;
       this.mathField.cmd("\\frac");
     } else if (key === Keys.LOG_N) {
       this.mathField.write("log_{ }\\left(\\right)");
@@ -730,9 +701,9 @@ class MathWrapper {
     } else if (key === Keys.RIGHT) {
       this._handleRightArrow(cursor);
     } else if (/^[a-zA-Z]$/.test(key)) {
-      this.mathField[WRITE](key);
+      this.mathField[ActionType.WRITE](key);
     } else if (/^NUM_\d/.test(key)) {
-      this.mathField[WRITE](key[4]);
+      this.mathField[ActionType.WRITE](key[4]);
     }
     if (!cursor.selection) {
       // don't show the cursor for selections
@@ -826,7 +797,7 @@ class MathWrapper {
   // when upgrading MathQuill.
 
   _handleBackspaceInNthRoot(cursor) {
-    const isAtLeftEnd = cursor[this.MQ.L] === MQ_END;
+    const isAtLeftEnd = cursor[this.MQ.L] === ActionType.MQ_END;
     const isRootEmpty = this._isInsideEmptyNode(cursor.parent.parent.blocks[0].ends);
     if (isAtLeftEnd) {
       this._selectNode(cursor.parent.parent, cursor);
@@ -857,16 +828,16 @@ class MathWrapper {
       return;
     }
     switch (context) {
-      case IN_PARENS:
+      case CursorContext.IN_PARENS:
         // Insert at the end of the parentheses, and then navigate right
         // once more to get 'beyond' the parentheses.
         cursor.insRightOf(cursor.parent.parent);
         break;
-      case BEFORE_FRACTION:
+      case CursorContext.BEFORE_FRACTION:
         // Find the nearest fraction to the right of the cursor.
         let fractionNode;
         let visitor = cursor;
-        while (visitor[this.MQ.R] !== MQ_END) {
+        while (visitor[this.MQ.R] !== ActionType.MQ_END) {
           if (this._isFraction(visitor[this.MQ.R])) {
             fractionNode = visitor[this.MQ.R];
           }
@@ -877,7 +848,7 @@ class MathWrapper {
         cursor.insLeftOf(fractionNode);
         this.mathField.keystroke("Right");
         break;
-      case IN_NUMERATOR:
+      case CursorContext.IN_NUMERATOR:
         // HACK(charlie): I can't find a better way to do this. The goal
         // is to place the cursor at the start of the matching
         // denominator. So, we identify the appropriate node, and
@@ -889,10 +860,10 @@ class MathWrapper {
           this.mathField.keystroke("Right");
         }
         break;
-      case IN_DENOMINATOR:
+      case CursorContext.IN_DENOMINATOR:
         cursor.insRightOf(cursor.parent.parent);
         break;
-      case IN_SUB_SCRIPT:
+      case CursorContext.IN_SUB_SCRIPT:
         // Insert just beyond the superscript.
         cursor.insRightOf(cursor.parent.parent);
 
@@ -903,7 +874,7 @@ class MathWrapper {
           this.mathField.keystroke("Right");
         }
         break;
-      case IN_SUPER_SCRIPT:
+      case CursorContext.IN_SUPER_SCRIPT:
         // Insert just beyond the superscript.
         cursor.insRightOf(cursor.parent.parent);
         break;
@@ -940,7 +911,7 @@ class MathWrapper {
         this._handleBackspaceInLogIndex(cursor);
       } else if (leftNode.ctrlSeq === "\\ge " || leftNode.ctrlSeq === "\\le ") {
         this._handleBackspaceAfterLigaturedSymbol(cursor);
-      } else if (this._isNthRoot(grandparent) && leftNode === MQ_END) {
+      } else if (this._isNthRoot(grandparent) && leftNode === ActionType.MQ_END) {
         this._handleBackspaceInNthRoot(cursor);
       } else {
         this.mathField.keystroke("Backspace");
@@ -957,10 +928,10 @@ class MathWrapper {
     // the entire expression, rather than between the `s` and the left
     // parenthesis.
     // From the cursor's perspective, this requires that our left node is
-    // the MQ_END node, that our grandparent is the left parenthesis, and
+    // the ActionType.MQ_END node, that our grandparent is the left parenthesis, and
     // the nodes to the left of our grandparent comprise a valid function
     // name.
-    if (cursor[this.MQ.L] === MQ_END) {
+    if (cursor[this.MQ.L] === ActionType.MQ_END) {
       const parent = cursor.parent;
       const grandparent = parent.parent;
       if (grandparent.ctrlSeq === "\\left(") {
@@ -995,7 +966,7 @@ class MathWrapper {
     // parentheses and apply the exponent to that.
     const invalidPrefixes = [...ArithmeticOperators, ...EqualityOperators];
     const precedingNode = cursor[this.MQ.L];
-    const shouldPrefixWithParens = precedingNode === MQ_END || invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
+    const shouldPrefixWithParens = precedingNode === ActionType.MQ_END || invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
     if (shouldPrefixWithParens) {
       this.mathField.write("\\left(\\right)");
     }
@@ -1180,7 +1151,7 @@ class MathWrapper {
     return false;
   }
   _isInsideEmptyNode(cursor) {
-    return cursor[this.MQ.L] === MQ_END && cursor[this.MQ.R] === MQ_END;
+    return cursor[this.MQ.L] === ActionType.MQ_END && cursor[this.MQ.R] === ActionType.MQ_END;
   }
   _handleBackspaceInRootIndex(cursor) {
     if (this._isInsideEmptyNode(cursor)) {
@@ -1208,14 +1179,14 @@ class MathWrapper {
         this.mathField.write(latex.replace(/^\\sqrt\[\]/, "\\sqrt"));
 
         // Adjust the cursor to be to the left the sqrt.
-        if (reinsertionPoint === MQ_END) {
+        if (reinsertionPoint === ActionType.MQ_END) {
           this.mathField.moveToDirEnd(this.MQ.L);
         } else {
           cursor.insRightOf(reinsertionPoint);
         }
       }
     } else {
-      if (cursor[this.MQ.L] !== MQ_END) {
+      if (cursor[this.MQ.L] !== ActionType.MQ_END) {
         // If the cursor is not at the leftmost position inside the
         // root's index, delete a character.
         this.mathField.keystroke("Backspace");
@@ -1228,7 +1199,7 @@ class MathWrapper {
       const command = this._maybeFindCommandBeforeParens(grandparent);
       cursor.insLeftOf(command == null ? void 0 : command.startNode);
       cursor.startSelection();
-      if (grandparent[this.MQ.R] !== MQ_END) {
+      if (grandparent[this.MQ.R] !== ActionType.MQ_END) {
         cursor.insRightOf(grandparent[this.MQ.R]);
       } else {
         cursor.insRightOf(grandparent);
@@ -1262,7 +1233,7 @@ class MathWrapper {
       // the parens.
       cursor.insLeftOf(command.startNode);
       cursor.startSelection();
-      if (rightNode === MQ_END) {
+      if (rightNode === ActionType.MQ_END) {
         cursor.insAtRightEnd(cursor.parent);
       } else {
         cursor.insLeftOf(rightNode);
@@ -1301,7 +1272,7 @@ class MathWrapper {
     // - \log(|x+1) => |\log(x+1)|
     // - \log(|) => |
 
-    if (cursor[this.MQ.L] !== MQ_END) {
+    if (cursor[this.MQ.L] !== ActionType.MQ_END) {
       // This command contains math and there's some math to
       // the left of the cursor that we should delete normally
       // before doing anything special.
@@ -1350,9 +1321,9 @@ class MathWrapper {
   contextForCursor(cursor) {
     // First, try to find any fraction to the right, unimpeded.
     let visitor = cursor;
-    while (visitor[this.MQ.R] !== MQ_END) {
+    while (visitor[this.MQ.R] !== ActionType.MQ_END) {
       if (this._isFraction(visitor[this.MQ.R])) {
-        return BEFORE_FRACTION;
+        return CursorContext.BEFORE_FRACTION;
       } else if (!this._isLeaf(visitor[this.MQ.R])) {
         break;
       }
@@ -1362,17 +1333,17 @@ class MathWrapper {
     // If that didn't work, check if the parent or grandparent is a special
     // context, so that we can jump outwards.
     if (this._isParens(cursor.parent && cursor.parent.parent)) {
-      return IN_PARENS;
+      return CursorContext.IN_PARENS;
     } else if (this._isNumerator(cursor.parent)) {
-      return IN_NUMERATOR;
+      return CursorContext.IN_NUMERATOR;
     } else if (this._isDenominator(cursor.parent)) {
-      return IN_DENOMINATOR;
+      return CursorContext.IN_DENOMINATOR;
     } else if (this._isSubScript(cursor.parent)) {
-      return IN_SUB_SCRIPT;
+      return CursorContext.IN_SUB_SCRIPT;
     } else if (this._isSuperScript(cursor.parent)) {
-      return IN_SUPER_SCRIPT;
+      return CursorContext.IN_SUPER_SCRIPT;
     } else {
-      return NONE;
+      return CursorContext.NONE;
     }
   }
   _isAtTopLevel(cursor) {
@@ -3010,231 +2981,231 @@ class GestureManager {
 const KeyConfigs = {
   // Basic math keys.
   [Keys.PLUS]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     // I18N: A label for a plus sign.
     ariaLabel: i18n._("Plus")
   },
   [Keys.MINUS]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     // I18N: A label for a minus sign.
     ariaLabel: i18n._("Minus")
   },
   [Keys.NEGATIVE]: {
-    type: KeyTypes.VALUE,
+    type: KeyType.VALUE,
     // I18N: A label for a minus sign.
     ariaLabel: i18n._("Negative")
   },
   [Keys.TIMES]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     // I18N: A label for a multiplication sign (represented with an 'x').
     ariaLabel: i18n._("Multiply")
   },
   [Keys.DIVIDE]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     // I18N: A label for a division sign.
     ariaLabel: i18n._("Divide")
   },
   [Keys.DECIMAL]: {
-    type: KeyTypes.VALUE,
+    type: KeyType.VALUE,
     // I18N: A label for a decimal symbol.
     ariaLabel: i18n._("Decimal"),
-    icon: decimalSeparator === DecimalSeparators.COMMA ? {
+    icon: decimalSeparator === DecimalSeparator.COMMA ? {
       // TODO(charlie): Get an SVG icon for the comma, or verify with
       // design that the text-rendered version is acceptable.
-      type: IconTypes.TEXT,
+      type: IconType.TEXT,
       data: ","
     } : {
-      type: IconTypes.SVG,
+      type: IconType.SVG,
       data: Keys.PERIOD
     }
   },
   [Keys.PERCENT]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     // I18N: A label for a percent sign.
     ariaLabel: i18n._("Percent")
   },
   [Keys.CDOT]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     // I18N: A label for a multiplication sign (represented as a dot).
     ariaLabel: i18n._("Multiply")
   },
   [Keys.EQUAL]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Equals sign")
   },
   [Keys.NEQ]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Not-equals sign")
   },
   [Keys.GT]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     // I18N: A label for a 'greater than' sign (represented as '>').
     ariaLabel: i18n._("Greater than sign")
   },
   [Keys.LT]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     // I18N: A label for a 'less than' sign (represented as '<').
     ariaLabel: i18n._("Less than sign")
   },
   [Keys.GEQ]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Greater than or equal to sign")
   },
   [Keys.LEQ]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Less than or equal to sign")
   },
   // mobile native
   [Keys.FRAC_INCLUSIVE]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.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,
+    type: KeyType.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,
+    type: KeyType.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,
+    type: KeyType.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,
+    type: KeyType.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,
+    type: KeyType.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,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Square root")
   },
   [Keys.CUBE_ROOT]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Cube root")
   },
   [Keys.RADICAL]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Radical with custom root")
   },
   [Keys.LEFT_PAREN]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Left parenthesis")
   },
   [Keys.RIGHT_PAREN]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Right parenthesis")
   },
   [Keys.LN]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Natural logarithm")
   },
   [Keys.LOG]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Logarithm with base 10")
   },
   [Keys.LOG_N]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Logarithm with custom base")
   },
   [Keys.SIN]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Sine")
   },
   [Keys.COS]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Cosine")
   },
   [Keys.TAN]: {
-    type: KeyTypes.OPERATOR,
+    type: KeyType.OPERATOR,
     ariaLabel: i18n._("Tangent")
   },
   [Keys.PI]: {
-    type: KeyTypes.VALUE,
+    type: KeyType.VALUE,
     ariaLabel: i18n._("Pi"),
     icon: {
-      type: IconTypes.MATH,
+      type: IconType.MATH,
       data: "\\pi"
     }
   },
   [Keys.THETA]: {
-    type: KeyTypes.VALUE,
+    type: KeyType.VALUE,
     ariaLabel: i18n._("Theta"),
     icon: {
-      type: IconTypes.MATH,
+      type: IconType.MATH,
       data: "\\theta"
     }
   },
   [Keys.NOOP]: {
-    type: KeyTypes.EMPTY
+    type: KeyType.EMPTY
   },
   // Input navigation keys.
   [Keys.UP]: {
-    type: KeyTypes.INPUT_NAVIGATION,
+    type: KeyType.INPUT_NAVIGATION,
     ariaLabel: i18n._("Up arrow")
   },
   [Keys.RIGHT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
+    type: KeyType.INPUT_NAVIGATION,
     ariaLabel: i18n._("Right arrow")
   },
   [Keys.DOWN]: {
-    type: KeyTypes.INPUT_NAVIGATION,
+    type: KeyType.INPUT_NAVIGATION,
     ariaLabel: i18n._("Down arrow")
   },
   [Keys.LEFT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
+    type: KeyType.INPUT_NAVIGATION,
     ariaLabel: i18n._("Left arrow")
   },
   [Keys.JUMP_OUT_PARENTHESES]: {
-    type: KeyTypes.INPUT_NAVIGATION,
+    type: KeyType.INPUT_NAVIGATION,
     ariaLabel: i18n._("Navigate right out of a set of parentheses")
   },
   [Keys.JUMP_OUT_EXPONENT]: {
-    type: KeyTypes.INPUT_NAVIGATION,
+    type: KeyType.INPUT_NAVIGATION,
     ariaLabel: i18n._("Navigate right out of an exponent")
   },
   [Keys.JUMP_OUT_BASE]: {
-    type: KeyTypes.INPUT_NAVIGATION,
+    type: KeyType.INPUT_NAVIGATION,
     ariaLabel: i18n._("Navigate right out of a base")
   },
   [Keys.JUMP_INTO_NUMERATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
+    type: KeyType.INPUT_NAVIGATION,
     ariaLabel: i18n._("Navigate right into the numerator of a fraction")
   },
   [Keys.JUMP_OUT_NUMERATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
+    type: KeyType.INPUT_NAVIGATION,
     ariaLabel: i18n._("Navigate right out of the numerator and into the denominator")
   },
   [Keys.JUMP_OUT_DENOMINATOR]: {
-    type: KeyTypes.INPUT_NAVIGATION,
+    type: KeyType.INPUT_NAVIGATION,
     ariaLabel: i18n._("Navigate right out of the denominator of a fraction")
   },
   [Keys.BACKSPACE]: {
-    type: KeyTypes.INPUT_NAVIGATION,
+    type: KeyType.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,
+    type: KeyType.KEYPAD_NAVIGATION,
     // I18N: A label for a button that will dismiss/hide a keypad.
     ariaLabel: i18n._("Dismiss")
   }
@@ -3252,7 +3223,7 @@ KeyConfigs[Keys.FRAC_MULTI] = {
 
 // TODO(charlie): Use the numeral color for the 'Many' key.
 KeyConfigs[Keys.MANY] = {
-  type: KeyTypes.MANY
+  type: KeyType.MANY
   // childKeyIds will be configured by the client.
 };
 
@@ -3264,10 +3235,10 @@ for (const num of NUMBERS) {
   // would mean that we'd be using text beyond the variable key).
   const textRepresentation = `${num}`;
   KeyConfigs[`NUM_${num}`] = {
-    type: KeyTypes.VALUE,
+    type: KeyType.VALUE,
     ariaLabel: textRepresentation,
     icon: {
-      type: IconTypes.TEXT,
+      type: IconType.TEXT,
       data: textRepresentation
     }
   };
@@ -3280,10 +3251,10 @@ for (const letter of LETTERS) {
   const upperCaseVariable = letter.toUpperCase();
   for (const textRepresentation of [lowerCaseVariable, upperCaseVariable]) {
     KeyConfigs[textRepresentation] = {
-      type: KeyTypes.VALUE,
+      type: KeyType.VALUE,
       ariaLabel: textRepresentation,
       icon: {
-        type: IconTypes.MATH,
+        type: IconType.MATH,
         data: textRepresentation
       }
     };
@@ -3294,7 +3265,7 @@ for (const key of Object.keys(KeyConfigs)) {
     id: key,
     // Default to an SVG icon indexed by the key name.
     icon: {
-      type: IconTypes.SVG,
+      type: IconType.SVG,
       data: key
     }
   }, KeyConfigs[key]);
@@ -3313,11 +3284,11 @@ const echoReducer = function echoReducer(state = initialEchoState, action) {
 
       // Add in the echo animation if the user performs a math
       // operation.
-      if (keyConfig.type === KeyTypes.VALUE || keyConfig.type === KeyTypes.OPERATOR) {
+      if (keyConfig.type === KeyType.VALUE || keyConfig.type === KeyType.OPERATOR) {
         return _extends({}, state, {
           echoes: [...state.echoes, {
             animationId: "" + _lastAnimationId++,
-            animationType: action.inPopover ? EchoAnimationTypes.LONG_FADE_ONLY : EchoAnimationTypes.FADE_ONLY,
+            animationType: action.inPopover ? EchoAnimationType.LONG_FADE_ONLY : EchoAnimationType.FADE_ONLY,
             borders: action.borders,
             id: keyConfig.id,
             initialBounds: action.initialBounds
@@ -3340,7 +3311,7 @@ const echoReducer = function echoReducer(state = initialEchoState, action) {
 const initialInputState = {
   keyHandler: null,
   cursor: {
-    context: NONE
+    context: CursorContext.NONE
   }
 };
 const inputReducer = function inputReducer(state = initialInputState, action) {
@@ -3351,7 +3322,7 @@ const inputReducer = function inputReducer(state = initialInputState, action) {
       });
     case "PressKey":
       const keyConfig = KeyConfigs[action.key];
-      if (keyConfig.type !== KeyTypes.KEYPAD_NAVIGATION) {
+      if (keyConfig.type !== KeyType.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
@@ -4722,48 +4693,48 @@ const JumpOutDenominator = () => {
  */
 
 var Iconography = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  COS: Cos,
-  LOG: Log,
-  EQUAL: Equal,
-  BACKSPACE: Backspace,
-  SQRT: Sqrt,
-  EXP: Exp,
-  NEQ: Neq,
-  GEQ: Geq,
-  LN: Ln,
-  DISMISS: Dismiss,
-  SIN: Sin,
-  LT: Lt,
-  CUBE_ROOT: CubeRoot,
-  PLUS: Plus,
-  TAN: Tan,
-  LEFT: Left,
-  UP: Up,
-  DOWN: Down,
-  LEFT_PAREN: LeftParen,
-  RIGHT_PAREN: RightParen,
-  GT: Gt,
-  DIVIDE: Divide,
-  PERIOD: Period,
-  PERCENT: Percent,
-  TIMES: Times,
-  EXP_3: Exp3,
-  EXP_2: Exp2,
-  RIGHT: Right,
-  CDOT: Cdot,
-  LOG_N: LogN,
-  LEQ: Leq,
-  MINUS: Minus,
-  NEGATIVE: Minus,
-  RADICAL: Radical,
-  FRAC: FracInclusive,
-  JUMP_OUT_PARENTHESES: JumpOutParentheses,
-  JUMP_OUT_EXPONENT: JumpOutExponent,
-  JUMP_OUT_BASE: JumpOutBase,
-  JUMP_INTO_NUMERATOR: JumpIntoNumerator,
-  JUMP_OUT_NUMERATOR: JumpOutNumerator,
-  JUMP_OUT_DENOMINATOR: JumpOutDenominator
+    __proto__: null,
+    COS: Cos,
+    LOG: Log,
+    EQUAL: Equal,
+    BACKSPACE: Backspace,
+    SQRT: Sqrt,
+    EXP: Exp,
+    NEQ: Neq,
+    GEQ: Geq,
+    LN: Ln,
+    DISMISS: Dismiss,
+    SIN: Sin,
+    LT: Lt,
+    CUBE_ROOT: CubeRoot,
+    PLUS: Plus,
+    TAN: Tan,
+    LEFT: Left,
+    UP: Up,
+    DOWN: Down,
+    LEFT_PAREN: LeftParen,
+    RIGHT_PAREN: RightParen,
+    GT: Gt,
+    DIVIDE: Divide,
+    PERIOD: Period,
+    PERCENT: Percent,
+    TIMES: Times,
+    EXP_3: Exp3,
+    EXP_2: Exp2,
+    RIGHT: Right,
+    CDOT: Cdot,
+    LOG_N: LogN,
+    LEQ: Leq,
+    MINUS: Minus,
+    NEGATIVE: Minus,
+    RADICAL: Radical,
+    FRAC: FracInclusive,
+    JUMP_OUT_PARENTHESES: JumpOutParentheses,
+    JUMP_OUT_EXPONENT: JumpOutExponent,
+    JUMP_OUT_BASE: JumpOutBase,
+    JUMP_INTO_NUMERATOR: JumpIntoNumerator,
+    JUMP_OUT_NUMERATOR: JumpOutNumerator,
+    JUMP_OUT_DENOMINATOR: JumpOutDenominator
 });
 
 /**
@@ -4828,12 +4799,12 @@ class Icon extends React.PureComponent {
     } = this.props;
     const styleWithFocus = [focused ? styles$a.focused : styles$a.unfocused, ...(Array.isArray(style) ? style : [style])];
     switch (icon.type) {
-      case IconTypes.MATH:
+      case IconType.MATH:
         return /*#__PURE__*/React.createElement(MathIcon, {
           math: icon.data,
           style: styleWithFocus
         });
-      case IconTypes.SVG:
+      case IconType.SVG:
         // TODO(charlie): Support passing style objects to `SvgIcon`.
         // This will require migrating the individual icons to use
         // `currentColor` and accept a `className` prop, rather than
@@ -4842,7 +4813,7 @@ class Icon extends React.PureComponent {
           name: icon.data,
           color: focused ? focusedColor : unfocusedColor
         });
-      case IconTypes.TEXT:
+      case IconType.TEXT:
         return /*#__PURE__*/React.createElement(TextIcon, {
           character: icon.data,
           style: styleWithFocus
@@ -4884,7 +4855,7 @@ class MultiSymbolGrid extends React.Component {
     // Supporting other types of icons is possible but would require
     // some styles coercion and doesn't seem worthwhile right now.
     icons.forEach(icon => {
-      if (icon.type !== IconTypes.MATH) {
+      if (icon.type !== IconType.MATH) {
         throw new Error(`Received invalid icon: type=${icon.type}, ` + `data=${icon.data}`);
       }
     });
@@ -5002,7 +4973,7 @@ class KeypadButton extends React.PureComponent {
       // object. This method must be called whenever a property that
       // influences the possible outcomes of `this._getFocusStyle` and
       // `this._getButtonStyle` changes (such as `this.buttonSizeStyle`).
-      for (const type of Object.keys(KeyTypes)) {
+      for (const type of Object.values(KeyType)) {
         css(View.styles.initial, ...this._getFocusStyle(type));
         for (const borders of Object.values(BorderStyles)) {
           css(View.styles.initial, ...this._getButtonStyle(type, borders));
@@ -5011,7 +4982,7 @@ class KeypadButton extends React.PureComponent {
     };
     this._getFocusStyle = type => {
       let focusBackgroundStyle;
-      if (type === KeyTypes.INPUT_NAVIGATION || type === KeyTypes.KEYPAD_NAVIGATION) {
+      if (type === KeyType.INPUT_NAVIGATION || type === KeyType.KEYPAD_NAVIGATION) {
         focusBackgroundStyle = styles$8.light;
       } else {
         focusBackgroundStyle = styles$8.bright;
@@ -5022,34 +4993,34 @@ class KeypadButton extends React.PureComponent {
       // Select the appropriate style for the button.
       let backgroundStyle;
       switch (type) {
-        case KeyTypes.EMPTY:
+        case KeyType.EMPTY:
           backgroundStyle = styles$8.empty;
           break;
-        case KeyTypes.MANY:
-        case KeyTypes.VALUE:
+        case KeyType.MANY:
+        case KeyType.VALUE:
           backgroundStyle = styles$8.value;
           break;
-        case KeyTypes.OPERATOR:
+        case KeyType.OPERATOR:
           backgroundStyle = styles$8.operator;
           break;
-        case KeyTypes.INPUT_NAVIGATION:
-        case KeyTypes.KEYPAD_NAVIGATION:
+        case KeyType.INPUT_NAVIGATION:
+        case KeyType.KEYPAD_NAVIGATION:
           backgroundStyle = styles$8.control;
           break;
-        case KeyTypes.ECHO:
+        case KeyType.ECHO:
           backgroundStyle = null;
           break;
       }
       const borderStyle = [];
-      if (borders.includes(BorderDirections.LEFT)) {
+      if (borders.includes(BorderDirection.LEFT)) {
         // @ts-expect-error TS2345
         borderStyle.push(styles$8.leftBorder);
       }
-      if (borders.includes(BorderDirections.BOTTOM)) {
+      if (borders.includes(BorderDirection.BOTTOM)) {
         // @ts-expect-error TS2345
         borderStyle.push(styles$8.bottomBorder);
       }
-      return [styles$8.buttonBase, backgroundStyle, ...borderStyle, type === KeyTypes.ECHO && styles$8.echo, this.buttonSizeStyle,
+      return [styles$8.buttonBase, backgroundStyle, ...borderStyle, type === KeyType.ECHO && styles$8.echo, this.buttonSizeStyle,
       // React Native allows you to set the 'style' props on user defined
       // components.
       //   See: https://facebook.github.io/react-native/docs/style.html
@@ -5091,7 +5062,7 @@ class KeypadButton extends React.PureComponent {
 
     // We render in the focus state if the key is focused, or if it's an
     // echo.
-    const renderFocused = !disabled && focused || popoverEnabled || type === KeyTypes.ECHO;
+    const renderFocused = !disabled && focused || popoverEnabled || type === KeyType.ECHO;
     const buttonStyle = this._getButtonStyle(type, borders, style);
     const focusStyle = this._getFocusStyle(type);
     const iconWrapperStyle = [styles$8.iconWrapper, disabled ? styles$8.disabled : undefined];
@@ -5107,11 +5078,11 @@ class KeypadButton extends React.PureComponent {
     const maybeCornerDecal = !renderFocused && !disabled && childKeys && childKeys.length > 0 && /*#__PURE__*/React.createElement(CornerDecal, {
       style: styles$8.decalInset
     });
-    if (type === KeyTypes.EMPTY) {
+    if (type === KeyType.EMPTY) {
       return /*#__PURE__*/React.createElement(View, _extends({
         style: buttonStyle
       }, eventHandlers));
-    } else if (type === KeyTypes.MANY) {
+    } else if (type === KeyType.MANY) {
       // TODO(charlie): Make the long-press interaction accessible. See
       // the TODO in key-configs.js for more.
       const manyButtonA11yMarkup = {
@@ -5350,7 +5321,7 @@ const mapStateToProps$5 = (state, ownProps) => {
 
   // Override with the default child props, if the key is a multi-symbol key
   // (but not a many-symbol key, which operates under different rules).
-  const useFirstChildProps = type !== KeyTypes.MANY && childKeys && childKeys.length > 0;
+  const useFirstChildProps = type !== KeyType.MANY && childKeys && childKeys.length > 0;
   return _extends({}, rest, {
     childKeyIds: childKeyIds,
     gestureManager: gestures.gestureManager,
@@ -5395,7 +5366,7 @@ class ManyKeypadButton extends React.Component {
     } else {
       const keyConfig = {
         id: Keys.MANY,
-        type: KeyTypes.MANY,
+        type: KeyType.MANY,
         childKeyIds: keys
       };
       return /*#__PURE__*/React.createElement(TouchableKeypadButton$1, _extends({
@@ -5454,7 +5425,7 @@ class Echo extends React.Component {
       style: containerStyle
     }, /*#__PURE__*/React.createElement(KeypadButton$1, {
       icon: icon,
-      type: KeyTypes.ECHO,
+      type: KeyType.ECHO,
       borders: borders
     }));
   }
@@ -5468,15 +5439,15 @@ class EchoManager extends React.Component {
       let animationDurationMs;
       let animationTransitionName;
       switch (animationType) {
-        case EchoAnimationTypes.SLIDE_AND_FADE:
+        case EchoAnimationType.SLIDE_AND_FADE:
           animationDurationMs = 400;
           animationTransitionName = "echo-slide-and-fade";
           break;
-        case EchoAnimationTypes.FADE_ONLY:
+        case EchoAnimationType.FADE_ONLY:
           animationDurationMs = 300;
           animationTransitionName = "echo-fade-only";
           break;
-        case EchoAnimationTypes.LONG_FADE_ONLY:
+        case EchoAnimationType.LONG_FADE_ONLY:
           animationDurationMs = 400;
           animationTransitionName = "echo-long-fade-only";
           break;
@@ -5494,7 +5465,7 @@ class EchoManager extends React.Component {
       echoes,
       onAnimationFinish
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", null, Object.keys(EchoAnimationTypes).map(animationType => {
+    return /*#__PURE__*/React.createElement("span", null, Object.keys(EchoAnimationType).map(animationType => {
       // Collect the relevant parameters for the animation type, and
       // filter for the appropriate echoes.
       const {
@@ -6020,25 +5991,25 @@ class ExpressionKeypad extends React.Component {
     let dismissOrJumpOutKey;
     if (dynamicJumpOut) {
       switch (cursorContext) {
-        case IN_PARENS:
+        case CursorContext.IN_PARENS:
           dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_PARENTHESES;
           break;
-        case IN_SUPER_SCRIPT:
+        case CursorContext.IN_SUPER_SCRIPT:
           dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_EXPONENT;
           break;
-        case IN_SUB_SCRIPT:
+        case CursorContext.IN_SUB_SCRIPT:
           dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_BASE;
           break;
-        case BEFORE_FRACTION:
+        case CursorContext.BEFORE_FRACTION:
           dismissOrJumpOutKey = KeyConfigs.JUMP_INTO_NUMERATOR;
           break;
-        case IN_NUMERATOR:
+        case CursorContext.IN_NUMERATOR:
           dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_NUMERATOR;
           break;
-        case IN_DENOMINATOR:
+        case CursorContext.IN_DENOMINATOR:
           dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_DENOMINATOR;
           break;
-        case NONE:
+        case CursorContext.NONE:
         default:
           dismissOrJumpOutKey = KeyConfigs.DISMISS;
           break;
@@ -6253,25 +6224,25 @@ class FractionKeypad extends React.Component {
     let dismissOrJumpOutKey;
     if (dynamicJumpOut) {
       switch (cursorContext) {
-        case IN_PARENS:
+        case CursorContext.IN_PARENS:
           dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_PARENTHESES;
           break;
-        case IN_SUPER_SCRIPT:
+        case CursorContext.IN_SUPER_SCRIPT:
           dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_EXPONENT;
           break;
-        case IN_SUB_SCRIPT:
+        case CursorContext.IN_SUB_SCRIPT:
           dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_BASE;
           break;
-        case BEFORE_FRACTION:
+        case CursorContext.BEFORE_FRACTION:
           dismissOrJumpOutKey = KeyConfigs.JUMP_INTO_NUMERATOR;
           break;
-        case IN_NUMERATOR:
+        case CursorContext.IN_NUMERATOR:
           dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_NUMERATOR;
           break;
-        case IN_DENOMINATOR:
+        case CursorContext.IN_DENOMINATOR:
           dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_DENOMINATOR;
           break;
-        case NONE:
+        case CursorContext.NONE:
         default:
           dismissOrJumpOutKey = KeyConfigs.DISMISS;
           break;
@@ -6300,7 +6271,7 @@ class FractionKeypad extends React.Component {
       // then when the cursor was inside a parenthetical
       // expression in a numerator or denominator, this check
       // would fail.
-      cursorContext === IN_NUMERATOR || cursorContext === IN_DENOMINATOR,
+      cursorContext === CursorContext.IN_NUMERATOR || cursorContext === CursorContext.IN_DENOMINATOR,
       style: roundTopRight && roundedTopRight
     })), /*#__PURE__*/React.createElement(View, {
       style: row$2
@@ -6357,10 +6328,10 @@ var FractionKeypad$1 = connect(mapStateToProps$1, null, null, {
   forwardRef: true
 })(FractionKeypad);
 
-const defaultKeypadType = KeypadTypes.EXPRESSION;
+const defaultKeypadType = KeypadType.EXPRESSION;
 const keypadForType = {
-  [KeypadTypes.FRACTION]: fractionKeypadLayout,
-  [KeypadTypes.EXPRESSION]: expressionKeypadLayout
+  [KeypadType.FRACTION]: fractionKeypadLayout,
+  [KeypadType.EXPRESSION]: expressionKeypadLayout
 };
 
 const initialKeypadState = {
@@ -6468,8 +6439,8 @@ const computeLayoutParameters = ({
 
   // Then, compute the button dimensions based on the provided parameters.
   let buttonDimensions;
-  if (deviceType === DeviceTypes.PHONE) {
-    const isLandscape = deviceOrientation === DeviceOrientations.LANDSCAPE;
+  if (deviceType === DeviceType.PHONE) {
+    const isLandscape = deviceOrientation === DeviceOrientation.LANDSCAPE;
 
     // In many cases, the browser chrome will already have been factored
     // into `pageHeightPx`. But we have no way of knowing if that's
@@ -6512,7 +6483,7 @@ const computeLayoutParameters = ({
       widthPx: buttonWidthPx,
       heightPx: buttonHeightPx
     };
-  } else if (deviceType === DeviceTypes.TABLET) {
+  } else if (deviceType === DeviceType.TABLET) {
     buttonDimensions = {
       widthPx: maxButtonSize,
       heightPx: maxButtonSize
@@ -6527,7 +6498,7 @@ const computeLayoutParameters = ({
   const keypadWidth = effectiveNumColumns * buttonDimensions.widthPx + (navigationPadEnabled ? navigationPadWidthPx : 0) + numSeparators * innerBorderWidthPx;
   return {
     buttonDimensions,
-    layoutMode: keypadWidth >= pageWidthPx ? LayoutModes.FULLSCREEN : LayoutModes.COMPACT
+    layoutMode: keypadWidth >= pageWidthPx ? LayoutMode.FULLSCREEN : LayoutMode.COMPACT
   };
 };
 
@@ -6546,7 +6517,7 @@ const initialLayoutState = {
     pageWidthPx: 0,
     pageHeightPx: 0
   },
-  layoutMode: LayoutModes.FULLSCREEN,
+  layoutMode: LayoutMode.FULLSCREEN,
   paginationEnabled: false,
   navigationPadEnabled: false
 };
@@ -6562,13 +6533,13 @@ const layoutParametersForDimensions = (pageDimensions, gridDimensions) => {
   } = 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;
+  const deviceOrientation = pageWidthPx > pageHeightPx ? DeviceOrientation.LANDSCAPE : DeviceOrientation.PORTRAIT;
+  const deviceType = Math.min(pageWidthPx, pageHeightPx) > tabletCutoffPx ? DeviceType.TABLET : DeviceType.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 navigationPadEnabled = deviceType === DeviceType.TABLET;
+  const paginationEnabled = deviceType === DeviceType.PHONE && deviceOrientation === DeviceOrientation.PORTRAIT;
   const deviceInfo = {
     deviceOrientation,
     deviceType
@@ -6727,7 +6698,7 @@ const pagerReducer = function pagerReducer(state = initialPagerState, action) {
       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) {
+      if (keyConfig.type === KeyType.VALUE || keyConfig.type === KeyType.OPERATOR) {
         return _extends({}, state, {
           animateToPosition: true,
           // We start at the right-most page.
@@ -7010,8 +6981,8 @@ class KeypadContainer extends React.Component {
         // compact keypad, we need to instruct some of our child views to
         // crop themselves. At least we're colocating all the layout
         // information in this component, though.
-        roundTopLeft: layoutMode === LayoutModes.COMPACT && !navigationPadEnabled,
-        roundTopRight: layoutMode === LayoutModes.COMPACT
+        roundTopLeft: layoutMode === LayoutMode.COMPACT && !navigationPadEnabled,
+        roundTopRight: layoutMode === LayoutMode.COMPACT
       };
 
       // Select the appropriate keyboard given the type.
@@ -7022,9 +6993,9 @@ class KeypadContainer extends React.Component {
       // clear what that format would look like exactly. Plus, there aren't
       // very many of them. So to keep us moving, we'll just hardcode.
       switch (keypadType) {
-        case KeypadTypes.FRACTION:
+        case KeypadType.FRACTION:
           return /*#__PURE__*/React.createElement(FractionKeypad$1, keypadProps);
-        case KeypadTypes.EXPRESSION:
+        case KeypadType.EXPRESSION:
           return /*#__PURE__*/React.createElement(ExpressionKeypad$1, keypadProps);
         default:
           throw new Error("Invalid keypad type: " + keypadType);
@@ -7082,7 +7053,7 @@ class KeypadContainer extends React.Component {
       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];
+    const keypadStyle = [row, styles.keypadBorder, layoutMode === LayoutMode.FULLSCREEN ? styles.fullscreen : styles.compact];
 
     // TODO(charlie): When the keypad is shorter than the width of the
     // screen, add a border on its left and right edges, and round out the
@@ -7100,7 +7071,7 @@ class KeypadContainer extends React.Component {
         }
       }
     }, navigationPadEnabled && /*#__PURE__*/React.createElement(NavigationPad, {
-      roundTopLeft: layoutMode === LayoutModes.COMPACT,
+      roundTopLeft: layoutMode === LayoutMode.COMPACT,
       style: styles.navigationPadContainer
     }), /*#__PURE__*/React.createElement(View, {
       style: styles.keypadLayout
@@ -7246,5 +7217,5 @@ class ProvidedKeypad extends React.Component {
   }
 }
 
-export { cursorContexts as CursorContexts, KeyConfigs, ProvidedKeypad as Keypad, MathInput as KeypadInput, KeypadTypes, keypadElementPropType };
+export { CursorContext, KeyConfigs, KeyType, ProvidedKeypad as Keypad, MathInput as KeypadInput, KeypadType, Keys, keypadElementPropType };
 //# sourceMappingURL=index.js.map