@khanacademy/math-input 2.0.0 → 4.0.0

package/dist/components/keypad/{pre-algebra-page.d.ts → geometry-page/index.d.ts}

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

package/dist/components/keypad/{pre-algebra-page.js.flow → geometry-page/index.js.flow}

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

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

@@ -1,10 +1,11 @@
 import * as React from "react";
+import { NumbersPageOptions } from "./numbers-page/types";
+import { OperatorsButtonSets } from "./operators-page/types";
 import type { TabbarItemType } from "../tabbar/types";
-type Props = {
+export type Props = {
     onClickKey: (keyConfig: string) => void;
-    preAlgebra: boolean;
-    trigonometry: boolean;
-};
+    trigonometry?: boolean;
+} & OperatorsButtonSets & NumbersPageOptions;
 type State = {
     selectedPage: TabbarItemType;
 };

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

@@ -5,11 +5,16 @@
  * @flow
  */
 import * as React from "react";
+import { NumbersPageOptions } from "./numbers-page/types";
+import { OperatorsButtonSets } from "./operators-page/types";
 import type { TabbarItemType } from "../tabbar/types";
-declare type Props = {|
-  onClickKey: (keyConfig: string) => void,
-  preAlgebra: boolean,
-  trigonometry: boolean,
+export type Props = {|
+  ...{|
+    onClickKey: (keyConfig: string) => void,
+    trigonometry?: boolean,
+  |},
+  ...OperatorsButtonSets,
+  ...NumbersPageOptions,
 |};
 declare type State = {|
   selectedPage: TabbarItemType,

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

@@ -1,11 +1,11 @@
 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;
 };
 export declare const KeypadPageContainer: ({ children, }: KeypadPageContainerProps) => React.ReactElement;
-type KeypadButtonProps = {
+export type KeypadButtonProps = {
     keyConfig: KeyConfig;
     tintColor?: string;
     style?: StyleType;
@@ -24,5 +24,11 @@ type KeypadActionButtonProps = {
     onClickKey: (keyConfig: string) => void;
 };
 export declare const KeypadActionButton: ({ keyConfig, onClickKey, style, }: KeypadActionButtonProps) => React.ReactElement;
-export declare const PlaceHolderButton: () => React.ReactElement;
+/**
+ * A placeholder button for the keypad. Optional count prop to render multiple
+ * buttons. Defaults to 1.
+ */
+export declare const PlaceHolderButtons: ({ count, }: {
+    count?: number | undefined;
+}) => React.ReactElement;
 export {};

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,
@@ -13,7 +13,7 @@ declare type KeypadPageContainerProps = {|
 declare export var KeypadPageContainer: (
   x: KeypadPageContainerProps
 ) => React.Element<any>;
-declare type KeypadButtonProps = {|
+export type KeypadButtonProps = {|
   keyConfig: KeyConfig,
   tintColor?: string,
   style?: StyleType,
@@ -36,4 +36,10 @@ declare type KeypadActionButtonProps = {|
 declare export var KeypadActionButton: (
   x: KeypadActionButtonProps
 ) => React.Element<any>;
-declare export var PlaceHolderButton: () => React.Element<any>;
+/**
+ * A placeholder button for the keypad. Optional count prop to render multiple
+ * buttons. Defaults to 1.
+ */
+declare export var PlaceHolderButtons: (x: {|
+  count?: number | void,
+|}) => React.Element<any>;

package/dist/components/keypad/{numeric-input-page.d.ts → numbers-page/index.d.ts}

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

package/dist/components/keypad/numbers-page/index.js.flow

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

package/dist/components/keypad/numbers-page/types.d.ts

@@ -0,0 +1,4 @@
+export type NumbersPageOptions = {
+    multiplicationDot?: boolean;
+    divisionKey?: boolean;
+};

package/dist/components/keypad/numbers-page/types.js.flow

@@ -0,0 +1,10 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+export type NumbersPageOptions = {|
+  multiplicationDot?: boolean,
+  divisionKey?: boolean,
+|};

package/dist/components/keypad/operators-page/advanced-relations-buttons.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+    placeholder?: boolean;
+};
+export declare const AdvancedRelations: ({ onClickKey, placeholder, }: Props) => React.ReactElement;
+export {};

package/dist/components/keypad/{numeric-input-page.js.flow → operators-page/advanced-relations-buttons.js.flow}

@@ -4,10 +4,9 @@
  * Flowgen v1.21.0
  * @flow
  */
-import * as React from "react";
+import React from "react";
 declare type Props = {|
   onClickKey: (keyConfig: string) => void,
+  placeholder?: boolean,
 |};
-declare export default class NumericInputPage extends React.Component<Props> {
-  render(): React.Node;
-}
+declare export var AdvancedRelations: (x: Props) => React.ReactElement;

package/dist/components/keypad/operators-page/basic-relations-buttons.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+    placeholder?: boolean;
+};
+export declare const BasicRelations: ({ onClickKey, placeholder, }: Props) => React.ReactElement;
+export {};

package/dist/components/keypad/{trigonometry-page.js.flow → operators-page/basic-relations-buttons.js.flow}

@@ -4,12 +4,9 @@
  * Flowgen v1.21.0
  * @flow
  */
-import * as React from "react";
+import React from "react";
 declare type Props = {|
   onClickKey: (keyConfig: string) => void,
+  placeholder?: boolean,
 |};
-declare export default class TrigonometryInputPage
-  extends React.Component<Props>
-{
-  render(): React.Node;
-}
+declare export var BasicRelations: (x: Props) => React.ReactElement;

package/dist/components/keypad/operators-page/index.d.ts

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

package/dist/components/keypad/operators-page/index.js.flow

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

package/dist/components/keypad/operators-page/logarithms-buttons.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+    placeholder?: boolean;
+};
+export declare const Logarithms: ({ onClickKey, placeholder, }: Props) => React.ReactElement;
+export {};

package/dist/components/keypad/operators-page/logarithms-buttons.js.flow

@@ -0,0 +1,12 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import React from "react";
+declare type Props = {|
+  onClickKey: (keyConfig: string) => void,
+  placeholder?: boolean,
+|};
+declare export var Logarithms: (x: Props) => React.ReactElement;

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

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+    placeholder?: boolean;
+};
+export declare const PreAlgebra: ({ onClickKey, placeholder, }: Props) => React.ReactElement;
+export {};

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

@@ -0,0 +1,12 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import React from "react";
+declare type Props = {|
+  onClickKey: (keyConfig: string) => void,
+  placeholder?: boolean,
+|};
+declare export var PreAlgebra: (x: Props) => React.ReactElement;

package/dist/components/keypad/operators-page/types.d.ts

@@ -0,0 +1,6 @@
+export type OperatorsButtonSets = {
+    preAlgebra?: boolean;
+    logarithms?: boolean;
+    basicRelations?: boolean;
+    advancedRelations?: boolean;
+};

package/dist/components/keypad/operators-page/types.js.flow

@@ -0,0 +1,12 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+export type OperatorsButtonSets = {|
+  preAlgebra?: boolean,
+  logarithms?: boolean,
+  basicRelations?: boolean,
+  advancedRelations?: boolean,
+|};

package/dist/components/{compute-layout-parameters.d.ts → keypad-legacy/compute-layout-parameters.d.ts}

@@ -18,7 +18,7 @@
  * to be conservative in our measurements and make things smaller than they
  * might need to be.
  */
-import { LayoutMode } from "../enums";
+import { LayoutMode } from "../../enums";
 export declare const computeLayoutParameters: ({ numColumns, numMaxVisibleRows, numPages }: {
     numColumns: any;
     numMaxVisibleRows: any;

package/dist/components/{compute-layout-parameters.js.flow → keypad-legacy/compute-layout-parameters.js.flow}

@@ -4,7 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
-import { LayoutMode } from "../enums";
+import { LayoutMode } from "../../enums";
 declare export var computeLayoutParameters: (
   x: {|
     numColumns: any,

package/dist/components/{echo-manager.d.ts → keypad-legacy/echo-manager.d.ts}

@@ -2,18 +2,9 @@
  * A component that renders and animates the selection state effect effect.
  */
 import * as React from "react";
-import Keys from "../data/keys";
-import { EchoAnimationType } from "../enums";
-import type { Border, Bound } from "../types";
-type EchoPropType = {
-    animationId: string;
-    animationType: EchoAnimationType;
-    borders: Border;
-    id: Keys;
-    initialBounds: Bound;
-};
+import type { Echo as EchoType } from "../../types";
 type EchoManagerProps = {
-    echoes: ReadonlyArray<EchoPropType>;
+    echoes: ReadonlyArray<EchoType>;
     onAnimationFinish?: (animationId: string) => void;
 };
 declare class EchoManager extends React.Component<EchoManagerProps> {

package/dist/components/{echo-manager.js.flow → keypad-legacy/echo-manager.js.flow}

@@ -5,18 +5,9 @@
  * @flow
  */
 import * as React from "react";
-import Keys from "../data/keys";
-import { EchoAnimationType } from "../enums";
-import type { Border, Bound } from "../types";
-declare type EchoPropType = {|
-  animationId: string,
-  animationType: EchoAnimationType,
-  borders: Border,
-  id: Keys,
-  initialBounds: Bound,
-|};
+import type { Echo as EchoType } from "../../types";
 declare type EchoManagerProps = {|
-  echoes: $ReadOnlyArray<EchoPropType>,
+  echoes: $ReadOnlyArray<EchoType>,
   onAnimationFinish?: (animationId: string) => void,
 |};
 declare class EchoManager extends React.Component<EchoManagerProps> {

package/dist/components/{expression-keypad.d.ts → keypad-legacy/expression-keypad.d.ts}

@@ -2,10 +2,9 @@
  * 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 { CursorContext } from "../input/cursor-contexts";
+import type { KeypadLayout } from "../../types";
 interface ReduxProps {
-    currentPage: number;
     cursorContext?: CursorContext;
     dynamicJumpOut: boolean;
 }
@@ -18,5 +17,5 @@ export declare const expressionKeypadLayout: KeypadLayout;
 declare class ExpressionKeypad extends React.Component<Props> {
     render(): JSX.Element;
 }
-declare const _default: import("react-redux").ConnectedComponent<typeof ExpressionKeypad, import("react-redux").Omit<React.ClassAttributes<ExpressionKeypad> & Props, "currentPage" | "cursorContext" | "dynamicJumpOut">>;
+declare const _default: import("react-redux").ConnectedComponent<typeof ExpressionKeypad, import("react-redux").Omit<React.ClassAttributes<ExpressionKeypad> & Props, "cursorContext" | "dynamicJumpOut">>;
 export default _default;

package/dist/components/{expression-keypad.js.flow → keypad-legacy/expression-keypad.js.flow}

@@ -6,10 +6,9 @@
  */
 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 { CursorContext } from "../input/cursor-contexts";
+import type { KeypadLayout } from "../../types";
 declare interface ReduxProps {
-  currentPage: number;
   cursorContext?: CursorContext;
   dynamicJumpOut: boolean;
 }
@@ -26,7 +25,7 @@ declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
   typeof ExpressionKeypad,
   $Flowgen$Import$react_2d_redux.Omit<
     {| ...React.ClassAttributes<ExpressionKeypad>, ...Props |},
-    "currentPage" | "cursorContext" | "dynamicJumpOut"
+    "cursorContext" | "dynamicJumpOut"
   >
 >;
 declare export default typeof _default;

package/dist/components/{fraction-keypad.d.ts → keypad-legacy/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 { CursorContext } from "../input/cursor-contexts";
+import type { KeypadLayout } from "../../types";
 interface ReduxProps {
     cursorContext?: CursorContext;
     dynamicJumpOut: boolean;

package/dist/components/{fraction-keypad.js.flow → keypad-legacy/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 { CursorContext } from "../input/cursor-contexts";
+import type { KeypadLayout } from "../../types";
 declare interface ReduxProps {
   cursorContext?: CursorContext;
   dynamicJumpOut: boolean;

package/dist/components/{gesture-manager.d.ts → 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.
      *
@@ -54,7 +66,7 @@ declare class GestureManager {
      *                              intercepting touch events
      * @param {object} borders - an opaque object describing the node's borders
      */
-    registerDOMNode(id: any, domNode: any, childIds: any, borders: any): void;
+    registerDOMNode(id: any, domNode: any, childIds: any): void;
     /**
      * Unregister the DOM node with the given identifier.
      *

package/dist/components/{gesture-manager.js.flow → 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.
@@ -60,7 +75,7 @@ declare class GestureManager {
    *   intercepting touch events
    * @param {{...}} borders - an opaque object describing the node's borders
    */
-  registerDOMNode(id: any, domNode: any, childIds: any, borders: any): void;
+  registerDOMNode(id: any, domNode: any, childIds: any): void;
 
   /**
    * Unregister the DOM node with the given identifier.