@khanacademy/math-input 22.2.6 → 23.0.0

package/LICENSE

@@ -0,0 +1,18 @@
+Copyright 2022 Khan Academy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
+Software, and to permit persons to whom the Software is furnished to do so, subject
+to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -11,8 +11,8 @@ Try it yourself on [Khan Academy](https://www.khanacademy.org/math/algebra-basic
 ## Getting started
 
 - Clone the project: `git clone git@github.com:Khan/math-input.git`
-- Install dependencies: `yarn`
-- Start the development server: `yarn start`
+- Install dependencies: `pnpm install`
+- Start the development server: `pnpm start`
 
 When you start the project you'll need to be on a device that supports touch or touch emulation to see the keyboard. The easiest way to get started is open the developer tools on Google Chrome.
 

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

@@ -1,6 +1,6 @@
 import type { MathFieldInterface, MathFieldUpdaterCallback } from "./mathquill-types";
-import type Key from "../../data/keys";
 import type { MathInputStrings } from "../../strings";
+import type { KeypadKey } from "@khanacademy/perseus-core";
 /**
  * This file contains a wrapper around MathQuill so that we can provide a
  * more regular interface for the functionality we need while insulating us
@@ -9,7 +9,7 @@ import type { MathInputStrings } from "../../strings";
 declare class MathWrapper {
     mathField: MathFieldInterface;
     callbacks: any;
-    mobileKeyTranslator: Record<Key, MathFieldUpdaterCallback>;
+    mobileKeyTranslator: Record<KeypadKey, MathFieldUpdaterCallback>;
     constructor(mathFieldMount: any, ariaLabel: string, strings: MathInputStrings, locale: string, callbacks?: {});
     focus(): void;
     blur(): void;
@@ -19,7 +19,7 @@ declare class MathWrapper {
      * @param {Key} key - an enum representing the key that was pressed
      * @returns {object} a cursor object, consisting of a cursor context
      */
-    pressKey(key: Key): {
+    pressKey(key: KeypadKey): {
         context: import("./cursor-contexts").CursorContext;
     };
     /**

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

@@ -1,4 +1,4 @@
-import type Key from "../../data/keys";
+import type { KeypadKey } from "@khanacademy/perseus-core";
 import type MathQuill from "mathquill";
 export type MathQuillInterface = MathQuill.v3.API;
 export type MathFieldConfig = MathQuill.v3.Config;
@@ -11,7 +11,7 @@ export type MathFieldInterface = MathQuill.v3.EditableMathQuill & {
     cursor: () => MathQuill.Cursor;
     controller: () => MathQuill.Controller;
 };
-export type MathFieldUpdaterCallback = (mathField: MathFieldInterface, key: Key) => void;
+export type MathFieldUpdaterCallback = (mathField: MathFieldInterface, key: KeypadKey) => void;
 /**
  * The MathQuill API (see mathuill.d.ts) does not include types
  * for cursor() and controller(), and adding these types there

package/dist/components/key-handlers/handle-arrow.d.ts

@@ -1,3 +1,3 @@
-import type Key from "../../data/keys";
 import type { MathFieldInterface } from "../input/mathquill-types";
-export default function handleArrow(mathField: MathFieldInterface, key: Key): void;
+import type { KeypadKey } from "@khanacademy/perseus-core";
+export default function handleArrow(mathField: MathFieldInterface, key: KeypadKey): void;

package/dist/components/key-handlers/handle-exponent.d.ts

@@ -1,3 +1,3 @@
-import type Key from "../../data/keys";
 import type { MathFieldInterface } from "../input/mathquill-types";
-export default function handleExponent(mathField: MathFieldInterface, key: Key): void;
+import type { KeypadKey } from "@khanacademy/perseus-core";
+export default function handleExponent(mathField: MathFieldInterface, key: KeypadKey): void;

package/dist/components/key-handlers/handle-jump-out.d.ts

@@ -1,7 +1,7 @@
-import type Key from "../../data/keys";
 import type { MathFieldInterface } from "../input/mathquill-types";
+import type { KeypadKey } from "@khanacademy/perseus-core";
 /**
  * Advances the cursor to the next logical position.
  */
-declare function handleJumpOut(mathField: MathFieldInterface, key: Key): void;
+declare function handleJumpOut(mathField: MathFieldInterface, key: KeypadKey): void;
 export default handleJumpOut;

package/dist/components/key-handlers/key-translator.d.ts

@@ -1,9 +1,9 @@
-import type Key from "../../data/keys";
 import type { MathFieldUpdaterCallback } from "../input/mathquill-types";
+import type { KeypadKey } from "@khanacademy/perseus-core";
 type KeyTranslatorStrings = {
     sin: string;
     cos: string;
     tan: string;
 };
-export declare const getKeyTranslator: (locale: string, strings: KeyTranslatorStrings) => Record<Key, MathFieldUpdaterCallback>;
+export declare const getKeyTranslator: (locale: string, strings: KeyTranslatorStrings) => Record<KeypadKey, MathFieldUpdaterCallback>;
 export {};

package/dist/components/keypad/button-assets.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import type Key from "../../data/keys";
+import type { KeypadKey } from "@khanacademy/perseus-core";
 type Props = {
-    id: Key;
+    id: KeypadKey;
 };
 export default function ButtonAsset({ id }: Props): React.ReactNode;
 export {};

package/dist/components/keypad/keypad-pages/extras-page.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import type Key from "../../../data/keys";
 import type { ClickKeyCallback } from "../../../types";
+import type { KeypadKey } from "@khanacademy/perseus-core";
 type Props = {
-    extraKeys: ReadonlyArray<Key>;
+    extraKeys: ReadonlyArray<KeypadKey>;
     onClickKey: ClickKeyCallback;
 };
 export default function ExtrasPage(props: Props): React.JSX.Element;

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

@@ -1,10 +1,9 @@
 import * as React from "react";
-import type Key from "../../data/keys";
 import type { ClickKeyCallback } from "../../types";
 import type { CursorContext } from "../input/cursor-contexts";
-import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
+import type { AnalyticsEventHandlerFn, KeypadKey } from "@khanacademy/perseus-core";
 type Props = {
-    extraKeys?: ReadonlyArray<Key>;
+    extraKeys?: ReadonlyArray<KeypadKey>;
     cursorContext?: (typeof CursorContext)[keyof typeof CursorContext];
     showDismiss?: boolean;
     expandedView?: boolean;

package/dist/components/keypad/mobile-keypad-internals.d.ts

@@ -1,8 +1,7 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
-import type Key from "../../data/keys";
-import type { Cursor, KeypadConfiguration, KeyHandler, KeypadAPI } from "../../types";
-import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
+import type { Cursor, KeyHandler, KeypadAPI } from "../../types";
+import type { AnalyticsEventHandlerFn, KeypadConfiguration, KeypadKey } from "@khanacademy/perseus-core";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
     onElementMounted?: (arg1: any) => void;
@@ -43,7 +42,7 @@ declare class MobileKeypadInternals extends React.Component<Props, State> implem
     setCursor: (cursor: Cursor) => void;
     setKeyHandler: (keyHandler: KeyHandler) => void;
     getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode>;
-    _handleClickKey(key: Key): void;
+    _handleClickKey(key: KeypadKey): void;
     render(): React.ReactNode;
 }
 export default MobileKeypadInternals;

package/dist/components/prop-types.d.ts

@@ -1,12 +1,4 @@
 /**
  * React PropTypes that may be shared between components.
  */
-import PropTypes from "prop-types";
-export declare const keypadElementPropType: PropTypes.Requireable<PropTypes.InferProps<{
-    activate: PropTypes.Validator<(...args: any[]) => any>;
-    dismiss: PropTypes.Validator<(...args: any[]) => any>;
-    configure: PropTypes.Validator<(...args: any[]) => any>;
-    setCursor: PropTypes.Validator<(...args: any[]) => any>;
-    setKeyHandler: PropTypes.Validator<(...args: any[]) => any>;
-    getDOMNode: PropTypes.Validator<(...args: any[]) => any>;
-}>>;
+export declare const keypadElementPropType: any;

package/dist/data/key-configs.d.ts

@@ -1,8 +1,8 @@
 /**
  * This file contains configuration settings for the buttons in the keypad.
  */
-import type Key from "./keys";
 import type { MathInputStrings } from "../strings";
 import type { KeyConfig } from "../types";
-declare const KeyConfigs: (strings: MathInputStrings) => { [key in Key]: KeyConfig; };
+import type { KeypadKey } from "@khanacademy/perseus-core";
+declare const KeyConfigs: (strings: MathInputStrings) => { [key in KeypadKey]: KeyConfig; };
 export default KeyConfigs;

package/dist/data/keys.d.ts

@@ -1,3 +0,0 @@
-export declare const KeyArray: readonly ["PLUS", "MINUS", "NEGATIVE", "TIMES", "DIVIDE", "DECIMAL", "PERIOD", "PERCENT", "CDOT", "EQUAL", "NEQ", "GT", "LT", "GEQ", "LEQ", "FRAC_INCLUSIVE", "FRAC_EXCLUSIVE", "FRAC", "EXP", "EXP_2", "EXP_3", "SQRT", "CUBE_ROOT", "RADICAL", "LEFT_PAREN", "RIGHT_PAREN", "LN", "LOG", "LOG_N", "SIN", "COS", "TAN", "PI", "THETA", "UP", "RIGHT", "DOWN", "LEFT", "BACKSPACE", "DISMISS", "JUMP_OUT_PARENTHESES", "JUMP_OUT_EXPONENT", "JUMP_OUT_BASE", "JUMP_INTO_NUMERATOR", "JUMP_OUT_NUMERATOR", "JUMP_OUT_DENOMINATOR", "NUM_0", "NUM_1", "NUM_2", "NUM_3", "NUM_4", "NUM_5", "NUM_6", "NUM_7", "NUM_8", "NUM_9", "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", "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"];
-type Key = (typeof KeyArray)[number];
-export default Key;

package/dist/enums.d.ts

@@ -1,10 +1,6 @@
 /**
  * Constants that are shared between multiple files.
  */
-export declare enum KeypadType {
-    FRACTION = "FRACTION",
-    EXPRESSION = "EXPRESSION"
-}
 declare const KeyTypes: string[];
 export type KeyType = (typeof KeyTypes)[number];
 export {};

package/dist/es/index.js

@@ -1,4 +1,4 @@
-import { addLibraryVersionToPerseusDebug, getDecimalSeparator } from '@khanacademy/perseus-core';
+import _extends from '@babel/runtime/helpers/extends';
 import { KeypadContext } from '@khanacademy/keypad-context';
 import { color } from '@khanacademy/wonder-blocks-tokens';
 import { entries } from '@khanacademy/wonder-stuff-core';
@@ -8,27 +8,61 @@ import { useContext, useRef, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { SpeechRuleEngine } from '@khanacademy/mathjax-renderer';
 import MathQuill from 'mathquill';
+import { getDecimalSeparator } from '@khanacademy/perseus-core';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { View as View$1 } from '@khanacademy/wonder-blocks-core';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { TransitionGroup } from 'react-transition-group';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import PropTypes from 'prop-types';
 
+/**
+ * Adds the given perseus library version information to the __perseus_debug__
+ * object and ensures that the object is attached to `globalThis` (`window` in
+ * browser environments).
+ *
+ * This allows each library to provide runtime version information to assist in
+ * debugging in production environments.
+ */
+const addLibraryVersionToPerseusDebug = (libraryName, libraryVersion) => {
+  // If the library version is the default value, then we don't want to
+  // prefix it with a "v" to indicate that it is a version number.
+  let prefix = "v";
+  if (libraryVersion === "__lib_version__") {
+    prefix = "";
+  }
+  const formattedVersion = `${prefix}${libraryVersion}`;
+  if (typeof globalThis !== "undefined") {
+    var _globalThis$__perseus;
+    globalThis.__perseus_debug__ = (_globalThis$__perseus = globalThis.__perseus_debug__) != null ? _globalThis$__perseus : {};
+    const existingVersionEntry = globalThis.__perseus_debug__[libraryName];
+    if (existingVersionEntry) {
+      // If we already have an entry and it doesn't match the registered
+      // version, we morph the entry into an array and log a warning.
+      if (existingVersionEntry !== formattedVersion) {
+        // Existing entry might be an array already (oops, at least 2
+        // versions of the library already loaded!).
+        const allVersions = Array.isArray(existingVersionEntry) ? existingVersionEntry : [existingVersionEntry];
+        allVersions.push(formattedVersion);
+        globalThis.__perseus_debug__[libraryName] = allVersions;
+
+        // eslint-disable-next-line no-console
+        console.warn(`Multiple versions of ${libraryName} loaded on this page: ${allVersions.sort().join(", ")}`);
+      }
+    } else {
+      globalThis.__perseus_debug__[libraryName] = formattedVersion;
+    }
+  } else {
+    // eslint-disable-next-line no-console
+    console.warn(`globalThis not found found (${formattedVersion})`);
+  }
+};
+
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "22.2.6";
+const libVersion = "23.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
 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}` : "");
@@ -1191,7 +1225,6 @@ const getKeyTranslator = (locale, strings) => ({
     mathQuill.write("\\sqrt[3]{}");
     mathQuill.keystroke("Left"); // under the root
   },
-
   FRAC_EXCLUSIVE: mathQuill => {
     const cursor = mathQuill.cursor();
     // If there's nothing to the left of the cursor, then we want to
@@ -1208,7 +1241,6 @@ const getKeyTranslator = (locale, strings) => ({
     mathQuill.keystroke("Left"); // out of parentheses
     mathQuill.keystroke("Left"); // into index
   },
-
   // These need to be overwritten by the consumer
   // if they're going to be used
   DISMISS: () => {},
@@ -1578,6 +1610,9 @@ class MathInput extends React.Component {
         }
       });
     };
+    // [Jan 2025] Third: While testing, I've discovered that we likely don't
+    // need to be passing setKeypadActive here at all. Removing the parameter
+    // still results in the same behavior.
     this.focus = setKeypadActive => {
       var _this$props$keypadEle, _this$props;
       // Pass this component's handleKey method to the keypad so it can call
@@ -2051,11 +2086,14 @@ class MathInput extends React.Component {
       // padding values for the vertical directions.
       const symbolaPaddingBottom = 3;
       const symbolaPaddingTop = 1;
+      // We also add a little padding for the cursor to ensure there's no
+      // overflow when the input is empty and set to right aligned.
+      const cursorPadding = 2;
       const padding = {
         paddingTop: paddingInset - symbolaPaddingTop,
-        paddingRight: paddingInset,
+        paddingRight: paddingInset + cursorPadding,
         paddingBottom: paddingInset - symbolaPaddingBottom,
-        paddingLeft: paddingInset
+        paddingLeft: paddingInset + cursorPadding
       };
       return padding;
     };
@@ -2319,16 +2357,6 @@ const inlineStyles = {
   }
 };
 
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
 const IconAsset = function IconAsset({
   tintColor,
   type
@@ -5704,27 +5732,5 @@ const keypadElementPropType = PropTypes.shape({
   getDOMNode: PropTypes.func.isRequired
 });
 
-const KeyArray = ["PLUS", "MINUS", "NEGATIVE", "TIMES", "DIVIDE", "DECIMAL", "PERIOD", "PERCENT", "CDOT", "EQUAL", "NEQ", "GT", "LT", "GEQ", "LEQ",
-// mobile native only
-"FRAC_INCLUSIVE",
-// mobile native only
-"FRAC_EXCLUSIVE",
-// mobile native only
-"FRAC", "EXP", "EXP_2", "EXP_3", "SQRT", "CUBE_ROOT", "RADICAL", "LEFT_PAREN", "RIGHT_PAREN", "LN", "LOG", "LOG_N", "SIN", "COS",
-// TODO(charlie): Add in additional Greek letters.,
-"TAN", "PI", "THETA", "UP", "RIGHT", "DOWN", "LEFT", "BACKSPACE", "DISMISS", "JUMP_OUT_PARENTHESES", "JUMP_OUT_EXPONENT", "JUMP_OUT_BASE", "JUMP_INTO_NUMERATOR", "JUMP_OUT_NUMERATOR", "JUMP_OUT_DENOMINATOR",
-// Multi-functional keys.
-"NUM_0", "NUM_1", "NUM_2", "NUM_3", "NUM_4", "NUM_5", "NUM_6", "NUM_7", "NUM_8", "NUM_9", "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", "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"];
-
-/**
- * Constants that are shared between multiple files.
- */
-
-let KeypadType = /*#__PURE__*/function (KeypadType) {
-  KeypadType["FRACTION"] = "FRACTION";
-  KeypadType["EXPRESSION"] = "EXPRESSION";
-  return KeypadType;
-}({});
-
-export { CursorContext, Keypad as DesktopKeypad, KeyArray, KeyConfigs, MathInput as KeypadInput, KeypadType, MathInputI18nContext, MathInputI18nContextProvider, MobileKeypad, convertDotToTimesByLocale, createMathField, getCursorContext, getKeyTranslator, keypadElementPropType, libVersion, mathQuillInstance, useMathInputI18n };
+export { CursorContext, Keypad as DesktopKeypad, KeyConfigs, MathInput as KeypadInput, MathInputI18nContext, MathInputI18nContextProvider, MobileKeypad, convertDotToTimesByLocale, createMathField, getCursorContext, getKeyTranslator, keypadElementPropType, libVersion, mathQuillInstance, useMathInputI18n };
 //# sourceMappingURL=index.js.map