@khanacademy/math-input 13.1.0 → 14.0.0

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 import type { CursorContext } from "./components/input/cursor-contexts";
 import type Key from "./data/keys";
 import type { BorderDirection, EchoAnimationType, IconType, KeyType, KeypadType } from "./enums";
+import type { KeypadContextRendererInterface } from "@khanacademy/perseus-core";
 import type * as React from "react";
 import type ReactDOM from "react-dom";
 export type Border = Partial<ReadonlyArray<BorderDirection>>;
@@ -74,4 +75,14 @@ export interface KeypadAPI {
     setKeyHandler: (keyHandler: KeyHandler) => void;
     getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode>;
 }
+export type KeypadContextType = {
+    setKeypadActive: (keypadActive: boolean) => void;
+    keypadActive: boolean;
+    setKeypadElement: (keypadElement?: KeypadAPI) => void;
+    keypadElement: KeypadAPI | null | undefined;
+    setRenderer: (renderer?: KeypadContextRendererInterface | null | undefined) => void;
+    renderer: KeypadContextRendererInterface | null | undefined;
+    setScrollableElement: (scrollableElement?: HTMLElement | null | undefined) => void;
+    scrollableElement: HTMLElement | null | undefined;
+};
 export {};

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "13.1.0",
+    "version": "14.0.0",
     "publishConfig": {
         "access": "public"
     },

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

@@ -12,10 +12,10 @@ import React, {useState} from "react";
 
 import {KeypadType} from "../../enums";
 import MathInput from "../input/math-input";
-import KeypadContext from "../keypad-context";
+import {KeypadContext, StatefulKeypadContextProvider} from "../keypad-context";
 import KeypadSwitch from "../keypad-switch";
 
-import type {KeypadAPI, KeypadConfiguration} from "../../types";
+import type {KeypadConfiguration} from "../../types";
 
 const MQ = MathQuill.getInterface(2);
 
@@ -73,25 +73,11 @@ function KeypadWithContext() {
 }
 
 function ConnectedMathInput({keypadConfiguration = defaultConfiguration}) {
-    const [keypadElement, setKeypadElement] = useState<KeypadAPI | null>();
-    const [renderer, setRenderer] = useState<any>(null);
-    const [scrollableElement, setScrollableElement] =
-        useState<HTMLElement | null>();
-
     return (
-        <KeypadContext.Provider
-            value={{
-                setKeypadElement,
-                keypadElement,
-                setRenderer,
-                renderer,
-                setScrollableElement,
-                scrollableElement,
-            }}
-        >
+        <StatefulKeypadContextProvider>
             <InputWithContext keypadConfiguration={keypadConfiguration} />
             <KeypadWithContext />
-        </KeypadContext.Provider>
+        </StatefulKeypadContextProvider>
     );
 }
 

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

@@ -4,6 +4,7 @@ import ReactDOM from "react-dom";
 
 import {View} from "../../fake-react-native-web/index";
 
+import Keypad from "./keypad";
 import {expandedViewThreshold} from "./utils";
 
 import type Key from "../../data/keys";
