@khanacademy/math-input 0.7.2 → 1.0.1

package/dist/store/actions.d.ts

@@ -0,0 +1,64 @@
+import type { Key } from "../data/keys";
+import type { KeypadConfiguration, KeyHandler, Cursor, ActiveNodesObj, Border } from "../types";
+type DismissKeypadAction = {
+    type: "DismissKeypad";
+};
+export declare const dismissKeypad: () => DismissKeypadAction;
+type ActivateKeypadAction = {
+    type: "ActivateKeypad";
+};
+export declare const activateKeypad: () => ActivateKeypadAction;
+/**
+ * Configure the keypad with the provided configuration parameters.
+ */
+type ConfigureKeypadAction = {
+    type: "ConfigureKeypad";
+    configuration: KeypadConfiguration;
+};
+export declare const configureKeypad: (configuration: KeypadConfiguration) => ConfigureKeypadAction;
+type SetPageSizeAction = {
+    type: "SetPageSize";
+    pageWidthPx: number;
+    pageHeightPx: number;
+};
+export declare const setPageSize: (pageWidthPx: number, pageHeightPx: number) => SetPageSizeAction;
+type RemoveEchoAction = {
+    type: "RemoveEcho";
+    animationId: string;
+};
+export declare const removeEcho: (animationId: string) => RemoveEchoAction;
+type SetKeyHandlerAction = {
+    type: "SetKeyHandler";
+    keyHandler: KeyHandler;
+};
+export declare const setKeyHandler: (keyHandler: KeyHandler) => SetKeyHandlerAction;
+type SetCursorAction = {
+    type: "SetCursor";
+    cursor: Cursor;
+};
+export declare const setCursor: (cursor: Cursor) => SetCursorAction;
+type OnSwipeChangeAction = {
+    type: "OnSwipeChange";
+    dx: number;
+};
+export declare const onSwipeChange: (dx: number) => OnSwipeChangeAction;
+type OnSwipeEndAction = {
+    type: "OnSwipeEnd";
+    dx: number;
+};
+export declare const onSwipeEnd: (dx: number) => OnSwipeEndAction;
+type SetActiveNodesAction = {
+    type: "SetActiveNodes";
+    activeNodes: any;
+};
+export declare const setActiveNodes: (activeNodes: ActiveNodesObj) => SetActiveNodesAction;
+type PressKeyAction = {
+    type: "PressKey";
+    key: Key;
+    borders: Border;
+    initialBounds: DOMRect;
+    inPopover: boolean;
+};
+export declare const pressKey: (key: Key, borders: ("LEFT" | "BOTTOM" | undefined)[], initialBounds: DOMRect, inPopover: any) => PressKeyAction;
+export type Action = DismissKeypadAction | ActivateKeypadAction | ConfigureKeypadAction | SetPageSizeAction | RemoveEchoAction | SetKeyHandlerAction | SetCursorAction | OnSwipeChangeAction | OnSwipeEndAction | SetActiveNodesAction | PressKeyAction;
+export {};

package/dist/store/actions.js.flow

