@khanacademy/math-input 0.7.2 → 1.0.0

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

@@ -7,23 +7,33 @@
 import * as React from "react";
 import type { KeyConfig } from "../../data/key-configs";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
-declare export var KeypadPageContainer: React.StatelessFunctionalComponent<{|
+declare type KeypadPageContainerProps = {|
   children: React.Node,
-|}>;
-declare export var KeypadButton: React.StatelessFunctionalComponent<{|
+|};
+declare export var KeypadPageContainer: (
+  x: KeypadPageContainerProps
+) => React.Element<any>;
+declare type KeypadButtonProps = {|
   keyConfig: KeyConfig,
   tintColor?: string,
   style?: StyleType,
   onClickKey: (keyConfig: string) => void,
-|}>;
-declare export var SecondaryKeypadButton: React.StatelessFunctionalComponent<{|
+|};
+declare export var KeypadButton: (x: KeypadButtonProps) => React.Element<any>;
+declare type SecondaryKeypadButtonProps = {|
   keyConfig: KeyConfig,
-  style?: any,
+  style?: StyleType,
   onClickKey: (keyConfig: string) => void,
-|}>;
-declare export var KeypadActionButton: React.StatelessFunctionalComponent<{|
+|};
+declare export var SecondaryKeypadButton: (
+  x: SecondaryKeypadButtonProps
+) => React.Element<any>;
+declare type KeypadActionButtonProps = {|
   keyConfig: KeyConfig,
-  style?: any,
+  style?: StyleType,
   onClickKey: (keyConfig: string) => void,
-|}>;
+|};
+declare export var KeypadActionButton: (
+  x: KeypadActionButtonProps
+) => React.Element<any>;
 declare export var PlaceHolderButton: () => React.Element<any>;

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

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

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

