@khanacademy/math-input 2.0.0 → 4.0.0

package/src/data/keys.ts

@@ -1,72 +1,120 @@
-/**
- * This file contains constants for keypad buttons that aren't single
- * alphanumeric characters.
- */
+type Key =
+    | "PLUS"
+    | "MINUS"
+    | "NEGATIVE"
+    | "TIMES"
+    | "DIVIDE"
+    | "DECIMAL"
+    | "PERIOD"
+    | "PERCENT"
+    | "CDOT"
+    | "EQUAL"
+    | "NEQ"
+    | "GT"
+    | "LT"
+    | "GEQ"
+    | "LEQ" // mobile native only
+    | "FRAC_INCLUSIVE" // mobile native only
+    | "FRAC_EXCLUSIVE" // mobile native only
+    | "FRAC"
+    | "EXP"
+    | "EXP_2"
+    | "EXP_3"
+    | "SQRT"
+    | "CUBE_ROOT"
+    | "RADICAL"
+    | "LEFT_PAREN"
+    | "RIGHT_PAREN"
+    | "LN"
+    | "LOG"
+    | "LOG_N"
+    | "SIN"
+    | "COS" // TODO(charlie): Add in additional Greek letters.
+    | "TAN"
+    | "PI"
+    | "THETA"
+    | "UP"
+    | "RIGHT"
+    | "DOWN"
+    | "LEFT"
+    | "BACKSPACE"
+    | "DISMISS"
+    | "JUMP_OUT_PARENTHESES"
+    | "JUMP_OUT_EXPONENT"
+    | "JUMP_OUT_BASE"
+    | "JUMP_INTO_NUMERATOR"
+    | "JUMP_OUT_NUMERATOR"
+    | "JUMP_OUT_DENOMINATOR" // Multi-functional keys.
+    | "NOOP" // mobile native only
+    | "MANY" // A custom key that captures an arbitrary number of symbols but has no 'default' symbol or action.
+    | "NUM_0"
+    | "NUM_1"
+    | "NUM_2"
+    | "NUM_3"
+    | "NUM_4"
+    | "NUM_5"
+    | "NUM_6"
+    | "NUM_7"
+    | "NUM_8"
+    | "NUM_9"
+    | "a"
+    | "b"
+    | "c"
+    | "d"
+    | "e"
+    | "f"
+    | "g"
+    | "h"
+    | "i"
+    | "j"
+    | "k"
+    | "l"
+    | "m"
+    | "n"
+    | "o"
+    | "p"
+    | "q"
+    | "r"
+    | "s"
+    | "t"
+    | "u"
+    | "v"
+    | "w"
+    | "x"
+    | "y"
+    | "z"
+    | "A"
+    | "B"
+    | "C"
+    | "D"
+    | "E"
+    | "F"
+    | "G"
+    | "H"
+    | "I"
+    | "J"
+    | "K"
+    | "L"
+    | "M"
+    | "N"
+    | "O"
+    | "P"
+    | "Q"
+    | "R"
+    | "S"
+    | "T"
+    | "U"
+    | "V"
+    | "W"
+    | "X"
+    | "Y"
+    | "Z"
 
-// TODO(charlie): There's duplication between this file and key-configs.js.
-// We should clean it up by removing this file and requiring clients to use the
-// `id` field on the key configurations.
-enum Keys {
-    PLUS = "PLUS",
-    MINUS = "MINUS",
-    NEGATIVE = "NEGATIVE",
-    TIMES = "TIMES",
-    DIVIDE = "DIVIDE",
-    DECIMAL = "DECIMAL",
-    PERIOD = "PERIOD",
-    PERCENT = "PERCENT",
-    CDOT = "CDOT",
-    EQUAL = "EQUAL",
-    NEQ = "NEQ",
-    GT = "GT",
-    LT = "LT",
-    GEQ = "GEQ",
-    LEQ = "LEQ", // mobile native only
-    FRAC_INCLUSIVE = "FRAC_INCLUSIVE", // mobile native only
-    FRAC_EXCLUSIVE = "FRAC_EXCLUSIVE", // mobile native only
-    FRAC = "FRAC",
-    EXP = "EXP",
-    EXP_2 = "EXP_2",
-    EXP_3 = "EXP_3",
-    SQRT = "SQRT",
-    CUBE_ROOT = "CUBE_ROOT",
-    RADICAL = "RADICAL",
-    LEFT_PAREN = "LEFT_PAREN",
-    RIGHT_PAREN = "RIGHT_PAREN",
-    LN = "LN",
-    LOG = "LOG",
-    LOG_N = "LOG_N",
-    SIN = "SIN",
-    COS = "COS", // TODO(charlie): Add in additional Greek letters.
-    TAN = "TAN",
+    // Currently only used by
+    // Perseus' Expression MathInput
+    | "PHI"
+    | "NTHROOT3"
+    | "POW"
+    | "LOG_B";
 
-    PI = "PI",
-    THETA = "THETA",
-
-    UP = "UP",
-    RIGHT = "RIGHT",
-    DOWN = "DOWN",
-    LEFT = "LEFT",
-    BACKSPACE = "BACKSPACE",
-    DISMISS = "DISMISS",
-
-    JUMP_OUT_PARENTHESES = "JUMP_OUT_PARENTHESES",
-    JUMP_OUT_EXPONENT = "JUMP_OUT_EXPONENT",
-    JUMP_OUT_BASE = "JUMP_OUT_BASE",
-    JUMP_INTO_NUMERATOR = "JUMP_INTO_NUMERATOR",
-    JUMP_OUT_NUMERATOR = "JUMP_OUT_NUMERATOR",
-    JUMP_OUT_DENOMINATOR = "JUMP_OUT_DENOMINATOR", // Multi-functional keys.
-
-    NOOP = "NOOP", // mobile native only
-
-    // Multi-functional keys.
-    // A custom key that captures an arbitrary number of symbols but has no
-    // 'default' symbol or action.
-    FRAC_MULTI = "FRAC_MULTI", // mobile native only
-
-    // A custom key that captures an arbitrary number of symbols but has no
-    // 'default' symbol or action.
-    MANY = "MANY",
-}
-
-export default Keys;
+export default Key;

