@khanacademy/math-input 15.1.0 → 16.1.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "15.1.0",
+    "version": "16.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -20,7 +20,7 @@
     "source": "src/index.ts",
     "scripts": {},
     "dependencies": {
-        "@khanacademy/perseus-core": "1.3.0",
+        "@khanacademy/perseus-core": "1.4.0",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#48410e80d760bbd5105544d4a4ab459a28dc2cbc",
         "performance-now": "^0.2.0"
     },

package/src/components/__tests__/integration.test.tsx

@@ -12,8 +12,8 @@ import React, {useState} from "react";
 
 import {KeypadType} from "../../enums";
 import MathInput from "../input/math-input";
+import {MobileKeypad} from "../keypad";
 import {KeypadContext, StatefulKeypadContextProvider} from "../keypad-context";
-import KeypadSwitch from "../keypad-switch";
 
 import type {KeypadConfiguration} from "../../types";
 
@@ -60,11 +60,10 @@ function KeypadWithContext() {
         <KeypadContext.Consumer>
             {({setKeypadElement}) => {
                 return (
-                    <KeypadSwitch
+                    <MobileKeypad
                         onElementMounted={setKeypadElement}
                         onDismiss={() => {}}
                         onAnalyticsEvent={async () => {}}
-                        useV2Keypad
                     />
                 );
             }}

package/src/components/input/math-input.tsx

@@ -213,6 +213,7 @@ class MathInput extends React.Component<Props, State> {
         );
     }
 
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(props: Props) {
         if (this.props.keypadElement !== props.keypadElement) {
             this._clearKeypadBoundsCache();

package/src/components/input/math-wrapper.ts

@@ -26,12 +26,12 @@ import {
 } from "./mathquill-helpers";
 import {createMathField, mathQuillInstance} from "./mathquill-instance";
 
-import type Key from "../../data/keys";
-import type {Cursor} from "../../types";
 import type {
     MathFieldInterface,
     MathFieldUpdaterCallback,
 } from "./mathquill-types";
+import type Key from "../../data/keys";
+import type {Cursor} from "../../types";
 
 const mobileKeyTranslator: Record<Key, MathFieldUpdaterCallback> = {
     ...keyTranslator,

package/src/components/keypad/__tests__/mobile-keypad.test.tsx

@@ -2,14 +2,14 @@ import {render, screen} from "@testing-library/react";
 import * as React from "react";
 import "@testing-library/jest-dom";
 
-import MobileKeypad from "../mobile-keypad";
+import MobileKeypadInternals from "../mobile-keypad-internals";
 
 describe("mobile keypad", () => {
     it("should render keypad when active", () => {
         // Arrange
         // Act
         const {container} = render(
-            <MobileKeypad
+            <MobileKeypadInternals
                 onAnalyticsEvent={async () => undefined}
                 setKeypadActive={(keypadActive: boolean) => undefined}
                 keypadActive={true}
@@ -24,7 +24,7 @@ describe("mobile keypad", () => {
         // Arrange
         // Act
         const {container} = render(
-            <MobileKeypad
+            <MobileKeypadInternals
                 onAnalyticsEvent={async () => undefined}
                 setKeypadActive={(keypadActive: boolean) => undefined}
                 keypadActive={false}
@@ -38,7 +38,7 @@ describe("mobile keypad", () => {
     it("should render the keypad when going from keypadActive=false to keypadActive=true", () => {
         // Arrange
         const {rerender} = render(
-            <MobileKeypad
+            <MobileKeypadInternals
                 onAnalyticsEvent={async () => undefined}
                 setKeypadActive={(keypadActive: boolean) => undefined}
                 keypadActive={false}
@@ -49,7 +49,7 @@ describe("mobile keypad", () => {
 
         // Act
         rerender(
-            <MobileKeypad
+            <MobileKeypadInternals
                 onAnalyticsEvent={async () => undefined}
                 setKeypadActive={(keypadActive: boolean) => undefined}
                 keypadActive={true}
@@ -66,7 +66,7 @@ describe("mobile keypad", () => {
 
         // Act
         render(
-            <MobileKeypad
+            <MobileKeypadInternals
                 onAnalyticsEvent={onAnalyticsEvent}
                 setKeypadActive={(keypadActive: boolean) => undefined}
                 keypadActive={true}
@@ -87,7 +87,7 @@ describe("mobile keypad", () => {
 
         // Arrange
         const {rerender, unmount} = render(
-            <MobileKeypad
+            <MobileKeypadInternals
                 onAnalyticsEvent={onAnalyticsEvent}
                 setKeypadActive={(keypadActive: boolean) => undefined}
                 keypadActive={true}
@@ -96,7 +96,7 @@ describe("mobile keypad", () => {
 
         // Act
         rerender(
-            <MobileKeypad
+            <MobileKeypadInternals
                 onAnalyticsEvent={onAnalyticsEvent}
                 setKeypadActive={(keypadActive: boolean) => undefined}
                 keypadActive={false}

package/src/components/keypad/index.tsx

@@ -1,2 +1,2 @@
 export {default} from "./keypad";
-export {default as MobileKeypad} from "./mobile-keypad";
+export {MobileKeypad} from "./mobile-keypad";

package/src/components/keypad/mobile-keypad-internals.tsx

@@ -0,0 +1,240 @@
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+import {View} from "../../fake-react-native-web/index";
+import AphroditeCssTransitionGroup from "../aphrodite-css-transition-group";
+
+import Keypad from "./keypad";
+import {expandedViewThreshold} from "./utils";
+
+import type Key from "../../data/keys";
+import type {
+    Cursor,
+    KeypadConfiguration,
+    KeyHandler,
+    KeypadAPI,
+} from "../../types";
+import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
+const AnimationDurationInMS = 200;
+
+type Props = {
+    onElementMounted?: (arg1: any) => void;
+    onDismiss?: () => void;
+    style?: StyleType;
+    onAnalyticsEvent: AnalyticsEventHandlerFn;
+    setKeypadActive: (keypadActive: boolean) => void;
+    keypadActive: boolean;
+};
+
+type State = {
+    containerWidth: number;
+    keypadConfig?: KeypadConfiguration;
+    keyHandler?: KeyHandler;
+    cursor?: Cursor;
+};
+
+/**
+ * This is the v2 equivalent of v1's ProvidedKeypad. It follows the same
+ * external API so that it can be hot-swapped with the v1 keypad and
+ * is responsible for connecting the keypad with MathInput and the Renderer.
+ *
+ * Ideally this strategy of attaching methods on the class component for
+ * other components to call will be replaced props/callbacks since React
+ * doesn't support this type of code anymore (functional components
+ * can't have methods attached to them).
+ */
+class MobileKeypadInternals
+    extends React.Component<Props, State>
+    implements KeypadAPI
+{
+    _containerRef = React.createRef<HTMLDivElement>();
+    _containerResizeObserver: ResizeObserver | null = null;
+    _throttleResize = false;
+
+    state: State = {
+        containerWidth: 0,
+    };
+
+    componentDidMount() {
+        this._resize();
+
+        window.addEventListener("resize", this._throttleResizeHandler);
+        window.addEventListener(
+            "orientationchange",
+            this._throttleResizeHandler,
+        );
+
+        // LC-1213: some common older browsers (as of 2023-09-07)
+        // don't support ResizeObserver
+        if ("ResizeObserver" in window) {
+            this._containerResizeObserver = new window.ResizeObserver(
+                this._throttleResizeHandler,
+            );
+
+            if (this._containerRef.current) {
+                this._containerResizeObserver.observe(
+                    this._containerRef.current,
+                );
+            }
+        }
+
+        this.props.onElementMounted?.({
+            activate: this.activate,
+            dismiss: this.dismiss,
+            configure: this.configure,
+            setCursor: this.setCursor,
+            setKeyHandler: this.setKeyHandler,
+            getDOMNode: this.getDOMNode,
+        });
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener("resize", this._throttleResizeHandler);
+        window.removeEventListener(
+            "orientationchange",
+            this._throttleResizeHandler,
+        );
+        this._containerResizeObserver?.disconnect();
+    }
+
+    _resize = () => {
+        const containerWidth = this._containerRef.current?.clientWidth || 0;
+        this.setState({containerWidth});
+    };
+
+    _throttleResizeHandler = () => {
+        if (this._throttleResize) {
+            return;
+        }
+
+        this._throttleResize = true;
+
+        setTimeout(() => {
+            this._resize();
+            this._throttleResize = false;
+        }, 100);
+    };
+
+    activate: () => void = () => {
+        this.props.setKeypadActive(true);
+    };
+
+    dismiss: () => void = () => {
+        this.props.setKeypadActive(false);
+        this.props.onDismiss?.();
+    };
+
+    configure: (configuration: KeypadConfiguration, cb: () => void) => void = (
+        configuration,
+        cb,
+    ) => {
+        this.setState({keypadConfig: configuration});
+
+        // TODO(matthewc)[LC-1080]: this was brought in from v1's ProvidedKeypad.
+        // We need to investigate whether we still need this.
+        // HACK(charlie): In Perseus, triggering a focus causes the keypad to
+        // animate into view and re-configure. We'd like to provide the option
+        // to re-render the re-configured keypad before animating it into view,
+        // to avoid jank in the animation. As such, we support passing a
+        // callback into `configureKeypad`. However, implementing this properly
+        // would require middleware, etc., so we just hack it on with
+        // `setTimeout` for now.
+        setTimeout(() => cb && cb());
+    };
+
+    setCursor: (cursor: Cursor) => void = (cursor) => {
+        this.setState({cursor});
+    };
+
+    setKeyHandler: (keyHandler: KeyHandler) => void = (keyHandler) => {
+        this.setState({keyHandler});
+    };
+
+    getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode> = () => {
+        return ReactDOM.findDOMNode(this);
+    };
+
+    _handleClickKey(key: Key) {
+        if (key === "DISMISS") {
+            this.dismiss();
+            return;
+        }
+
+        const cursor = this.state.keyHandler?.(key);
+        this.setState({cursor});
+    }
+
+    render(): React.ReactNode {
+        const {keypadActive, style} = this.props;
+        const {containerWidth, cursor, keypadConfig} = this.state;
+
+        const containerStyle = [
+            styles.keypadContainer,
+            // styles passed as props
+            ...(Array.isArray(style) ? style : [style]),
+        ];
+
+        const isExpression = keypadConfig?.keypadType === "EXPRESSION";
+        const convertDotToTimes = keypadConfig?.times;
+
+        return (
+            <View style={containerStyle} forwardRef={this._containerRef}>
+                <AphroditeCssTransitionGroup
+                    transitionEnterTimeout={AnimationDurationInMS}
+                    transitionLeaveTimeout={AnimationDurationInMS}
+                    transitionStyle={{
+                        enter: {
+                            transform: "translate3d(0, 100%, 0)",
+                            transition: `${AnimationDurationInMS}ms ease-out`,
+                        },
+                        enterActive: {
+                            transform: "translate3d(0, 0, 0)",
+                        },
+                        leave: {
+                            transform: "translate3d(0, 0, 0)",
+                            transition: `${AnimationDurationInMS}ms ease-out`,
+                        },
+                        leaveActive: {
+                            transform: "translate3d(0, 100%, 0)",
+                        },
+                    }}
+                >
+                    {keypadActive ? (
+                        <Keypad
+                            onAnalyticsEvent={this.props.onAnalyticsEvent}
+                            extraKeys={keypadConfig?.extraKeys}
+                            onClickKey={(key) => this._handleClickKey(key)}
+                            cursorContext={cursor?.context}
+                            fractionsOnly={!isExpression}
+                            convertDotToTimes={convertDotToTimes}
+                            divisionKey={isExpression}
+                            trigonometry={isExpression}
+                            preAlgebra={isExpression}
+                            logarithms={isExpression}
+                            basicRelations={isExpression}
+                            advancedRelations={isExpression}
+                            expandedView={
+                                containerWidth > expandedViewThreshold
+                            }
+                            showDismiss
+                        />
+                    ) : null}
+                </AphroditeCssTransitionGroup>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    keypadContainer: {
+        bottom: 0,
+        left: 0,
+        right: 0,
+        position: "fixed",
+    },
+});
+
+export default MobileKeypadInternals;

package/src/components/keypad/mobile-keypad.tsx

@@ -1,237 +1,24 @@
-import {StyleSheet} from "aphrodite";
 import * as React from "react";
-import ReactDOM from "react-dom";
 
-import {View} from "../../fake-react-native-web/index";
-import AphroditeCssTransitionGroup from "../aphrodite-css-transition-group";
-
-import Keypad from "./keypad";
-import {expandedViewThreshold} from "./utils";
-
-import type Key from "../../data/keys";
-import type {
-    Cursor,
-    KeypadConfiguration,
-    KeyHandler,
-    KeypadAPI,
-} from "../../types";
-import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-const AnimationDurationInMS = 200;
-
-type Props = {
-    onElementMounted?: (arg1: any) => void;
-    onDismiss?: () => void;
-    style?: StyleType;
-    onAnalyticsEvent: AnalyticsEventHandlerFn;
-    setKeypadActive: (keypadActive: boolean) => void;
-    keypadActive: boolean;
-};
-
-type State = {
-    containerWidth: number;
-    keypadConfig?: KeypadConfiguration;
-    keyHandler?: KeyHandler;
-    cursor?: Cursor;
-};
-
-/**
- * This is the v2 equivalent of v1's ProvidedKeypad. It follows the same
- * external API so that it can be hot-swapped with the v1 keypad and
- * is responsible for connecting the keypad with MathInput and the Renderer.
- *
- * Ideally this strategy of attaching methods on the class component for
- * other components to call will be replaced props/callbacks since React
- * doesn't support this type of code anymore (functional components
- * can't have methods attached to them).
- */
-class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
-    _containerRef = React.createRef<HTMLDivElement>();
-    _containerResizeObserver: ResizeObserver | null = null;
-    _throttleResize = false;
-
-    state: State = {
-        containerWidth: 0,
-    };
-
-    componentDidMount() {
-        this._resize();
-
-        window.addEventListener("resize", this._throttleResizeHandler);
-        window.addEventListener(
-            "orientationchange",
-            this._throttleResizeHandler,
-        );
-
-        // LC-1213: some common older browsers (as of 2023-09-07)
-        // don't support ResizeObserver
-        if ("ResizeObserver" in window) {
-            this._containerResizeObserver = new window.ResizeObserver(
-                this._throttleResizeHandler,
-            );
-
-            if (this._containerRef.current) {
-                this._containerResizeObserver.observe(
-                    this._containerRef.current,
-                );
-            }
-        }
-
-        this.props.onElementMounted?.({
-            activate: this.activate,
-            dismiss: this.dismiss,
-            configure: this.configure,
-            setCursor: this.setCursor,
-            setKeyHandler: this.setKeyHandler,
-            getDOMNode: this.getDOMNode,
-        });
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener("resize", this._throttleResizeHandler);
-        window.removeEventListener(
-            "orientationchange",
-            this._throttleResizeHandler,
-        );
-        this._containerResizeObserver?.disconnect();
-    }
-
-    _resize = () => {
-        const containerWidth = this._containerRef.current?.clientWidth || 0;
-        this.setState({containerWidth});
-    };
-
-    _throttleResizeHandler = () => {
-        if (this._throttleResize) {
-            return;
-        }
-
-        this._throttleResize = true;
-
-        setTimeout(() => {
-            this._resize();
-            this._throttleResize = false;
-        }, 100);
-    };
-
-    activate: () => void = () => {
-        this.props.setKeypadActive(true);
-    };
-
-    dismiss: () => void = () => {
-        this.props.setKeypadActive(false);
-        this.props.onDismiss?.();
-    };
-
-    configure: (configuration: KeypadConfiguration, cb: () => void) => void = (
-        configuration,
-        cb,
-    ) => {
-        this.setState({keypadConfig: configuration});
-
-        // TODO(matthewc)[LC-1080]: this was brought in from v1's ProvidedKeypad.
-        // We need to investigate whether we still need this.
-        // HACK(charlie): In Perseus, triggering a focus causes the keypad to
-        // animate into view and re-configure. We'd like to provide the option
-        // to re-render the re-configured keypad before animating it into view,
-        // to avoid jank in the animation. As such, we support passing a
-        // callback into `configureKeypad`. However, implementing this properly
-        // would require middleware, etc., so we just hack it on with
-        // `setTimeout` for now.
-        setTimeout(() => cb && cb());
-    };
-
-    setCursor: (cursor: Cursor) => void = (cursor) => {
-        this.setState({cursor});
-    };
-
-    setKeyHandler: (keyHandler: KeyHandler) => void = (keyHandler) => {
-        this.setState({keyHandler});
-    };
-
-    getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode> = () => {
-        return ReactDOM.findDOMNode(this);
-    };
-
-    _handleClickKey(key: Key) {
-        if (key === "DISMISS") {
-            this.dismiss();
-            return;
-        }
-
-        const cursor = this.state.keyHandler?.(key);
-        this.setState({cursor});
-    }
-
-    render(): React.ReactNode {
-        const {keypadActive, style} = this.props;
-        const {containerWidth, cursor, keypadConfig} = this.state;
-
-        const containerStyle = [
-            styles.keypadContainer,
-            // styles passed as props
-            ...(Array.isArray(style) ? style : [style]),
-        ];
-
-        const isExpression = keypadConfig?.keypadType === "EXPRESSION";
-        const convertDotToTimes = keypadConfig?.times;
-
-        return (
-            <View style={containerStyle} forwardRef={this._containerRef}>
-                <AphroditeCssTransitionGroup
-                    transitionEnterTimeout={AnimationDurationInMS}
-                    transitionLeaveTimeout={AnimationDurationInMS}
-                    transitionStyle={{
-                        enter: {
-                            transform: "translate3d(0, 100%, 0)",
-                            transition: `${AnimationDurationInMS}ms ease-out`,
-                        },
-                        enterActive: {
-                            transform: "translate3d(0, 0, 0)",
-                        },
-                        leave: {
-                            transform: "translate3d(0, 0, 0)",
-                            transition: `${AnimationDurationInMS}ms ease-out`,
-                        },
-                        leaveActive: {
-                            transform: "translate3d(0, 100%, 0)",
-                        },
-                    }}
-                >
-                    {keypadActive ? (
-                        <Keypad
-                            onAnalyticsEvent={this.props.onAnalyticsEvent}
-                            extraKeys={keypadConfig?.extraKeys}
-                            onClickKey={(key) => this._handleClickKey(key)}
-                            cursorContext={cursor?.context}
-                            fractionsOnly={!isExpression}
-                            convertDotToTimes={convertDotToTimes}
-                            divisionKey={isExpression}
-                            trigonometry={isExpression}
-                            preAlgebra={isExpression}
-                            logarithms={isExpression}
-                            basicRelations={isExpression}
-                            advancedRelations={isExpression}
-                            expandedView={
-                                containerWidth > expandedViewThreshold
-                            }
-                            showDismiss
-                        />
-                    ) : null}
-                </AphroditeCssTransitionGroup>
-            </View>
-        );
-    }
+import {KeypadContext} from "../keypad-context";
+
+import MobileKeypadInternals from "./mobile-keypad-internals";
+
+type Props = Omit<
+    React.ComponentProps<typeof MobileKeypadInternals>,
+    "keypadActive" | "setKeypadActive"
+>;
+
+export function MobileKeypad(props: Props) {
+    return (
+        <KeypadContext.Consumer>
+            {({keypadActive, setKeypadActive}) => (
+                <MobileKeypadInternals
+                    {...props}
+                    keypadActive={keypadActive}
+                    setKeypadActive={setKeypadActive}
+                />
+            )}
+        </KeypadContext.Consumer>
+    );
 }
-
-const styles = StyleSheet.create({
-    keypadContainer: {
-        bottom: 0,
-        left: 0,
-        right: 0,
-        position: "fixed",
-    },
-});
-
-export default MobileKeypad;

package/src/data/key-configs.ts

@@ -5,9 +5,9 @@ import * as i18n from "@khanacademy/wonder-blocks-i18n";
 
 import {IconType} from "../enums";
 
+import type Key from "./keys";
 import type {KeyType} from "../enums";
 import type {KeyConfig} from "../types";
-import type Key from "./keys";
 
 type KeyConfigMapper = (args: {
     key: Key;

package/src/full-mobile-input.stories.tsx

@@ -93,7 +93,6 @@ const Basic = ({keypadElement, setKeypadElement}) => {
                     }
                 }}
                 onDismiss={() => {}}
-                useV2Keypad={v2Keypad}
                 onAnalyticsEvent={async (e) => action("onAnalyticsEvent")(e)}
             />
         </div>

package/src/index.ts

@@ -27,7 +27,7 @@ export {CursorContext} from "./components/input/cursor-contexts";
 export {getCursorContext} from "./components/input/mathquill-helpers";
 
 // Wrapper around v1 and v2 mobile keypads to switch between them
-export {default as MobileKeypad} from "./components/keypad-switch";
+export {MobileKeypad} from "./components/keypad";
 // Unwrapped v2 keypad for desktop
 export {default as DesktopKeypad} from "./components/keypad";