@khanacademy/math-input 3.0.0 → 4.1.0

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+import Keys from "../../../data/key-configs";
+import Key from "../../../data/keys";
+import {KeypadPageContainer, KeypadButton} from "../keypad-page-items";
+
+type Props = {
+    extraKeys: ReadonlyArray<Key>;
+    onClickKey: (keyConfig: string) => void;
+};
+
+export default class ExtrasPage extends React.Component<Props> {
+    render(): React.ReactNode {
+        const {extraKeys, onClickKey} = this.props;
+        return (
+            <KeypadPageContainer>
+                {extraKeys.map((key) => (
+                    <KeypadButton
+                        key={key}
+                        keyConfig={Keys[key]}
+                        onClickKey={onClickKey}
+                    />
+                ))}
+            </KeypadPageContainer>
+        );
+    }
+}

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

@@ -46,7 +46,7 @@ export default class GeometryPage extends React.Component<Props> {
                 />
                 {/* Row 2 */}
                 <SecondaryKeypadButton
-                    keyConfig={Keys.X}
+                    keyConfig={Keys.x}
                     onClickKey={onClickKey}
                     style={{
                         gridColumn: 5,

package/src/components/keypad/index.tsx

@@ -1,28 +1,41 @@
+import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import Key from "../../data/keys";
 import Tabbar from "../tabbar/tabbar";
+import {TabbarItemType} from "../tabbar/types";
 
+import ExtrasPage from "./extras-page";
 import GeometryPage from "./geometry-page";
 import NumbersPage from "./numbers-page";
 import {NumbersPageOptions} from "./numbers-page/types";
 import OperatorsPage from "./operators-page";
 import {OperatorsButtonSets} from "./operators-page/types";
 
-import type {TabbarItemType} from "../tabbar/types";
-
 export type Props = {
     onClickKey: (keyConfig: string) => void;
     trigonometry?: boolean;
+    extraKeys: ReadonlyArray<Key>;
 } & OperatorsButtonSets &
     NumbersPageOptions;
+
 type State = {
     selectedPage: TabbarItemType;
 };
 
-const allPages = function (props: Props): React.ReactElement {
+type DefaultProps = {
+    extraKeys: Props["extraKeys"];
+};
+
+function allPages(props: Props): ReadonlyArray<TabbarItemType> {
     const pages: Array<TabbarItemType> = ["Numbers"];
 
+    if (props.extraKeys?.length) {
+        pages.push("Extras");
+    }
+
     if (
         // OperatorsButtonSets
         props.preAlgebra ||
@@ -32,17 +45,23 @@ const allPages = function (props: Props): React.ReactElement {
     ) {
         pages.push("Operators");
     }
+
     if (props.trigonometry) {
         pages.push("Geometry");
     }
-    // @ts-expect-error [FEI-5003] - TS2739 - Type 'TabbarItemType[]' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>': type, props, key
+
     return pages;
-};
+}
 
 export default class Keypad extends React.Component<Props, State> {
     state: State = {
         selectedPage: "Numbers",
     };
+
+    static defaultProps: DefaultProps = {
+        extraKeys: [],
+    };
+
     render(): React.ReactNode {
         const {selectedPage} = this.state;
 
@@ -51,13 +70,15 @@ export default class Keypad extends React.Component<Props, State> {
         return (
             <View>
                 <Tabbar
-                    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                     items={availablePages}
-                    onSelect={(tabbarItem: TabbarItemType) => {
+                    selectedItem={selectedPage}
+                    onSelectItem={(tabbarItem: TabbarItemType) => {
                         this.setState({selectedPage: tabbarItem});
                     }}
+                    style={styles.tabbar}
                 />
                 {selectedPage === "Numbers" && <NumbersPage {...this.props} />}
+                {selectedPage === "Extras" && <ExtrasPage {...this.props} />}
                 {selectedPage === "Operators" && (
                     <OperatorsPage {...this.props} />
                 )}
@@ -68,3 +89,9 @@ export default class Keypad extends React.Component<Props, State> {
         );
     }
 }
+
+const styles = StyleSheet.create({
+    tabbar: {
+        background: Color.white,
+    },
+});

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

@@ -0,0 +1,82 @@
+import Color from "@khanacademy/wonder-blocks-color";
+import {Popover} from "@khanacademy/wonder-blocks-popover";
+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"}}>
+            <Popover
+                content={
+                    <div>
+                        <Keypad
+                            extraKeys={["a", "b", "c"]}
+                            onClickKey={handleClickKey}
+                            advancedRelations
+                            basicRelations
+                            divisionKey
+                            logarithms
+                            multiplicationDot
+                            preAlgebra
+                            trigonometry
+                        />
+                    </div>
+                }
+                dismissEnabled
+            >
+                <div
+                    style={{
+                        width: "100%",
+                        marginBottom: "1em",
+                        border: `1px solid ${Color.offBlack16}`,
+                    }}
+                    ref={mathquillWrapperRef}
+                />
+            </Popover>
+        </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 = {
@@ -46,6 +47,7 @@ export const KeypadButton = ({
         onPress={() => onClickKey(keyConfig.id)}
         tintColor={tintColor}
         style={style}
+        ariaLabel={keyConfig.id}
     >
         <ButtonAsset id={keyConfig.id} />
     </Button>

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;