@khanacademy/math-input 0.7.1 → 1.0.0

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

@@ -0,0 +1,65 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { Border } from "../types";
+
+/**
+ * A manager for our node-to-ID system. In particular, this class is
+ * responsible for maintaing a mapping between DOM nodes and node IDs, and
+ * translating touch events from the raw positions at which they occur to the
+ * nodes over which they are occurring. This differs from browser behavior, in
+ * which touch events are only sent to the node in which a touch started.
+ */
+declare class NodeManager {
+  _nodesById: { [key: string]: HTMLElement };
+  _bordersById: { [key: string]: Border };
+  _orderedIds: $ReadOnlyArray<string>;
+  _cachedBoundingBoxesById: { [key: string]: DOMRect };
+  constructor(): this;
+
+  /**
+   * Register a DOM node with a given identifier.
+   * @param {string} id - the identifier of the given node
+   * @param {node} domNode - the DOM node linked to the identifier
+   * @param {{...}} borders - an opaque object describing the node's borders
+   */
+  registerDOMNode(
+    id: string,
+    domNode: HTMLElement,
+    childIds: $ReadOnlyArray<string>,
+    borders: Border
+  ): void;
+
+  /**
+   * Unregister the DOM node with the given identifier.
+   * @param {string} id - the identifier of the node to unregister
+   */
+  unregisterDOMNode(id: string): void;
+
+  /**
+   * Return the identifier of the topmost node located at the given
+   * coordinates.
+   * @param {number} x - the x coordinate at which to search for a node
+   * @param {number} y - the y coordinate at which to search for a node
+   * @returns {null | string} - null or the identifier of the topmost node at
+   *   the given coordinates
+   */
+  idForCoords(x: number, y: number): string | void;
+
+  /**
+   * Return the necessary layout information, including the bounds and border
+   * values, for the node with the given identifier.
+   * @param {string} id - the identifier of the node for which to return the
+   *   layout information
+   * @returns {{...}} - the bounding client rect for the given node, along
+   *   with its borders
+   */
+  layoutPropsForId(id: string): {|
+    initialBounds: DOMRect,
+    borders: Border,
+  |};
+}
+declare export default typeof NodeManager;

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

@@ -0,0 +1,13 @@
+/**
+ * A component that renders and animates the popovers that appear over the
+ * multi-functional keys.
+ */
+import * as React from "react";
+import type { Popover } from "../types";
+type PopoverManagerProps = {
+    popover: Popover | null;
+};
+declare class PopoverManager extends React.Component<PopoverManagerProps> {
+    render(): JSX.Element | null;
+}
+export default PopoverManager;

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

@@ -0,0 +1,15 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { Popover } from "../types";
+declare type PopoverManagerProps = {|
+  popover: Popover | null,
+|};
+declare class PopoverManager extends React.Component<PopoverManagerProps> {
+  render(): React$Node | null;
+}
+declare export default typeof PopoverManager;

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

@@ -0,0 +1,75 @@
+/**
+ * A state machine for the popover state. In particular, this class manages the
+ * mapping of parent nodes to their children, and translates touch events that
+ * traverse various nodes to actions that are conditioned on whether a popover
+ * is present.
+ */
+type ActiveNodesObjPopover = {
+    parentId: string;
+    childIds: ReadonlyArray<string>;
+};
+type ActiveNodesObj = {
+    popover: ActiveNodesObjPopover | null;
+    focus: string | null;
+};
+type Handlers = {
+    onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void;
+    onClick: (keyId: string, domNodeId: string, inPopover: boolean) => void;
+};
+declare class PopoverStateMachine {
+    handlers: Handlers;
+    popovers: Record<string, ReadonlyArray<string>>;
+    activePopover: string | null;
+    constructor(handlers: any);
+    /**
+     * Register a popover container as containing a set of children.
+     *
+     * @param {string} id - the identifier of the popover container
+     * @param {string[]} childIds - the identifiers of the nodes contained in
+     *                              the popover container
+     */
+    registerPopover(id: any, childIds: any): void;
+    /**
+     * Unregister a popover container.
+     *
+     * @param {string} id - the identifier of the popover container to
+     *                      unregister
+     */
+    unregisterPopover(id: any): void;
+    /**
+     * @returns {boolean} - whether a popover is active and visible
+     */
+    isPopoverVisible(): boolean;
+    /**
+     * Blur the active nodes.
+     */
+    onBlur(): void;
+    /**
+     * Handle a focus event on the node with the given identifier.
+     *
+     * @param {string} id - the identifier of the node that was focused
+     */
+    onFocus(id: any): void;
+    /**
+     * Handle a long press event on the node with the given identifier.
+     *
+     * @param {string} id - the identifier of the node that was long-pressed
+     */
+    onLongPress(id: any): void;
+    /**
+     * Handle the trigger (click or hold) of the node with the given identifier.
+     *
+     * @param {string} id - the identifier of the node that was triggered
+     */
+    onTrigger(id: any): void;
+    /**
+     * Handle a touch-end event on the node with the given identifier.
+     *
+     * @param {string} id - the identifier of the node over which the touch
+     *                      ended
+     */
+    onTouchEnd(id: any): void;
+    _isNodeInsidePopover(popover: any, id: any): boolean;
+    _defaultNodeForPopover(popover: any): string;
+}
+export default PopoverStateMachine;

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

