@khanacademy/math-input 22.2.5 → 22.3.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/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/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.5";
+const libVersion = "22.3.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