@khanacademy/math-input 14.1.1 → 14.2.1

package/dist/index.js

@@ -13,10 +13,11 @@ var $ = require('jquery');
 var MathQuill = require('mathquill');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
+var reactTransitionGroup = require('react-transition-group');
+var wonderBlocksTiming = require('@khanacademy/wonder-blocks-timing');
 var reactRedux = require('react-redux');
 var katex = require('katex');
 var PropTypes = require('prop-types');
-var reactTransitionGroup = require('react-transition-group');
 var Redux = require('redux');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -52,7 +53,7 @@ var Redux__namespace = /*#__PURE__*/_interopNamespace(Redux);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "14.1.1";
+const libVersion = "14.2.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _defineProperty(obj, key, value) {
@@ -5260,7 +5261,7 @@ function getAvailableTabs(props) {
 // The main (v2) Keypad. Use this component to present an accessible, onscreen
 // keypad to learners for entering math expressions.
 function Keypad$2(props) {
-  // If we're using the Fractions keyapd, we want to default select that page
+  // 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";
   const [selectedPage, setSelectedPage] = React__namespace.useState(defaultSelectedPage);
@@ -5287,7 +5288,7 @@ function Keypad$2(props) {
   // Use a different grid for our fraction keypad
   const gridStyle = fractionsOnly ? styles$d.fractionsGrid : styles$d.expressionGrid;
 
-  // This useeffect is only used to ensure that we can test the keypad in storybook
+  // This useEffect is only used to ensure that we can test the keypad in storybook
   React.useEffect(() => {
     setSelectedPage(defaultSelectedPage);
   }, [fractionsOnly, defaultSelectedPage]);
@@ -5389,16 +5390,304 @@ const styles$d = aphrodite.StyleSheet.create({
   }
 });
 
+function flatten(list) {
+  const result = [];
+  if (!list) {
+    return result;
+  }
+  if (Array.isArray(list)) {
+    for (const item of list) {
+      result.push(...flatten(item));
+    }
+  } else {
+    result.push(list);
+  }
+  return result;
+}
+function processStyleType(style) {
+  const stylesheetStyles = [];
+  const inlineStyles = [];
+  if (!style) {
+    return {
+      style: {},
+      className: ""
+    };
+  }
+
+  // Check to see if we should inline all the styles for snapshot tests.
+  const shouldInlineStyles = typeof globalThis !== "undefined" && globalThis.SNAPSHOT_INLINE_APHRODITE;
+  flatten(style).forEach(child => {
+    // Check for aphrodite internal property
+    const _definition = child._definition;
+    if (_definition != null) {
+      if (shouldInlineStyles) {
+        const def = {};
+        // React 16 complains about invalid keys in inline styles.
+        // It doesn't accept kebab-case in media queries and instead
+        // prefers camelCase.
+        for (const [key, value] of wonderStuffCore.entries(_definition)) {
+          // This regex converts all instances of -{lowercaseLetter}
+          // to the uppercase version of that letter, without the
+          // leading dash.
+          def[key.replace(/-[a-z]/g, match => match[1].toUpperCase())] = value;
+        }
+        inlineStyles.push(def);
+      } else {
+        stylesheetStyles.push(child);
+      }
+    } else {
+      inlineStyles.push(child);
+    }
+  });
+  const inlineStylesObject = Object.assign({}, ...inlineStyles);
+
+  // TODO(somewhatabstract): When aphrodite no longer puts "!important" on
+  // all the styles, remove this <ADD JIRA ISSUE HERE IF THIS PASSES REVIEW>
+  // If we're not snapshotting styles, let's create a class for the inline
+  // styles so that they can apply to the element even with aphrodite's
+  // use of !important.
+  if (inlineStyles.length > 0 && !shouldInlineStyles) {
+    const inlineStylesStyleSheet = aphrodite.StyleSheet.create({
+      inlineStyles: inlineStylesObject
+    });
+    stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);
+  }
+  return {
+    style: shouldInlineStyles ? inlineStylesObject : {},
+    className: aphrodite.css(...stylesheetStyles)
+  };
+}
+
+class TransitionChild extends React__namespace.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`.
+  // eslint-disable-next-line no-restricted-syntax
+  static getDerivedStateFromProps(_ref, prevState) {
+    let {
+      in: nextIn
+    } = _ref;
+    if (nextIn && prevState.status === "unmounted") {
+      return {
+        status: "mounted"
+      };
+    }
+    return null;
+  }
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "classNameQueue", void 0);
+    _defineProperty(this, "appliedClassNames", void 0);
+    _defineProperty(this, "_isMounted", false);
+    _defineProperty(this, "addClass", (elem, className) => {
+      if (className) {
+        elem.classList.add(className);
+        this.appliedClassNames.add(className);
+      }
+    });
+    _defineProperty(this, "removeClass", (elem, className) => {
+      if (className) {
+        elem.classList.remove(className);
+        this.appliedClassNames.delete(className);
+      }
+    });
+    _defineProperty(this, "flushClassNameQueue", () => {
+      if (this._isMounted) {
+        const node = ReactDOM__default["default"].findDOMNode(this);
+        if (node instanceof Element) {
+          this.classNameQueue.forEach(_ref2 => {
+            let [removeClassName, addClassName] = _ref2;
+            // Remove the old class before adding a new class just
+            // in case the new class is the same as the old one.
+            this.removeClass(node, removeClassName);
+            this.addClass(node, addClassName);
+          });
+        }
+      }
+
+      // Remove all items in the Array.
+      this.classNameQueue.length = 0;
+    });
+    this._isMounted = false;
+    this.classNameQueue = [];
+    this.appliedClassNames = new Set();
+    this.state = {
+      status: "mounted"
+    };
+  }
+  componentDidMount() {
+    this._isMounted = true;
+    if (typeof this.props.appearTimeout === "number") {
+      this.transition("appear", this.props.appearTimeout);
+    } else {
+      this.transition("enter", this.props.enterTimeout);
+    }
+  }
+  componentDidUpdate(oldProps, oldState) {
+    if (oldProps.in && !this.props.in) {
+      this.transition("leave", this.props.leaveTimeout);
+    } else if (!oldProps.in && this.props.in) {
+      this.transition("enter", this.props.enterTimeout);
+    }
+    if (oldState.status !== "mounted" && this.state.status === "mounted") {
+      // Remove the node from the DOM
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        status: "unmounted"
+      });
+    }
+  }
+
+  // NOTE: This will only get called when the parent TransitionGroup becomes
+  // unmounted.  This is because that component clones all of its children and
+  // keeps them around so that they can be animated when leaving and also so
+  // that the can be animated when re-rentering if that occurs.
+  componentWillUnmount() {
+    this._isMounted = false;
+    this.props.schedule.clearAll();
+  }
+  removeAllClasses(node) {
+    for (const className of this.appliedClassNames) {
+      this.removeClass(node, className);
+    }
+  }
+  transition(animationType, duration) {
+    const node = ReactDOM__default["default"].findDOMNode(this);
+    if (!(node instanceof Element)) {
+      return;
+    }
+
+    // Remove any classes from previous transitions.
+    this.removeAllClasses(node);
+
+    // A previous transition may still be in progress so clear its timers.
+    this.props.schedule.clearAll();
+    const transitionStyles = typeof this.props.transitionStyles === "function" ? this.props.transitionStyles() : this.props.transitionStyles;
+    const {
+      className
+    } = processStyleType(transitionStyles[animationType]);
+    const {
+      className: activeClassName
+    } = processStyleType([transitionStyles[animationType], transitionStyles[animationType + "Active"]]);
+
+    // Put the node in the starting position.
+    this.addClass(node, className);
+
+    // Queue the component to show the "active" style.
+    this.queueClass(className, activeClassName);
+
+    // Unmount the children after the 'leave' transition has completed.
+    if (animationType === "leave") {
+      this.props.schedule.timeout(() => {
+        if (this._isMounted) {
+          this.setState({
+            status: "unmounted"
+          });
+        }
+      }, duration || 0);
+    }
+  }
+  queueClass(removeClassName, addClassName) {
+    this.classNameQueue.push([removeClassName, addClassName]);
+    this.props.schedule.animationFrame(this.flushClassNameQueue);
+  }
+  render() {
+    const {
+      status
+    } = this.state;
+    if (status === "unmounted") {
+      return null;
+    }
+    return this.props.children;
+  }
+}
+var TransitionChild$1 = wonderBlocksTiming.withActionScheduler(TransitionChild);
+
+/**
+ * Aphrodite doesn't play well with CSSTransition from react-transition-group,
+ * which assumes that you have CSS classes and it can combine them arbitrarily.
+ *
+ * There are also some issue with react-transition-group that make it difficult
+ * to work.  Even if the CSS classes are defined ahead of time it makes no
+ * guarantee that the start style will be applied by the browser before the
+ * active style is applied.  This can cause the first time a transition runs to
+ * fail.
+ *
+ * AphroditeCSSTransitionGroup provides a wrapper around TransitionGroup to
+ * address these issues.
+ *
+ * There are three types of transitions:
+ * - appear: the time the child is added to the render tree
+ * - enter: whenever the child is added to the render tree after "appear".  If
+ *   no "appear" transition is specified then the "enter" transition will also
+ *   be used for the first time the child is added to the render tree.
+ * - leave: whenever the child is removed from the render tree
+ *
+ * Each transition type has two states:
+ * - base: e.g. css(enter)
+ * - active: e.g. css(enter, enterActive)
+ *
+ * If "done" styles are not provided, the "active" style will remain on the
+ * component after the animation has completed.
+ *
+ * Usage: TBD
+ *
+ * Limitations:
+ * - This component only supports a single child whereas TransitionGroup supports
+ *   multiple children.
+ * - We ignore inline styles that are provided as part of AnimationStyles.
+ *
+ * TODOs:
+ * - (FEI-3211): Change the API for AphroditeCSSTransitionGroup so that it makes
+ *   bad states impossible.
+ */
+class AphroditeCSSTransitionGroup extends React__namespace.Component {
+  render() {
+    const {
+      children
+    } = this.props;
+    return (
+      /*#__PURE__*/
+      // `component={null}` prevents wrapping each child with a <div>
+      // which can muck with certain layouts.
+      React__namespace.createElement(reactTransitionGroup.TransitionGroup, {
+        component: null
+      }, React__namespace.Children.map(children, child => /*#__PURE__*/React__namespace.createElement(TransitionChild$1, {
+        transitionStyles: this.props.transitionStyle,
+        appearTimeout: this.props.transitionAppearTimeout,
+        enterTimeout: this.props.transitionEnterTimeout,
+        leaveTimeout: this.props.transitionLeaveTimeout
+      }, child)))
+    );
+  }
+}
+
+const AnimationDurationInMS = 200;
+/**
+ * This is the v2 equivalent of v1's ProvidedKeypad. It follows the same
+ * external API so that it can be hot-swapped with the v1 keypad and
+ * is responsible for connecting the keypad with MathInput and the Renderer.
+ *
+ * Ideally this strategy of attaching methods on the class component for
+ * other components to call will be replaced props/callbacks since React
+ * doesn't support this type of code anymore (functional components
+ * can't have methods attached to them).
+ */
 class MobileKeypad extends React__namespace.Component {
   constructor() {
     super(...arguments);
     _defineProperty(this, "_containerRef", /*#__PURE__*/React__namespace.createRef());
     _defineProperty(this, "_containerResizeObserver", null);
     _defineProperty(this, "_throttleResize", false);
-    _defineProperty(this, "hasMounted", false);
     _defineProperty(this, "state", {
-      containerWidth: 0,
-      hasBeenActivated: false
+      containerWidth: 0
     });
     _defineProperty(this, "_resize", () => {
       var _this$_containerRef$c;
@@ -5419,9 +5708,6 @@ class MobileKeypad extends React__namespace.Component {
     });
     _defineProperty(this, "activate", () => {
       this.props.setKeypadActive(true);
-      this.setState({
-        hasBeenActivated: true
-      });
     });
     _defineProperty(this, "dismiss", () => {
       var _this$props$onDismiss, _this$props;
@@ -5459,6 +5745,7 @@ class MobileKeypad extends React__namespace.Component {
     });
   }
   componentDidMount() {
+    var _this$props$onElement, _this$props2;
     this._resize();
     window.addEventListener("resize", this._throttleResizeHandler);
     window.addEventListener("orientationchange", this._throttleResizeHandler);
@@ -5471,6 +5758,14 @@ class MobileKeypad extends React__namespace.Component {
         this._containerResizeObserver.observe(this._containerRef.current);
       }
     }
+    (_this$props$onElement = (_this$props2 = this.props).onElementMounted) === null || _this$props$onElement === void 0 ? void 0 : _this$props$onElement.call(_this$props2, {
+      activate: this.activate,
+      dismiss: this.dismiss,
+      configure: this.configure,
+      setCursor: this.setCursor,
+      setKeyHandler: this.setKeyHandler,
+      getDOMNode: this.getDOMNode
+    });
   }
   componentWillUnmount() {
     var _this$_containerResiz;
@@ -5495,53 +5790,37 @@ class MobileKeypad extends React__namespace.Component {
       style
     } = this.props;
     const {
-      hasBeenActivated,
       containerWidth,
       cursor,
       keypadConfig
     } = this.state;
-    const containerStyle = [
-    // internal styles
-    styles$c.keypadContainer, keypadActive && styles$c.activeKeypadContainer,
+    const containerStyle = [styles$c.keypadContainer,
     // styles passed as props
     ...(Array.isArray(style) ? style : [style])];
-
-    // If the keypad is yet to have ever been activated, we keep it invisible
-    // so as to avoid, e.g., the keypad flashing at the bottom of the page
-    // during the initial render.
-    // Done inline (dynamicStyle) since stylesheets might not be loaded yet.
-    let dynamicStyle = {};
-    if (!keypadActive && !hasBeenActivated) {
-      dynamicStyle = {
-        visibility: "hidden"
-      };
-    }
     const isExpression = (keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
     const convertDotToTimes = keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.times;
-    return /*#__PURE__*/React__namespace.createElement(View, {
-      style: containerStyle,
-      dynamicStyle: dynamicStyle,
-      forwardRef: this._containerRef,
-      ref: element => {
-        if (!this.hasMounted && element) {
-          var _this$props$onElement, _this$props2;
-          // TODO(matthewc)[LC-1081]: clean up this weird
-          // object and type the onElementMounted callback
-          // Append the dispatch methods that we want to expose
-          // externally to the returned React element.
-          const elementWithDispatchMethods = {
-            ...element,
-            activate: this.activate,
-            dismiss: this.dismiss,
-            configure: this.configure,
-            setCursor: this.setCursor,
-            setKeyHandler: this.setKeyHandler,
-            getDOMNode: this.getDOMNode
-          };
-          this.hasMounted = true;
-          (_this$props$onElement = (_this$props2 = this.props).onElementMounted) === null || _this$props$onElement === void 0 ? void 0 : _this$props$onElement.call(_this$props2, elementWithDispatchMethods);
+    return /*#__PURE__*/React__namespace.createElement(AphroditeCSSTransitionGroup, {
+      transitionEnterTimeout: AnimationDurationInMS,
+      transitionLeaveTimeout: AnimationDurationInMS,
+      transitionStyle: {
+        enter: {
+          transform: "translate3d(0, 100%, 0)",
+          transition: "".concat(AnimationDurationInMS, "ms ease-out")
+        },
+        enterActive: {
+          transform: "translate3d(0, 0, 0)"
+        },
+        leave: {
+          transform: "translate3d(0, 0, 0)",
+          transition: "".concat(AnimationDurationInMS, "ms ease-out")
+        },
+        leaveActive: {
+          transform: "translate3d(0, 100%, 0)"
         }
       }
+    }, keypadActive ? /*#__PURE__*/React__namespace.createElement(View, {
+      style: containerStyle,
+      forwardRef: this._containerRef
     }, /*#__PURE__*/React__namespace.createElement(Keypad$2, {
       onAnalyticsEvent: this.props.onAnalyticsEvent,
       extraKeys: keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.extraKeys,
@@ -5557,7 +5836,7 @@ class MobileKeypad extends React__namespace.Component {
       advancedRelations: isExpression,
       expandedView: containerWidth > expandedViewThreshold$1,
       showDismiss: true
-    }));
+    })) : null);
   }
 }
 const styles$c = aphrodite.StyleSheet.create({
@@ -5565,15 +5844,7 @@ const styles$c = aphrodite.StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
-    position: "fixed",
-    transitionProperty: "all",
-    transition: "200ms ease-out",
-    visibility: "hidden",
-    transform: "translate3d(0, 100%, 0)"
-  },
-  activeKeypadContainer: {
-    transform: "translate3d(0, 0, 0)",
-    visibility: "visible"
+    position: "fixed"
   }
 });
 
@@ -5605,20 +5876,18 @@ function StatefulKeypadContextProvider(props) {
   // this is a KeypadContextRendererInterface from Perseus
   const [renderer, setRenderer] = React.useState();
   const [scrollableElement, setScrollableElement] = React.useState();
+  const memoizedValue = React.useMemo(() => ({
+    keypadActive,
+    setKeypadActive,
+    keypadElement,
+    setKeypadElement,
+    renderer,
+    setRenderer,
+    scrollableElement,
+    setScrollableElement
+  }), [keypadActive, setKeypadActive, keypadElement, setKeypadElement, renderer, setRenderer, scrollableElement, setScrollableElement]);
   return /*#__PURE__*/React__namespace.createElement(KeypadContext.Provider, {
-    value: {
-      setKeypadActive,
-      keypadActive,
-      setKeypadElement,
-      keypadElement,
-      setRenderer,
-      renderer,
-      // The scrollableElement options can likely be removed after
-      // the exercises-package is officially deprecated. They don't appear
-      // to be used anywhere except for the exercises-package and tests.
-      setScrollableElement,
-      scrollableElement
-    }
+    value: memoizedValue
   }, props.children);
 }
 
@@ -6917,7 +7186,7 @@ const styles$9 = aphrodite.StyleSheet.create({
     width: iconSizeWidthPx
   },
   base: {
-    fontFamily: "Proxima Nova",
+    fontFamily: "'Lato', sans-serif",
     fontSize: 25
   }
 });