@khanacademy/math-input 5.0.1 → 6.0.0

package/dist/types.d.ts

@@ -1,6 +1,6 @@
+import { CursorContext } from "./components/input/cursor-contexts";
 import Key from "./data/keys";
 import { BorderDirection, EchoAnimationType, IconType, KeyType, KeypadType } from "./enums";
-import type { CursorContext } from "./components/input/cursor-contexts";
 export type Border = Partial<ReadonlyArray<BorderDirection>>;
 export interface Bound {
     top: number;
@@ -42,7 +42,7 @@ export type KeypadConfiguration = {
 };
 export type KeyHandler = (key: Key) => Cursor;
 export type Cursor = {
-    context: CursorContext;
+    context: typeof CursorContext[keyof typeof CursorContext];
 };
 export type KeypadLayout = {
     rows: number;

package/dist/types.js.flow

@@ -4,6 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
+import { CursorContext } from "./components/input/cursor-contexts";
 import Key from "./data/keys";
 import {
   BorderDirection,
@@ -12,7 +13,6 @@ import {
   KeyType,
   KeypadType,
 } from "./enums";
-import type { CursorContext } from "./components/input/cursor-contexts";
 export type Border = $Rest<$ReadOnlyArray<BorderDirection>, {}>;
 export interface Bound {
   top: number;
@@ -57,7 +57,7 @@ export type KeypadConfiguration = {|
 |};
 export type KeyHandler = (key: Key) => Cursor;
 export type Cursor = {|
-  context: CursorContext,
+  context: $ElementType<typeof CursorContext, $Keys<typeof CursorContext>>,
 |};
 export type KeypadLayout = {|
   rows: number,

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "5.0.1",
+    "version": "6.0.0",
     "publishConfig": {
         "access": "public"
     },

package/src/components/input/cursor-contexts.ts

@@ -10,28 +10,28 @@
  * the radical.
  */
 
-export enum CursorContext {
+export const CursorContext = {
     // The cursor is not in any of the other viable contexts.
-    NONE = "NONE",
+    NONE: "NONE",
 
     // The cursor is within a set of parentheses.
-    IN_PARENS = "IN_PARENS",
+    IN_PARENS: "IN_PARENS",
 
     // The cursor is within a superscript (e.g., an exponent).
-    IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT",
+    IN_SUPER_SCRIPT: "IN_SUPER_SCRIPT",
 
     // The cursor is within a subscript (e.g., the base of a custom logarithm).
-    IN_SUB_SCRIPT = "IN_SUB_SCRIPT",
+    IN_SUB_SCRIPT: "IN_SUB_SCRIPT",
 
     // The cursor is in the numerator of a fraction.
-    IN_NUMERATOR = "IN_NUMERATOR",
+    IN_NUMERATOR: "IN_NUMERATOR",
 
     // The cursor is in the denominator of a fraction.
-    IN_DENOMINATOR = "IN_DENOMINATOR",
+    IN_DENOMINATOR: "IN_DENOMINATOR",
 
     // The cursor is sitting before a fraction; that is, the cursor is within
     // what looks to be a mixed number preceding a fraction. This will only be
     // the case when the only math between the cursor and the fraction to its
     // write is non-leaf math (numbers and variables).
-    BEFORE_FRACTION = "BEFORE_FRACTION",
-}
+    BEFORE_FRACTION: "BEFORE_FRACTION",
+} as const;

package/src/components/input/mathquill-helpers.ts

@@ -240,7 +240,7 @@ export function maybeFindCommandBeforeParens(leftParenNode) {
 
 export function getCursorContext(
     mathField?: MathFieldInterface,
-): CursorContext {
+): typeof CursorContext[keyof typeof CursorContext] {
     if (!mathField) {
         return CursorContext.NONE;
     }

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

@@ -1,5 +1,6 @@
 import {render, screen} from "@testing-library/react";
 import * as React from "react";
+import "@testing-library/jest-dom";
 
 import keyConfigs from "../../../data/key-configs";
 import {CursorContext} from "../../input/cursor-contexts";
@@ -23,7 +24,9 @@ describe("keypad", () => {
                 render(
                     <Keypad
                         onClickKey={() => {}}
-                        cursorContext={context as CursorContext}
+                        cursorContext={
+                            context as typeof CursorContext[keyof typeof CursorContext]
+                        }
                         sendEvent={async () => {
                             /* TODO: verify correct analytics event sent */
                         }}
@@ -35,8 +38,40 @@ describe("keypad", () => {
                     screen.getByRole("button", {
                         name: ariaLabel,
                     }),
-                );
+                ).toBeInTheDocument();
             });
         });
     });
+
+    it(`shows optional dismiss button`, () => {
+        // Arrange
+        // Act
+        render(
+            <Keypad
+                onClickKey={() => {}}
+                sendEvent={async () => {}}
+                showDismiss
+            />,
+        );
+
+        // Assert
+        expect(
+            screen.getByRole("tab", {
+                name: "Dismiss",
+            }),
+        ).toBeInTheDocument();
+    });
+
+    it(`hides optional dismiss button`, () => {
+        // Arrange
+        // Act
+        render(<Keypad onClickKey={() => {}} sendEvent={async () => {}} />);
+
+        // Assert
+        expect(
+            screen.queryByRole("tab", {
+                name: "Dismiss",
+            }),
+        ).not.toBeInTheDocument();
+    });
 });

package/src/components/keypad/index.tsx

@@ -18,17 +18,20 @@ import SharedKeys from "./shared-keys";
 import type {SendEventFn} from "@khanacademy/perseus-core";
 
 export type Props = {
-    onClickKey: ClickKeyCallback;
-    cursorContext?: CursorContext;
-    trigonometry?: boolean;
     extraKeys: ReadonlyArray<Key>;
+    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
+    showDismiss?: boolean;
+
     multiplicationDot?: boolean;
     divisionKey?: boolean;
+
+    trigonometry?: boolean;
     preAlgebra?: boolean;
     logarithms?: boolean;
     basicRelations?: boolean;
     advancedRelations?: boolean;
 
+    onClickKey: ClickKeyCallback;
     sendEvent: SendEventFn;
 };
 
@@ -78,6 +81,7 @@ export default function Keypad(props: Props) {
         logarithms,
         basicRelations,
         advancedRelations,
+        showDismiss,
     } = props;
 
     return (
@@ -89,7 +93,9 @@ export default function Keypad(props: Props) {
                     setSelectedPage(tabbarItem);
                 }}
                 style={styles.tabbar}
-                onClickClose={() => onClickKey("DISMISS")}
+                onClickClose={
+                    showDismiss ? () => onClickKey("DISMISS") : undefined
+                }
             />
 
             <View

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

@@ -18,9 +18,9 @@ export default {
 export function V2KeypadWithMathquill() {
     const mathFieldWrapperRef = React.useRef<HTMLDivElement>(null);
     const [mathField, setMathField] = React.useState<MathFieldInterface>();
-    const [cursorContext, setCursorContext] = React.useState<CursorContext>(
-        CursorContext.NONE,
-    );
+    const [cursorContext, setCursorContext] = React.useState<
+        typeof CursorContext[keyof typeof CursorContext]
+    >(CursorContext.NONE);
 
     React.useEffect(() => {
         if (!mathField && mathFieldWrapperRef.current) {

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

@@ -10,12 +10,14 @@ import {KeypadButton} from "./keypad-button";
 type Props = {
     onClickKey: ClickKeyCallback;
     selectedPage: TabbarItemType;
-    cursorContext?: CursorContext;
+    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
     multiplicationDot?: boolean;
     divisionKey?: boolean;
 };
 
-function getCursorContextConfig(cursorContext?: CursorContext) {
+function getCursorContextConfig(
+    cursorContext?: typeof CursorContext[keyof typeof CursorContext],
+) {
     if (!cursorContext) {
         return null;
     }

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

@@ -24,7 +24,7 @@ const {row, column, oneColumn, fullWidth, roundedTopLeft, roundedTopRight} =
     Styles;
 
 interface ReduxProps {
-    cursorContext?: CursorContext;
+    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
     dynamicJumpOut: boolean;
 }
 

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

@@ -21,7 +21,7 @@ import type {State} from "./store/types";
 const {row, roundedTopLeft, roundedTopRight} = Styles;
 
 interface ReduxProps {
-    cursorContext?: CursorContext;
+    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
     dynamicJumpOut: boolean;
 }
 

package/src/types.ts

@@ -1,3 +1,4 @@
+import {CursorContext} from "./components/input/cursor-contexts";
 import Key from "./data/keys";
 import {
     BorderDirection,
@@ -7,8 +8,6 @@ import {
     KeypadType,
 } from "./enums";
 
-import type {CursorContext} from "./components/input/cursor-contexts";
-
 export type Border = Partial<ReadonlyArray<BorderDirection>>;
 
 export interface Bound {
@@ -60,7 +59,7 @@ export type KeypadConfiguration = {
 export type KeyHandler = (key: Key) => Cursor;
 
 export type Cursor = {
-    context: CursorContext;
+    context: typeof CursorContext[keyof typeof CursorContext];
 };
 
 export type KeypadLayout = {