@khanacademy/math-input 17.0.4 → 17.0.5

package/less/overrides.less

@@ -1,122 +0,0 @@
-@wonderBlocksBlue: #1865f2;
-@offBlack16: rgba(33, 36, 44, 0.16);
-
-@cursorWidth: 2px;
-@cursorMargin: -1px;
-@emptyBlockBorderRadius: 1px;
-@emptyBlockPadding: 4px;
-
-// Originally this was 500ms to match MathQuill's own
-// frequency for toggling the application of the .mq-blink class.
-// Due to the inconsistent nature of `setTimer` this caused weird
-// flickering in the animation, so keeping this below MQ's animation.
-@cursorAnimationDuration: 300ms;
-
-.keypad-input {
-    outline: none !important;
-
-    .mq-editable-field {
-        .mq-root-block {
-            overflow-x: auto;
-        }
-
-        .mq-cursor:not(:only-child),
-        .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
-            /* HACK(charlie): Magic numbers to properly size and position the vertical
-               cursor, which is visible whenever the cursor is not alone in its parent,
-               with the exception that it's also visible when the entire input is
-               empty. */
-            height: 20px !important;
-            width: @cursorWidth;
-            margin-top: -5px !important;
-            vertical-align: middle !important;
-            border-radius: 1px !important;
-        }
-
-        .mq-cursor {
-            border-left: @cursorWidth solid @wonderBlocksBlue !important;
-
-            margin-left: @cursorMargin !important;
-            margin-right: @cursorMargin !important;
-
-            // Fade the cursor out, overriding MathQuill's default behavior.
-            opacity: 1 !important;
-            transition: opacity @cursorAnimationDuration ease !important;
-            visibility: visible !important;
-
-            &.mq-blink {
-                // And fade the cursor back in.
-                opacity: 0 !important;
-                visibility: visible !important;
-            }
-        }
-
-        .mq-non-leaf .mq-cursor:only-child {
-            // Set the cursor to a grey rectangle, rather than a vertical line.
-            border: @cursorWidth solid !important;
-            border-color: @wonderBlocksBlue !important;
-            border-radius: @emptyBlockBorderRadius;
-            opacity: 1 !important;
-            padding: 0 @emptyBlockPadding 0 @emptyBlockPadding;
-            transition: border-color @cursorAnimationDuration ease !important;
-
-            &.mq-blink {
-                // And animate it between blue and gray.
-                border-color: @wonderBlocksBlue !important;
-                opacity: 1 !important;
-            }
-        }
-    }
-
-    .mq-empty {
-        background: transparent !important;
-    }
-
-    // Adds empty block styling to elements with .mq-hasCursor but without a
-    // cursor element (this happens where the cursor is when the math input
-    // loses focus).
-    .mq-empty:not(.mq-root-block):after,
-    .mq-hasCursor:empty:not(.mq-root-block):after {
-        border: @cursorWidth solid @offBlack16;
-        border-radius: @emptyBlockBorderRadius;
-        // Hides the 'c' content added by MathQuill to measure the width.
-        color: transparent;
-        display: inline-block;
-        margin-left: @cursorMargin;
-        margin-right: @cursorMargin;
-        padding: 0 @emptyBlockPadding 0 @emptyBlockPadding;
-        visibility: visible !important;
-    }
-
-    .mq-selection .mq-empty:not(.mq-root-block):after {
-        border-color: white;
-    }
-
-    .mq-hasCursor:empty:not(.mq-root-block):after {
-        // Place a 'c' inside for sizing the cursor (for the case explained
-        // above); normally, MathQuill already does this for .mq-cursor.
-        content: "c";
-    }
-
-    .mq-math-mode .mq-selection,
-    .mq-editable-field .mq-selection {
-        .mq-non-leaf {
-            background: @wonderBlocksBlue !important;
-            border-color: white !important;
-            color: white !important;
-        }
-
-        .mq-scaled {
-            background: transparent !important;
-            border-color: transparent !important;
-            color: white !important;
-        }
-    }
-
-    .mq-selection {
-        background: @wonderBlocksBlue !important;
-        border-color: white !important;
-        color: white !important;
-        display: inline-block !important;
-    }
-}

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

