@khanacademy/math-input 0.6.8 → 0.7.1

package/.eslintrc.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable import/no-commonjs */
 const path = require("path");
 

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/math-input
 
+## 0.7.1
+
+### Patch Changes
+
+-   406edf6b: Extract strings to dist/string.js instead of dist/strings.
+
+## 0.7.0
+
+### Minor Changes
+
+-   53fd3768: Migrate source code to TypeScript
+
 ## 0.6.8
 
 ### Patch Changes

package/dist/components/common-style.d.ts

@@ -0,0 +1,21 @@
+export declare const wonderBlocksBlue: string;
+export declare const offBlack: string;
+export declare const offBlack32: string;
+export declare const offBlack16: string;
+export declare const offBlack8: string;
+export declare const iconSizeHeightPx = 48;
+export declare const iconSizeWidthPx = 48;
+export declare const compactKeypadBorderRadiusPx = 4;
+export declare const cursorHandleRadiusPx = 11;
+export declare const cursorHandleDistanceMultiplier = 1.045;
+export declare const valueGrey = "#FFF";
+export declare const operatorGrey = "#FAFAFA";
+export declare const controlGrey = "#F6F7F7";
+export declare const emptyGrey = "#F0F1F2";
+export declare const innerBorderColor: string;
+export declare const innerBorderStyle = "solid";
+export declare const innerBorderWidthPx = 1;
+export declare const tabletCutoffPx = 600;
+export declare const pageIndicatorHeightPx = 16;
+export declare const navigationPadWidthPx = 192;
+export declare const toolbarHeightPx = 60;

package/dist/components/common-style.js.flow

@@ -0,0 +1,27 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+declare export var wonderBlocksBlue: string;
+declare export var offBlack: string;
+declare export var offBlack32: string;
+declare export var offBlack16: string;
+declare export var offBlack8: string;
+declare export var iconSizeHeightPx: 48;
+declare export var iconSizeWidthPx: 48;
+declare export var compactKeypadBorderRadiusPx: 4;
+declare export var cursorHandleRadiusPx: 11;
+declare export var cursorHandleDistanceMultiplier: 1.045;
+declare export var valueGrey: "#FFF";
+declare export var operatorGrey: "#FAFAFA";
+declare export var controlGrey: "#F6F7F7";
+declare export var emptyGrey: "#F0F1F2";
+declare export var innerBorderColor: string;
+declare export var innerBorderStyle: "solid";
+declare export var innerBorderWidthPx: 1;
+declare export var tabletCutoffPx: 600;
+declare export var pageIndicatorHeightPx: 16;
+declare export var navigationPadWidthPx: 192;
+declare export var toolbarHeightPx: 60;

package/dist/components/input/cursor-contexts.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Constants that define the various contexts in which a cursor can exist. The
+ * active context is determined first by looking at the cursor's siblings (e.g.,
+ * for the `BEFORE_FRACTION` context), and then at its direct parent. Though a
+ * cursor could in theory be nested in multiple contexts, we only care about the
+ * immediate context.
+ *
+ * TODO(charlie): Add a context to represent being inside of a radical. Right
+ * now, we show the dismiss button rather than allowing the user to jump out of
+ * the radical.
+ */
+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";

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

@@ -0,0 +1,32 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+/**
+ * Constants that define the various contexts in which a cursor can exist. The
+ * active context is determined first by looking at the cursor's siblings (e.g.,
+ * for the `BEFORE_FRACTION` context), and then at its direct parent. Though a
+ * cursor could in theory be nested in multiple contexts, we only care about the
+ * immediate context.
+ *
+ * TODO(charlie): Add a context to represent being inside of a radical. Right
+ * now, we show the dismiss button rather than allowing the user to jump out of
+ * the radical.
+ */
+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";

package/dist/components/input/cursor-handle.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Renders the green tear-shaped handle under the cursor.
+ */
+import * as React from "react";
+type Props = {
+    animateIntoPosition: boolean | null | undefined;
+    onTouchCancel: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
+    onTouchEnd: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
+    onTouchMove: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
+    onTouchStart: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
+    visible: boolean;
+    x: number;
+    y: number;
+};
+type DefaultProps = {
+    animateIntoPosition: Props["animateIntoPosition"];
+    visible: Props["visible"];
+    x: Props["x"];
+    y: Props["y"];
+};
+declare class CursorHandle extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    render(): React.ReactNode;
+}
+export default CursorHandle;

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