@@ -0,0 +1,79 @@
+/**
+ * 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 type { KeyType } from "../consts";
+import type { Border, KeyConfig, Icon as IconType } from "../types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+declare interface ReduxProps {
+  heightPx: number;
+  widthPx: number;
+}
+declare type Props = {
+  ariaLabel?: string,
+  borders: Border,
+  childKeys: $ReadOnlyArray<KeyConfig>,
+  disabled: boolean,
+  focused: boolean,
+  popoverEnabled: boolean,
+  type: KeyType,
+  icon: IconType,
+  style?: StyleType,
+  onTouchCancel?: (evt: SyntheticTouchEvent<HTMLDivElement>) => void,
+  onTouchEnd?: (evt: SyntheticTouchEvent<HTMLDivElement>) => void,
+  onTouchMove?: (evt: SyntheticTouchEvent<HTMLDivElement>) => void,
+  onTouchStart?: (evt: SyntheticTouchEvent<HTMLDivElement>) => void,
+  ref?: (any: any) => void,
+} & ReduxProps;
+declare class KeypadButton extends React.PureComponent<Props> {
+  buttonSizeStyle: StyleType | void;
+  static defaultProps: {|
+    borders: $ReadOnlyArray<"LEFT" | "BOTTOM">,
+    childKeys: empty[],
+    disabled: boolean,
+    focused: boolean,
+    popoverEnabled: boolean,
+  |};
+  UNSAFE_componentWillMount(): void;
+  componentDidMount(): void;
+  UNSAFE_componentWillUpdate(newProps: any, newState: any): void;
+  _preInjectStyles: () => void;
+  _getFocusStyle: (type: any) => any[];
+  _getButtonStyle: (type: any, borders: any, style?: any) => any[];
+  render(): React$Node;
+}
+declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
+  typeof KeypadButton,
+  $Flowgen$Import$react_2d_redux.Omit<
+    {|
+      ...Pick<
+        Props,
+        | "style"
+        | "icon"
+        | "ref"
+        | "ariaLabel"
+        | "onTouchCancel"
+        | "onTouchEnd"
+        | "onTouchMove"
+        | "onTouchStart"
+        | "type"
+        | "heightPx"
+        | "widthPx"
+      >,
+      ...{|
+        disabled?: boolean | void,
+        focused?: boolean | void,
+        borders?: ("LEFT" | "BOTTOM" | void)[] | void,
+        childKeys?: $ReadOnlyArray<KeyConfig> | void,
+        popoverEnabled?: boolean | void,
+      |},
+      ...{||},
+    |},
+    "heightPx" | "widthPx"
+  >
+>;
+declare export default typeof _default;

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { LayoutModes } from "../consts";
+import type { KeypadType } from "../consts";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+interface ReduxProps {
+    active?: boolean;
+    extraKeys?: ReadonlyArray<string>;
+    keypadType?: KeypadType;
+    layoutMode?: keyof typeof LayoutModes;
+    navigationPadEnabled?: boolean;
+}
+interface Props extends ReduxProps {
+    onDismiss?: () => void;
+    onElementMounted: (element: any) => void;
+    onPageSizeChange?: (width: number, height: number) => void;
+    style?: StyleType;
+}
+type State = {
+    hasBeenActivated: boolean;
+    viewportWidth: string | number;
+};
+declare class KeypadContainer extends React.Component<Props, State> {
+    _resizeTimeout: number | null | undefined;
+    hasMounted: boolean | undefined;
+    state: {
+        hasBeenActivated: boolean;
+        viewportWidth: string;
+    };
+    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    componentDidUpdate(prevProps: any): void;
+    componentWillUnmount(): void;
+    _throttleResizeHandler: () => void;
+    _onResize: () => void;
+    renderKeypad: () => JSX.Element;
+    render(): JSX.Element;
+}
+declare const _default: import("react-redux").ConnectedComponent<typeof KeypadContainer, import("react-redux").Omit<React.ClassAttributes<KeypadContainer> & Props, "active" | "extraKeys" | "navigationPadEnabled" | "keypadType" | "onPageSizeChange" | "layoutMode">>;
+export default _default;

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

@@ -0,0 +1,58 @@
+/**
+ * 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 { LayoutModes } from "../consts";
+import type { KeypadType } from "../consts";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+declare interface ReduxProps {
+  active?: boolean;
+  extraKeys?: $ReadOnlyArray<string>;
+  keypadType?: KeypadType;
+  layoutMode?: $Keys<typeof LayoutModes>;
+  navigationPadEnabled?: boolean;
+}
+declare type Props = {
+  onDismiss?: () => void,
+  onElementMounted: (element: any) => void,
+  onPageSizeChange?: (width: number, height: number) => void,
+  style?: StyleType,
+} & ReduxProps;
+declare type State = {|
+  hasBeenActivated: boolean,
+  viewportWidth: string | number,
+|};
+declare class KeypadContainer extends React.Component<Props, State> {
+  _resizeTimeout: number | null | void;
+  hasMounted: boolean | void;
+  state: {|
+    hasBeenActivated: boolean,
+    viewportWidth: string,
+  |};
+  UNSAFE_componentWillMount(): void;
+  componentDidMount(): void;
+  UNSAFE_componentWillReceiveProps(nextProps: any): void;
+  componentDidUpdate(prevProps: any): void;
+  componentWillUnmount(): void;
+  _throttleResizeHandler: () => void;
+  _onResize: () => void;
+  renderKeypad: () => React$Node;
+  render(): React$Node;
+}
+declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
+  typeof KeypadContainer,
+  $Flowgen$Import$react_2d_redux.Omit<
+    {| ...React.ClassAttributes<KeypadContainer>, ...Props |},
+    | "active"
+    | "extraKeys"
+    | "navigationPadEnabled"
+    | "keypadType"
+    | "onPageSizeChange"
+    | "layoutMode"
+  >
+>;
+declare export default typeof _default;

package/dist/components/keypad.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A keypad component that acts as a container for rows or columns of buttons,
+ * and manages the rendering of echo animations on top of those buttons.
+ */
+import * as React from "react";
+import type { Popover, Echo } from "../types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+interface ReduxProps {
+    active: boolean;
+    echoes: ReadonlyArray<Echo>;
+    popover: Popover | null;
+}
+interface Props extends ReduxProps {
+    children: React.ReactNode;
+    style?: StyleType;
+    removeEcho?: (animationId: string) => void;
+}
+declare class Keypad extends React.Component<Props> {
+    _isMounted: boolean | undefined;
+    _resizeTimeout: number | null | undefined;
+    _container: DOMRect | null | undefined;
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(newProps: any): void;
+    componentWillUnmount(): void;
+    _computeContainer: () => void;
+    _updateSizeAndPosition: () => void;
+    _onResize: () => void;
+    render(): JSX.Element;
+}
+declare const _default: import("react-redux").ConnectedComponent<typeof Keypad, import("react-redux").Omit<React.ClassAttributes<Keypad> & Props, "active" | "popover" | "echoes" | "removeEcho">>;
+export default _default;

package/dist/components/keypad.js.flow

