@khanacademy/math-input 5.0.1 → 6.0.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/math-input
 
+## 6.0.1
+
+### Patch Changes
+
+-   8d1745c1: Removed double focus outline from keypad buttons
+
+## 6.0.0
+
+### Major Changes
+
+-   36e3a212: Make v2 keypad dismiss button optional, hidden by default
+
+### Patch Changes
+
+-   fa735526: Fix issue with uses of CursorContext not being converted by flowgen
+
 ## 5.0.1
 
 ### Patch Changes

package/dist/components/input/cursor-contexts.d.ts

@@ -9,12 +9,12 @@
  * now, we show the dismiss button rather than allowing the user to jump out of
  * the radical.
  */
-export declare enum CursorContext {
-    NONE = "NONE",
-    IN_PARENS = "IN_PARENS",
-    IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT",
-    IN_SUB_SCRIPT = "IN_SUB_SCRIPT",
-    IN_NUMERATOR = "IN_NUMERATOR",
-    IN_DENOMINATOR = "IN_DENOMINATOR",
-    BEFORE_FRACTION = "BEFORE_FRACTION"
-}
+export declare const CursorContext: {
+    readonly NONE: "NONE";
+    readonly IN_PARENS: "IN_PARENS";
+    readonly IN_SUPER_SCRIPT: "IN_SUPER_SCRIPT";
+    readonly IN_SUB_SCRIPT: "IN_SUB_SCRIPT";
+    readonly IN_NUMERATOR: "IN_NUMERATOR";
+    readonly IN_DENOMINATOR: "IN_DENOMINATOR";
+    readonly BEFORE_FRACTION: "BEFORE_FRACTION";
+};

package/dist/components/input/cursor-contexts.js.flow

@@ -15,13 +15,12 @@
  * now, we show the dismiss button rather than allowing the user to jump out of
  * the radical.
  */
-
 declare export var CursorContext: {|
-  +NONE: "NONE", // "NONE"
-  +IN_PARENS: "IN_PARENS", // "IN_PARENS"
-  +IN_SUPER_SCRIPT: "IN_SUPER_SCRIPT", // "IN_SUPER_SCRIPT"
-  +IN_SUB_SCRIPT: "IN_SUB_SCRIPT", // "IN_SUB_SCRIPT"
-  +IN_NUMERATOR: "IN_NUMERATOR", // "IN_NUMERATOR"
-  +IN_DENOMINATOR: "IN_DENOMINATOR", // "IN_DENOMINATOR"
-  +BEFORE_FRACTION: "BEFORE_FRACTION", // "BEFORE_FRACTION"
+  +NONE: "NONE",
+  +IN_PARENS: "IN_PARENS",
+  +IN_SUPER_SCRIPT: "IN_SUPER_SCRIPT",
+  +IN_SUB_SCRIPT: "IN_SUB_SCRIPT",
+  +IN_NUMERATOR: "IN_NUMERATOR",
+  +IN_DENOMINATOR: "IN_DENOMINATOR",
+  +BEFORE_FRACTION: "BEFORE_FRACTION",
 |};

package/dist/components/input/math-wrapper.d.ts

