@khanacademy/math-input 6.0.0 → 6.0.2

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "6.0.0",
+    "version": "6.0.2",
     "publishConfig": {
         "access": "public"
     },
@@ -19,7 +19,7 @@
     "source": "src/index.ts",
     "scripts": {},
     "dependencies": {
-        "@khanacademy/perseus-core": "0.0.1",
+        "@khanacademy/perseus-core": "0.0.2",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992",
         "performance-now": "^0.2.0"
     },

package/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx

@@ -1,3 +1,4 @@
+import {PerseusAnalyticsEvent} from "@khanacademy/perseus-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Popover} from "@khanacademy/wonder-blocks-popover";
 import {render, screen} from "@testing-library/react";
@@ -14,11 +15,15 @@ import Keypad from "../index";
 
 type Props = {
     onChangeMathInput: (mathInputTex: string) => void;
+    keypadClosed?: boolean;
+    sendEvent?: (event: PerseusAnalyticsEvent) => Promise<void>;
 };
 
 function V2KeypadWithMathquill(props: Props) {
     const mathFieldWrapperRef = React.useRef<HTMLDivElement>(null);
     const [mathField, setMathField] = React.useState<MathFieldInterface>();
+    const {onChangeMathInput, keypadClosed, sendEvent} = props;
+    const [keypadOpen, setKeypadOpen] = React.useState<boolean>(!keypadClosed);
 
     React.useEffect(() => {
         if (!mathField && mathFieldWrapperRef.current) {
@@ -29,7 +34,7 @@ function V2KeypadWithMathquill(props: Props) {
                         ...baseConfig,
                         handlers: {
                             edit: (mathField) => {
-                                props.onChangeMathInput(mathField.latex());
+                                onChangeMathInput(mathField.latex());
                             },
                         },
                     };
@@ -37,13 +42,17 @@ function V2KeypadWithMathquill(props: Props) {
             );
             setMathField(mathFieldInstance);
         }
-    }, [mathField, props]);
+    }, [mathField, onChangeMathInput]);
 
     function handleClickKey(key: Key) {
         if (!mathField) {
             return;
         }
 
+        if (key === "DISMISS") {
+            setKeypadOpen(false);
+        }
+
         const mathFieldCallback = keyTranslator[key];
         if (mathFieldCallback) {
             mathFieldCallback(mathField, key);
@@ -65,12 +74,13 @@ function V2KeypadWithMathquill(props: Props) {
                             multiplicationDot
                             preAlgebra
                             trigonometry
-                            sendEvent={async () => {}}
+                            sendEvent={sendEvent ? sendEvent : async () => {}}
+                            showDismiss
                         />
                     </div>
                 }
                 dismissEnabled
-                opened
+                opened={keypadOpen}
             >
                 <div
                     style={{
@@ -81,6 +91,12 @@ function V2KeypadWithMathquill(props: Props) {
                     ref={mathFieldWrapperRef}
                 />
             </Popover>
+            <button
+                aria-label="Keypad toggle"
+                onClick={() => setKeypadOpen(!keypadOpen)}
+            >
+                {keypadOpen ? "close keypad" : "open keypad"}
+            </button>
         </div>
     );
 }
@@ -231,4 +247,47 @@ describe("Keypad v2 with MathQuill", () => {
 
         expect(mockMathInputCallback).toHaveBeenLastCalledWith("");
     });
+
+    // Keypad event tests
+    it("fires the keypad open event on open", () => {
+        // Arrange
+        const mockSendEvent = jest.fn();
+        render(
+            <V2KeypadWithMathquill
+                onChangeMathInput={() => {}}
+                keypadClosed={true}
+                sendEvent={mockSendEvent}
+            />,
+        );
+
+        // Act
+        userEvent.click(screen.getByRole("button", {name: "Keypad toggle"}));
+
+        // Assert
+        expect(mockSendEvent).toHaveBeenLastCalledWith({
+            type: "math-input:keypad-opened",
+            payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
+        });
+    });
+
+    // Keypad event tests
+    it("fires the keypad open event on close", () => {
+        // Arrange
+        const mockSendEvent = jest.fn();
+        render(
+            <V2KeypadWithMathquill
+                onChangeMathInput={() => {}}
+                sendEvent={mockSendEvent}
+            />,
+        );
+
+        // Act
+        userEvent.click(screen.getByRole("button", {name: "Keypad toggle"}));
+
+        // Assert
+        expect(mockSendEvent).toHaveBeenLastCalledWith({
+            type: "math-input:keypad-closed",
+            payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
+        });
+    });
 });

package/src/components/keypad/index.tsx

@@ -2,6 +2,7 @@ import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
+import {useEffect} from "react";
 
 import Key from "../../data/keys";
 import {ClickKeyCallback} from "../../types";
@@ -68,6 +69,7 @@ function allPages(props: Props): ReadonlyArray<TabbarItemType> {
 export default function Keypad(props: Props) {
     const [selectedPage, setSelectedPage] =
         React.useState<TabbarItemType>("Numbers");
+    const [isMounted, setIsMounted] = React.useState<boolean>(false);
 
     const availablePages = allPages(props);
 
@@ -82,8 +84,28 @@ export default function Keypad(props: Props) {
         basicRelations,
         advancedRelations,
         showDismiss,
+        sendEvent,
     } = props;
 
+    useEffect(() => {
+        if (!isMounted) {
+            sendEvent({
+                type: "math-input:keypad-opened",
+                payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
+            });
+            setIsMounted(true);
+        }
+        return () => {
+            if (isMounted) {
+                sendEvent({
+                    type: "math-input:keypad-closed",
+                    payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
+                });
+                setIsMounted(false);
+            }
+        };
+    }, [sendEvent, isMounted]);
+
     return (
         <View>
             <Tabbar

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

@@ -47,13 +47,7 @@ export const KeypadButton = ({
             >
                 {({hovered, focused, pressed}) => {
                     return (
-                        <View
-                            style={[
-                                styles.outerBoxBase,
-                                hovered && styles.outerBoxHover,
-                                pressed && styles.outerBoxPressed,
-                            ]}
-                        >
+                        <View style={[styles.outerBoxBase]}>
                             <View
                                 style={[
                                     styles.base,
@@ -91,7 +85,7 @@ const styles = StyleSheet.create({
         padding: 1,
     },
     hovered: {
-        border: `1px solid ${Color.blue}`,
+        border: `2px solid ${Color.blue}`,
         padding: 1,
         boxShadow: "none",
     },
@@ -114,15 +108,13 @@ const styles = StyleSheet.create({
         borderRadius: 7,
         border: "2px solid transparent",
     },
-    outerBoxHover: {
-        border: `2px solid ${Color.blue}`,
-    },
-    outerBoxPressed: {
-        border: "2px solid #1B50B3",
-    },
     clickable: {
         width: "100%",
         height: "100%",
         boxSizing: "border-box",
+
+        ":focus": {
+            outline: `none`,
+        },
     },
 });

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

@@ -18,6 +18,7 @@ export default {
 export function V2KeypadWithMathquill() {
     const mathFieldWrapperRef = React.useRef<HTMLDivElement>(null);
     const [mathField, setMathField] = React.useState<MathFieldInterface>();
+    const [keypadOpen, setKeypadOpen] = React.useState<boolean>(true);
     const [cursorContext, setCursorContext] = React.useState<
         typeof CursorContext[keyof typeof CursorContext]
     >(CursorContext.NONE);
@@ -44,6 +45,10 @@ export function V2KeypadWithMathquill() {
             return;
         }
 
+        if (key === "DISMISS") {
+            setKeypadOpen(false);
+        }
+
         const mathFieldCallback = keyTranslator[key];
         if (mathFieldCallback) {
             mathFieldCallback(mathField, key);
@@ -79,11 +84,12 @@ export function V2KeypadWithMathquill() {
                                 // eslint-disable-next-line no-console
                                 console.log("Send Event:", event);
                             }}
+                            showDismiss
                         />
                     </PopoverContentCore>
                 }
                 dismissEnabled
-                opened
+                opened={keypadOpen}
             >
                 <div
                     style={{
@@ -94,6 +100,9 @@ export function V2KeypadWithMathquill() {
                     ref={mathFieldWrapperRef}
                 />
             </Popover>
+            <button onClick={() => setKeypadOpen(!keypadOpen)}>
+                {keypadOpen ? "close keypad" : "open keypad"}
+            </button>
         </div>
     );
 }

package/src/components/tabbar/item.tsx

@@ -50,6 +50,11 @@ const styles = StyleSheet.create({
         height: 3,
         marginLeft: 3,
     },
+    clickable: {
+        ":focus": {
+            outline: `none`,
+        },
+    },
 });
 
 function imageTintColor(
@@ -84,6 +89,7 @@ class TabbarItem extends React.Component<Props> {
                 onClick={onClick}
                 disabled={itemState === "disabled"}
                 aria-label={itemType}
+                style={styles.clickable}
                 aria-selected={itemState === "active"}
                 role="tab"
             >