@khanacademy/math-input 21.1.0 → 21.1.2

package/dist/components/aphrodite-css-transition-group/util.d.ts

@@ -1,8 +1,5 @@
-/// <reference path="../../../types/aphrodite.d.ts" />
-import type { InAnimationStyles } from "./types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 export declare function processStyleType(style?: StyleType): {
     className: string;
     style: Record<any, any>;
 };
-export declare const createTransition: (styles: InAnimationStyles) => import("aphrodite").StyleDeclaration;

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

@@ -1,12 +1,7 @@
 import { CursorContext } from "./cursor-contexts";
 import type { MathFieldInterface } from "./mathquill-types";
 export declare function isFraction(node: any): boolean;
-export declare function isNumerator(node: any): boolean;
-export declare function isDenominator(node: any): boolean;
-export declare function isSubScript(node: any): boolean;
-export declare function isSuperScript(node: any): boolean;
 export declare function isParens(node: any): boolean;
-export declare function isLeaf(node: any): boolean;
 export declare function isSquareRoot(node: any): boolean;
 export declare function isNthRoot(node: any): boolean;
 export declare function isNthRootIndex(node: any): boolean;

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

@@ -11,12 +11,6 @@ export type MathFieldInterface = MathQuill.v3.EditableMathQuill & {
     cursor: () => MathQuill.Cursor;
     controller: () => MathQuill.Controller;
 };
-export declare enum MathFieldActionType {
-    WRITE = "write",
-    CMD = "cmd",
-    KEYSTROKE = "keystroke",
-    MQ_END = 0
-}
 export type MathFieldUpdaterCallback = (mathField: MathFieldInterface, key: Key) => void;
 /**
  * The MathQuill API (see mathuill.d.ts) does not include types
@@ -64,4 +58,3 @@ declare module "mathquill" {
         cursor?: Cursor;
     }
 }
-export type MathQuillAriaStatisStringsMap = MathQuill.v3.AriaStaticStringsMap;

package/dist/components/input/scroll-into-view.d.ts

@@ -8,5 +8,4 @@
  * TODO(charlie): Move this scroll logic out of our components and into a higher
  * level in the component tree--perhaps even into webapp, beyond Perseus.
  */
-export declare const toolbarHeightPx = 60;
 export declare const scrollIntoView: (containerNode: any, keypadNode: any) => void;

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

