@khanacademy/math-input 14.1.1 → 14.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @khanacademy/math-input
 
+## 14.2.0
+
+### Minor Changes
+
+-   aea0387f: Change mobile-keypad to use AphroditeCSSTransitionGroup to animate mounting/unmounting the keypad when active (prevents DOM elements from being in the DOM unless the keypad is actually open).
+
+### Patch Changes
+
+-   c4ae088f: Upgrades MathQuill to fix Android keyboard error
+
 ## 14.1.1
 
 ### Patch Changes

package/dist/components/aphrodite-css-transition-group/index.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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.
+ */
+import * as React from "react";
+import type { AnimationStyles } from "./types";
+type Props = {
+    transitionStyle: AnimationStyles | (() => AnimationStyles);
+    transitionAppearTimeout?: number;
+    transitionEnterTimeout?: number;
+    transitionLeaveTimeout?: number;
+    children?: React.ReactNode;
+};
+declare class AphroditeCSSTransitionGroup extends React.Component<Props> {
+    render(): React.ReactNode;
+}
+export default AphroditeCSSTransitionGroup;

package/dist/components/aphrodite-css-transition-group/transition-child.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { AnimationStyles } from "./types";
+declare const _default: (props: {
+    children: React.ReactNode;
+    transitionStyles: AnimationStyles | (() => AnimationStyles);
+    appearTimeout?: number | undefined;
+    enterTimeout?: number | undefined;
+    leaveTimeout?: number | undefined;
+    in?: boolean | undefined;
+}) => JSX.Element;
+export default _default;

package/dist/components/aphrodite-css-transition-group/types.d.ts

@@ -0,0 +1,18 @@
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { CSSProperties } from "aphrodite";
+export type AnimationStyles = {
+    enter?: StyleType;
+    enterActive?: StyleType;
+    leave?: StyleType;
+    leaveActive?: StyleType;
+    appear?: StyleType;
+    appearActive?: StyleType;
+};
+export type InAnimationStyles = {
+    enter?: CSSProperties;
+    enterActive?: CSSProperties;
+    leave?: CSSProperties;
+    leaveActive?: CSSProperties;
+    appear?: CSSProperties;
+    appearActive?: CSSProperties;
+};

package/dist/components/aphrodite-css-transition-group/util.d.ts

@@ -0,0 +1,7 @@
+import type { InAnimationStyles } from "./types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+export declare function processStyleType(style?: StyleType): {
+    className: string;
+    style: Record<any, any>;
+};
+export declare const createTransition: (styles: InAnimationStyles) => any;

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

@@ -4,16 +4,6 @@ import type Key from "../../data/keys";
 import type { Cursor, KeypadConfiguration, KeyHandler, KeypadAPI } from "../../types";
 import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
