@pie-element/math-inline 7.6.1-next.11 → 7.6.1-next.12

package/lib/main.js

@@ -0,0 +1,878 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Main = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _correctAnswerToggle = require("@pie-lib/pie-toolbox/correct-answer-toggle");
+
+var _mathInput = require("@pie-lib/pie-toolbox/math-input");
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+var _mathRendering = require("@pie-lib/pie-toolbox/math-rendering");
+
+var _styles = require("@material-ui/core/styles");
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _utils = require("./utils");
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _simpleQuestionBlock = _interopRequireDefault(require("./simple-question-block"));
+
+var _mathquill = _interopRequireDefault(require("@pie-framework/mathquill"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _translator = _interopRequireDefault(require("@pie-lib/pie-toolbox/translator"));
+
+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 translator = _translator["default"].translator;
+var registered = false;
+var NEWLINE_LATEX = /\\newline/g;
+var REGEX = /{{response}}/gm;
+var DEFAULT_KEYPAD_VARIANT = 6;
+var IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+function generateAdditionalKeys() {
+  var keyData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return keyData.map(function (key) {
+    return {
+      name: key,
+      latex: key,
+      write: key,
+      label: key
+    };
+  });
+}
+
+function getKeyPadWidth() {
+  var additionalKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var equationEditor = arguments.length > 1 ? arguments[1] : undefined;
+  return Math.floor(additionalKeys.length / 5) * 30 + (equationEditor === 'miscellaneous' ? 600 : 500);
+}
+
+function prepareForStatic(model, state) {
+  var _ref = model || {},
+      config = _ref.config,
+      disabled = _ref.disabled;
+
+  var _ref2 = config || {},
+      expression = _ref2.expression,
+      responses = _ref2.responses,
+      printMode = _ref2.printMode,
+      alwaysShowCorrect = _ref2.alwaysShowCorrect;
+
+  if (config && expression) {
+    var modelExpression = expression;
+
+    if (state.showCorrect) {
+      return responses && responses.length && responses[0].answer;
+    }
+
+    var answerBlocks = 1; // assume one at least
+    // build out local state model using responses declared in expression
+
+    return (modelExpression || '').replace(REGEX, function () {
+      var answer = state.session.answers["r".concat(answerBlocks)];
+
+      if (printMode && !alwaysShowCorrect) {
+        var blankSpace = '\\ \\ '.repeat(30) + '\\newline ';
+        return "\\MathQuillMathField[r".concat(answerBlocks++, "]{").concat(blankSpace.repeat(3), "}");
+      }
+
+      if (disabled) {
+        return "\\embed{answerBlock}[r".concat(answerBlocks++, "]");
+      }
+
+      return "\\MathQuillMathField[r".concat(answerBlocks++, "]{").concat(answer && answer.value || '', "}");
+    }).replace(NEWLINE_LATEX, '\\embed{newLine}[]');
+  }
+}
+
+var Main = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Main, _React$Component);
+
+  var _super = _createSuper(Main);
+
+  function Main(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Main);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAnswerBlockDomUpdate", function () {
+      var _this$props = _this.props,
+          model = _this$props.model,
+          classes = _this$props.classes;
+      var _this$state = _this.state,
+          session = _this$state.session,
+          showCorrect = _this$state.showCorrect;
+      var answers = session.answers;
+
+      if (_this.root && model.disabled && !showCorrect) {
+        Object.keys(answers).forEach(function (answerId) {
+          var el = _this.root.querySelector("#".concat(answerId));
+
+          var indexEl = _this.root.querySelector("#".concat(answerId, "Index")); // const correct = model.correctness && model.correctness.correct;
+
+
+          if (el) {
+            var MQ = _mathquill["default"].getInterface(2);
+
+            var answer = answers[answerId];
+            el.textContent = answer && answer.value || '';
+
+            if (!model.view) {// for now, we're not going to be showing individual response correctness
+              // TODO re-attach the classes once we are
+              // el.parentElement.parentElement.classList.add(
+              //   correct ? classes.correct : classes.incorrect
+              // );
+            } else {
+              el.parentElement.parentElement.classList.remove(classes.correct);
+              el.parentElement.parentElement.classList.remove(classes.incorrect);
+            }
+
+            MQ.StaticMath(el); // For now, we're not going to be indexing response blocks
+            // TODO go back to indexing once we support individual response correctness
+            // indexEl.textContent = `R${idx + 1}`;
+
+            indexEl.textContent = 'R';
+          }
+        });
+      }
+
+      (0, _mathRendering.renderMath)(_this.root);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateAriaHidden", function () {
+      if (_this.root) {
+        var selectableElements = _this.root.querySelectorAll('.mq-selectable');
+
+        (selectableElements || []).forEach(function (elem) {
+          return elem.setAttribute('aria-hidden', 'true');
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDone", function () {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSimpleResponseChange", function (response) {
+      _this.setState(function (state) {
+        return {
+          session: _objectSpread(_objectSpread({}, state.session), {}, {
+            response: response
+          })
+        };
+      }, _this.callOnSessionChange);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSubFieldFocus", function (id) {
+      _this.setState({
+        activeAnswerBlock: id
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toNodeData", function (data) {
+      if (!data) {
+        return;
+      }
+
+      var type = data.type,
+          value = data.value;
+
+      if (type === 'command' || type === 'cursor') {
+        return data;
+      } else if (type === 'answer') {
+        return _objectSpread({
+          type: 'answer'
+        }, data);
+      } else if (value === 'clear') {
+        return {
+          type: 'clear'
+        };
+      } else {
+        return {
+          type: 'write',
+          value: value
+        };
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setInput", function (input) {
+      _this.input = input;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (data) {
+      var c = _this.toNodeData(data);
+
+      if (c.type === 'clear') {
+        _this.input.clear();
+      } else if (c.type === 'command') {
+        if (Array.isArray(c.value)) {
+          c.value.forEach(function (vv) {
+            _this.input.cmd(vv);
+          });
+        } else {
+          _this.input.cmd(c.value);
+        }
+      } else if (c.type === 'cursor') {
+        _this.input.keystroke(c.value);
+      } else {
+        _this.input.write(c.value);
+      }
+
+      _this.input.focus();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "callOnSessionChange", function () {
+      var onSessionChange = _this.props.onSessionChange;
+
+      if (onSessionChange) {
+        onSessionChange(_this.state.session);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleShowCorrect", function (show) {
+      _this.setState({
+        showCorrect: show
+      }, _this.handleAnswerBlockDomUpdate);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "subFieldChanged", function (name, subfieldValue) {
+      (0, _mathInput.updateSpans)();
+
+      if (name) {
+        _this.setState(function (state) {
+          return {
+            session: _objectSpread(_objectSpread({}, state.session), {}, {
+              completeAnswer: _this.mqStatic && _this.mqStatic.mathField.latex(),
+              answers: _objectSpread(_objectSpread({}, state.session.answers), {}, (0, _defineProperty2["default"])({}, name, {
+                value: subfieldValue
+              }))
+            })
+          };
+        }, _this.callOnSessionChange);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getFieldName", function (changeField, fields) {
+      var answers = _this.state.session.answers;
+
+      if (Object.keys(answers || {}).length) {
+        var keys = Object.keys(answers);
+        return keys.find(function (k) {
+          var tf = fields[k];
+          return tf && tf.id == changeField.id;
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (e) {
+      var _relatedTarget$offset, _relatedTarget$offset2, _relatedTarget$offset3, _relatedTarget$offset4, _relatedTarget$offset5, _relatedTarget$offset6, _relatedTarget$offset7;
+
+      var _ref3 = e || {},
+          relatedTarget = _ref3.relatedTarget,
+          currentTarget = _ref3.currentTarget;
+
+      if (!relatedTarget || !currentTarget || !IS_SAFARI && !(relatedTarget !== null && relatedTarget !== void 0 && (_relatedTarget$offset = relatedTarget.offsetParent) !== null && _relatedTarget$offset !== void 0 && (_relatedTarget$offset2 = _relatedTarget$offset.children[0]) !== null && _relatedTarget$offset2 !== void 0 && (_relatedTarget$offset3 = _relatedTarget$offset2.attributes) !== null && _relatedTarget$offset3 !== void 0 && _relatedTarget$offset3['data-keypad']) || IS_SAFARI && !(relatedTarget !== null && relatedTarget !== void 0 && (_relatedTarget$offset4 = relatedTarget.offsetParent) !== null && _relatedTarget$offset4 !== void 0 && (_relatedTarget$offset5 = _relatedTarget$offset4.children[0]) !== null && _relatedTarget$offset5 !== void 0 && (_relatedTarget$offset6 = _relatedTarget$offset5.children[0]) !== null && _relatedTarget$offset6 !== void 0 && (_relatedTarget$offset7 = _relatedTarget$offset6.attributes) !== null && _relatedTarget$offset7 !== void 0 && _relatedTarget$offset7['data-keypad'])) {
+        _this.setState({
+          activeAnswerBlock: ''
+        });
+      }
+    });
+    var _answers = {};
+
+    if (props.model.config && props.model.config.expression) {
+      var answerBlocks = 1; // assume one at least
+      // build out local state model using responses declared in expression
+
+      (props.model.config.expression || '').replace(REGEX, function () {
+        _answers["r".concat(answerBlocks)] = {
+          value: props.session && props.session.answers && props.session.answers["r".concat(answerBlocks)] && props.session.answers["r".concat(answerBlocks)].value || ''
+        };
+        answerBlocks += 1;
+      });
+    }
+
+    _this.state = {
+      session: _objectSpread(_objectSpread({}, props.session), {}, {
+        answers: _answers
+      }),
+      activeAnswerBlock: '',
+      showCorrect: _this.props.model.config.alwaysShowCorrect || false
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Main, [{
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
+      var classes = this.props.classes;
+
+      if (typeof window !== 'undefined') {
+        var MQ = _mathquill["default"].getInterface(2);
+
+        if (!registered) {
+          MQ.registerEmbed('answerBlock', function (data) {
+            return {
+              htmlString: "<div class=\"".concat(classes.blockContainer, "\">\n                <div class=\"").concat(classes.blockResponse, "\" id=\"").concat(data, "Index\">R</div>\n                <div class=\"").concat(classes.blockMath, "\">\n                  <span id=\"").concat(data, "\"></span>\n                </div>\n              </div>"),
+              text: function text() {
+                return 'text';
+              },
+              latex: function latex() {
+                return "\\embed{answerBlock}[".concat(data, "]");
+              }
+            };
+          });
+          registered = true;
+        }
+      }
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var _this2 = this;
+
+      var config = this.props.model.config;
+
+      var _ref4 = nextProps.model || {},
+          _ref4$config = _ref4.config,
+          nextConfig = _ref4$config === void 0 ? {} : _ref4$config; // check if the note is the default one for prev language and change to the default one for new language
+      // this check is necessary in order to diferanciate between default and authour defined note
+      // and only change between languages for default ones
+
+
+      if (config.note && config.language && config.language !== nextConfig.language && config.note === translator.t('mathInline.primaryCorrectWithAlternates', {
+        lng: config.language
+      })) {
+        config.note = translator.t('mathInline.primaryCorrectWithAlternates', {
+          lng: nextConfig.language
+        });
+      }
+
+      if (config.env && config.env.mode !== 'evaluate' || nextConfig.env && nextConfig.env.mode !== 'evaluate') {
+        this.setState(_objectSpread(_objectSpread({}, this.state.session), {}, {
+          showCorrect: false
+        }));
+      }
+
+      if (nextConfig.alwaysShowCorrect) {
+        this.setState({
+          showCorrect: true
+        });
+      }
+
+      if (config && config.responses && config.responses.length !== nextConfig.responses.length || !config && nextConfig && nextConfig.responses || config && nextConfig && config.expression !== nextConfig.expression) {
+        var newAnswers = {};
+        var answers = this.state.session.answers;
+        var answerBlocks = 1; // assume one at least
+        // build out local state model using responses declared in expression
+
+        (nextConfig.expression || '').replace(REGEX, function () {
+          newAnswers["r".concat(answerBlocks)] = {
+            value: answers && answers["r".concat(answerBlocks)] && answers["r".concat(answerBlocks)].value || ''
+          };
+          answerBlocks++;
+        });
+        this.setState(function (state) {
+          return {
+            session: _objectSpread(_objectSpread({}, state.session), {}, {
+              completeAnswer: _this2.mqStatic && _this2.mqStatic.mathField.latex(),
+              answers: newAnswers
+            })
+          };
+        }, this.handleAnswerBlockDomUpdate);
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var sameModel = (0, _isEqual["default"])(this.props.model, nextProps.model);
+      var sameState = (0, _isEqual["default"])(this.state, nextState);
+      return !sameModel || !sameState;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this3 = this;
+
+      this.handleAnswerBlockDomUpdate();
+      this.updateAriaHidden();
+      setTimeout(function () {
+        return (0, _mathRendering.renderMath)(_this3.root);
+      }, 100);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.handleAnswerBlockDomUpdate();
+      this.updateAriaHidden();
+    }
+  }, {
+    key: "setTooltipRef",
+    value: function setTooltipRef(ref) {
+      // Safari Hack: https://stackoverflow.com/a/42764495/5757635
+      setTimeout(function () {
+        if (ref && IS_SAFARI) {
+          var div = document.querySelector("[role='tooltip']");
+
+          if (div) {
+            var el = div.firstChild;
+            el.setAttribute('tabindex', '-1');
+          }
+        }
+      }, 1);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this,
+          _cx;
+
+      var _this$props2 = this.props,
+          model = _this$props2.model,
+          classes = _this$props2.classes;
+      var _this$state2 = this.state,
+          activeAnswerBlock = _this$state2.activeAnswerBlock,
+          showCorrect = _this$state2.showCorrect,
+          session = _this$state2.session;
+
+      var _ref5 = model || {},
+          config = _ref5.config,
+          correctness = _ref5.correctness,
+          disabled = _ref5.disabled,
+          view = _ref5.view,
+          teacherInstructions = _ref5.teacherInstructions,
+          rationale = _ref5.rationale,
+          feedback = _ref5.feedback,
+          animationsDisabled = _ref5.animationsDisabled,
+          printMode = _ref5.printMode,
+          alwaysShowCorrect = _ref5.alwaysShowCorrect,
+          language = _ref5.language;
+
+      if (!config) {
+        return null;
+      }
+
+      var _ref6 = config || {},
+          showNote = _ref6.showNote,
+          note = _ref6.note,
+          prompt = _ref6.prompt,
+          responses = _ref6.responses,
+          responseType = _ref6.responseType,
+          equationEditor = _ref6.equationEditor,
+          customKeys = _ref6.customKeys,
+          _ref6$env = _ref6.env;
+
+      _ref6$env = _ref6$env === void 0 ? {} : _ref6$env;
+      var mode = _ref6$env.mode,
+          role = _ref6$env.role;
+      var displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
+      var emptyResponse = (0, _isEmpty["default"])(responses);
+      var showCorrectAnswerToggle = !emptyResponse && correctness && correctness.correctness !== 'correct';
+      var tooltipModeEnabled = disabled && correctness;
+      var additionalKeys = generateAdditionalKeys(customKeys);
+      var correct = correctness && correctness.correct;
+      var staticLatex = prepareForStatic(model, this.state) || '';
+      var viewMode = disabled && !correctness;
+      var studentPrintMode = printMode && !alwaysShowCorrect;
+
+      var printView = /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.printContainer
+      }, /*#__PURE__*/_react["default"].createElement(_mathInput.mq.Static, {
+        className: classes["static"],
+        ref: function ref(mqStatic) {
+          return _this4.mqStatic = mqStatic || _this4.mqStatic;
+        },
+        latex: staticLatex,
+        onSubFieldChange: this.subFieldChanged,
+        getFieldName: this.getFieldName,
+        setInput: this.setInput,
+        onSubFieldFocus: this.onSubFieldFocus,
+        onBlur: this.onBlur
+      }));
+
+      var midContent = /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.main
+      }, mode === 'gather' && /*#__PURE__*/_react["default"].createElement("h2", {
+        className: classes.srOnly
+      }, "Math Equation Response Question"), viewMode && teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && (!animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        className: classes.collapsible,
+        labels: {
+          hidden: 'Show Teacher Instructions',
+          visible: 'Hide Teacher Instructions'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: teacherInstructions
+        }
+      })) : /*#__PURE__*/_react["default"].createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: teacherInstructions
+        }
+      })), prompt && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.content
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: prompt
+      })), studentPrintMode ? printView : /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
+        "false": true
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.inputAndKeypadContainer
+      }, responseType === _utils.ResponseTypes.simple && /*#__PURE__*/_react["default"].createElement(_simpleQuestionBlock["default"], {
+        onSimpleResponseChange: this.onSimpleResponseChange,
+        showCorrect: showCorrect,
+        emptyResponse: emptyResponse,
+        model: model,
+        session: session
+      }), responseType === _utils.ResponseTypes.advanced && /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.expression, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.incorrect, !emptyResponse && !correct && !showCorrect), (0, _defineProperty2["default"])(_cx, classes.correct, !emptyResponse && (correct || showCorrect)), (0, _defineProperty2["default"])(_cx, classes.showCorrectness, !emptyResponse && disabled && correctness && !view), (0, _defineProperty2["default"])(_cx, classes.correctAnswerShown, showCorrect), (0, _defineProperty2["default"])(_cx, classes.printCorrect, printMode && alwaysShowCorrect), _cx))
+      }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+        ref: function ref(_ref7) {
+          return _this4.setTooltipRef(_ref7);
+        },
+        interactive: true,
+        open: !!activeAnswerBlock,
+        classes: {
+          tooltip: classes.keypadTooltip,
+          popper: classes.keypadTooltipPopper
+        },
+        title: Object.keys(session.answers).map(function (answerId) {
+          return answerId === activeAnswerBlock && !(showCorrect || disabled) && /*#__PURE__*/_react["default"].createElement("div", {
+            "data-keypad": true,
+            key: answerId,
+            className: classes.responseContainer,
+            style: {
+              // marginTop: this.mqStatic && this.mqStatic.input.offsetHeight - 20,
+              width: getKeyPadWidth(additionalKeys, equationEditor)
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_mathInput.HorizontalKeypad, {
+            additionalKeys: additionalKeys,
+            mode: equationEditor || DEFAULT_KEYPAD_VARIANT,
+            onClick: _this4.onClick
+          })) || null;
+        })
+      }, /*#__PURE__*/_react["default"].createElement(_mathInput.mq.Static, {
+        className: classes["static"],
+        ref: function ref(mqStatic) {
+          return _this4.mqStatic = mqStatic || _this4.mqStatic;
+        },
+        latex: staticLatex,
+        onSubFieldChange: this.subFieldChanged,
+        getFieldName: this.getFieldName,
+        setInput: this.setInput,
+        onSubFieldFocus: this.onSubFieldFocus,
+        onBlur: this.onBlur
+      }))))), viewMode && displayNote && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.note,
+        dangerouslySetInnerHTML: {
+          __html: "<strong>Note:</strong> ".concat(note)
+        }
+      }), viewMode && rationale && (0, _renderUi.hasText)(rationale) && (!animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        labels: {
+          hidden: 'Show Rationale',
+          visible: 'Hide Rationale'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: rationale
+        }
+      })) : /*#__PURE__*/_react["default"].createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: rationale
+        }
+      })));
+
+      if (tooltipModeEnabled && (showCorrectAnswerToggle || teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) || rationale && (0, _renderUi.hasText)(rationale) || feedback)) {
+        return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+          interactive: true,
+          classes: {
+            tooltip: classes.tooltip,
+            popper: classes.tooltipPopper
+          },
+          title: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.main
+          }, showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle.CorrectAnswerToggle, {
+            language: language,
+            className: classes.toggle,
+            show: true,
+            toggled: showCorrect,
+            onToggle: this.toggleShowCorrect
+          })), teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+            className: classes.collapsible,
+            key: "collapsible-teacher-instructions",
+            labels: {
+              hidden: 'Show Teacher Instructions',
+              visible: 'Hide Teacher Instructions'
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+            prompt: teacherInstructions
+          })), displayNote && (0, _renderUi.hasText)(note) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+            className: classes.collapsible,
+            key: "collapsible-note",
+            labels: {
+              hidden: translator.t('common:showNote', {
+                lng: language
+              }),
+              visible: translator.t('common:hideNote', {
+                lng: language
+              })
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+            prompt: note
+          })), rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+            className: classes.collapsible,
+            key: "collapsible-rationale",
+            labels: {
+              hidden: 'Show Rationale',
+              visible: 'Hide Rationale'
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+            prompt: rationale
+          })), feedback && /*#__PURE__*/_react["default"].createElement(_renderUi.Feedback, {
+            correctness: correctness.correctness,
+            feedback: feedback
+          }))
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.mainContainer,
+          ref: function ref(r) {
+            return _this4.root = r || _this4.root;
+          }
+        }, midContent));
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.mainContainer,
+        ref: function ref(r) {
+          return _this4.root = r || _this4.root;
+        }
+      }, midContent);
+    }
+  }]);
+  return Main;
+}(_react["default"].Component);
+
+exports.Main = Main;
+(0, _defineProperty2["default"])(Main, "propTypes", {
+  classes: _propTypes["default"].object,
+  session: _propTypes["default"].object.isRequired,
+  onSessionChange: _propTypes["default"].func,
+  model: _propTypes["default"].object.isRequired
+});
+
+var styles = function styles(theme) {
+  return {
+    mainContainer: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background(),
+      display: 'inline-block'
+    },
+    tooltip: {
+      background: "".concat(_renderUi.color.primaryLight(), " !important"),
+      color: _renderUi.color.text(),
+      padding: theme.spacing.unit * 2,
+      border: "1px solid ".concat(_renderUi.color.secondary()),
+      fontSize: '16px',
+      '& :not(.MathJax) > table tr': {
+        '&:nth-child(2n)': {
+          backgroundColor: 'unset !important'
+        }
+      }
+    },
+    tooltipPopper: {
+      opacity: 1
+    },
+    keypadTooltip: {
+      fontSize: 'initial',
+      background: 'transparent',
+      width: '600px',
+      marginTop: 0,
+      paddingTop: 0
+    },
+    keypadTooltipPopper: {
+      background: 'transparent',
+      width: '650px',
+      opacity: 1
+    },
+    main: {
+      width: '100%',
+      position: 'relative',
+      backgroundColor: _renderUi.color.background(),
+      color: _renderUi.color.text()
+    },
+    title: {
+      fontSize: '1.1rem',
+      display: 'block',
+      marginTop: theme.spacing.unit * 2,
+      marginBottom: theme.spacing.unit
+    },
+    note: {
+      paddingBottom: theme.spacing.unit * 2
+    },
+    collapsible: {
+      marginBottom: theme.spacing.unit * 2
+    },
+    responseContainer: {
+      zIndex: 10,
+      // position: 'absolute',
+      // right: 0,
+      minWidth: '400px',
+      marginTop: theme.spacing.unit * 2
+    },
+    expression: {
+      maxWidth: 'fit-content',
+      '& > .mq-math-mode': {
+        '& > .mq-root-block': {
+          '& > .mq-editable-field': {
+            minWidth: '10px',
+            margin: theme.spacing.unit * 2 / 3,
+            padding: theme.spacing.unit / 4
+          }
+        },
+        '& sup': {
+          top: 0
+        }
+      }
+    },
+    "static": {
+      '& > .mq-root-block': {
+        '& > .mq-editable-field': {
+          borderColor: _renderUi.color.text()
+        }
+      }
+    },
+    inputAndKeypadContainer: {
+      marginTop: theme.spacing.unit * 2,
+      marginBottom: theme.spacing.unit * 2,
+      position: 'relative',
+      '& .mq-overarrow-inner': {
+        border: 'none !important',
+        padding: '0 !important'
+      },
+      '& .mq-overarrow-inner-right': {
+        display: 'none !important'
+      },
+      '& .mq-overarrow-inner-left': {
+        display: 'none !important'
+      },
+      '& .mq-overarrow.mq-arrow-both': {
+        minWidth: '1.23em',
+        '& *': {
+          lineHeight: '1 !important'
+        },
+        '&:before': {
+          top: '-0.4em',
+          left: '-1px'
+        },
+        '&:after': {
+          top: '-2.4em',
+          right: '-1px'
+        },
+        '&.mq-empty:after': {
+          top: '-0.45em'
+        }
+      },
+      '& .mq-overarrow.mq-arrow-right': {
+        '&:before': {
+          top: '-0.4em',
+          right: '-1px'
+        }
+      },
+      '& .mq-longdiv-inner': {
+        borderTop: '1px solid !important',
+        paddingTop: '1.5px !important'
+      },
+      '& .mq-parallelogram': {
+        lineHeight: 0.85
+      }
+    },
+    showCorrectness: {
+      border: '2px solid'
+    },
+    correctAnswerShown: {
+      padding: theme.spacing.unit,
+      letterSpacing: '0.5px'
+    },
+    printCorrect: {
+      border: "2px solid ".concat(_renderUi.color.correct(), " !important")
+    },
+    correct: {
+      borderColor: "".concat(_renderUi.color.correct(), " !important")
+    },
+    incorrect: {
+      borderColor: "".concat(_renderUi.color.incorrect(), " !important")
+    },
+    blockContainer: {
+      margin: "".concat(theme.spacing.unit, "px !important"),
+      display: 'inline-flex',
+      border: '2px solid grey !important'
+    },
+    blockResponse: {
+      flex: 2,
+      color: 'grey',
+      background: theme.palette.grey['A100'],
+      fontSize: '0.8rem !important',
+      padding: "".concat(theme.spacing.unit / 2, "px !important"),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRight: "2px solid ".concat(_renderUi.color.disabled(), " !important")
+    },
+    toggle: {
+      color: _renderUi.color.text(),
+      marginBottom: theme.spacing.unit * 2
+    },
+    blockMath: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background(),
+      padding: "".concat(theme.spacing.unit / 2, "px !important"),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: 8,
+      '& > .mq-math-mode': {
+        '& > .mq-hasCursor': {
+          '& > .mq-cursor': {
+            display: 'none'
+          }
+        }
+      }
+    },
+    printContainer: {
+      marginBottom: theme.spacing.unit,
+      pointerEvents: 'none'
+    },
+    srOnly: {
+      position: 'absolute',
+      left: '-10000px',
+      top: 'auto',
+      width: '1px',
+      height: '1px',
+      overflow: 'hidden'
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(Main);
+
+exports["default"] = _default;
+//# sourceMappingURL=main.js.map