@khanacademy/math-input 16.0.0 → 16.1.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @khanacademy/math-input
 
+## 16.1.1
+
+### Patch Changes
+
+-   [#841](https://github.com/Khan/perseus/pull/841) [`41d3cd93`](https://github.com/Khan/perseus/commit/41d3cd93f78d4649c8a57b6fa4964c0c9f2c45b0) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove unused SVG tooling
+
+*   [#843](https://github.com/Khan/perseus/pull/843) [`27f691aa`](https://github.com/Khan/perseus/commit/27f691aa11f061b54db487b5b35222431776260f) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove seemingly unused index.html
+
+-   [#844](https://github.com/Khan/perseus/pull/844) [`3803452b`](https://github.com/Khan/perseus/commit/3803452b0593649faf4043bf6e1d7681a14078e4) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove seemingly unused Less
+
+*   [#846](https://github.com/Khan/perseus/pull/846) [`ef32b88f`](https://github.com/Khan/perseus/commit/ef32b88f5027154784fb496506d7c96ee3765eac) Thanks [@handeyeco](https://github.com/handeyeco)! - Break up common-styles.ts
+
+-   [#840](https://github.com/Khan/perseus/pull/840) [`820febc5`](https://github.com/Khan/perseus/commit/820febc5814a5a10d7c1743be8aa9d220f2d9bd8) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove Redux as a dependency
+
+*   [#845](https://github.com/Khan/perseus/pull/845) [`67a09051`](https://github.com/Khan/perseus/commit/67a09051c61df98b697349ad75760193e4228bfe) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove some seemingly unused types
+
+## 16.1.0
+
+### Minor Changes
+
+-   [#794](https://github.com/Khan/perseus/pull/794) [`a91c84fe`](https://github.com/Khan/perseus/commit/a91c84fe53827ff4333220777a9918882b7fe9f0) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Removing the useV2Keypad apiOption as the V1 keypad is no longer in use.
+
+### Patch Changes
+
+-   [#814](https://github.com/Khan/perseus/pull/814) [`105d2060`](https://github.com/Khan/perseus/commit/105d20603d935d35cff237b17f0bfb57ca751e4c) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Minor build change to how we provide Typescript type definitions (should be no change to build output).
+
+-   Updated dependencies [[`a91c84fe`](https://github.com/Khan/perseus/commit/a91c84fe53827ff4333220777a9918882b7fe9f0), [`105d2060`](https://github.com/Khan/perseus/commit/105d20603d935d35cff237b17f0bfb57ca751e4c)]:
+    -   @khanacademy/perseus-core@1.4.0
+
 ## 16.0.0
 
 ### Major Changes

package/README.md

@@ -2,7 +2,7 @@
 
 Khan Academy's expression editor for the mobile web. Used in the [Perseus](https://github.com/khan/perseus) exercise framework to power math input and expression editing on small screens.
 
-Built with [React](https://github.com/facebook/react), [Redux](https://github.com/reactjs/redux), [MathQuill](https://github.com/mathquill/mathquill), [Aphrodite](https://github.com/khan/aphrodite), and more.
+Built with [React](https://github.com/facebook/react), [MathQuill](https://github.com/mathquill/mathquill), [Aphrodite](https://github.com/khan/aphrodite), and more.
 
 ![](https://cloud.githubusercontent.com/assets/1309177/15994911/d1acd29e-30c5-11e6-9707-6bef8e69114f.gif)
 
@@ -26,14 +26,6 @@ When you start the project you'll need to be on a device that supports touch or
 
 ![](https://cloud.githubusercontent.com/assets/1309177/15994912/d2b60cdc-30c5-11e6-8eb4-9086d76f327c.gif)
 
-## Demo
-
-A live demo is available via [GitHub Pages](http://khan.github.io/math-input/). You can configure some of the keypad's behaviors, along with the set of active keys, via the [editor](http://khan.github.io/math-input/custom.html).
-
-Note that, as the input and keypad only respond to touch events, you'll need to enable mobile emulation (e.g., as supported by Chrome) in order to use the keypad in a desktop browser.
-
-To run the demo locally, clone the repo, `yarn install`, `yarn watch`, and open the `index.html` page. The local behaviors can similarly be customized via the editor @ `custom.html`.
-
 ## License
 
 [MIT License](http://opensource.org/licenses/MIT)

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

@@ -1,7 +1,8 @@
+/// <reference path="../../../types/aphrodite.d.ts" />
 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;
+export declare const createTransition: (styles: InAnimationStyles) => import("aphrodite").StyleDeclaration;

package/dist/components/input/cursor-styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Common parameters used to style components.
+ */
+export declare const cursorHandleRadiusPx = 11;
+export declare const cursorHandleDistanceMultiplier = 1.045;

package/dist/components/input/math-wrapper.d.ts

@@ -1,6 +1,6 @@
+import type { MathFieldInterface } from "./mathquill-types";
 import type Key from "../../data/keys";
 import type { Cursor } from "../../types";
-import type { MathFieldInterface } from "./mathquill-types";
 /**
  * This file contains a wrapper around MathQuill so that we can provide a
  * more regular interface for the functionality we need while insulating us

package/dist/components/input/scroll-into-view.d.ts

@@ -8,4 +8,5 @@
  * 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.
  */
+export declare const toolbarHeightPx = 60;
 export declare const scrollIntoView: (containerNode: any, keypadNode: any) => void;

package/dist/data/key-configs.d.ts

@@ -1,5 +1,5 @@
-import type { KeyConfig } from "../types";
 import type Key from "./keys";
+import type { KeyConfig } from "../types";
 declare const KeyConfigs: {
     [key in Key]: KeyConfig;
 };

package/dist/enums.d.ts

@@ -7,32 +7,3 @@ export declare enum KeypadType {
 }
 export declare const KeyTypes: string[];
 export type KeyType = typeof KeyTypes[number];
-export declare enum DeviceOrientation {
-    LANDSCAPE = "LANDSCAPE",
-    PORTRAIT = "PORTRAIT"
-}
-export declare enum DeviceType {
-    PHONE = "PHONE",
-    TABLET = "TABLET"
-}
-export declare enum LayoutMode {
-    FULLSCREEN = "FULLSCREEN",
-    COMPACT = "COMPACT"
-}
-export declare enum BorderDirection {
-    LEFT = "LEFT",
-    BOTTOM = "BOTTOM"
-}
-export declare const BorderStyles: {
-    [style: string]: ReadonlyArray<BorderDirection>;
-};
-export declare enum IconType {
-    MATH = "MATH",
-    SVG = "SVG",
-    TEXT = "TEXT"
-}
-export declare enum EchoAnimationType {
-    SLIDE_AND_FADE = "SLIDE_AND_FADE",
-    FADE_ONLY = "FADE_ONLY",
-    LONG_FADE_ONLY = "LONG_FADE_ONLY"
-}

package/dist/es/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/es/index.js

@@ -17,24 +17,21 @@ import PropTypes from 'prop-types';
 
 // 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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -106,11 +103,6 @@ View.styles = StyleSheet.create({
 /**
  * Common parameters used to style components.
  */
-const wonderBlocksBlue = Color.blue;
-const offBlack = Color.offBlack;
-Color.offBlack32;
-Color.offBlack16;
-Color.offBlack8;
 const cursorHandleRadiusPx = 11;
 
 // The amount to multiply the radius by to get the distance from the
@@ -118,10 +110,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;
 
 const touchTargetRadiusPx = 2 * cursorHandleRadiusPx;
 const touchTargetHeightPx = 2 * touchTargetRadiusPx;
@@ -1321,6 +1309,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
@@ -2003,6 +1996,8 @@ class MathInput extends React.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();
@@ -2038,7 +2033,7 @@ class MathInput extends React.Component {
     const innerStyle = _extends({}, inlineStyles.innerContainer, {
       borderWidth: this.getBorderWidthPx()
     }, focused ? {
-      borderColor: wonderBlocksBlue
+      borderColor: Color.blue
     } : {}, style);
 
     // NOTE(diedra): This label explicitly refers to tapping because this field
@@ -2124,7 +2119,7 @@ const inlineStyles = {
     borderStyle: "solid",
     borderColor: Color.offBlack50,
     borderRadius: 4,
-    color: offBlack
+    color: Color.offBlack
   }
 };
 
@@ -2361,37 +2356,9 @@ 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;
-}({});
-
 const getDefaultOperatorFields = ({
   key,
   keyType: _keyType = "OPERATOR",
-  iconType: _iconType = IconType.SVG,
   ariaLabel: _ariaLabel = key,
   data: _data = key
 }) => ({
@@ -2399,14 +2366,12 @@ const getDefaultOperatorFields = ({
   type: _keyType,
   ariaLabel: _ariaLabel,
   icon: {
-    type: _iconType,
     data: _data
   }
 });
 const getDefaultValueFields = ({
   key,
   keyType: _keyType2 = "VALUE",
-  iconType: _iconType2 = IconType.MATH,
   ariaLabel: _ariaLabel2 = key,
   data: _data2 = key
 }) => ({
@@ -2414,7 +2379,6 @@ const getDefaultValueFields = ({
   type: _keyType2,
   ariaLabel: _ariaLabel2,
   icon: {
-    type: _iconType2,
     data: _data2
   }
 });
@@ -2422,14 +2386,12 @@ const getDefaultNumberFields = ({
   key,
   data: _data3 = key.replace("NUM_", ""),
   keyType: _keyType3 = "VALUE",
-  iconType: _iconType3 = IconType.TEXT,
   ariaLabel: _ariaLabel3 = _data3
 }) => ({
   id: key,
   type: _keyType3,
   ariaLabel: _ariaLabel3,
   icon: {
-    type: _iconType3,
     data: _data3
   }
 });
@@ -5614,5 +5576,15 @@ 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;
+}({});
+
 export { CursorContext, Keypad as DesktopKeypad, KeyArray, KeyConfigs, KeypadContext, MathInput as KeypadInput, KeypadType, MobileKeypad, StatefulKeypadContextProvider, createMathField, getCursorContext, keyToMathquillMap as keyTranslator, keypadElementPropType, libVersion, mathQuillInstance };
 //# sourceMappingURL=index.js.map