package/src/enums.ts

@@ -7,25 +7,26 @@ export enum KeypadType {
     EXPRESSION = "EXPRESSION",
 }
 
-export enum KeyType {
-    EMPTY = "EMPTY",
+export const KeyTypes = [
+    "EMPTY",
     // For numerals, variables, and any other characters that themselves
     // compose 'values'.
-    VALUE = "VALUE",
+    "VALUE",
     // For buttons that insert or adjust math in an input.
-    OPERATOR = "OPERATOR",
+    "OPERATOR",
     // For buttons that move the cursor in an input (including via
     // deletion).
-    INPUT_NAVIGATION = "INPUT_NAVIGATION",
+    "INPUT_NAVIGATION",
     // For buttons that modify the broader keypad state (e.g., by changing
     // the visible pane).
-    KEYPAD_NAVIGATION = "KEYPAD_NAVIGATION",
+    "KEYPAD_NAVIGATION",
     // For buttons that house multiple buttons and have no action
     // themselves.
-    MANY = "MANY",
+    "MANY",
     // For the echo animation that appears on press.
-    ECHO = "ECHO",
-}
+    "ECHO",
+];
+export type KeyType = typeof KeyTypes[number];
 
 export enum DeviceOrientation {
     LANDSCAPE = "LANDSCAPE",

package/src/index.ts

@@ -7,7 +7,10 @@ import "../less/main.less";
 export {CursorContext} from "./components/input/cursor-contexts";
 export {default as KeypadInput} from "./components/input/math-input";
 export {keypadElementPropType} from "./components/prop-types";
-export {default as Keypad} from "./components/provided-keypad";
+export {default as LegacyKeypad} from "./components/keypad-legacy/provided-keypad";
 export {default as KeyConfigs} from "./data/key-configs";
-export {default as Keys} from "./data/keys";
-export {KeyType, KeypadType} from "./enums";
+export type {default as Keys} from "./data/keys";
+export {type KeyType, KeypadType} from "./enums";
+
+export {default as Keypad} from "./components/keypad/index";
+export {default as keyTranslator} from "./components/key-translator";

package/src/math-input.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import {Keypad, KeypadInput, KeypadType} from "./index";
+import {LegacyKeypad, KeypadInput, KeypadType} from "./index";
 
 export default {
     title: "Full MathInput",
@@ -10,7 +10,7 @@ export const Basic = () => {
     const [value, setValue] = React.useState("");
     const [keypadElement, setKeypadElement] = React.useState<any>(null);
     const [keypadType, setKeypadType] = React.useState<KeypadType>(
-        KeypadType.FRACTION,
+        KeypadType.EXPRESSION,
     );
 
     React.useEffect(() => {
@@ -55,7 +55,7 @@ export const Basic = () => {
                 }}
             />
 
-            <Keypad
+            <LegacyKeypad
                 onElementMounted={(node) => {
                     if (node && !keypadElement) {
                         setKeypadElement(node);

package/src/types.ts

@@ -1,4 +1,4 @@
-import Keys from "./data/keys";
+import Key from "./data/keys";
 import {
     BorderDirection,
     EchoAnimationType,
@@ -11,27 +11,26 @@ import type {CursorContext} from "./components/input/cursor-contexts";
 
 export type Border = Partial<ReadonlyArray<BorderDirection>>;
 
-export type Bound = {
+export interface Bound {
     top: number;
     right: number;
     bottom: number;
     left: number;
     height: number;
     width: number;
-};
+}
 
 export type Popover = {
-    parentId: Keys;
+    parentId: Key;
     bounds: Partial<Bound>;
-    childKeyIds: Array<Keys>;
+    childKeyIds: Array<Key>;
 };
 
 export type Echo = {
     animationId: string;
     animationType: EchoAnimationType;
-    borders: Border;
-    id: Keys;
-    initialBounds: DOMRect;
+    id: Key;
+    initialBounds: Bound;
 };
 
 export type IconConfig = {
@@ -39,20 +38,26 @@ export type IconConfig = {
     data: string;
 };
 
-export type KeyConfig = {
-    ariaLabel: string;
-    id: Keys;
-    type: KeyType;
-    childKeyIds: Array<Keys>;
+export type NonManyKeyConfig = {
+    id: Key;
+    type: Exclude<KeyType, "MANY">;
     icon: IconConfig;
+    ariaLabel: string;
 };
 
+export type ManyKeyConfig = Omit<NonManyKeyConfig, "type"> & {
+    type: Extract<KeyType, "MANY">;
+    childKeyIds: ReadonlyArray<string>;
+};
+
+export type KeyConfig = NonManyKeyConfig | ManyKeyConfig;
+
 export type KeypadConfiguration = {
     keypadType: KeypadType;
-    extraKeys?: ReadonlyArray<Keys>;
+    extraKeys?: ReadonlyArray<Key>;
 };
 
-export type KeyHandler = (key: Keys) => Cursor;
+export type KeyHandler = (key: Key) => Cursor;
 
 export type Cursor = {
     context: CursorContext;
@@ -78,4 +83,4 @@ export type ActiveNodesObj = {
     focus: string | null;
 };
 
-export type LayoutProps = {initialBounds: DOMRect; borders: Border};
+export type LayoutProps = {initialBounds: Bound};