@@ -1,300 +0,0 @@
-import "@testing-library/jest-dom";
-import {
-    screen,
-    render,
-    fireEvent,
-    within,
-    waitFor,
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import MathQuill from "mathquill";
-import React, {useState} from "react";
-
-import {KeypadType} from "../../enums";
-import MathInput from "../input/math-input";
-import {MobileKeypad} from "../keypad";
-import {KeypadContext, StatefulKeypadContextProvider} from "../keypad-context";
-
-import type {KeypadConfiguration} from "../../types";
-
-const MQ = MathQuill.getInterface(3);
-
-const defaultConfiguration: KeypadConfiguration = {
-    keypadType: KeypadType.FRACTION,
-};
-
-function InputWithContext({keypadConfiguration}) {
-    const [value, setValue] = useState<string>("");
-
-    return (
-        <KeypadContext.Consumer>
-            {({keypadElement}) => {
-                return (
-                    <MathInput
-                        keypadElement={keypadElement as any}
-                        value={value}
-                        onChange={(nextValue, cb) => {
-                            setValue(nextValue);
-                            cb();
-                        }}
-                        onFocus={() => {
-                            keypadElement?.configure(
-                                keypadConfiguration,
-                                () => {
-                                    keypadElement?.activate();
-                                },
-                            );
-                        }}
-                        onBlur={() => {
-                            keypadElement?.dismiss();
-                        }}
-                    />
-                );
-            }}
-        </KeypadContext.Consumer>
-    );
-}
-
-function KeypadWithContext() {
-    return (
-        <KeypadContext.Consumer>
-            {({setKeypadElement}) => {
-                return (
-                    <MobileKeypad
-                        onElementMounted={setKeypadElement}
-                        onDismiss={() => {}}
-                        onAnalyticsEvent={async () => {}}
-                    />
-                );
-            }}
-        </KeypadContext.Consumer>
-    );
-}
-
-function ConnectedMathInput({keypadConfiguration = defaultConfiguration}) {
-    return (
-        <StatefulKeypadContextProvider>
-            <InputWithContext keypadConfiguration={keypadConfiguration} />
-            <KeypadWithContext />
-        </StatefulKeypadContextProvider>
-    );
-}
-
-describe("math input integration", () => {
-    it("renders", () => {
-        render(<ConnectedMathInput />);
-
-        expect(
-            screen.getByLabelText(
-                "Math input box Tap with one or two fingers to open keyboard",
-            ),
-        ).toBeInTheDocument();
-    });
-
-    it("doesn't show the keypad initially", () => {
-        render(<ConnectedMathInput />);
-
-        expect(
-            screen.queryByRole("button", {name: "1"}),
-        ).not.toBeInTheDocument();
-    });
-
-    it("shows the keypad after input touch-interaction", async () => {
-        render(<ConnectedMathInput />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        await waitFor(() => {
-            expect(screen.getByRole("button", {name: "4"})).toBeVisible();
-        });
-
-        expect(screen.getByRole("button", {name: "1"})).toBeVisible();
-    });
-
-    it("shows the keypad after input click-interaction", async () => {
-        render(<ConnectedMathInput />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        userEvent.click(input);
-
-        await waitFor(() => {
-            expect(screen.getByRole("button", {name: "4"})).toBeVisible();
-        });
-
-        expect(screen.getByRole("button", {name: "1"})).toBeVisible();
-    });
-
-    it("updates input when using keypad", async () => {
-        render(<ConnectedMathInput />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        await waitFor(() => {
-            expect(screen.getByRole("button", {name: "4"})).toBeVisible();
-        });
-
-        userEvent.click(screen.getByRole("button", {name: "1"}));
-
-        // MathQuill is problematic,
-        // this is the only way I know how to test the "input"
-        const mathquillInput =
-            // eslint-disable-next-line testing-library/no-node-access
-            document.getElementsByClassName("mq-root-block")[0] as HTMLElement;
-        const span1 = within(mathquillInput).getByText("1");
-
-        expect(span1).toBeVisible();
-    });
-
-    it("updates input when pressing many numbers", async () => {
-        render(<ConnectedMathInput />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        await waitFor(() => {
-            expect(screen.getByRole("button", {name: "4"})).toBeVisible();
-        });
-
-        const testNumbers = [8, 6, 7, 5, 3, 0, 9];
-        testNumbers.forEach((num) => {
-            userEvent.click(screen.getByRole("button", {name: `${num}`}));
-        });
-
-        // MathQuill is problematic,
-        // this is how to get the value of the input directly from MQ
-        const mathquillInstance = MQ(
-            // eslint-disable-next-line testing-library/no-node-access
-            document.getElementsByClassName(
-                "mq-editable-field",
-            )[0] as HTMLElement,
-        );
-
-        expect(mathquillInstance?.latex()).toBe("8675309");
-    });
-
-    it("can handle symbols", async () => {
-        render(<ConnectedMathInput />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        await waitFor(() => {
-            expect(screen.getByRole("button", {name: "4"})).toBeVisible();
-        });
-
-        userEvent.click(screen.getByRole("button", {name: "4"}));
-        userEvent.click(screen.getByRole("button", {name: "2"}));
-        userEvent.click(screen.getByRole("button", {name: "Percent"}));
-
-        // MathQuill is problematic,
-        // this is how to get the value of the input directly from MQ
-        const mathquillInstance = MQ(
-            // eslint-disable-next-line testing-library/no-node-access
-            document.getElementsByClassName(
-                "mq-editable-field",
-            )[0] as HTMLElement,
-        );
-
-        expect(mathquillInstance?.latex()).toBe("42\\%");
-    });
-
-    it("handles fractions correctly in expression", async () => {
-        const keypadConfiguration = {
-            keypadType: KeypadType.EXPRESSION,
-        };
-        render(
-            <ConnectedMathInput keypadConfiguration={keypadConfiguration} />,
-        );
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        await waitFor(() => {
-            expect(screen.getByRole("button", {name: "4"})).toBeVisible();
-        });
-
-        userEvent.click(screen.getByRole("button", {name: "1"}));
-        userEvent.click(
-            screen.getByRole("button", {
-                name: "Fraction, excluding the current expression",
-            }),
-        );
-        userEvent.click(screen.getByRole("button", {name: "4"}));
-        userEvent.click(
-            screen.getByRole("button", {
-                name: "Navigate right out of the numerator and into the denominator",
-            }),
-        );
-        userEvent.click(screen.getByRole("button", {name: "2"}));
-
-        // MathQuill is problematic,
-        // this is how to get the value of the input directly from MQ
-        const mathquillInstance = MQ(
-            // eslint-disable-next-line testing-library/no-node-access
-            document.getElementsByClassName(
-                "mq-editable-field",
-            )[0] as HTMLElement,
-        );
-
-        expect(mathquillInstance?.latex()).toBe("1\\frac{4}{2}");
-    });
-
-    it("handles fractions correctly in fraction", async () => {
-        render(<ConnectedMathInput />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        await waitFor(() => {
-            expect(screen.getByRole("button", {name: "4"})).toBeVisible();
-        });
-
-        userEvent.click(screen.getByRole("button", {name: "1"}));
-        userEvent.click(
-            screen.getByRole("button", {
-                name: "Fraction, excluding the current expression",
-            }),
-        );
-        userEvent.click(screen.getByRole("button", {name: "4"}));
-        userEvent.click(
-            screen.getByRole("button", {
-                name: "Navigate right out of the numerator and into the denominator",
-            }),
-        );
-        userEvent.click(screen.getByRole("button", {name: "2"}));
-
-        // MathQuill is problematic,
-        // this is how to get the value of the input directly from MQ
-        const mathquillInstance = MQ(
-            // eslint-disable-next-line testing-library/no-node-access
-            document.getElementsByClassName(
-                "mq-editable-field",
-            )[0] as HTMLElement,
-        );
-
-        expect(mathquillInstance?.latex()).toBe("1\\frac{4}{2}");
-    });
-});

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

@@ -1,78 +0,0 @@
-/**
- * Aphrodite doesn't play well with CSSTransition from react-transition-group,
- * which assumes that you have CSS classes and it can combine them arbitrarily.
- *
- * There are also some issue with react-transition-group that make it difficult
- * to work.  Even if the CSS classes are defined ahead of time it makes no
- * guarantee that the start style will be applied by the browser before the
- * active style is applied.  This can cause the first time a transition runs to
- * fail.
- *
- * AphroditeCSSTransitionGroup provides a wrapper around TransitionGroup to
- * address these issues.
- *
- * There are three types of transitions:
- * - appear: the time the child is added to the render tree
- * - enter: whenever the child is added to the render tree after "appear".  If
- *   no "appear" transition is specified then the "enter" transition will also
- *   be used for the first time the child is added to the render tree.
- * - leave: whenever the child is removed from the render tree
- *
- * Each transition type has two states:
- * - base: e.g. css(enter)
- * - active: e.g. css(enter, enterActive)
- *
- * If "done" styles are not provided, the "active" style will remain on the
- * component after the animation has completed.
- *
- * Usage: TBD
- *
- * Limitations:
- * - This component only supports a single child whereas TransitionGroup supports
- *   multiple children.
- * - We ignore inline styles that are provided as part of AnimationStyles.
- *
- * TODOs:
- * - (FEI-3211): Change the API for AphroditeCSSTransitionGroup so that it makes
- *   bad states impossible.
- */
-import * as React from "react";
-import {TransitionGroup} from "react-transition-group";
-
-import TransitionChild from "./transition-child";
-
-import type {AnimationStyles} from "./types";
-
-type Props = {
-    // If a function is provided, that function will be called to retrieve the
-    // current set of animation styles to be used when animating the children.
-    transitionStyle: AnimationStyles | (() => AnimationStyles);
-    transitionAppearTimeout?: number;
-    transitionEnterTimeout?: number;
-    transitionLeaveTimeout?: number;
-    children?: React.ReactNode;
-};
-
-class AphroditeCSSTransitionGroup extends React.Component<Props> {
-    render(): React.ReactNode {
-        const {children} = this.props;
-        return (
-            // `component={null}` prevents wrapping each child with a <div>
-            // which can muck with certain layouts.
-            <TransitionGroup component={null}>
-                {React.Children.map(children, (child) => (
-                    <TransitionChild
-                        transitionStyles={this.props.transitionStyle}
-                        appearTimeout={this.props.transitionAppearTimeout}
-                        enterTimeout={this.props.transitionEnterTimeout}
-                        leaveTimeout={this.props.transitionLeaveTimeout}
-                    >
-                        {child}
-                    </TransitionChild>
-                ))}
-            </TransitionGroup>
-        );
-    }
-}
-
-export default AphroditeCSSTransitionGroup;

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

@@ -1,192 +0,0 @@
-import {withActionScheduler} from "@khanacademy/wonder-blocks-timing";
-import * as React from "react";
-import ReactDOM from "react-dom";
-
-import {processStyleType} from "./util";
-
-import type {AnimationStyles} from "./types";
-import type {WithActionSchedulerProps} from "@khanacademy/wonder-blocks-timing";
-
-type ChildProps = {
-    transitionStyles: AnimationStyles | (() => AnimationStyles);
-    appearTimeout?: number; // default appearTimeout to be the same as enterTimeout
-    enterTimeout?: number;
-    leaveTimeout?: number;
-    children: React.ReactNode;
-    in?: boolean; // provided by TransitionGroup
-} & WithActionSchedulerProps;
-
-type ChildState = {
-    // Keeps track of whether we should render our children or not.
-    status: "mounted" | "unmounted";
-};
-
-class TransitionChild extends React.Component<ChildProps, ChildState> {
-    // Each 2-tuple in the queue represents two classnames: one to remove and
-    // one to add (in that order).
-    classNameQueue: Array<[string, string]>;
-    // We keep track of all of the current applied classes so that we can remove
-    // them before a new transition starts in the case of the current transition
-    // being interrupted.
-    appliedClassNames: Set<string>;
-    _isMounted = false;
-
-    // The use of getDerivedStateFromProps here is to avoid an extra call to
-    // setState if the component re-enters.  This can happen if TransitionGroup
-    // sets `in` from `false` to `true`.
-    // eslint-disable-next-line no-restricted-syntax
-    static getDerivedStateFromProps(
-        {in: nextIn}: ChildProps,
-        prevState: ChildState,
-    ): Partial<ChildState> | null {
-        if (nextIn && prevState.status === "unmounted") {
-            return {status: "mounted"};
-        }
-        return null;
-    }
-
-    constructor(props: ChildProps) {
-        super(props);
-
-        this._isMounted = false;
-        this.classNameQueue = [];
-        this.appliedClassNames = new Set();
-
-        this.state = {
-            status: "mounted",
-        };
-    }
-
-    componentDidMount() {
-        this._isMounted = true;
-
-        if (typeof this.props.appearTimeout === "number") {
-            this.transition("appear", this.props.appearTimeout);
-        } else {
-            this.transition("enter", this.props.enterTimeout);
-        }
-    }
-
-    componentDidUpdate(oldProps: ChildProps, oldState: ChildState) {
-        if (oldProps.in && !this.props.in) {
-            this.transition("leave", this.props.leaveTimeout);
-        } else if (!oldProps.in && this.props.in) {
-            this.transition("enter", this.props.enterTimeout);
-        }
-
-        if (oldState.status !== "mounted" && this.state.status === "mounted") {
-            // Remove the node from the DOM
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({status: "unmounted"});
-        }
-    }
-
-    // NOTE: This will only get called when the parent TransitionGroup becomes
-    // unmounted.  This is because that component clones all of its children and
-    // keeps them around so that they can be animated when leaving and also so
-    // that the can be animated when re-rentering if that occurs.
-    componentWillUnmount() {
-        this._isMounted = false;
-        this.props.schedule.clearAll();
-    }
-
-    removeAllClasses(node: Element) {
-        for (const className of this.appliedClassNames) {
-            this.removeClass(node, className);
-        }
-    }
-
-    addClass = (elem: Element, className: string): void => {
-        if (className) {
-            elem.classList.add(className);
-            this.appliedClassNames.add(className);
-        }
-    };
-
-    removeClass = (elem: Element, className: string): void => {
-        if (className) {
-            elem.classList.remove(className);
-            this.appliedClassNames.delete(className);
-        }
-    };
-
-    transition(
-        animationType: "appear" | "enter" | "leave",
-        duration?: number | null,
-    ) {
-        const node = ReactDOM.findDOMNode(this);
-
-        if (!(node instanceof Element)) {
-            return;
-        }
-
-        // Remove any classes from previous transitions.
-        this.removeAllClasses(node);
-
-        // A previous transition may still be in progress so clear its timers.
-        this.props.schedule.clearAll();
-
-        const transitionStyles =
-            typeof this.props.transitionStyles === "function"
-                ? this.props.transitionStyles()
-                : this.props.transitionStyles;
-
-        const {className} = processStyleType(transitionStyles[animationType]);
-        const {className: activeClassName} = processStyleType([
-            transitionStyles[animationType],
-            transitionStyles[animationType + "Active"],
-        ]);
-
-        // Put the node in the starting position.
-        this.addClass(node, className);
-
-        // Queue the component to show the "active" style.
-        this.queueClass(className, activeClassName);
-
-        // Unmount the children after the 'leave' transition has completed.
-        if (animationType === "leave") {
-            this.props.schedule.timeout(() => {
-                if (this._isMounted) {
-                    this.setState({status: "unmounted"});
-                }
-            }, duration || 0);
-        }
-    }
-
-    queueClass(removeClassName: string, addClassName: string) {
-        this.classNameQueue.push([removeClassName, addClassName]);
-        // Queue operation for after the next paint.
-        this.props.schedule.timeout(this.flushClassNameQueue, 0);
-    }
-
-    flushClassNameQueue = () => {
-        if (this._isMounted) {
-            const node = ReactDOM.findDOMNode(this);
-            if (node instanceof Element) {
-                this.classNameQueue.forEach(
-                    ([removeClassName, addClassName]: [any, any]) => {
-                        // Remove the old class before adding a new class just
-                        // in case the new class is the same as the old one.
-                        this.removeClass(node, removeClassName);
-                        this.addClass(node, addClassName);
-                    },
-                );
-            }
-        }
-
-        // Remove all items in the Array.
-        this.classNameQueue.length = 0;
-    };
-
-    render(): React.ReactNode {
-        const {status} = this.state;
-
-        if (status === "unmounted") {
-            return null;
-        }
-
-        return this.props.children;
-    }
-}
-
-export default withActionScheduler(TransitionChild);