@khanacademy/math-input 1.0.0 → 2.0.0

package/dist/types.js.flow

@@ -4,16 +4,16 @@
  * Flowgen v1.21.0
  * @flow
  */
+import Keys from "./data/keys";
 import {
-  BorderDirections,
-  EchoAnimationTypes,
-  KeyTypes,
-  IconTypes,
-} from "./consts";
+  BorderDirection,
+  EchoAnimationType,
+  IconType,
+  KeyType,
+  KeypadType,
+} from "./enums";
 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 Border = $Rest<$ReadOnlyArray<BorderDirection>, {}>;
 export type Bound = {|
   top: number,
   right: number,
@@ -23,33 +23,33 @@ export type Bound = {|
   width: number,
 |};
 export type Popover = {|
-  parentId: Key,
+  parentId: Keys,
   bounds: $Rest<Bound, {}>,
-  childKeyIds: Array<Key>,
+  childKeyIds: Array<Keys>,
 |};
 export type Echo = {|
   animationId: string,
-  animationType: $Keys<typeof EchoAnimationTypes>,
+  animationType: EchoAnimationType,
   borders: Border,
-  id: Key,
+  id: Keys,
   initialBounds: DOMRect,
 |};
-export type Icon = {|
-  type: $Keys<typeof IconTypes>,
+export type IconConfig = {|
+  type: IconType,
   data: string,
 |};
 export type KeyConfig = {|
   ariaLabel: string,
-  id: Key,
-  type: $Keys<typeof KeyTypes>,
-  childKeyIds: Array<Key>,
-  icon: Icon,
+  id: Keys,
+  type: KeyType,
+  childKeyIds: Array<Keys>,
+  icon: IconConfig,
 |};
 export type KeypadConfiguration = {|
   keypadType: KeypadType,
-  extraKeys?: $ReadOnlyArray<Key>,
+  extraKeys?: $ReadOnlyArray<Keys>,
 |};
-export type KeyHandler = (key: Key) => Cursor;
+export type KeyHandler = (key: Keys) => Cursor;
 export type Cursor = {|
   context: CursorContext,
 |};
@@ -59,3 +59,15 @@ export type KeypadLayout = {|
   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": "1.0.0",
+    "version": "2.0.0",
     "publishConfig": {
         "access": "public"
     },

package/src/components/compute-layout-parameters.ts

@@ -19,7 +19,7 @@
  * might need to be.
  */
 
-import {DeviceTypes, DeviceOrientations, LayoutModes} from "../consts";
+import {DeviceType, DeviceOrientation, LayoutMode} from "../enums";
 
 import {
     pageIndicatorHeightPx,
@@ -68,8 +68,8 @@ export const computeLayoutParameters = (
 
     // Then, compute the button dimensions based on the provided parameters.
     let buttonDimensions;
-    if (deviceType === DeviceTypes.PHONE) {
-        const isLandscape = deviceOrientation === DeviceOrientations.LANDSCAPE;
+    if (deviceType === DeviceType.PHONE) {
+        const isLandscape = deviceOrientation === DeviceOrientation.LANDSCAPE;
 
         // In many cases, the browser chrome will already have been factored
         // into `pageHeightPx`. But we have no way of knowing if that's
@@ -129,7 +129,7 @@ export const computeLayoutParameters = (
             widthPx: buttonWidthPx,
             heightPx: buttonHeightPx,
         };
-    } else if (deviceType === DeviceTypes.TABLET) {
+    } else if (deviceType === DeviceType.TABLET) {
         buttonDimensions = {
             widthPx: maxButtonSize,
             heightPx: maxButtonSize,
@@ -151,7 +151,7 @@ export const computeLayoutParameters = (
         buttonDimensions,
         layoutMode:
             keypadWidth >= pageWidthPx
-                ? LayoutModes.FULLSCREEN
-                : LayoutModes.COMPACT,
+                ? LayoutMode.FULLSCREEN
+                : LayoutMode.COMPACT,
     };
 };

package/src/components/echo-manager.tsx

@@ -5,19 +5,19 @@
 import * as React from "react";
 import {TransitionGroup, CSSTransition} from "react-transition-group";
 
-import {KeyTypes, EchoAnimationTypes} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import Keys from "../data/keys";
+import {KeyType, EchoAnimationType} from "../enums";
 
 import KeypadButton from "./keypad-button";
 import * as zIndexes from "./z-indexes";
 
-import type {Key} from "../data/keys";
 import type {Border, Bound} from "../types";
 
 type EchoProps = {
     animationDurationMs: number;
     borders: Border;
-    id: Key;
+    id: Keys;
     initialBounds: Bound;
     onAnimationFinish: () => void;
 };
@@ -53,7 +53,7 @@ class Echo extends React.Component<EchoProps> {
             <div style={containerStyle}>
                 <KeypadButton
                     icon={icon}
-                    type={KeyTypes.ECHO}
+                    type={KeyType.ECHO}
                     borders={borders}
                 />
             </div>
@@ -63,9 +63,9 @@ class Echo extends React.Component<EchoProps> {
 
 type EchoPropType = {
     animationId: string;
-    animationType: keyof typeof EchoAnimationTypes;
+    animationType: EchoAnimationType;
     borders: Border;
-    id: Key;
+    id: Keys;
     initialBounds: Bound;
 };
 
@@ -82,17 +82,17 @@ class EchoManager extends React.Component<EchoManagerProps> {
         let animationTransitionName;
 
         switch (animationType) {
-            case EchoAnimationTypes.SLIDE_AND_FADE:
+            case EchoAnimationType.SLIDE_AND_FADE:
                 animationDurationMs = 400;
                 animationTransitionName = "echo-slide-and-fade";
                 break;
 
-            case EchoAnimationTypes.FADE_ONLY:
+            case EchoAnimationType.FADE_ONLY:
                 animationDurationMs = 300;
                 animationTransitionName = "echo-fade-only";
                 break;
 
-            case EchoAnimationTypes.LONG_FADE_ONLY:
+            case EchoAnimationType.LONG_FADE_ONLY:
                 animationDurationMs = 400;
                 animationTransitionName = "echo-long-fade-only";
                 break;
@@ -114,7 +114,7 @@ class EchoManager extends React.Component<EchoManagerProps> {
 
         return (
             <span>
-                {Object.keys(EchoAnimationTypes).map((animationType) => {
+                {Object.keys(EchoAnimationType).map((animationType) => {
                     // Collect the relevant parameters for the animation type, and
                     // filter for the appropriate echoes.
                     const {animationDurationMs, animationTransitionName} =

package/src/components/expression-keypad.tsx

@@ -6,12 +6,12 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {BorderStyles} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import {BorderStyles} from "../enums";
 import {View} from "../fake-react-native-web/index";
 
 import {valueGrey, controlGrey} from "./common-style";
-import * as CursorContexts from "./input/cursor-contexts";
+import {CursorContext} from "./input/cursor-contexts";
 import ManyKeypadButton from "./many-keypad-button";
 import Styles from "./styles";
 import TouchableKeypadButton from "./touchable-keypad-button";
@@ -19,7 +19,6 @@ import TwoPageKeypad from "./two-page-keypad";
 
 import type {State} from "../store/types";
 import type {KeypadLayout} from "../types";
-import type {CursorContext} from "./input/cursor-contexts";
 
 const {row, column, oneColumn, fullWidth, roundedTopLeft, roundedTopRight} =
     Styles;
@@ -60,31 +59,31 @@ class ExpressionKeypad extends React.Component<Props> {
         let dismissOrJumpOutKey;
         if (dynamicJumpOut) {
             switch (cursorContext) {
-                case CursorContexts.IN_PARENS:
+                case CursorContext.IN_PARENS:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_PARENTHESES;
                     break;
 
-                case CursorContexts.IN_SUPER_SCRIPT:
+                case CursorContext.IN_SUPER_SCRIPT:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_EXPONENT;
                     break;
 
-                case CursorContexts.IN_SUB_SCRIPT:
+                case CursorContext.IN_SUB_SCRIPT:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_BASE;
                     break;
 
-                case CursorContexts.BEFORE_FRACTION:
+                case CursorContext.BEFORE_FRACTION:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_INTO_NUMERATOR;
                     break;
 
-                case CursorContexts.IN_NUMERATOR:
+                case CursorContext.IN_NUMERATOR:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_NUMERATOR;
                     break;
 
-                case CursorContexts.IN_DENOMINATOR:
+                case CursorContext.IN_DENOMINATOR:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_DENOMINATOR;
                     break;
 
-                case CursorContexts.NONE:
+                case CursorContext.NONE:
                 default:
                     dismissOrJumpOutKey = KeyConfigs.DISMISS;
                     break;

package/src/components/fraction-keypad.tsx

@@ -6,18 +6,17 @@
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {BorderStyles} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import {BorderStyles} from "../enums";
 import {View} from "../fake-react-native-web/index";
 
-import * as CursorContexts from "./input/cursor-contexts";
+import {CursorContext} from "./input/cursor-contexts";
 import Keypad from "./keypad";
 import Styles from "./styles";
 import TouchableKeypadButton from "./touchable-keypad-button";
 
 import type {State} from "../store/types";
 import type {KeypadLayout} from "../types";
-import type {CursorContext} from "./input/cursor-contexts";
 
 const {row, roundedTopLeft, roundedTopRight} = Styles;
 
@@ -49,31 +48,31 @@ class FractionKeypad extends React.Component<Props> {
         let dismissOrJumpOutKey;
         if (dynamicJumpOut) {
             switch (cursorContext) {
-                case CursorContexts.IN_PARENS:
+                case CursorContext.IN_PARENS:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_PARENTHESES;
                     break;
 
-                case CursorContexts.IN_SUPER_SCRIPT:
+                case CursorContext.IN_SUPER_SCRIPT:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_EXPONENT;
                     break;
 
-                case CursorContexts.IN_SUB_SCRIPT:
+                case CursorContext.IN_SUB_SCRIPT:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_BASE;
                     break;
 
-                case CursorContexts.BEFORE_FRACTION:
+                case CursorContext.BEFORE_FRACTION:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_INTO_NUMERATOR;
                     break;
 
-                case CursorContexts.IN_NUMERATOR:
+                case CursorContext.IN_NUMERATOR:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_NUMERATOR;
                     break;
 
-                case CursorContexts.IN_DENOMINATOR:
+                case CursorContext.IN_DENOMINATOR:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_DENOMINATOR;
                     break;
 
-                case CursorContexts.NONE:
+                case CursorContext.NONE:
                 default:
                     dismissOrJumpOutKey = KeyConfigs.DISMISS;
                     break;
@@ -107,8 +106,8 @@ class FractionKeypad extends React.Component<Props> {
                             // then when the cursor was inside a parenthetical
                             // expression in a numerator or denominator, this check
                             // would fail.
-                            cursorContext === CursorContexts.IN_NUMERATOR ||
-                            cursorContext === CursorContexts.IN_DENOMINATOR
+                            cursorContext === CursorContext.IN_NUMERATOR ||
+                            cursorContext === CursorContext.IN_DENOMINATOR
                         }
                         style={roundTopRight && roundedTopRight}
                     />

package/src/components/gesture-state-machine.ts

@@ -1,4 +1,4 @@
-import type {Key} from "../data/keys";
+import Keys from "../data/keys";
 
 /**
  * The state machine that backs our gesture system. In particular, this state
@@ -26,17 +26,17 @@ type Options = {
 };
 
 type TouchState = {
-    activeNodeId: Key;
+    activeNodeId: Keys;
     pressAndHoldIntervalId: number | null;
     longPressTimeoutId: number | null;
     swipeLocked: boolean;
     startX: number;
 };
 
-type TouchStateMap = Record<Key, TouchState>;
+type TouchStateMap = Record<Keys, TouchState>;
 
 type SwipeState = {
-    touchId: Key;
+    touchId: Keys;
     startX: number;
 };
 
@@ -49,16 +49,16 @@ const defaultOptions: Options = {
 class GestureStateMachine {
     handlers: Handlers;
     options: Options;
-    swipeDisabledNodeIds: Partial<[Key]>;
-    multiPressableKeys: Partial<[Key]>;
+    swipeDisabledNodeIds: Partial<[Keys]>;
+    multiPressableKeys: Partial<[Keys]>;
     touchState: Partial<TouchStateMap>;
     swipeState: SwipeState | null;
 
     constructor(
         handlers: Handlers,
         options: Partial<Options>,
-        swipeDisabledNodeIds?: [Key],
-        multiPressableKeys?: [Key],
+        swipeDisabledNodeIds?: [Keys],
+        multiPressableKeys?: [Keys],
     ) {
         this.handlers = handlers;
         this.options = {

package/src/components/icon.tsx

@@ -5,14 +5,14 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {IconTypes} from "../consts";
+import {IconType} from "../enums";
 
 import {offBlack} from "./common-style";
 import MathIcon from "./math-icon";
 import SvgIcon from "./svg-icon";
 import TextIcon from "./text-icon";
 
-import type {Icon as IconPropType} from "../types";
+import type {IconConfig} from "../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 const focusedColor = "#FFF";
@@ -20,7 +20,7 @@ const unfocusedColor = offBlack;
 
 type Props = {
     focused: boolean;
-    icon: IconPropType;
+    icon: IconConfig;
     style?: StyleType;
 };
 
@@ -34,10 +34,10 @@ class Icon extends React.PureComponent<Props> {
         ];
 
         switch (icon.type) {
-            case IconTypes.MATH:
+            case IconType.MATH:
                 return <MathIcon math={icon.data} style={styleWithFocus} />;
 
-            case IconTypes.SVG:
+            case IconType.SVG:
                 // TODO(charlie): Support passing style objects to `SvgIcon`.
                 // This will require migrating the individual icons to use
                 // `currentColor` and accept a `className` prop, rather than
@@ -49,7 +49,7 @@ class Icon extends React.PureComponent<Props> {
                     />
                 );
 
-            case IconTypes.TEXT:
+            case IconType.TEXT:
                 return (
                     <TextIcon character={icon.data} style={styleWithFocus} />
                 );

package/src/components/input/__tests__/context-tracking.test.ts

@@ -1,5 +1,5 @@
 import Keys from "../../../data/keys";
-import * as CursorContexts from "../cursor-contexts";
+import {CursorContext} from "../cursor-contexts";
 
 import TestMathWrapper from "./test-math-wrapper";
 
@@ -22,20 +22,20 @@ describe("Cursor context", () => {
         mathField.pressKey("NUM_1");
         mathField.pressKey("NUM_2");
         const cursor = mathField.pressKey("NUM_3");
-        expect(cursor.context).toEqual(CursorContexts.NONE);
+        expect(cursor.context).toEqual(CursorContext.NONE);
     });
 
     it("should treat numbers and ternary operators as non-jumpable", () => {
         mathField.pressKey("NUM_1");
         mathField.pressKey(Keys.CDOT);
         const cursor = mathField.pressKey("NUM_2");
-        expect(cursor.context).toEqual(CursorContexts.NONE);
+        expect(cursor.context).toEqual(CursorContext.NONE);
     });
 
     describe("Before fraction", () => {
         it("should detect when immediately to the left", () => {
             const cursor = mathField.pressKey(Keys.FRAC_EXCLUSIVE);
-            expect(cursor.context).toEqual(CursorContexts.BEFORE_FRACTION);
+            expect(cursor.context).toEqual(CursorContext.BEFORE_FRACTION);
         });
 
         it("should detect when numbers are between", () => {
@@ -43,7 +43,7 @@ describe("Cursor context", () => {
             mathField.pressKey(Keys.FRAC_EXCLUSIVE);
             mathField.pressKey(Keys.LEFT);
             const cursor = mathField.pressKey(Keys.LEFT);
-            expect(cursor.context).toEqual(CursorContexts.BEFORE_FRACTION);
+            expect(cursor.context).toEqual(CursorContext.BEFORE_FRACTION);
         });
 
         it("should not detect when operators are between", () => {
@@ -55,7 +55,7 @@ describe("Cursor context", () => {
             mathField.pressKey(Keys.LEFT);
             mathField.pressKey(Keys.LEFT);
             const cursor = mathField.pressKey(Keys.LEFT);
-            expect(cursor.context).toEqual(CursorContexts.NONE);
+            expect(cursor.context).toEqual(CursorContext.NONE);
         });
 
         it("should not detect when parens are between", () => {
@@ -69,7 +69,7 @@ describe("Cursor context", () => {
             mathField.pressKey(Keys.LEFT);
             mathField.pressKey(Keys.LEFT);
             const cursor = mathField.pressKey(Keys.LEFT);
-            expect(cursor.context).toEqual(CursorContexts.NONE);
+            expect(cursor.context).toEqual(CursorContext.NONE);
         });
     });
 
@@ -78,7 +78,7 @@ describe("Cursor context", () => {
             mathField.pressKey(Keys.LEFT_PAREN);
             mathField.pressKey(Keys.RIGHT_PAREN);
             const cursor = mathField.pressKey(Keys.LEFT);
-            expect(cursor.context).toEqual(CursorContexts.IN_PARENS);
+            expect(cursor.context).toEqual(CursorContext.IN_PARENS);
         });
 
         it("should detect when inside non-empty parens", () => {
@@ -86,7 +86,7 @@ describe("Cursor context", () => {
             mathField.pressKey("NUM_2");
             mathField.pressKey(Keys.RIGHT_PAREN);
             const cursor = mathField.pressKey(Keys.LEFT);
-            expect(cursor.context).toEqual(CursorContexts.IN_PARENS);
+            expect(cursor.context).toEqual(CursorContext.IN_PARENS);
         });
     });
 
@@ -94,40 +94,40 @@ describe("Cursor context", () => {
         it("should detect when inside empty superscript", () => {
             mathField.pressKey("NUM_2");
             const cursor = mathField.pressKey(Keys.EXP);
-            expect(cursor.context).toEqual(CursorContexts.IN_SUPER_SCRIPT);
+            expect(cursor.context).toEqual(CursorContext.IN_SUPER_SCRIPT);
         });
 
         it("should detect when inside non-empty superscript", () => {
             mathField.pressKey("NUM_2");
             mathField.pressKey(Keys.EXP);
             const cursor = mathField.pressKey("NUM_3");
-            expect(cursor.context).toEqual(CursorContexts.IN_SUPER_SCRIPT);
+            expect(cursor.context).toEqual(CursorContext.IN_SUPER_SCRIPT);
         });
     });
 
     describe("In subscript", () => {
         it("should detect when inside empty superscript", () => {
             const cursor = mathField.pressKey(Keys.LOG_N);
-            expect(cursor.context).toEqual(CursorContexts.IN_SUB_SCRIPT);
+            expect(cursor.context).toEqual(CursorContext.IN_SUB_SCRIPT);
         });
 
         it("should detect when inside non-empty superscript", () => {
             mathField.pressKey(Keys.LOG_N);
             const cursor = mathField.pressKey("NUM_2");
-            expect(cursor.context).toEqual(CursorContexts.IN_SUB_SCRIPT);
+            expect(cursor.context).toEqual(CursorContext.IN_SUB_SCRIPT);
         });
     });
 
     describe("In numerator", () => {
         it("should detect when inside empty numerator", () => {
             const cursor = mathField.pressKey(Keys.FRAC_INCLUSIVE);
-            expect(cursor.context).toEqual(CursorContexts.IN_NUMERATOR);
+            expect(cursor.context).toEqual(CursorContext.IN_NUMERATOR);
         });
 
         it("should detect when inside non-empty numerator", () => {
             mathField.pressKey(Keys.FRAC_INCLUSIVE);
             const cursor = mathField.pressKey("NUM_2");
-            expect(cursor.context).toEqual(CursorContexts.IN_NUMERATOR);
+            expect(cursor.context).toEqual(CursorContext.IN_NUMERATOR);
         });
     });
 
@@ -135,14 +135,14 @@ describe("Cursor context", () => {
         it("should detect when inside empty denominator", () => {
             mathField.pressKey(Keys.FRAC_INCLUSIVE);
             const cursor = mathField.pressKey(Keys.RIGHT);
-            expect(cursor.context).toEqual(CursorContexts.IN_DENOMINATOR);
+            expect(cursor.context).toEqual(CursorContext.IN_DENOMINATOR);
         });
 
         it("should detect when inside non-empty denominator", () => {
             mathField.pressKey(Keys.FRAC_INCLUSIVE);
             mathField.pressKey(Keys.RIGHT);
             const cursor = mathField.pressKey("NUM_2");
-            expect(cursor.context).toEqual(CursorContexts.IN_DENOMINATOR);
+            expect(cursor.context).toEqual(CursorContext.IN_DENOMINATOR);
         });
     });
 
@@ -153,7 +153,7 @@ describe("Cursor context", () => {
             mathField.pressKey("NUM_2");
             mathField.pressKey(Keys.FRAC_EXCLUSIVE);
             const cursor = mathField.pressKey(Keys.LEFT);
-            expect(cursor.context).toEqual(CursorContexts.BEFORE_FRACTION);
+            expect(cursor.context).toEqual(CursorContext.BEFORE_FRACTION);
         });
 
         it("should defer to the nearest parent (1)", () => {
@@ -162,7 +162,7 @@ describe("Cursor context", () => {
             mathField.pressKey(Keys.EXP);
             mathField.pressKey(Keys.LEFT_PAREN);
             const cursor = mathField.pressKey("NUM_3");
-            expect(cursor.context).toEqual(CursorContexts.IN_PARENS);
+            expect(cursor.context).toEqual(CursorContext.IN_PARENS);
         });
 
         it("should defer to the nearest parent (2)", () => {
@@ -171,7 +171,7 @@ describe("Cursor context", () => {
             mathField.pressKey(Keys.FRAC_INCLUSIVE);
             mathField.pressKey(Keys.FRAC_INCLUSIVE);
             const cursor = mathField.pressKey(Keys.RIGHT);
-            expect(cursor.context).toEqual(CursorContexts.IN_DENOMINATOR);
+            expect(cursor.context).toEqual(CursorContext.IN_DENOMINATOR);
         });
     });
 });