@@ -0,0 +1,28 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+declare type Props = {|
+  animateIntoPosition: boolean | null | void,
+  onTouchCancel: (arg1: SyntheticTouchEvent<HTMLSpanElement>) => void,
+  onTouchEnd: (arg1: SyntheticTouchEvent<HTMLSpanElement>) => void,
+  onTouchMove: (arg1: SyntheticTouchEvent<HTMLSpanElement>) => void,
+  onTouchStart: (arg1: SyntheticTouchEvent<HTMLSpanElement>) => void,
+  visible: boolean,
+  x: number,
+  y: number,
+|};
+declare type DefaultProps = {|
+  animateIntoPosition: $PropertyType<Props, "animateIntoPosition">,
+  visible: $PropertyType<Props, "visible">,
+  x: $PropertyType<Props, "x">,
+  y: $PropertyType<Props, "y">,
+|};
+declare class CursorHandle extends React.Component<Props> {
+  static defaultProps: DefaultProps;
+  render(): React.Node;
+}
+declare export default typeof CursorHandle;

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

@@ -0,0 +1,128 @@
+import * as React from "react";
+type Props = {
+    keypadElement: any;
+    onBlur: () => void;
+    onChange: any;
+    onFocus: () => void;
+    style: any;
+    value: string;
+};
+type DefaultProps = {
+    style: Props["style"];
+    value: Props["value"];
+};
+type HandleState = {
+    animateIntoPosition?: boolean | null | undefined;
+    visible: boolean;
+    x?: number;
+    y?: number;
+};
+type State = {
+    focused: boolean;
+    handle: HandleState;
+};
+declare class MathInput extends React.Component<Props, State> {
+    didTouchOutside: boolean | null | undefined;
+    didScroll: boolean | null | undefined;
+    mathField: any;
+    recordTouchStartOutside: (arg1: any) => void;
+    blurOnTouchEndOutside: (arg1: any) => void;
+    dragListener: any;
+    inputRef: HTMLDivElement | null | undefined;
+    _isMounted: boolean | null | undefined;
+    _mathContainer: any;
+    _container: HTMLDivElement;
+    _root: any;
+    _containerBounds: ClientRect;
+    _keypadBounds: ClientRect | null | undefined;
+    static defaultProps: DefaultProps;
+    state: State;
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(props: Props): void;
+    componentDidUpdate(prevProps: Props, prevState: State): void;
+    componentWillUnmount(): void;
+    _clearKeypadBoundsCache: () => void;
+    _cacheKeypadBounds: (arg1: any) => void;
+    _updateInputPadding: () => void;
+    /** Gets and cache they bounds of the keypadElement */
+    _getKeypadBounds: () => any;
+    _updateCursorHandle: (arg1?: boolean | null | undefined) => void;
+    _hideCursorHandle: () => void;
+    _handleScroll: () => void;
+    blur: () => void;
+    focus: () => void;
+    /**
+     * Tries to determine which DOM node to place the cursor next to based on
+     * where the user drags the cursor handle.  If it finds a node it will
+     * place the cursor next to it, update the handle to be under the cursor,
+     * and return true.  If it doesn't find a node, it returns false.
+     *
+     * It searches for nodes by doing it tests at the following points:
+     *
+     *   (x - dx, y), (x, y), (x + dx, y)
+     *
+     * If it doesn't find any nodes from the rendered math it will update y
+     * by adding dy.
+     *
+     * The algorithm ends its search when y goes outside the bounds of
+     * containerBounds.
+     *
+     * @param {DOMRect} containerBounds - bounds of the container node
+     * @param {number} x - the initial x coordinate in the viewport
+     * @param {number} y - the initial y coordinate in the viewport
+     * @param {number} dx - horizontal spacing between elementFromPoint calls
+     * @param {number} dy - vertical spacing between elementFromPoint calls,
+     *                      sign determines direction.
+     * @returns {boolean} - true if a node was hit, false otherwise.
+     */
+    _findHitNode: (arg1: ClientRect, arg2: number, arg3: number, arg4: number, arg5: number) => boolean;
+    /**
+     * Inserts the cursor at the DOM node closest to the given coordinates,
+     * based on hit-tests conducted using #_findHitNode.
+     *
+     * @param {number} x - the x coordinate in the viewport
+     * @param {number} y - the y coordinate in the viewport
+     */
+    _insertCursorAtClosestNode: (arg1: number, arg2: number) => void;
+    handleTouchStart: (arg1: React.TouchEvent<HTMLDivElement>) => void;
+    handleTouchMove: (arg1: React.TouchEvent<HTMLDivElement>) => void;
+    handleTouchEnd: (arg1: React.TouchEvent<HTMLDivElement>) => void;
+    /**
+     * When a touch starts in the cursor handle, we track it so as to avoid
+     * handling any touch events ourself.
+     *
+     * @param {TouchEvent} e - the raw touch event from the browser
+     */
+    onCursorHandleTouchStart: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
+    _constrainToBound: (arg1: number, arg2: number, arg3: number, arg4: number) => number;
+    /**
+     * When the user moves the cursor handle update the position of the cursor
+     * and the handle.
+     *
+     * @param {TouchEvent} e - the raw touch event from the browser
+     */
+    onCursorHandleTouchMove: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
+    /**
+     * When the user releases the cursor handle, animate it back into place.
+     *
+     * @param {TouchEvent} e - the raw touch event from the browser
+     */
+    onCursorHandleTouchEnd: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
+    /**
+     * If the gesture is cancelled mid-drag, simply hide it.
+     *
+     * @param {TouchEvent} e - the raw touch event from the browser
+     */
+    onCursorHandleTouchCancel: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
+    domKeyToMathQuillKey: (arg1: string) => string | null | undefined;
+    handleKeyUp: (arg1: React.KeyboardEvent<HTMLDivElement>) => void;
+    getBorderWidthPx: () => number;
+    getInputInnerPadding: () => {
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        paddingLeft: number;
+    };
+    render(): React.ReactNode;
+}
+export default MathInput;

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

