@khanacademy/math-input 0.7.2 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/math-input
 
+## 1.0.1
+
+### Patch Changes
+
+-   0c1cf562: Removal of an unused keypad style
+
+## 1.0.0
+
+### Major Changes
+
+-   4c03a43d: Convert math-input to TS, changing the API in the process
+
+### Patch Changes
+
+-   22c5d564: Remove the use of React.FC<> and use types named Props/State in more components
+
 ## 0.7.2
 
 ### Patch Changes

package/dist/components/compute-layout-parameters.d.ts

@@ -0,0 +1,38 @@
+/**
+ * An algorithm for computing the appropriate layout parameters for the keypad,
+ * including the size of the buttons and whether or not to render fullscreen,
+ * taking into account a number of factors including the size of the screen, the
+ * orientation of the screen, the presence of browser chrome, the presence of
+ * other exercise-related chrome, the size of the input box, the parameters that
+ * define the keypad (i.e., the number of rows, columns, and pages), and so
+ * forth.
+ *
+ * The computations herein make some strong assumptions about the sizes of
+ * various other elements and the situations under which they will be visible
+ * (e.g., browser chrome). However, this is just a heuristic--it's not crucial
+ * that our buttons are sized in a pixel-perfect manner, but rather, that we
+ * make a balanced use of space.
+ *
+ * Note that one goal of the algorithm is to avoid resizing the keypad in the
+ * face of dynamic browser chrome. In order to avoid that awkwardness, we tend
+ * to be conservative in our measurements and make things smaller than they
+ * might need to be.
+ */
+export declare const computeLayoutParameters: ({ numColumns, numMaxVisibleRows, numPages }: {
+    numColumns: any;
+    numMaxVisibleRows: any;
+    numPages: any;
+}, { pageWidthPx, pageHeightPx }: {
+    pageWidthPx: any;
+    pageHeightPx: any;
+}, { deviceOrientation, deviceType }: {
+    deviceOrientation: any;
+    deviceType: any;
+}, { navigationPadEnabled, paginationEnabled, toolbarEnabled }: {
+    navigationPadEnabled: any;
+    paginationEnabled: any;
+    toolbarEnabled: any;
+}) => {
+    buttonDimensions: any;
+    layoutMode: "FULLSCREEN" | "COMPACT";
+};

package/dist/components/compute-layout-parameters.js.flow

@@ -0,0 +1,49 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+/**
+ * An algorithm for computing the appropriate layout parameters for the keypad,
+ * including the size of the buttons and whether or not to render fullscreen,
+ * taking into account a number of factors including the size of the screen, the
+ * orientation of the screen, the presence of browser chrome, the presence of
+ * other exercise-related chrome, the size of the input box, the parameters that
+ * define the keypad (i.e., the number of rows, columns, and pages), and so
+ * forth.
+ *
+ * The computations herein make some strong assumptions about the sizes of
+ * various other elements and the situations under which they will be visible
+ * (e.g., browser chrome). However, this is just a heuristic--it's not crucial
+ * that our buttons are sized in a pixel-perfect manner, but rather, that we
+ * make a balanced use of space.
+ *
+ * Note that one goal of the algorithm is to avoid resizing the keypad in the
+ * face of dynamic browser chrome. In order to avoid that awkwardness, we tend
+ * to be conservative in our measurements and make things smaller than they
+ * might need to be.
+ */
+declare export var computeLayoutParameters: (
+  x: {|
+    numColumns: any,
+    numMaxVisibleRows: any,
+    numPages: any,
+  |},
+  x: {|
+    pageWidthPx: any,
+    pageHeightPx: any,
+  |},
+  x: {|
+    deviceOrientation: any,
+    deviceType: any,
+  |},
+  x: {|
+    navigationPadEnabled: any,
+    paginationEnabled: any,
+    toolbarEnabled: any,
+  |}
+) => {|
+  buttonDimensions: any,
+  layoutMode: "FULLSCREEN" | "COMPACT",
+|};

package/dist/components/corner-decal.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A small triangular decal to sit in the corner of a parent component.
+ */
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    style: StyleType;
+};
+declare class CornerDecal extends React.Component<Props> {
+    render(): JSX.Element;
+}
+export default CornerDecal;

package/dist/components/corner-decal.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 { StyleType } from "@khanacademy/wonder-blocks-core";
+declare type Props = {|
+  style: StyleType,
+|};
+declare class CornerDecal extends React.Component<Props> {
+  render(): React$Node;
+}
+declare export default typeof CornerDecal;

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

