@pie-element/placement-ordering 12.3.4-next.0 → 13.0.0-beta.0

package/configure/lib/design.js

@@ -1,494 +1,428 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Design = void 0;
-
+exports.default = exports.Design = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _configUi = require("@pie-lib/config-ui");
-
-var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _drag = require("@pie-lib/drag");
-
-var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
-
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _debug = _interopRequireDefault(require("debug"));
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _nestedProperty = require("nested-property");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
 var _pluralize = _interopRequireDefault(require("pluralize"));
-
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _styles = require("@mui/material/styles");
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _configUi = require("@pie-lib/config-ui");
+var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
+var _drag = require("@pie-lib/drag");
 var _choiceEditor = _interopRequireDefault(require("./choice-editor"));
-
 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 log = (0, _debug["default"])('@pie-element:placement-ordering:design');
-var Panel = _configUi.settings.Panel,
-    toggle = _configUi.settings.toggle,
-    radio = _configUi.settings.radio,
-    dropdown = _configUi.settings.dropdown;
-
-var getSingularAndPlural = function getSingularAndPlural(label) {
-  return !_pluralize["default"].isPlural(label) ? {
-    singularLabel: label,
-    pluralLabel: (0, _pluralize["default"])(label)
-  } : {
-    singularLabel: _pluralize["default"].singular(label),
-    pluralLabel: label
-  };
+const log = (0, _debug.default)('@pie-element:placement-ordering:design');
+const {
+  Panel,
+  toggle,
+  radio,
+  dropdown
+} = _configUi.settings;
+const getSingularAndPlural = label => !_pluralize.default.isPlural(label) ? {
+  singularLabel: label,
+  pluralLabel: (0, _pluralize.default)(label)
+} : {
+  singularLabel: _pluralize.default.singular(label),
+  pluralLabel: label
 };
-
-var Design = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Design, _React$Component);
-
-  var _super = _createSuper(Design);
-
-  function Design(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Design);
-    _this = _super.call(this, props);
-
-    _this.applyUpdate = function (modelFn) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onModelChanged = _this$props.onModelChanged;
-      var update = modelFn((0, _cloneDeep["default"])(model));
+const StyledInputContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+const StyledRow = (0, _styles.styled)('div')({
+  display: 'grid',
+  gridAutoFlow: 'column',
+  gridAutoColumns: '1fr',
+  gridGap: '8px'
+});
+const StyledChoicesWrapper = (0, _styles.styled)(_configUi.FormSection)(({
+  theme
+}) => ({
+  marginTop: 0,
+  marginBottom: theme.spacing(2.5)
+}));
+const InlineFlexContainer = (0, _styles.styled)('div')({
+  display: 'inline-flex',
+  position: 'absolute'
+});
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class Design extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "onDragEnd", (event, ordering) => {
+      const {
+        active,
+        over
+      } = event;
+      if (!over || !active) {
+        return;
+      }
+      const target = over.data.current;
+      const source = active.data.current;
+      const rawFrom = ordering.tiles.find(t => t.id === source.id && t.type === source.type);
+      const rawTo = target;
+      const from = {
+        ...rawFrom,
+        index: (0, _utils.normalizeIndex)(rawFrom, ordering)
+      };
+      const to = {
+        ...rawTo,
+        index: (0, _utils.normalizeIndex)(rawTo, ordering)
+      };
+      const {
+        response,
+        choices: updatedChoices
+      } = (0, _utils.updateResponseOrChoices)(ordering.response, ordering.choices, from, to);
+      this.onChoiceEditorChange(updatedChoices, response);
+    });
+    this.applyUpdate = modelFn => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const update = modelFn((0, _cloneDeep.default)(model));
       onModelChanged(update);
     };
