@khanacademy/math-input 3.0.0 → 4.1.0

package/dist/components/keypad/index.d.ts

@@ -1,16 +1,22 @@
 import * as React from "react";
+import Key from "../../data/keys";
+import { TabbarItemType } from "../tabbar/types";
 import { NumbersPageOptions } from "./numbers-page/types";
 import { OperatorsButtonSets } from "./operators-page/types";
-import type { TabbarItemType } from "../tabbar/types";
 export type Props = {
     onClickKey: (keyConfig: string) => void;
     trigonometry?: boolean;
+    extraKeys: ReadonlyArray<Key>;
 } & OperatorsButtonSets & NumbersPageOptions;
 type State = {
     selectedPage: TabbarItemType;
 };
+type DefaultProps = {
+    extraKeys: Props["extraKeys"];
+};
 export default class Keypad extends React.Component<Props, State> {
     state: State;
+    static defaultProps: DefaultProps;
     render(): React.ReactNode;
 }
 export {};

package/dist/components/keypad/index.js.flow

@@ -5,13 +5,15 @@
  * @flow
  */
 import * as React from "react";
+import Key from "../../data/keys";
+import { TabbarItemType } from "../tabbar/types";
 import { NumbersPageOptions } from "./numbers-page/types";
 import { OperatorsButtonSets } from "./operators-page/types";