-/**
- * 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).
- */
 type Props = {
     onElementMounted?: (arg1: any) => void;
     onDismiss?: () => void;
@@ -24,16 +14,24 @@ type Props = {
 };
 type State = {
     containerWidth: number;
-    hasBeenActivated: boolean;
     keypadConfig?: KeypadConfiguration;
     keyHandler?: KeyHandler;
     cursor?: Cursor;
 };
+/**
+ * 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).
+ */
 declare class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
     _containerRef: React.RefObject<HTMLDivElement>;
     _containerResizeObserver: ResizeObserver | null;
     _throttleResize: boolean;
-    hasMounted: boolean;
     state: State;
     componentDidMount(): void;
     componentWillUnmount(): void;

package/dist/es/index.js

@@ -11,15 +11,16 @@ import $ from 'jquery';
 import MathQuill from 'mathquill';
 import { View as View$1 } from '@khanacademy/wonder-blocks-core';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import { connect, Provider } from 'react-redux';
 import katex from 'katex';
 import PropTypes from 'prop-types';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
 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.1.1";
+const libVersion = "14.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -5090,16 +5091,302 @@ const styles$d = 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 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 = StyleSheet.create({
+      inlineStyles: inlineStylesObject
+    });
+    stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);
+  }
+  return {
+    style: shouldInlineStyles ? inlineStylesObject : {},
+    className: css(...stylesheetStyles)
+  };
+}
+
+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`.
+  // eslint-disable-next-line no-restricted-syntax
+  static getDerivedStateFromProps({
+    in: nextIn
+  }, prevState) {
+    if (nextIn && prevState.status === "unmounted") {
+      return {
+        status: "mounted"
+      };
+    }
+    return null;
+  }
+  constructor(props) {
+    super(props);
+    this.classNameQueue = void 0;
+    this.appliedClassNames = void 0;
+    this._isMounted = false;
+    this.addClass = (elem, className) => {
+      if (className) {
+        elem.classList.add(className);
+        this.appliedClassNames.add(className);
+      }
+    };
+    this.removeClass = (elem, className) => {
+      if (className) {
+        elem.classList.remove(className);
+        this.appliedClassNames.delete(className);
+      }
+    };
+    this.flushClassNameQueue = () => {
+      if (this._isMounted) {
+        const node = ReactDOM.findDOMNode(this);
+        if (node instanceof Element) {
+          this.classNameQueue.forEach(([removeClassName, addClassName]) => {
+            // 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.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 = 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.Component {
+  render() {
+    const {
+      children
+    } = this.props;
+    return (
+      /*#__PURE__*/
+      // `component={null}` prevents wrapping each child with a <div>
+      // which can muck with certain layouts.
+      React.createElement(TransitionGroup, {
+        component: null
+      }, React.Children.map(children, child => /*#__PURE__*/React.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.Component {
   constructor(...args) {
     super(...args);
     this._containerRef = /*#__PURE__*/React.createRef();
     this._containerResizeObserver = null;
     this._throttleResize = false;
-    this.hasMounted = false;
     this.state = {
-      containerWidth: 0,
-      hasBeenActivated: false
+      containerWidth: 0
     };
     this._resize = () => {
       var _this$_containerRef$c;
@@ -5120,9 +5407,6 @@ class MobileKeypad extends React.Component {
     };
     this.activate = () => {
       this.props.setKeypadActive(true);
-      this.setState({
-        hasBeenActivated: true
-      });
     };
     this.dismiss = () => {
       var _this$props$onDismiss, _this$props;
@@ -5160,6 +5444,7 @@ class MobileKeypad extends React.Component {
     };
   }
   componentDidMount() {
+    var _this$props$onElement, _this$props2;
     this._resize();
     window.addEventListener("resize", this._throttleResizeHandler);
     window.addEventListener("orientationchange", this._throttleResizeHandler);
@@ -5172,6 +5457,14 @@ 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, {
+      activate: this.activate,
+      dismiss: this.dismiss,
+      configure: this.configure,
+      setCursor: this.setCursor,
+      setKeyHandler: this.setKeyHandler,
+      getDOMNode: this.getDOMNode
+    });
   }
   componentWillUnmount() {
     var _this$_containerResiz;
@@ -5196,52 +5489,37 @@ class MobileKeypad extends React.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 ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
     const convertDotToTimes = keypadConfig == null ? void 0 : keypadConfig.times;
-    return /*#__PURE__*/React.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 = _extends({}, 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 ? void 0 : _this$props$onElement.call(_this$props2, elementWithDispatchMethods);
+    return /*#__PURE__*/React.createElement(AphroditeCSSTransitionGroup, {
+      transitionEnterTimeout: AnimationDurationInMS,
+      transitionLeaveTimeout: AnimationDurationInMS,
+      transitionStyle: {
+        enter: {
+          transform: "translate3d(0, 100%, 0)",
+          transition: `${AnimationDurationInMS}ms ease-out`
+        },
+        enterActive: {
+          transform: "translate3d(0, 0, 0)"
+        },
+        leave: {
+          transform: "translate3d(0, 0, 0)",
+          transition: `${AnimationDurationInMS}ms ease-out`
+        },
+        leaveActive: {
+          transform: "translate3d(0, 100%, 0)"
         }
       }
+    }, keypadActive ? /*#__PURE__*/React.createElement(View, {
+      style: containerStyle,
+      forwardRef: this._containerRef
     }, /*#__PURE__*/React.createElement(Keypad$2, {
       onAnalyticsEvent: this.props.onAnalyticsEvent,
       extraKeys: keypadConfig == null ? void 0 : keypadConfig.extraKeys,
@@ -5257,7 +5535,7 @@ class MobileKeypad extends React.Component {
       advancedRelations: isExpression,
       expandedView: containerWidth > expandedViewThreshold$1,
       showDismiss: true
-    }));
+    })) : null);
   }
 }
 const styles$c = StyleSheet.create({
@@ -5265,15 +5543,7 @@ const styles$c = 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"
   }
 });