@@ -0,0 +1,83 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+/**
+ * A state machine for the popover state. In particular, this class manages the
+ * mapping of parent nodes to their children, and translates touch events that
+ * traverse various nodes to actions that are conditioned on whether a popover
+ * is present.
+ */
+declare type ActiveNodesObjPopover = {|
+  parentId: string,
+  childIds: $ReadOnlyArray<string>,
+|};
+declare type ActiveNodesObj = {|
+  popover: ActiveNodesObjPopover | null,
+  focus: string | null,
+|};
+declare type Handlers = {|
+  onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void,
+  onClick: (keyId: string, domNodeId: string, inPopover: boolean) => void,
+|};
+declare class PopoverStateMachine {
+  handlers: Handlers;
+  popovers: { [key: string]: $ReadOnlyArray<string> };
+  activePopover: string | null;
+  constructor(handlers: any): this;
+
+  /**
+   * Register a popover container as containing a set of children.
+   * @param {string} id - the identifier of the popover container
+   * @param {string[]} childIds - the identifiers of the nodes contained in
+   *   the popover container
+   */
+  registerPopover(id: any, childIds: any): void;
+
+  /**
+   * Unregister a popover container.
+   * @param {string} id - the identifier of the popover container to
+   *   unregister
+   */
+  unregisterPopover(id: any): void;
+
+  /**
+   * @returns {boolean} - whether a popover is active and visible
+   */
+  isPopoverVisible(): boolean;
+
+  /**
+   * Blur the active nodes.
+   */
+  onBlur(): void;
+
+  /**
+   * Handle a focus event on the node with the given identifier.
+   * @param {string} id - the identifier of the node that was focused
+   */
+  onFocus(id: any): void;
+
+  /**
+   * Handle a long press event on the node with the given identifier.
+   * @param {string} id - the identifier of the node that was long-pressed
+   */
+  onLongPress(id: any): void;
+
+  /**
+   * Handle the trigger (click or hold) of the node with the given identifier.
+   * @param {string} id - the identifier of the node that was triggered
+   */
+  onTrigger(id: any): void;
+
+  /**
+   * Handle a touch-end event on the node with the given identifier.
+   * @param {string} id - the identifier of the node over which the touch
+   *   ended
+   */
+  onTouchEnd(id: any): void;
+  _isNodeInsidePopover(popover: any, id: any): boolean;
+  _defaultNodeForPopover(popover: any): string;
+}
+declare export default typeof PopoverStateMachine;

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

@@ -1,22 +1,23 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
-import type { CSSProperties } from "aphrodite";
+import type { Cursor, KeypadConfiguration, KeyHandler } from "../types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
     onElementMounted?: (arg1: any) => void;
-    onDismiss?: () => unknown;
-    style?: CSSProperties;
+    onDismiss?: () => void;
+    style?: StyleType;
 };
 declare class ProvidedKeypad extends React.Component<Props> {
-    mounted: boolean;
+    mounted?: boolean;
     store: any;
     UNSAFE_componentWillMount(): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
     activate: () => void;
     dismiss: () => void;
-    configure: () => void;
-    setCursor: () => void;
-    setKeyHandler: (keyHandler: any) => void;
+    configure: (configuration: KeypadConfiguration, cb: () => void) => void;
+    setCursor: (cursor: Cursor) => void;
+    setKeyHandler: (keyHandler: KeyHandler) => void;
     getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode>;
     render(): React.ReactNode;
 }

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

@@ -6,23 +6,24 @@
  */
 import * as React from "react";
 import ReactDOM from "react-dom";
