@khanacademy/math-input 14.2.2 → 15.0.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/math-input
 
+## 15.0.1
+
+### Patch Changes
+
+-   [#800](https://github.com/Khan/perseus/pull/800) [`1d58b887`](https://github.com/Khan/perseus/commit/1d58b887179b129b5027e20484fde5169170f052) Thanks [@handeyeco](https://github.com/handeyeco)! - Bugfix: conditionally switch between period/comma for decimal separator
+
+## 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/enums.d.ts

@@ -31,10 +31,6 @@ export declare enum IconType {
     SVG = "SVG",
     TEXT = "TEXT"
 }
-export declare enum DecimalSeparator {
-    COMMA = "COMMA",
-    PERIOD = "PERIOD"
-}
 export declare enum EchoAnimationType {
     SLIDE_AND_FADE = "SLIDE_AND_FADE",
     FADE_ONLY = "FADE_ONLY",

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.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -826,70 +826,10 @@ function handleBackspace(mathField) {
   }
 }
 
-/**
- * Constants that are shared between multiple files.
- */
-
-let KeypadType = /*#__PURE__*/function (KeypadType) {
-  KeypadType["FRACTION"] = "FRACTION";
-  KeypadType["EXPRESSION"] = "EXPRESSION";
-  return KeypadType;
-}({});
-const KeyTypes = ["EMPTY",
-// For numerals, variables, and any other characters that themselves
-// compose 'values'.
-"VALUE",
-// For buttons that insert or adjust math in an input.
-"OPERATOR",
-// For buttons that move the cursor in an input (including via
-// deletion).
-"INPUT_NAVIGATION",
-// For buttons that modify the broader keypad state (e.g., by changing
-// the visible pane).
-"KEYPAD_NAVIGATION",
-// For buttons that house multiple buttons and have no action
-// themselves.
-"MANY",
-// For the echo animation that appears on press.
-"ECHO"];
-let DeviceOrientation = /*#__PURE__*/function (DeviceOrientation) {
-  DeviceOrientation["LANDSCAPE"] = "LANDSCAPE";
-  DeviceOrientation["PORTRAIT"] = "PORTRAIT";
-  return DeviceOrientation;
-}({});
-let LayoutMode = /*#__PURE__*/function (LayoutMode) {
-  LayoutMode["FULLSCREEN"] = "FULLSCREEN";
-  LayoutMode["COMPACT"] = "COMPACT";
-  return LayoutMode;
-}({});
-let BorderDirection = /*#__PURE__*/function (BorderDirection) {
-  BorderDirection["LEFT"] = "LEFT";
-  BorderDirection["BOTTOM"] = "BOTTOM";
-  return BorderDirection;
-}({});
-const BorderStyles = {
-  LEFT: [BorderDirection.LEFT],
-  BOTTOM: [BorderDirection.BOTTOM],
-  ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
-  NONE: []
+const DecimalSeparator = {
+  COMMA: ",",
+  PERIOD: "."
 };
-let IconType = /*#__PURE__*/function (IconType) {
-  IconType["MATH"] = "MATH";
-  IconType["SVG"] = "SVG";
-  IconType["TEXT"] = "TEXT";
-  return IconType;
-}({});
-let DecimalSeparator = /*#__PURE__*/function (DecimalSeparator) {
-  DecimalSeparator["COMMA"] = "COMMA";
-  DecimalSeparator["PERIOD"] = "PERIOD";
-  return DecimalSeparator;
-}({});
-let EchoAnimationType = /*#__PURE__*/function (EchoAnimationType) {
-  EchoAnimationType["SLIDE_AND_FADE"] = "SLIDE_AND_FADE";
-  EchoAnimationType["FADE_ONLY"] = "FADE_ONLY";
-  EchoAnimationType["LONG_FADE_ONLY"] = "LONG_FADE_ONLY";
-  return EchoAnimationType;
-}({});
 
 // NOTES(kevinb):
 // - In order to get the correct decimal separator for the current locale,
@@ -1076,7 +1016,6 @@ var ActionType = /*#__PURE__*/function (ActionType) {
   ActionType[ActionType["MQ_END"] = 0] = "MQ_END";
   return ActionType;
 }(ActionType || {});
-const decimalSymbol = decimalSeparator === DecimalSeparator.COMMA ? "," : ".";
 function buildGenericCallback(str, type = ActionType.WRITE) {
   return function (mathQuill) {
     switch (type) {
@@ -1122,7 +1061,7 @@ const keyToMathquillMap = {
   COS: buildNormalFunctionCallback("cos"),
   TAN: buildNormalFunctionCallback("tan"),
   CDOT: buildGenericCallback("\\cdot"),
-  DECIMAL: buildGenericCallback(decimalSymbol),
+  DECIMAL: buildGenericCallback(decimalSeparator),
   DIVIDE: buildGenericCallback("\\div"),
   EQUAL: buildGenericCallback("="),
   GEQ: buildGenericCallback("\\geq"),
@@ -1279,10 +1218,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 +1409,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 +1446,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 +1517,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 +1540,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 +1563,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 +1658,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 +1778,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 +1807,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 +1845,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 +1917,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();
 
@@ -2413,6 +2413,66 @@ function Tabbar(props) {
   })));
 }
 
+/**
+ * Constants that are shared between multiple files.
+ */
+
+let KeypadType = /*#__PURE__*/function (KeypadType) {
+  KeypadType["FRACTION"] = "FRACTION";
+  KeypadType["EXPRESSION"] = "EXPRESSION";
+  return KeypadType;
+}({});
+const KeyTypes = ["EMPTY",
+// For numerals, variables, and any other characters that themselves
+// compose 'values'.
+"VALUE",
+// For buttons that insert or adjust math in an input.
+"OPERATOR",
+// For buttons that move the cursor in an input (including via
+// deletion).
+"INPUT_NAVIGATION",
+// For buttons that modify the broader keypad state (e.g., by changing
+// the visible pane).
+"KEYPAD_NAVIGATION",
+// For buttons that house multiple buttons and have no action
+// themselves.
+"MANY",
+// For the echo animation that appears on press.
+"ECHO"];
+let DeviceOrientation = /*#__PURE__*/function (DeviceOrientation) {
+  DeviceOrientation["LANDSCAPE"] = "LANDSCAPE";
+  DeviceOrientation["PORTRAIT"] = "PORTRAIT";
+  return DeviceOrientation;
+}({});
+let LayoutMode = /*#__PURE__*/function (LayoutMode) {
+  LayoutMode["FULLSCREEN"] = "FULLSCREEN";
+  LayoutMode["COMPACT"] = "COMPACT";
+  return LayoutMode;
+}({});
+let BorderDirection = /*#__PURE__*/function (BorderDirection) {
+  BorderDirection["LEFT"] = "LEFT";
+  BorderDirection["BOTTOM"] = "BOTTOM";
+  return BorderDirection;
+}({});
+const BorderStyles = {
+  LEFT: [BorderDirection.LEFT],
+  BOTTOM: [BorderDirection.BOTTOM],
+  ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
+  NONE: []
+};
+let IconType = /*#__PURE__*/function (IconType) {
+  IconType["MATH"] = "MATH";
+  IconType["SVG"] = "SVG";
+  IconType["TEXT"] = "TEXT";
+  return IconType;
+}({});
+let EchoAnimationType = /*#__PURE__*/function (EchoAnimationType) {
+  EchoAnimationType["SLIDE_AND_FADE"] = "SLIDE_AND_FADE";
+  EchoAnimationType["FADE_ONLY"] = "FADE_ONLY";
+  EchoAnimationType["LONG_FADE_ONLY"] = "LONG_FADE_ONLY";
+  return EchoAnimationType;
+}({});
+
 const getDefaultOperatorFields = ({
   key,
   keyType: _keyType = "OPERATOR",
@@ -2490,17 +2550,7 @@ const KeyConfigs = {
     keyType: "VALUE",
     // I18N: A label for a 'decimal' sign (represented as '.' or ',').
     ariaLabel: i18n._("Decimal")
-  }), {
-    icon: decimalSeparator === DecimalSeparator.COMMA ? {
-      // TODO(charlie): Get an SVG icon for the comma, or verify with
-      // design that the text-rendered version is acceptable.
-      type: IconType.TEXT,
-      data: ","
-    } : {
-      type: IconType.SVG,
-      data: "PERIOD"
-    }
-  }),
+  })),
   PERIOD: _extends({}, getDefaultOperatorFields({
     key: "PERIOD",
     keyType: "VALUE",
@@ -3065,16 +3115,32 @@ function ButtonAsset({
         d: "M16.735 16.8558c0 1.024.272 1.812.816 2.364.552.544 1.32.816 2.304.816.528 0 .992-.084 1.392-.252.408-.168.752-.392 1.032-.672.28-.288.492-.62.636-.996.144-.384.216-.792.216-1.224 0-.504-.08-.952-.24-1.344-.152-.4-.372-.74-.66-1.02-.28-.28-.616-.492-1.008-.636-.392-.152-.82-.228-1.284-.228-.488 0-.928.08-1.32.24-.392.16-.728.384-1.008.672-.28.28-.496.616-.648 1.008-.152.384-.228.808-.228 1.272zm4.428 5.364c.16-.2.308-.388.444-.564.136-.184.264-.368.384-.552-.416.296-.88.524-1.392.684-.512.152-1.056.228-1.632.228-.624 0-1.224-.104-1.8-.312-.576-.216-1.088-.532-1.536-.948-.448-.424-.808-.944-1.08-1.56-.264-.624-.396-1.34-.396-2.148 0-.76.14-1.476.42-2.148.288-.672.688-1.256 1.2-1.752.512-.504 1.124-.9 1.836-1.188.712-.288 1.5-.432 2.364-.432.856 0 1.632.14 2.328.42.696.272 1.288.66 1.776 1.164.488.496.864 1.092 1.128 1.788.264.688.396 1.448.396 2.28 0 .52-.048 1.012-.144 1.476-.088.464-.22.916-.396 1.356-.168.432-.376.86-.624 1.284-.24.416-.512.84-.816 1.272l-4.068 5.832c-.12.176-.3.32-.54.432-.232.112-.496.168-.792.168h-2.364l5.304-6.78z",
         fill: "#21242C"
       }));
-    // TODO(ned): Per the notes in `KeyConfigs`, shouldn't this be a comma
-    // that we replace with the period icon for i18n? Duplicating for now.
     case "DECIMAL":
     case "PERIOD":
+      // Different locales use different symbols for the decimal separator
+      // (, vs .)
+      if (id === "DECIMAL" && decimalSeparator === DecimalSeparator.COMMA) {
+        // comma decimal separator
+        return /*#__PURE__*/React.createElement("svg", {
+          width: "40",
+          height: "40",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          "data-test-id": "comma-decimal"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M11.5559 25.3544C11.8679 24.661 12.1799 23.933 12.4919 23.1704C12.8039 22.425 13.0986 21.6884 13.3759 20.9604C13.6706 20.2324 13.9219 19.5737 14.1299 18.9844H16.6259L16.7299 19.2704C16.4526 19.877 16.1232 20.5357 15.7419 21.2464C15.3606 21.9397 14.9619 22.633 14.5459 23.3264C14.1299 24.037 13.7139 24.713 13.2979 25.3544H11.5559Z",
+          fill: "#21242C"
+        }));
+      }
+      // period / US decimal separator
       return /*#__PURE__*/React.createElement("svg", {
         width: "40",
         height: "40",
         viewBox: "0 0 40 40",
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-test-id": "period-decimal"
       }, /*#__PURE__*/React.createElement("path", {
         d: "M18.3401 27.512c0-.232.04-.448.12-.648.088-.208.204-.388.348-.54.152-.152.328-.272.528-.36.208-.088.428-.132.66-.132.232 0 .448.044.648.132.208.088.388.208.54.36.152.152.272.332.36.54.088.2.132.416.132.648 0 .24-.044.46-.132.66-.088.2-.208.376-.36.528-.152.152-.332.268-.54.348-.2.088-.416.132-.648.132-.232 0-.452-.044-.66-.132-.2-.08-.376-.196-.528-.348-.144-.152-.26-.328-.348-.528-.08-.2-.12-.42-.12-.66z",
         fill: "#21242C"
@@ -5160,13 +5226,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 +5242,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 +5476,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 +5522,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 +5535,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 +5563,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 +5585,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 +5600,7 @@ class MobileKeypad extends React.Component {
       advancedRelations: isExpression,
       expandedView: containerWidth > expandedViewThreshold$1,
       showDismiss: true
-    })) : null);
+    }) : null));
   }
 }
 const styles$c = StyleSheet.create({
@@ -7840,7 +7904,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 +8685,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 +8761,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 +8893,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 +9070,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 +9091,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 +9115,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 +9150,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 +10094,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 +10104,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();
   }