@pie-element/graphing 8.3.4-next.0 → 9.0.0-beta.0

package/configure/lib/configure.js

@@ -1,428 +1,328 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Configure = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+exports.default = exports.Configure = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _configUi = require("@pie-lib/config-ui");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _debug = _interopRequireDefault(require("debug"));
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
+var _intersection = _interopRequireDefault(require("lodash/intersection"));
+var _styles = require("@mui/material/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _configUi = require("@pie-lib/config-ui");
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
 var _graphingConfig = _interopRequireDefault(require("./graphing-config"));
-
 var _correctResponse = _interopRequireDefault(require("./correct-response"));
-
-var _intersection = _interopRequireDefault(require("lodash/intersection"));
-
-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 Panel = _configUi.settings.Panel,
-    toggle = _configUi.settings.toggle,
-    radio = _configUi.settings.radio,
-    checkboxes = _configUi.settings.checkboxes,
-    textField = _configUi.settings.textField,
-    dropdown = _configUi.settings.dropdown;
-var log = (0, _debug["default"])('@pie-element:graphing:configure');
-
-var styles = function styles(theme) {
-  return {
-    title: {
-      fontSize: '1.1rem',
-      display: 'block',
-      marginTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit
-    },
-    promptHolder: {
-      width: '100%',
-      paddingTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2
-    },
-    description: {
-      marginBottom: theme.spacing.unit * 2.5
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    }
-  };
-};
-
-var Configure = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Configure, _React$Component);
-
-  var _super = _createSuper(Configure);
-
-  function Configure() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Configure);
-
-    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), "onRationaleChange", function (rationale) {
-      var _this$props = _this.props,
-          onModelChanged = _this$props.onModelChanged,
-          model = _this$props.model;
-      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
-        rationale: rationale
-      }));
+const {
+  Panel,
+  toggle,
+  radio,
+  checkboxes,
+  textField,
+  dropdown
+} = _configUi.settings;
+const log = (0, _debug.default)('@pie-element:graphing:configure');
+const StyledInputContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+const Description = (0, _styles.styled)(_Typography.default)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2.5)
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class Configure extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "onRationaleChange", rationale => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      onModelChanged({
+        ...model,
+        rationale
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPromptChange", function (prompt) {
-      var _this$props2 = _this.props,
-          onModelChanged = _this$props2.onModelChanged,
-          model = _this$props2.model;
-      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
-        prompt: prompt
-      }));
+    (0, _defineProperty2.default)(this, "onPromptChange", prompt => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      onModelChanged({
+        ...model,
+        prompt
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTeacherInstructionsChange", function (teacherInstructions) {
-      var _this$props3 = _this.props,
-          onModelChanged = _this$props3.onModelChanged,
-          model = _this$props3.model;
-      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
-        teacherInstructions: teacherInstructions
-      }));
+    (0, _defineProperty2.default)(this, "onTeacherInstructionsChange", teacherInstructions => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      onModelChanged({
+        ...model,
+        teacherInstructions
+      });
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Configure, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props4 = this.props,
-          configuration = _this$props4.configuration,
-          onModelChanged = _this$props4.onModelChanged,
-          model = _this$props4.model;
-
-      var _ref = configuration || {},
-          availableTools = _ref.availableTools,
-          title = _ref.title,
-          graphDimensions = _ref.graphDimensions;
-
-      var _ref2 = model || {},
-          arrows = _ref2.arrows,
-          showTitle = _ref2.titleEnabled,
-          showDimensions = _ref2.dimensionsEnabled; // This is used for offering support for old models which have the property arrows: boolean
-      // Same thing is set in the controller: packages/graphing/controller/src/index.js - model
-
-
-      if (typeof arrows === 'boolean') {
-        if (arrows) {
-          arrows = {
-            left: true,
-            right: true,
-            up: true,
-            down: true
-          };
-        } else {
-          arrows = {
-            left: false,
-            right: false,
-            up: false,
-            down: false
-          };
-        }
+  componentDidMount() {
+    const {
+      configuration,
+      onModelChanged,
+      model
+    } = this.props;
+    const {
+      availableTools,
+      title,
+      graphDimensions
+    } = configuration || {};
+    let {
+      arrows,
+      titleEnabled: showTitle,
+      dimensionsEnabled: showDimensions
+    } = model || {};
+
+    // This is used for offering support for old models which have the property arrows: boolean
+    // Same thing is set in the controller: packages/graphing/controller/src/index.js - model
+    if (typeof arrows === 'boolean') {
+      if (arrows) {
+        arrows = {
+          left: true,
+          right: true,
+          up: true,
+          down: true
+        };
+      } else {
+        arrows = {
+          left: false,
+          right: false,
+          up: false,
+          down: false
+        };
       }
-
-      var toolbarTools = (0, _intersection["default"])(availableTools || [], model.toolbarTools || []);
-      var titleEnabled = showTitle === undefined || showTitle === null ? title.enabled : showTitle;
-      var dimensionsEnabled = showDimensions === undefined || showDimensions === null ? graphDimensions.enabled : showDimensions;
-      onModelChanged && onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
-        arrows: arrows,
-        toolbarTools: toolbarTools,
-        titleEnabled: titleEnabled,
-        dimensionsEnabled: dimensionsEnabled
-      }));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props5 = this.props,
-          classes = _this$props5.classes,
-          model = _this$props5.model,
-          configuration = _this$props5.configuration,
-          onConfigurationChanged = _this$props5.onConfigurationChanged,
-          onModelChanged = _this$props5.onModelChanged,
-          imageSupport = _this$props5.imageSupport,
-          uploadSoundSupport = _this$props5.uploadSoundSupport;
-
-      var _ref3 = configuration || {},
-          _ref3$arrows = _ref3.arrows,
-          arrows = _ref3$arrows === void 0 ? {} : _ref3$arrows,
-          _ref3$authoring = _ref3.authoring,
-          authoring = _ref3$authoring === void 0 ? {} : _ref3$authoring,
-          _ref3$availableTools = _ref3.availableTools,
-          availableTools = _ref3$availableTools === void 0 ? [] : _ref3$availableTools,
-          _ref3$baseInputConfig = _ref3.baseInputConfiguration,
-          baseInputConfiguration = _ref3$baseInputConfig === void 0 ? {} : _ref3$baseInputConfig,
-          _ref3$coordinatesOnHo = _ref3.coordinatesOnHover,
-          coordinatesOnHover = _ref3$coordinatesOnHo === void 0 ? {} : _ref3$coordinatesOnHo,
-          _ref3$contentDimensio = _ref3.contentDimensions,
-          contentDimensions = _ref3$contentDimensio === void 0 ? {} : _ref3$contentDimensio,
-          _ref3$gridConfigurati = _ref3.gridConfigurations,
-          gridConfigurations = _ref3$gridConfigurati === void 0 ? [] : _ref3$gridConfigurati,
-          _ref3$graphDimensions = _ref3.graphDimensions,
-          graphDimensions = _ref3$graphDimensions === void 0 ? {} : _ref3$graphDimensions,
-          _ref3$instruction = _ref3.instruction,
-          instruction = _ref3$instruction === void 0 ? {} : _ref3$instruction,
-          _ref3$labels = _ref3.labels,
-          labels = _ref3$labels === void 0 ? {} : _ref3$labels,
-          _ref3$padding = _ref3.padding,
-          padding = _ref3$padding === void 0 ? {} : _ref3$padding,
-          _ref3$prompt = _ref3.prompt,
-          prompt = _ref3$prompt === void 0 ? {} : _ref3$prompt,
-          _ref3$rationale = _ref3.rationale,
-          rationale = _ref3$rationale === void 0 ? {} : _ref3$rationale,
-          _ref3$scoringType = _ref3.scoringType,
-          scoringType = _ref3$scoringType === void 0 ? {} : _ref3$scoringType,
-          settingsPanelDisabled = _ref3.settingsPanelDisabled,
-          _ref3$spellCheck = _ref3.spellCheck,
-          spellCheck = _ref3$spellCheck === void 0 ? {} : _ref3$spellCheck,
-          _ref3$studentInstruct = _ref3.studentInstructions,
-          studentInstructions = _ref3$studentInstruct === void 0 ? {} : _ref3$studentInstruct,
-          _ref3$teacherInstruct = _ref3.teacherInstructions,
-          teacherInstructions = _ref3$teacherInstruct === void 0 ? {} : _ref3$teacherInstruct,
-          _ref3$title = _ref3.title,
-          title = _ref3$title === void 0 ? {} : _ref3$title,
-          _ref3$maxImageWidth = _ref3.maxImageWidth,
-          maxImageWidth = _ref3$maxImageWidth === void 0 ? {} : _ref3$maxImageWidth,
-          _ref3$maxImageHeight = _ref3.maxImageHeight,
-          maxImageHeight = _ref3$maxImageHeight === void 0 ? {} : _ref3$maxImageHeight,
-          _ref3$withRubric = _ref3.withRubric,
-          withRubric = _ref3$withRubric === void 0 ? {} : _ref3$withRubric,
-          _ref3$language = _ref3.language,
-          language = _ref3$language === void 0 ? {} : _ref3$language,
-          _ref3$languageChoices = _ref3.languageChoices,
-          languageChoices = _ref3$languageChoices === void 0 ? {} : _ref3$languageChoices,
-          _ref3$mathMlOptions = _ref3.mathMlOptions,
-          mathMlOptions = _ref3$mathMlOptions === void 0 ? {} : _ref3$mathMlOptions,
-          _ref3$removeIncomplet = _ref3.removeIncompleteTool,
-          removeIncompleteTool = _ref3$removeIncomplet === void 0 ? false : _ref3$removeIncomplet;
-
-      var _ref4 = model || {},
-          _ref4$errors = _ref4.errors,
-          errors = _ref4$errors === void 0 ? {} : _ref4$errors,
-          extraCSSRules = _ref4.extraCSSRules,
-          labelsEnabled = _ref4.labelsEnabled,
-          dimensionsEnabled = _ref4.dimensionsEnabled,
-          promptEnabled = _ref4.promptEnabled,
-          rationaleEnabled = _ref4.rationaleEnabled,
-          spellCheckEnabled = _ref4.spellCheckEnabled,
-          teacherInstructionsEnabled = _ref4.teacherInstructionsEnabled,
-          titleEnabled = _ref4.titleEnabled;
-
-      var _ref5 = errors || {},
-          promptError = _ref5.prompt,
-          rationaleError = _ref5.rationale,
-          teacherInstructionsError = _ref5.teacherInstructions;
-
-      log('[render] model', model);
-      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-      var labelsPlaceholders = {
-        top: labels.top,
-        right: labels.right,
-        bottom: labels.bottom,
-        left: labels.left
-      };
-      var panelItemType = {
-        arrows: arrows.settings && checkboxes(arrows.label, {
-          left: arrows.left,
-          right: arrows.right,
-          up: arrows.up,
-          down: arrows.down
-        }),
-        titleEnabled: title.settings && toggle(title.label),
-        padding: padding.settings && toggle(padding.label),
-        labelsEnabled: labels.settings && toggle(labels.label),
-        'language.enabled': language.settings && toggle(language.label, true),
-        language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),
-        dimensionsEnabled: graphDimensions.settings && toggle(graphDimensions.label),
-        coordinatesOnHover: coordinatesOnHover.settings && toggle(coordinatesOnHover.label)
-      };
-      var panelProperties = {
-        'authoring.enabled': authoring.settings && toggle(authoring.label, true),
-        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-        studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
-        promptEnabled: prompt.settings && toggle(prompt.label),
-        rationaleEnabled: rationale.settings && toggle(rationale.label),
-        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-        scoringType: scoringType.settings && radio(scoringType.label, ['dichotomous', 'partial scoring']),
-        rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label),
-        instruction: instruction.settings && textField(instruction.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: onModelChanged,
-          onChangeConfiguration: onConfigurationChanged,
-          groups: {
-            Settings: panelItemType,
-            Properties: panelProperties
-          }
-        })
-      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        component: "div",
-        type: "body1",
-        className: classes.description
-      }, (instruction === null || instruction === void 0 ? void 0 : instruction.label) || ''), 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,
-        error: teacherInstructionsError,
-        nonEmpty: false,
-        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.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.prompt,
-        onChange: this.onPromptChange,
-        imageSupport: imageSupport,
-        error: promptError,
-        nonEmpty: false,
-        spellCheck: spellCheckEnabled,
-        pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration),
-        disableUnderline: true,
-        maxImageWidth: defaultImageMaxWidth,
-        maxImageHeight: defaultImageMaxHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, promptError)), /*#__PURE__*/_react["default"].createElement(_graphingConfig["default"], {
-        authoring: authoring,
-        availableTools: availableTools,
-        gridConfigurations: gridConfigurations,
-        graphDimensions: graphDimensions,
-        labelsPlaceholders: labelsPlaceholders,
-        model: model,
-        showLabels: labelsEnabled,
-        dimensionsEnabled: dimensionsEnabled,
-        showTitle: titleEnabled,
-        titlePlaceholder: title.placeholder,
-        onChange: this.props.onModelChanged,
-        mathMlOptions: mathMlOptions,
-        removeIncompleteTool: removeIncompleteTool
-      }), /*#__PURE__*/_react["default"].createElement(_correctResponse["default"], {
-        availableTools: availableTools,
-        errors: errors,
+    const toolbarTools = (0, _intersection.default)(availableTools || [], model.toolbarTools || []);
+    const titleEnabled = showTitle === undefined || showTitle === null ? title.enabled : showTitle;
+    const dimensionsEnabled = showDimensions === undefined || showDimensions === null ? graphDimensions.enabled : showDimensions;
+    onModelChanged && onModelChanged({
+      ...model,
+      arrows,
+      toolbarTools,
+      titleEnabled,
+      dimensionsEnabled
+    });
+  }
+  render() {
+    const {
+      model,
+      configuration,
+      onConfigurationChanged,
+      onModelChanged,
+      imageSupport,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      arrows = {},
+      authoring = {},
+      availableTools = [],
+      baseInputConfiguration = {},
+      coordinatesOnHover = {},
+      contentDimensions = {},
+      gridConfigurations = [],
+      graphDimensions = {},
+      instruction = {},
+      labels = {},
+      padding = {},
+      prompt = {},
+      rationale = {},
+      scoringType = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      studentInstructions = {},
+      teacherInstructions = {},
+      title = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      withRubric = {},
+      language = {},
+      languageChoices = {},
+      mathMlOptions = {},
+      removeIncompleteTool = false
+    } = configuration || {};
+    const {
+      errors = {},
+      extraCSSRules,
+      labelsEnabled,
+      dimensionsEnabled,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      titleEnabled
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      teacherInstructions: teacherInstructionsError
+    } = errors || {};
+    log('[render] model', model);
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const labelsPlaceholders = {
+      top: labels.top,
+      right: labels.right,
+      bottom: labels.bottom,
+      left: labels.left
+    };
+    const panelItemType = {
+      arrows: arrows.settings && checkboxes(arrows.label, {
+        left: arrows.left,
+        right: arrows.right,
+        up: arrows.up,
+        down: arrows.down
+      }),
+      titleEnabled: title.settings && toggle(title.label),
+      padding: padding.settings && toggle(padding.label),
+      labelsEnabled: labels.settings && toggle(labels.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),
+      dimensionsEnabled: graphDimensions.settings && toggle(graphDimensions.label),
+      coordinatesOnHover: coordinatesOnHover.settings && toggle(coordinatesOnHover.label)
+    };
+    const panelProperties = {
+      'authoring.enabled': authoring.settings && toggle(authoring.label, true),
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      scoringType: scoringType.settings && radio(scoringType.label, ['dichotomous', 'partial scoring']),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
+      instruction: instruction.settings && textField(instruction.label)
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
         model: model,
-        onChange: this.props.onModelChanged,
-        mathMlOptions: mathMlOptions,
-        removeIncompleteTool: removeIncompleteTool
-      }), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: rationale.label || 'Rationale',
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.rationale || '',
-        onChange: this.onRationaleChange,
-        imageSupport: imageSupport,
-        error: rationaleError,
-        spellCheck: spellCheckEnabled,
-        pluginProps: getPluginProps(rationale === null || rationale === void 0 ? void 0 : rationale.inputConfiguration),
-        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)));
-    }
-  }]);
-  return Configure;
-}(_react["default"].Component);
-
+        configuration: configuration,
+        onChangeModel: onModelChanged,
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          Settings: panelItemType,
+          Properties: panelProperties
+        }
+      })
+    }, /*#__PURE__*/_react.default.createElement(Description, {
+      component: "div",
+      variant: "body1"
+    }, instruction?.label || ''), teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.teacherInstructions || '',
+      onChange: this.onTeacherInstructionsChange,
+      imageSupport: imageSupport,
+      error: teacherInstructionsError,
+      nonEmpty: false,
+      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(ErrorText, null, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: prompt.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.prompt,
+      onChange: this.onPromptChange,
+      imageSupport: imageSupport,
+      error: promptError,
+      nonEmpty: false,
+      spellCheck: spellCheckEnabled,
+      pluginProps: getPluginProps(prompt?.inputConfiguration),
+      disableUnderline: true,
+      maxImageWidth: defaultImageMaxWidth,
+      maxImageHeight: defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), /*#__PURE__*/_react.default.createElement(_graphingConfig.default, {
+      authoring: authoring,
+      availableTools: availableTools,
+      gridConfigurations: gridConfigurations,
+      graphDimensions: graphDimensions,
+      labelsPlaceholders: labelsPlaceholders,
+      model: model,
+      showLabels: labelsEnabled,
+      dimensionsEnabled: dimensionsEnabled,
+      showTitle: titleEnabled,
+      titlePlaceholder: title.placeholder,
+      onChange: this.props.onModelChanged,
+      mathMlOptions: mathMlOptions,
+      removeIncompleteTool: removeIncompleteTool
+    }), /*#__PURE__*/_react.default.createElement(_correctResponse.default, {
+      availableTools: availableTools,
+      errors: errors,
+      model: model,
+      onChange: this.props.onModelChanged,
+      mathMlOptions: mathMlOptions,
+      removeIncompleteTool: removeIncompleteTool
+    }), rationaleEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: rationale.label || 'Rationale'
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.rationale || '',
+      onChange: this.onRationaleChange,
+      imageSupport: imageSupport,
+      error: rationaleError,
+      spellCheck: spellCheckEnabled,
+      pluginProps: getPluginProps(rationale?.inputConfiguration),
+      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)));
+  }
+}
 exports.Configure = Configure;
-(0, _defineProperty2["default"])(Configure, "propTypes", {
-  onModelChanged: _propTypes["default"].func,
-  onConfigurationChanged: _propTypes["default"].func,
-  classes: _propTypes["default"].object,
-  imageSupport: _propTypes["default"].object,
-  uploadSoundSupport: _propTypes["default"].object,
-  model: _propTypes["default"].object.isRequired,
-  configuration: _propTypes["default"].object.isRequired
+(0, _defineProperty2.default)(Configure, "propTypes", {
+  onModelChanged: _propTypes.default.func,
+  onConfigurationChanged: _propTypes.default.func,
+  imageSupport: _propTypes.default.object,
+  uploadSoundSupport: _propTypes.default.object,
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired
 });
-(0, _defineProperty2["default"])(Configure, "defaultProps", {
-  classes: {}
-});
-
-var _default = (0, _styles.withStyles)(styles)(Configure);
-
-exports["default"] = _default;
+var _default = exports.default = Configure;
 //# sourceMappingURL=configure.js.map