@@ -0,0 +1,152 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+declare type Props = {|
+  keypadElement: any,
+  onBlur: () => void,
+  onChange: any,
+  onFocus: () => void,
+  style: any,
+  value: string,
+|};
+declare type DefaultProps = {|
+  style: $PropertyType<Props, "style">,
+  value: $PropertyType<Props, "value">,
+|};
+declare type HandleState = {|
+  animateIntoPosition?: boolean | null | void,
+  visible: boolean,
+  x?: number,
+  y?: number,
+|};
+declare type State = {|
+  focused: boolean,
+  handle: HandleState,
+|};
+declare class MathInput extends React.Component<Props, State> {
+  didTouchOutside: boolean | null | void;
+  didScroll: boolean | null | void;
+  mathField: any;
+  recordTouchStartOutside: (arg1: any) => void;
+  blurOnTouchEndOutside: (arg1: any) => void;
+  dragListener: any;
+  inputRef: HTMLDivElement | null | void;
+  _isMounted: boolean | null | void;
+  _mathContainer: any;
+  _container: HTMLDivElement;
+  _root: any;
+  _containerBounds: ClientRect;
+  _keypadBounds: ClientRect | null | void;
+  static defaultProps: DefaultProps;
+  state: State;
+  componentDidMount(): void;
+  UNSAFE_componentWillReceiveProps(props: Props): void;
+  componentDidUpdate(prevProps: Props, prevState: State): void;
+  componentWillUnmount(): void;
+  _clearKeypadBoundsCache: () => void;
+  _cacheKeypadBounds: (arg1: any) => void;
+  _updateInputPadding: () => void;
+
+  /**
+   * Gets and cache they bounds of the keypadElement
+   */
+  _getKeypadBounds: () => any;
+  _updateCursorHandle: (arg1?: boolean | null | void) => void;
+  _hideCursorHandle: () => void;
+  _handleScroll: () => void;
+  blur: () => void;
+  focus: () => void;
+
+  /**
+   * Tries to determine which DOM node to place the cursor next to based on
+   * where the user drags the cursor handle.  If it finds a node it will
+   * place the cursor next to it, update the handle to be under the cursor,
+   * and return true.  If it doesn't find a node, it returns false.
+   *
+   * It searches for nodes by doing it tests at the following points:
+   *
+   *   (x - dx, y), (x, y), (x + dx, y)
+   *
+   * If it doesn't find any nodes from the rendered math it will update y
+   * by adding dy.
+   *
+   * The algorithm ends its search when y goes outside the bounds of
+   * containerBounds.
+   * @param {DOMRect} containerBounds - bounds of the container node
+   * @param {number} x - the initial x coordinate in the viewport
+   * @param {number} y - the initial y coordinate in the viewport
+   * @param {number} dx - horizontal spacing between elementFromPoint calls
+   * @param {number} dy - vertical spacing between elementFromPoint calls,
+   *   sign determines direction.
+   * @returns {boolean} - true if a node was hit, false otherwise.
+   */
+  _findHitNode: (
+    arg1: ClientRect,
+    arg2: number,
+    arg3: number,
+    arg4: number,
+    arg5: number
+  ) => boolean;
+
+  /**
+   * Inserts the cursor at the DOM node closest to the given coordinates,
+   * based on hit-tests conducted using #_findHitNode.
+   * @param {number} x - the x coordinate in the viewport
+   * @param {number} y - the y coordinate in the viewport
+   */
+  _insertCursorAtClosestNode: (arg1: number, arg2: number) => void;
+  handleTouchStart: (arg1: SyntheticTouchEvent<HTMLDivElement>) => void;
+  handleTouchMove: (arg1: SyntheticTouchEvent<HTMLDivElement>) => void;
+  handleTouchEnd: (arg1: SyntheticTouchEvent<HTMLDivElement>) => void;
+
+  /**
+   * When a touch starts in the cursor handle, we track it so as to avoid
+   * handling any touch events ourself.
+   * @param {TouchEvent} e - the raw touch event from the browser
+   */
+  onCursorHandleTouchStart: (
+    arg1: SyntheticTouchEvent<HTMLSpanElement>
+  ) => void;
+  _constrainToBound: (
+    arg1: number,
+    arg2: number,
+    arg3: number,
+    arg4: number
+  ) => number;
+
+  /**
+   * When the user moves the cursor handle update the position of the cursor
+   * and the handle.
+   * @param {TouchEvent} e - the raw touch event from the browser
+   */
+  onCursorHandleTouchMove: (arg1: SyntheticTouchEvent<HTMLSpanElement>) => void;
+
+  /**
+   * When the user releases the cursor handle, animate it back into place.
+   * @param {TouchEvent} e - the raw touch event from the browser
+   */
+  onCursorHandleTouchEnd: (arg1: SyntheticTouchEvent<HTMLSpanElement>) => void;
+
+  /**
+   * If the gesture is cancelled mid-drag, simply hide it.
+   * @param {TouchEvent} e - the raw touch event from the browser
+   */
+  onCursorHandleTouchCancel: (
+    arg1: SyntheticTouchEvent<HTMLSpanElement>
+  ) => void;
+  domKeyToMathQuillKey: (arg1: string) => string | null | void;
+  handleKeyUp: (arg1: SyntheticKeyboardEvent<HTMLDivElement>) => void;
+  getBorderWidthPx: () => number;
+  getInputInnerPadding: () => {|
+    paddingTop: number,
+    paddingRight: number,
+    paddingBottom: number,
+    paddingLeft: number,
+  |};
+  render(): React.Node;
+}
+declare export default typeof MathInput;

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+type KeyId = string;
+declare const buttonAsset: React.FC<{
+    id: KeyId;
+}>;
+export default buttonAsset;

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