@@ -31,7 +31,7 @@ declare class MathWrapper {
      */
     setCursorPosition(x: number, y: number, hitNode: HTMLElement): void;
     getCursor(): any;
-    contextForCursor(): import("./cursor-contexts").CursorContext;
+    contextForCursor(): "NONE" | "IN_PARENS" | "IN_SUPER_SCRIPT" | "IN_SUB_SCRIPT" | "IN_NUMERATOR" | "IN_DENOMINATOR" | "BEFORE_FRACTION";
     getSelection(): any;
     getContent(): string;
     setContent(latex: string): void;

package/dist/components/input/math-wrapper.js.flow

@@ -4,7 +4,6 @@
  * Flowgen v1.21.0
  * @flow
  */
-import * as $Flowgen$Import$_2e__2f_cursor_2d_contexts from "./cursor-contexts";
 import Key from "../../data/keys";
 import { Cursor } from "../../types";
 import { MathFieldInterface } from "./mathquill-types";
@@ -39,7 +38,14 @@ declare class MathWrapper {
    */
   setCursorPosition(x: number, y: number, hitNode: HTMLElement): void;
   getCursor(): any;
-  contextForCursor(): $Flowgen$Import$_2e__2f_cursor_2d_contexts.CursorContext;
+  contextForCursor():
+    | "NONE"
+    | "IN_PARENS"
+    | "IN_SUPER_SCRIPT"
+    | "IN_SUB_SCRIPT"
+    | "IN_NUMERATOR"
+    | "IN_DENOMINATOR"
+    | "BEFORE_FRACTION";
   getSelection(): any;
   getContent(): string;
   setContent(latex: string): void;

package/dist/components/input/mathquill-helpers.d.ts

@@ -43,4 +43,4 @@ export declare function maybeFindCommandBeforeParens(leftParenNode: any): {
     startNode: any;
     endNode: any;
 } | null;
-export declare function getCursorContext(mathField?: MathFieldInterface): CursorContext;
+export declare function getCursorContext(mathField?: MathFieldInterface): typeof CursorContext[keyof typeof CursorContext];

package/dist/components/input/mathquill-helpers.js.flow

@@ -53,4 +53,4 @@ declare export function maybeFindCommandBeforeParens(leftParenNode: any): {|
 |} | null;
 declare export function getCursorContext(
   mathField?: MathFieldInterface
-): CursorContext;
+): $ElementType<typeof CursorContext, $Keys<typeof CursorContext>>;

package/dist/components/keypad/index.d.ts

@@ -4,16 +4,17 @@ import { ClickKeyCallback } from "../../types";
 import { CursorContext } from "../input/cursor-contexts";
 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;
 };
 declare function Keypad(props: Props): JSX.Element;

package/dist/components/keypad/index.js.flow

@@ -9,16 +9,20 @@ import { ClickKeyCallback } from "../../types";
 import { CursorContext } from "../input/cursor-contexts";
 import type { SendEventFn } from "@khanacademy/perseus-core";
 export type Props = {|
-  onClickKey: ClickKeyCallback,
-  cursorContext?: CursorContext,
-  trigonometry?: boolean,
   extraKeys: $ReadOnlyArray<Key>,
+  cursorContext?: $ElementType<
+    typeof CursorContext,
+    $Keys<typeof CursorContext>
+  >,
+  showDismiss?: boolean,
   multiplicationDot?: boolean,
   divisionKey?: boolean,
+  trigonometry?: boolean,
   preAlgebra?: boolean,
   logarithms?: boolean,
   basicRelations?: boolean,
   advancedRelations?: boolean,
+  onClickKey: ClickKeyCallback,
   sendEvent: SendEventFn,
 |};
 declare var Keypad: typeof npm$namespace$Keypad;

package/dist/components/keypad/shared-keys.d.ts

@@ -5,7 +5,7 @@ import { TabbarItemType } from "../tabbar/types";
 type Props = {
     onClickKey: ClickKeyCallback;
     selectedPage: TabbarItemType;
-    cursorContext?: CursorContext;
+    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
     multiplicationDot?: boolean;
     divisionKey?: boolean;
 };

package/dist/components/keypad/shared-keys.js.flow

@@ -10,7 +10,10 @@ import { TabbarItemType } from "../tabbar/types";
 declare type Props = {|
   onClickKey: ClickKeyCallback,
   selectedPage: TabbarItemType,
-  cursorContext?: CursorContext,
+  cursorContext?: $ElementType<
+    typeof CursorContext,
+    $Keys<typeof CursorContext>
+  >,
   multiplicationDot?: boolean,
   divisionKey?: boolean,
 |};

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

