@khanacademy/math-input 16.0.0 → 16.1.1

package/dist/fake-react-native-web/view.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../types/aphrodite.d.ts" />
 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { CSSProperties } from "aphrodite";
@@ -17,7 +18,7 @@ type Props = {
     forwardRef?: React.RefObject<HTMLDivElement>;
 };
 declare class View extends React.Component<Props> {
-    static styles: any;
+    static styles: import("aphrodite").StyleDeclaration;
     render(): React.ReactNode;
 }
 export default View;

package/dist/index.css

@@ -1,45 +1,3 @@
-/**
- * Styles for managing the popover animations.
- *
- * Ideally, we'd be generating these styles with Aphrodite (along with
- * CSSTransitionGroup's support for custom classnames), but the generated
- * styles have issues on mobile Safari.
- *   See: https://github.com/Khan/aphrodite/issues/68.
- *
- * If the animation durations change, the corresponding values in
- * echo-manager.js must change as well.
- */
-.echo-slide-and-fade-enter {
-  opacity: 1 !important;
-  transform: translate3d(0, 0, 0) !important;
-}
-.echo-slide-and-fade-enter.echo-slide-and-fade-enter-active {
-  opacity: 0 !important;
-  transform: translate3d(0, -33%, 0) !important;
-  /**
-         * TODO(charlie): These times are intentionally different, which means
-         * that the animation really "ends" after 400ms
-         * cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
-         * the transform doesn't complete. There's probably a way to achieve the
-         * same effect by manipulating the transform's Bezier curve and total
-         * displacement.
-         */
-  transition: transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
-}
-.echo-fade-only-enter {
-  opacity: 1 !important;
-}
-.echo-fade-only-enter.echo-fade-only-enter-active {
-  opacity: 0 !important;
-  transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
-}
-.echo-long-fade-only-enter {
-  opacity: 1 !important;
-}
-.echo-long-fade-only-enter.echo-long-fade-only-enter-active {
-  opacity: 0 !important;
-  transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
-}
 .keypad-input {
   outline: none !important;
 }
@@ -120,24 +78,6 @@
   color: white !important;
   display: inline-block !important;
 }
-/**
- * Styles for managing the popover animations.
- *
- * Ideally, we'd be generating these styles with Aphrodite (along with
- * CSSTransitionGroup's support for custom classnames), but the generated
- * styles have issues on mobile Safari.
- *   See: https://github.com/Khan/aphrodite/issues/68.
- *
- * If the animation durations change, the corresponding values in
- * popover-manager.js must change as well.
- */
-.popover-enter {
-  opacity: 0 !important;
-}
-.popover-enter.popover-enter-active {
-  opacity: 1 !important;
-  transition: opacity 200ms ease-out !important;
-}
 /*
  * MathQuill v0.10.1               http://mathquill.com
  * by Han, Jeanine, and Mary  maintainers@mathquill.com
@@ -574,9 +514,3 @@
   margin-top: -0.1em;
 }
 
-.tabbar_item {
-  background-color: red;
-}
-.tabbar_item:focus {
-  background-color: green;
-}

package/dist/index.js

@@ -48,7 +48,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "16.0.0";
+const libVersion = "16.1.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -134,11 +134,6 @@ class View extends React__namespace.Component {
 /**
  * Common parameters used to style components.
  */
-const wonderBlocksBlue = Color__default["default"].blue;
-const offBlack = Color__default["default"].offBlack;
-Color__default["default"].offBlack32;
-Color__default["default"].offBlack16;
-Color__default["default"].offBlack8;
 const cursorHandleRadiusPx = 11;
 
 // The amount to multiply the radius by to get the distance from the
@@ -146,10 +141,6 @@ const cursorHandleRadiusPx = 11;
 // one quadrant replace with a square.  The hypotenuse of the square is
 // 1.045 times the radius of the circle.
 const cursorHandleDistanceMultiplier = 1.045;
-// HACK(charlie): This should be injected by webapp somehow.
-// TODO(charlie): Add a link to the webapp location as soon as the footer
-// has settled down.
-const toolbarHeightPx = 60;
 
 /**
  * Renders the green tear-shaped handle under the cursor.
@@ -1353,6 +1344,11 @@ class MathWrapper {
  * TODO(charlie): Move this scroll logic out of our components and into a higher
  * level in the component tree--perhaps even into webapp, beyond Perseus.
  */
