@khanacademy/math-input 14.2.2 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @khanacademy/math-input
 
+## 15.0.0
+
+### Major Changes
+
+-   [#786](https://github.com/Khan/perseus/pull/786) [`af4ebf37`](https://github.com/Khan/perseus/commit/af4ebf37dfed15ffd93a8cf2a20d0be464120dd7) Thanks [@handeyeco](https://github.com/handeyeco)! - Added a new required dep in Perseus and MathInput (required by WB)
+
+### Patch Changes
+
+-   [#791](https://github.com/Khan/perseus/pull/791) [`3eb0e158`](https://github.com/Khan/perseus/commit/3eb0e15860224cc595d5b7e78d2a5d60e808561c) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Minor fix to ensure that the keypadElement is always provided to mobile keypad consumers
+
 ## 14.2.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -20,7 +20,7 @@ import * as Redux from 'redux';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "14.2.2";
+const libVersion = "15.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -1279,10 +1279,9 @@ const mobileKeyTranslator = _extends({}, keyToMathquillMap, {
  * from MathQuill changes.
  */
 class MathWrapper {
-  // MathQuill MathField input
-
   constructor(element, callbacks = {}) {
     this.mathField = void 0;
+    // MathQuill MathField input
     this.callbacks = void 0;
     this.mathField = createMathField(element, () => {
       return {
@@ -1471,14 +1470,18 @@ class MathInput extends React.Component {
     this.didTouchOutside = void 0;
     this.didScroll = void 0;
     this.mathField = void 0;
+    // @ts-expect-error - TS2564 - Property 'recordTouchStartOutside' has no initializer and is not definitely assigned in the constructor.
     this.recordTouchStartOutside = void 0;
+    // @ts-expect-error - TS2564 - Property 'blurOnTouchEndOutside' has no initializer and is not definitely assigned in the constructor.
     this.blurOnTouchEndOutside = void 0;
     this.dragListener = void 0;
     this.inputRef = void 0;
     this._isMounted = void 0;
     this._mathContainer = void 0;
+    // @ts-expect-error - TS2564 - Property '_container' has no initializer and is not definitely assigned in the constructor.
     this._container = void 0;
     this._root = void 0;
+    // @ts-expect-error - TS2564 - Property '_containerBounds' has no initializer and is not definitely assigned in the constructor.
     this._containerBounds = void 0;
     this._keypadBounds = void 0;
     this.state = {
@@ -1504,6 +1507,7 @@ class MathInput extends React.Component {
       this._root.style.padding = `${padding.paddingTop}px ${padding.paddingRight}px` + ` ${padding.paddingBottom}px ${padding.paddingLeft}px`;
       this._root.style.fontSize = `${fontSizePt}pt`;
     };
+    /** Gets and cache they bounds of the keypadElement */
     this._getKeypadBounds = () => {
       if (!this._keypadBounds) {
         var _this$props$keypadEle;
@@ -1574,7 +1578,7 @@ class MathInput extends React.Component {
       var _this$props$keypadEle2, _this$props;
       // Pass this component's handleKey method to the keypad so it can call
       // it whenever it needs to trigger a keypress action.
-      (_this$props$keypadEle2 = this.props.keypadElement) == null ? void 0 : _this$props$keypadEle2.setKeyHandler(key => {
+      (_this$props$keypadEle2 = this.props.keypadElement) == null || _this$props$keypadEle2.setKeyHandler(key => {
         const cursor = this.mathField.pressKey(key);
 
         // Trigger an `onChange` if the value in the input changed, and hide
@@ -1597,7 +1601,7 @@ class MathInput extends React.Component {
         return cursor;
       });
       this.mathField.focus();
-      (_this$props = this.props) == null ? void 0 : _this$props.onFocus();
+      (_this$props = this.props) == null || _this$props.onFocus();
       this.setState({
         focused: true
       }, () => {
@@ -1620,6 +1624,30 @@ class MathInput extends React.Component {
         });
       });
     };
+    /**
+     * Tries to determine which DOM node to place the cursor next to based on
+     * where the user drags the cursor handle.  If it finds a node it will
+     * place the cursor next to it, update the handle to be under the cursor,
+     * and return true.  If it doesn't find a node, it returns false.
+     *
+     * It searches for nodes by doing it tests at the following points:
+     *
+     *   (x - dx, y), (x, y), (x + dx, y)
+     *
+     * If it doesn't find any nodes from the rendered math it will update y
+     * by adding dy.
+     *
+     * The algorithm ends its search when y goes outside the bounds of
+     * containerBounds.
+     *
+     * @param {DOMRect} containerBounds - bounds of the container node
+     * @param {number} x - the initial x coordinate in the viewport
+     * @param {number} y - the initial y coordinate in the viewport
+     * @param {number} dx - horizontal spacing between elementFromPoint calls
+     * @param {number} dy - vertical spacing between elementFromPoint calls,
+     *                      sign determines direction.
+     * @returns {boolean} - true if a node was hit, false otherwise.
+     */
     this._findHitNode = (containerBounds, x, y, dx, dy) => {
       while (y >= containerBounds.top && y <= containerBounds.bottom) {
         y += dy;
@@ -1691,6 +1719,13 @@ class MathInput extends React.Component {
       }
       return false;
     };
+    /**
+     * Inserts the cursor at the DOM node closest to the given coordinates,
+     * based on hit-tests conducted using #_findHitNode.
+     *
+     * @param {number} x - the x coordinate in the viewport
+     * @param {number} y - the y coordinate in the viewport
+     */
     this._insertCursorAtClosestNode = (x, y) => {
       const cursor = this.mathField.getCursor();
 
@@ -1804,6 +1839,12 @@ class MathInput extends React.Component {
         this._updateCursorHandle();
       }
     };
+    /**
+     * When a touch starts in the cursor handle, we track it so as to avoid
+     * handling any touch events ourself.
+     *
+     * @param {TouchEvent} e - the raw touch event from the browser
+     */
     this.onCursorHandleTouchStart = e => {
       // NOTE(charlie): The cursor handle is a child of this view, so whenever
       // it receives a touch event, that event would also typically be bubbled
@@ -1827,6 +1868,12 @@ class MathInput extends React.Component {
         return value;
       }
     };
+    /**
+     * When the user moves the cursor handle update the position of the cursor
+     * and the handle.
+     *
+     * @param {TouchEvent} e - the raw touch event from the browser
+     */
     this.onCursorHandleTouchMove = e => {
       e.stopPropagation();
       const x = e.changedTouches[0].clientX;
@@ -1859,10 +1906,20 @@ class MathInput extends React.Component {
       const adjustedY = y - distanceAboveFingerToTrySelecting;
       this._insertCursorAtClosestNode(x, adjustedY);
     };
+    /**
+     * When the user releases the cursor handle, animate it back into place.
+     *
+     * @param {TouchEvent} e - the raw touch event from the browser
+     */
     this.onCursorHandleTouchEnd = e => {
       e.stopPropagation();
       this._updateCursorHandle(true);
     };
+    /**
+     * If the gesture is cancelled mid-drag, simply hide it.
+     *
+     * @param {TouchEvent} e - the raw touch event from the browser
+     */
     this.onCursorHandleTouchCancel = e => {
       e.stopPropagation();
       this._updateCursorHandle(true);
@@ -1921,6 +1978,10 @@ class MathInput extends React.Component {
       const focusedBorderWidthPx = 2;
       return this.state.focused ? focusedBorderWidthPx : normalBorderWidthPx;
     };
+    // Calculate the appropriate padding based on the border width (which is
+    // considered 'padding', since we're using 'border-box') and the fact
+    // that MathQuill automatically applies 2px of padding to the inner
+    // input.
     this.getInputInnerPadding = () => {
       const paddingInset = totalDesiredPadding - this.getBorderWidthPx();
 
@@ -5160,13 +5221,6 @@ function processStyleType(style) {
 }
 
 class TransitionChild extends React.Component {
-  // Each 2-tuple in the queue represents two classnames: one to remove and
-  // one to add (in that order).
-
-  // We keep track of all of the current applied classes so that we can remove
-  // them before a new transition starts in the case of the current transition
-  // being interrupted.
-
   // The use of getDerivedStateFromProps here is to avoid an extra call to
   // setState if the component re-enters.  This can happen if TransitionGroup
   // sets `in` from `false` to `true`.
@@ -5183,7 +5237,12 @@ class TransitionChild extends React.Component {
   }
   constructor(props) {
     super(props);
+    // Each 2-tuple in the queue represents two classnames: one to remove and
+    // one to add (in that order).
     this.classNameQueue = void 0;
+    // We keep track of all of the current applied classes so that we can remove
+    // them before a new transition starts in the case of the current transition
+    // being interrupted.
     this.appliedClassNames = void 0;
     this._isMounted = false;
     this.addClass = (elem, className) => {
@@ -5412,7 +5471,7 @@ class MobileKeypad extends React.Component {
     this.dismiss = () => {
       var _this$props$onDismiss, _this$props;
       this.props.setKeypadActive(false);
-      (_this$props$onDismiss = (_this$props = this.props).onDismiss) == null ? void 0 : _this$props$onDismiss.call(_this$props);
+      (_this$props$onDismiss = (_this$props = this.props).onDismiss) == null || _this$props$onDismiss.call(_this$props);
     };
     this.configure = (configuration, cb) => {
       this.setState({
@@ -5458,7 +5517,7 @@ class MobileKeypad extends React.Component {
         this._containerResizeObserver.observe(this._containerRef.current);
       }
     }
-    (_this$props$onElement = (_this$props2 = this.props).onElementMounted) == null ? void 0 : _this$props$onElement.call(_this$props2, {
+    (_this$props$onElement = (_this$props2 = this.props).onElementMounted) == null || _this$props$onElement.call(_this$props2, {
       activate: this.activate,
       dismiss: this.dismiss,
       configure: this.configure,
@@ -5471,7 +5530,7 @@ class MobileKeypad extends React.Component {
     var _this$_containerResiz;
     window.removeEventListener("resize", this._throttleResizeHandler);
     window.removeEventListener("orientationchange", this._throttleResizeHandler);
-    (_this$_containerResiz = this._containerResizeObserver) == null ? void 0 : _this$_containerResiz.disconnect();
+    (_this$_containerResiz = this._containerResizeObserver) == null || _this$_containerResiz.disconnect();
   }
   _handleClickKey(key) {
     var _this$state$keyHandle, _this$state;
@@ -5499,7 +5558,10 @@ class MobileKeypad extends React.Component {
     ...(Array.isArray(style) ? style : [style])];
     const isExpression = (keypadConfig == null ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
     const convertDotToTimes = keypadConfig == null ? void 0 : keypadConfig.times;
-    return /*#__PURE__*/React.createElement(AphroditeCSSTransitionGroup, {
+    return /*#__PURE__*/React.createElement(View, {
+      style: containerStyle,
+      forwardRef: this._containerRef
+    }, /*#__PURE__*/React.createElement(AphroditeCSSTransitionGroup, {
       transitionEnterTimeout: AnimationDurationInMS,
       transitionLeaveTimeout: AnimationDurationInMS,
       transitionStyle: {
@@ -5518,10 +5580,7 @@ class MobileKeypad extends React.Component {
           transform: "translate3d(0, 100%, 0)"
         }
       }
-    }, keypadActive ? /*#__PURE__*/React.createElement(View, {
-      style: containerStyle,
-      forwardRef: this._containerRef
-    }, /*#__PURE__*/React.createElement(Keypad$2, {
+    }, keypadActive ? /*#__PURE__*/React.createElement(Keypad$2, {
       onAnalyticsEvent: this.props.onAnalyticsEvent,
       extraKeys: keypadConfig == null ? void 0 : keypadConfig.extraKeys,
       onClickKey: key => this._handleClickKey(key),
@@ -5536,7 +5595,7 @@ class MobileKeypad extends React.Component {
       advancedRelations: isExpression,
       expandedView: containerWidth > expandedViewThreshold$1,
       showDismiss: true
-    })) : null);
+    }) : null));
   }
 }
 const styles$c = StyleSheet.create({
@@ -7840,7 +7899,6 @@ class PopoverManager extends React.Component {
 // naming convention: verb + noun
 // the noun should be one of the other properties in the object that's
 // being dispatched
-
 const dismissKeypad = () => {
   return {
     type: "DismissKeypad"
@@ -8622,7 +8680,7 @@ class KeypadContainer extends React.Component {
       });
       const containerWidth = ((_this$_containerRef$c = this._containerRef.current) == null ? void 0 : _this$_containerRef$c.clientWidth) || 0;
       const containerHeight = ((_this$_containerRef$c2 = this._containerRef.current) == null ? void 0 : _this$_containerRef$c2.clientHeight) || 0;
-      (_this$props$onPageSiz = (_this$props = this.props).onPageSizeChange) == null ? void 0 : _this$props$onPageSiz.call(_this$props, window.innerWidth, window.innerHeight, containerWidth, containerHeight);
+      (_this$props$onPageSiz = (_this$props = this.props).onPageSizeChange) == null || _this$props$onPageSiz.call(_this$props, window.innerWidth, window.innerHeight, containerWidth, containerHeight);
     };
     this.renderKeypad = () => {
       const {
@@ -8698,7 +8756,7 @@ class KeypadContainer extends React.Component {
     var _this$_containerResiz;
     window.removeEventListener("resize", this._throttleResizeHandler);
     window.removeEventListener("orientationchange", this._throttleResizeHandler);
-    (_this$_containerResiz = this._containerResizeObserver) == null ? void 0 : _this$_containerResiz.disconnect();
+    (_this$_containerResiz = this._containerResizeObserver) == null || _this$_containerResiz.disconnect();
   }
   render() {
     const {
@@ -8830,10 +8888,7 @@ var KeypadContainer$1 = connect(mapStateToProps, mapDispatchToProps, null, {
  * It is entirely ignorant of the existence of popovers and the positions of
  * DOM nodes, operating solely on IDs. The state machine does accommodate for
  * multi-touch interactions, tracking gesture state on a per-touch basis.
- */
-
-// exported for tests
-
+ */ // exported for tests
 const defaultOptions = {
   longPressWaitTimeMs: 50,
   swipeThresholdPx: 20,
@@ -9010,7 +9065,7 @@ class GestureStateMachine {
       // gestures are ignored.
       if (this.swipeState.touchId === touchId) {
         var _this$handlers$onSwip, _this$handlers;
-        (_this$handlers$onSwip = (_this$handlers = this.handlers).onSwipeChange) == null ? void 0 : _this$handlers$onSwip.call(_this$handlers, pageX - this.swipeState.startX);
+        (_this$handlers$onSwip = (_this$handlers = this.handlers).onSwipeChange) == null || _this$handlers$onSwip.call(_this$handlers, pageX - this.swipeState.startX);
       }
     } else if (this.touchState[touchId]) {
       // It could be touch events started outside the keypad and
@@ -9031,7 +9086,7 @@ class GestureStateMachine {
           touchId,
           startX
         };
-        (_this$handlers$onSwip2 = (_this$handlers2 = this.handlers).onSwipeChange) == null ? void 0 : _this$handlers$onSwip2.call(_this$handlers2, pageX - this.swipeState.startX);
+        (_this$handlers$onSwip2 = (_this$handlers2 = this.handlers).onSwipeChange) == null || _this$handlers$onSwip2.call(_this$handlers2, pageX - this.swipeState.startX);
       } else {
         const id = getId();
         if (id !== activeNodeId) {
@@ -9055,7 +9110,7 @@ class GestureStateMachine {
       // gestures are ignored.
       if (this.swipeState.touchId === touchId) {
         var _this$handlers$onSwip3, _this$handlers3;
-        (_this$handlers$onSwip3 = (_this$handlers3 = this.handlers).onSwipeEnd) == null ? void 0 : _this$handlers$onSwip3.call(_this$handlers3, pageX - this.swipeState.startX);
+        (_this$handlers$onSwip3 = (_this$handlers3 = this.handlers).onSwipeEnd) == null || _this$handlers$onSwip3.call(_this$handlers3, pageX - this.swipeState.startX);
         this.swipeState = null;
       }
     } else if (this.touchState[touchId]) {
@@ -9090,7 +9145,7 @@ class GestureStateMachine {
     if (this.swipeState) {
       if (this.swipeState.touchId === touchId) {
         var _this$handlers$onSwip4, _this$handlers4;
-        (_this$handlers$onSwip4 = (_this$handlers4 = this.handlers).onSwipeEnd) == null ? void 0 : _this$handlers$onSwip4.call(_this$handlers4, 0);
+        (_this$handlers$onSwip4 = (_this$handlers4 = this.handlers).onSwipeEnd) == null || _this$handlers$onSwip4.call(_this$handlers4, 0);
         this.swipeState = null;
       }
     } else if (this.touchState[touchId]) {
@@ -10034,7 +10089,7 @@ class ProvidedKeypad extends React.Component {
         setKeyHandler: this.setKeyHandler,
         getDOMNode: this.getDOMNode
       });
-      (_this$props$onElement = (_this$props = this.props).onElementMounted) == null ? void 0 : _this$props$onElement.call(_this$props, elementWithDispatchMethods);
+      (_this$props$onElement = (_this$props = this.props).onElementMounted) == null || _this$props$onElement.call(_this$props, elementWithDispatchMethods);
     };
     this.onDismiss = () => {
       var _this$props$onDismiss, _this$props2;
@@ -10044,7 +10099,7 @@ class ProvidedKeypad extends React.Component {
           virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1"
         }
       });
-      (_this$props$onDismiss = (_this$props2 = this.props).onDismiss) == null ? void 0 : _this$props$onDismiss.call(_this$props2);
+      (_this$props$onDismiss = (_this$props2 = this.props).onDismiss) == null || _this$props$onDismiss.call(_this$props2);
     };
     this.store = createStore();
   }