@@ -0,0 +1,26 @@
+/**
+ * A component that renders and animates the selection state effect effect.
+ */
+import * as React from "react";
+import { EchoAnimationTypes } from "../consts";
+import type { Key } from "../data/keys";
+import type { Border, Bound } from "../types";
+type EchoPropType = {
+    animationId: string;
+    animationType: keyof typeof EchoAnimationTypes;
+    borders: Border;
+    id: Key;
+    initialBounds: Bound;
+};
+type EchoManagerProps = {
+    echoes: ReadonlyArray<EchoPropType>;
+    onAnimationFinish?: (animationId: string) => void;
+};
+declare class EchoManager extends React.Component<EchoManagerProps> {
+    _animationConfigForType: (animationType: any) => {
+        animationDurationMs: any;
+        animationTransitionName: any;
+    };
+    render(): JSX.Element;
+}
+export default EchoManager;

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

@@ -0,0 +1,29 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import { EchoAnimationTypes } from "../consts";
+import type { Key } from "../data/keys";
+import type { Border, Bound } from "../types";
+declare type EchoPropType = {|
+  animationId: string,
+  animationType: $Keys<typeof EchoAnimationTypes>,
+  borders: Border,
+  id: Key,
+  initialBounds: Bound,
+|};
+declare type EchoManagerProps = {|
+  echoes: $ReadOnlyArray<EchoPropType>,
+  onAnimationFinish?: (animationId: string) => void,
+|};
+declare class EchoManager extends React.Component<EchoManagerProps> {
+  _animationConfigForType: (animationType: any) => {|
+    animationDurationMs: any,
+    animationTransitionName: any,
+  |};
+  render(): React$Node;
+}
+declare export default typeof EchoManager;

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

@@ -0,0 +1,13 @@
+/**
+ * A keypad button containing no symbols and triggering no actions on click.
+ */
+import * as React from "react";
+import GestureManager from "./gesture-manager";
+interface ReduxProps {
+    gestureManager: GestureManager;
+}
+declare class EmptyKeypadButton extends React.Component<ReduxProps> {
+    render(): JSX.Element;
+}
+declare const _default: import("react-redux").ConnectedComponent<typeof EmptyKeypadButton, import("react-redux").Omit<React.ClassAttributes<EmptyKeypadButton> & ReduxProps, "gestureManager">>;
+export default _default;

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

@@ -0,0 +1,23 @@
+/**
+ * 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 GestureManager from "./gesture-manager";
+declare interface ReduxProps {
+  gestureManager: GestureManager;
+}
+declare class EmptyKeypadButton extends React.Component<ReduxProps> {
+  render(): React$Node;
+}
+declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
+  typeof EmptyKeypadButton,
+  $Flowgen$Import$react_2d_redux.Omit<
+    {| ...React.ClassAttributes<EmptyKeypadButton>, ...ReduxProps |},
+    "gestureManager"
+  >
+>;
+declare export default typeof _default;

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

@@ -0,0 +1,22 @@
+/**
+ * A keypad that includes all of the expression symbols.
+ */
+import * as React from "react";
+import type { KeypadLayout } from "../types";
+import type { CursorContext } from "./input/cursor-contexts";
+interface ReduxProps {
+    currentPage: number;
+    cursorContext?: CursorContext;
+    dynamicJumpOut: boolean;
+}
+interface Props extends ReduxProps {
+    extraKeys?: ReadonlyArray<string>;
+    roundTopLeft: boolean;
+    roundTopRight: boolean;
+}
+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">>;
+export default _default;

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

@@ -0,0 +1,32 @@
+/**
+ * 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 { KeypadLayout } from "../types";
+import type { CursorContext } from "./input/cursor-contexts";
+declare interface ReduxProps {
+  currentPage: number;
+  cursorContext?: CursorContext;
+  dynamicJumpOut: boolean;
+}
+declare type Props = {
+  extraKeys?: $ReadOnlyArray<string>,
+  roundTopLeft: boolean,
+  roundTopRight: boolean,
+} & ReduxProps;
+declare export var expressionKeypadLayout: KeypadLayout;
+declare class ExpressionKeypad extends React.Component<Props> {
+  render(): React$Node;
+}
+declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
+  typeof ExpressionKeypad,
+  $Flowgen$Import$react_2d_redux.Omit<
+    {| ...React.ClassAttributes<ExpressionKeypad>, ...Props |},
+    "currentPage" | "cursorContext" | "dynamicJumpOut"
+  >
+>;
+declare export default typeof _default;

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

@@ -0,0 +1,21 @@
+/**
+ * A keypad that includes the digits, as well as the symbols required to deal
+ * with fractions, decimals, and percents.
+ */
+import * as React from "react";
+import type { KeypadLayout } from "../types";
+import type { CursorContext } from "./input/cursor-contexts";
+interface ReduxProps {
+    cursorContext?: CursorContext;
+    dynamicJumpOut: boolean;
+}
+interface Props extends ReduxProps {
+    roundTopLeft: boolean;
+    roundTopRight: boolean;
+}
+export declare const fractionKeypadLayout: KeypadLayout;
+declare class FractionKeypad extends React.Component<Props> {
+    render(): JSX.Element;
+}
+declare const _default: import("react-redux").ConnectedComponent<typeof FractionKeypad, import("react-redux").Omit<React.ClassAttributes<FractionKeypad> & Props, "cursorContext" | "dynamicJumpOut">>;
+export default _default;

