@pie-lib/math-toolbar 1.11.31-next.135 → 1.11.31-next.1844

package/lib/math-preview.js

@@ -31,10 +31,20 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _mathInput = require("@pie-lib/math-input");
 
+var _utils = require("./utils");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+var _mq$CommonMqStyles = _mathInput.mq.CommonMqStyles,
+    commonMqFontStyles = _mq$CommonMqStyles.commonMqFontStyles,
+    longdivStyles = _mq$CommonMqStyles.longdivStyles,
+    supsubStyles = _mq$CommonMqStyles.supsubStyles;
 var log = (0, _debug["default"])('@pie-lib:math-toolbar:math-preview');
 
 var RawMathPreview = /*#__PURE__*/function (_React$Component) {
@@ -48,6 +58,19 @@ var RawMathPreview = /*#__PURE__*/function (_React$Component) {
   }
 
   (0, _createClass2["default"])(RawMathPreview, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      (0, _utils.markFractionBaseSuperscripts)();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // Re-run only if LaTeX changed
+      if (this.props.node.data.get('latex') !== prevProps.node.data.get('latex')) {
+        (0, _utils.markFractionBaseSuperscripts)();
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       log('[render] data: ', this.props.node.data);
@@ -83,26 +106,12 @@ exports.RawMathPreview = RawMathPreview;
 
 var mp = function mp(theme) {
   return {
-    root: {
+    root: _objectSpread(_objectSpread(_objectSpread({
       display: 'inline-flex',
       alignItems: 'center',
       position: 'relative',
-      '& *': {
-        fontFamily: 'MJXZERO, MJXTEX !important',
-        '-webkit-font-smoothing': 'antialiased !important'
-      },
-      '& > .mq-math-mode > span > var': {
-        fontFamily: 'MJXZERO, MJXTEX-I !important'
-      },
-      '& > .mq-math-mode span var': {
-        fontFamily: 'MJXZERO, MJXTEX-I !important'
-      },
-      '& > .mq-math-mode .mq-nonSymbola': {
-        fontFamily: 'MJXZERO, MJXTEX-I !important'
-      },
-      '& > .mq-math-mode > span > var.mq-operator-name': {
-        fontFamily: 'MJXZERO, MJXTEX !important'
-      },
+      '& *': commonMqFontStyles
+    }, supsubStyles), longdivStyles), {}, {
       '& > .mq-math-mode': {
         border: 'solid 1px lightgrey'
       },
@@ -132,23 +141,6 @@ var mp = function mp(theme) {
         paddingBottom: '0 !important',
         marginBottom: '-2px'
       },
-      '& > .mq-math-mode sup.mq-nthroot': {
-        fontSize: '70.7% !important',
-        verticalAlign: '0.5em !important',
-        paddingRight: '0.15em'
-      },
-      '& > .mq-longdiv-inner': {
-        marginTop: '-1px',
-        marginLeft: '5px !important;',
-        '& > .mq-empty': {
-          padding: '0 !important',
-          marginLeft: '0px !important',
-          marginTop: '2px'
-        }
-      },
-      '& > .mq-math-mode .mq-longdiv': {
-        display: 'inline-flex !important'
-      },
       '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner .mq-empty': {
         paddingTop: '6px !important',
         paddingLeft: '4px !important'
@@ -156,9 +148,6 @@ var mp = function mp(theme) {
       '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
         marginLeft: '0 !important'
       },
-      '& > .mq-math-mode .mq-supsub': {
-        fontSize: '70.7% !important'
-      },
       '& > .mq-math-mode .mq-overarrow': {
         fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
       },
@@ -172,15 +161,6 @@ var mp = function mp(theme) {
         marginTop: '-2px !important',
         paddingTop: '5px !important'
       },
-      '& > .mq-supsub ': {
-        fontSize: '70.7%'
-      },
-      '& > .mq-math-mode .mq-supsub.mq-sup-only': {
-        verticalAlign: '-0.1em !important',
-        '& .mq-sup': {
-          marginBottom: '0px !important'
-        }
-      },
       '& .mq-overarrow-inner': {
         paddingTop: '0 !important',
         border: 'none !important'
@@ -199,9 +179,16 @@ var mp = function mp(theme) {
           top: '-0.4em',
           left: '-1px'
         },
+        // NOTE: This workaround adds `!important` to enforce the correct positioning and styling
+        // of `.mq-overarrow.mq-arrow-both` elements in MathQuill. This ensures consistent display
+        // regardless of the order in which MathQuill is initialized on our websites.
+        //
+        // In the future, investigate why MathQuill scripts and styles are being initialized
+        // more than once and address the root cause to prevent potential conflicts and ensure
+        // optimal performance.
         '&:after': {
           top: '0px !important',
-          position: 'absolute',
+          position: 'absolute !important',
           right: '-2px'
         },
         '&.mq-empty:after': {
@@ -226,8 +213,11 @@ var mp = function mp(theme) {
       },
       '& .mq-parallelogram': {
         lineHeight: 0.85
+      },
+      '& span[data-prime="true"]': {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
       }
-    },
+    }),
     selected: {
       border: "solid 1px ".concat(theme.palette.primary.main),
       '& > .mq-math-mode': {

package/lib/math-preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/math-preview.jsx"],"names":["log","RawMathPreview","props","node","data","latex","get","classes","isSelected","onFocus","onBlur","root","selected","insideOverlay","React","Component","PropTypes","string","object","bool","func","mp","theme","display","alignItems","position","fontFamily","border","outline","boxShadow","borderRadius","paddingTop","verticalAlign","top","left","marginTop","padding","paddingBottom","marginBottom","fontSize","paddingRight","marginLeft","paddingLeft","borderTop","minWidth","lineHeight","right","palette","primary","main","bottom"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport { mq } from '@pie-lib/math-input';\n\nconst log = debug('@pie-lib:math-toolbar:math-preview');\n\nexport class RawMathPreview extends React.Component {\n  static propTypes = {\n    latex: PropTypes.string,\n    node: PropTypes.object,\n    classes: PropTypes.object,\n    isSelected: PropTypes.bool,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n  };\n\n  render() {\n    log('[render] data: ', this.props.node.data);\n    const latex = this.props.node.data.get('latex');\n    const { classes, isSelected, onFocus, onBlur } = this.props;\n    return (\n      <div className={classNames(classes.root, isSelected && classes.selected)}>\n        {' '}\n        <span className={classes.insideOverlay} />\n        <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />\n      </div>\n    );\n  }\n}\n\nconst mp = (theme) => ({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    position: 'relative',\n    '& *': {\n      fontFamily: 'MJXZERO, MJXTEX !important',\n      '-webkit-font-smoothing': 'antialiased !important',\n    },\n    '& > .mq-math-mode > span > var': {\n      fontFamily: 'MJXZERO, MJXTEX-I !important',\n    },\n    '& > .mq-math-mode span var': {\n      fontFamily: 'MJXZERO, MJXTEX-I !important',\n    },\n    '& > .mq-math-mode .mq-nonSymbola': {\n      fontFamily: 'MJXZERO, MJXTEX-I !important',\n    },\n    '& > .mq-math-mode > span > var.mq-operator-name': {\n      fontFamily: 'MJXZERO, MJXTEX !important',\n    },\n    '& > .mq-math-mode': {\n      border: 'solid 1px lightgrey',\n    },\n    '& > .mq-focused': {\n      outline: 'none',\n      boxShadow: 'none',\n      border: 'solid 1px black',\n      borderRadius: '0px',\n    },\n    '& > .mq-math-mode .mq-root-block': {\n      paddingTop: '7px !important',\n    },\n    '& > .mq-math-mode .mq-overarc ': {\n      paddingTop: '0.45em !important',\n    },\n    '& > .mq-math-mode .mq-sqrt-prefix': {\n      verticalAlign: 'baseline !important',\n      top: '1px !important',\n      left: '-0.1em !important',\n    },\n    '& > .mq-math-mode .mq-denominator': {\n      marginTop: '-5px !important',\n      padding: '0.5em 0.1em 0.1em !important',\n    },\n    '& > .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {\n      padding: '0 0.1em !important',\n      paddingBottom: '0 !important',\n      marginBottom: '-2px',\n    },\n    '& > .mq-math-mode sup.mq-nthroot': {\n      fontSize: '70.7% !important',\n      verticalAlign: '0.5em !important',\n      paddingRight: '0.15em',\n    },\n    '& > .mq-longdiv-inner': {\n      marginTop: '-1px',\n      marginLeft: '5px !important;',\n\n      '& > .mq-empty': {\n        padding: '0 !important',\n        marginLeft: '0px !important',\n        marginTop: '2px',\n      },\n    },\n    '& > .mq-math-mode .mq-longdiv': {\n      display: 'inline-flex !important',\n    },\n    '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner .mq-empty': {\n      paddingTop: '6px !important',\n      paddingLeft: '4px !important',\n    },\n    '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner': {\n      marginLeft: '0 !important',\n    },\n    '& > .mq-math-mode .mq-supsub': {\n      fontSize: '70.7% !important',\n    },\n    '& > .mq-math-mode .mq-overarrow': {\n      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',\n    },\n    '& > .mq-math-mode .mq-paren': {\n      verticalAlign: 'top !important',\n      padding: '1px 0.1em !important',\n    },\n\n    '& > .mq-math-mode .mq-sqrt-stem': {\n      borderTop: '0.07em solid',\n      marginLeft: '-1.5px',\n      marginTop: '-2px !important',\n      paddingTop: '5px !important',\n    },\n    '& > .mq-supsub ': {\n      fontSize: '70.7%',\n    },\n\n    '& > .mq-math-mode .mq-supsub.mq-sup-only': {\n      verticalAlign: '-0.1em !important',\n\n      '& .mq-sup': {\n        marginBottom: '0px !important',\n      },\n    },\n    '& .mq-overarrow-inner': {\n      paddingTop: '0 !important',\n      border: 'none !important',\n    },\n    '& .mq-editable-field .mq-cursor': {\n      marginTop: '-15px !important',\n    },\n    '& .mq-overarrow.mq-arrow-both': {\n      top: '7.5px',\n      marginTop: '0px',\n      minWidth: '1.23em',\n      '& *': {\n        lineHeight: '1 !important',\n      },\n      '&:before': {\n        top: '-0.4em',\n        left: '-1px',\n      },\n      '&:after': {\n        top: '0px !important',\n        position: 'absolute',\n        right: '-2px',\n      },\n      '&.mq-empty:after': {\n        top: '-0.45em',\n      },\n    },\n    '& .mq-overarrow.mq-arrow-right': {\n      '&:before': {\n        top: '-0.4em',\n        right: '-1px',\n      },\n    },\n    '& .mq-overarrow-inner-right': {\n      display: 'none !important',\n    },\n    '& .mq-overarrow-inner-left': {\n      display: 'none !important',\n    },\n    '& .mq-longdiv-inner': {\n      borderTop: '1px solid !important',\n      paddingTop: '1.5px !important',\n    },\n    '& .mq-parallelogram': {\n      lineHeight: 0.85,\n    },\n  },\n  selected: {\n    border: `solid 1px ${theme.palette.primary.main}`,\n    '& > .mq-math-mode': {\n      border: 'solid 0px lightgrey',\n    },\n  },\n  insideOverlay: {\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n  },\n});\n\nexport default withStyles(mp)(RawMathPreview);\n"],"file":"math-preview.js"}
+{"version":3,"sources":["../src/math-preview.jsx"],"names":["mq","CommonMqStyles","commonMqFontStyles","longdivStyles","supsubStyles","log","RawMathPreview","prevProps","props","node","data","get","latex","classes","isSelected","onFocus","onBlur","root","selected","insideOverlay","React","Component","PropTypes","string","object","bool","func","mp","theme","display","alignItems","position","border","outline","boxShadow","borderRadius","paddingTop","verticalAlign","top","left","marginTop","padding","paddingBottom","marginBottom","paddingLeft","marginLeft","fontFamily","borderTop","minWidth","lineHeight","right","palette","primary","main","bottom"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport { mq } from '@pie-lib/math-input';\nimport { markFractionBaseSuperscripts } from './utils';\n\nconst { commonMqFontStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;\n\nconst log = debug('@pie-lib:math-toolbar:math-preview');\n\nexport class RawMathPreview extends React.Component {\n  static propTypes = {\n    latex: PropTypes.string,\n    node: PropTypes.object,\n    classes: PropTypes.object,\n    isSelected: PropTypes.bool,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n  };\n\n  componentDidMount() {\n    markFractionBaseSuperscripts();\n  }\n\n  componentDidUpdate(prevProps) {\n    // Re-run only if LaTeX changed\n    if (this.props.node.data.get('latex') !== prevProps.node.data.get('latex')) {\n      markFractionBaseSuperscripts();\n    }\n  }\n\n  render() {\n    log('[render] data: ', this.props.node.data);\n    const latex = this.props.node.data.get('latex');\n    const { classes, isSelected, onFocus, onBlur } = this.props;\n    return (\n      <div className={classNames(classes.root, isSelected && classes.selected)}>\n        {' '}\n        <span className={classes.insideOverlay} />\n        <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />\n      </div>\n    );\n  }\n}\n\nconst mp = (theme) => ({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    position: 'relative',\n    '& *': commonMqFontStyles,\n    ...supsubStyles,\n    ...longdivStyles,\n    '& > .mq-math-mode': {\n      border: 'solid 1px lightgrey',\n    },\n    '& > .mq-focused': {\n      outline: 'none',\n      boxShadow: 'none',\n      border: 'solid 1px black',\n      borderRadius: '0px',\n    },\n    '& > .mq-math-mode .mq-root-block': {\n      paddingTop: '7px !important',\n    },\n    '& > .mq-math-mode .mq-overarc ': {\n      paddingTop: '0.45em !important',\n    },\n    '& > .mq-math-mode .mq-sqrt-prefix': {\n      verticalAlign: 'baseline !important',\n      top: '1px !important',\n      left: '-0.1em !important',\n    },\n    '& > .mq-math-mode .mq-denominator': {\n      marginTop: '-5px !important',\n      padding: '0.5em 0.1em 0.1em !important',\n    },\n    '& > .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {\n      padding: '0 0.1em !important',\n      paddingBottom: '0 !important',\n      marginBottom: '-2px',\n    },\n    '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner .mq-empty': {\n      paddingTop: '6px !important',\n      paddingLeft: '4px !important',\n    },\n    '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner': {\n      marginLeft: '0 !important',\n    },\n    '& > .mq-math-mode .mq-overarrow': {\n      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',\n    },\n    '& > .mq-math-mode .mq-paren': {\n      verticalAlign: 'top !important',\n      padding: '1px 0.1em !important',\n    },\n\n    '& > .mq-math-mode .mq-sqrt-stem': {\n      borderTop: '0.07em solid',\n      marginLeft: '-1.5px',\n      marginTop: '-2px !important',\n      paddingTop: '5px !important',\n    },\n\n    '& .mq-overarrow-inner': {\n      paddingTop: '0 !important',\n      border: 'none !important',\n    },\n    '& .mq-editable-field .mq-cursor': {\n      marginTop: '-15px !important',\n    },\n    '& .mq-overarrow.mq-arrow-both': {\n      top: '7.5px',\n      marginTop: '0px',\n      minWidth: '1.23em',\n      '& *': {\n        lineHeight: '1 !important',\n      },\n      '&:before': {\n        top: '-0.4em',\n        left: '-1px',\n      },\n      // NOTE: This workaround adds `!important` to enforce the correct positioning and styling\n      // of `.mq-overarrow.mq-arrow-both` elements in MathQuill. This ensures consistent display\n      // regardless of the order in which MathQuill is initialized on our websites.\n      //\n      // In the future, investigate why MathQuill scripts and styles are being initialized\n      // more than once and address the root cause to prevent potential conflicts and ensure\n      // optimal performance.\n      '&:after': {\n        top: '0px !important',\n        position: 'absolute !important',\n        right: '-2px',\n      },\n      '&.mq-empty:after': {\n        top: '-0.45em',\n      },\n    },\n    '& .mq-overarrow.mq-arrow-right': {\n      '&:before': {\n        top: '-0.4em',\n        right: '-1px',\n      },\n    },\n    '& .mq-overarrow-inner-right': {\n      display: 'none !important',\n    },\n    '& .mq-overarrow-inner-left': {\n      display: 'none !important',\n    },\n    '& .mq-longdiv-inner': {\n      borderTop: '1px solid !important',\n      paddingTop: '1.5px !important',\n    },\n    '& .mq-parallelogram': {\n      lineHeight: 0.85,\n    },\n    '& span[data-prime=\"true\"]': {\n      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',\n    },\n  },\n  selected: {\n    border: `solid 1px ${theme.palette.primary.main}`,\n    '& > .mq-math-mode': {\n      border: 'solid 0px lightgrey',\n    },\n  },\n  insideOverlay: {\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n  },\n});\n\nexport default withStyles(mp)(RawMathPreview);\n"],"file":"math-preview.js"}

package/lib/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.markFractionBaseSuperscripts = void 0;
+
+var markFractionBaseSuperscripts = function markFractionBaseSuperscripts() {
+  document.querySelectorAll('.mq-supsub.mq-sup-only').forEach(function (supsub) {
+    var prev = supsub.previousElementSibling;
+
+    if (prev && prev.classList.contains('mq-non-leaf') && prev.querySelector('.mq-fraction')) {
+      supsub.classList.add('mq-after-fraction-group');
+    } else {
+      supsub.classList.remove('mq-after-fraction-group');
+    }
+  });
+};
+
+exports.markFractionBaseSuperscripts = markFractionBaseSuperscripts;
+//# sourceMappingURL=utils.js.map

package/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.js"],"names":["markFractionBaseSuperscripts","document","querySelectorAll","forEach","supsub","prev","previousElementSibling","classList","contains","querySelector","add","remove"],"mappings":";;;;;;;AAAO,IAAMA,4BAA4B,GAAG,SAA/BA,4BAA+B,GAAM;AAChDC,EAAAA,QAAQ,CAACC,gBAAT,CAA0B,wBAA1B,EAAoDC,OAApD,CAA4D,UAACC,MAAD,EAAY;AACtE,QAAMC,IAAI,GAAGD,MAAM,CAACE,sBAApB;;AAEA,QAAID,IAAI,IAAIA,IAAI,CAACE,SAAL,CAAeC,QAAf,CAAwB,aAAxB,CAAR,IAAkDH,IAAI,CAACI,aAAL,CAAmB,cAAnB,CAAtD,EAA0F;AACxFL,MAAAA,MAAM,CAACG,SAAP,CAAiBG,GAAjB,CAAqB,yBAArB;AACD,KAFD,MAEO;AACLN,MAAAA,MAAM,CAACG,SAAP,CAAiBI,MAAjB,CAAwB,yBAAxB;AACD;AACF,GARD;AASD,CAVM","sourcesContent":["export const markFractionBaseSuperscripts = () => {\n  document.querySelectorAll('.mq-supsub.mq-sup-only').forEach((supsub) => {\n    const prev = supsub.previousElementSibling;\n\n    if (prev && prev.classList.contains('mq-non-leaf') && prev.querySelector('.mq-fraction')) {\n      supsub.classList.add('mq-after-fraction-group');\n    } else {\n      supsub.classList.remove('mq-after-fraction-group');\n    }\n  });\n};\n"],"file":"utils.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.11.31-next.135+4d4c61d3",
+  "version": "1.11.31-next.1844+4ac095ca",
   "description": "Math toolbar for editing math equations",
   "keywords": [
     "math",
@@ -19,19 +19,21 @@
   "dependencies": {
     "@material-ui/core": "^3.8.3",
     "@material-ui/icons": "^3.0.2",
-    "@pie-lib/math-input": "^6.11.4",
+    "@pie-lib/math-input": "^6.11.5-next.1844+4ac095ca",
+    "@pie-lib/render-ui": "^4.15.10-next.1639+4ac095ca",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "keycode": "^2.2.0",
-    "lodash": "^4.17.11"
+    "lodash": "^4.17.11",
+    "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.8.1",
     "react-dom": "^16.9.0"
   },
   "devDependencies": {
-    "@pie-lib/test-utils": "^0.2.33"
+    "@pie-lib/test-utils": "^0.2.34-next.1848+4ac095ca"
   },
   "scripts": {},
-  "gitHead": "4d4c61d38b1d5f66818a3237f720566db9c9f830"
+  "gitHead": "4ac095ca931e5fe8f131f28f41dd61093bd55d98"
 }

package/src/__tests__/__snapshots__/editor-and-pad.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot renders 1`] = `
+<div
+  className=""
+>
+  <div
+    className=""
+  >
+    <div
+      className=""
+    >
+      <WithStyles(Input)
+        className=""
+        innerRef={[Function]}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+      />
+    </div>
+  </div>
+  <hr />
+  <HorizontalKeypad
+    additionalKeys={Array []}
+    className=""
+    mode="scientific"
+    noDecimal={false}
+    onClick={[Function]}
+  />
+</div>
+`;

package/src/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot renders with DONE button if hideDoneButton is not defined 1`] = `
+<div
+  className=""
+>
+  <div />
+  <WithStyles(EditorAndPad)
+    classNames={Object {}}
+    controlledKeypad={true}
+    showKeypad={true}
+  />
+  <WithStyles(RawDoneButton)
+    hideBackground={false}
+  />
+</div>
+`;
+
+exports[`snapshot renders without DONE button if hideDoneButton value is true 1`] = `
+<div
+  className=""
+>
+  <div />
+  <WithStyles(EditorAndPad)
+    classNames={Object {}}
+    controlledKeypad={true}
+    showKeypad={true}
+  />
+</div>
+`;

package/src/__tests__/__snapshots__/math-preview.test.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot renders 1`] = `
+<RawMathPreview
+  classes={
+    Object {
+      "insideOverlay": "RawMathPreview-insideOverlay-3",
+      "root": "RawMathPreview-root-1",
+      "selected": "RawMathPreview-selected-2",
+    }
+  }
+  isSelected={false}
+  node={
+    Object {
+      "data": Object {
+        "get": [MockFunction],
+      },
+    }
+  }
+  onBlur={[MockFunction]}
+  onFocus={[MockFunction]}
+/>
+`;

package/src/__tests__/editor-and-pad.test.js

@@ -0,0 +1,25 @@
+import { EditorAndPad } from '../editor-and-pad';
+import { shallow } from 'enzyme';
+import React from 'react';
+
+describe('snapshot', () => {
+  let wrapper;
+  let onBlur = jest.fn();
+
+  beforeAll(() => {
+    wrapper = (extras) => {
+      const defaults = {
+        classes: {},
+        classNames: {},
+        onBlur,
+      };
+      const props = { ...defaults, ...extras };
+
+      return shallow(<EditorAndPad {...props} />);
+    };
+  });
+
+  it('renders', () => {
+    expect(wrapper()).toMatchSnapshot();
+  });
+});

package/src/__tests__/index.test.js

@@ -0,0 +1,28 @@
+import { RawPureToolbar } from '../index';
+import { shallow } from 'enzyme';
+import React from 'react';
+
+describe('snapshot', () => {
+  let wrapper;
+
+  beforeAll(() => {
+    wrapper = (extras) => {
+      const defaults = {
+        classes: {},
+        controlledKeypad: true,
+        showKeypad: true,
+      };
+      const props = { ...defaults, ...extras };
+
+      return shallow(<RawPureToolbar {...props} />);
+    };
+  });
+
+  it('renders with DONE button if hideDoneButton is not defined', () => {
+    expect(wrapper()).toMatchSnapshot();
+  });
+
+  it('renders without DONE button if hideDoneButton value is true', () => {
+    expect(wrapper({ hideDoneButton: true })).toMatchSnapshot();
+  });
+});

package/src/__tests__/math-preview.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import MathPreview from '../math-preview';
+
+describe('snapshot', () => {
+  let wrapper;
+
+  beforeAll(() => {
+    wrapper = (extras) => {
+      const defaults = {
+        node: {
+          data: {
+            get: jest.fn().mockReturnValue('sqrt(5)'),
+          },
+        },
+        classes: {},
+        isSelected: false,
+        onFocus: jest.fn(),
+        onBlur: jest.fn(),
+      };
+      const props = { ...defaults, ...extras };
+
+      return shallow(<MathPreview {...props} />);
+    };
+  });
+
+  it('renders', () => {
+    expect(wrapper()).toMatchSnapshot();
+  });
+});