+
+// HACK(charlie): This should be injected by webapp somehow.
+// TODO(charlie): Add a link to the webapp location as soon as the footer
+// has settled down.
+const toolbarHeightPx = 60;
 const scrollIntoView = (containerNode, keypadNode) => {
   // TODO(charlie): There's no need for us to be reading the keypad bounds
   // here, since they're pre-determined by logic in the store. We should
@@ -1519,6 +1515,8 @@ class MathInput extends React__namespace.Component {
     window.addEventListener("resize", this._clearKeypadBoundsCache);
     window.addEventListener("orientationchange", this._clearKeypadBoundsCache);
   }
+
+  // eslint-disable-next-line react/no-unsafe
   UNSAFE_componentWillReceiveProps(props) {
     if (this.props.keypadElement !== props.keypadElement) {
       this._clearKeypadBoundsCache();
@@ -2068,7 +2066,7 @@ class MathInput extends React__namespace.Component {
       ...inlineStyles.innerContainer,
       borderWidth: this.getBorderWidthPx(),
       ...(focused ? {
-        borderColor: wonderBlocksBlue
+        borderColor: Color__default["default"].blue
       } : {}),
       ...style
     };
@@ -2152,7 +2150,7 @@ const inlineStyles = {
     borderStyle: "solid",
     borderColor: Color__default["default"].offBlack50,
     borderRadius: 4,
-    color: offBlack
+    color: Color__default["default"].offBlack
   }
 };
 
@@ -2391,33 +2389,6 @@ function Tabbar(props) {
   })));
 }
 
-/**
- * Constants that are shared between multiple files.
- */
-
-let KeypadType = /*#__PURE__*/function (KeypadType) {
-  KeypadType["FRACTION"] = "FRACTION";
-  KeypadType["EXPRESSION"] = "EXPRESSION";
-  return KeypadType;
-}({});
-let BorderDirection = /*#__PURE__*/function (BorderDirection) {
-  BorderDirection["LEFT"] = "LEFT";
-  BorderDirection["BOTTOM"] = "BOTTOM";
-  return BorderDirection;
-}({});
-({
-  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;
-}({});
-
 /**
  * This file contains configuration settings for the buttons in the keypad.
  */
@@ -2425,7 +2396,6 @@ const getDefaultOperatorFields = _ref => {
   let {
     key,
     keyType = "OPERATOR",
-    iconType = IconType.SVG,
     ariaLabel = key,
     data = key
   } = _ref;
@@ -2434,7 +2404,6 @@ const getDefaultOperatorFields = _ref => {
     type: keyType,
     ariaLabel,
     icon: {
-      type: iconType,
       data
     }
   };
@@ -2443,7 +2412,6 @@ const getDefaultValueFields = _ref2 => {
   let {
     key,
     keyType = "VALUE",
-    iconType = IconType.MATH,
     ariaLabel = key,
     data = key
   } = _ref2;
@@ -2452,7 +2420,6 @@ const getDefaultValueFields = _ref2 => {
     type: keyType,
     ariaLabel,
     icon: {
-      type: iconType,
       data
     }
   };
@@ -2462,7 +2429,6 @@ const getDefaultNumberFields = _ref3 => {
     key,
     data = key.replace("NUM_", ""),
     keyType = "VALUE",
-    iconType = IconType.TEXT,
     ariaLabel = data
   } = _ref3;
   return {
@@ -2470,7 +2436,6 @@ const getDefaultNumberFields = _ref3 => {
     type: keyType,
     ariaLabel,
     icon: {
-      type: iconType,
       data
     }
   };
@@ -5888,6 +5853,16 @@ const KeyArray = ["PLUS", "MINUS", "NEGATIVE", "TIMES", "DIVIDE", "DECIMAL", "PE
 // Perseus' Expression MathInput
 "PHI", "NTHROOT3", "POW", "LOG_B"];
 
+/**
+ * Constants that are shared between multiple files.
+ */
+
+let KeypadType = /*#__PURE__*/function (KeypadType) {
+  KeypadType["FRACTION"] = "FRACTION";
+  KeypadType["EXPRESSION"] = "EXPRESSION";
+  return KeypadType;
+}({});
+
 exports.CursorContext = CursorContext;
 exports.DesktopKeypad = Keypad;
 exports.KeyArray = KeyArray;