@khanacademy/math-input 7.0.0 → 8.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": "7.0.0",
+    "version": "8.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -19,7 +19,7 @@
     "source": "src/index.ts",
     "scripts": {},
     "dependencies": {
-        "@khanacademy/perseus-core": "0.0.2",
+        "@khanacademy/perseus-core": "0.1.0",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#32d9f351aaa68537170b3120a52e99b8def3a2c3",
         "performance-now": "^0.2.0"
     },

package/src/components/keypad/keypad.tsx

@@ -33,7 +33,7 @@ export type Props = {
     advancedRelations?: boolean;
 
     onClickKey: ClickKeyCallback;
-    sendEvent: SendEventFn;
+    sendEvent?: SendEventFn;
 };
 
 const defaultProps = {
@@ -89,7 +89,7 @@ export default function Keypad(props: Props) {
 
     useEffect(() => {
         if (!isMounted) {
-            sendEvent({
+            sendEvent?.({
                 type: "math-input:keypad-opened",
                 payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
             });
@@ -97,7 +97,7 @@ export default function Keypad(props: Props) {
         }
         return () => {
             if (isMounted) {
-                sendEvent({
+                sendEvent?.({
                     type: "math-input:keypad-closed",
                     payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
                 });

package/src/components/keypad-context.ts

@@ -0,0 +1,34 @@
+/**
+ * KeypadContext provides a way to the Keypad and (Server)ItemRenderer to
+ * communicate.
+ *
+ * The KeypadContext.Provider wraps the ExerciseFooter while KeypadContext.Consumer
+ * wraps each (Server)ItemRenderer render site and the Keypad rendered in the
+ * ExerciseFooter.
+ */
+import * as React from "react";
+
+import type {RendererInterface} from "@khanacademy/perseus-core";
+
+type KeypadContext = {
+    setKeypadElement: (keypadElement?: HTMLElement | null | undefined) => void;
+    keypadElement: HTMLElement | null | undefined;
+    setRenderer: (renderer?: RendererInterface | null | undefined) => void;
+    renderer: RendererInterface | null | undefined;
+    setScrollableElement: (
+        scrollableElement?: HTMLElement | null | undefined,
+    ) => void;
+    scrollableElement: HTMLElement | null | undefined;
+};
+
+// @ts-expect-error [FEI-5003] - TS2322 - Type 'Context<{ setKeypadElement: (keypadElement: HTMLElement | null | undefined) => void; keypadElement: null; setRenderer: (renderer: RendererInterface | null | undefined) => void; renderer: null; setScrollableElement: (scrollableElement: HTMLElement | ... 1 more ... | undefined) => void; scrollableElement: null; }>' is not assignable to type 'Context<KeypadContext>'.
+const context: React.Context<KeypadContext> = React.createContext({
+    setKeypadElement: (keypadElement) => {},
+    keypadElement: null,
+    setRenderer: (renderer) => {},
+    renderer: null,
+    setScrollableElement: (scrollableElement) => {},
+    scrollableElement: null,
+});
+
+export default context;

package/src/components/keypad-switch.tsx

@@ -0,0 +1,23 @@
+import {StyleType} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+
+import {MobileKeypad} from "./keypad";
+import LegacyKeypad from "./keypad-legacy";
+
+type Props = {
+    onElementMounted?: (arg1: any) => void;
+    onDismiss?: () => void;
+    style?: StyleType;
+
+    useV2Keypad?: boolean;
+};
+
+function KeypadSwitch(props: Props) {
+    const {useV2Keypad = false, ...rest} = props;
+
+    const KeypadComponent = useV2Keypad ? MobileKeypad : LegacyKeypad;
+
+    return <KeypadComponent {...rest} />;
+}
+
+export default KeypadSwitch;

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

@@ -1,9 +1,8 @@
 import * as React from "react";
 
-import MobileKeypad from "./components/keypad/mobile-keypad";
 import {KeypadAPI} from "./types";
 
-import {KeypadInput, KeypadType, LegacyKeypad} from "./index";
+import {KeypadInput, KeypadType, MobileKeypad} from "./index";
 
 export default {
     title: "Full Mobile MathInput",
@@ -16,7 +15,7 @@ export const Basic = () => {
     // Whether to use Expression or Fraction keypad
     const [expression, setExpression] = React.useState<boolean>(true);
     // Whether to use v1 or v2 keypad
-    const [legacyKeypad, setLegacyKeypad] = React.useState<boolean>(false);
+    const [v2Keypad, setV2Keypad] = React.useState<boolean>(true);
 
     React.useEffect(() => {
         keypadElement?.configure(
@@ -36,8 +35,8 @@ export const Basic = () => {
                 <button onClick={() => setExpression(!expression)}>
                     {`Use ${expression ? "Fraction" : "Expression"} Keypad`}
                 </button>
-                <button onClick={() => setLegacyKeypad(!legacyKeypad)}>
-                    {`Use ${legacyKeypad ? "New" : "Legacy"} Keypad`}
+                <button onClick={() => setV2Keypad(!v2Keypad)}>
+                    {`Use ${v2Keypad ? "Legacy" : "New"} Keypad`}
                 </button>
             </div>
 
@@ -56,23 +55,14 @@ export const Basic = () => {
                 }}
             />
 
-            {legacyKeypad ? (
-                <LegacyKeypad
-                    onElementMounted={(node) => {
-                        if (node) {
-                            setKeypadElement(node);
-                        }
-                    }}
-                />
-            ) : (
-                <MobileKeypad
-                    onElementMounted={(node) => {
-                        if (node) {
-                            setKeypadElement(node);
-                        }
-                    }}
-                />
-            )}
+            <MobileKeypad
+                onElementMounted={(node) => {
+                    if (node) {
+                        setKeypadElement(node);
+                    }
+                }}
+                useV2Keypad={v2Keypad}
+            />
         </div>
     );
 };

package/src/index.ts

@@ -24,11 +24,13 @@ export {CursorContext} from "./components/input/cursor-contexts";
 // Helper to get cursor context from MathField
 export {getCursorContext} from "./components/input/mathquill-helpers";
 
-// v1 Keypad
-export {default as LegacyKeypad} from "./components/keypad-legacy";
+// Wrapper around v1 and v2 mobile keypads to switch between them
+export {default as MobileKeypad} from "./components/keypad-switch";
+// Unwrapped v2 keypad for desktop
+export {default as DesktopKeypad} from "./components/keypad";
 
-// v2 Keypad
-export {default as Keypad, MobileKeypad} from "./components/keypad";
+// Context used to pass data/refs around
+export {default as KeypadContext} from "./components/keypad-context";
 
 // External API of the "Provided" keypad component
 export {keypadElementPropType} from "./components/prop-types";