@khanacademy/math-input 14.1.1 → 14.2.1

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

@@ -0,0 +1,115 @@
+import {render, screen} from "@testing-library/react";
+import * as React from "react";
+import "@testing-library/jest-dom";
+
+import MobileKeypad from "../mobile-keypad";
+
+describe("mobile keypad", () => {
+    it("should render keypad when active", () => {
+        // Arrange
+        // Act
+        const {container} = render(
+            <MobileKeypad
+                onAnalyticsEvent={async () => undefined}
+                setKeypadActive={(keypadActive: boolean) => undefined}
+                keypadActive={true}
+            />,
+        );
+
+        // Assert
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should not render the keypad when not active", () => {
+        // Arrange
+        // Act
+        const {container} = render(
+            <MobileKeypad
+                onAnalyticsEvent={async () => undefined}
+                setKeypadActive={(keypadActive: boolean) => undefined}
+                keypadActive={false}
+            />,
+        );
+
+        // Assert
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should render the keypad when going from keypadActive=false to keypadActive=true", () => {
+        // Arrange
+        const {rerender} = render(
+            <MobileKeypad
+                onAnalyticsEvent={async () => undefined}
+                setKeypadActive={(keypadActive: boolean) => undefined}
+                keypadActive={false}
+            />,
+        );
+
+        expect(screen.queryAllByRole("button")).toHaveLength(0);
+
+        // Act
+        rerender(
+            <MobileKeypad
+                onAnalyticsEvent={async () => undefined}
+                setKeypadActive={(keypadActive: boolean) => undefined}
+                keypadActive={true}
+            />,
+        );
+
+        // Assert
+        expect(screen.queryAllByRole("tab")).not.toHaveLength(0);
+    });
+
+    it("should fire an 'opened' event when activated", () => {
+        // Arrange
+        const onAnalyticsEvent = jest.fn();
+
+        // Act
+        render(
+            <MobileKeypad
+                onAnalyticsEvent={onAnalyticsEvent}
+                setKeypadActive={(keypadActive: boolean) => undefined}
+                keypadActive={true}
+            />,
+        );
+
+        // Assert
+        expect(onAnalyticsEvent).toHaveBeenCalledWith({
+            type: "math-input:keypad-opened",
+            payload: {
+                virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2",
+            },
+        });
+    });
+
+    it("should fire an 'closed' event when dismissed", async () => {
+        const onAnalyticsEvent = jest.fn();
+
+        // Arrange
+        const {rerender, unmount} = render(
+            <MobileKeypad
+                onAnalyticsEvent={onAnalyticsEvent}
+                setKeypadActive={(keypadActive: boolean) => undefined}
+                keypadActive={true}
+            />,
+        );
+
+        // Act
+        rerender(
+            <MobileKeypad
+                onAnalyticsEvent={onAnalyticsEvent}
+                setKeypadActive={(keypadActive: boolean) => undefined}
+                keypadActive={false}
+            />,
+        );
+        unmount();
+
+        // Assert
+        expect(onAnalyticsEvent).toHaveBeenCalledWith({
+            type: "math-input:keypad-closed",
+            payload: {
+                virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2",
+            },
+        });
+    });
+});

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

@@ -1,5 +1,6 @@
 import {action} from "@storybook/addon-actions";
 import {withKnobs} from "@storybook/addon-knobs";
+import {INITIAL_VIEWPORTS} from "@storybook/addon-viewport";
 import * as React from "react";
 
 import GeometryInputPage from "./geometry-page";
@@ -13,7 +14,7 @@ export default {
         backgrounds: {
             values: [{name: "light background", value: "white", default: true}],
         },
-        viewport: {defaultViewport: "iphone6"},
+        viewport: {defaultViewport: "iphone6", viewports: INITIAL_VIEWPORTS},
     },
 };
 
