@khanacademy/math-input 3.0.0 → 4.0.0

package/src/components/keypad/keypad-mathquill.stories.tsx

@@ -0,0 +1,69 @@
+import MathQuill from "mathquill";
+import * as React from "react";
+
+import Key from "../../data/keys";
+import keyTranslator from "../key-translator";
+
+import Keypad from "./index";
+
+export default {
+    title: "v2 Keypad With Mathquill",
+};
+
+const mathQuillConfig = {
+    autoCommands: "pi theta phi sqrt nthroot",
+    charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
+    supSubsRequireOperand: true,
+    spaceBehavesLikeTab: true,
+};
+
+export function V2KeypadWithMathquill() {
+    const mathquillWrapperRef = React.useRef<HTMLDivElement>(null);
+    const [mathQuill, setMathQuill] = React.useState<MathQuill>();
+
+    React.useEffect(() => {
+        if (!mathQuill && mathquillWrapperRef.current) {
+            const MQ = MathQuill.getInterface(2);
+            const mathQuillInstance = MQ.MathField(
+                mathquillWrapperRef.current,
+                mathQuillConfig,
+            );
+            setMathQuill(mathQuillInstance);
+        }
+    }, [mathQuill]);
+
+    function handleClickKey(key: Key) {
+        if (!mathQuill) {
+            return;
+        }
+
+        const mathQuillCallback = keyTranslator[key];
+        if (mathQuillCallback) {
+            mathQuillCallback(mathQuill, key);
+        } else {
+            // eslint-disable-next-line no-console
+            console.warn(`No translation to Mathquill for: ${key}`);
+        }
+    }
+
+    return (
+        <div style={{maxWidth: "400px", margin: "2em"}}>
+            <div
+                ref={mathquillWrapperRef}
+                style={{width: "100%", marginBottom: "1em"}}
+            />
+            <div>
+                <Keypad
+                    onClickKey={handleClickKey}
+                    advancedRelations
+                    basicRelations
+                    divisionKey
+                    logarithms
+                    multiplicationDot
+                    preAlgebra
+                    trigonometry
+                />
+            </div>
+        </div>
+    );
+}

package/src/components/keypad/keypad-page-items.tsx

@@ -1,10 +1,11 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 
+import {KeyConfig} from "../../types";
+
 import Button from "./button";
 import ButtonAsset from "./button-assets";
 