@@ -0,0 +1,100 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { Key } from "../data/keys";
+import type {
+  KeypadConfiguration,
+  KeyHandler,
+  Cursor,
+  ActiveNodesObj,
+  Border,
+} from "../types";
+declare type DismissKeypadAction = {|
+  type: "DismissKeypad",
+|};
+declare export var dismissKeypad: () => DismissKeypadAction;
+declare type ActivateKeypadAction = {|
+  type: "ActivateKeypad",
+|};
+declare export var activateKeypad: () => ActivateKeypadAction;
+/**
+ * Configure the keypad with the provided configuration parameters.
+ */
+declare type ConfigureKeypadAction = {|
+  type: "ConfigureKeypad",
+  configuration: KeypadConfiguration,
+|};
+declare export var configureKeypad: (
+  configuration: KeypadConfiguration
+) => ConfigureKeypadAction;
+declare type SetPageSizeAction = {|
+  type: "SetPageSize",
+  pageWidthPx: number,
+  pageHeightPx: number,
+|};
+declare export var setPageSize: (
+  pageWidthPx: number,
+  pageHeightPx: number
+) => SetPageSizeAction;
+declare type RemoveEchoAction = {|
+  type: "RemoveEcho",
+  animationId: string,
+|};
+declare export var removeEcho: (animationId: string) => RemoveEchoAction;
+declare type SetKeyHandlerAction = {|
+  type: "SetKeyHandler",
+  keyHandler: KeyHandler,
+|};
+declare export var setKeyHandler: (
+  keyHandler: KeyHandler
+) => SetKeyHandlerAction;
+declare type SetCursorAction = {|
+  type: "SetCursor",
+  cursor: Cursor,
+|};
+declare export var setCursor: (cursor: Cursor) => SetCursorAction;
+declare type OnSwipeChangeAction = {|
+  type: "OnSwipeChange",
+  dx: number,
+|};
+declare export var onSwipeChange: (dx: number) => OnSwipeChangeAction;
+declare type OnSwipeEndAction = {|
+  type: "OnSwipeEnd",
+  dx: number,
+|};
+declare export var onSwipeEnd: (dx: number) => OnSwipeEndAction;
+declare type SetActiveNodesAction = {|
+  type: "SetActiveNodes",
+  activeNodes: any,
+|};
+declare export var setActiveNodes: (
+  activeNodes: ActiveNodesObj
+) => SetActiveNodesAction;
+declare type PressKeyAction = {|
+  type: "PressKey",
+  key: Key,
+  borders: Border,
+  initialBounds: DOMRect,
+  inPopover: boolean,
+|};
+declare export var pressKey: (
+  key: Key,
+  borders: ("LEFT" | "BOTTOM" | void)[],
+  initialBounds: DOMRect,
+  inPopover: any
+) => PressKeyAction;
+export type Action =
+  | DismissKeypadAction
+  | ActivateKeypadAction
+  | ConfigureKeypadAction
+  | SetPageSizeAction
+  | RemoveEchoAction
+  | SetKeyHandlerAction
+  | SetCursorAction
+  | OnSwipeChangeAction
+  | OnSwipeEndAction
+  | SetActiveNodesAction
+  | PressKeyAction;

package/dist/store/echo-reducer.d.ts

@@ -0,0 +1,4 @@
+import type { Action } from "./actions";
+import type { EchoState } from "./types";
+declare const echoReducer: (state: EchoState | undefined, action: Action) => EchoState;
+export default echoReducer;

package/dist/store/echo-reducer.js.flow

@@ -0,0 +1,10 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { Action } from "./actions";
+import type { EchoState } from "./types";
+declare var echoReducer: (state: EchoState | void, action: Action) => EchoState;
+declare export default typeof echoReducer;

package/dist/store/index.d.ts

@@ -1 +1,10 @@
-export declare const createStore: () => any;
+import * as Redux from "redux";
+import type { GestureState } from "./types";
+export declare const createStore: () => Redux.Store<Redux.EmptyObject & {
+    input: import("./types").InputState;
+    keypad: import("./types").KeypadState;
+    pager: import("./types").PagerState;
+    gestures: GestureState;
+    echoes: import("./types").EchoState;
+    layout: import("./types").LayoutState;
+}, Redux.AnyAction>;

package/dist/store/index.js.flow

@@ -4,4 +4,20 @@
  * Flowgen v1.21.0
  * @flow
  */
-declare export var createStore: () => any;
+import * as $Flowgen$Import$_2e__2f_types from "./types";
+import * as Redux from "redux";
+import type { GestureState } from "./types";
+declare export var createStore: () => Redux.Store<
+  {|
+    ...Redux.EmptyObject,
+    ...{|
+      input: $Flowgen$Import$_2e__2f_types.InputState,
+      keypad: $Flowgen$Import$_2e__2f_types.KeypadState,
+      pager: $Flowgen$Import$_2e__2f_types.PagerState,
+      gestures: GestureState,
+      echoes: $Flowgen$Import$_2e__2f_types.EchoState,
+      layout: $Flowgen$Import$_2e__2f_types.LayoutState,
+    |},
+  |},
+  Redux.AnyAction
+>;

package/dist/store/input-reducer.d.ts

@@ -0,0 +1,4 @@
+import type { Action } from "./actions";
+import type { InputState } from "./types";
+declare const inputReducer: (state: InputState | undefined, action: Action) => InputState;
+export default inputReducer;

package/dist/store/input-reducer.js.flow