@@ -22,7 +23,13 @@ export const NumericInput = (): React.ReactElement => (
 );
 
 export const PreAlgebraInput = (): React.ReactElement => (
-    <PrealgebraInputPage onClickKey={action("onClickKey")} />
+    <PrealgebraInputPage
+        onClickKey={action("onClickKey")}
+        preAlgebra={true}
+        logarithms={true}
+        basicRelations={true}
+        advancedRelations={true}
+    />
 );
 
 export const TrigonometryInput = (): React.ReactElement => (

package/src/components/keypad/keypad.tsx

@@ -74,7 +74,7 @@ function getAvailableTabs(props: Props): ReadonlyArray<KeypadPageType> {
 // The main (v2) Keypad. Use this component to present an accessible, onscreen
 // keypad to learners for entering math expressions.
 export default function Keypad(props: Props) {
-    // If we're using the Fractions keyapd, we want to default select that page
+    // If we're using the Fractions keypad, we want to default select that page
     // Otherwise, we want to default to the Numbers page
     const defaultSelectedPage = props.fractionsOnly ? "Fractions" : "Numbers";
     const [selectedPage, setSelectedPage] =
@@ -105,7 +105,7 @@ export default function Keypad(props: Props) {
         ? styles.fractionsGrid
         : styles.expressionGrid;
 
-    // This useeffect is only used to ensure that we can test the keypad in storybook
+    // This useEffect is only used to ensure that we can test the keypad in storybook
     useEffect(() => {
         setSelectedPage(defaultSelectedPage);
     }, [fractionsOnly, defaultSelectedPage]);

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

@@ -3,6 +3,7 @@ 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";
@@ -17,16 +18,7 @@ import type {
 import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-/**
- * 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).
- */
+const AnimationDurationInMS = 200;
 
 type Props = {
     onElementMounted?: (arg1: any) => void;
@@ -39,21 +31,28 @@ type Props = {
 
 type State = {
     containerWidth: number;
-    hasBeenActivated: boolean;
     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;
-    hasMounted = false;
 
     state: State = {
         containerWidth: 0,
-        hasBeenActivated: false,
     };
 
     componentDidMount() {
@@ -78,6 +77,15 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
                 );
             }
         }
+
+        this.props.onElementMounted?.({
+            activate: this.activate,
+            dismiss: this.dismiss,
+            configure: this.configure,
+            setCursor: this.setCursor,
+            setKeyHandler: this.setKeyHandler,
+            getDOMNode: this.getDOMNode,
+        });
     }
 
     componentWillUnmount() {
@@ -109,9 +117,6 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
 
     activate: () => void = () => {
         this.props.setKeypadActive(true);
-        this.setState({
-            hasBeenActivated: true,
-        });
     };
 
     dismiss: () => void = () => {
@@ -161,74 +166,64 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
 
     render(): React.ReactNode {
         const {keypadActive, style} = this.props;
-        const {hasBeenActivated, containerWidth, cursor, keypadConfig} =
-            this.state;
+        const {containerWidth, cursor, keypadConfig} = this.state;
 
         const containerStyle = [
-            // internal styles
             styles.keypadContainer,
-            keypadActive && styles.activeKeypadContainer,
             // styles passed as props
             ...(Array.isArray(style) ? style : [style]),
         ];
 
-        // If the keypad is yet to have ever been activated, we keep it invisible
-        // so as to avoid, e.g., the keypad flashing at the bottom of the page
-        // during the initial render.
-        // Done inline (dynamicStyle) since stylesheets might not be loaded yet.
-        let dynamicStyle = {};
-        if (!keypadActive && !hasBeenActivated) {
-            dynamicStyle = {visibility: "hidden"};
-        }
-
         const isExpression = keypadConfig?.keypadType === "EXPRESSION";
         const convertDotToTimes = keypadConfig?.times;
 
         return (
-            <View
-                style={containerStyle}
-                dynamicStyle={dynamicStyle}
-                forwardRef={this._containerRef}
-                ref={(element) => {
-                    if (!this.hasMounted && element) {
-                        // TODO(matthewc)[LC-1081]: clean up this weird
-                        // object and type the onElementMounted callback
-                        // Append the dispatch methods that we want to expose
-                        // externally to the returned React element.
-                        const elementWithDispatchMethods = {
-                            ...element,
-                            activate: this.activate,
-                            dismiss: this.dismiss,
-                            configure: this.configure,
-                            setCursor: this.setCursor,
-                            setKeyHandler: this.setKeyHandler,
-                            getDOMNode: this.getDOMNode,
-                        } as const;
-
-                        this.hasMounted = true;
-                        this.props.onElementMounted?.(
-                            elementWithDispatchMethods,
-                        );
-                    }
+            <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)",
+                    },
                 }}
             >
-                <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
-                />
-            </View>
+                {keypadActive ? (
+                    <View
+                        style={containerStyle}
+                        forwardRef={this._containerRef}
+                    >
+                        <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
+                        />
+                    </View>
+                ) : null}
+            </AphroditeCssTransitionGroup>
         );
     }
 }
@@ -239,14 +234,6 @@ const styles = StyleSheet.create({
         left: 0,
         right: 0,
         position: "fixed",
-        transitionProperty: "all",
-        transition: `200ms ease-out`,
-        visibility: "hidden",
-        transform: "translate3d(0, 100%, 0)",
-    },
-    activeKeypadContainer: {
-        transform: "translate3d(0, 0, 0)",
-        visibility: "visible",
     },
 });
 

package/src/components/keypad/navigation-pad.stories.tsx

@@ -1,3 +1,4 @@
+import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
 import NavigationPad from "./navigation-pad";
@@ -19,7 +20,7 @@ export default {
 export function basic() {
     return (
         <div style={{padding: 50}}>
-            <NavigationPad onClickKey={() => {}} />
+            <NavigationPad onClickKey={action("onClickKey")} />
         </div>
     );
 }

package/src/components/keypad-context.tsx

@@ -8,7 +8,7 @@
  * - Perseus Renderers (Server/Item/Article)
  */
 import * as React from "react";
-import {useState} from "react";
+import {useState, useMemo} from "react";
 
 import type {KeypadAPI, KeypadContextType} from "../types";
 import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core";
@@ -39,22 +39,31 @@ export function StatefulKeypadContextProvider(props: Props) {
     const [scrollableElement, setScrollableElement] =
         useState<HTMLElement | null>();
 
+    const memoizedValue = useMemo(
+        () => ({
+            keypadActive,
+            setKeypadActive,
+            keypadElement,
+            setKeypadElement,
+            renderer,
+            setRenderer,
+            scrollableElement,
+            setScrollableElement,
+        }),
+        [
+            keypadActive,
+            setKeypadActive,
+            keypadElement,
+            setKeypadElement,
+            renderer,
+            setRenderer,
+            scrollableElement,
+            setScrollableElement,
+        ],
+    );
+
     return (
-        <KeypadContext.Provider
-            value={{
-                setKeypadActive,
-                keypadActive,
-                setKeypadElement,
-                keypadElement,
-                setRenderer,
-                renderer,
-                // The scrollableElement options can likely be removed after
-                // the exercises-package is officially deprecated. They don't appear
-                // to be used anywhere except for the exercises-package and tests.
-                setScrollableElement,
-                scrollableElement,
-            }}
-        >
+        <KeypadContext.Provider value={memoizedValue}>
             {props.children}
         </KeypadContext.Provider>
     );

package/src/components/keypad-legacy/text-icon.tsx

@@ -45,7 +45,7 @@ const styles = StyleSheet.create({
     },
 
     base: {
-        fontFamily: "Proxima Nova",
+        fontFamily: "'Lato', sans-serif",
         fontSize: 25,
     },
 });

package/src/full-keypad.stories.tsx

@@ -87,7 +87,13 @@ export default {
 
 const Template: ComponentStory<typeof Keypad> = (
     args: PropsFor<typeof Keypad>,
-): React.ReactElement => <Keypad {...args} onClickKey={action("onClickKey")} />;
+): React.ReactElement => (
+    <Keypad
+        {...args}
+        onClickKey={action("onClickKey")}
+        onAnalyticsEvent={async (e) => action("onAnalyticsEvent")(e)}
+    />
+);
 
 export const Default = Template.bind({});