@pie-element/match 10.3.4-next.0 → 11.0.0-beta.0

package/configure/lib/answer-config-block.js

@@ -1,361 +1,288 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-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"));
-
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _utils = require("./utils");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _styles = require("@mui/material/styles");
 var _addRow = _interopRequireDefault(require("./add-row"));
-
 var _row = _interopRequireDefault(require("./row"));
-
 var _debug = _interopRequireDefault(require("debug"));
-
 var _lodash = _interopRequireDefault(require("lodash"));
-
 var _editableHtml = _interopRequireWildcard(require("@pie-lib/editable-html"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 log = (0, _debug["default"])('pie-elements:match:configure');
-
-var styles = function styles(theme) {
-  return {
-    container: {
-      marginBottom: theme.spacing.unit * 2.5,
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    rowContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      flex: 1,
-      width: '100%',
-      borderBottom: "2px solid ".concat(theme.palette.grey['A100']),
-      paddingBottom: theme.spacing.unit * 2,
-      marginTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit
-    },
-    rowItem: {
-      flex: 1,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      flexDirection: 'column',
-      '&> div': {
-        width: '120px',
-        padding: "0 ".concat(theme.spacing.unit, "px"),
-        textAlign: 'center'
-      }
-    },
-    deleteIcon: {
-      flex: 0.5,
-      minWidth: '45px',
-      padding: "0 ".concat(theme.spacing.unit, "px")
-    },
-    questionText: {
-      flex: 2,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      marginRight: theme.spacing.unit,
-      '&> div': {
-        width: '100%',
-        padding: 0,
-        maxWidth: 'unset',
-        textAlign: 'left',
-        minWidth: '200px'
+var _drag = require("@pie-lib/drag");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const log = (0, _debug.default)('pie-elements:match:configure');
+const Container = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2.5),
+  display: 'flex',
+  flexDirection: 'column'
+}));
+const RowContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  flex: 1,
+  width: '100%',
+  borderBottom: `2px solid ${theme.palette.grey['A100']}`,
+  paddingBottom: theme.spacing(2),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(1)
+}));
+const RowItem = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  flex: 1,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  '&> div': {
+    width: '120px',
+    padding: `0 ${theme.spacing(1)}`,
+    textAlign: 'center'
+  }
+}));
+const DeleteIcon = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  flex: 0.5,
+  minWidth: '45px',
+  padding: `0 ${theme.spacing(1)}`
+}));
+const RowTable = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexDirection: 'column'
+});
+const ColumnErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: `${theme.spacing(1)} !important`,
+  width: 'fit-content !important'
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingBottom: theme.spacing(1)
+}));
+
+// Global styles for EditableHtml components
+const GlobalStyles = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  '& .marginBottom': {
+    marginBottom: theme.typography.fontSize - 2 + theme.spacing(1)
+  },
+  '& .headerInput': {
+    '& > div': {
+      fontWeight: 'bold'
+    }
+  }
+}));
+class AnswerConfigBlock extends React.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "moveRow", event => {
+      const {
+        active,
+        over
+      } = event;
+      if (!over || !active) return;
+      const activeData = active.data.current;
+      const overData = over.data.current;
+      if (activeData?.type === 'row' && overData?.type === 'row') {
+        const from = activeData.index;
+        const to = overData.index;
+        const {
+          model,
+          onChange
+        } = this.props;
+        const newModel = {
+          ...model
+        };
+        const rows = newModel.rows || [];
+        log('[moveRow]: ', from, to);
+        const {
+          movedRow,
+          remainingRows
+        } = rows.reduce((acc, item, index) => {
+          if (index === from) {
+            acc.movedRow = item;
+          } else {
+            acc.remainingRows.push(item);
+          }
+          return acc;
+        }, {
+          movedRow: null,
+          remainingRows: []
+        });
+        const update = [...remainingRows.slice(0, to), movedRow, ...remainingRows.slice(to)];
+        log('update: ', update);
+        newModel.rows = update;
+        onChange(newModel);
       }
-    },
-    rowTable: {
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    headerInput: {
-      '&> div': {
-        fontWeight: 'bold'
+    });
+    (0, _defineProperty2.default)(this, "onChange", (name, isBoolean) => ({
+      target
+    }) => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      let value;
+      if (isBoolean) {
+        value = target.checked;
+      } else {
+        value = target.value;
       }
-    },
-    marginBottom: {
-      marginBottom: theme.typography.fontSize - 2 + theme.spacing.unit
-    },
-    columnErrorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: "".concat(theme.spacing.unit, "px !important"),
-      width: 'fit-content !important'
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingBottom: theme.spacing.unit
-    }
-  };
-};
-
-var AnswerConfigBlock = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(AnswerConfigBlock, _React$Component);
-
-  var _super = _createSuper(AnswerConfigBlock);
-
-  function AnswerConfigBlock() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, AnswerConfigBlock);
-
-    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));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveRow", function (from, to) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onChange = _this$props.onChange;
-
-      var newModel = _objectSpread({}, model);
-
-      var rows = newModel.rows || [];
-      log('[moveRow]: ', from, to);
-
-      var _rows$reduce = rows.reduce(function (acc, item, index) {
-        if (index === from) {
-          acc.movedRow = item;
-        } else {
-          acc.remainingRows.push(item);
-        }
-
-        return acc;
-      }, {
-        movedRow: null,
-        remainingRows: []
-      }),
-          movedRow = _rows$reduce.movedRow,
-          remainingRows = _rows$reduce.remainingRows;
-
-      var update = [].concat((0, _toConsumableArray2["default"])(remainingRows.slice(0, to)), [movedRow], (0, _toConsumableArray2["default"])(remainingRows.slice(to)));
-      log('update: ', update);
-      newModel.rows = update;
-      onChange(newModel);
+      _lodash.default.set(model, name, value);
+      onChange(model, name);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (name, isBoolean) {
-      return function (_ref) {
-        var target = _ref.target;
-        var _this$props2 = _this.props,
-            model = _this$props2.model,
-            onChange = _this$props2.onChange;
-        var value;
-
-        if (isBoolean) {
-          value = target.checked;
-        } else {
-          value = target.value;
-        }
-
-        _lodash["default"].set(model, name, value);
-
-        onChange(model, name);
+    (0, _defineProperty2.default)(this, "onHeaderChange", headerIndex => value => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const newModel = {
+        ...model
       };
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onHeaderChange", function (headerIndex) {
-      return function (value) {
-        var _this$props3 = _this.props,
-            model = _this$props3.model,
-            onChange = _this$props3.onChange;
-
-        var newModel = _objectSpread({}, model);
-
-        if (headerIndex === 0) {
-          newModel.headers[headerIndex] = value;
-          onChange(newModel);
-          return;
-        }
-
+      if (headerIndex === 0) {
         newModel.headers[headerIndex] = value;
         onChange(newModel);
-      };
+        return;
+      }
+      newModel.headers[headerIndex] = value;
+      onChange(newModel);
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(AnswerConfigBlock, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props4 = this.props,
-          classes = _this$props4.classes,
-          model = _this$props4.model,
-          onAddRow = _this$props4.onAddRow,
-          imageSupport = _this$props4.imageSupport,
-          configuration = _this$props4.configuration,
-          toolbarOpts = _this$props4.toolbarOpts,
-          spellCheck = _this$props4.spellCheck,
-          uploadSoundSupport = _this$props4.uploadSoundSupport;
-
-      var _ref2 = configuration || {},
-          _ref2$baseInputConfig = _ref2.baseInputConfiguration,
-          baseInputConfiguration = _ref2$baseInputConfig === void 0 ? {} : _ref2$baseInputConfig,
-          _ref2$headers = _ref2.headers,
-          headers = _ref2$headers === void 0 ? {} : _ref2$headers,
-          _ref2$rows = _ref2.rows,
-          rows = _ref2$rows === void 0 ? {} : _ref2$rows,
-          _ref2$maxImageWidth = _ref2.maxImageWidth,
-          maxImageWidth = _ref2$maxImageWidth === void 0 ? {} : _ref2$maxImageWidth,
-          _ref2$maxImageHeight = _ref2.maxImageHeight,
-          maxImageHeight = _ref2$maxImageHeight === void 0 ? {} : _ref2$maxImageHeight,
-          _ref2$mathMlOptions = _ref2.mathMlOptions,
-          mathMlOptions = _ref2$mathMlOptions === void 0 ? {} : _ref2$mathMlOptions,
-          minQuestions = _ref2.minQuestions;
-
-      var _ref3 = model || {},
-          errors = _ref3.errors;
-
-      var _ref4 = errors || {},
-          correctResponseError = _ref4.correctResponseError,
-          rowsErrors = _ref4.rowsErrors,
-          columnsErrors = _ref4.columnsErrors,
-          noOfRowsError = _ref4.noOfRowsError,
-          columnsLengthError = _ref4.columnsLengthError;
-
-      var filteredDefaultPlugins = (_editableHtml.DEFAULT_PLUGINS || []).filter(function (p) {
-        return p !== 'table' && p !== 'bulleted-list' && p !== 'numbered-list';
-      });
-      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes.container
-      }, /*#__PURE__*/React.createElement(_Typography["default"], {
-        type: "body1",
-        component: "div"
-      }, "Click on the labels to edit or remove. Set the correct answers by clicking each correct answer per row."), /*#__PURE__*/React.createElement("div", {
-        className: classes.rowTable,
-        style: configuration.width ? {
-          width: configuration.width,
-          overflow: 'scroll'
-        } : {}
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classes.rowContainer
-      }, headers.settings && (model.headers || []).map(function (header, idx) {
-        return /*#__PURE__*/React.createElement("div", {
-          key: idx,
-          className: (0, _classnames["default"])(classes.rowItem, (0, _defineProperty2["default"])({}, classes.questionText, idx === 0))
-        }, /*#__PURE__*/React.createElement(_editableHtml["default"], {
-          onChange: _this2.onHeaderChange(idx),
-          markup: header,
-          className: columnsErrors && !columnsErrors[idx] ? classes.marginBottom : classes.headerInput,
-          label: 'column label',
-          activePlugins: filteredDefaultPlugins,
-          pluginProps: (0, _utils.getPluginProps)(headers === null || headers === void 0 ? void 0 : headers.inputConfiguration, baseInputConfiguration),
-          autoWidthToolbar: true,
-          spellCheck: spellCheck,
-          uploadSoundSupport: uploadSoundSupport,
-          languageCharactersProps: [{
-            language: 'spanish'
-          }, {
-            language: 'special'
-          }],
-          error: columnsErrors && columnsErrors[idx]
-        }), columnsErrors && columnsErrors[idx] && /*#__PURE__*/React.createElement("div", {
-          className: classes.columnErrorText
-        }, columnsErrors[idx]));
-      }), /*#__PURE__*/React.createElement("div", {
-        className: classes.deleteIcon
-      })), model.rows.map(function (row, idx) {
-        return /*#__PURE__*/React.createElement(_row["default"], {
-          key: idx,
-          model: model,
-          row: row,
-          idx: idx,
-          onDeleteRow: _this2.props.onDeleteRow,
-          onChange: _this2.props.onChange,
-          onMoveRow: _this2.moveRow,
-          imageSupport: imageSupport,
-          toolbarOpts: toolbarOpts,
-          spellCheck: spellCheck,
-          error: rowsErrors === null || rowsErrors === void 0 ? void 0 : rowsErrors[row.id],
-          maxImageWidth: maxImageWidth && maxImageWidth.rowTitles || defaultImageMaxWidth,
-          maxImageHeight: maxImageHeight && maxImageHeight.rowTitles || defaultImageMaxHeight,
-          uploadSoundSupport: uploadSoundSupport,
-          mathMlOptions: mathMlOptions,
-          minQuestions: minQuestions,
-          inputConfiguration: (0, _utils.getPluginProps)(rows === null || rows === void 0 ? void 0 : rows.inputConfiguration, baseInputConfiguration)
-        });
-      }), correctResponseError && /*#__PURE__*/React.createElement("div", {
-        className: classes.errorText
-      }, correctResponseError), noOfRowsError && /*#__PURE__*/React.createElement("div", {
-        className: classes.errorText
-      }, noOfRowsError), columnsLengthError && /*#__PURE__*/React.createElement("div", {
-        className: classes.errorText
-      }, columnsLengthError), /*#__PURE__*/React.createElement(_addRow["default"], {
-        onAddClick: onAddRow
-      })));
-    }
-  }]);
-  return AnswerConfigBlock;
-}(React.Component);
-
-(0, _defineProperty2["default"])(AnswerConfigBlock, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  model: _propTypes["default"].object.isRequired,
-  configuration: _propTypes["default"].object.isRequired,
-  onChange: _propTypes["default"].func.isRequired,
-  onDeleteRow: _propTypes["default"].func.isRequired,
-  onAddRow: _propTypes["default"].func.isRequired,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+  render() {
+    const {
+      model,
+      onAddRow,
+      imageSupport,
+      configuration,
+      toolbarOpts,
+      spellCheck,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      headers = {},
+      rows = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      mathMlOptions = {},
+      minQuestions
+    } = configuration || {};
+    const {
+      errors
+    } = model || {};
+    const {
+      correctResponseError,
+      rowsErrors,
+      columnsErrors,
+      noOfRowsError,
+      columnsLengthError
+    } = errors || {};
+    const filteredDefaultPlugins = (_editableHtml.DEFAULT_PLUGINS || []).filter(p => p !== 'table' && p !== 'bulleted-list' && p !== 'numbered-list');
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    return /*#__PURE__*/React.createElement(GlobalStyles, null, /*#__PURE__*/React.createElement(_drag.DragProvider, {
+      onDragEnd: this.moveRow
+    }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(_Typography.default, {
+      type: "body1",
+      component: "div"
+    }, "Click on the labels to edit or remove. Set the correct answers by clicking each correct answer per row."), /*#__PURE__*/React.createElement(RowTable, {
+      style: configuration.width ? {
+        width: configuration.width,
+        overflow: 'scroll'
+      } : {}
+    }, /*#__PURE__*/React.createElement(RowContainer, null, headers.settings && (model.headers || []).map((header, idx) => /*#__PURE__*/React.createElement(RowItem, {
+      key: idx,
+      className: (0, _classnames.default)({
+        questionText: idx === 0
+      }),
+      sx: idx === 0 ? {
+        flex: 2,
+        display: 'flex',
+        justifyContent: 'flex-start',
+        marginRight: 1,
+        '&> div': {
+          width: '100%',
+          padding: 0,
+          maxWidth: 'unset',
+          textAlign: 'left',
+          minWidth: '200px'
+        }
+      } : {}
+    }, /*#__PURE__*/React.createElement(_editableHtml.default, {
+      onChange: this.onHeaderChange(idx),
+      markup: header,
+      className: columnsErrors && !columnsErrors[idx] ? 'marginBottom' : 'headerInput',
+      label: 'column label',
+      activePlugins: filteredDefaultPlugins,
+      pluginProps: (0, _utils.getPluginProps)(headers?.inputConfiguration, baseInputConfiguration),
+      autoWidthToolbar: true,
+      spellCheck: spellCheck,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      error: columnsErrors && columnsErrors[idx]
+    }), columnsErrors && columnsErrors[idx] && /*#__PURE__*/React.createElement(ColumnErrorText, null, columnsErrors[idx]))), /*#__PURE__*/React.createElement(DeleteIcon, null)), model.rows.map((row, idx) => /*#__PURE__*/React.createElement(_row.default, {
+      key: idx,
+      model: model,
+      row: row,
+      idx: idx,
+      onDeleteRow: this.props.onDeleteRow,
+      onChange: this.props.onChange,
+      imageSupport: imageSupport,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheck,
+      error: rowsErrors?.[row.id],
+      maxImageWidth: maxImageWidth && maxImageWidth.rowTitles || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rowTitles || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      mathMlOptions: mathMlOptions,
+      minQuestions: minQuestions,
+      inputConfiguration: (0, _utils.getPluginProps)(rows?.inputConfiguration, baseInputConfiguration)
+    })), correctResponseError && /*#__PURE__*/React.createElement(ErrorText, null, correctResponseError), noOfRowsError && /*#__PURE__*/React.createElement(ErrorText, null, noOfRowsError), columnsLengthError && /*#__PURE__*/React.createElement(ErrorText, null, columnsLengthError), /*#__PURE__*/React.createElement(_addRow.default, {
+      onAddClick: onAddRow
+    })))));
+  }
+}
+(0, _defineProperty2.default)(AnswerConfigBlock, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  onDeleteRow: _propTypes.default.func.isRequired,
+  onAddRow: _propTypes.default.func.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
   }),
-  uploadSoundSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+  uploadSoundSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
   }),
-  toolbarOpts: _propTypes["default"].object,
-  spellCheck: _propTypes["default"].bool
+  toolbarOpts: _propTypes.default.object,
+  spellCheck: _propTypes.default.bool
 });
-
-var _default = (0, _styles.withStyles)(styles)(AnswerConfigBlock);
-
-exports["default"] = _default;
+var _default = exports.default = AnswerConfigBlock;
 //# sourceMappingURL=answer-config-block.js.map