@@ -0,0 +1,40 @@
+/**
+ * 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 type { Popover, Echo } from "../types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+declare interface ReduxProps {
+  active: boolean;
+  echoes: $ReadOnlyArray<Echo>;
+  popover: Popover | null;
+}
+declare type Props = {
+  children: React.Node,
+  style?: StyleType,
+  removeEcho?: (animationId: string) => void,
+} & ReduxProps;
+declare class Keypad extends React.Component<Props> {
+  _isMounted: boolean | void;
+  _resizeTimeout: number | null | void;
+  _container: DOMRect | null | void;
+  componentDidMount(): void;
+  UNSAFE_componentWillReceiveProps(newProps: any): void;
+  componentWillUnmount(): void;
+  _computeContainer: () => void;
+  _updateSizeAndPosition: () => void;
+  _onResize: () => void;
+  render(): React$Node;
+}
+declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
+  typeof Keypad,
+  $Flowgen$Import$react_2d_redux.Omit<
+    {| ...React.ClassAttributes<Keypad>, ...Props |},
+    "active" | "popover" | "echoes" | "removeEcho"
+  >
+>;
+declare export default typeof _default;

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

@@ -0,0 +1,15 @@
+/**
+ * A keypad button that displays an arbitrary number of symbols, with no
+ * 'default' symbol.
+ */
+import * as React from "react";
+type Props = {
+    keys: ReadonlyArray<string>;
+};
+declare class ManyKeypadButton extends React.Component<Props> {
+    static defaultProps: {
+        keys: never[];
+    };
+    render(): JSX.Element;
+}
+export default ManyKeypadButton;

package/dist/components/many-keypad-button.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";
+declare type Props = {|
+  keys: $ReadOnlyArray<string>,
+|};
+declare class ManyKeypadButton extends React.Component<Props> {
+  static defaultProps: {|
+    keys: empty[],
+  |};
+  render(): React$Node;
+}
+declare export default typeof ManyKeypadButton;

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

@@ -0,0 +1,16 @@
+/**
+ * A component that renders an icon with math (via KaTeX).
+ */
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    math: string;
+    style: StyleType;
+};
+declare class MathIcon extends React.Component<Props> {
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    _renderMath: () => void;
+    render(): JSX.Element;
+}
+export default MathIcon;

package/dist/components/math-icon.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";
+declare type Props = {|
+  math: string,
+  style: StyleType,
+|};
+declare class MathIcon extends React.Component<Props> {
+  componentDidMount(): void;
+  componentDidUpdate(prevProps: any): void;
+  _renderMath: () => void;
+  render(): React$Node;
+}
+declare export default typeof MathIcon;

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

@@ -0,0 +1,14 @@
+/**
+ * A grid of symbols, rendered as text and positioned based on the number of
+ * symbols provided. Up to four symbols will be shown.
+ */
+import * as React from "react";
+import type { Icon as IconType } from "../types";
+type Props = {
+    focused: boolean;
+    icons: ReadonlyArray<IconType>;
+};
+declare class MultiSymbolGrid extends React.Component<Props> {
+    render(): JSX.Element;
+}
+export default MultiSymbolGrid;

package/dist/components/multi-symbol-grid.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 { Icon as IconType } from "../types";
+declare type Props = {|
+  focused: boolean,
+  icons: $ReadOnlyArray<IconType>,
+|};
+declare class MultiSymbolGrid extends React.Component<Props> {
+  render(): React$Node;
+}
+declare export default typeof MultiSymbolGrid;

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

@@ -0,0 +1,12 @@
+/**
+ * A popover that renders a set of keys floating above the page.
+ */
+import * as React from "react";
+import { KeyConfig } from "../types";
+type Prop = {
+    keys: ReadonlyArray<KeyConfig>;
+};
+declare class MultiSymbolPopover extends React.Component<Prop> {
+    render(): JSX.Element;
+}
+export default MultiSymbolPopover;

package/dist/components/multi-symbol-popover.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 { KeyConfig } from "../types";
+declare type Prop = {|
+  keys: $ReadOnlyArray<KeyConfig>,
+|};
+declare class MultiSymbolPopover extends React.Component<Prop> {
+  render(): React$Node;
+}
+declare export default typeof MultiSymbolPopover;

package/dist/components/navigation-pad.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A component that renders a navigation pad, which consists of an arrow for
+ * each possible direction.
+ */
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    roundTopLeft: boolean;
+    style: StyleType;
+};
+declare class NavigationPad extends React.Component<Props> {
+    render(): JSX.Element;
+}
+export default NavigationPad;

package/dist/components/navigation-pad.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 = {|
+  roundTopLeft: boolean,
+  style: StyleType,
+|};
+declare class NavigationPad extends React.Component<Props> {
+  render(): React$Node;
+}
+declare export default typeof NavigationPad;

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

@@ -0,0 +1,53 @@
+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: Record<string, HTMLElement>;
+    _bordersById: Record<string, Border>;
+    _orderedIds: ReadonlyArray<string>;
+    _cachedBoundingBoxesById: Record<string, DOMRect>;
+    constructor();
+    /**
+     * 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 {object} 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 {object} - the bounding client rect for the given node, along
+     *                     with its borders
+     */
+    layoutPropsForId(id: string): {
+        initialBounds: DOMRect;
+        borders: Border;
+    };
+}
+export default NodeManager;

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;