-import type { CSSProperties } from "aphrodite";
+import type { Cursor, KeypadConfiguration, KeyHandler } from "../types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
 declare type Props = {|
   onElementMounted?: (arg1: any) => void,
-  onDismiss?: () => mixed,
-  style?: CSSProperties,
+  onDismiss?: () => void,
+  style?: StyleType,
 |};
 declare class ProvidedKeypad extends React.Component<Props> {
-  mounted: boolean;
+  mounted?: boolean;
   store: any;
   UNSAFE_componentWillMount(): void;
   componentDidMount(): void;
   componentWillUnmount(): void;
   activate: () => void;
   dismiss: () => void;
-  configure: () => void;
-  setCursor: () => void;
-  setKeyHandler: (keyHandler: any) => void;
+  configure: (configuration: KeypadConfiguration, cb: () => void) => void;
+  setCursor: (cursor: Cursor) => void;
+  setKeyHandler: (keyHandler: KeyHandler) => void;
   getDOMNode: () => $Call<
     <R>((...args: any[]) => R) => R,
     typeof ReactDOM.findDOMNode

package/dist/components/styles.d.ts

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

package/dist/components/styles.js.flow

@@ -0,0 +1,13 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * 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 export default typeof _default;

package/dist/components/svg-icon.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A component that renders a single SVG icon.
+ */
+import * as React from "react";
+type Props = {
+    color: string;
+    name: string;
+};
+declare class SvgIcon extends React.Component<Props> {
+    render(): JSX.Element;
+}
+export default SvgIcon;

package/dist/components/svg-icon.js.flow

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

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

@@ -1,7 +1,8 @@
 import * as React from "react";
 import type { TabbarItemType } from "./types";
-declare const IconAsset: React.FC<{
+type Props = {
     tintColor: string;
     type: TabbarItemType;
-}>;
+};
+declare const IconAsset: ({ tintColor, type }: Props) => React.ReactElement;
 export default IconAsset;

package/dist/components/tabbar/icons.js.flow

@@ -6,8 +6,9 @@
  */
 import * as React from "react";
 import type { TabbarItemType } from "./types";
-declare var IconAsset: React.StatelessFunctionalComponent<{|
+declare type Props = {|
   tintColor: string,
   type: TabbarItemType,
-|}>;
+|};
+declare var IconAsset: (x: Props) => React.Element<any>;
 declare export default typeof IconAsset;

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

@@ -6,8 +6,7 @@ type Props = {
     itemState: ItemState;
     itemType: TabbarItemType;
 };
-type State = Record<any, any>;
-declare class TabbarItem extends React.Component<Props, State> {
+declare class TabbarItem extends React.Component<Props> {
     render(): React.ReactNode;
 }
 export declare const TabbarItemForTesting: typeof TabbarItem;

package/dist/components/tabbar/item.js.flow

@@ -12,8 +12,7 @@ declare type Props = {|
   itemState: ItemState,
   itemType: TabbarItemType,
 |};
-declare type State = { [key: any]: any };
-declare class TabbarItem extends React.Component<Props, State> {
+declare class TabbarItem extends React.Component<Props> {
   render(): React.Node;
 }
 declare export var TabbarItemForTesting: typeof TabbarItem;

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

@@ -3,11 +3,11 @@ import type { TabbarItemType } from "./types";
 type TabbarState = {
     selectedItem: number;
 };
-type TabbarProps = {
-    items: Array<TabbarItemType>;
+type Props = {
+    items: ReadonlyArray<TabbarItemType>;
     onSelect: (item: TabbarItemType) => void;
 };
-declare class Tabbar extends React.Component<TabbarProps, TabbarState> {
+declare class Tabbar extends React.Component<Props, TabbarState> {
     state: TabbarState;
     render(): React.ReactNode;
 }

package/dist/components/tabbar/tabbar.js.flow

@@ -9,11 +9,11 @@ import type { TabbarItemType } from "./types";
 declare type TabbarState = {|
   selectedItem: number,
 |};
-declare type TabbarProps = {|
-  items: Array<TabbarItemType>,
+declare type Props = {|
+  items: $ReadOnlyArray<TabbarItemType>,
   onSelect: (item: TabbarItemType) => void,
 |};
-declare class Tabbar extends React.Component<TabbarProps, TabbarState> {
+declare class Tabbar extends React.Component<Props, TabbarState> {
   state: TabbarState;
   render(): React.Node;
 }

package/dist/components/text-icon.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A component that renders a text-based icon.
+ */
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    character: string;
+    style?: StyleType;
+};
+declare class TextIcon extends React.Component<Props> {
+    render(): JSX.Element;
+}
+export default TextIcon;

package/dist/components/text-icon.js.flow

@@ -0,0 +1,16 @@
+/**
+ * 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";
+declare type Props = {|
+  character: string,
+  style?: StyleType,
+|};
+declare class TextIcon extends React.Component<Props> {
+  render(): React$Node;
+}
+declare export default typeof TextIcon;

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

@@ -0,0 +1,30 @@
+/**
+ * A touchable wrapper around the base KeypadButton component. This button is
+ * responsible for keeping our button ID system (which will be used to handle
+ * touch events globally) opaque to the KeypadButton.
+ */
+import * as React from "react";
+import { KeyType } from "../consts";
+import GestureManager from "./gesture-manager";
+import type { Key } from "../data/keys";
+import type { Border, Icon } from "../types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    borders: Border;
+    childKeyIds: ReadonlyArray<Key>;
+    disabled: boolean;
+    focused: boolean;
+    gestureManager: GestureManager;
+    id: Key;
+    popoverEnabled: boolean;
+    style: StyleType;
+    type: KeyType;
+    icon: Icon;
+};
+declare class TouchableKeypadButton extends React.Component<Props> {
+    shouldComponentUpdate(newProps: any): boolean;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+declare const _default: import("react-redux").ConnectedComponent<typeof TouchableKeypadButton, any>;
+export default _default;

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

@@ -0,0 +1,35 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as $Flowgen$Import$react_2d_redux from "react-redux";
+import * as React from "react";
+import { KeyType } from "../consts";
+import GestureManager from "./gesture-manager";
+import type { Key } from "../data/keys";
+import type { Border, Icon } from "../types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+declare type Props = {|
+  borders: Border,
+  childKeyIds: $ReadOnlyArray<Key>,
+  disabled: boolean,
+  focused: boolean,
+  gestureManager: GestureManager,
+  id: Key,
+  popoverEnabled: boolean,
+  style: StyleType,
+  type: KeyType,
+  icon: Icon,
+|};
+declare class TouchableKeypadButton extends React.Component<Props> {
+  shouldComponentUpdate(newProps: any): boolean;
+  componentWillUnmount(): void;
+  render(): React$Node;
+}
+declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
+  typeof TouchableKeypadButton,
+  any
+>;
+declare export default typeof _default;

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

@@ -0,0 +1,20 @@
+/**
+ * A keypad with two pages of keys.
+ */
+import * as React from "react";
+interface ReduxProps {
+    paginationEnabled: boolean;
+}
+interface Props extends ReduxProps {
+    currentPage: number;
+    leftPage: React.ReactNode;
+    rightPage: React.ReactNode;
+}
+declare class TwoPageKeypad extends React.Component<Props> {
+    state: {
+        selectedPage: string;
+    };
+    render(): JSX.Element;
+}
+declare const _default: import("react-redux").ConnectedComponent<typeof TwoPageKeypad, import("react-redux").Omit<React.ClassAttributes<TwoPageKeypad> & Props, "paginationEnabled">>;
+export default _default;

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

@@ -0,0 +1,30 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as $Flowgen$Import$react_2d_redux from "react-redux";
+import * as React from "react";
+declare interface ReduxProps {
+  paginationEnabled: boolean;
+}
+declare type Props = {
+  currentPage: number,
+  leftPage: React.Node,
+  rightPage: React.Node,
+} & ReduxProps;
+declare class TwoPageKeypad extends React.Component<Props> {
+  state: {|
+    selectedPage: string,
+  |};
+  render(): React$Node;
+}
+declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
+  typeof TwoPageKeypad,
+  $Flowgen$Import$react_2d_redux.Omit<
+    {| ...React.ClassAttributes<TwoPageKeypad>, ...Props |},
+    "paginationEnabled"
+  >
+>;
+declare export default typeof _default;

package/dist/components/velocity-tracker.d.ts

@@ -0,0 +1,48 @@
+/**
+ * A system for tracking gesture velocity in a single dimension.
+ *
+ * Velocity is computed by smoothing linearly over the gestures that have
+ * occurred in the last 100 milliseconds.
+ */
+type Event = {
+    x: number;
+    t: number;
+};
+declare class VelocityTracker {
+    options: {
+        velocityTimeout: number;
+    };
+    _events: Array<Event>;
+    constructor(options?: any);
+    /**
+     * Pushes an event with the given displacement onto the event buffer,
+     * associating it with a timestamp. Note that, as this method computes the
+     * timestamp for the event at calltime, it should be called immediately
+     * after the event occurs.
+     *
+     * @param {number} x - the cumulative displacement of the event
+     */
+    push(x: number): void;
+    /**
+     * Compute the velocity with respect to the events that have been tracked
+     * by the system. Velocity is computed by smoothing linearly over recent
+     * displacement values.
+     *
+     * Note that, for performance reasons, a call to `getVelocity` will clear
+     * out the event buffer. As such, repeated calls will not return the same
+     * value (in particular, a second call in quick succession will return 0).
+     *
+     * @returns {number} the velocity associated with the tracker
+     */
+    getVelocity(): number;
+    /**
+     * Filter the tracked events to exclude any events that occurred too far in
+     * the past, and reset the event buffer.
+     *
+     * @returns {number[]} an array of displacements corresponding to events
+     *                     that occurred in the past `velocityTimeout`
+     *                     milliseconds
+     */
+    _getEvents(): ReadonlyArray<Event>;
+}
+export default VelocityTracker;