-import type { TabbarItemType } from "../tabbar/types";
 export type Props = {|
   ...{|
     onClickKey: (keyConfig: string) => void,
     trigonometry?: boolean,
+    extraKeys: $ReadOnlyArray<Key>,
   |},
   ...OperatorsButtonSets,
   ...NumbersPageOptions,
@@ -19,7 +21,11 @@ export type Props = {|
 declare type State = {|
   selectedPage: TabbarItemType,
 |};
+declare type DefaultProps = {|
+  extraKeys: $PropertyType<Props, "extraKeys">,
+|};
 declare export default class Keypad extends React.Component<Props, State> {
   state: State;
+  static defaultProps: DefaultProps;
   render(): React.Node;
 }

package/dist/components/keypad/keypad-page-items.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { KeyConfig } from "../../data/key-configs";
+import { KeyConfig } from "../../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type KeypadPageContainerProps = {
     children: React.ReactNode;

package/dist/components/keypad/keypad-page-items.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 import * as React from "react";
-import type { KeyConfig } from "../../data/key-configs";
+import { KeyConfig } from "../../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 declare type KeypadPageContainerProps = {|
   children: React.Node,

package/dist/components/keypad-legacy/gesture-manager.d.ts

@@ -3,46 +3,58 @@
  * connects our various bits of logic for managing gestures and interactions,
  * and links them together.
  */
+import * as React from "react";
+import Key from "../../data/keys";
+import { ActiveNodesObj, LayoutProps } from "../../types";
 import GestureStateMachine from "./gesture-state-machine";
 import NodeManager from "./node-manager";
 import PopoverStateMachine from "./popover-state-machine";
+type Options = {
+    swipeEnabled: boolean;
+};
+type Handlers = {
+    onSwipeChange?: (dx: number) => void;
+    onSwipeEnd?: (dx: number) => void;
+    onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void;
+    onClick: (key: Key, layoutProps: LayoutProps, inPopover: boolean) => void;
+};
 declare class GestureManager {
     swipeEnabled: boolean;
     trackEvents: boolean;
     nodeManager: NodeManager;
     popoverStateMachine: PopoverStateMachine;
     gestureStateMachine: GestureStateMachine;
-    constructor(options: any, handlers: any, disabledSwipeKeys: any, multiPressableKeys: any);
+    constructor(options: Options, handlers: Handlers, disabledSwipeKeys: ReadonlyArray<Key>, multiPressableKeys: ReadonlyArray<Key>);
     /**
      * Handle a touch-start event that originated in a node registered with the
      * gesture system.
      *
-     * @param {TouchEvent} evt - the raw touch event from the browser
+     * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
      * @param {string} id - the identifier of the DOM node in which the touch
      *                      occurred
      */
-    onTouchStart(evt: TouchEvent, id?: any): void;
+    onTouchStart(evt: React.TouchEvent<HTMLDivElement>, id?: string | undefined): void;
     /**
      * Handle a touch-move event that originated in a node registered with the
      * gesture system.
      *
-     * @param {TouchEvent} evt - the raw touch event from the browser
+     * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
      */
-    onTouchMove(evt: TouchEvent): void;
+    onTouchMove(evt: React.TouchEvent<HTMLDivElement>): void;
     /**
      * Handle a touch-end event that originated in a node registered with the
      * gesture system.
      *
-     * @param {TouchEvent} evt - the raw touch event from the browser
+     * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
      */
-    onTouchEnd(evt: TouchEvent): void;
+    onTouchEnd(evt: React.TouchEvent<HTMLDivElement>): void;
     /**
      * Handle a touch-cancel event that originated in a node registered with the
      * gesture system.
      *
-     * @param {TouchEvent} evt - the raw touch event from the browser
+     * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
      */
-    onTouchCancel(evt: TouchEvent): void;
+    onTouchCancel(evt: React.TouchEvent<HTMLDivElement>): void;
     /**
      * Register a DOM node with a given identifier.
      *

package/dist/components/keypad-legacy/gesture-manager.js.flow

@@ -4,9 +4,21 @@
  * Flowgen v1.21.0
  * @flow
  */
+import * as React from "react";
+import Key from "../../data/keys";
+import { ActiveNodesObj, LayoutProps } from "../../types";
 import GestureStateMachine from "./gesture-state-machine";
 import NodeManager from "./node-manager";
 import PopoverStateMachine from "./popover-state-machine";
+declare type Options = {|
+  swipeEnabled: boolean,
+|};
+declare type Handlers = {|
+  onSwipeChange?: (dx: number) => void,
+  onSwipeEnd?: (dx: number) => void,
+  onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void,
+  onClick: (key: Key, layoutProps: LayoutProps, inPopover: boolean) => void,
+|};
 declare class GestureManager {
   swipeEnabled: boolean;
   trackEvents: boolean;
@@ -14,41 +26,44 @@ declare class GestureManager {
   popoverStateMachine: PopoverStateMachine;
   gestureStateMachine: GestureStateMachine;
   constructor(
-    options: any,
-    handlers: any,
-    disabledSwipeKeys: any,
-    multiPressableKeys: any
+    options: Options,
+    handlers: Handlers,
+    disabledSwipeKeys: $ReadOnlyArray<Key>,
+    multiPressableKeys: $ReadOnlyArray<Key>
   ): this;
 
   /**
    * Handle a touch-start event that originated in a node registered with the
    * gesture system.
-   * @param {TouchEvent} evt - the raw touch event from the browser
+   * @param {SyntheticTouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
    * @param {string} id - the identifier of the DOM node in which the touch
    *   occurred
    */
-  onTouchStart(evt: TouchEvent, id?: any): void;
+  onTouchStart(
+    evt: SyntheticTouchEvent<HTMLDivElement>,
+    id?: string | void
+  ): void;
 
   /**
    * Handle a touch-move event that originated in a node registered with the
    * gesture system.
-   * @param {TouchEvent} evt - the raw touch event from the browser
+   * @param {SyntheticTouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
    */
-  onTouchMove(evt: TouchEvent): void;
+  onTouchMove(evt: SyntheticTouchEvent<HTMLDivElement>): void;
 
   /**
    * Handle a touch-end event that originated in a node registered with the
    * gesture system.
-   * @param {TouchEvent} evt - the raw touch event from the browser
+   * @param {SyntheticTouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
    */
-  onTouchEnd(evt: TouchEvent): void;
+  onTouchEnd(evt: SyntheticTouchEvent<HTMLDivElement>): void;
 
   /**
    * Handle a touch-cancel event that originated in a node registered with the
    * gesture system.
-   * @param {TouchEvent} evt - the raw touch event from the browser
+   * @param {SyntheticTouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
    */
-  onTouchCancel(evt: TouchEvent): void;
+  onTouchCancel(evt: SyntheticTouchEvent<HTMLDivElement>): void;
 
   /**
    * Register a DOM node with a given identifier.

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

@@ -1,4 +1,4 @@
-import Keys from "../../data/keys";
+import Key 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.
@@ -11,8 +11,8 @@ export type Handlers = {
     onBlur: () => void;
     onTrigger: (id: string) => void;
     onLongPress: (id: string) => void;
-    onSwipeChange: (x: number) => void;
-    onSwipeEnd: (x: number) => void;
+    onSwipeChange?: (x: number) => void;
+    onSwipeEnd?: (x: number) => void;
     onTouchEnd: (id: string) => void;
 };
 type Options = {
@@ -21,25 +21,25 @@ type Options = {
     holdIntervalMs: number;
 };
 type TouchState = {
-    activeNodeId: Keys;
+    activeNodeId: Key;
     pressAndHoldIntervalId: number | null;
     longPressTimeoutId: number | null;
     swipeLocked: boolean;
     startX: number;
 };
-type TouchStateMap = Record<Keys, TouchState>;
+type TouchStateMap = Record<Key, TouchState>;
 type SwipeState = {
-    touchId: Keys;
+    touchId: Key;
     startX: number;
 };
 declare class GestureStateMachine {
     handlers: Handlers;
     options: Options;
-    swipeDisabledNodeIds: Partial<[Keys]>;
-    multiPressableKeys: Partial<[Keys]>;
+    swipeDisabledNodeIds: ReadonlyArray<Key>;
+    multiPressableKeys: ReadonlyArray<Key>;
     touchState: Partial<TouchStateMap>;
     swipeState: SwipeState | null;
-    constructor(handlers: Handlers, options: Partial<Options>, swipeDisabledNodeIds?: [Keys], multiPressableKeys?: [Keys]);
+    constructor(handlers: Handlers, options: Partial<Options>, swipeDisabledNodeIds?: ReadonlyArray<Key>, multiPressableKeys?: ReadonlyArray<Key>);
     _maybeCancelLongPressForTouch(touchId: any): void;
     _maybeCancelPressAndHoldForTouch(touchId: any): void;
     _cleanupTouchEvent(touchId: any): void;

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

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

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

@@ -17,7 +17,7 @@ interface Props extends ReduxProps {
     focused: boolean;
     popoverEnabled: boolean;
     type: KeyType;
-    icon: IconConfig;
+    icon?: IconConfig;
     style?: StyleType;
     onTouchCancel?: (evt: React.TouchEvent<HTMLDivElement>) => void;
     onTouchEnd?: (evt: React.TouchEvent<HTMLDivElement>) => void;
@@ -42,7 +42,7 @@ declare class KeypadButton extends React.PureComponent<Props> {
     _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<React.ClassAttributes<KeypadButton> & Props, "style" | "ref" | "ariaLabel" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "icon" | "type" | "heightPx" | "widthPx" | "key"> & {
+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" | "type" | "icon" | "key" | "heightPx" | "widthPx"> & {
     focused?: boolean | undefined;
     borders?: readonly (BorderDirection | undefined)[] | undefined;
     childKeys?: readonly NonManyKeyConfig[] | undefined;

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

@@ -21,7 +21,7 @@ declare type Props = {
   focused: boolean,
   popoverEnabled: boolean,
   type: KeyType,
-  icon: IconConfig,
+  icon?: IconConfig,
   style?: StyleType,
   onTouchCancel?: (evt: SyntheticTouchEvent<HTMLDivElement>) => void,
   onTouchEnd?: (evt: SyntheticTouchEvent<HTMLDivElement>) => void,
@@ -59,11 +59,11 @@ declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
         | "onTouchEnd"
         | "onTouchMove"
         | "onTouchStart"
-        | "icon"
         | "type"
+        | "icon"
+        | "key"
         | "heightPx"
         | "widthPx"
-        | "key"
       >,
       ...{|
         focused?: boolean | void,

package/dist/components/keypad-legacy/store/actions.d.ts

@@ -1,4 +1,4 @@
-import Keys from "../../../data/keys";
+import Key from "../../../data/keys";
 import type { Bound, KeypadConfiguration, KeyHandler, Cursor, ActiveNodesObj } from "../../../types";
 type DismissKeypadAction = {
     type: "DismissKeypad";
@@ -37,16 +37,6 @@ type SetCursorAction = {
     cursor: Cursor;
 };
 export declare const setCursor: (cursor: Cursor) => SetCursorAction;
-type OnSwipeChangeAction = {
-    type: "OnSwipeChange";
-    dx: number;
-};
-export declare const onSwipeChange: (dx: number) => OnSwipeChangeAction;
-type OnSwipeEndAction = {
-    type: "OnSwipeEnd";
-    dx: number;
-};
-export declare const onSwipeEnd: (dx: number) => OnSwipeEndAction;
 type SetActiveNodesAction = {
     type: "SetActiveNodes";
     activeNodes: any;
@@ -54,10 +44,10 @@ type SetActiveNodesAction = {
 export declare const setActiveNodes: (activeNodes: ActiveNodesObj) => SetActiveNodesAction;
 type PressKeyAction = {
     type: "PressKey";
-    key: Keys;
+    key: Key;
     initialBounds: Bound;
     inPopover: boolean;
 };
-export declare const pressKey: (key: Keys, initialBounds: Bound, inPopover: any) => PressKeyAction;
-export type Action = DismissKeypadAction | ActivateKeypadAction | ConfigureKeypadAction | SetPageSizeAction | RemoveEchoAction | SetKeyHandlerAction | SetCursorAction | OnSwipeChangeAction | OnSwipeEndAction | SetActiveNodesAction | PressKeyAction;
+export declare const pressKey: (key: Key, initialBounds: Bound, inPopover: any) => PressKeyAction;
+export type Action = DismissKeypadAction | ActivateKeypadAction | ConfigureKeypadAction | SetPageSizeAction | RemoveEchoAction | SetKeyHandlerAction | SetCursorAction | SetActiveNodesAction | PressKeyAction;
 export {};

package/dist/components/keypad-legacy/store/actions.js.flow

@@ -4,7 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
-import Keys from "../../../data/keys";
+import Key from "../../../data/keys";
 import type {
   Bound,
   KeypadConfiguration,
@@ -56,16 +56,6 @@ declare type SetCursorAction = {|
   cursor: Cursor,
 |};
 declare export var setCursor: (cursor: Cursor) => SetCursorAction;
-declare type OnSwipeChangeAction = {|
-  type: "OnSwipeChange",
-  dx: number,
-|};
-declare export var onSwipeChange: (dx: number) => OnSwipeChangeAction;
-declare type OnSwipeEndAction = {|
-  type: "OnSwipeEnd",
-  dx: number,
-|};
-declare export var onSwipeEnd: (dx: number) => OnSwipeEndAction;
 declare type SetActiveNodesAction = {|
   type: "SetActiveNodes",
   activeNodes: any,
@@ -75,12 +65,12 @@ declare export var setActiveNodes: (
 ) => SetActiveNodesAction;
 declare type PressKeyAction = {|
   type: "PressKey",
-  key: Keys,
+  key: Key,
   initialBounds: Bound,
   inPopover: boolean,
 |};
 declare export var pressKey: (
-  key: Keys,
+  key: Key,
   initialBounds: Bound,
   inPopover: any
 ) => PressKeyAction;
@@ -92,7 +82,5 @@ export type Action =
   | RemoveEchoAction
   | SetKeyHandlerAction
   | SetCursorAction
-  | OnSwipeChangeAction
-  | OnSwipeEndAction
   | SetActiveNodesAction
   | PressKeyAction;

package/dist/components/keypad-legacy/store/types.d.ts

@@ -1,4 +1,4 @@
-import Keys from "../../../data/keys";
+import Key from "../../../data/keys";
 import { LayoutMode, KeypadType } from "../../../enums";
 import GestureManager from "../gesture-manager";
 import type { Cursor, KeyHandler, Popover, Echo } from "../../../types";
@@ -13,7 +13,7 @@ export interface KeypadState {
 }
 export interface GestureState {
     popover: Popover | null;
-    focus: Keys | null;
+    focus: Key | null;
     gestureManager: GestureManager;
 }
 export interface EchoState {

package/dist/components/keypad-legacy/store/types.js.flow

@@ -4,7 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
-import Keys from "../../../data/keys";
+import Key from "../../../data/keys";
 import { LayoutMode, KeypadType } from "../../../enums";
 import GestureManager from "../gesture-manager";
 import type { Cursor, KeyHandler, Popover, Echo } from "../../../types";
@@ -19,7 +19,7 @@ export interface KeypadState {
 }
 export interface GestureState {
   popover: Popover | null;
-  focus: Keys | null;
+  focus: Key | null;
   gestureManager: GestureManager;
 }
 export interface EchoState {

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

@@ -4,10 +4,10 @@
  * touch events globally) opaque to the KeypadButton.
  */
 import * as React from "react";
-import Keys from "../../data/keys";
+import Key from "../../data/keys";
 import { KeyType } from "../../enums";
 import GestureManager from "./gesture-manager";
-import type { Border, IconConfig, KeyConfig, NonManyKeyConfig } from "../../types";
+import type { Border, IconConfig, KeyConfig } from "../../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 interface SharedProps {
     borders?: Border;
@@ -20,12 +20,12 @@ interface OwnProps extends SharedProps {
 interface Props extends SharedProps {
     childKeyIds?: ReadonlyArray<string>;
     gestureManager: GestureManager;
-    id: Keys | "MANY";
+    id: Key;
     focused: boolean;
     popoverEnabled: boolean;
-    childKeys?: ReadonlyArray<NonManyKeyConfig>;
+    childKeys?: ReadonlyArray<KeyConfig>;
     ariaLabel?: string;
-    icon: IconConfig;
+    icon?: IconConfig;
     type: KeyType;
 }
 declare class TouchableKeypadButton extends React.Component<Props> {
@@ -33,5 +33,5 @@ declare class TouchableKeypadButton extends React.Component<Props> {
     componentWillUnmount(): void;
     render(): JSX.Element;
 }
-declare const _default: import("react-redux").ConnectedComponent<typeof TouchableKeypadButton, import("react-redux").Omit<React.ClassAttributes<TouchableKeypadButton> & Props, "style" | "ariaLabel" | "focused" | "icon" | "borders" | "childKeys" | "disabled" | "popoverEnabled" | "type" | "gestureManager" | "childKeyIds" | "id"> & OwnProps>;
+declare const _default: import("react-redux").ConnectedComponent<typeof TouchableKeypadButton, import("react-redux").Omit<React.ClassAttributes<TouchableKeypadButton> & Props, "style" | "ariaLabel" | "type" | "id" | "icon" | "childKeyIds" | "focused" | "borders" | "childKeys" | "disabled" | "popoverEnabled" | "gestureManager"> & OwnProps>;
 export default _default;

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

@@ -6,15 +6,10 @@
  */
 import * as $Flowgen$Import$react_2d_redux from "react-redux";
 import * as React from "react";
-import Keys from "../../data/keys";
+import Key from "../../data/keys";
 import { KeyType } from "../../enums";
 import GestureManager from "./gesture-manager";
-import type {
-  Border,
-  IconConfig,
-  KeyConfig,
-  NonManyKeyConfig,
-} from "../../types";
+import type { Border, IconConfig, KeyConfig } from "../../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 declare interface SharedProps {
   borders?: Border;
@@ -27,12 +22,12 @@ declare type OwnProps = {
 declare type Props = {
   childKeyIds?: $ReadOnlyArray<string>,
   gestureManager: GestureManager,
-  id: Keys | "MANY",
+  id: Key,
   focused: boolean,
   popoverEnabled: boolean,
-  childKeys?: $ReadOnlyArray<NonManyKeyConfig>,
+  childKeys?: $ReadOnlyArray<KeyConfig>,
   ariaLabel?: string,
-  icon: IconConfig,
+  icon?: IconConfig,
   type: KeyType,
 } & SharedProps;
 declare class TouchableKeypadButton extends React.Component<Props> {
@@ -47,16 +42,16 @@ declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
       {| ...React.ClassAttributes<TouchableKeypadButton>, ...Props |},
       | "style"
       | "ariaLabel"
-      | "focused"
+      | "type"
+      | "id"
       | "icon"
+      | "childKeyIds"
+      | "focused"
       | "borders"
       | "childKeys"
       | "disabled"
       | "popoverEnabled"
-      | "type"
       | "gestureManager"
-      | "childKeyIds"
-      | "id"
     >,
     ...OwnProps,
   |}

package/dist/components/keypad-legacy/two-page-keypad.d.ts

@@ -2,6 +2,7 @@
  * A keypad with two pages of keys.
  */
 import * as React from "react";
+import { TabbarItemType } from "../tabbar/types";
 interface ReduxProps {
     paginationEnabled: boolean;
 }
@@ -9,10 +10,11 @@ interface Props extends ReduxProps {
     leftPage: React.ReactNode;
     rightPage: React.ReactNode;
 }
-declare class TwoPageKeypad extends React.Component<Props> {
-    state: {
-        selectedPage: string;
-    };
+type State = {
+    selectedPage: TabbarItemType;
+};
+declare class TwoPageKeypad extends React.Component<Props, State> {
+    state: State;
     render(): JSX.Element;
 }
 declare const _default: import("react-redux").ConnectedComponent<typeof TwoPageKeypad, import("react-redux").Omit<React.ClassAttributes<TwoPageKeypad> & Props, "paginationEnabled">>;

package/dist/components/keypad-legacy/two-page-keypad.js.flow

@@ -6,6 +6,7 @@
  */
 import * as $Flowgen$Import$react_2d_redux from "react-redux";
 import * as React from "react";
+import { TabbarItemType } from "../tabbar/types";
 declare interface ReduxProps {
   paginationEnabled: boolean;
 }
@@ -13,10 +14,11 @@ declare type Props = {
   leftPage: React.Node,
   rightPage: React.Node,
 } & ReduxProps;
-declare class TwoPageKeypad extends React.Component<Props> {
-  state: {|
-    selectedPage: string,
-  |};
+declare type State = {|
+  selectedPage: TabbarItemType,
+|};
+declare class TwoPageKeypad extends React.Component<Props, State> {
+  state: State;
   render(): React$Node;
 }
 declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<

package/dist/components/tabbar/tabbar.d.ts

@@ -1,14 +1,11 @@
+import { StyleType } from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
-import type { TabbarItemType } from "./types";
-type TabbarState = {
-    selectedItem: number;
-};
+import { TabbarItemType } from "./types";
 type Props = {
     items: ReadonlyArray<TabbarItemType>;
-    onSelect: (item: TabbarItemType) => void;
+    selectedItem: TabbarItemType;
+    onSelectItem: (item: TabbarItemType) => void;
+    style?: StyleType;
 };
-declare class Tabbar extends React.Component<Props, TabbarState> {
-    state: TabbarState;
-    render(): React.ReactNode;
-}
+declare function Tabbar(props: Props): React.ReactElement;
 export default Tabbar;