@@ -4,7 +4,7 @@ import type { ClickKeyCallback } from "../../types";
 import type { CursorContext } from "../input/cursor-contexts";
 import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
 export type Props = {
-    extraKeys: ReadonlyArray<Key>;
+    extraKeys?: ReadonlyArray<Key>;
     cursorContext?: (typeof CursorContext)[keyof typeof CursorContext];
     showDismiss?: boolean;
     expandedView?: boolean;
@@ -19,10 +19,4 @@ export type Props = {
     onClickKey: ClickKeyCallback;
     onAnalyticsEvent: AnalyticsEventHandlerFn;
 };
-declare function Keypad(props: Props): React.JSX.Element;
-declare namespace Keypad {
-    var defaultProps: {
-        extraKeys: never[];
-    };
-}
-export default Keypad;
+export default function Keypad({ extraKeys, ...props }: Props): React.JSX.Element;

package/dist/components/tabbar/item.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { KeypadPageType } from "../../types";
-export type ItemState = "active" | "inactive" | "disabled";
+type ItemState = "active" | "inactive" | "disabled";
 type TabItemProps = {
     onClick: () => void;
     itemState: ItemState;
@@ -9,5 +9,4 @@ type TabItemProps = {
     role: "tab" | "button";
 };
 declare function TabbarItem(props: TabItemProps): React.ReactElement;
-export declare const TabbarItemForTesting: typeof TabbarItem;
 export default TabbarItem;

package/dist/enums.d.ts

@@ -5,5 +5,6 @@ export declare enum KeypadType {
     FRACTION = "FRACTION",
     EXPRESSION = "EXPRESSION"
 }
-export declare const KeyTypes: string[];
+declare const KeyTypes: string[];
 export type KeyType = (typeof KeyTypes)[number];
+export {};

package/dist/es/index.js

@@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "21.1.0";
+const libVersion = "21.1.2";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -29,25 +29,6 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-// https://github.com/necolas/react-native-web/blob/master/src/components/Text/index.js
-StyleSheet.create({
-  initial: {
-    color: "inherit",
-    display: "inline",
-    font: "inherit",
-    margin: 0,
-    padding: 0,
-    textDecorationLine: "none",
-    wordWrap: "break-word"
-  },
-  singleLineStyle: {
-    maxWidth: "100%",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  }
-});
-
 class View extends React.Component {
   render() {
     const className = css(View.styles.initial, ...(Array.isArray(this.props.style) ? this.props.style : [this.props.style])) + (this.props.extraClassName ? ` ${this.props.extraClassName}` : "");
@@ -381,6 +362,14 @@ class DragListener {
   }
 }
 
+let MathFieldActionType = /*#__PURE__*/function (MathFieldActionType) {
+  MathFieldActionType["WRITE"] = "write";
+  MathFieldActionType["CMD"] = "cmd";
+  MathFieldActionType["KEYSTROKE"] = "keystroke";
+  MathFieldActionType[MathFieldActionType["MQ_END"] = 0] = "MQ_END";
+  return MathFieldActionType;
+}({});
+
 /**
  * Enum that defines the various contexts in which a cursor can exist. The
  * active context is determined first by looking at the cursor's siblings (e.g.,
@@ -554,29 +543,6 @@ function createMathField(container, locale, strings, configCallback) {
   return mathField;
 }
 
-/**
- * Editable math fields have all of the above methods in addition to
- * the ones listed here.
- * https://docs.mathquill.com/en/latest/Api_Methods/
- */
-
-let MathFieldActionType = /*#__PURE__*/function (MathFieldActionType) {
-  MathFieldActionType["WRITE"] = "write";
-  MathFieldActionType["CMD"] = "cmd";
-  MathFieldActionType["KEYSTROKE"] = "keystroke";
-  MathFieldActionType[MathFieldActionType["MQ_END"] = 0] = "MQ_END";
-  return MathFieldActionType;
-}({});
-
-/**
- * The MathQuill API (see mathuill.d.ts) does not include types
- * for cursor() and controller(), and adding these types there
- * in the MathQuill repo causes unexpected conflicts with other types.
- *
- * We don't want to use the cursor and controller default type `any`
- * so we declare the types here.
- */
-
 const Numerals = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const GreekLetters = ["\\theta", "\\pi"];
 const Letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
@@ -1159,27 +1125,20 @@ function handleJumpOut(mathField, key) {
   }
 }
 
-var ActionType = /*#__PURE__*/function (ActionType) {
-  ActionType["WRITE"] = "write";
-  ActionType["CMD"] = "cmd";
-  ActionType["KEYSTROKE"] = "keystroke";
-  ActionType[ActionType["MQ_END"] = 0] = "MQ_END";
-  return ActionType;
-}(ActionType || {});
-function buildGenericCallback(str, type = ActionType.WRITE) {
+function buildGenericCallback(str, type = MathFieldActionType.WRITE) {
   return function (mathQuill) {
     switch (type) {
-      case ActionType.WRITE:
+      case MathFieldActionType.WRITE:
         {
           mathQuill.write(str);
           return;
         }
-      case ActionType.CMD:
+      case MathFieldActionType.CMD:
         {
           mathQuill.cmd(str);
           return;
         }
-      case ActionType.KEYSTROKE:
+      case MathFieldActionType.KEYSTROKE:
         {
           mathQuill.keystroke(str);
           return;
@@ -1245,17 +1204,17 @@ const getKeyTranslator = (locale, strings) => ({
   TIMES: buildGenericCallback("\\times"),
   // The `FRAC_EXCLUSIVE` variant is handled manually, since we may need to do
   // some additional navigation depending on the cursor position.
-  FRAC_INCLUSIVE: buildGenericCallback("/", ActionType.CMD),
-  FRAC: buildGenericCallback("\\frac", ActionType.CMD),
-  LEFT_PAREN: buildGenericCallback("(", ActionType.CMD),
-  RIGHT_PAREN: buildGenericCallback(")", ActionType.CMD),
-  SQRT: buildGenericCallback("sqrt", ActionType.CMD),
-  PI: buildGenericCallback("pi", ActionType.CMD),
-  THETA: buildGenericCallback("theta", ActionType.CMD),
-  RADICAL: buildGenericCallback("nthroot", ActionType.CMD),
-  BACKSPACE: buildGenericCallback("Backspace", ActionType.KEYSTROKE),
-  UP: buildGenericCallback("Up", ActionType.KEYSTROKE),
-  DOWN: buildGenericCallback("Down", ActionType.KEYSTROKE),
+  FRAC_INCLUSIVE: buildGenericCallback("/", MathFieldActionType.CMD),
+  FRAC: buildGenericCallback("\\frac", MathFieldActionType.CMD),
+  LEFT_PAREN: buildGenericCallback("(", MathFieldActionType.CMD),
+  RIGHT_PAREN: buildGenericCallback(")", MathFieldActionType.CMD),
+  SQRT: buildGenericCallback("sqrt", MathFieldActionType.CMD),
+  PI: buildGenericCallback("pi", MathFieldActionType.CMD),
+  THETA: buildGenericCallback("theta", MathFieldActionType.CMD),
+  RADICAL: buildGenericCallback("nthroot", MathFieldActionType.CMD),
+  BACKSPACE: buildGenericCallback("Backspace", MathFieldActionType.KEYSTROKE),
+  UP: buildGenericCallback("Up", MathFieldActionType.KEYSTROKE),
+  DOWN: buildGenericCallback("Down", MathFieldActionType.KEYSTROKE),
   CUBE_ROOT: mathQuill => {
     mathQuill.write("\\sqrt[3]{}");
     mathQuill.keystroke("Left"); // under the root
@@ -1265,7 +1224,7 @@ const getKeyTranslator = (locale, strings) => ({
     const cursor = mathQuill.cursor();
     // If there's nothing to the left of the cursor, then we want to
     // leave the cursor to the left of the fraction after creating it.
-    const shouldNavigateLeft = cursor[mathQuillInstance.L] === ActionType.MQ_END;
+    const shouldNavigateLeft = cursor[mathQuillInstance.L] === MathFieldActionType.MQ_END;
     mathQuill.cmd("\\frac");
     if (shouldNavigateLeft) {
       mathQuill.keystroke("Left");
@@ -2381,6 +2340,16 @@ const inlineStyles = {
   }
 };
 
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
 const IconAsset = function IconAsset({
   tintColor,
   type
@@ -5111,9 +5080,7 @@ function SharedKeys(props) {
   }));
 }
 
-const defaultProps = {
-  extraKeys: []
-};
+const _excluded = ["extraKeys"];
 function getAvailableTabs(props) {
   var _props$extraKeys;
   // We don't want to show any available tabs on the fractions keypad
@@ -5137,7 +5104,11 @@ function getAvailableTabs(props) {
 
 // The main (v2) Keypad. Use this component to present an accessible, onscreen
 // keypad to learners for entering math expressions.
-function Keypad(props) {
+function Keypad(_ref) {
+  let {
+      extraKeys = []
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   // If we're using the Fractions keypad, we want to default select that page
   // Otherwise, we want to default to the Numbers page
   const defaultSelectedPage = props.fractionsOnly ? "Fractions" : "Numbers";
@@ -5145,11 +5116,12 @@ function Keypad(props) {
   const [isMounted, setIsMounted] = React.useState(false);
 
   // We don't want any tabs available on mobile fractions keypad
-  const availableTabs = getAvailableTabs(props);
+  const availableTabs = getAvailableTabs(_extends({}, props, {
+    extraKeys
+  }));
   const {
     onClickKey,
     cursorContext,
-    extraKeys,
     convertDotToTimes,
     divisionKey,
     preAlgebra,
@@ -5233,7 +5205,6 @@ function Keypad(props) {
     onClickKey: onClickKey
   }))));
 }
-Keypad.defaultProps = defaultProps;
 const styles$1 = StyleSheet.create({
   keypadOuterContainer: {
     display: "flex",