@khanacademy/math-input 10.0.1 → 10.1.1

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

@@ -73,7 +73,7 @@ const styles = StyleSheet.create({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
+        boxShadow: `0px 1px 0px ${Color.offBlack32}`,
         boxSizing: "border-box",
         background: Color.white,
         borderRadius: 4,

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

@@ -31,6 +31,7 @@ export default {
         preAlgebra: false,
         trigonometry: false,
         sendEvent: () => {},
+        onAnalyticsEvent: async () => {},
     },
     argTypes: {
         advancedRelations: {
@@ -115,4 +116,7 @@ Everything.args = {
     multiplicationDot: false,
     preAlgebra: true,
     trigonometry: true,
+    expandedView: true,
+    showDismiss: true,
+    extraKeys: ["a", "b", "c"],
 };

package/src/components/keypad/keypad.tsx

@@ -11,22 +11,23 @@ import FractionsPage from "./keypad-pages/fractions-page";
 import GeometryPage from "./keypad-pages/geometry-page";
 import NumbersPage from "./keypad-pages/numbers-page";
 import OperatorsPage from "./keypad-pages/operators-page";
+import NavigationPad from "./navigation-pad";
 import SharedKeys from "./shared-keys";
+import {expandedViewThreshold} from "./utils";
 
 import type Key from "../../data/keys";
-import type {ClickKeyCallback} from "../../types";
+import type {ClickKeyCallback, KeypadPageType} from "../../types";
 import type {CursorContext} from "../input/cursor-contexts";
-import type {TabbarItemType} from "../tabbar";
 import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
 
 export type Props = {
     extraKeys: ReadonlyArray<Key>;
     cursorContext?: typeof CursorContext[keyof typeof CursorContext];
     showDismiss?: boolean;
+    expandedView?: boolean;
 
     multiplicationDot?: boolean;
     divisionKey?: boolean;
-
     trigonometry?: boolean;
     preAlgebra?: boolean;
     logarithms?: boolean;
@@ -42,13 +43,13 @@ const defaultProps = {
     extraKeys: [],
 };
 
-function getAvailableTabs(props: Props): ReadonlyArray<TabbarItemType> {
+function getAvailableTabs(props: Props): ReadonlyArray<KeypadPageType> {
     // We don't want to show any available tabs on the fractions keypad
     if (props.fractionsOnly) {
         return [];
     }
 
-    const tabs: Array<TabbarItemType> = ["Numbers"];
+    const tabs: Array<KeypadPageType> = ["Numbers"];
     if (
         // OperatorsButtonSets
         props.preAlgebra ||
@@ -77,7 +78,7 @@ export default function Keypad(props: Props) {
     // Otherwise, we want to default to the Numbers page
     const defaultSelectedPage = props.fractionsOnly ? "Fractions" : "Numbers";
     const [selectedPage, setSelectedPage] =
-        React.useState<TabbarItemType>(defaultSelectedPage);
+        React.useState<KeypadPageType>(defaultSelectedPage);
     const [isMounted, setIsMounted] = React.useState<boolean>(false);
 
     // We don't want any tabs available on mobile fractions keypad
@@ -96,6 +97,7 @@ export default function Keypad(props: Props) {
         showDismiss,
         onAnalyticsEvent,
         fractionsOnly,
+        expandedView,
     } = props;
 
     // Use a different grid for our fraction keypad
@@ -128,58 +130,70 @@ export default function Keypad(props: Props) {
     }, [onAnalyticsEvent, isMounted]);
 
     return (
-        <View>
-            <Tabbar
-                items={availableTabs}
-                selectedItem={selectedPage}
-                onSelectItem={(tabbarItem: TabbarItemType) => {
-                    setSelectedPage(tabbarItem);
-                }}
-                style={styles.tabbar}
-                onClickClose={
-                    showDismiss ? () => onClickKey("DISMISS") : undefined
-                }
-            />
-
+        <View style={expandedView ? styles.keypadOuterContainer : null}>
             <View
-                style={[styles.keypadGrid, gridStyle]}
-                role="grid"
-                tabIndex={0}
-                aria-label="Keypad"
+                style={[
+                    styles.wrapper,
+                    expandedView ? styles.expandedWrapper : null,
+                ]}
             >
-                {selectedPage === "Fractions" && (
-                    <FractionsPage
-                        onClickKey={onClickKey}
-                        cursorContext={cursorContext}
-                    />
-                )}
-                {selectedPage === "Numbers" && (
-                    <NumbersPage onClickKey={onClickKey} />
-                )}
-                {selectedPage === "Extras" && (
-                    <ExtrasPage onClickKey={onClickKey} extraKeys={extraKeys} />
-                )}
-                {selectedPage === "Operators" && (
-                    <OperatorsPage
-                        onClickKey={onClickKey}
-                        preAlgebra={preAlgebra}
-                        logarithms={logarithms}
-                        basicRelations={basicRelations}
-                        advancedRelations={advancedRelations}
-                    />
-                )}
-                {selectedPage === "Geometry" && (
-                    <GeometryPage onClickKey={onClickKey} />
-                )}
-                {!fractionsOnly && (
-                    <SharedKeys
-                        onClickKey={onClickKey}
-                        cursorContext={cursorContext}
-                        multiplicationDot={multiplicationDot}
-                        divisionKey={divisionKey}
-                        selectedPage={selectedPage}
-                    />
-                )}
+                <Tabbar
+                    items={availableTabs}
+                    selectedItem={selectedPage}
+                    onSelectItem={(newSelectedPage: KeypadPageType) => {
+                        setSelectedPage(newSelectedPage);
+                    }}
+                    onClickClose={
+                        showDismiss ? () => onClickKey("DISMISS") : undefined
+                    }
+                />
+
+                <View style={styles.keypadInnerContainer}>
+                    <View
+                        style={[styles.keypadGrid, gridStyle]}
+                        role="grid"
+                        tabIndex={0}
+                        aria-label="Keypad"
+                    >
+                        {selectedPage === "Fractions" && (
+                            <FractionsPage
+                                onClickKey={onClickKey}
+                                cursorContext={cursorContext}
+                            />
+                        )}
+                        {selectedPage === "Numbers" && (
+                            <NumbersPage onClickKey={onClickKey} />
+                        )}
+                        {selectedPage === "Extras" && (
+                            <ExtrasPage
+                                onClickKey={onClickKey}
+                                extraKeys={extraKeys}
+                            />
+                        )}
+                        {selectedPage === "Operators" && (
+                            <OperatorsPage
+                                onClickKey={onClickKey}
+                                preAlgebra={preAlgebra}
+                                logarithms={logarithms}
+                                basicRelations={basicRelations}
+                                advancedRelations={advancedRelations}
+                            />
+                        )}
+                        {selectedPage === "Geometry" && (
+                            <GeometryPage onClickKey={onClickKey} />
+                        )}
+                        {!fractionsOnly && (
+                            <SharedKeys
+                                onClickKey={onClickKey}
+                                cursorContext={cursorContext}
+                                multiplicationDot={multiplicationDot}
+                                divisionKey={divisionKey}
+                                selectedPage={selectedPage}
+                            />
+                        )}
+                    </View>
+                    {expandedView && <NavigationPad onClickKey={onClickKey} />}
+                </View>
             </View>
         </View>
     );
@@ -188,13 +202,28 @@ export default function Keypad(props: Props) {
 Keypad.defaultProps = defaultProps;
 
 const styles = StyleSheet.create({
-    tabbar: {
+    keypadOuterContainer: {
+        display: "flex",
+        alignItems: "center",
+    },
+    wrapper: {
         background: Color.white,
     },
+    expandedWrapper: {
+        borderWidth: "1px 1px 0 1px",
+        borderColor: Color.offBlack32,
+        maxWidth: expandedViewThreshold,
+        borderRadius: "3px 3px 0 0",
+    },
+    keypadInnerContainer: {
+        display: "flex",
+        flexDirection: "row",
+        backgroundColor: "#DBDCDD",
+    },
     keypadGrid: {
         display: "grid",
         gridTemplateRows: "repeat(4, 1fr)",
-        backgroundColor: "#DBDCDD",
+        flex: 1,
     },
     expressionGrid: {
         gridTemplateColumns: "repeat(6, 1fr)",

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

@@ -4,6 +4,8 @@ import ReactDOM from "react-dom";
 
 import {View} from "../../fake-react-native-web/index";
 
+import {expandedViewThreshold} from "./utils";
+
 import type Key from "../../data/keys";
 import type {
     Cursor,
@@ -34,18 +36,68 @@ type Props = {
 
 type State = {
     active: boolean;
+    containerWidth: number;
     keypadConfig?: KeypadConfiguration;
     keyHandler?: KeyHandler;
     cursor?: Cursor;
 };
 
 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,
         active: false,
     };
 
+    componentDidMount() {
+        this._resize();
+
+        window.addEventListener("resize", this._throttleResizeHandler);
+        window.addEventListener(
+            "orientationchange",
+            this._throttleResizeHandler,
+        );
+
+        this._containerResizeObserver = new ResizeObserver(
+            this._throttleResizeHandler,
+        );
+
+        if (this._containerRef.current) {
+            this._containerResizeObserver.observe(this._containerRef.current);
+        }
+    }
+
+    componentWillUnMount() {
+        window.removeEventListener("resize", this._throttleResizeHandler);
+        window.removeEventListener(
+            "orientationchange",
+            this._throttleResizeHandler,
+        );
+        this._containerResizeObserver?.disconnect();
+    }
+
+    _resize = () => {
+        const containerWidth = this._containerRef.current?.clientWidth || 0;
+        this.setState({containerWidth});
+    };
+
+    _throttleResizeHandler = () => {
+        if (this._throttleResize) {
+            return;
+        }
+
+        this._throttleResize = true;
+
+        setTimeout(() => {
+            this._resize();
+            this._throttleResize = false;
+        }, 100);
+    };
+
     activate: () => void = () => {
         this.setState({active: true});
     };
@@ -98,12 +150,12 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
 
     render(): React.ReactNode {
         const {style} = this.props;
-        const {active, cursor, keypadConfig} = this.state;
+        const {active, containerWidth, cursor, keypadConfig} = this.state;
 
         const containerStyle = [
             // internal styles
             styles.keypadContainer,
-            active ? styles.activeKeypadContainer : null,
+            active && styles.activeKeypadContainer,
             // styles passed as props
             ...(Array.isArray(style) ? style : [style]),
         ];
@@ -113,6 +165,7 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
         return (
             <View
                 style={containerStyle}
+                forwardRef={this._containerRef}
                 ref={(element) => {
                     if (!this.hasMounted && element) {
                         // TODO(matthewc)[LC-1081]: clean up this weird
@@ -150,6 +203,7 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
                     logarithms={isExpression}
                     basicRelations={isExpression}
                     advancedRelations={isExpression}
+                    expandedView={containerWidth > expandedViewThreshold}
                     showDismiss
                 />
             </View>
@@ -163,13 +217,14 @@ const styles = StyleSheet.create({
         left: 0,
         right: 0,
         position: "fixed",
+        transitionProperty: "all",
         transition: `200ms ease-out`,
-        transitionProperty: "transform",
+        visibility: "hidden",
         transform: "translate3d(0, 100%, 0)",
     },
-
     activeKeypadContainer: {
         transform: "translate3d(0, 0, 0)",
+        visibility: "visible",
     },
 });
 

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

@@ -0,0 +1,127 @@
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import ButtonAsset from "./button-assets";
+
+import type Key from "../../data/keys";
+import type {KeyConfig, ClickKeyCallback} from "../../types";
+
+export type KeypadButtonProps = {
+    // 0 indexed [x, y] position in keypad CSS grid
+    coord: readonly [number, number];
+    keyConfig: KeyConfig;
+    onClickKey: ClickKeyCallback;
+};
+
+function getStyles(key: Key) {
+    switch (key) {
+        case "UP":
+            return styles.up;
+        case "RIGHT":
+            return styles.right;
+        case "DOWN":
+            return styles.down;
+        case "LEFT":
+            return styles.left;
+        default:
+            throw new Error(`Invalid key: ${key}`);
+    }
+}
+
+export default function NavigationButton({
+    coord,
+    keyConfig,
+    onClickKey,
+}: KeypadButtonProps) {
+    const key = keyConfig.id;
+    const directionalStyles = getStyles(key);
+
+    return (
+        <View
+            style={{
+                gridColumn: coord[0] + 1,
+                gridRow: coord[1] + 1,
+            }}
+        >
+            <Clickable
+                onClick={(e) => onClickKey(keyConfig.id, e)}
+                style={styles.clickable}
+                aria-label={keyConfig.ariaLabel}
+            >
+                {({hovered, focused, pressed}) => (
+                    <View style={styles.outerBoxBase}>
+                        <View
+                            style={[
+                                styles.base,
+                                directionalStyles,
+                                hovered && styles.hovered,
+                                focused && styles.focused,
+                                pressed && styles.pressed,
+                            ]}
+                        >
+                            <ButtonAsset id={keyConfig.id} />
+                        </View>
+                    </View>
+                )}
+            </Clickable>
+        </View>
+    );
+}
+
+const borderRadiusPx = 4;
+
+const styles = StyleSheet.create({
+    clickable: {
+        width: "100%",
+        height: "100%",
+
+        ":focus": {
+            outline: `none`,
+        },
+    },
+    outerBoxBase: {
+        height: "100%",
+        width: "100%",
+    },
+    base: {
+        boxShadow: `0px 1px 0px ${Color.offBlack32}`,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        background: Color.white,
+        borderWidth: 2,
+        borderColor: Color.white,
+    },
+    up: {
+        borderTopLeftRadius: borderRadiusPx,
+        borderTopRightRadius: borderRadiusPx,
+    },
+    right: {
+        borderTopRightRadius: borderRadiusPx,
+        borderBottomRightRadius: borderRadiusPx,
+    },
+    down: {
+        borderBottomLeftRadius: borderRadiusPx,
+        borderBottomRightRadius: borderRadiusPx,
+    },
+    left: {
+        borderTopLeftRadius: borderRadiusPx,
+        borderBottomLeftRadius: borderRadiusPx,
+    },
+    hovered: {
+        borderColor: Color.blue,
+        boxShadow: "none",
+    },
+    focused: {
+        borderColor: Color.blue,
+        boxShadow: "none",
+    },
+    pressed: {
+        border: "2px solid #1B50B3",
+        background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+        boxShadow: "none",
+    },
+});

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import NavigationPad from "./navigation-pad";
+
+export default {
+    title: "MathInput v2 Navigation Pad",
+    parameters: {
+        backgrounds: {
+            default: "light background",
+            values: [
+                // We want a slightly darker default bg so that we can
+                // see the top of the keypad when it is open
+                {name: "light background", value: "lightgrey", default: true},
+            ],
+        },
+    },
+};
+
+export function basic() {
+    return (
+        <div style={{padding: 50}}>
+            <NavigationPad onClickKey={() => {}} />
+        </div>
+    );
+}

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

@@ -0,0 +1,67 @@
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import Keys from "../../data/key-configs";
+
+import NavigationButton from "./navigation-button";
+
+import type {ClickKeyCallback} from "../../types";
+
+export type Props = {
+    onClickKey: ClickKeyCallback;
+};
+
+export default function NavigationPad(props: Props) {
+    const {onClickKey} = props;
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.grid}>
+                <NavigationButton
+                    keyConfig={Keys.UP}
+                    onClickKey={onClickKey}
+                    coord={[1, 0]}
+                />
+                <NavigationButton
+                    keyConfig={Keys.RIGHT}
+                    onClickKey={onClickKey}
+                    coord={[2, 1]}
+                />
+                <NavigationButton
+                    keyConfig={Keys.DOWN}
+                    onClickKey={onClickKey}
+                    coord={[1, 2]}
+                />
+                <NavigationButton
+                    keyConfig={Keys.LEFT}
+                    onClickKey={onClickKey}
+                    coord={[0, 1]}
+                />
+                <View style={styles.spacer} />
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0 1.5rem",
+    },
+    grid: {
+        width: 140,
+        height: 140,
+        display: "grid",
+        gridTemplateColumns: "repeat(3, 1fr)",
+        gridTemplateRows: "repeat(3, 1fr)",
+    },
+    spacer: {
+        gridColumn: 2,
+        gridRow: 2,
+        background: Color.white,
+    },
+});

package/src/components/keypad/shared-keys.tsx

@@ -5,13 +5,12 @@ import Keys from "../../data/key-configs";
 import {KeypadButton} from "./keypad-button";
 import {getCursorContextConfig} from "./utils";
 
-import type {ClickKeyCallback} from "../../types";
+import type {ClickKeyCallback, KeypadPageType} from "../../types";
 import type {CursorContext} from "../input/cursor-contexts";
-import type {TabbarItemType} from "../tabbar";
 
 type Props = {
     onClickKey: ClickKeyCallback;
-    selectedPage: TabbarItemType;
+    selectedPage: KeypadPageType;
     cursorContext?: typeof CursorContext[keyof typeof CursorContext];
     multiplicationDot?: boolean;
     divisionKey?: boolean;

package/src/components/keypad/utils.ts

@@ -1,6 +1,10 @@
 import Keys from "../../data/key-configs";
 import {CursorContext} from "../input/cursor-contexts";
 
+// This is just a magic number, I just played around with it
+// until the transition from expanded -> regular -> expanded felt natural
+export const expandedViewThreshold = 500;
+
 // This is a helper function that returns the correct context for the cursor
 // based on the cursorContext prop.  It is used in the keypad to determine
 // which key to render as the "jump out" key.

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

@@ -2,6 +2,7 @@
  * A component that renders a keypad button.
  */
 
+import Color from "@khanacademy/wonder-blocks-color";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
@@ -313,7 +314,7 @@ const styles = StyleSheet.create({
         backgroundColor: wonderBlocksBlue,
     },
     light: {
-        backgroundColor: "rgba(33, 36, 44, 0.1)",
+        backgroundColor: Color.offBlack32,
     },
 
     iconWrapper: {

package/src/components/keypad-legacy/two-page-keypad.tsx

@@ -19,7 +19,7 @@ import Tabbar from "../tabbar";
 import Keypad from "./keypad";
 import Styles from "./styles";
 
-import type {TabbarItemType} from "../tabbar";
+import type {KeypadPageType} from "../../types";
 import type {State as ReduxState} from "./store/types";
 
 const {column, row, fullWidth} = Styles;
@@ -34,7 +34,7 @@ interface Props extends ReduxProps {
 }
 
 type State = {
-    selectedPage: TabbarItemType;
+    selectedPage: KeypadPageType;
 };
 
 class TwoPageKeypad extends React.Component<Props, State> {

package/src/components/tabbar/icons.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 
-import type {TabbarItemType} from "./types";
+import type {KeypadPageType} from "../../types";
 
 type Props = {
     tintColor: string;
-    type: TabbarItemType;
+    type: KeypadPageType;
 };
 
 const IconAsset = function ({tintColor, type}: Props): React.ReactElement {

package/src/components/tabbar/index.ts

@@ -1,2 +1 @@
 export {default} from "./tabbar";
-export {TabbarItemType} from "./types";

package/src/components/tabbar/item.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 
 import IconAsset from "./icons";
 
-import type {TabbarItemType} from "./types";
+import type {KeypadPageType} from "../../types";
 
 const styles = StyleSheet.create({
     base: {
@@ -78,7 +78,7 @@ export type ItemState = "active" | "inactive" | "disabled";
 type Props = {
     onClick: () => void;
     itemState: ItemState;
-    itemType: TabbarItemType;
+    itemType: KeypadPageType;
 };
 
 class TabbarItem extends React.Component<Props> {