-
-    _this.changeHandler = function (modelPath, valuePath) {
-      return function (value) {
+    this.changeHandler = (modelPath, valuePath) => {
+      return value => {
         log('[changeHandler] value: ', value);
-        var v = valuePath ? (0, _nestedProperty.get)(value, valuePath) : value;
-
-        _this.applyUpdate(function (model) {
+        const v = valuePath ? (0, _nestedProperty.get)(value, valuePath) : value;
+        this.applyUpdate(model => {
           (0, _nestedProperty.set)(model, modelPath, v);
           return model;
         });
       };
     };
-
-    _this.onPromptChange = _this.changeHandler('prompt');
-    _this.onTeacherInstructionsChange = _this.changeHandler('teacherInstructions');
-    _this.onRationaleChange = _this.changeHandler('rationale');
-    _this.onChoiceAreaLabelChange = _this.changeHandler('choiceLabel', 'target.value');
-    _this.onAnswerAreaLabelChange = _this.changeHandler('targetLabel', 'target.value');
-    _this.onFeedbackChange = _this.changeHandler('feedback');
-
-    _this.onChoiceEditorChange = function (choices, correctResponse) {
-      var _this$props2 = _this.props,
-          model = _this$props2.model,
-          onModelChanged = _this$props2.onModelChanged;
-      var update = (0, _cloneDeep["default"])(model);
+    this.onPromptChange = this.changeHandler('prompt');
+    this.onTeacherInstructionsChange = this.changeHandler('teacherInstructions');
+    this.onRationaleChange = this.changeHandler('rationale');
+    this.onChoiceAreaLabelChange = this.changeHandler('choiceLabel', 'target.value');
+    this.onAnswerAreaLabelChange = this.changeHandler('targetLabel', 'target.value');
+    this.onFeedbackChange = this.changeHandler('feedback');
+    this.onChoiceEditorChange = (choices, correctResponse) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const update = (0, _cloneDeep.default)(model);
       update.choices = choices;
       update.correctResponse = correctResponse;
       onModelChanged(update);
     };
-
-    return _this;
   }
-
-  (0, _createClass2["default"])(Design, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _ref = this.props || {},
-          model = _ref.model,
-          onModelChanged = _ref.onModelChanged;
-
-      var _ref2 = model || {},
-          feedback = _ref2.feedback;
-
-      var update = (0, _cloneDeep["default"])(model); // requirement made in PD-2182
-
-      if (!feedback) {
-        update.feedbackEnabled = false;
-        onModelChanged(update);
-      }
+  componentDidMount() {
+    const {
+      model,
+      onModelChanged
+    } = this.props || {};
+    const {
+      feedback
+    } = model || {};
+    const update = (0, _cloneDeep.default)(model);
+
+    // requirement made in PD-2182
+    if (!feedback) {
+      update.feedbackEnabled = false;
+      onModelChanged(update);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          model = _this$props3.model,
-          classes = _this$props3.classes,
-          imageSupport = _this$props3.imageSupport,
-          uploadSoundSupport = _this$props3.uploadSoundSupport,
-          onModelChanged = _this$props3.onModelChanged,
-          configuration = _this$props3.configuration,
-          onConfigurationChanged = _this$props3.onConfigurationChanged;
-
-      var _ref3 = configuration || {},
-          _ref3$baseInputConfig = _ref3.baseInputConfiguration,
-          baseInputConfiguration = _ref3$baseInputConfig === void 0 ? {} : _ref3$baseInputConfig,
-          _ref3$choiceLabel = _ref3.choiceLabel,
-          choiceLabel = _ref3$choiceLabel === void 0 ? {} : _ref3$choiceLabel,
-          _ref3$choices = _ref3.choices,
-          choices = _ref3$choices === void 0 ? {} : _ref3$choices,
-          _ref3$contentDimensio = _ref3.contentDimensions,
-          contentDimensions = _ref3$contentDimensio === void 0 ? {} : _ref3$contentDimensio,
-          _ref3$feedback = _ref3.feedback,
-          feedback = _ref3$feedback === void 0 ? {} : _ref3$feedback,
-          _ref3$prompt = _ref3.prompt,
-          prompt = _ref3$prompt === void 0 ? {} : _ref3$prompt,
-          _ref3$placementArea = _ref3.placementArea,
-          placementArea = _ref3$placementArea === void 0 ? {} : _ref3$placementArea,
-          _ref3$maxImageWidth = _ref3.maxImageWidth,
-          maxImageWidth = _ref3$maxImageWidth === void 0 ? {} : _ref3$maxImageWidth,
-          _ref3$maxImageHeight = _ref3.maxImageHeight,
-          maxImageHeight = _ref3$maxImageHeight === void 0 ? {} : _ref3$maxImageHeight,
-          _ref3$numberedGuides = _ref3.numberedGuides,
-          numberedGuides = _ref3$numberedGuides === void 0 ? {} : _ref3$numberedGuides,
-          _ref3$orientation = _ref3.orientation,
-          orientation = _ref3$orientation === void 0 ? {} : _ref3$orientation,
-          _ref3$partialScoring = _ref3.partialScoring,
-          partialScoring = _ref3$partialScoring === void 0 ? {} : _ref3$partialScoring,
-          _ref3$rationale = _ref3.rationale,
-          rationale = _ref3$rationale === void 0 ? {} : _ref3$rationale,
-          _ref3$removeTilesAfte = _ref3.removeTilesAfterPlacing,
-          removeTilesAfterPlacing = _ref3$removeTilesAfte === void 0 ? {} : _ref3$removeTilesAfte,
-          settingsPanelDisabled = _ref3.settingsPanelDisabled,
-          _ref3$studentInstruct = _ref3.studentInstructions,
-          studentInstructions = _ref3$studentInstruct === void 0 ? {} : _ref3$studentInstruct,
-          _ref3$spellCheck = _ref3.spellCheck,
-          spellCheck = _ref3$spellCheck === void 0 ? {} : _ref3$spellCheck,
-          _ref3$scoringType = _ref3.scoringType,
-          scoringType = _ref3$scoringType === void 0 ? {} : _ref3$scoringType,
-          _ref3$targetLabel = _ref3.targetLabel,
-          targetLabel = _ref3$targetLabel === void 0 ? {} : _ref3$targetLabel,
-          _ref3$teacherInstruct = _ref3.teacherInstructions,
-          teacherInstructions = _ref3$teacherInstruct === void 0 ? {} : _ref3$teacherInstruct,
-          _ref3$withRubric = _ref3.withRubric,
-          withRubric = _ref3$withRubric === void 0 ? {} : _ref3$withRubric,
-          _ref3$mathMlOptions = _ref3.mathMlOptions,
-          mathMlOptions = _ref3$mathMlOptions === void 0 ? {} : _ref3$mathMlOptions,
-          _ref3$language = _ref3.language,
-          language = _ref3$language === void 0 ? {} : _ref3$language,
-          _ref3$languageChoices = _ref3.languageChoices,
-          languageChoices = _ref3$languageChoices === void 0 ? {} : _ref3$languageChoices;
-
-      var _ref4 = model || {},
-          choiceLabelEnabled = _ref4.choiceLabelEnabled,
-          errors = _ref4.errors,
-          extraCSSRules = _ref4.extraCSSRules,
-          feedbackEnabled = _ref4.feedbackEnabled,
-          promptEnabled = _ref4.promptEnabled,
-          rationaleEnabled = _ref4.rationaleEnabled,
-          spellCheckEnabled = _ref4.spellCheckEnabled,
-          teacherInstructionsEnabled = _ref4.teacherInstructionsEnabled,
-          toolbarEditorPosition = _ref4.toolbarEditorPosition;
-
-      var _ref5 = errors || {},
-          promptError = _ref5.prompt,
-          rationaleError = _ref5.rationale,
-          teacherInstructionsError = _ref5.teacherInstructions;
-
-      var validationMessage = (0, _utils.generateValidationMessage)();
-
-      var _ref6 = (choices === null || choices === void 0 ? void 0 : choices.label) && getSingularAndPlural(choices.label) || {},
-          _ref6$singularLabel = _ref6.singularLabel,
-          singularLabel = _ref6$singularLabel === void 0 ? '' : _ref6$singularLabel,
-          _ref6$pluralLabel = _ref6.pluralLabel,
-          pluralLabel = _ref6$pluralLabel === void 0 ? '' : _ref6$pluralLabel;
-
-      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-      var maxChoicesImageWidth = maxImageWidth && model.placementArea ? maxImageWidth.choicesWithPlacementArea : maxImageWidth.choicesWithoutPlacementArea || defaultImageMaxWidth;
-      var maxChoicesImageHeight = maxImageHeight && maxImageHeight.choices || defaultImageMaxHeight;
-      var toolbarOpts = {
-        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-      };
-      var panelSettings = {
-        choiceLabelEnabled: choiceLabel.settings && toggle(choiceLabel.label),
-        placementArea: placementArea.settings && toggle(placementArea.label),
-        numberedGuides: numberedGuides.settings && model.placementArea && toggle(numberedGuides.label),
-        orientation: orientation.settings && radio(orientation.label, ['vertical', 'horizontal']),
-        removeTilesAfterPlacing: removeTilesAfterPlacing.settings && toggle(removeTilesAfterPlacing.label),
-        partialScoring: partialScoring.settings && toggle(partialScoring.label),
-        feedbackEnabled: feedback.settings && toggle(feedback.label),
-        'language.enabled': language.settings && toggle(language.label, true),
-        language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
-      };
-      var panelProperties = {
-        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-        studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
-        rationaleEnabled: rationale.settings && toggle(rationale.label),
-        promptEnabled: prompt.settings && toggle(prompt.label),
-        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-        scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
-        rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label)
-      };
-
-      var getPluginProps = function getPluginProps() {
-        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
-      };
-
-      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
-        extraCSSRules: extraCSSRules,
-        dimensions: contentDimensions,
-        hideSettings: settingsPanelDisabled,
-        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
-          model: model,
-          configuration: configuration,
-          onChangeModel: function onChangeModel(model) {
-            return onModelChanged(model);
-          },
-          onChangeConfiguration: function onChangeConfiguration(configuration) {
-            return onConfigurationChanged(configuration, true);
-          },
-          groups: {
-            Settings: panelSettings,
-            Properties: panelProperties
-          }
-        })
-      }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: teacherInstructions.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.teacherInstructions || '',
-        onChange: this.onTeacherInstructionsChange,
-        imageSupport: imageSupport,
-        nonEmpty: false,
-        error: teacherInstructionsError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
-        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), teacherInstructionsError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: prompt && prompt.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.prompt,
-        onChange: this.onPromptChange,
-        imageSupport: imageSupport,
-        error: promptError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.prompt,
-        maxImageHeight: maxImageHeight && maxImageHeight.prompt,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, promptError)), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
-        className: classes.choicesWrapper,
-        label: "Define ".concat(pluralLabel),
-        labelExtraStyle: {
-          display: 'inline-flex'
+  }
+  render() {
+    const {
+      model,
+      imageSupport,
+      uploadSoundSupport,
+      onModelChanged,
+      configuration,
+      onConfigurationChanged
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      choiceLabel = {},
+      choices = {},
+      contentDimensions = {},
+      feedback = {},
+      prompt = {},
+      placementArea = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      numberedGuides = {},
+      orientation = {},
+      partialScoring = {},
+      rationale = {},
+      removeTilesAfterPlacing = {},
+      settingsPanelDisabled,
+      studentInstructions = {},
+      spellCheck = {},
+      scoringType = {},
+      targetLabel = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {}
+    } = configuration || {};
+    const {
+      choiceLabelEnabled,
+      errors,
+      extraCSSRules,
+      feedbackEnabled,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition,
+      correctResponse
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      teacherInstructions: teacherInstructionsError
+    } = errors || {};
+    const ordering = {
+      choices: model.choices,
+      response: !correctResponse || (0, _isEmpty.default)(correctResponse) ? new Array(model.choices.length) : correctResponse,
+      tiles: (0, _utils.buildTiles)(model.choices, correctResponse)
+    };
+    const validationMessage = (0, _utils.generateValidationMessage)();
+    const {
+      singularLabel = '',
+      pluralLabel = ''
+    } = choices?.label && getSingularAndPlural(choices.label) || {};
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const maxChoicesImageWidth = maxImageWidth && model.placementArea ? maxImageWidth.choicesWithPlacementArea : maxImageWidth.choicesWithoutPlacementArea || defaultImageMaxWidth;
+    const maxChoicesImageHeight = maxImageHeight && maxImageHeight.choices || defaultImageMaxHeight;
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const panelSettings = {
+      choiceLabelEnabled: choiceLabel.settings && toggle(choiceLabel.label),
+      placementArea: placementArea.settings && toggle(placementArea.label),
+      numberedGuides: numberedGuides.settings && model.placementArea && toggle(numberedGuides.label),
+      orientation: orientation.settings && radio(orientation.label, ['vertical', 'horizontal']),
+      removeTilesAfterPlacing: removeTilesAfterPlacing.settings && toggle(removeTilesAfterPlacing.label),
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      feedbackEnabled: feedback.settings && toggle(feedback.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label)
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    return /*#__PURE__*/_react.default.createElement(_drag.DragProvider, {
+      onDragEnd: event => this.onDragEnd(event, ordering)
+    }, /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: model => onModelChanged(model),
+        onChangeConfiguration: configuration => onConfigurationChanged(configuration, true),
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.inlineFlexContainer
-      }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        classes: {
-          tooltip: classes.tooltip
-        },
-        disableFocusListener: true,
-        disableTouchListener: true,
-        placement: 'right',
-        title: validationMessage
-      }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
-        fontSize: 'small',
-        color: 'primary',
-        style: {
-          marginLeft: '8px'
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      className: "prompt",
+      markup: model.teacherInstructions || '',
+      onChange: this.onTeacherInstructionsChange,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(teacherInstructions?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement("div", {
+      className: "errorText"
+    }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: prompt && prompt.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      className: "prompt",
+      markup: model.prompt,
+      onChange: this.onPromptChange,
+      imageSupport: imageSupport,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(prompt?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.prompt,
+      maxImageHeight: maxImageHeight && maxImageHeight.prompt,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/_react.default.createElement("div", {
+      className: "errorText"
+    }, promptError)), /*#__PURE__*/_react.default.createElement(StyledChoicesWrapper, {
+      label: `Define ${pluralLabel}`,
+      labelExtraStyle: {
+        display: 'inline-flex'
+      }
+    }, /*#__PURE__*/_react.default.createElement(InlineFlexContainer, null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      slotProps: {
+        tooltip: {
+          sx: {
+            fontSize: 14,
+            whiteSpace: 'pre',
+            maxWidth: '500px'
+          }
         }
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.row
-      }, choiceLabelEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: choiceLabel && choiceLabel.label && "".concat(singularLabel, " label"),
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], (0, _extends2["default"])({}, model.placementArea && {
-        autoWidthToolbar: true
+      },
+      disableFocusListener: true,
+      disableTouchListener: true,
+      placement: 'right',
+      title: validationMessage
+    }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+      fontSize: 'small',
+      color: 'primary',
+      style: {
+        marginLeft: '8px'
+      }
+    }))), /*#__PURE__*/_react.default.createElement(StyledRow, null, choiceLabelEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: choiceLabel && choiceLabel.label && `${singularLabel} label`
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, (0, _extends2.default)({}, model.placementArea && {
+      autoWidthToolbar: true
+    }, {
+      className: "prompt",
+      markup: model.choiceLabel,
+      onChange: this.onChoiceAreaLabelChange,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(choiceLabel?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxChoicesImageWidth,
+      maxImageHeight: maxChoicesImageHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
       }, {
-        className: classes.prompt,
-        markup: model.choiceLabel,
-        onChange: this.onChoiceAreaLabelChange,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(choiceLabel === null || choiceLabel === void 0 ? void 0 : choiceLabel.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxChoicesImageWidth,
-        maxImageHeight: maxChoicesImageHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }))), targetLabel.settings && model.placementArea && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: targetLabel && targetLabel.label && targetLabel.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        autoWidthToolbar: true,
-        className: classes.prompt,
-        markup: model.targetLabel,
-        onChange: this.onAnswerAreaLabelChange,
-        toolbarOpts: toolbarOpts,
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.choicesWithPlacementArea || defaultImageMaxWidth,
-        maxImageHeight: maxChoicesImageHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }))), choices.settings && /*#__PURE__*/_react["default"].createElement(_choiceEditor["default"], {
-        correctResponse: model.correctResponse,
-        choices: model.choices,
-        onChange: this.onChoiceEditorChange,
-        imageSupport: imageSupport,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(choices === null || choices === void 0 ? void 0 : choices.inputConfiguration),
-        choicesLabel: choices.label,
-        placementArea: model.placementArea,
-        singularChoiceLabel: singularLabel,
-        pluralChoiceLabel: pluralLabel,
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxChoicesImageWidth,
-        maxImageHeight: maxChoicesImageHeight,
-        errors: errors || {},
-        mathMlOptions: mathMlOptions
-      })), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: rationale.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.rationale || '',
-        onChange: this.onRationaleChange,
-        imageSupport: imageSupport,
-        error: rationaleError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(rationale === null || rationale === void 0 ? void 0 : rationale.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
-        maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), rationaleError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, rationaleError)), feedbackEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.FeedbackConfig, {
-        feedback: model.feedback,
-        onChange: this.onFeedbackChange,
-        imageSupport: imageSupport,
-        toolbarOpts: toolbarOpts
-      }));
-    }
-  }]);
-  return Design;
-}(_react["default"].Component);
-
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }))), targetLabel.settings && model.placementArea && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: targetLabel && targetLabel.label && targetLabel.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      autoWidthToolbar: true,
+      className: "prompt",
+      markup: model.targetLabel,
+      onChange: this.onAnswerAreaLabelChange,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.choicesWithPlacementArea || defaultImageMaxWidth,
+      maxImageHeight: maxChoicesImageHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }))), choices.settings && /*#__PURE__*/_react.default.createElement(_choiceEditor.default, {
+      correctResponse: correctResponse,
+      choices: model.choices,
+      onChange: this.onChoiceEditorChange,
+      imageSupport: imageSupport,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(choices?.inputConfiguration),
+      choicesLabel: choices.label,
+      placementArea: model.placementArea,
+      singularChoiceLabel: singularLabel,
+      pluralChoiceLabel: pluralLabel,
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxChoicesImageWidth,
+      maxImageHeight: maxChoicesImageHeight,
+      errors: errors || {},
+      mathMlOptions: mathMlOptions,
+      ordering: ordering
+    })), rationaleEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: rationale.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      className: "prompt",
+      markup: model.rationale || '',
+      onChange: this.onRationaleChange,
+      imageSupport: imageSupport,
+      error: rationaleError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(rationale?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), rationaleError && /*#__PURE__*/_react.default.createElement(ErrorText, null, rationaleError)), feedbackEnabled && /*#__PURE__*/_react.default.createElement(_configUi.FeedbackConfig, {
+      feedback: model.feedback,
+      onChange: this.onFeedbackChange,
+      imageSupport: imageSupport,
+      toolbarOpts: toolbarOpts
+    })));
+  }
+}
 exports.Design = Design;
