@khanacademy/math-input 15.1.0 → 16.1.0

package/dist/components/keypad-legacy/store/shared.d.ts

@@ -1,7 +0,0 @@
-import { KeypadType } from "../../../enums";
-declare const defaultKeypadType = KeypadType.EXPRESSION;
-declare const keypadForType: {
-    readonly FRACTION: import("../../../types").KeypadLayout;
-    readonly EXPRESSION: import("../../../types").KeypadLayout;
-};
-export { keypadForType, defaultKeypadType };

package/dist/components/keypad-legacy/store/types.d.ts

@@ -1,47 +0,0 @@
-import type Key from "../../../data/keys";
-import type { LayoutMode, KeypadType } from "../../../enums";
-import type { Cursor, KeyHandler, Popover, Echo } from "../../../types";
-import type GestureManager from "../gesture-manager";
-export interface InputState {
-    keyHandler: KeyHandler | null;
-    cursor: Cursor | undefined;
-}
-export interface KeypadState {
-    extraKeys: ReadonlyArray<string>;
-    keypadType: KeypadType;
-    active: boolean;
-}
-export interface GestureState {
-    popover: Popover | null;
-    focus: Key | null;
-    gestureManager: GestureManager;
-}
-export interface EchoState {
-    echoes: ReadonlyArray<Echo>;
-}
-export type GridDimensions = {
-    numRows: number;
-    numColumns: number;
-    numMaxVisibleRows: number;
-    numPages: number;
-};
-export type WidthHeight = {
-    width: number;
-    height: number;
-};
-export interface LayoutState {
-    gridDimensions: GridDimensions;
-    buttonDimensions: WidthHeight;
-    containerDimensions: WidthHeight;
-    pageDimensions: WidthHeight;
-    layoutMode: LayoutMode;
-    paginationEnabled: boolean;
-    navigationPadEnabled: boolean;
-}
-export interface State {
-    input: InputState;
-    keypad: KeypadState;
-    gestures: GestureState;
-    echoes: EchoState;
-    layout: LayoutState;
-}

package/dist/components/keypad-legacy/styles.d.ts

@@ -1,5 +0,0 @@
-/**
- * Common styles shared across components.
- */
-declare const _default: any;
-export default _default;

package/dist/components/keypad-legacy/svg-icon.d.ts

@@ -1,12 +0,0 @@
-/**
- * A component that renders a single SVG icon.
- */
-import * as React from "react";
-type Props = {
-    color: string;
-    name: string;
-};
-declare class SvgIcon extends React.Component<Props> {
-    render(): JSX.Element;
-}
-export default SvgIcon;

package/dist/components/keypad-legacy/text-icon.d.ts

@@ -1,13 +0,0 @@
-/**
- * A component that renders a text-based icon.
- */
-import * as React from "react";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
-type Props = {
-    character: string;
-    style?: StyleType;
-};
-declare class TextIcon extends React.Component<Props> {
-    render(): JSX.Element;
-}
-export default TextIcon;

package/dist/components/keypad-legacy/touchable-keypad-button.d.ts

@@ -1,37 +0,0 @@
-/**
- * A touchable wrapper around the base KeypadButton component. This button is
- * responsible for keeping our button ID system (which will be used to handle
- * touch events globally) opaque to the KeypadButton.
- */
-import * as React from "react";
-import type Key from "../../data/keys";
-import type { KeyType } from "../../enums";
-import type { Border, IconConfig, KeyConfig } from "../../types";
-import type GestureManager from "./gesture-manager";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
-interface SharedProps {
-    borders?: Border;
-    disabled?: boolean;
-    style?: StyleType;
-}
-interface OwnProps extends SharedProps {
-    keyConfig: KeyConfig;
-}
-interface Props extends SharedProps {
-    childKeyIds?: ReadonlyArray<string>;
-    gestureManager: GestureManager;
-    id: Key;
-    focused: boolean;
-    popoverEnabled: boolean;
-    childKeys?: ReadonlyArray<KeyConfig>;
-    ariaLabel?: string;
-    icon?: IconConfig;
-    type: KeyType;
-}
-declare class TouchableKeypadButton extends React.Component<Props> {
-    shouldComponentUpdate(newProps: Props): boolean;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}
-declare const _default: import("react-redux").ConnectedComponent<typeof TouchableKeypadButton, import("react-redux").Omit<React.ClassAttributes<TouchableKeypadButton> & Props, "style" | "ariaLabel" | "type" | "id" | "icon" | "focused" | "disabled" | "childKeyIds" | "borders" | "childKeys" | "popoverEnabled" | "gestureManager"> & OwnProps>;
-export default _default;