@@ -0,0 +1,12 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+declare type KeyId = string;
+declare var buttonAsset: React.StatelessFunctionalComponent<{|
+  id: KeyId,
+|}>;
+declare export default typeof buttonAsset;

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { Node } from "React";
+type Props = {
+    onPress: () => void;
+    children: Node;
+    style?: StyleType;
+    tintColor?: string;
+};
+type State = Record<any, any>;
+export default class Button extends React.Component<Props, State> {
+    render(): React.ReactNode;
+}
+export {};

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

@@ -0,0 +1,19 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { Node } from "React";
+declare type Props = {|
+  onPress: () => void,
+  children: Node,
+  style?: StyleType,
+  tintColor?: string,
+|};
+declare type State = { [key: any]: any };
+declare export default class Button extends React.Component<Props, State> {
+  render(): React.Node;
+}

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { TabbarItemType } from "../tabbar/types";
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+    preAlgebra: boolean;
+    trigonometry: boolean;
+};
+type State = {
+    selectedPage: TabbarItemType;
+};
+export default class PreAlgebraKeypad extends React.Component<Props, State> {
+    state: State;
+    render(): React.ReactNode;
+}
+export {};

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

@@ -0,0 +1,22 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { TabbarItemType } from "../tabbar/types";
+declare type Props = {|
+  onClickKey: (keyConfig: string) => void,
+  preAlgebra: boolean,
+  trigonometry: boolean,
+|};
+declare type State = {|
+  selectedPage: TabbarItemType,
+|};
+declare export default class PreAlgebraKeypad
+  extends React.Component<Props, State>
+{
+  state: State;
+  render(): React.Node;
+}

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+import type { KeyConfig } from "../../data/key-configs";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { Node } from "React";
+export declare const KeypadPageContainer: React.FC<{
+    children: Node;
+}>;
+export declare const KeypadButton: React.FC<{
+    keyConfig: KeyConfig;
+    tintColor?: string;
+    style?: StyleType;
+    onClickKey: (keyConfig: string) => void;
+}>;
+export declare const SecondaryKeypadButton: React.FC<{
+    keyConfig: KeyConfig;
+    style?: any;
+    onClickKey: (keyConfig: string) => void;
+}>;
+export declare const KeypadActionButton: React.FC<{
+    keyConfig: KeyConfig;
+    style?: any;
+    onClickKey: (keyConfig: string) => void;
+}>;
+export declare const PlaceHolderButton: () => React.ReactElement;

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