@@ -0,0 +1,13 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { Action } from "./actions";
+import type { InputState } from "./types";
+declare var inputReducer: (
+  state: InputState | void,
+  action: Action
+) => InputState;
+declare export default typeof inputReducer;

package/dist/store/keypad-reducer.d.ts

@@ -0,0 +1,4 @@
+import type { Action } from "./actions";
+import type { KeypadState } from "./types";
+declare const keypadReducer: (state: KeypadState | undefined, action: Action) => KeypadState;
+export default keypadReducer;

package/dist/store/keypad-reducer.js.flow

@@ -0,0 +1,13 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { Action } from "./actions";
+import type { KeypadState } from "./types";
+declare var keypadReducer: (
+  state: KeypadState | void,
+  action: Action
+) => KeypadState;
+declare export default typeof keypadReducer;

package/dist/store/layout-reducer.d.ts

@@ -0,0 +1,4 @@
+import type { Action } from "./actions";
+import type { LayoutState } from "./types";
+declare const layoutReducer: (state: LayoutState | undefined, action: Action) => LayoutState;
+export default layoutReducer;

package/dist/store/layout-reducer.js.flow

@@ -0,0 +1,13 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { Action } from "./actions";
+import type { LayoutState } from "./types";
+declare var layoutReducer: (
+  state: LayoutState | void,
+  action: Action
+) => LayoutState;
+declare export default typeof layoutReducer;

package/dist/store/pager-reducer.d.ts

@@ -0,0 +1,4 @@
+import type { Action } from "./actions";
+import type { PagerState } from "./types";
+declare const pagerReducer: (state: PagerState | undefined, action: Action) => PagerState;
+export default pagerReducer;

package/dist/store/pager-reducer.js.flow

@@ -0,0 +1,13 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { Action } from "./actions";
+import type { PagerState } from "./types";
+declare var pagerReducer: (
+  state: PagerState | void,
+  action: Action
+) => PagerState;
+declare export default typeof pagerReducer;

package/dist/store/shared.d.ts

@@ -0,0 +1,6 @@
+declare const defaultKeypadType: "EXPRESSION";
+declare const keypadForType: {
+    readonly FRACTION: import("../types").KeypadLayout;
+    readonly EXPRESSION: import("../types").KeypadLayout;
+};
+export { keypadForType, defaultKeypadType };

package/dist/store/shared.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$_2e__2e__2f_types from "../types";
+declare var defaultKeypadType: "EXPRESSION";
+declare var keypadForType: {|
+  +FRACTION: $Flowgen$Import$_2e__2e__2f_types.KeypadLayout,
+  +EXPRESSION: $Flowgen$Import$_2e__2e__2f_types.KeypadLayout,
+|};
+declare export { keypadForType, defaultKeypadType };

package/dist/store/types.d.ts

@@ -0,0 +1,58 @@
+import GestureManager from "../components/gesture-manager";
+import VelocityTracker from "../components/velocity-tracker";
+import { LayoutModes } from "../consts";
+import type { KeypadType } from "../consts";
+import type { Key } from "../data/keys";
+import type { Cursor, KeyHandler, Popover, Echo } from "../types";
+export interface InputState {
+    keyHandler: KeyHandler | null;
+    cursor: Cursor | undefined;
+}
+export interface KeypadState {
+    extraKeys: ReadonlyArray<string>;
+    keypadType: KeypadType;
+    active: boolean;
+}
+export interface PagerState {
+    animateToPosition: boolean;
+    currentPage: number;
+    dx: number;
+    numPages: number;
+    pageWidthPx: number;
+    velocityTracker: VelocityTracker;
+}
+export interface GestureState {
+    popover: Popover | null;
+    focus: Key | null;
+    gestureManager: GestureManager;
+}
+export interface EchoState {
+    echoes: ReadonlyArray<Echo>;
+}
+export interface LayoutState {
+    gridDimensions: {
+        numRows: number;
+        numColumns: number;
+        numMaxVisibleRows: number;
+        numPages: number;
+    };
+    buttonDimensions: {
+        widthPx: number;
+        heightPx: number;
+    };
+    pageDimensions: {
+        pageWidthPx: number;
+        pageHeightPx: number;
+    };
+    layoutMode: keyof typeof LayoutModes;
+    paginationEnabled: boolean;
+    navigationPadEnabled: boolean;
+}
+export interface State {
+    input: InputState;
+    keypad: KeypadState;
+    pager: PagerState;
+    gestures: GestureState;
+    echoes: EchoState;
+    layout: LayoutState;
+}

