@khanacademy/math-input 17.0.3 → 17.0.5

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

@@ -1,127 +0,0 @@
-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

@@ -1,26 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import NavigationPad from "./navigation-pad";
-
-export default {
-    title: "math-input/components/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={action("onClickKey")} />
-        </div>
-    );
-}

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

@@ -1,67 +0,0 @@
-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

@@ -1,109 +0,0 @@
-import * as React from "react";
-
-import Keys from "../../data/key-configs";
-import {convertDotToTimesByLocale} from "../../utils";
-
-import {KeypadButton} from "./keypad-button";
-import {getCursorContextConfig} from "./utils";
-
-import type {ClickKeyCallback, KeypadPageType} from "../../types";
-import type {CursorContext} from "../input/cursor-contexts";
-
-type Props = {
-    onClickKey: ClickKeyCallback;
-    selectedPage: KeypadPageType;
-    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
-    convertDotToTimes?: boolean;
-    divisionKey?: boolean;
-};
-
-export default function SharedKeys(props: Props) {
-    const {
-        onClickKey,
-        cursorContext,
-        divisionKey,
-        convertDotToTimes,
-        selectedPage,
-    } = props;
-
-    const cursorKeyConfig = getCursorContextConfig(cursorContext);
-
-    // Fraction position depends on the page
-    const fractionCoord: readonly [number, number] =
-        selectedPage === "Numbers" || selectedPage === "Operators"
-            ? [3, 1]
-            : [3, 0];
-
-    return (
-        <>
-            <KeypadButton
-                keyConfig={Keys.FRAC}
-                onClickKey={onClickKey}
-                coord={fractionCoord}
-                secondary
-            />
-            <KeypadButton
-                keyConfig={Keys.PLUS}
-                onClickKey={onClickKey}
-                coord={[4, 0]}
-                secondary
-            />
-            <KeypadButton
-                keyConfig={Keys.MINUS}
-                onClickKey={onClickKey}
-                coord={[5, 0]}
-                secondary
-            />
-
-            {/* Row 2 */}
-            <KeypadButton
-                keyConfig={
-                    convertDotToTimesByLocale(!!convertDotToTimes)
-                        ? Keys.TIMES
-                        : Keys.CDOT
-                }
-                onClickKey={onClickKey}
-                coord={[4, 1]}
-                secondary
-            />
-            {divisionKey && (
-                <KeypadButton
-                    keyConfig={Keys.DIVIDE}
-                    onClickKey={onClickKey}
-                    coord={[5, 1]}
-                    secondary
-                />
-            )}
-
-            {/* Row 3 */}
-            <KeypadButton
-                keyConfig={Keys.LEFT_PAREN}
-                onClickKey={onClickKey}
-                coord={[4, 2]}
-                secondary
-            />
-            <KeypadButton
-                keyConfig={Keys.RIGHT_PAREN}
-                onClickKey={onClickKey}
-                coord={[5, 2]}
-                secondary
-            />
-
-            {/* Row 4 */}
-            {cursorKeyConfig && (
-                <KeypadButton
-                    keyConfig={cursorKeyConfig}
-                    onClickKey={onClickKey}
-                    coord={[4, 3]}
-                    secondary
-                />
-            )}
-            <KeypadButton
-                keyConfig={Keys.BACKSPACE}
-                onClickKey={onClickKey}
-                coord={[5, 3]}
-                action
-            />
-        </>
-    );
-}

package/src/components/keypad/utils.ts

@@ -1,34 +0,0 @@
-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.
-export function getCursorContextConfig(
-    cursorContext?: typeof CursorContext[keyof typeof CursorContext],
-) {
-    if (!cursorContext) {
-        return null;
-    }
-
-    switch (cursorContext) {
-        case CursorContext.NONE:
-            return null;
-        case CursorContext.IN_PARENS:
-            return Keys.JUMP_OUT_PARENTHESES;
-        case CursorContext.IN_SUPER_SCRIPT:
-            return Keys.JUMP_OUT_EXPONENT;
-        case CursorContext.IN_SUB_SCRIPT:
-            return Keys.JUMP_OUT_BASE;
-        case CursorContext.IN_NUMERATOR:
-            return Keys.JUMP_OUT_NUMERATOR;
-        case CursorContext.IN_DENOMINATOR:
-            return Keys.JUMP_OUT_DENOMINATOR;
-        case CursorContext.BEFORE_FRACTION:
-            return Keys.JUMP_INTO_NUMERATOR;
-    }
-}

package/src/components/keypad-context.tsx