@@ -5,7 +5,7 @@ import * as React from "react";
 import { CursorContext } from "../input/cursor-contexts";
 import type { KeypadLayout } from "../../types";
 interface ReduxProps {
-    cursorContext?: CursorContext;
+    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
     dynamicJumpOut: boolean;
 }
 interface Props extends ReduxProps {

package/dist/components/keypad-legacy/expression-keypad.js.flow

@@ -9,7 +9,10 @@ import * as React from "react";
 import { CursorContext } from "../input/cursor-contexts";
 import type { KeypadLayout } from "../../types";
 declare interface ReduxProps {
-  cursorContext?: CursorContext;
+  cursorContext?: $ElementType<
+    typeof CursorContext,
+    $Keys<typeof CursorContext>
+  >;
   dynamicJumpOut: boolean;
 }
 declare type Props = {

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

@@ -6,7 +6,7 @@ import * as React from "react";
 import { CursorContext } from "../input/cursor-contexts";
 import type { KeypadLayout } from "../../types";
 interface ReduxProps {
-    cursorContext?: CursorContext;
+    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
     dynamicJumpOut: boolean;
 }
 interface Props extends ReduxProps {

package/dist/components/keypad-legacy/fraction-keypad.js.flow

@@ -9,7 +9,10 @@ import * as React from "react";
 import { CursorContext } from "../input/cursor-contexts";
 import type { KeypadLayout } from "../../types";
 declare interface ReduxProps {
-  cursorContext?: CursorContext;
+  cursorContext?: $ElementType<
+    typeof CursorContext,
+    $Keys<typeof CursorContext>
+  >;
   dynamicJumpOut: boolean;
 }
 declare type Props = {

package/dist/es/index.js

@@ -27,16 +27,25 @@ import * as Redux from 'redux';
  * the radical.
  */
 
-let CursorContext = /*#__PURE__*/function (CursorContext) {
-  CursorContext["NONE"] = "NONE";
-  CursorContext["IN_PARENS"] = "IN_PARENS";
-  CursorContext["IN_SUPER_SCRIPT"] = "IN_SUPER_SCRIPT";
-  CursorContext["IN_SUB_SCRIPT"] = "IN_SUB_SCRIPT";
-  CursorContext["IN_NUMERATOR"] = "IN_NUMERATOR";
-  CursorContext["IN_DENOMINATOR"] = "IN_DENOMINATOR";
-  CursorContext["BEFORE_FRACTION"] = "BEFORE_FRACTION";
-  return CursorContext;
-}({});
+const CursorContext = {
+  // The cursor is not in any of the other viable contexts.
+  NONE: "NONE",
+  // The cursor is within a set of parentheses.
+  IN_PARENS: "IN_PARENS",
+  // The cursor is within a superscript (e.g., an exponent).
+  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",
+  // The cursor is in the numerator of a fraction.
+  IN_NUMERATOR: "IN_NUMERATOR",
+  // The cursor is in the denominator of a fraction.
+  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"
+};
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -4899,6 +4908,11 @@ const styles$8 = StyleSheet.create({
     width: 36,
     height: 3,
     marginLeft: 3
+  },
+  clickable: {
+    ":focus": {
+      outline: `none`
+    }
   }
 });
 function imageTintColor(itemState, hovered, focused, pressed) {
@@ -4924,6 +4938,7 @@ class TabbarItem extends React.Component {
       onClick: onClick,
       disabled: itemState === "disabled",
       "aria-label": itemType,
+      style: styles$8.clickable,
       "aria-selected": itemState === "active",
       role: "tab"
     }, ({
@@ -8254,7 +8269,7 @@ const KeypadButton = ({
     pressed
   }) => {
     return /*#__PURE__*/React.createElement(View$1, {
-      style: [styles$1.outerBoxBase, hovered && styles$1.outerBoxHover, pressed && styles$1.outerBoxPressed]
+      style: [styles$1.outerBoxBase]
     }, /*#__PURE__*/React.createElement(View$1, {
       style: [styles$1.base, tintColor != null ? {
         background: tintColor
@@ -8280,7 +8295,7 @@ const styles$1 = StyleSheet.create({
     padding: 1
   },
   hovered: {
-    border: `1px solid ${Color.blue}`,
+    border: `2px solid ${Color.blue}`,
     padding: 1,
     boxShadow: "none"
   },
@@ -8303,16 +8318,13 @@ const styles$1 = StyleSheet.create({
     borderRadius: 7,
     border: "2px solid transparent"
   },
-  outerBoxHover: {
-    border: `2px solid ${Color.blue}`
-  },
-  outerBoxPressed: {
-    border: "2px solid #1B50B3"
-  },
   clickable: {
     width: "100%",
     height: "100%",
-    boxSizing: "border-box"
+    boxSizing: "border-box",
+    ":focus": {
+      outline: `none`
+    }
   }
 });
 
@@ -8595,7 +8607,8 @@ function Keypad(props) {
     preAlgebra,
     logarithms,
     basicRelations,
-    advancedRelations
+    advancedRelations,
+    showDismiss
   } = props;
   return /*#__PURE__*/React.createElement(View$1, null, /*#__PURE__*/React.createElement(Tabbar, {
     items: availablePages,
@@ -8604,7 +8617,7 @@ function Keypad(props) {
       setSelectedPage(tabbarItem);
     },
     style: styles.tabbar,
-    onClickClose: () => onClickKey("DISMISS")
+    onClickClose: showDismiss ? () => onClickKey("DISMISS") : undefined
   }), /*#__PURE__*/React.createElement(View$1, {
     style: styles.grid,
     role: "grid",