@instructure/quiz-core 17.19.2 → 17.19.3-rc.0

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Footer/presenter.js

@@ -0,0 +1,299 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.QuizEntryEditFooter = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiFlex = require("@instructure/ui-flex");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiText = require("@instructure/ui-text");
+
+var _quizNumberInput = _interopRequireDefault(require("@instructure/quiz-number-input"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _quizInteractions = require("@instructure/quiz-interactions");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _index = _interopRequireDefault(require("../../../../../../common/components/resources/entry/EntrySave/index.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'kXHyM',
+  template: function template(theme) {
+    return "\n\n.kXHyM_bVuu{align-items:center;display:inline-flex;flex-wrap:nowrap}\n\n.kXHyM_fsXS,.kXHyM_djwg{align-items:center;display:flex}\n\n.kXHyM_fsXS{margin-left:".concat(theme.feedbackSectionLeftMargin || 'inherit', "}\n\n.kXHyM_duRV{display:inline-flex;font-size:").concat(theme.pointsInputFontSize || 'inherit', ";width:6.1rem}");
+  },
+  'leftFooter': 'kXHyM_bVuu',
+  'feedbackSection': 'kXHyM_fsXS',
+  'pointsSection': 'kXHyM_djwg',
+  'pointsInput': 'kXHyM_duRV'
+};
+
+function pointsAsFloat(pointsString) {
+  return parseFloat(pointsString) || 0;
+}
+
+function countDecimals(normalizedPointsString) {
+  if (!normalizedPointsString) return 0; // eslint-disable-next-line no-unused-vars
+
+  var _normalizedPointsStri = normalizedPointsString.split('.'),
+      _normalizedPointsStri2 = (0, _slicedToArray2.default)(_normalizedPointsStri, 2),
+      _ = _normalizedPointsStri2[0],
+      decimals = _normalizedPointsStri2[1];
+
+  return decimals ? decimals.length : 0;
+}
+
+var QuizEntryEditFooter = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(QuizEntryEditFooter, _Component);
+
+  var _super = (0, _createSuper2.default)(QuizEntryEditFooter);
+
+  function QuizEntryEditFooter() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, QuizEntryEditFooter);
+    _this = _super.apply(this, arguments);
+    _this.addFeedbackButton = null;
+
+    _this.openFeedbackModal = function () {
+      var workingEntry = _this.props.workingEntry;
+
+      _this.props.setUi(_quizCommon.ITEM_FEEDBACK_MODAL_ITEM, workingEntry);
+
+      _this.props.setUi(_quizCommon.ITEM_FEEDBACK_MODAL_FEEDBACK, workingEntry.feedback);
+
+      _this.props.openModal(_quizCommon.ITEM_FEEDBACK_MODAL, {
+        modalTrigger: _this.addFeedbackButton
+      });
+    };
+
+    _this.handlePointsBlur = function () {
+      if (!_this.state.normalizedPoints) {
+        _this.setState({
+          points: '0'
+        });
+      }
+    };
+
+    _this.handlePointsChange = function (event, points, normalizedPoints) {
+      // do not allow more than 3 decimals
+      if (countDecimals(normalizedPoints) <= 3) {
+        var pointsFloat = pointsAsFloat(normalizedPoints);
+
+        if (pointsFloat !== _this.getPoints()) {
+          var _this$props = _this.props,
+              workingQuizEntry = _this$props.workingQuizEntry,
+              workingEntry = _this$props.workingEntry;
+          var qerIndexToUpdate = workingQuizEntry.quizEntryRegrades.findIndex(function (qer) {
+            return qer.get('itemId') == workingEntry.id;
+          });
+          var newQuizEntryRegrades = qerIndexToUpdate > -1 ? workingQuizEntry.quizEntryRegrades.setIn([qerIndexToUpdate, 'pointsPossible'], null) : workingQuizEntry.quizEntryRegrades;
+
+          _this.props.changeQuizEntryPoints(workingQuizEntry.id, pointsFloat, newQuizEntryRegrades.toJS());
+        }
+
+        _this.setState({
+          points: points,
+          normalizedPoints: normalizedPoints
+        });
+      }
+    };
+
+    _this.handleButtonRef = function (node) {
+      _this.addFeedbackButton = node;
+    };
+
+    var _points = _this.getPoints();
+
+    _this.state = {
+      points: _points,
+      normalizedPoints: _points
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(QuizEntryEditFooter, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var points = this.getPoints(nextProps);
+      this.setState({
+        points: points,
+        normalizedPoints: points
+      });
+    }
+  }, {
+    key: "getPoints",
+    value: function getPoints() {
+      var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.props;
+      var workingQuizEntry = props.workingQuizEntry,
+          workingEntry = props.workingEntry;
+      return workingQuizEntry.regradeAdjustedPointsPossible(workingEntry.id) || workingQuizEntry.pointsPossible || 0;
+    }
+  }, {
+    key: "pointsDisabled",
+    value: function pointsDisabled() {
+      var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.props;
+      var workingEntry = props.workingEntry;
+      var pointsFromItem = (0, _quizInteractions.interactionPoints)(workingEntry.toJS()) !== void 0;
+      return pointsFromItem;
+    }
+  }, {
+    key: "renderFeedbackSection",
+    value: function renderFeedbackSection() {
+      var _this$props2 = this.props,
+          entry = _this$props2.entry,
+          shouldClone = _this$props2.shouldClone,
+          quizEntry = _this$props2.quizEntry,
+          workingEntry = _this$props2.workingEntry;
+      var disabled = entry.isImmutable() && !shouldClone || quizEntry.isBankEntry;
+      var icon, text;
+
+      if (workingEntry.hasFeedback()) {
+        icon = _uiIcons.IconDiscussionSolid;
+        text = (0, _formatMessage.default)('Edit Item Level Feedback (present)');
+      } else {
+        icon = _uiIcons.IconDiscussionLine;
+        text = (0, _formatMessage.default)('Edit Item Level Feedback');
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.feedbackSection,
+        "data-automation": "sdk-quiz-entry-edit-footer-feedback-section"
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        variant: "icon",
+        onClick: this.openFeedbackModal,
+        disabled: disabled,
+        ref: this.handleButtonRef,
+        "data-automation": "sdk-open-feedback-modal-button",
+        icon: icon
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, text)));
+    }
+  }, {
+    key: "renderPointsSection",
+    value: function renderPointsSection() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.pointsSection
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.pointsInput
+      }, /*#__PURE__*/_react.default.createElement(_quizNumberInput.default, {
+        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Points Possible Input')),
+        onChange: this.handlePointsChange,
+        onBlur: this.handlePointsBlur,
+        value: this.state.points,
+        disabled: this.pointsDisabled(),
+        "data-automation": "sdk-points-possible-numberinput"
+      })), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        margin: "none none none x-small"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, (0, _formatMessage.default)('Points'))));
+    }
+  }, {
+    key: "renderLeftFooter",
+    value: function renderLeftFooter() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.leftFooter
+      }, this.renderPointsSection(), this.renderFeedbackSection());
+    }
+  }, {
+    key: "renderRightFooter",
+    value: function renderRightFooter() {
+      if (this.props.alternativeRightFooter) {
+        return this.props.alternativeRightFooter();
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        clearChanges: this.props.clearChanges,
+        disableSubmit: this.props.disableSubmit,
+        displayPosition: this.props.displayPosition,
+        entry: this.props.entry,
+        guid: this.props.guid,
+        isValid: this.props.isValid,
+        submitHandler: this.props.successfulSubmit,
+        initialFocusId: this.props.initialFocusId
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div",
+        background: "light",
+        padding: "xx-small none"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        wrapItems: true,
+        justifyItems: "space-between",
+        alignItems: "center"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        padding: "xx-small small"
+      }, this.renderLeftFooter()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        padding: "xx-small small"
+      }, this.renderRightFooter())));
+    }
+  }]);
+  QuizEntryEditFooter.displayName = "QuizEntryEditFooter";
+  return QuizEntryEditFooter;
+}(_react.Component), _class2.propTypes = {
+  alternativeRightFooter: _propTypes.default.func,
+  changeQuizEntryPoints: _propTypes.default.func.isRequired,
+  clearChanges: _propTypes.default.func.isRequired,
+  disableSubmit: _propTypes.default.bool,
+  displayPosition: _propTypes.default.number.isRequired,
+  entry: _reactImmutableProptypes.default.record.isRequired,
+  guid: _propTypes.default.string.isRequired,
+  initialFocusId: _propTypes.default.string,
+  isValid: _propTypes.default.bool.isRequired,
+  openModal: _propTypes.default.func.isRequired,
+  quizEntry: _reactImmutableProptypes.default.record.isRequired,
+  setUi: _propTypes.default.func.isRequired,
+  shouldClone: _propTypes.default.bool,
+  successfulSubmit: _propTypes.default.func.isRequired,
+  workingEntry: _reactImmutableProptypes.default.record.isRequired,
+  // This prop is flagged as unused, but it is actually used
+  // eslint-disable-next-line react/no-unused-prop-types
+  workingQuizEntry: _reactImmutableProptypes.default.record.isRequired
+}, _class2.defaultProps = {
+  alternativeRightFooter: null,
+  disableSubmit: false,
+  initialFocusId: null,
+  shouldClone: false
+}, _temp)) || _class);
+exports.QuizEntryEditFooter = QuizEntryEditFooter;
+var _default = QuizEntryEditFooter;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Footer/theme.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      typography = _ref.typography,
+      borders = _ref.borders;
+  return {
+    feedbackSectionLeftMargin: spacing.xSmall,
+    pointsInputFontSize: typography.fontSizeMedium
+  };
+}

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Header/index.js