package/dist/store/types.js.flow

@@ -0,0 +1,64 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import GestureManager from "../components/gesture-manager";
+import VelocityTracker from "../components/velocity-tracker";
+import { LayoutModes } from "../consts";
+import type { KeypadType } from "../consts";
+import type { Key } from "../data/keys";
+import type { Cursor, KeyHandler, Popover, Echo } from "../types";
+export interface InputState {
+  keyHandler: KeyHandler | null;
+  cursor: Cursor | void;
+}
+export interface KeypadState {
+  extraKeys: $ReadOnlyArray<string>;
+  keypadType: KeypadType;
+  active: boolean;
+}
+export interface PagerState {
+  animateToPosition: boolean;
+  currentPage: number;
+  dx: number;
+  numPages: number;
+  pageWidthPx: number;
+  velocityTracker: VelocityTracker;
+}
+export interface GestureState {
+  popover: Popover | null;
+  focus: Key | null;
+  gestureManager: GestureManager;
+}
+export interface EchoState {
+  echoes: $ReadOnlyArray<Echo>;
+}
+export interface LayoutState {
+  gridDimensions: {|
+    numRows: number,
+    numColumns: number,
+    numMaxVisibleRows: number,
+    numPages: number,
+  |};
+  buttonDimensions: {|
+    widthPx: number,
+    heightPx: number,
+  |};
+  pageDimensions: {|
+    pageWidthPx: number,
+    pageHeightPx: number,
+  |};
+  layoutMode: $Keys<typeof LayoutModes>;
+  paginationEnabled: boolean;
+  navigationPadEnabled: boolean;
+}
+export interface State {
+  input: InputState;
+  keypad: KeypadState;
+  pager: PagerState;
+  gestures: GestureState;
+  echoes: EchoState;
+  layout: LayoutState;
+}

package/dist/types.d.ts

@@ -0,0 +1,63 @@
+import { BorderDirections, EchoAnimationTypes, KeyTypes, IconTypes } from "./consts";
+import type { CursorContext } from "./components/input/cursor-contexts";
+import type { KeypadType } from "./consts";
+import type { Key } from "./data/keys";
+export type Border = Partial<Array<keyof typeof BorderDirections>>;
+export type Bound = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    height: number;
+    width: number;
+};
+export type Popover = {
+    parentId: Key;
+    bounds: Partial<Bound>;
+    childKeyIds: Array<Key>;
+};
+export type Echo = {
+    animationId: string;
+    animationType: keyof typeof EchoAnimationTypes;
+    borders: Border;
+    id: Key;
+    initialBounds: DOMRect;
+};
+export type Icon = {
+    type: keyof typeof IconTypes;
+    data: string;
+};
+export type KeyConfig = {
+    ariaLabel: string;
+    id: Key;
+    type: keyof typeof KeyTypes;
+    childKeyIds: Array<Key>;
+    icon: Icon;
+};
+export type KeypadConfiguration = {
+    keypadType: KeypadType;
+    extraKeys?: ReadonlyArray<Key>;
+};
+export type KeyHandler = (key: Key) => Cursor;
+export type Cursor = {
+    context: CursorContext;
+};
+export type KeypadLayout = {
+    rows: number;
+    columns: number;
+    numPages: number;
+    maxVisibleRows: number;
+};
+type ActiveNodesObjPopover = {
+    parentId: string;
+    childIds: ReadonlyArray<string>;
+};
+export type ActiveNodesObj = {
+    popover: ActiveNodesObjPopover | null;
+    focus: string | null;
+};
+export type LayoutProps = {
+    initialBounds: DOMRect;
+    borders: Border;
+};
+export {};

package/dist/types.js.flow