@@ -16,8 +17,6 @@ import type {
 import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-import Keypad from "./index";
-
 /**
  * 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
@@ -34,10 +33,11 @@ type Props = {
     onDismiss?: () => void;
     style?: StyleType;
     onAnalyticsEvent: AnalyticsEventHandlerFn;
+    setKeypadActive: (keypadActive: boolean) => void;
+    keypadActive: boolean;
 };
 
 type State = {
-    active: boolean;
     containerWidth: number;
     hasBeenActivated: boolean;
     keypadConfig?: KeypadConfiguration;
@@ -52,7 +52,6 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
     hasMounted = false;
 
     state: State = {
-        active: false,
         containerWidth: 0,
         hasBeenActivated: false,
     };
@@ -109,16 +108,15 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
     };
 
     activate: () => void = () => {
+        this.props.setKeypadActive(true);
         this.setState({
-            active: true,
             hasBeenActivated: true,
         });
     };
 
     dismiss: () => void = () => {
-        this.setState({active: false}, () => {
-            this.props.onDismiss?.();
-        });
+        this.props.setKeypadActive(false);
+        this.props.onDismiss?.();
     };
 
     configure: (configuration: KeypadConfiguration, cb: () => void) => void = (
@@ -162,14 +160,14 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
     }
 
     render(): React.ReactNode {
-        const {style} = this.props;
-        const {active, hasBeenActivated, containerWidth, cursor, keypadConfig} =
+        const {keypadActive, style} = this.props;
+        const {hasBeenActivated, containerWidth, cursor, keypadConfig} =
             this.state;
 
         const containerStyle = [
             // internal styles
             styles.keypadContainer,
-            active && styles.activeKeypadContainer,
+            keypadActive && styles.activeKeypadContainer,
             // styles passed as props
             ...(Array.isArray(style) ? style : [style]),
         ];
@@ -179,7 +177,7 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
         // during the initial render.
         // Done inline (dynamicStyle) since stylesheets might not be loaded yet.
         let dynamicStyle = {};
-        if (!active && !hasBeenActivated) {
+        if (!keypadActive && !hasBeenActivated) {
             dynamicStyle = {visibility: "hidden"};
         }
 

package/src/components/keypad-context.tsx

@@ -0,0 +1,61 @@
+/**
+ * KeypadContext provides a way to the Keypad and Perseus Renderers to
+ * communicate.
+ *
+ * The StatefulKeypadContextProvider wraps the application
+ * while KeypadContext.Consumer wraps things that need this state:
+ * - mobile keypad usages
+ * - Perseus Renderers (Server/Item/Article)
+ */
+import * as React from "react";
+import {useState} from "react";
+
+import type {KeypadAPI, KeypadContextType} from "../types";
+import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core";
+
+// @ts-expect-error - 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>'.
+export const KeypadContext: React.Context<KeypadContextType> =
+    React.createContext({
+        setKeypadActive: (keypadActive) => {},
+        keypadActive: false,
+        setKeypadElement: (keypadElement) => {},
+        keypadElement: null,
+        setRenderer: (renderer) => {},
+        renderer: null,
+        setScrollableElement: (scrollableElement) => {},
+        scrollableElement: null,
+    });
+
+type Props = React.PropsWithChildren<unknown>;
+
+export function StatefulKeypadContextProvider(props: Props) {
+    // whether or not to display the keypad
+    const [keypadActive, setKeypadActive] = useState<boolean>(false);
+    // used to communicate between the keypad and the Renderer
+    const [keypadElement, setKeypadElement] = useState<KeypadAPI | null>();
+    // this is a KeypadContextRendererInterface from Perseus
+    const [renderer, setRenderer] =
+        useState<KeypadContextRendererInterface | null>();
+    const [scrollableElement, setScrollableElement] =
+        useState<HTMLElement | null>();
+
+    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,
+            }}
+        >
+            {props.children}
+        </KeypadContext.Provider>
+    );
+}

package/src/components/keypad-legacy/provided-keypad.tsx