@@ -0,0 +1,30 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { KeyConfig } from "../../data/key-configs";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { Node } from "React";
+declare export var KeypadPageContainer: React.StatelessFunctionalComponent<{|
+  children: Node,
+|}>;
+declare export var KeypadButton: React.StatelessFunctionalComponent<{|
+  keyConfig: KeyConfig,
+  tintColor?: string,
+  style?: StyleType,
+  onClickKey: (keyConfig: string) => void,
+|}>;
+declare export var SecondaryKeypadButton: React.StatelessFunctionalComponent<{|
+  keyConfig: KeyConfig,
+  style?: any,
+  onClickKey: (keyConfig: string) => void,
+|}>;
+declare export var KeypadActionButton: React.StatelessFunctionalComponent<{|
+  keyConfig: KeyConfig,
+  style?: any,
+  onClickKey: (keyConfig: string) => void,
+|}>;
+declare export var PlaceHolderButton: () => React.Element<any>;

package/dist/components/keypad/numeric-input-page.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+};
+export default class NumericInputPage extends React.Component<Props> {
+    render(): React.ReactNode;
+}
+export {};

package/dist/components/keypad/numeric-input-page.js.flow

@@ -0,0 +1,13 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+declare type Props = {|
+  onClickKey: (keyConfig: string) => void,
+|};
+declare export default class NumericInputPage extends React.Component<Props> {
+  render(): React.Node;
+}

package/dist/components/keypad/pre-algebra-page.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+};
+export default class PreAlgebraPage extends React.Component<Props> {
+    render(): React.ReactNode;
+}
+export {};

package/dist/components/keypad/pre-algebra-page.js.flow

@@ -0,0 +1,13 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+declare type Props = {|
+  onClickKey: (keyConfig: string) => void,
+|};
+declare export default class PreAlgebraPage extends React.Component<Props> {
+  render(): React.Node;
+}

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+};
+export default class TrigonometryInputPage extends React.Component<Props> {
+    render(): React.ReactNode;
+}
+export {};