@khanacademy/math-input 14.2.0 → 14.2.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": "14.2.0",
+    "version": "14.2.2",
     "publishConfig": {
         "access": "public"
     },
@@ -20,7 +20,7 @@
     "source": "src/index.ts",
     "scripts": {},
     "dependencies": {
-        "@khanacademy/perseus-core": "1.1.2",
+        "@khanacademy/perseus-core": "1.3.0",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#48410e80d760bbd5105544d4a4ab459a28dc2cbc",
         "performance-now": "^0.2.0"
     },

package/src/components/aphrodite-css-transition-group/transition-child.tsx

@@ -155,7 +155,8 @@ class TransitionChild extends React.Component<ChildProps, ChildState> {
 
     queueClass(removeClassName: string, addClassName: string) {
         this.classNameQueue.push([removeClassName, addClassName]);
-        this.props.schedule.animationFrame(this.flushClassNameQueue);
+        // Queue operation for after the next paint.
+        this.props.schedule.timeout(this.flushClassNameQueue, 0);
     }
 
     flushClassNameQueue = () => {

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/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({});