package/dist/components/fraction-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";
+import type { KeypadLayout } from "../types";
+import type { CursorContext } from "./input/cursor-contexts";
+declare interface ReduxProps {
+  cursorContext?: CursorContext;
+  dynamicJumpOut: boolean;
+}
+declare type Props = {
+  roundTopLeft: boolean,
+  roundTopRight: boolean,
+} & ReduxProps;
+declare export var fractionKeypadLayout: KeypadLayout;
+declare class FractionKeypad extends React.Component<Props> {
+  render(): React$Node;
+}
+declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<
+  typeof FractionKeypad,
+  $Flowgen$Import$react_2d_redux.Omit<
+    {| ...React.ClassAttributes<FractionKeypad>, ...Props |},
+    "cursorContext" | "dynamicJumpOut"
+  >
+>;
+declare export default typeof _default;

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

@@ -0,0 +1,74 @@
+/**
+ * A high-level manager for our gesture system. In particular, this class
+ * connects our various bits of logic for managing gestures and interactions,
+ * and links them together.
+ */
+import GestureStateMachine from "./gesture-state-machine";
+import NodeManager from "./node-manager";
+import PopoverStateMachine from "./popover-state-machine";
+declare class GestureManager {
+    swipeEnabled: boolean;
+    trackEvents: boolean;
+    nodeManager: NodeManager;
+    popoverStateMachine: PopoverStateMachine;
+    gestureStateMachine: GestureStateMachine;
+    constructor(options: any, handlers: any, disabledSwipeKeys: any, multiPressableKeys: any);
+    /**
+     * 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 {string} id - the identifier of the DOM node in which the touch
+     *                      occurred
+     */
+    onTouchStart(evt: TouchEvent, id?: any): 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
+     */
+    onTouchMove(evt: TouchEvent): 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
+     */
+    onTouchEnd(evt: TouchEvent): 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
+     */
+    onTouchCancel(evt: TouchEvent): void;
+    /**
+     * 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 {string[]} childIds - the identifiers of any DOM nodes that
+     *                              should be considered children of this node,
+     *                              in that they should take priority when
+     *                              intercepting touch events
+     * @param {object} borders - an opaque object describing the node's borders
+     */
+    registerDOMNode(id: any, domNode: any, childIds: any, borders: any): void;
+    /**
+     * Unregister the DOM node with the given identifier.
+     *
+     * @param {string} id - the identifier of the node to unregister
+     */
+    unregisterDOMNode(id: any): void;
+    /**
+     * Enable event tracking for the gesture manager.
+     */
+    enableEventTracking(): void;
+    /**
+     * Disable event tracking for the gesture manager. When called, the gesture
+     * manager will drop any events received by managed nodes.
+     */
+    disableEventTracking(): void;
+}
+export default GestureManager;

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

@@ -0,0 +1,82 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import GestureStateMachine from "./gesture-state-machine";
+import NodeManager from "./node-manager";
+import PopoverStateMachine from "./popover-state-machine";
+declare class GestureManager {
+  swipeEnabled: boolean;
+  trackEvents: boolean;
+  nodeManager: NodeManager;
+  popoverStateMachine: PopoverStateMachine;
+  gestureStateMachine: GestureStateMachine;
+  constructor(
+    options: any,
+    handlers: any,
+    disabledSwipeKeys: any,
+    multiPressableKeys: any
+  ): 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 {string} id - the identifier of the DOM node in which the touch
+   *   occurred
+   */
+  onTouchStart(evt: TouchEvent, id?: any): 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
+   */
+  onTouchMove(evt: TouchEvent): 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
+   */
+  onTouchEnd(evt: TouchEvent): 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
+   */
+  onTouchCancel(evt: TouchEvent): void;
+
+  /**
+   * 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 {string[]} childIds - the identifiers of any DOM nodes that
+   *   should be considered children of this node,
+   *   in that they should take priority when
+   *   intercepting touch events
+   * @param {{...}} borders - an opaque object describing the node's borders
+   */
+  registerDOMNode(id: any, domNode: any, childIds: any, borders: any): void;
+
+  /**
+   * Unregister the DOM node with the given identifier.
+   * @param {string} id - the identifier of the node to unregister
+   */
+  unregisterDOMNode(id: any): void;
+
+  /**
+   * Enable event tracking for the gesture manager.
+   */
+  enableEventTracking(): void;
+
+  /**
+   * Disable event tracking for the gesture manager. When called, the gesture
+   * manager will drop any events received by managed nodes.
+   */
+  disableEventTracking(): void;
+}
+declare export default typeof GestureManager;

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