-import type {KeyConfig} from "../../data/key-configs";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 type KeypadPageContainerProps = {

package/src/components/keypad/operators-page/index.tsx

@@ -42,7 +42,7 @@ export default class OperatorsPage extends React.Component<Props> {
                     placeholder={!this.props.logarithms}
                 />
                 <SecondaryKeypadButton
-                    keyConfig={Keys.X}
+                    keyConfig={Keys.x}
                     onClickKey={onClickKey}
                     style={{
                         gridColumn: 5,

package/src/components/keypad-legacy/echo-manager.tsx

@@ -6,8 +6,8 @@ import * as React from "react";
 import {TransitionGroup, CSSTransition} from "react-transition-group";
 
 import KeyConfigs from "../../data/key-configs";
-import Keys from "../../data/keys";
-import {KeyType, EchoAnimationType} from "../../enums";
+import Key from "../../data/keys";
+import {EchoAnimationType} from "../../enums";
 
 import KeypadButton from "./keypad-button";
 import * as zIndexes from "./z-indexes";
@@ -16,7 +16,7 @@ import type {Bound, Echo as EchoType} from "../../types";
 
 type EchoProps = {
     animationDurationMs: number;
-    id: Keys;
+    id: Key;
     initialBounds: Bound;
     onAnimationFinish: () => void;
 };
@@ -50,7 +50,7 @@ class Echo extends React.Component<EchoProps> {
         // applied via StyleSheet, will override our inlines.
         return (
             <div style={containerStyle}>
-                <KeypadButton icon={icon} type={KeyType.ECHO} />
+                <KeypadButton icon={icon} type={"ECHO"} />
             </div>
         );
     }

package/src/components/keypad-legacy/empty-keypad-button.tsx

@@ -27,14 +27,16 @@ class EmptyKeypadButton extends React.Component<ReduxProps> {
         // to focus them or trigger presses.
         return (
             <KeypadButton
-                onTouchStart={(evt: TouchEvent) =>
+                onTouchStart={(evt: React.TouchEvent<HTMLDivElement>) =>
                     gestureManager.onTouchStart(evt)
                 }
-                onTouchEnd={(evt: TouchEvent) => gestureManager.onTouchEnd(evt)}
-                onTouchMove={(evt: TouchEvent) =>
+                onTouchEnd={(evt: React.TouchEvent<HTMLDivElement>) =>
+                    gestureManager.onTouchEnd(evt)
+                }
+                onTouchMove={(evt: React.TouchEvent<HTMLDivElement>) =>
                     gestureManager.onTouchMove(evt)
                 }
-                onTouchCancel={(evt: TouchEvent) =>
+                onTouchCancel={(evt: React.TouchEvent<HTMLDivElement>) =>
                     gestureManager.onTouchCancel(evt)
                 }
                 {...KeyConfigs.NOOP}

package/src/components/keypad-legacy/gesture-manager.ts

@@ -3,6 +3,10 @@
  * connects our various bits of logic for managing gestures and interactions,
  * and links them together.
  */
+import * as React from "react";
+
+import Key from "../../data/keys";
+import {ActiveNodesObj, LayoutProps} from "../../types";
 
 import GestureStateMachine from "./gesture-state-machine";
 import NodeManager from "./node-manager";
@@ -12,6 +16,17 @@ const coordsForEvent = (evt) => {
     return [evt.changedTouches[0].clientX, evt.changedTouches[0].clientY];
 };
 
+type Options = {
+    swipeEnabled: boolean;
+};
+
+type Handlers = {
+    onSwipeChange?: (dx: number) => void;
+    onSwipeEnd?: (dx: number) => void;
+    onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void;
+    onClick: (key: Key, layoutProps: LayoutProps, inPopover: boolean) => void;
+};
+
 class GestureManager {
     swipeEnabled: boolean;
     trackEvents: boolean;
@@ -19,7 +34,12 @@ class GestureManager {
     popoverStateMachine: PopoverStateMachine;
     gestureStateMachine: GestureStateMachine;
 
-    constructor(options, handlers, disabledSwipeKeys, multiPressableKeys) {
+    constructor(
+        options: Options,
+        handlers: Handlers,
+        disabledSwipeKeys: ReadonlyArray<Key>,
+        multiPressableKeys: ReadonlyArray<Key>,
+    ) {
         const {swipeEnabled} = options;
 
         this.swipeEnabled = swipeEnabled;
@@ -96,11 +116,14 @@ class GestureManager {
      * 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 {React.TouchEvent<HTMLDivElement>} 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?) {
+    onTouchStart(
+        evt: React.TouchEvent<HTMLDivElement>,
+        id?: string | undefined,
+    ) {
         if (!this.trackEvents) {
             return;
         }
@@ -128,9 +151,9 @@ class GestureManager {
      * 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
+     * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
      */
-    onTouchMove(evt: TouchEvent) {
+    onTouchMove(evt: React.TouchEvent<HTMLDivElement>) {
         if (!this.trackEvents) {
             return;
         }
@@ -152,9 +175,9 @@ class GestureManager {
      * 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
+     * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
      */
-    onTouchEnd(evt: TouchEvent) {
+    onTouchEnd(evt: React.TouchEvent<HTMLDivElement>) {
         if (!this.trackEvents) {
             return;
         }
@@ -173,9 +196,9 @@ class GestureManager {
      * 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
+     * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
      */
-    onTouchCancel(evt: TouchEvent) {
+    onTouchCancel(evt: React.TouchEvent<HTMLDivElement>) {
         if (!this.trackEvents) {
             return;
         }

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

@@ -1,4 +1,4 @@
-import Keys from "../../data/keys";
+import Key from "../../data/keys";
 
 /**
  * The state machine that backs our gesture system. In particular, this state
@@ -14,8 +14,8 @@ export type Handlers = {
     onBlur: () => void;
     onTrigger: (id: string) => void;
     onLongPress: (id: string) => void;
-    onSwipeChange: (x: number) => void;
-    onSwipeEnd: (x: number) => void;
+    onSwipeChange?: (x: number) => void;
+    onSwipeEnd?: (x: number) => void;
     onTouchEnd: (id: string) => void;
 };
 
@@ -26,17 +26,17 @@ type Options = {
 };
 
 type TouchState = {
-    activeNodeId: Keys;
+    activeNodeId: Key;
     pressAndHoldIntervalId: number | null;
     longPressTimeoutId: number | null;
     swipeLocked: boolean;
     startX: number;
 };
 
-type TouchStateMap = Record<Keys, TouchState>;
+type TouchStateMap = Record<Key, TouchState>;
 
 type SwipeState = {
-    touchId: Keys;
+    touchId: Key;
     startX: number;
 };
 
@@ -49,16 +49,16 @@ const defaultOptions: Options = {
 class GestureStateMachine {
     handlers: Handlers;
     options: Options;
-    swipeDisabledNodeIds: Partial<[Keys]>;
-    multiPressableKeys: Partial<[Keys]>;
+    swipeDisabledNodeIds: ReadonlyArray<Key>;
+    multiPressableKeys: ReadonlyArray<Key>;
     touchState: Partial<TouchStateMap>;
     swipeState: SwipeState | null;
 
     constructor(
         handlers: Handlers,
         options: Partial<Options>,
-        swipeDisabledNodeIds?: [Keys],
-        multiPressableKeys?: [Keys],
+        swipeDisabledNodeIds?: ReadonlyArray<Key>,
+        multiPressableKeys?: ReadonlyArray<Key>,
     ) {
         this.handlers = handlers;
         this.options = {
@@ -234,7 +234,7 @@ class GestureStateMachine {
             // Only respect the finger that started a swipe. Any other lingering
             // gestures are ignored.
             if (this.swipeState.touchId === touchId) {
-                this.handlers.onSwipeChange(pageX - this.swipeState.startX);
+                this.handlers.onSwipeChange?.(pageX - this.swipeState.startX);
             }
         } else if (this.touchState[touchId]) {
             // It could be touch events started outside the keypad and
@@ -256,7 +256,7 @@ class GestureStateMachine {
                     touchId,
                     startX,
                 };
-                this.handlers.onSwipeChange(pageX - this.swipeState.startX);
+                this.handlers.onSwipeChange?.(pageX - this.swipeState.startX);
             } else {
                 const id = getId();
                 if (id !== activeNodeId) {
@@ -279,7 +279,7 @@ class GestureStateMachine {
             // Only respect the finger that started a swipe. Any other lingering
             // gestures are ignored.
             if (this.swipeState.touchId === touchId) {
-                this.handlers.onSwipeEnd(pageX - this.swipeState.startX);
+                this.handlers.onSwipeEnd?.(pageX - this.swipeState.startX);
                 this.swipeState = null;
             }
         } else if (this.touchState[touchId]) {
@@ -313,7 +313,7 @@ class GestureStateMachine {
         // displacement.
         if (this.swipeState) {
             if (this.swipeState.touchId === touchId) {
-                this.handlers.onSwipeEnd(0);
+                this.handlers.onSwipeEnd?.(0);
                 this.swipeState = null;
             }
         } else if (this.touchState[touchId]) {

package/src/components/keypad-legacy/keypad-button.tsx

@@ -6,7 +6,7 @@ import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {BorderDirection, BorderStyles, KeyType} from "../../enums";
+import {BorderDirection, BorderStyles, KeyType, KeyTypes} from "../../enums";
 import {View} from "../../fake-react-native-web/index";
 import {
     wonderBlocksBlue,
@@ -40,7 +40,7 @@ interface Props extends ReduxProps {
     focused: boolean;
     popoverEnabled: boolean;
     type: KeyType;
-    icon: IconConfig;
+    icon?: IconConfig;
     style?: StyleType;
     onTouchCancel?: (evt: React.TouchEvent<HTMLDivElement>) => void;
     onTouchEnd?: (evt: React.TouchEvent<HTMLDivElement>) => void;
@@ -101,7 +101,7 @@ class KeypadButton extends React.PureComponent<Props> {
         // object. This method must be called whenever a property that
         // influences the possible outcomes of `this._getFocusStyle` and
         // `this._getButtonStyle` changes (such as `this.buttonSizeStyle`).
-        for (const type of Object.values(KeyType)) {
+        for (const type of KeyTypes) {
             css(View.styles.initial, ...this._getFocusStyle(type));
 
             for (const borders of Object.values(BorderStyles)) {
@@ -115,10 +115,7 @@ class KeypadButton extends React.PureComponent<Props> {
 
     _getFocusStyle = (type: KeyType) => {
         let focusBackgroundStyle;
-        if (
-            type === KeyType.INPUT_NAVIGATION ||
-            type === KeyType.KEYPAD_NAVIGATION
-        ) {
+        if (type === "INPUT_NAVIGATION" || type === "KEYPAD_NAVIGATION") {
             focusBackgroundStyle = styles.light;
         } else {
             focusBackgroundStyle = styles.bright;
@@ -131,25 +128,25 @@ class KeypadButton extends React.PureComponent<Props> {
         // Select the appropriate style for the button.
         let backgroundStyle;
         switch (type) {
-            case KeyType.EMPTY:
+            case "EMPTY":
                 backgroundStyle = styles.empty;
                 break;
 
-            case KeyType.MANY:
-            case KeyType.VALUE:
+            case "MANY":
+            case "VALUE":
                 backgroundStyle = styles.value;
                 break;
 
-            case KeyType.OPERATOR:
+            case "OPERATOR":
                 backgroundStyle = styles.operator;
                 break;
 
-            case KeyType.INPUT_NAVIGATION:
-            case KeyType.KEYPAD_NAVIGATION:
+            case "INPUT_NAVIGATION":
+            case "KEYPAD_NAVIGATION":
                 backgroundStyle = styles.control;
                 break;
 
-            case KeyType.ECHO:
+            case "ECHO":
                 backgroundStyle = null;
                 break;
         }
@@ -168,7 +165,7 @@ class KeypadButton extends React.PureComponent<Props> {
             styles.buttonBase,
             backgroundStyle,
             ...borderStyle,
-            type === KeyType.ECHO && styles.echo,
+            type === "ECHO" && styles.echo,
             this.buttonSizeStyle,
             // React Native allows you to set the 'style' props on user defined
             // components.
@@ -197,7 +194,7 @@ class KeypadButton extends React.PureComponent<Props> {
         // We render in the focus state if the key is focused, or if it's an
         // echo.
         const renderFocused =
-            (!disabled && focused) || popoverEnabled || type === KeyType.ECHO;
+            (!disabled && focused) || popoverEnabled || type === "ECHO";
         const buttonStyle = this._getButtonStyle(type, borders, style);
         const focusStyle = this._getFocusStyle(type);
         const iconWrapperStyle = [
@@ -218,9 +215,9 @@ class KeypadButton extends React.PureComponent<Props> {
             childKeys &&
             childKeys.length > 0 && <CornerDecal style={styles.decalInset} />;
 
-        if (type === KeyType.EMPTY) {
+        if (type === "EMPTY") {
             return <View style={buttonStyle} {...eventHandlers} />;
-        } else if (type === KeyType.MANY) {
+        } else if (type === "MANY") {
             // TODO(charlie): Make the long-press interaction accessible. See
             // the TODO in key-configs.js for more.
             const manyButtonA11yMarkup = {

package/src/components/keypad-legacy/many-keypad-button.tsx

@@ -6,7 +6,7 @@
 import * as React from "react";
 
 import KeyConfigs from "../../data/key-configs";
-import {KeyType} from "../../enums";
+import {IconType} from "../../enums";
 import {KeyConfig} from "../../types";
 
 import EmptyKeypadButton from "./empty-keypad-button";
@@ -35,8 +35,15 @@ class ManyKeypadButton extends React.Component<Props> {
         } else {
             const keyConfig: KeyConfig = {
                 id: "MANY",
-                type: KeyType.MANY,
+                type: "MANY",
                 childKeyIds: keys,
+                ariaLabel: keys
+                    .map((key) => KeyConfigs[key].ariaLabel)
+                    .join(", "),
+                icon: {
+                    type: IconType.SVG,
+                    data: "many",
+                },
             };
             return <TouchableKeypadButton keyConfig={keyConfig} {...rest} />;
         }

package/src/components/keypad-legacy/store/actions.ts

@@ -1,4 +1,4 @@
-import Keys from "../../../data/keys";
+import Key from "../../../data/keys";
 
 import type {
     Bound,
@@ -104,30 +104,6 @@ export const setCursor = (cursor: Cursor): SetCursorAction => {
 };
 
 // Gesture actions
-type OnSwipeChangeAction = {
-    type: "OnSwipeChange";
-    dx: number;
-};
-
-export const onSwipeChange = (dx: number): OnSwipeChangeAction => {
-    return {
-        type: "OnSwipeChange",
-        dx,
-    };
-};
-
-type OnSwipeEndAction = {
-    type: "OnSwipeEnd";
-    dx: number;
-};
-
-export const onSwipeEnd = (dx: number): OnSwipeEndAction => {
-    return {
-        type: "OnSwipeEnd",
-        dx,
-    };
-};
-
 type SetActiveNodesAction = {
     type: "SetActiveNodes";
     activeNodes: any;
@@ -144,13 +120,13 @@ export const setActiveNodes = (
 
 type PressKeyAction = {
     type: "PressKey";
-    key: Keys;
+    key: Key;
     initialBounds: Bound;
     inPopover: boolean;
 };
 
 export const pressKey = (
-    key: Keys,
+    key: Key,
     initialBounds: Bound,
     inPopover: any,
 ): PressKeyAction => {
@@ -170,7 +146,5 @@ export type Action =
     | RemoveEchoAction
     | SetKeyHandlerAction
     | SetCursorAction
-    | OnSwipeChangeAction
-    | OnSwipeEndAction
     | SetActiveNodesAction
     | PressKeyAction;

package/src/components/keypad-legacy/store/echo-reducer.ts

@@ -1,5 +1,5 @@
 import KeyConfigs from "../../../data/key-configs";
-import {EchoAnimationType, KeyType} from "../../../enums";
+import {EchoAnimationType} from "../../../enums";
 
 import type {Action} from "./actions";
 import type {EchoState} from "./types";
@@ -22,10 +22,7 @@ const echoReducer = function (
 
             // Add in the echo animation if the user performs a math
             // operation.
-            if (
-                keyConfig.type === KeyType.VALUE ||
-                keyConfig.type === KeyType.OPERATOR
-            ) {
+            if (keyConfig.type === "VALUE" || keyConfig.type === "OPERATOR") {
                 return {
                     ...state,
                     echoes: [

package/src/components/keypad-legacy/store/index.ts

@@ -1,9 +1,9 @@
 import * as Redux from "redux";
 
-import Keys from "../../../data/keys";
+import Key from "../../../data/keys";
 import GestureManager from "../gesture-manager";
 
-import {onSwipeChange, onSwipeEnd, setActiveNodes, pressKey} from "./actions";
+import {setActiveNodes, pressKey} from "./actions";
 import echoReducer from "./echo-reducer";
 import inputReducer from "./input-reducer";
 import keypadReducer from "./keypad-reducer";
@@ -23,17 +23,11 @@ export const createStore = () => {
                 swipeEnabled,
             },
             {
-                onSwipeChange: (dx: number) => {
-                    store.dispatch(onSwipeChange(dx));
-                },
-                onSwipeEnd: (dx: number) => {
-                    store.dispatch(onSwipeEnd(dx));
-                },
                 onActiveNodesChanged: (activeNodes: ActiveNodesObj) => {
                     store.dispatch(setActiveNodes(activeNodes));
                 },
                 onClick: (
-                    key: Keys,
+                    key: Key,
                     layoutProps: LayoutProps,
                     inPopover: boolean,
                 ) => {
@@ -43,7 +37,7 @@ export const createStore = () => {
                 },
             },
             [],
-            [Keys.BACKSPACE, Keys.UP, Keys.RIGHT, Keys.DOWN, Keys.LEFT],
+            ["BACKSPACE", "UP", "RIGHT", "DOWN", "LEFT"],
         );
     };
 

package/src/components/keypad-legacy/store/input-reducer.ts

@@ -1,5 +1,4 @@
 import KeyConfigs from "../../../data/key-configs";
-import {KeyType} from "../../../enums";
 import {CursorContext} from "../../input/cursor-contexts";
 
 import type {Cursor, KeyHandler} from "../../../types";
@@ -29,7 +28,7 @@ const inputReducer = function (
 
         case "PressKey":
             const keyConfig = KeyConfigs[action.key];
-            if (keyConfig.type !== KeyType.KEYPAD_NAVIGATION) {
+            if (keyConfig.type !== "KEYPAD_NAVIGATION") {
                 // This is probably an anti-pattern but it works for the
                 // case where we don't actually control the state but we
                 // still want to communicate with the other object

package/src/components/keypad-legacy/store/keypad-reducer.ts

@@ -1,5 +1,4 @@
 import KeyConfigs from "../../../data/key-configs";
-import Keys from "../../../data/keys";
 
 import {defaultKeypadType} from "./shared";
 
@@ -7,7 +6,7 @@ import type {Action} from "./actions";
 import type {KeypadState} from "./types";
 
 const initialKeypadState = {
-    extraKeys: ["x", "y", Keys.THETA, Keys.PI],
+    extraKeys: ["x", "y", "THETA", "PI"] as const,
     keypadType: defaultKeypadType,
     active: false,
 } as const;
@@ -46,7 +45,7 @@ const keypadReducer = function (
             // right actions when they occur. Hence, we figure off a
             // dismissal here rather than dispatching a dismiss action in
             // the first place.
-            if (keyConfig.id === Keys.DISMISS) {
+            if (keyConfig.id === "DISMISS") {
                 return keypadReducer(state, {type: "DismissKeypad"});
             }
             return state;

package/src/components/keypad-legacy/store/types.ts

@@ -1,4 +1,4 @@
-import Keys from "../../../data/keys";
+import Key from "../../../data/keys";
 import {LayoutMode, KeypadType} from "../../../enums";
 import GestureManager from "../gesture-manager";
 
@@ -36,7 +36,7 @@ export interface GestureState {
     // The current multikey popover?
     popover: Popover | null;
     // ?? Maybe which key is currently focused?
-    focus: Keys | null;
+    focus: Key | null;
     // Complex object that interprets touches as actions
     gestureManager: GestureManager;
 }