@@ -0,0 +1,73 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import {
+  BorderDirections,
+  EchoAnimationTypes,
+  KeyTypes,
+  IconTypes,
+} from "./consts";
+import type { CursorContext } from "./components/input/cursor-contexts";
+import type { KeypadType } from "./consts";
+import type { Key } from "./data/keys";
+export type Border = $Rest<Array<$Keys<typeof BorderDirections>>, {}>;
+export type Bound = {|
+  top: number,
+  right: number,
+  bottom: number,
+  left: number,
+  height: number,
+  width: number,
+|};
+export type Popover = {|
+  parentId: Key,
+  bounds: $Rest<Bound, {}>,
+  childKeyIds: Array<Key>,
+|};
+export type Echo = {|
+  animationId: string,
+  animationType: $Keys<typeof EchoAnimationTypes>,
+  borders: Border,
+  id: Key,
+  initialBounds: DOMRect,
+|};
+export type Icon = {|
+  type: $Keys<typeof IconTypes>,
+  data: string,
+|};
+export type KeyConfig = {|
+  ariaLabel: string,
+  id: Key,
+  type: $Keys<typeof KeyTypes>,
+  childKeyIds: Array<Key>,
+  icon: Icon,
+|};
+export type KeypadConfiguration = {|
+  keypadType: KeypadType,
+  extraKeys?: $ReadOnlyArray<Key>,
+|};
+export type KeyHandler = (key: Key) => Cursor;
+export type Cursor = {|
+  context: CursorContext,
+|};
+export type KeypadLayout = {|
+  rows: number,
+  columns: number,
+  numPages: number,
+  maxVisibleRows: number,
+|};
+declare type ActiveNodesObjPopover = {|
+  parentId: string,
+  childIds: $ReadOnlyArray<string>,
+|};
+export type ActiveNodesObj = {|
+  popover: ActiveNodesObjPopover | null,
+  focus: string | null,
+|};
+export type LayoutProps = {|
+  initialBounds: DOMRect,
+  borders: Border,
+|};

package/less/overrides.less

@@ -121,9 +121,3 @@
         display: inline-block !important;
     }
 }
-
-// The keypad sets its own color styles for KaTeX elements that are rendered in
-// its keys, so prevent any external styling.
-.keypad-container .katex {
-    color: inherit !important;
-}

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "0.7.2",
+    "version": "1.0.1",
     "publishConfig": {
         "access": "public"
     },

package/src/components/__tests__/{gesture-state-machine_test.js → gesture-state-machine.test.ts}

@@ -1,5 +1,7 @@
 import GestureStateMachine from "../gesture-state-machine";
 
+import type {Handlers} from "../gesture-state-machine";
+
 const swipeThresholdPx = 5;
 const longPressWaitTimeMs = 5;
 const holdIntervalMs = 5;
@@ -20,10 +22,11 @@ const eventTrackers = (buffer) => {
     ];
     callbackNames.forEach((callbackName) => {
         handlers[callbackName] = function () {
+            // eslint-disable-next-line prefer-rest-params
             buffer.push([callbackName, ...arguments]);
         };
     });
-    return handlers;
+    return handlers as Handlers;
 };
 
 // Arbitrary node IDs (representative of arbitrary keys) to be used in testing.
@@ -48,6 +51,7 @@ describe("GestureStateMachine", () => {
                 longPressWaitTimeMs,
                 holdIntervalMs,
             },
+            // @ts-expect-error TS2322
             [NodeIds.swipeDisabled],
             [NodeIds.multiPressable],
         );

package/src/components/__tests__/{two-page-keypad_test.js → two-page-keypad.test.tsx}

@@ -8,7 +8,6 @@ describe("<TwoPageKeyPage />", () => {
         // Arrange
         const wrapper = mount(
             <TwoPageKeypad
-                paginationEnabled={true}
                 currentPage={1}
                 leftPage={<p>Left Page</p>}
                 rightPage={<p>Right Page</p>}
@@ -24,7 +23,6 @@ describe("<TwoPageKeyPage />", () => {
         // Arrange
         const wrapper = mount(
             <TwoPageKeypad
-                paginationEnabled={true}
                 currentPage={0}
                 leftPage={<p>Left Page</p>}
                 rightPage={<p>Right Page</p>}

package/src/components/{corner-decal.js → corner-decal.tsx}

@@ -3,18 +3,19 @@
  */
 
 import {StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import {View} from "../fake-react-native-web/index";
 
 import {offBlack} from "./common-style";
 
-class CornerDecal extends React.Component {
-    static propTypes = {
-        style: PropTypes.any,
-    };
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
+type Props = {
+    style: StyleType;
+};
+
+class CornerDecal extends React.Component<Props> {
     render() {
         const {style} = this.props;