@@ -0,0 +1,105 @@
+import type { 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.
+ * It is entirely ignorant of the existence of popovers and the positions of
+ * DOM nodes, operating solely on IDs. The state machine does accommodate for
+ * multi-touch interactions, tracking gesture state on a per-touch basis.
+ */
+export type Handlers = {
+    onFocus: (id: string) => void;
+    onBlur: () => void;
+    onTrigger: (id: string) => void;
+    onLongPress: (id: string) => void;
+    onSwipeChange: (x: number) => void;
+    onSwipeEnd: (x: number) => void;
+    onTouchEnd: (id: string) => void;
+};
+type Options = {
+    longPressWaitTimeMs: number;
+    swipeThresholdPx: number;
+    holdIntervalMs: number;
+};
+type TouchState = {
+    activeNodeId: Key;
+    pressAndHoldIntervalId: number | null;
+    longPressTimeoutId: number | null;
+    swipeLocked: boolean;
+    startX: number;
+};
+type TouchStateMap = Record<Key, TouchState>;
+type SwipeState = {
+    touchId: Key;
+    startX: number;
+};
+declare class GestureStateMachine {
+    handlers: Handlers;
+    options: Options;
+    swipeDisabledNodeIds: Partial<[Key]>;
+    multiPressableKeys: Partial<[Key]>;
+    touchState: Partial<TouchStateMap>;
+    swipeState: SwipeState | null;
+    constructor(handlers: Handlers, options: Partial<Options>, swipeDisabledNodeIds?: [Key], multiPressableKeys?: [Key]);
+    _maybeCancelLongPressForTouch(touchId: any): void;
+    _maybeCancelPressAndHoldForTouch(touchId: any): void;
+    _cleanupTouchEvent(touchId: any): void;
+    /**
+     * Handle a focus event on the node with the given identifier, which may be
+     * `null` to indicate that the user has dragged their finger off of any
+     * registered nodes, but is still in the middle of a gesture.
+     *
+     * @param {string|null} id - the identifier of the newly focused node, or
+     *                           `null` if no node is focused
+     * @param {number} touchId - a unique identifier associated with the touch
+     */
+    _onFocus(id: any, touchId: any): void;
+    /**
+     * Clear out all active gesture information.
+     */
+    _onSwipeStart(): void;
+    /**
+     * A function that returns the identifier of the node over which the touch
+     * event occurred. This is provided as a piece of lazy computation, as
+     * computing the DOM node for a given point is expensive, and the state
+     * machine won't always need that information. For example, if the user is
+     * swiping, then `onTouchMove` needs to be performant and doesn't care about
+     * the node over which the touch occurred.
+     *
+     * @typedef idComputation
+     * @returns {DOMNode} - the identifier of the node over which the touch
+     *                      occurred
+     */
+    /**
+     * Handle a touch-start event on the node with the given identifer.
+     *
+     * @param {idComputation} getId - a function that returns identifier of the
+     *                                node over which the start event occurred
+     * @param {number} touchId - a unique identifier associated with the touch
+     */
+    onTouchStart(getId: any, touchId: any, pageX: any): void;
+    /**
+     * Handle a touch-move event on the node with the given identifer.
+     *
+     * @param {idComputation} getId - a function that returns identifier of the
+     *                                node over which the move event occurred
+     * @param {number} touchId - a unique identifier associated with the touch
+     * @param {number} pageX - the x coordinate of the touch
+     * @param {boolean} swipeEnabled - whether the system should allow for
+     *                                 transitions into a swiping state
+     */
+    onTouchMove(getId: any, touchId: any, pageX: any, swipeEnabled: any): void;
+    /**
+     * Handle a touch-end event on the node with the given identifer.
+     *
+     * @param {idComputation} getId - a function that returns identifier of the
+     *                                node over which the end event occurred
+     * @param {number} touchId - a unique identifier associated with the touch
+     * @param {number} pageX - the x coordinate of the touch
+     */
+    onTouchEnd(getId: any, touchId: any, pageX: any): void;
+    /**
+     * Handle a touch-cancel event.
+     */
+    onTouchCancel(touchId: any): void;
+}
+export default GestureStateMachine;