@khanacademy/math-input 1.0.1 → 2.0.0

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # @khanacademy/math-input
 
-## 1.0.1
+## 2.0.0
+
+### Major Changes
+
+-   b585fe29: Switch most @khanacademy/math-input psuedo-enums to enums
 
 ### Patch Changes
 

package/dist/components/compute-layout-parameters.d.ts

@@ -18,6 +18,7 @@
  * to be conservative in our measurements and make things smaller than they
  * might need to be.
  */
+import { LayoutMode } from "../enums";
 export declare const computeLayoutParameters: ({ numColumns, numMaxVisibleRows, numPages }: {
     numColumns: any;
     numMaxVisibleRows: any;
@@ -34,5 +35,5 @@ export declare const computeLayoutParameters: ({ numColumns, numMaxVisibleRows,
     toolbarEnabled: any;
 }) => {
     buttonDimensions: any;
-    layoutMode: "FULLSCREEN" | "COMPACT";
+    layoutMode: LayoutMode;
 };

package/dist/components/compute-layout-parameters.js.flow

@@ -4,26 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
-/**
- * An algorithm for computing the appropriate layout parameters for the keypad,
- * including the size of the buttons and whether or not to render fullscreen,
- * taking into account a number of factors including the size of the screen, the
- * orientation of the screen, the presence of browser chrome, the presence of
- * other exercise-related chrome, the size of the input box, the parameters that
- * define the keypad (i.e., the number of rows, columns, and pages), and so
- * forth.
- *
- * The computations herein make some strong assumptions about the sizes of
- * various other elements and the situations under which they will be visible
- * (e.g., browser chrome). However, this is just a heuristic--it's not crucial
- * that our buttons are sized in a pixel-perfect manner, but rather, that we
- * make a balanced use of space.
- *
- * Note that one goal of the algorithm is to avoid resizing the keypad in the
- * face of dynamic browser chrome. In order to avoid that awkwardness, we tend
- * to be conservative in our measurements and make things smaller than they
- * might need to be.
- */
+import { LayoutMode } from "../enums";
 declare export var computeLayoutParameters: (
   x: {|
     numColumns: any,
@@ -45,5 +26,5 @@ declare export var computeLayoutParameters: (
   |}
 ) => {|
   buttonDimensions: any,
-  layoutMode: "FULLSCREEN" | "COMPACT",
+  layoutMode: LayoutMode,
 |};

package/dist/components/echo-manager.d.ts

@@ -2,14 +2,14 @@
  * A component that renders and animates the selection state effect effect.
  */
 import * as React from "react";
-import { EchoAnimationTypes } from "../consts";
-import type { Key } from "../data/keys";
+import Keys from "../data/keys";
+import { EchoAnimationType } from "../enums";
 import type { Border, Bound } from "../types";
 type EchoPropType = {
     animationId: string;
-    animationType: keyof typeof EchoAnimationTypes;
+    animationType: EchoAnimationType;
     borders: Border;
-    id: Key;
+    id: Keys;
     initialBounds: Bound;
 };
 type EchoManagerProps = {

package/dist/components/echo-manager.js.flow

@@ -5,14 +5,14 @@
  * @flow
  */
 import * as React from "react";
-import { EchoAnimationTypes } from "../consts";
-import type { Key } from "../data/keys";
+import Keys from "../data/keys";
+import { EchoAnimationType } from "../enums";
 import type { Border, Bound } from "../types";
 declare type EchoPropType = {|
   animationId: string,
-  animationType: $Keys<typeof EchoAnimationTypes>,
+  animationType: EchoAnimationType,
   borders: Border,
-  id: Key,
+  id: Keys,
   initialBounds: Bound,
 |};
 declare type EchoManagerProps = {|

package/dist/components/expression-keypad.d.ts

@@ -2,8 +2,8 @@
  * A keypad that includes all of the expression symbols.
  */
 import * as React from "react";
+import { CursorContext } from "./input/cursor-contexts";
 import type { KeypadLayout } from "../types";
-import type { CursorContext } from "./input/cursor-contexts";
 interface ReduxProps {
     currentPage: number;
     cursorContext?: CursorContext;

package/dist/components/expression-keypad.js.flow

@@ -6,8 +6,8 @@
  */
 import * as $Flowgen$Import$react_2d_redux from "react-redux";
 import * as React from "react";
+import { CursorContext } from "./input/cursor-contexts";
 import type { KeypadLayout } from "../types";
-import type { CursorContext } from "./input/cursor-contexts";
 declare interface ReduxProps {
   currentPage: number;
   cursorContext?: CursorContext;

package/dist/components/fraction-keypad.d.ts

@@ -3,8 +3,8 @@
  * with fractions, decimals, and percents.
  */
 import * as React from "react";
+import { CursorContext } from "./input/cursor-contexts";
 import type { KeypadLayout } from "../types";
-import type { CursorContext } from "./input/cursor-contexts";
 interface ReduxProps {
     cursorContext?: CursorContext;
     dynamicJumpOut: boolean;

package/dist/components/fraction-keypad.js.flow

@@ -6,8 +6,8 @@
  */
 import * as $Flowgen$Import$react_2d_redux from "react-redux";
 import * as React from "react";
+import { CursorContext } from "./input/cursor-contexts";
 import type { KeypadLayout } from "../types";
-import type { CursorContext } from "./input/cursor-contexts";
 declare interface ReduxProps {
   cursorContext?: CursorContext;
   dynamicJumpOut: boolean;

package/dist/components/gesture-state-machine.d.ts

@@ -1,4 +1,4 @@
-import type { Key } from "../data/keys";
+import Keys from "../data/keys";
 /**
  * The state machine that backs our gesture system. In particular, this state
  * machine manages the interplay between focuses, touch ups, and swiping.
@@ -21,25 +21,25 @@ type Options = {
     holdIntervalMs: number;
 };
 type TouchState = {
-    activeNodeId: Key;
+    activeNodeId: Keys;
     pressAndHoldIntervalId: number | null;
     longPressTimeoutId: number | null;
     swipeLocked: boolean;
     startX: number;
 };
-type TouchStateMap = Record<Key, TouchState>;
+type TouchStateMap = Record<Keys, TouchState>;
 type SwipeState = {
-    touchId: Key;
+    touchId: Keys;
     startX: number;
 };
 declare class GestureStateMachine {
     handlers: Handlers;
     options: Options;
-    swipeDisabledNodeIds: Partial<[Key]>;
-    multiPressableKeys: Partial<[Key]>;
+    swipeDisabledNodeIds: Partial<[Keys]>;
+    multiPressableKeys: Partial<[Keys]>;
     touchState: Partial<TouchStateMap>;
     swipeState: SwipeState | null;
-    constructor(handlers: Handlers, options: Partial<Options>, swipeDisabledNodeIds?: [Key], multiPressableKeys?: [Key]);
+    constructor(handlers: Handlers, options: Partial<Options>, swipeDisabledNodeIds?: [Keys], multiPressableKeys?: [Keys]);
     _maybeCancelLongPressForTouch(touchId: any): void;
     _maybeCancelPressAndHoldForTouch(touchId: any): void;
     _cleanupTouchEvent(touchId: any): void;

package/dist/components/gesture-state-machine.js.flow

@@ -4,7 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
-import type { Key } from "../data/keys";
+import Keys from "../data/keys";
 
 /**
  * The state machine that backs our gesture system. In particular, this state
@@ -28,29 +28,29 @@ declare type Options = {|
   holdIntervalMs: number,
 |};
 declare type TouchState = {|
-  activeNodeId: Key,
+  activeNodeId: Keys,
   pressAndHoldIntervalId: number | null,
   longPressTimeoutId: number | null,
   swipeLocked: boolean,
   startX: number,
 |};
-declare type TouchStateMap = { [key: Key]: TouchState };
+declare type TouchStateMap = { [key: Keys]: TouchState };
 declare type SwipeState = {|
-  touchId: Key,
+  touchId: Keys,
   startX: number,
 |};
 declare class GestureStateMachine {
   handlers: Handlers;
   options: Options;
-  swipeDisabledNodeIds: $Rest<[Key], {}>;
-  multiPressableKeys: $Rest<[Key], {}>;
+  swipeDisabledNodeIds: $Rest<[Keys], {}>;
+  multiPressableKeys: $Rest<[Keys], {}>;
   touchState: $Rest<TouchStateMap, {}>;
   swipeState: SwipeState | null;
   constructor(
     handlers: Handlers,
     options: $Rest<Options, {}>,
-    swipeDisabledNodeIds?: [Key],
-    multiPressableKeys?: [Key]
+    swipeDisabledNodeIds?: [Keys],
+    multiPressableKeys?: [Keys]
   ): this;
   _maybeCancelLongPressForTouch(touchId: any): void;
   _maybeCancelPressAndHoldForTouch(touchId: any): void;

package/dist/components/icon.d.ts

@@ -2,11 +2,11 @@
  * A component that renders an icon for a symbol with the given name.
  */
 import * as React from "react";
-import type { Icon as IconPropType } from "../types";
+import type { IconConfig } from "../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
     focused: boolean;
-    icon: IconPropType;
+    icon: IconConfig;
     style?: StyleType;
 };
 declare class Icon extends React.PureComponent<Props> {

package/dist/components/icon.js.flow

@@ -5,11 +5,11 @@
  * @flow
  */
 import * as React from "react";
-import type { Icon as IconPropType } from "../types";
+import type { IconConfig } from "../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 declare type Props = {|
   focused: boolean,
-  icon: IconPropType,
+  icon: IconConfig,
   style?: StyleType,
 |};
 declare class Icon extends React.PureComponent<Props> {

package/dist/components/input/cursor-contexts.d.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
@@ -9,11 +9,12 @@
  * now, we show the dismiss button rather than allowing the user to jump out of
  * the radical.
  */
-export type CursorContext = "NONE" | "IN_PARENS" | "IN_SUPER_SCRIPT" | "IN_SUB_SCRIPT" | "IN_NUMERATOR" | "IN_DENOMINATOR" | "BEFORE_FRACTION";
-export declare const NONE = "NONE";
-export declare const IN_PARENS = "IN_PARENS";
-export declare const IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT";
-export declare const IN_SUB_SCRIPT = "IN_SUB_SCRIPT";
-export declare const IN_NUMERATOR = "IN_NUMERATOR";
-export declare const IN_DENOMINATOR = "IN_DENOMINATOR";
-export declare const BEFORE_FRACTION = "BEFORE_FRACTION";
+export declare enum CursorContext {
+    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"
+}

package/dist/components/input/cursor-contexts.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 /**
- * 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
@@ -15,18 +15,13 @@
  * now, we show the dismiss button rather than allowing the user to jump out of
  * the radical.
  */
-export type CursorContext =
-  | "NONE"
-  | "IN_PARENS"
-  | "IN_SUPER_SCRIPT"
-  | "IN_SUB_SCRIPT"
-  | "IN_NUMERATOR"
-  | "IN_DENOMINATOR"
-  | "BEFORE_FRACTION";
-declare export var NONE: "NONE";
-declare export var IN_PARENS: "IN_PARENS";
-declare export var IN_SUPER_SCRIPT: "IN_SUPER_SCRIPT";
-declare export var IN_SUB_SCRIPT: "IN_SUB_SCRIPT";
-declare export var IN_NUMERATOR: "IN_NUMERATOR";
-declare export var IN_DENOMINATOR: "IN_DENOMINATOR";
-declare export var BEFORE_FRACTION: "BEFORE_FRACTION";
+
+declare export var CursorContext: {|
+  +NONE: "NONE", // "NONE"
+  +IN_PARENS: "IN_PARENS", // "IN_PARENS"
+  +IN_SUPER_SCRIPT: "IN_SUPER_SCRIPT", // "IN_SUPER_SCRIPT"
+  +IN_SUB_SCRIPT: "IN_SUB_SCRIPT", // "IN_SUB_SCRIPT"
+  +IN_NUMERATOR: "IN_NUMERATOR", // "IN_NUMERATOR"
+  +IN_DENOMINATOR: "IN_DENOMINATOR", // "IN_DENOMINATOR"
+  +BEFORE_FRACTION: "BEFORE_FRACTION", // "BEFORE_FRACTION"
+|};

package/dist/components/input/math-wrapper.d.ts

@@ -3,6 +3,7 @@
  * more regular interface for the functionality we need while insulating us
  * from MathQuill changes.
  */
+import { CursorContext } from "./cursor-contexts";
 declare class MathWrapper {
     MQ: any;
     mathField: any;
@@ -18,7 +19,7 @@ declare class MathWrapper {
      * @returns {object} a cursor object, consisting of a cursor context
      */
     pressKey(key: string): {
-        context: string;
+        context: CursorContext;
     };
     /**
      * Place the cursor beside the node located at the given coordinates.
@@ -104,7 +105,7 @@ declare class MathWrapper {
     _handleBackspaceOutsideParens(cursor: any): void;
     _handleBackspaceInsideParens(cursor: any): void;
     _handleBackspaceAfterLigaturedSymbol(cursor: any): void;
-    contextForCursor(cursor: any): "NONE" | "IN_PARENS" | "IN_SUPER_SCRIPT" | "IN_SUB_SCRIPT" | "IN_NUMERATOR" | "IN_DENOMINATOR" | "BEFORE_FRACTION";
+    contextForCursor(cursor: any): CursorContext;
     _isAtTopLevel(cursor: any): boolean;
 }
 export default MathWrapper;

package/dist/components/input/math-wrapper.js.flow

@@ -4,11 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
-/**
- * This file contains a wrapper around MathQuill so that we can provide a
- * more regular interface for the functionality we need while insulating us
- * from MathQuill changes.
- */
+import { CursorContext } from "./cursor-contexts";
 declare class MathWrapper {
   MQ: any;
   mathField: any;
@@ -24,7 +20,7 @@ declare class MathWrapper {
    * @returns {{...}} a cursor object, consisting of a cursor context
    */
   pressKey(key: string): {|
-    context: string,
+    context: CursorContext,
   |};
 
   /**
@@ -110,16 +106,7 @@ declare class MathWrapper {
   _handleBackspaceOutsideParens(cursor: any): void;
   _handleBackspaceInsideParens(cursor: any): void;
   _handleBackspaceAfterLigaturedSymbol(cursor: any): void;
-  contextForCursor(
-    cursor: any
-  ):
-    | "NONE"
-    | "IN_PARENS"
-    | "IN_SUPER_SCRIPT"
-    | "IN_SUB_SCRIPT"
-    | "IN_NUMERATOR"
-    | "IN_DENOMINATOR"
-    | "BEFORE_FRACTION";
+  contextForCursor(cursor: any): CursorContext;
   _isAtTopLevel(cursor: any): boolean;
 }
 declare export default typeof MathWrapper;

package/dist/components/keypad-button.d.ts

@@ -2,8 +2,8 @@
  * A component that renders a keypad button.
  */
 import * as React from "react";
-import type { KeyType } from "../consts";
-import type { Border, KeyConfig, Icon as IconType } from "../types";
+import { BorderDirection, KeyType } from "../enums";
+import type { Border, KeyConfig, IconConfig } from "../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 interface ReduxProps {
     heightPx: number;
@@ -17,7 +17,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;
@@ -28,7 +28,7 @@ interface Props extends ReduxProps {
 declare class KeypadButton extends React.PureComponent<Props> {
     buttonSizeStyle: StyleType | undefined;
     static defaultProps: {
-        borders: readonly ("LEFT" | "BOTTOM")[];
+        borders: readonly BorderDirection[];
         childKeys: never[];
         disabled: boolean;
         focused: boolean;
@@ -38,15 +38,15 @@ declare class KeypadButton extends React.PureComponent<Props> {
     componentDidMount(): void;
     UNSAFE_componentWillUpdate(newProps: any, newState: any): void;
     _preInjectStyles: () => void;
-    _getFocusStyle: (type: any) => any[];
+    _getFocusStyle: (type: KeyType) => any[];
     _getButtonStyle: (type: any, borders: any, style?: any) => any[];
     render(): JSX.Element;
 }
-declare const _default: import("react-redux").ConnectedComponent<typeof KeypadButton, import("react-redux").Omit<Pick<Props, "style" | "icon" | "ref" | "ariaLabel" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "type" | "heightPx" | "widthPx"> & {
-    disabled?: boolean | undefined;
+declare const _default: import("react-redux").ConnectedComponent<typeof KeypadButton, import("react-redux").Omit<Pick<React.ClassAttributes<KeypadButton> & Props, "style" | "ref" | "ariaLabel" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "icon" | "type" | "heightPx" | "widthPx" | "key"> & {
     focused?: boolean | undefined;
-    borders?: ("LEFT" | "BOTTOM" | undefined)[] | undefined;
+    borders?: readonly (BorderDirection | undefined)[] | undefined;
     childKeys?: readonly KeyConfig[] | undefined;
+    disabled?: boolean | undefined;
     popoverEnabled?: boolean | undefined;
 } & {}, "heightPx" | "widthPx">>;
 export default _default;

package/dist/components/keypad-button.js.flow

@@ -6,8 +6,8 @@
  */
 import * as $Flowgen$Import$react_2d_redux from "react-redux";
 import * as React from "react";
-import type { KeyType } from "../consts";
-import type { Border, KeyConfig, Icon as IconType } from "../types";
+import { BorderDirection, KeyType } from "../enums";
+import type { Border, KeyConfig, IconConfig } from "../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 declare interface ReduxProps {
   heightPx: number;
@@ -21,7 +21,7 @@ declare type Props = {
   focused: boolean,
   popoverEnabled: boolean,
   type: KeyType,
-  icon: IconType,
+  icon: IconConfig,
   style?: StyleType,
   onTouchCancel?: (evt: SyntheticTouchEvent<HTMLDivElement>) => void,
   onTouchEnd?: (evt: SyntheticTouchEvent<HTMLDivElement>) => void,
@@ -32,7 +32,7 @@ declare type Props = {
 declare class KeypadButton extends React.PureComponent<Props> {
   buttonSizeStyle: StyleType | void;
   static defaultProps: {|
-    borders: $ReadOnlyArray<"LEFT" | "BOTTOM">,
+    borders: $ReadOnlyArray<BorderDirection>,
     childKeys: empty[],
     disabled: boolean,
     focused: boolean,
@@ -42,7 +42,7 @@ declare class KeypadButton extends React.PureComponent<Props> {
   componentDidMount(): void;
   UNSAFE_componentWillUpdate(newProps: any, newState: any): void;
   _preInjectStyles: () => void;
-  _getFocusStyle: (type: any) => any[];
+  _getFocusStyle: (type: KeyType) => any[];
   _getButtonStyle: (type: any, borders: any, style?: any) => any[];
   render(): React$Node;
 }
@@ -51,24 +51,25 @@ declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
   $Flowgen$Import$react_2d_redux.Omit<
     {|
       ...Pick<
-        Props,
+        {| ...React.ClassAttributes<KeypadButton>, ...Props |},
         | "style"
-        | "icon"
         | "ref"
         | "ariaLabel"
         | "onTouchCancel"
         | "onTouchEnd"
         | "onTouchMove"
         | "onTouchStart"
+        | "icon"
         | "type"
         | "heightPx"
         | "widthPx"
+        | "key"
       >,
       ...{|
-        disabled?: boolean | void,
         focused?: boolean | void,
-        borders?: ("LEFT" | "BOTTOM" | void)[] | void,
+        borders?: $ReadOnlyArray<BorderDirection | void> | void,
         childKeys?: $ReadOnlyArray<KeyConfig> | void,
+        disabled?: boolean | void,
         popoverEnabled?: boolean | void,
       |},
       ...{||},

package/dist/components/keypad-container.d.ts

@@ -1,12 +1,11 @@
 import * as React from "react";
-import { LayoutModes } from "../consts";
-import type { KeypadType } from "../consts";
+import { LayoutMode, KeypadType } from "../enums";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 interface ReduxProps {
     active?: boolean;
     extraKeys?: ReadonlyArray<string>;
     keypadType?: KeypadType;
-    layoutMode?: keyof typeof LayoutModes;
+    layoutMode?: LayoutMode;
     navigationPadEnabled?: boolean;
 }
 interface Props extends ReduxProps {

package/dist/components/keypad-container.js.flow

@@ -6,14 +6,13 @@
  */
 import * as $Flowgen$Import$react_2d_redux from "react-redux";
 import * as React from "react";
-import { LayoutModes } from "../consts";
-import type { KeypadType } from "../consts";
+import { LayoutMode, KeypadType } from "../enums";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 declare interface ReduxProps {
   active?: boolean;
   extraKeys?: $ReadOnlyArray<string>;
   keypadType?: KeypadType;
-  layoutMode?: $Keys<typeof LayoutModes>;
+  layoutMode?: LayoutMode;
   navigationPadEnabled?: boolean;
 }
 declare type Props = {

package/dist/components/keypad.d.ts

@@ -27,5 +27,5 @@ declare class Keypad extends React.Component<Props> {
     _onResize: () => void;
     render(): JSX.Element;
 }
-declare const _default: import("react-redux").ConnectedComponent<typeof Keypad, import("react-redux").Omit<React.ClassAttributes<Keypad> & Props, "active" | "popover" | "echoes" | "removeEcho">>;
+declare const _default: import("react-redux").ConnectedComponent<typeof Keypad, import("react-redux").Omit<React.ClassAttributes<Keypad> & Props, "popover" | "echoes" | "removeEcho" | "active">>;
 export default _default;

package/dist/components/keypad.js.flow

@@ -34,7 +34,7 @@ declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
   typeof Keypad,
   $Flowgen$Import$react_2d_redux.Omit<
     {| ...React.ClassAttributes<Keypad>, ...Props |},
-    "active" | "popover" | "echoes" | "removeEcho"
+    "popover" | "echoes" | "removeEcho" | "active"
   >
 >;
 declare export default typeof _default;

package/dist/components/multi-symbol-grid.d.ts

@@ -3,10 +3,10 @@
  * symbols provided. Up to four symbols will be shown.
  */
 import * as React from "react";
-import type { Icon as IconType } from "../types";
+import { IconConfig } from "../types";
 type Props = {
     focused: boolean;
-    icons: ReadonlyArray<IconType>;
+    icons: ReadonlyArray<IconConfig>;
 };
 declare class MultiSymbolGrid extends React.Component<Props> {
     render(): JSX.Element;

package/dist/components/multi-symbol-grid.js.flow

@@ -5,10 +5,10 @@
  * @flow
  */
 import * as React from "react";
-import type { Icon as IconType } from "../types";
+import { IconConfig } from "../types";
 declare type Props = {|
   focused: boolean,
-  icons: $ReadOnlyArray<IconType>,
+  icons: $ReadOnlyArray<IconConfig>,
 |};
 declare class MultiSymbolGrid extends React.Component<Props> {
   render(): React$Node;

package/dist/components/styles.d.ts

@@ -1,6 +1,5 @@
 /**
  * Common styles shared across components.
  */
-/// <reference path="../../types/aphrodite.d.ts" />
-declare const _default: import("aphrodite").StyleDeclaration;
+declare const _default: any;
 export default _default;

package/dist/components/styles.js.flow

@@ -4,10 +4,8 @@
  * Flowgen v1.21.0
  * @flow
  */
-import * as $Flowgen$Import$aphrodite from "aphrodite";
-
 /**
  * Common styles shared across components.
  */
-declare var _default: $Flowgen$Import$aphrodite.StyleDeclaration;
+declare var _default: any;
 declare export default typeof _default;

package/dist/components/touchable-keypad-button.d.ts

@@ -4,22 +4,22 @@
  * touch events globally) opaque to the KeypadButton.
  */
 import * as React from "react";
-import { KeyType } from "../consts";
+import Keys from "../data/keys";
+import { KeyType } from "../enums";
 import GestureManager from "./gesture-manager";
-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;
 };
 declare class TouchableKeypadButton extends React.Component<Props> {
     shouldComponentUpdate(newProps: any): boolean;