@@ -22,6 +22,8 @@ import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 type Props = {
+    setKeypadActive: (keypadActive: boolean) => void;
+    keypadActive: boolean;
     onElementMounted?: (arg1: any) => void;
     onDismiss?: () => void;
     style?: StyleType;
@@ -37,12 +39,22 @@ class ProvidedKeypad extends React.Component<Props> implements KeypadAPI {
         this.store = createStore();
     }
 
+    componentDidUpdate(prevProps) {
+        if (this.props.keypadActive && !prevProps.keypadActive) {
+            this.store.dispatch(activateKeypad());
+        }
+
+        if (!this.props.keypadActive && prevProps.keypadActive) {
+            this.store.dispatch(dismissKeypad());
+        }
+    }
+
     activate: () => void = () => {
-        this.store.dispatch(activateKeypad());
+        this.props.setKeypadActive(true);
     };
 
     dismiss: () => void = () => {
-        this.store.dispatch(dismissKeypad());
+        this.props.setKeypadActive(false);
     };
 
     configure: (configuration: KeypadConfiguration, cb: () => void) => void = (

package/src/components/keypad-switch.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import {MobileKeypad} from "./keypad";
+import {KeypadContext} from "./keypad-context";
 import LegacyKeypad from "./keypad-legacy";
 
 import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
@@ -23,7 +24,19 @@ function KeypadSwitch(props: Props) {
     // Note: Although we pass the "onAnalyticsEvent" to both keypad components,
     // only the current one uses it. There's no point in instrumenting the
     // legacy keypad given that it's on its way out the door.
-    return <KeypadComponent {...rest} />;
+    return (
+        <KeypadContext.Consumer>
+            {({setKeypadActive, keypadActive}) => {
+                return (
+                    <KeypadComponent
+                        {...rest}
+                        keypadActive={keypadActive}
+                        setKeypadActive={setKeypadActive}
+                    />
+                );
+            }}
+        </KeypadContext.Consumer>
+    );
 }
 
 export default KeypadSwitch;

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

@@ -1,9 +1,13 @@
 import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
-import type {KeypadAPI} from "./types";
-
-import {KeypadInput, KeypadType, MobileKeypad} from "./index";
+import {
+    KeypadInput,
+    KeypadType,
+    MobileKeypad,
+    StatefulKeypadContextProvider,
+    KeypadContext,
+} from "./index";
 
 export default {
     title: "math-input/Full Mobile MathInput",
@@ -19,32 +23,19 @@ export default {
     },
 };
 
-export const Basic = () => {
+const Basic = ({keypadElement, setKeypadElement}) => {
     const [value, setValue] = React.useState("");
-    // Reference to the keypad
-    const [keypadElement, setKeypadElement] = React.useState<KeypadAPI>();
     // Whether to use Expression or Fraction keypad
     const [expression, setExpression] = React.useState<boolean>(false);
     // Whether to use CDOT or TIMES
     const [times, setTimes] = React.useState<boolean>(true);
     // Whether to use v1 or v2 keypad
     const [v2Keypad, setV2Keypad] = React.useState<boolean>(true);
-    // Whether the keypad is open or not
-    const [keypadOpen, setKeypadOpen] = React.useState<boolean>(false);
 
     const input = React.useRef<KeypadInput>(null);
 
     const timesLabel = times ? "CDOT" : "TIMES";
 
-    const toggleKeypad = () => {
-        if (keypadOpen) {
-            keypadElement?.dismiss();
-        } else {
-            keypadElement?.activate();
-        }
-        setKeypadOpen(!keypadOpen);
-    };
-
     React.useEffect(() => {
         keypadElement?.configure(
             {
@@ -73,9 +64,6 @@ export const Basic = () => {
                     <button onClick={() => setV2Keypad(!v2Keypad)}>
                         {`Use ${v2Keypad ? "Legacy" : "New"} Keypad`}
                     </button>
-                    <button onClick={() => toggleKeypad()}>
-                        {`Toggle Keypad`}
-                    </button>
                     <button onClick={() => setTimes(!times)}>
                         {`Toggle to ` + timesLabel}
                     </button>
@@ -111,3 +99,18 @@ export const Basic = () => {
         </div>
     );
 };
+
+export function Wrapped() {
+    return (
+        <StatefulKeypadContextProvider>
+            <KeypadContext.Consumer>
+                {({keypadElement, setKeypadElement}) => (
+                    <Basic
+                        keypadElement={keypadElement}
+                        setKeypadElement={setKeypadElement}
+                    />
+                )}
+            </KeypadContext.Consumer>
+        </StatefulKeypadContextProvider>
+    );
+}

package/src/index.ts

@@ -30,7 +30,10 @@ export {default as MobileKeypad} from "./components/keypad-switch";
 export {default as DesktopKeypad} from "./components/keypad";
 
 // Context used to pass data/refs around
-export {default as KeypadContext} from "./components/keypad-context";
+export {
+    KeypadContext,
+    StatefulKeypadContextProvider,
+} from "./components/keypad-context";
 
 // External API of the "Provided" keypad component
 export {keypadElementPropType} from "./components/prop-types";

package/src/types.ts

@@ -7,6 +7,7 @@ import type {
     KeyType,
     KeypadType,
 } from "./enums";
+import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core";
 import type * as React from "react";
 import type ReactDOM from "react-dom";
 
@@ -105,3 +106,18 @@ export interface KeypadAPI {
     setKeyHandler: (keyHandler: KeyHandler) => void;
     getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode>;
 }
+
+export type KeypadContextType = {
+    setKeypadActive: (keypadActive: boolean) => void;
+    keypadActive: boolean;
+    setKeypadElement: (keypadElement?: KeypadAPI) => void;
+    keypadElement: KeypadAPI | null | undefined;
+    setRenderer: (
+        renderer?: KeypadContextRendererInterface | null | undefined,
+    ) => void;
+    renderer: KeypadContextRendererInterface | null | undefined;
+    setScrollableElement: (
+        scrollableElement?: HTMLElement | null | undefined,
+    ) => void;
+    scrollableElement: HTMLElement | null | undefined;
+};