@@ -1,70 +0,0 @@
-/**
- * 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, useMemo} 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>();
-
-    const memoizedValue = useMemo(
-        () => ({
-            keypadActive,
-            setKeypadActive,
-            keypadElement,
-            setKeypadElement,
-            renderer,
-            setRenderer,
-            scrollableElement,
-            setScrollableElement,
-        }),
-        [
-            keypadActive,
-            setKeypadActive,
-            keypadElement,
-            setKeypadElement,
-            renderer,
-            setRenderer,
-            scrollableElement,
-            setScrollableElement,
-        ],
-    );
-
-    return (
-        <KeypadContext.Provider value={memoizedValue}>
-            {props.children}
-        </KeypadContext.Provider>
-    );
-}

package/src/components/prop-types.ts

@@ -1,16 +0,0 @@
-/**
- * React PropTypes that may be shared between components.
- */
-
-import PropTypes from "prop-types";
-
-// NOTE(jared): This is no longer guaranteed to be React element
-// @deprecated Use `KeypadAPI` Typescript interface instead.
-export const keypadElementPropType = PropTypes.shape({
-    activate: PropTypes.func.isRequired,
-    dismiss: PropTypes.func.isRequired,
-    configure: PropTypes.func.isRequired,
-    setCursor: PropTypes.func.isRequired,
-    setKeyHandler: PropTypes.func.isRequired,
-    getDOMNode: PropTypes.func.isRequired,
-});

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

@@ -1,105 +0,0 @@
-import {render, screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import * as React from "react";
-import "@testing-library/jest-dom";
-
-import Tabbar from "../tabbar";
-
-describe("<Tabbar />", () => {
-    it("renders one tab", () => {
-        // Arrange
-        render(
-            <Tabbar
-                items={["Numbers"]}
-                selectedItem={"Numbers"}
-                onSelectItem={() => {}}
-            />,
-        );
-
-        // Assert
-        expect(screen.getByRole("tab", {name: "Numbers"})).toBeInTheDocument();
-    });
-
-    it("renders many tabs", () => {
-        // Arrange
-        render(
-            <Tabbar
-                items={["Numbers", "Extras", "Geometry", "Operators"]}
-                selectedItem={"Numbers"}
-                onSelectItem={() => {}}
-            />,
-        );
-
-        // Assert
-        expect(screen.getByRole("tab", {name: "Numbers"})).toBeInTheDocument();
-        expect(screen.getByRole("tab", {name: "Extras"})).toBeInTheDocument();
-        expect(screen.getByRole("tab", {name: "Geometry"})).toBeInTheDocument();
-        expect(
-            screen.getByRole("tab", {name: "Operators"}),
-        ).toBeInTheDocument();
-    });
-
-    it("handles callback", () => {
-        // Arrange
-        const mockSelectCallback = jest.fn();
-        render(
-            <Tabbar
-                items={["Numbers", "Geometry"]}
-                selectedItem={"Numbers"}
-                onSelectItem={mockSelectCallback}
-            />,
-        );
-
-        // Assert
-        userEvent.click(screen.getByRole("tab", {name: "Geometry"}));
-        expect(mockSelectCallback).toHaveBeenCalledWith("Geometry");
-    });
-
-    it("shows dismiss button with a onClickClose callback", () => {
-        // Arrange
-        render(
-            <Tabbar
-                items={["Numbers"]}
-                selectedItem={"Numbers"}
-                onSelectItem={() => {}}
-                onClickClose={() => {}}
-            />,
-        );
-
-        // Assert
-        expect(screen.getByRole("tab", {name: "Dismiss"})).toBeInTheDocument();
-    });
-
-    it("does not show dismiss button without onClickClose callback", () => {
-        // Arrange
-        render(
-            <Tabbar
-                items={["Numbers"]}
-                selectedItem={"Numbers"}
-                onSelectItem={() => {}}
-            />,
-        );
-
-        // Assert
-        expect(
-            screen.queryByRole("tab", {name: "Dismiss"}),
-        ).not.toBeInTheDocument();
-    });
-
-    it("handles onClickClose callback", () => {
-        // Arrange
-        const mockClickCloseCallback = jest.fn();
-        render(
-            <Tabbar
-                items={["Numbers", "Geometry"]}
-                selectedItem={"Numbers"}
-                onSelectItem={() => {}}
-                onClickClose={mockClickCloseCallback}
-            />,
-        );
-
-        // Assert
-        userEvent.click(screen.getByRole("tab", {name: "Dismiss"}));
-        expect(mockClickCloseCallback).toHaveBeenCalled();
-    });
-});