package/dist/components/keypad-legacy/two-page-keypad.d.ts

@@ -1,21 +0,0 @@
-/**
- * A keypad with two pages of keys.
- */
-import * as React from "react";
-import type { KeypadPageType } from "../../types";
-interface ReduxProps {
-    paginationEnabled: boolean;
-}
-interface Props extends ReduxProps {
-    leftPage: React.ReactNode;
-    rightPage: React.ReactNode;
-}
-type State = {
-    selectedPage: KeypadPageType;
-};
-declare class TwoPageKeypad extends React.Component<Props, State> {
-    state: State;
-    render(): JSX.Element;
-}
-declare const _default: import("react-redux").ConnectedComponent<typeof TwoPageKeypad, import("react-redux").Omit<React.ClassAttributes<TwoPageKeypad> & Props, "paginationEnabled">>;
-export default _default;

package/dist/components/keypad-legacy/z-indexes.d.ts

@@ -1,7 +0,0 @@
-/**
- * This file contains all of the z-index values used throughout the math-input
- * component and its children.
- */
-export declare const popover = 1;
-export declare const echo = 2;
-export declare const keypad = 1060;

package/dist/components/keypad-switch.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
-type Props = {
-    onElementMounted?: (arg1: any) => void;
-    onDismiss?: () => void;
-    style?: StyleType;
-    useV2Keypad?: boolean;
-    onAnalyticsEvent: AnalyticsEventHandlerFn;
-};
-declare function KeypadSwitch(props: Props): JSX.Element;
-export default KeypadSwitch;

package/src/components/keypad-legacy/__tests__/gesture-state-machine.test.ts