-(0, _defineProperty2["default"])(Design, "propTypes", {
-  uploadSoundSupport: _propTypes["default"].object
+(0, _defineProperty2.default)(Design, "propTypes", {
+  uploadSoundSupport: _propTypes.default.object
 });
-(0, _defineProperty2["default"])(Design, "defaultProps", {});
+(0, _defineProperty2.default)(Design, "defaultProps", {});
 Design.defaultProps = {
-  onModelChanged: function onModelChanged() {},
-  onConfigurationChanged: function onConfigurationChanged() {}
+  onModelChanged: () => {},
+  onConfigurationChanged: () => {}
 };
 Design.propTypes = {
-  model: _propTypes["default"].object.isRequired,
-  configuration: _propTypes["default"].object.isRequired,
-  onModelChanged: _propTypes["default"].func,
-  onConfigurationChanged: _propTypes["default"].func,
-  classes: _propTypes["default"].object.isRequired,
-  imageSupport: _propTypes["default"].object
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  onModelChanged: _propTypes.default.func,
+  onConfigurationChanged: _propTypes.default.func,
+  imageSupport: _propTypes.default.object
 };
-
-var _default = (0, _drag.withDragContext)((0, _styles.withStyles)(function (theme) {
-  return {
-    promptHolder: {
-      width: '100%',
-      paddingTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2
-    },
-    row: {
-      display: 'grid',
-      gridAutoFlow: 'column',
-      gridAutoColumns: '1fr',
-      gridGap: '8px'
-    },
-    choicesWrapper: {
-      marginTop: 0,
-      marginBottom: theme.spacing.unit * 2.5
-    },
-    tooltip: {
-      fontSize: theme.typography.fontSize - 2,
-      whiteSpace: 'pre',
-      maxWidth: '500px'
-    },
-    inlineFlexContainer: {
-      display: 'inline-flex',
-      position: 'absolute'
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    }
-  };
-})(Design));
-
-exports["default"] = _default;
+var _default = exports.default = Design;
 //# sourceMappingURL=design.js.map