@khanacademy/math-input 1.0.0 → 2.0.0

package/src/components/input/cursor-contexts.ts

@@ -1,5 +1,5 @@
 /**
- * Constants that define the various contexts in which a cursor can exist. The
+ * 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
@@ -10,35 +10,28 @@
  * the radical.
  */
 
-export type CursorContext = // The cursor is not in any of the other viable contexts.
+export enum CursorContext {
+    // The cursor is not in any of the other viable contexts.
+    NONE = "NONE",
+
     // The cursor is within a set of parentheses.
-    | "NONE" // The cursor is within a superscript (e.g., an exponent).
-    | "IN_PARENS" // The cursor is within a subscript (e.g., the base of a custom logarithm).
-    | "IN_SUPER_SCRIPT" // The cursor is in the numerator of a fraction.
-    | "IN_SUB_SCRIPT" // The cursor is in the denominator of a fraction.
-    | "IN_NUMERATOR" // The cursor is sitting before a fraction; that is, the cursor is within
+    IN_PARENS = "IN_PARENS",
+
+    // The cursor is within a superscript (e.g., an exponent).
+    IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT",
+
+    // The cursor is within a subscript (e.g., the base of a custom logarithm).
+    IN_SUB_SCRIPT = "IN_SUB_SCRIPT",
+
+    // The cursor is in the numerator of a fraction.
+    IN_NUMERATOR = "IN_NUMERATOR",
+
+    // The cursor is in the denominator of a fraction.
+    IN_DENOMINATOR = "IN_DENOMINATOR",
+
+    // The cursor is sitting before a fraction; that is, the cursor is within
     // what looks to be a mixed number preceding a fraction. This will only be
     // the case when the only math between the cursor and the fraction to its
     // write is non-leaf math (numbers and variables).
-    | "IN_DENOMINATOR"
-    | "BEFORE_FRACTION";
-
-// TODO: Get rid of these constants in favour of CursorContext type.
-
-// The cursor is not in any of the other viable contexts.
-export const NONE = "NONE";
-// The cursor is within a set of parentheses.
-export const IN_PARENS = "IN_PARENS";
-// The cursor is within a superscript (e.g., an exponent).
-export const IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT";
-// The cursor is within a subscript (e.g., the base of a custom logarithm).
-export const IN_SUB_SCRIPT = "IN_SUB_SCRIPT";
-// The cursor is in the numerator of a fraction.
-export const IN_NUMERATOR = "IN_NUMERATOR";
-// The cursor is in the denominator of a fraction.
-export 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).
-export const BEFORE_FRACTION = "BEFORE_FRACTION";
+    BEFORE_FRACTION = "BEFORE_FRACTION",
+}

package/src/components/input/math-wrapper.ts

@@ -7,55 +7,57 @@
 import $ from "jquery";
 import MathQuill from "mathquill";
 
-import {DecimalSeparators} from "../../consts";
 import Keys from "../../data/keys";
+import {DecimalSeparator} from "../../enums";
 import {decimalSeparator} from "../../utils";
 
-import * as CursorContexts from "./cursor-contexts";
+import {CursorContext} from "./cursor-contexts";
 
 // 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 decimalSymbol = decimalSeparator === DecimalSeparator.COMMA ? "," : ".";
 
-const WRITE = "write";
-const CMD = "cmd";
-const KEYSTROKE = "keystroke";
-const MQ_END = 0;
+enum ActionType {
+    WRITE = "write",
+    CMD = "cmd",
+    KEYSTROKE = "keystroke",
+    MQ_END = 0,
+}
 
 // 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},