@@ -1,441 +0,0 @@
-import GestureStateMachine from "../gesture-state-machine";
-
-import type {Handlers} from "../gesture-state-machine";
-
-const swipeThresholdPx = 5;
-const longPressWaitTimeMs = 5;
-const holdIntervalMs = 5;
-
-// Generates a set of handlers, to be passed to a GestureStateMachine instance,
-// that track any callbacks, along with their arguments, by pushing to the
-// provided buffer on call.
-const eventTrackers = (buffer) => {
-    const handlers = {};
-    const callbackNames = [
-        "onBlur",
-        "onFocus",
-        "onTrigger",
-        "onTouchEnd",
-        "onLongPress",
-        "onSwipeChange",
-        "onSwipeEnd",
-    ];
-    callbackNames.forEach((callbackName) => {
-        handlers[callbackName] = function () {
-            // eslint-disable-next-line prefer-rest-params
-            buffer.push([callbackName, ...arguments]);
-        };
-    });
-    return handlers as Handlers;
-};
-
-// Arbitrary node IDs (representative of arbitrary keys) to be used in testing.
-const NodeIds = {
-    first: "first",
-    second: "second",
-    third: "third",
-    swipeDisabled: "swipeDisabled",
-    multiPressable: "multiPressable",
-};
-
-describe("GestureStateMachine", () => {
-    let eventBuffer;
-    let stateMachine;
-
-    beforeEach(() => {
-        eventBuffer = [];
-        stateMachine = new GestureStateMachine(
-            eventTrackers(eventBuffer),
-            {
-                swipeThresholdPx,
-                longPressWaitTimeMs,
-                holdIntervalMs,
-            },
-            // @ts-expect-error TS2322
-            [NodeIds.swipeDisabled],
-            [NodeIds.multiPressable],
-        );
-    });
-
-    const assertEvents = (expectedEvents) => {
-        expect(eventBuffer).toStrictEqual(expectedEvents);
-    };
-
-    it("should trigger a tap on a simple button", () => {
-        const touchId = 1;
-
-        // Trigger a touch start, followed immediately by a touch end.
-        stateMachine.onTouchStart(() => NodeIds.first, touchId, 0);
-        stateMachine.onTouchEnd(() => NodeIds.first, touchId, 0);
-
-        // Assert that we saw a focus and a touch end, in that order.
-        const expectedEvents = [
-            ["onFocus", NodeIds.first],
-            ["onTouchEnd", NodeIds.first],
-        ];
-        assertEvents(expectedEvents);
-    });
-
-    it("should shift focus to a new button on move", () => {
-        const touchId = 1;
-
-        // Trigger a touch start on one node before moving over another node and
-        // releasing.
-        stateMachine.onTouchStart(() => NodeIds.first, touchId, 0);
-        stateMachine.onTouchMove(() => NodeIds.second, touchId, 0);
-        stateMachine.onTouchEnd(() => NodeIds.second, touchId, 0);
-
-        // Assert that we saw a focus on both nodes.
-        const expectedEvents = [
-            ["onFocus", NodeIds.first],
-            ["onFocus", NodeIds.second],
-            ["onTouchEnd", NodeIds.second],
-        ];
-        assertEvents(expectedEvents);
-    });
-
-    it("should trigger a long press on hold", () => {
-        const touchId = 1;
-
-        /// Trigger a touch start.
-        stateMachine.onTouchStart(() => NodeIds.first, touchId, 0);
-
-        // Assert that we see a focus event immediately.
-        const initialExpectedEvents = [["onFocus", NodeIds.first]];
-        assertEvents(initialExpectedEvents);
-
-        jest.advanceTimersByTime(longPressWaitTimeMs);
-
-        const expectedEventsAfterLongPress = [
-            ...initialExpectedEvents,
-            ["onLongPress", NodeIds.first],
-        ];
-        assertEvents(expectedEventsAfterLongPress);
-
-        // Finish up the interaction.
-        stateMachine.onTouchEnd(() => NodeIds.first, touchId, 0);
-
-        // Assert that we still see a touch-end.
-        const expectedEventsAfterRelease = [
-            ...expectedEventsAfterLongPress,
-            ["onTouchEnd", NodeIds.first],
-        ];
-        assertEvents(expectedEventsAfterRelease);
-    });
-
-    it("should trigger multiple presses on hold", () => {
-        const touchId = 1;
-
-        // Trigger a touch start on the multi-pressable node.
-        stateMachine.onTouchStart(() => NodeIds.multiPressable, touchId, 0);
-
-        // Assert that we see an immediate focus and trigger.
-        const initialExpectedEvents = [
-            ["onFocus", NodeIds.multiPressable],
-            ["onTrigger", NodeIds.multiPressable],
-        ];
-        assertEvents(initialExpectedEvents);
-
-        jest.advanceTimersByTime(holdIntervalMs);
-
-        // Assert that we see an additional trigger after the delay.
-        const expectedEventsAfterHold = [
-            ...initialExpectedEvents,
-            ["onTrigger", NodeIds.multiPressable],
-        ];
-        assertEvents(expectedEventsAfterHold);
-
-        // Now release, and verify that we see a blur, but no touch-end.
-        stateMachine.onTouchEnd(() => NodeIds.multiPressable, touchId, 0);
-        const expectedEventsAfterRelease = [
-            ...expectedEventsAfterHold,
-            ["onBlur"],
-        ];
-        assertEvents(expectedEventsAfterRelease);
-    });
-
-    it("should be robust to multiple touch starts", () => {
-        const touchId = 1;
-
-        // Trigger a touch start on the multi-pressable node twice, because
-        // the webview was acting up.
-        stateMachine.onTouchStart(() => NodeIds.multiPressable, touchId, 0);
-        stateMachine.onTouchStart(() => NodeIds.multiPressable, touchId, 0);
-
-        // Assert that we see only one set of focus and triggers.
-        const initialExpectedEvents = [
-            ["onFocus", NodeIds.multiPressable],
-            ["onTrigger", NodeIds.multiPressable],
-        ];
-        assertEvents(initialExpectedEvents);
-
-        jest.advanceTimersByTime(holdIntervalMs);
-
-        // Assert that we see an additional trigger after the delay.
-        const expectedEventsAfterHold = [
-            ...initialExpectedEvents,
-            ["onTrigger", NodeIds.multiPressable],
-        ];
-        assertEvents(expectedEventsAfterHold);
-
-        // Now release, and verify that we see a blur, but no touch-end.
-        stateMachine.onTouchEnd(() => NodeIds.multiPressable, touchId, 0);
-        const expectedEventsAfterRelease = [
-            ...expectedEventsAfterHold,
-            ["onBlur"],
-        ];
-        assertEvents(expectedEventsAfterRelease);
-
-        jest.advanceTimersByTime(holdIntervalMs);
-        // Ensure the touch end cleaned it up, and that we didn't
-        // create multiple listeners.
-        assertEvents(expectedEventsAfterRelease);
-    });
-
-    /* Swiping. */
-
-    it("should transition to a swipe", () => {
-        const touchId = 1;
-
-        // Trigger a touch start, followed by a move past the swipe threshold.
-        const startX = 0;
-        const swipeDistancePx = swipeThresholdPx + 1;
-        stateMachine.onTouchStart(() => NodeIds.first, touchId, startX);
-        stateMachine.onTouchMove(
-            () => NodeIds.first,
-            touchId,
-            startX + swipeDistancePx,
-            true,
-        );
-        stateMachine.onTouchEnd(
-            () => NodeIds.first,
-            touchId,
-            startX + swipeDistancePx,
-        );
-
-        // Assert that the node is focused and then blurred before transitioning
-        // to a swipe.
-        const expectedEvents = [
-            ["onFocus", NodeIds.first],
-            ["onBlur"],
-            ["onSwipeChange", swipeDistancePx],
-            ["onSwipeEnd", swipeDistancePx],
-        ];
-        assertEvents(expectedEvents);
-    });
-
-    it("should not transition to a swipe when swiping is diabled", () => {
-        const touchId = 1;
-
-        // Trigger a touch start, followed by a move past the swipe threshold.
-        const startX = 0;
-        const swipeDistancePx = swipeThresholdPx + 1;
-        stateMachine.onTouchStart(() => NodeIds.first, touchId, startX);
-        stateMachine.onTouchMove(
-            () => NodeIds.first,
-            touchId,
-            startX + swipeDistancePx,
-            false,
-        );
-
-        // Assert that the node is focused but never blurred.
-        const expectedEvents = [["onFocus", NodeIds.first]];
-        assertEvents(expectedEvents);
-    });
-
-    it("should not transition to a swipe on drag from a locked key", () => {
-        const touchId = 1;
-
-        // Trigger a touch start, followed by a move past the swipe threshold.
-        const startX = 0;
-        const swipeDistancePx = swipeThresholdPx + 1;
-        stateMachine.onTouchStart(() => NodeIds.swipeDisabled, touchId, startX);
-        stateMachine.onTouchMove(
-            () => NodeIds.swipeDisabled,
-            touchId,
-            startX + swipeDistancePx,
-            true,
-        );
-
-        // Assert that the node is focused but never blurred.
-        const expectedEvents = [["onFocus", NodeIds.swipeDisabled]];
-        assertEvents(expectedEvents);
-    });
-
-    /* Multi-touch. */
-
-    it("should respect simultaneous taps by two fingers", () => {
-        const firstTouchId = 1;
-        const secondTouchId = 2;
-
-        // Tap down on the first node, then on the second node; then release
-        // on the second, and then the first.
-        stateMachine.onTouchStart(() => NodeIds.first, firstTouchId, 0);
-        stateMachine.onTouchStart(() => NodeIds.second, secondTouchId, 0);
-        stateMachine.onTouchEnd(() => NodeIds.second, secondTouchId, 0);
-        stateMachine.onTouchEnd(() => NodeIds.first, firstTouchId, 0);
-
-        // Assert that we saw a focus and a touch end, in that order.
-        const expectedEvents = [
-            ["onFocus", NodeIds.first],
-            ["onFocus", NodeIds.second],
-            ["onTouchEnd", NodeIds.second],
-            ["onTouchEnd", NodeIds.first],
-        ];
-        assertEvents(expectedEvents);
-    });
-
-    it("should ignore any additional touches when swiping", () => {
-        const firstTouchId = 1;
-        const secondTouchId = 2;
-        const thirdTouchId = 3;
-
-        // Tap down on the first node, then on the second node. Then use the
-        const startX = 0;
-        stateMachine.onTouchStart(() => NodeIds.first, firstTouchId, startX);
-        stateMachine.onTouchStart(() => NodeIds.second, secondTouchId, startX);
-
-        // Now, swipe with the second finger.
-        const swipeDistancePx = swipeThresholdPx + 1;
-        stateMachine.onTouchMove(
-            () => NodeIds.second,
-            secondTouchId,
-            startX + swipeDistancePx,
-            true,
-        );
-
-        const expectedEventsAfterSwipeStart = [
-            ["onFocus", NodeIds.first],
-            ["onFocus", NodeIds.second],
-            ["onBlur"],
-            ["onSwipeChange", startX + swipeDistancePx],
-        ];
-        assertEvents(expectedEventsAfterSwipeStart);
-
-        // Send some touch events via the non-swiping but active touch,
-        // simulating moving the finger over another node, and even moving it
-        // enough to swipe, before releasing.
-        stateMachine.onTouchMove(() => NodeIds.first, firstTouchId, 0);
-        stateMachine.onTouchMove(() => NodeIds.third, firstTouchId, 0);
-        stateMachine.onTouchMove(
-            () => NodeIds.third,
-            firstTouchId,
-            startX + swipeDistancePx,
-            true,
-        );
-        stateMachine.onTouchEnd(() => NodeIds.third, firstTouchId, 0);
-
-        // Assert that we see no new events.
-        assertEvents(expectedEventsAfterSwipeStart);
-
-        // Start a new touch event, over any node.
-        stateMachine.onTouchStart(() => NodeIds.first, thirdTouchId, 0);
-
-        // Assert that we still see no new events.
-        assertEvents(expectedEventsAfterSwipeStart);
-
-        // Finally, release with the second finger, which is mid-swipe.
-        stateMachine.onTouchEnd(
-            () => NodeIds.second,
-            secondTouchId,
-            startX + swipeDistancePx,
-        );
-        const expectedEventsAfterSwipeEnd = [
-            ...expectedEventsAfterSwipeStart,
-            ["onSwipeEnd", startX + swipeDistancePx],
-        ];
-        assertEvents(expectedEventsAfterSwipeEnd);
-    });
-
-    it("should track swipe displacement on a per-finger basis", () => {
-        const firstTouchId = 1;
-        const firstTouchStartX = 15;
-        const secondTouchId = 2;
-        const secondTouchStartX = firstTouchStartX + 2 * swipeThresholdPx;
-
-        // Kick off two separate touch gestures at positions separated by more
-        // than the swipe displacement.
-        stateMachine.onTouchStart(
-            () => NodeIds.first,
-            firstTouchId,
-            firstTouchStartX,
-        );
-        stateMachine.onTouchStart(
-            () => NodeIds.second,
-            secondTouchId,
-            secondTouchStartX,
-        );
-
-        // Move less than the swipe threshold with both fingers.
-        stateMachine.onTouchMove(
-            () => NodeIds.first,
-            firstTouchId,
-            firstTouchStartX + swipeThresholdPx - 1,
-            true,
-        );
-        stateMachine.onTouchMove(
-            () => NodeIds.second,
-            secondTouchId,
-            secondTouchStartX + swipeThresholdPx - 1,
-            true,
-        );
-
-        // Assert that we haven't started swiping--all we've done is focused the
-        // various nodes.
-        const initialExpectedEvents = [
-            ["onFocus", NodeIds.first],
-            ["onFocus", NodeIds.second],
-        ];
-        assertEvents(initialExpectedEvents);
-
-        // Swipe past the threshold with one finger.
-        const swipeDistancePx = swipeThresholdPx + 1;
-        stateMachine.onTouchMove(
-            () => NodeIds.first,
-            firstTouchId,
-            firstTouchStartX + swipeDistancePx,
-            true,
-        );
-        const expectedEventsAfterSwipeStart = [
-            ...initialExpectedEvents,
-            ["onBlur"],
-            ["onSwipeChange", swipeDistancePx],
-        ];
-        assertEvents(expectedEventsAfterSwipeStart);
-    });
-
-    it("should be robust to extraneous fingers", () => {
-        const firstTouchId = 1;
-        const firstTouchStartX = 15;
-        const secondTouchId = 2;
-        const secondTouchStartX = firstTouchStartX + 2 * swipeThresholdPx;
-
-        // The first finger initiates a gesture, but the second finger starts
-        // elsewhere on the screen and doesn't register a start...
-        stateMachine.onTouchStart(
-            () => NodeIds.first,
-            firstTouchId,
-            firstTouchStartX,
-        );
-
-        // Move the first finger, but less than the swipe threshold, and then
-        // start showing move events from the second finger (as it slides into
-        // the components we care about on screen)
-        stateMachine.onTouchMove(
-            () => NodeIds.first,
-            firstTouchId,
-            firstTouchStartX + swipeThresholdPx - 1,
-            true,
-        );
-        stateMachine.onTouchMove(
-            () => NodeIds.second,
-            secondTouchId,
-            secondTouchStartX,
-            true,
-        );
-
-        // Assert we've started focusing but haven't blown up.
-        const initialExpectedEvents = [["onFocus", NodeIds.first]];
-        assertEvents(initialExpectedEvents);
-    });
-});