@@ -0,0 +1,366 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _partial = _interopRequireDefault(require("lodash/partial"));
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiTextInput = require("@instructure/ui-text-input");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _PositionBox = _interopRequireDefault(require("../../../../../../common/components/resources/positionBox/PositionBox.js"));
+
+var _Item = _interopRequireDefault(require("../../../../../../common/records/Item.js"));
+
+var _index = _interopRequireDefault(require("../../../ActionButtons/index.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'cYnzk',
+  template: function template(theme) {
+    return "\n\n.cYnzk_fsuY{align-items:center;background-color:".concat(theme.headerBackgroundColor || 'inherit', ";color:").concat(theme.headerColor || 'inherit', ";display:flex;justify-content:space-between;padding:").concat(theme.headerPadding || 'inherit', ";vertical-align:middle}\n\n.cYnzk_cKlw{align-items:center;display:inline-flex;flex:8 0 0;flex-wrap:nowrap;width:100%}\n\n.cYnzk_ecuB{font-size:").concat(theme.interactionTypeFontSize || 'inherit', ";margin-left:").concat(theme.interactionTypeLeftMargin || 'inherit', ";margin-right:").concat(theme.interactionTypeRightMargin || 'inherit', "}\n\n.cYnzk_epFc{border-left:").concat(theme.dividingLineLeftBorder || 'inherit', ";width:0}\n\n.cYnzk_dFsQ{display:flex;flex:1 1 auto}\n\n.cYnzk_eGPC{flex:1 1 auto;font-size:").concat(theme.titleInputFontSize || 'inherit', ";text-overflow:ellipsis;white-space:nowrap}");
+  },
+  'header': 'cYnzk_fsuY',
+  'leftHeader': 'cYnzk_cKlw',
+  'interactionType': 'cYnzk_ecuB',
+  'dividingLine': 'cYnzk_epFc',
+  'titleHolder': 'cYnzk_dFsQ',
+  'titleInput': 'cYnzk_eGPC'
+};
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, null);
+
+var QuizEntryHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(QuizEntryHeader, _Component);
+
+  var _super = (0, _createSuper2.default)(QuizEntryHeader);
+
+  function QuizEntryHeader() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, QuizEntryHeader);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.connectDragSource = function (dragHandle) {
+      if (_this.shouldDisableDragHandle()) {
+        return dragHandle;
+      }
+
+      return _this.props.connectDragSource(dragHandle);
+    };
+
+    _this.clearModifications = function () {
+      _this.props.clearModifications('items', _this.props.entry.id);
+    };
+
+    _this.removeTemporaryItem = function () {
+      var remove = function remove() {
+        _this.props.hideError(_this.props.guid);
+
+        _this.clearModifications();
+
+        _this.props.clearTemporaryItem(_this.props.quizId);
+
+        _this.props.setUi(_quizCommon.DELETED_QUIZ_ENTRY, {
+          position: Math.ceil(_this.props.quizEntry.position),
+          inStimulus: _this.props.quizEntry.hasStimulus
+        });
+      };
+
+      _this.props.withConfirm(remove, _this.removalDialogData());
+    };
+
+    _this.removeNormalItem = function () {
+      _this.props.withConfirm((0, _partial.default)(_this.props.removeQuizEntry, _this.props.quizId, _this.props.quizEntry), _this.removalDialogData());
+    };
+
+    _this.removeItem = function (e) {
+      if (_this.props.disabledForRegrade) {
+        return null;
+      }
+
+      _this.props.entry.isTemporary() ? _this.removeTemporaryItem() : _this.removeNormalItem();
+    };
+
+    _this.handleTitleChange = function (event) {
+      _this.props.changeItemTitle(_this.props.entry.id, event.target.value);
+    };
+
+    _this.storeTitleRef = function (el) {
+      _this.titleRef = el;
+    };
+
+    _this.copyItem = /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+        var _this$props, quizId, workingQuizEntry, workingEntry, msg, validationResult, interactionTypeData;
+
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _this$props = _this.props, quizId = _this$props.quizId, workingQuizEntry = _this$props.workingQuizEntry, workingEntry = _this$props.workingEntry;
+                msg = (0, _formatMessage.default)('Item {displayPosition} cannot be saved due to invalid input data.', {
+                  displayPosition: _this.props.displayPosition
+                });
+
+                if (!_this.props.isValid) {
+                  _context.next = 13;
+                  break;
+                }
+
+                _context.next = 5;
+                return _this.props.successfulSubmit();
+
+              case 5:
+                validationResult = _context.sent;
+
+                if (!(validationResult === _quizCommon.API_INPUT_VALIDATION_ERROR)) {
+                  _context.next = 9;
+                  break;
+                }
+
+                _this.props.screenreaderNotification(msg);
+
+                return _context.abrupt("return");
+
+              case 9:
+                interactionTypeData = {
+                  answerFeedback: workingEntry.answerFeedback,
+                  calculatorType: workingEntry.calculatorType,
+                  feedback: workingEntry.feedback,
+                  id: workingEntry.interactionType,
+                  interactionData: workingEntry.interactionData,
+                  itemBody: workingEntry.itemBody,
+                  outcomeAlignmentSetGuid: workingEntry.outcomeAlignmentSetGuid,
+                  properties: workingEntry.properties,
+                  scoringAlgorithm: workingEntry.scoringAlgorithm,
+                  scoringData: workingEntry.scoringData,
+                  title: workingEntry.title
+                };
+
+                _this.props.createTempItem(quizId, Math.round(workingQuizEntry.position + 1), interactionTypeData, workingQuizEntry.stimulusQuizEntryId, workingEntry.stimulusId, workingQuizEntry.pointsPossible);
+
+                _context.next = 15;
+                break;
+
+              case 13:
+                _this.props.screenreaderNotification(msg);
+
+                _this.props.showError(_this.props.guid);
+
+              case 15:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(QuizEntryHeader, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      // timeout is to ensure the screenreader reads the title label when focused
+      setTimeout(function () {
+        !_this2.props.initialFocusId && _this2.titleRef && _this2.titleRef.focus();
+      }, 200); // without the 200, the black VO focus-box, and the actual focus
+      // end up in different places after saving, and re-editing
+    }
+  }, {
+    key: "removalDialogData",
+    value: function removalDialogData() {
+      return {
+        title: (0, _formatMessage.default)('Remove Item?'),
+        text: (0, _formatMessage.default)('Are you sure you want to remove this item?'),
+        continueText: (0, _formatMessage.default)('Remove Item'),
+        cancelText: (0, _formatMessage.default)('Keep Item')
+      };
+    }
+  }, {
+    key: "getVOText",
+    value: function getVOText(verb, displayPosition) {
+      var name = '';
+
+      if (this.props.entry instanceof _Item.default) {
+        name = this.props.entry.getInteractionType().name;
+      }
+
+      return (0, _formatMessage.default)('{verb} Question {questionNumber}, {interactionType}', {
+        verb: verb,
+        questionNumber: displayPosition,
+        interactionType: name
+      });
+    }
+  }, {
+    key: "renderBankedContent",
+    value: function renderBankedContent() {
+      if (this.props.quizEntry.entryType === 'Bank' || this.props.quizEntry.entryType === 'BankEntry') {
+        return _ref2;
+      }
+    }
+  }, {
+    key: "renderTitleHolder",
+    value: function renderTitleHolder() {
+      if (!(this.props.entry instanceof _Item.default)) return;
+      var _this$props2 = this.props,
+          entry = _this$props2.entry,
+          shouldClone = _this$props2.shouldClone,
+          quizEntry = _this$props2.quizEntry,
+          disabledForRegrade = _this$props2.disabledForRegrade,
+          displayPosition = _this$props2.displayPosition,
+          workingEntry = _this$props2.workingEntry;
+      var disabled = disabledForRegrade || entry.isImmutable() && !shouldClone || quizEntry.isBankEntry;
+      var titleLabelText = (0, _formatMessage.default)('Question {questionNumber}, {interactionType}, Edit question title', {
+        questionNumber: displayPosition,
+        interactionType: entry.getInteractionType().name
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.titleHolder
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.titleInput
+      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+        ref: this.storeTitleRef,
+        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, titleLabelText),
+        type: "text",
+        placeholder: (0, _formatMessage.default)('Question Title'),
+        onChange: this.handleTitleChange,
+        value: workingEntry.title || '',
+        interaction: disabled ? 'disabled' : 'enabled',
+        "data-automation": "sdk-question-title-textinput"
+      })));
+    }
+  }, {
+    key: "renderLeftHeader",
+    value: function renderLeftHeader() {
+      var positionText = (0, _formatMessage.default)('Edit item at position {position, number}', {
+        position: this.props.displayPosition
+      });
+      var position = this.props.disabledForRegrade ? this.props.displayPosition : this.props.quizEntry.positionToDisplay(this.props.displayPosition);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.leftHeader
+      }, /*#__PURE__*/_react.default.createElement(_PositionBox.default, {
+        position: position,
+        headingText: positionText,
+        "data-automation": "sdk-quiz-entry-positionbox"
+      }), this.renderBankedContent(), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.interactionType,
+        "data-automation": "sdk-quiz-entry-interaction-type"
+      }, this.props.name), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.dividingLine
+      }), this.renderTitleHolder());
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var actionButtonProps = {
+        connectDragSource: this.connectDragSource,
+        deleteText: this.getVOText('Remove', this.props.displayPosition),
+        displayPosition: this.props.displayPosition,
+        onCopy: this.props.quizEntry.entryType === 'Bank' ? null : this.copyItem,
+        onDelete: this.removeItem,
+        quizEntries: this.props.quizEntries,
+        quizEntry: this.props.quizEntry,
+        shouldDisableDragHandle: true,
+        shouldDisableCopy: this.props.disableSubmit || this.props.disabledForRegrade,
+        shouldDisableDeleteButton: this.props.disabledForRegrade,
+        shouldRenderEdit: false
+      };
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.header
+      }, this.renderLeftHeader(), /*#__PURE__*/_react.default.createElement(_index.default, actionButtonProps));
+    }
+  }]);
+  QuizEntryHeader.displayName = "QuizEntryHeader";
+  return QuizEntryHeader;
+}(_react.Component), _class2.propTypes = {
+  changeItemTitle: _propTypes.default.func.isRequired,
+  // from connected component
+  clearModifications: _propTypes.default.func.isRequired,
+  // from connected component
+  clearTemporaryItem: _propTypes.default.func.isRequired,
+  // from connected component
+  connectDragSource: _propTypes.default.func.isRequired,
+  // inserted from React DnD
+  createTempItem: _propTypes.default.func.isRequired,
+  // from connected component
+  disabledForRegrade: _propTypes.default.bool,
+  disableSubmit: _propTypes.default.bool.isRequired,
+  displayPosition: _propTypes.default.number.isRequired,
+  entry: _reactImmutableProptypes.default.record.isRequired,
+  guid: _propTypes.default.string.isRequired,
+  hideError: _propTypes.default.func.isRequired,
+  // from connected component
+  initialFocusId: _propTypes.default.string,
+  isValid: _propTypes.default.bool.isRequired,
+  name: _propTypes.default.string,
+  quizEntries: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record).isRequired,
+  quizEntry: _reactImmutableProptypes.default.record.isRequired,
+  quizId: _propTypes.default.string.isRequired,
+  removeQuizEntry: _propTypes.default.func.isRequired,
+  // from connected component
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  setUi: _propTypes.default.func.isRequired,
+  shouldClone: _propTypes.default.bool,
+  showError: _propTypes.default.func.isRequired,
+  successfulSubmit: _propTypes.default.func.isRequired,
+  withConfirm: _propTypes.default.func.isRequired,
+  workingEntry: _reactImmutableProptypes.default.record.isRequired,
+  workingQuizEntry: _reactImmutableProptypes.default.record.isRequired
+}, _class2.defaultProps = {
+  disabledForRegrade: false,
+  initialFocusId: null,
+  name: null,
+  shouldClone: false
+}, _temp)) || _class);
+var _default = QuizEntryHeader;
+exports.default = _default;