@khanacademy/math-input 1.0.1 → 2.0.0

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,7 +2,7 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {KeypadTypes, LayoutModes} from "../consts";
+import {LayoutMode, KeypadType} from "../enums";
 import {View} from "../fake-react-native-web/index";
 import {setPageSize} from "../store/actions";
 
@@ -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/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";
 

package/src/components/navigation-pad.tsx

@@ -6,8 +6,8 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {BorderStyles} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import {BorderStyles} from "../enums";
 import {View} from "../fake-react-native-web/index";
 
 import {

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

@@ -9,27 +9,27 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 
-import {KeyType, KeyTypes} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import Keys from "../data/keys";
+import {KeyType} from "../enums";
 
 import GestureManager from "./gesture-manager";
 import KeypadButton from "./keypad-button";
 
-import type {Key} from "../data/keys";
-import type {Border, Icon} from "../types";
+import type {Border, IconConfig} from "../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 type Props = {
     borders: Border;
-    childKeyIds: ReadonlyArray<Key>;
+    childKeyIds: ReadonlyArray<Keys>;
     disabled: boolean;
     focused: boolean;
     gestureManager: GestureManager;
-    id: Key;
+    id: Keys;
     popoverEnabled: boolean;
     style: StyleType;
     type: KeyType;
-    icon: Icon;
+    icon: IconConfig;
 };
 
 class TouchableKeypadButton extends React.Component<Props> {
@@ -118,7 +118,7 @@ const mapStateToProps = (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;
+        type !== KeyType.MANY && childKeys && childKeys.length > 0;
 
     return {
         ...rest,

package/src/data/key-configs.ts

@@ -3,7 +3,7 @@
  */
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 
-import {DecimalSeparators, IconTypes, KeyTypes} from "../consts";
+import {DecimalSeparator, IconType, KeyType} from "../enums";
 import {decimalSeparator} from "../utils";
 
 import Keys from "./keys";
@@ -17,240 +17,240 @@ export type KeyConfig = {
 const KeyConfigs: any = {
     // 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
+            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"),
     },
@@ -268,7 +268,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.
 };
 
@@ -280,10 +280,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,
         },
     };
@@ -324,10 +324,10 @@ for (const letter of LETTERS) {
 
     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,
             },
         };
@@ -339,7 +339,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],