-    [Keys.MINUS]: {str: "-", fn: WRITE},
-    [Keys.NEGATIVE]: {str: "-", fn: WRITE},
-    [Keys.TIMES]: {str: "\\times", fn: WRITE},
-    [Keys.DIVIDE]: {str: "\\div", fn: WRITE},
+const KeyActions: {[K in Keys]?: {str: string; fn: ActionType}} = {
+    [Keys.PLUS]: {str: "+", fn: ActionType.WRITE},
+    [Keys.MINUS]: {str: "-", fn: ActionType.WRITE},
+    [Keys.NEGATIVE]: {str: "-", fn: ActionType.WRITE},
+    [Keys.TIMES]: {str: "\\times", fn: ActionType.WRITE},
+    [Keys.DIVIDE]: {str: "\\div", fn: ActionType.WRITE},
     [Keys.DECIMAL]: {
         str: decimalSymbol,
-        fn: WRITE,
+        fn: ActionType.WRITE,
     },
-    [Keys.EQUAL]: {str: "=", fn: WRITE},
-    [Keys.NEQ]: {str: "\\neq", fn: WRITE},
-    [Keys.CDOT]: {str: "\\cdot", fn: WRITE},
-    [Keys.PERCENT]: {str: "%", fn: WRITE},
-    [Keys.LEFT_PAREN]: {str: "(", fn: CMD},
-    [Keys.RIGHT_PAREN]: {str: ")", fn: CMD},
-    [Keys.SQRT]: {str: "sqrt", fn: CMD},
-    [Keys.PI]: {str: "pi", fn: CMD},
-    [Keys.THETA]: {str: "theta", fn: CMD},
-    [Keys.RADICAL]: {str: "nthroot", fn: CMD},
-    [Keys.LT]: {str: "<", fn: WRITE},
-    [Keys.LEQ]: {str: "\\leq", fn: WRITE},
-    [Keys.GT]: {str: ">", fn: WRITE},
-    [Keys.GEQ]: {str: "\\geq", fn: WRITE},
-    [Keys.UP]: {str: "Up", fn: KEYSTROKE},
-    [Keys.DOWN]: {str: "Down", fn: KEYSTROKE},
+    [Keys.EQUAL]: {str: "=", fn: ActionType.WRITE},
+    [Keys.NEQ]: {str: "\\neq", fn: ActionType.WRITE},
+    [Keys.CDOT]: {str: "\\cdot", fn: ActionType.WRITE},
+    [Keys.PERCENT]: {str: "%", fn: ActionType.WRITE},
+    [Keys.LEFT_PAREN]: {str: "(", fn: ActionType.CMD},
+    [Keys.RIGHT_PAREN]: {str: ")", fn: ActionType.CMD},
+    [Keys.SQRT]: {str: "sqrt", fn: ActionType.CMD},
+    [Keys.PI]: {str: "pi", fn: ActionType.CMD},
+    [Keys.THETA]: {str: "theta", fn: ActionType.CMD},
+    [Keys.RADICAL]: {str: "nthroot", fn: ActionType.CMD},
+    [Keys.LT]: {str: "<", fn: ActionType.WRITE},
+    [Keys.LEQ]: {str: "\\leq", fn: ActionType.WRITE},
+    [Keys.GT]: {str: ">", fn: ActionType.WRITE},
+    [Keys.GEQ]: {str: "\\geq", fn: ActionType.WRITE},
+    [Keys.UP]: {str: "Up", fn: ActionType.KEYSTROKE},
+    [Keys.DOWN]: {str: "Down", 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},
+    [Keys.FRAC_INCLUSIVE]: {str: "/", fn: ActionType.CMD},
 };
 
 const NormalCommands = {
@@ -110,12 +112,12 @@ const ValidLeaves = [
 ];
 
 const KeysForJumpContext = {
-    [CursorContexts.IN_PARENS]: Keys.JUMP_OUT_PARENTHESES,
-    [CursorContexts.IN_SUPER_SCRIPT]: Keys.JUMP_OUT_EXPONENT,
-    [CursorContexts.IN_SUB_SCRIPT]: Keys.JUMP_OUT_BASE,
-    [CursorContexts.BEFORE_FRACTION]: Keys.JUMP_INTO_NUMERATOR,
-    [CursorContexts.IN_NUMERATOR]: Keys.JUMP_OUT_NUMERATOR,
-    [CursorContexts.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 {
@@ -179,14 +181,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
-            const shouldNavigateLeft = cursor[this.MQ.L] === MQ_END;
+            const shouldNavigateLeft = cursor[this.MQ.L] === ActionType.MQ_END;
             this.mathField.cmd("\\frac");
         } else if (key === Keys.LOG_N) {
             this.mathField.write("log_{ }\\left(\\right)");
@@ -218,9 +220,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) {
@@ -325,7 +327,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,
@@ -362,17 +364,17 @@ class MathWrapper {
         }
 
         switch (context) {
-            case CursorContexts.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 CursorContexts.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];
                     }
@@ -384,7 +386,7 @@ class MathWrapper {
                 this.mathField.keystroke("Right");
                 break;
 
-            case CursorContexts.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
@@ -397,11 +399,11 @@ class MathWrapper {
                 }
                 break;
 
-            case CursorContexts.IN_DENOMINATOR:
+            case CursorContext.IN_DENOMINATOR:
                 cursor.insRightOf(cursor.parent.parent);
                 break;
 
-            case CursorContexts.IN_SUB_SCRIPT:
+            case CursorContext.IN_SUB_SCRIPT:
                 // Insert just beyond the superscript.
                 cursor.insRightOf(cursor.parent.parent);
 
@@ -413,7 +415,7 @@ class MathWrapper {
                 }
                 break;
 
-            case CursorContexts.IN_SUPER_SCRIPT:
+            case CursorContext.IN_SUPER_SCRIPT:
                 // Insert just beyond the superscript.
                 cursor.insRightOf(cursor.parent.parent);
                 break;
@@ -458,7 +460,10 @@ class MathWrapper {
                 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");
@@ -476,10 +481,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(") {
@@ -518,7 +523,7 @@ class MathWrapper {
 
         const precedingNode = cursor[this.MQ.L];
         const shouldPrefixWithParens =
-            precedingNode === MQ_END ||
+            precedingNode === ActionType.MQ_END ||
             invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
         if (shouldPrefixWithParens) {
             this.mathField.write("\\left(\\right)");
@@ -737,7 +742,10 @@ class MathWrapper {
     }
 
     _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) {
@@ -769,14 +777,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");
@@ -796,7 +804,7 @@ class MathWrapper {
             cursor.insLeftOf(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);
@@ -836,7 +844,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);
@@ -876,7 +884,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.
@@ -929,9 +937,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 CursorContexts.BEFORE_FRACTION;
+                return CursorContext.BEFORE_FRACTION;
             } else if (!this._isLeaf(visitor[this.MQ.R])) {
                 break;
             }
@@ -941,17 +949,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 CursorContexts.IN_PARENS;
+            return CursorContext.IN_PARENS;
         } else if (this._isNumerator(cursor.parent)) {
-            return CursorContexts.IN_NUMERATOR;
+            return CursorContext.IN_NUMERATOR;
         } else if (this._isDenominator(cursor.parent)) {
-            return CursorContexts.IN_DENOMINATOR;
+            return CursorContext.IN_DENOMINATOR;
         } else if (this._isSubScript(cursor.parent)) {
-            return CursorContexts.IN_SUB_SCRIPT;
+            return CursorContext.IN_SUB_SCRIPT;
         } else if (this._isSuperScript(cursor.parent)) {
-            return CursorContexts.IN_SUPER_SCRIPT;
+            return CursorContext.IN_SUPER_SCRIPT;
         } else {
-            return CursorContexts.NONE;
+            return CursorContext.NONE;
         }
     }
 

package/src/components/keypad/index.tsx

@@ -31,7 +31,7 @@ const allPages = function (props: Props): React.ReactElement {
     return pages;
 };
 
-export default class PreAlgebraKeypad extends React.Component<Props, State> {
+export default class Keypad extends React.Component<Props, State> {
     state: State = {
         selectedPage: "Numbers",
     };

package/src/components/keypad-button.tsx

@@ -6,7 +6,7 @@ import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {KeyTypes, BorderDirections, BorderStyles} from "../consts";
+import {BorderDirection, BorderStyles, KeyType} from "../enums";
 import {View} from "../fake-react-native-web/index";
 
 import {
@@ -23,9 +23,8 @@ import CornerDecal from "./corner-decal";
 import Icon from "./icon";
 import MultiSymbolGrid from "./multi-symbol-grid";
 
-import type {KeyType} from "../consts";
 import type {State} from "../store/types";
-import type {Border, KeyConfig, Icon as IconType} from "../types";
+import type {Border, KeyConfig, IconConfig} from "../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 interface ReduxProps {
@@ -41,7 +40,7 @@ interface Props extends ReduxProps {
     focused: boolean;
     popoverEnabled: boolean;
     type: KeyType;
-    icon: IconType;
+    icon: IconConfig;
     style?: StyleType;
     onTouchCancel?: (evt: React.TouchEvent<HTMLDivElement>) => void;
     onTouchEnd?: (evt: React.TouchEvent<HTMLDivElement>) => void;
@@ -102,7 +101,7 @@ class KeypadButton extends React.PureComponent<Props> {
         // 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)) {
@@ -114,11 +113,11 @@ class KeypadButton extends React.PureComponent<Props> {
         }
     };
 
-    _getFocusStyle = (type) => {
+    _getFocusStyle = (type: KeyType) => {
         let focusBackgroundStyle;
         if (
-            type === KeyTypes.INPUT_NAVIGATION ||
-            type === KeyTypes.KEYPAD_NAVIGATION
+            type === KeyType.INPUT_NAVIGATION ||
+            type === KeyType.KEYPAD_NAVIGATION
         ) {
             focusBackgroundStyle = styles.light;
         } else {
@@ -132,35 +131,35 @@ class KeypadButton extends React.PureComponent<Props> {
         // Select the appropriate style for the button.
         let backgroundStyle;
         switch (type) {
-            case KeyTypes.EMPTY:
+            case KeyType.EMPTY:
                 backgroundStyle = styles.empty;
                 break;
 
-            case KeyTypes.MANY:
-            case KeyTypes.VALUE:
+            case KeyType.MANY:
+            case KeyType.VALUE:
                 backgroundStyle = styles.value;
                 break;
 
-            case KeyTypes.OPERATOR:
+            case KeyType.OPERATOR:
                 backgroundStyle = styles.operator;
                 break;
 
-            case KeyTypes.INPUT_NAVIGATION:
-            case KeyTypes.KEYPAD_NAVIGATION:
+            case KeyType.INPUT_NAVIGATION:
+            case KeyType.KEYPAD_NAVIGATION:
                 backgroundStyle = styles.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.leftBorder);
         }
-        if (borders.includes(BorderDirections.BOTTOM)) {
+        if (borders.includes(BorderDirection.BOTTOM)) {
             // @ts-expect-error TS2345
             borderStyle.push(styles.bottomBorder);
         }
@@ -169,7 +168,7 @@ class KeypadButton extends React.PureComponent<Props> {
             styles.buttonBase,
             backgroundStyle,
             ...borderStyle,
-            type === KeyTypes.ECHO && styles.echo,
+            type === KeyType.ECHO && styles.echo,
             this.buttonSizeStyle,
             // React Native allows you to set the 'style' props on user defined
             // components.
@@ -198,7 +197,7 @@ class KeypadButton extends React.PureComponent<Props> {
         // 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;
+            (!disabled && focused) || popoverEnabled || type === KeyType.ECHO;
         const buttonStyle = this._getButtonStyle(type, borders, style);
         const focusStyle = this._getFocusStyle(type);
         const iconWrapperStyle = [
@@ -219,9 +218,9 @@ class KeypadButton extends React.PureComponent<Props> {
             childKeys &&
             childKeys.length > 0 && <CornerDecal style={styles.decalInset} />;
 
-        if (type === KeyTypes.EMPTY) {
+        if (type === KeyType.EMPTY) {
             return <View 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 = {

package/src/components/keypad-container.tsx

@@ -2,9 +2,9 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {setPageSize} from "../actions/index";
-import {KeypadTypes, LayoutModes} from "../consts";
+import {LayoutMode, KeypadType} from "../enums";
 import {View} from "../fake-react-native-web/index";
+import {setPageSize} from "../store/actions";
 
 import {
     innerBorderColor,
@@ -18,7 +18,6 @@ import NavigationPad from "./navigation-pad";
 import Styles from "./styles";
 import * as zIndexes from "./z-indexes";
 
-import type {KeypadType} from "../consts";
 import type {State as ReduxState} from "../store/types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
@@ -28,7 +27,7 @@ interface ReduxProps {
     active?: boolean;
     extraKeys?: ReadonlyArray<string>;
     keypadType?: KeypadType;
-    layoutMode?: keyof typeof LayoutModes;
+    layoutMode?: LayoutMode;
     navigationPadEnabled?: boolean;
 }
 
@@ -128,8 +127,8 @@ class KeypadContainer extends React.Component<Props, State> {
             // crop themselves. At least we're colocating all the layout
             // information in this component, though.
             roundTopLeft:
-                layoutMode === LayoutModes.COMPACT && !navigationPadEnabled,
-            roundTopRight: layoutMode === LayoutModes.COMPACT,
+                layoutMode === LayoutMode.COMPACT && !navigationPadEnabled,
+            roundTopRight: layoutMode === LayoutMode.COMPACT,
         };
 
         // Select the appropriate keyboard given the type.
@@ -140,10 +139,10 @@ class KeypadContainer extends React.Component<Props, State> {
         // 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 <FractionKeypad {...keypadProps} />;
 
-            case KeypadTypes.EXPRESSION:
+            case KeypadType.EXPRESSION:
                 return <ExpressionKeypad {...keypadProps} />;
 
             default:
@@ -186,7 +185,7 @@ class KeypadContainer extends React.Component<Props, State> {
         const keypadStyle = [
             row,
             styles.keypadBorder,
-            layoutMode === LayoutModes.FULLSCREEN
+            layoutMode === LayoutMode.FULLSCREEN
                 ? styles.fullscreen
                 : styles.compact,
         ];
@@ -211,7 +210,7 @@ class KeypadContainer extends React.Component<Props, State> {
                 >
                     {navigationPadEnabled && (
                         <NavigationPad
-                            roundTopLeft={layoutMode === LayoutModes.COMPACT}
+                            roundTopLeft={layoutMode === LayoutMode.COMPACT}
                             style={styles.navigationPadContainer}
                         />
                     )}

package/src/components/keypad.tsx

@@ -7,8 +7,8 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 
-import {removeEcho} from "../actions/index";
 import {View} from "../fake-react-native-web/index";
+import {removeEcho} from "../store/actions";
 
 import EchoManager from "./echo-manager";
 import PopoverManager from "./popover-manager";

package/src/components/many-keypad-button.tsx

@@ -5,9 +5,9 @@
 
 import * as React from "react";
 
-import {KeyTypes} from "../consts";
 import KeyConfigs from "../data/key-configs";
 import Keys from "../data/keys";
+import {KeyType} from "../enums";
 
 import EmptyKeypadButton from "./empty-keypad-button";
 import TouchableKeypadButton from "./touchable-keypad-button";
@@ -35,7 +35,7 @@ class ManyKeypadButton extends React.Component<Props> {
         } else {
             const keyConfig = {
                 id: Keys.MANY,
-                type: KeyTypes.MANY,
+                type: KeyType.MANY,
                 childKeyIds: keys,
             };
             return <TouchableKeypadButton keyConfig={keyConfig} {...rest} />;

package/src/components/multi-symbol-grid.tsx

@@ -6,20 +6,19 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {IconTypes} from "../consts";
+import {IconType} from "../enums";
 import {View} from "../fake-react-native-web/index";
+import {IconConfig} from "../types";
 
 import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style";
 import Icon from "./icon";
 import Styles from "./styles";
 
-import type {Icon as IconType} from "../types";
-
 const {row, column, centered, fullWidth} = Styles;
 
 type Props = {
     focused: boolean;
-    icons: ReadonlyArray<IconType>;
+    icons: ReadonlyArray<IconConfig>;
 };
 
 class MultiSymbolGrid extends React.Component<Props> {
@@ -32,7 +31,7 @@ class MultiSymbolGrid extends React.Component<Props> {
         // 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}`,

package/src/components/multi-symbol-popover.tsx

@@ -5,7 +5,7 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {BorderStyles} from "../consts";
+import {BorderStyles} from "../enums";
 import {View} from "../fake-react-native-web/index";
 import {KeyConfig} from "../types";