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

package/lib/placement-ordering.js

@@ -1,470 +1,420 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.PlacementOrdering = 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.PlacementOrdering = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _tiler = require("./tiler");
-
-var _ordering = require("./ordering");
-
-var _renderUi = require("@pie-lib/render-ui");
-
-var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _debug = _interopRequireDefault(require("debug"));
-
 var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _mathRendering = require("@pie-lib/math-rendering");
-
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
 var _difference = _interopRequireDefault(require("lodash/difference"));
-
+var _styles = require("@mui/material/styles");
+var _renderUi = require("@pie-lib/render-ui");
+var _mathRendering = require("@pie-lib/math-rendering");
 var _translator = _interopRequireDefault(require("@pie-lib/translator"));
-
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
+var _drag = require("@pie-lib/drag");
+var _tiler = require("./tiler");
+var _ordering = require("./ordering");
 var _utils = require("./utils");
-
-var _excluded = ["tiler", "ordering", "onDropChoice", "onRemoveChoice"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var translator = _translator["default"].translator;
-var log = (0, _debug["default"])('pie-elements:placement-ordering');
-
-var OrderingTiler = function OrderingTiler(props) {
-  var Comp = props.tiler,
-      ordering = props.ordering,
-      _onDropChoice = props.onDropChoice,
-      _onRemoveChoice = props.onRemoveChoice,
-      compProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(Comp, (0, _extends2["default"])({}, compProps, {
+const {
+  translator
+} = _translator.default;
+const log = (0, _debug.default)('pie-elements:placement-ordering');
+const PlacementOrderingContainer = (0, _styles.styled)('div')({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  boxSizing: 'border-box'
+});
+const StyledPrompt = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  paddingBottom: theme.spacing(1)
+}));
+const StyledNote = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  paddingBottom: theme.spacing(2)
+}));
+const StyledToggle = (0, _styles.styled)(_correctAnswerToggle.default)(({
+  theme
+}) => ({
+  paddingBottom: theme.spacing(1)
+}));
+const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2),
+  alignSelf: 'flex-start'
+}));
+const OrderingTiler = props => {
+  const {
+    tiler: Comp,
+    ordering,
+    onDropChoice,
+    onRemoveChoice,
+    ...compProps
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({}, compProps, {
     tiles: ordering.tiles,
-    onDropChoice: function onDropChoice(t, s) {
-      return _onDropChoice(t, s, ordering);
-    },
-    onRemoveChoice: function onRemoveChoice(t) {
-      return _onRemoveChoice(t, ordering);
-    }
+    onDropChoice: (t, s) => onDropChoice(t, s, ordering),
+    onRemoveChoice: t => onRemoveChoice(t, ordering)
   }));
 };
-
 OrderingTiler.propTypes = {
-  tiler: _propTypes["default"].func,
-  ordering: _propTypes["default"].any,
-  onDropChoice: _propTypes["default"].func,
-  onRemoveChoice: _propTypes["default"].func
+  tiler: _propTypes.default.func,
+  ordering: _propTypes.default.any,
+  onDropChoice: _propTypes.default.func,
+  onRemoveChoice: _propTypes.default.func
 };
-
-var PlacementOrdering = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(PlacementOrdering, _React$Component);
-
-  var _super = _createSuper(PlacementOrdering);
-
-  function PlacementOrdering(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, PlacementOrdering);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleCorrect", function (showingCorrect) {
-      return _this.setState({
-        showingCorrect: showingCorrect
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "validateSession", function (_ref) {
-      var model = _ref.model,
-          session = _ref.session;
-      var areChoicesShuffled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-      var _ref2 = model || {},
-          config = _ref2.config,
-          choices = _ref2.choices;
-
-      var _ref3 = config || {},
-          includeTargets = _ref3.includeTargets;
-
-      var choicesIds = choices.map(function (c) {
-        return c.id;
-      });
-
-      var _ref4 = session || {},
-          value = _ref4.value;
-
-      var needsReset;
-
+class PlacementOrdering extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "toggleCorrect", showingCorrect => this.setState({
+      showingCorrect
+    }));
+    (0, _defineProperty2.default)(this, "validateSession", ({
+      model,
+      session
+    }, areChoicesShuffled = false) => {
+      const {
+        config,
+        choices
+      } = model || {};
+      const {
+        includeTargets
+      } = config || {};
+      const choicesIds = choices.map(c => c.id);
+      let {
+        value
+      } = session || {};
+      let needsReset;
       if (!includeTargets) {
         // Use all choice IDs if choices were shuffled or session is missing/invalid
-        var sessionMissing = !value || !value.length;
-
+        const sessionMissing = !value || !value.length;
         if (sessionMissing || areChoicesShuffled) {
           // if there's no value on session in No Targets Mode, we need to set an initial session
           value = choicesIds;
         } else {
           // in No Targets Mode, all choice ids need to be used
-          var missingChoiceIds = (0, _difference["default"])(choicesIds, value); // this is the case that handles extra choice ids in session
-
-          var extraChoiceIds = (0, _difference["default"])(value, choicesIds);
-
+          const missingChoiceIds = (0, _difference.default)(choicesIds, value);
+          // this is the case that handles extra choice ids in session
+          const extraChoiceIds = (0, _difference.default)(value, choicesIds);
           if (missingChoiceIds.length || extraChoiceIds.length) {
             value = choicesIds;
           }
         }
-
-        needsReset = !(0, _isEqual["default"])(session.value, value);
+        needsReset = !(0, _isEqual.default)(session.value, value);
       } else {
         // in Targets Area selected, it's important to check the length of session
-        var sessionIsMismatched = value && value.length !== choicesIds.length;
-
+        const sessionIsMismatched = value && value.length !== choicesIds.length;
         if (sessionIsMismatched) {
-          needsReset = true; // if choices were added, add value in session
+          needsReset = true;
 
+          // if choices were added, add value in session
           if (value.length < choicesIds.length) {
             value = value.concat(new Array(choicesIds.length - value.length));
           } else {
             // if choices were removed, make sure to remove from session as well
-            value = value.filter(function (cId) {
-              return choicesIds.includes(cId);
-            });
+            value = value.filter(cId => choicesIds.includes(cId));
           }
         }
       }
-
       if (needsReset) {
         // eslint-disable-next-line no-console
         console.warn('This session is not valid anymore. It will be reset.');
       }
-
       return {
-        value: value,
-        needsReset: needsReset
+        value,
+        needsReset
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDropChoice", function (target, source, ordering) {
-      var _this$props = _this.props,
-          onSessionChange = _this$props.onSessionChange,
-          session = _this$props.session;
-      var from = ordering.tiles.find(function (t) {
-        return t.id === source.id && t.type === source.type;
-      });
-      var to = target;
+    (0, _defineProperty2.default)(this, "onDropChoice", (target, source, ordering) => {
+      const {
+        onSessionChange,
+        session
+      } = this.props;
+      const from = ordering.tiles.find(t => t.id === source.id && t.type === source.type);
+      const to = target;
       log('[onDropChoice] ', from, to);
-      var update = (0, _ordering.reducer)({
+      const update = (0, _ordering.reducer)({
         type: 'move',
-        from: from,
-        to: to
+        from,
+        to
       }, ordering);
-      var sessionUpdate = Object.assign({}, session, {
+      const sessionUpdate = Object.assign({}, session, {
         value: update.response
       });
       onSessionChange(sessionUpdate);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRemoveChoice", function (target, ordering) {
-      var _this$props2 = _this.props,
-          onSessionChange = _this$props2.onSessionChange,
-          session = _this$props2.session;
+    (0, _defineProperty2.default)(this, "onRemoveChoice", (target, ordering) => {
+      const {
+        onSessionChange,
+        session
+      } = this.props;
       log('[onRemoveChoice]', target);
-      var update = (0, _ordering.reducer)({
+      const update = (0, _ordering.reducer)({
         type: 'remove',
-        target: target
+        target
       }, ordering);
-      var sessionUpdate = Object.assign({}, session, {
+      const sessionUpdate = Object.assign({}, session, {
         value: update.response
       });
       onSessionChange(sessionUpdate);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createOrdering", function () {
-      var _this$props3 = _this.props,
-          model = _this$props3.model,
-          session = _this$props3.session;
-      var showingCorrect = _this.state.showingCorrect;
-      var config = model.config || {
+    (0, _defineProperty2.default)(this, "createOrdering", () => {
+      const {
+        model,
+        session
+      } = this.props;
+      const {
+        showingCorrect
+      } = this.state;
+      const config = model.config || {
         orientation: 'vertical',
         includeTargets: true
       };
-      var includeTargets = config.includeTargets;
-      return showingCorrect ? (0, _ordering.buildState)(model.choices, model.correctResponse, model.correctResponse.map(function (id) {
-        return {
-          id: id,
-          outcome: 'correct'
-        };
-      }), {
-        includeTargets: includeTargets,
+      const {
+        includeTargets
+      } = config;
+      return showingCorrect ? (0, _ordering.buildState)(model.choices, model.correctResponse, model.correctResponse.map(id => ({
+        id,
+        outcome: 'correct'
+      })), {
+        includeTargets,
         allowSameChoiceInTargets: model.config.allowSameChoiceInTargets
       }) : (0, _ordering.buildState)(model.choices, session.value, model.outcomes, {
-        includeTargets: includeTargets,
+        includeTargets,
         allowSameChoiceInTargets: model.config.allowSameChoiceInTargets
       });
     });
-    _this.instanceId = (0, _uniqueId["default"])();
-
-    var _this$validateSession = _this.validateSession(props),
-        _value = _this$validateSession.value,
-        _needsReset = _this$validateSession.needsReset;
-
-    _this.state = {
+    (0, _defineProperty2.default)(this, "onDragEnd", event => {
+      const {
+        over,
+        active
+      } = event;
+      const ordering = this.createOrdering();
+      if (over && active) {
+        const draggedItem = active.data.current;
+        const droppedOnItem = over.data.current;
+        if (draggedItem && droppedOnItem && droppedOnItem.type === 'target') {
+          this.onDropChoice(droppedOnItem, draggedItem, ordering);
+          return;
+        }
+        if (draggedItem && droppedOnItem) {
+          this.onDropChoice(droppedOnItem, draggedItem, ordering);
+        }
+      } else if (!over && active) {
+        const draggedItem = active.data.current;
+        if (draggedItem && draggedItem.type === 'target') {
+          this.onRemoveChoice(draggedItem, ordering);
+        }
+      }
+    });
+    this.instanceId = (0, _uniqueId.default)();
+    const {
+      value: _value,
+      needsReset: _needsReset
+    } = this.validateSession(props);
+    this.state = {
       showingCorrect: false
     };
-
-    var _ref5 = props || {},
-        _model = _ref5.model;
-
-    var _ref6 = _model || {},
-        env = _ref6.env;
-
-    var _ref7 = env || {},
-        mode = _ref7.mode;
-
+    const {
+      model: _model
+    } = props || {};
+    const {
+      env
+    } = _model || {};
+    const {
+      mode
+    } = env || {};
     if (_needsReset && mode === 'gather') {
-      _this.props.onSessionChange(_objectSpread(_objectSpread({}, props.session), {}, {
+      this.props.onSessionChange({
+        ...props.session,
         value: _value
-      }));
+      });
     }
-
-    return _this;
   }
+  componentDidUpdate() {
+    //eslint-disable-next-line
+    const domNode = _reactDom.default.findDOMNode(this);
+    (0, _mathRendering.renderMath)(domNode);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      model: nextModel = {}
+    } = nextProps || {};
+    const {
+      model: currentModel = {}
+    } = this.props || {};
+    const {
+      correctResponse,
+      config,
+      choices: nextChoices = [],
+      env
+    } = nextModel;
+    const {
+      includeTargets
+    } = config || {};
+    const newState = {};
+    const isLanguageChanged = currentModel.language && currentModel.language !== nextModel.language;
+    const isDefaultNote = currentModel.note && currentModel.note === translator.t('common:commonCorrectAnswerWithAlternates', {
+      lng: currentModel.language
+    });
 
-  (0, _createClass2["default"])(PlacementOrdering, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      //eslint-disable-next-line
-      var domNode = _reactDom["default"].findDOMNode(this);
-
-      (0, _mathRendering.renderMath)(domNode);
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _currentModel$config,
-          _this2 = this;
-
-      var _ref8 = nextProps || {},
-          _ref8$model = _ref8.model,
-          nextModel = _ref8$model === void 0 ? {} : _ref8$model;
-
-      var _ref9 = this.props || {},
-          _ref9$model = _ref9.model,
-          currentModel = _ref9$model === void 0 ? {} : _ref9$model;
-
-      var correctResponse = nextModel.correctResponse,
-          config = nextModel.config,
-          _nextModel$choices = nextModel.choices,
-          nextChoices = _nextModel$choices === void 0 ? [] : _nextModel$choices,
-          env = nextModel.env;
-
-      var _ref10 = config || {},
-          includeTargets = _ref10.includeTargets;
-
-      var newState = {};
-      var isLanguageChanged = currentModel.language && currentModel.language !== nextModel.language;
-      var isDefaultNote = currentModel.note && currentModel.note === translator.t('common:commonCorrectAnswerWithAlternates', {
-        lng: currentModel.language
-      }); // check if the note is the default one for prev language and change to the default one for new language
-      // this check is necessary in order to diferanciate between default and authour defined note
-      // and only change between languages for default ones
-
-      if (isLanguageChanged && isDefaultNote) {
-        currentModel.note = translator.t('common:commonCorrectAnswerWithAlternates', {
-          lng: nextModel.language
-        });
-      }
-
-      if (!correctResponse) {
-        newState.showingCorrect = false;
-      } //PD-4924
-      // show student choices same order as in model when teacher changes student choices order
-      // for cases when student view and instructor view are on same page
-
-
-      var areChoicesShuffled = (0, _utils.haveSameValuesButDifferentOrder)(nextChoices, currentModel.choices);
-      var validatedSession = this.validateSession(nextProps, areChoicesShuffled);
-      var value = validatedSession.value,
-          needsReset = validatedSession.needsReset;
-
-      var newSession = _objectSpread(_objectSpread({}, nextProps.session), {}, {
-        value: value
-      });
-
-      var includeTargetsChanged = ((_currentModel$config = currentModel.config) === null || _currentModel$config === void 0 ? void 0 : _currentModel$config.includeTargets) !== includeTargets;
-
-      if (includeTargets && includeTargetsChanged) {
-        needsReset = true;
-        delete newSession.value;
-      }
-
-      this.setState(newState, function () {
-        var _ref11 = env || {},
-            mode = _ref11.mode;
-
-        if (needsReset && mode === 'gather') {
-          _this2.props.onSessionChange(newSession);
-        }
+    // check if the note is the default one for prev language and change to the default one for new language
+    // this check is necessary in order to diferanciate between default and authour defined note
+    // and only change between languages for default ones
+    if (isLanguageChanged && isDefaultNote) {
+      currentModel.note = translator.t('common:commonCorrectAnswerWithAlternates', {
+        lng: nextModel.language
       });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props,
-          classes = _this$props4.classes,
-          model = _this$props4.model;
-      var correctResponse = model.correctResponse,
-          correctness = model.correctness,
-          extraCSSRules = model.extraCSSRules,
-          prompt = model.prompt,
-          rationale = model.rationale,
-          feedback = model.feedback,
-          configs = model.config,
-          note = model.note,
-          showNote = model.showNote,
-          env = model.env,
-          disabled = model.disabled,
-          teacherInstructions = model.teacherInstructions,
-          language = model.language;
-      var showToggle = correctResponse && correctResponse.length > 0;
-      var showingCorrect = this.state.showingCorrect;
-      var config = configs || {
-        orientation: 'vertical',
-        includeTargets: true
-      };
-      var orientation = config.orientation,
-          includeTargets = config.includeTargets;
-      var vertical = orientation === 'vertical';
-      var ordering = this.createOrdering();
-
-      var _ref12 = env || {},
-          mode = _ref12.mode,
-          role = _ref12.role;
-
-      var Tiler = vertical ? _tiler.VerticalTiler : _tiler.HorizontalTiler;
-      var displayNote = (showingCorrect || mode === 'view' && role === 'instructor') && showNote && note;
-      var showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
-      var showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
-      return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-        extraCSSRules: extraCSSRules,
-        className: classes.placementOrdering
-      }, showTeacherInstructions && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-        labels: {
-          hidden: 'Show Teacher Instructions',
-          visible: 'Hide Teacher Instructions'
-        },
-        className: classes.collapsible
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: teacherInstructions
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.prompt
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: prompt
-      })), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        className: classes.toggle,
-        show: showToggle,
-        toggled: showingCorrect,
-        onToggle: this.toggleCorrect,
-        language: language
-      }), /*#__PURE__*/_react["default"].createElement(OrderingTiler, {
-        instanceId: this.instanceId,
-        choiceLabel: config.choiceLabel,
-        targetLabel: config.targetLabel,
-        ordering: ordering,
-        tiler: Tiler,
-        disabled: disabled,
-        addGuide: config.showOrdering,
-        tileSize: config.tileSize,
-        includeTargets: includeTargets,
-        choiceLabelEnabled: model.config && model.config.choiceLabelEnabled,
-        onDropChoice: this.onDropChoice,
-        onRemoveChoice: this.onRemoveChoice
-      }), displayNote && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.note,
-        dangerouslySetInnerHTML: {
-          __html: note
-        }
-      }), showRationale && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-        labels: {
-          hidden: 'Show Rationale',
-          visible: 'Hide Rationale'
-        },
-        className: classes.collapsible
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: rationale
-      })), !showingCorrect && /*#__PURE__*/_react["default"].createElement(_renderUi.Feedback, {
-        correctness: correctness,
-        feedback: feedback
-      }));
+    if (!correctResponse) {
+      newState.showingCorrect = false;
     }
-  }]);
-  return PlacementOrdering;
-}(_react["default"].Component);
-
-exports.PlacementOrdering = PlacementOrdering;
-(0, _defineProperty2["default"])(PlacementOrdering, "propTypes", {
-  onSessionChange: _propTypes["default"].func.isRequired,
-  model: _propTypes["default"].object.isRequired,
-  session: _propTypes["default"].oneOfType([_propTypes["default"].array.isRequired, _propTypes["default"].object.isRequired]),
-  classes: _propTypes["default"].object.isRequired
-});
 
-var styles = function styles(theme) {
-  return {
-    placementOrdering: {
+    //PD-4924
+    // show student choices same order as in model when teacher changes student choices order
+    // for cases when student view and instructor view are on same page
+    const areChoicesShuffled = (0, _utils.haveSameValuesButDifferentOrder)(nextChoices, currentModel.choices);
+    const validatedSession = this.validateSession(nextProps, areChoicesShuffled);
+    let {
+      value,
+      needsReset
+    } = validatedSession;
+    const newSession = {
+      ...nextProps.session,
+      value
+    };
+    const includeTargetsChanged = currentModel.config?.includeTargets !== includeTargets;
+    if (includeTargets && includeTargetsChanged) {
+      needsReset = true;
+      delete newSession.value;
+    }
+    this.setState(newState, () => {
+      const {
+        mode
+      } = env || {};
+      if (needsReset && mode === 'gather') {
+        this.props.onSessionChange(newSession);
+      }
+    });
+  }
+  render() {
+    const {
+      model
+    } = this.props;
+    const {
+      correctResponse,
+      correctness,
+      extraCSSRules,
+      prompt,
+      rationale,
+      feedback,
+      config: configs,
+      note,
+      showNote,
+      env,
+      disabled,
+      teacherInstructions,
+      language
+    } = model;
+    const showToggle = correctResponse && correctResponse.length > 0;
+    const {
+      showingCorrect
+    } = this.state;
+    const config = configs || {
+      orientation: 'vertical',
+      includeTargets: true
+    };
+    const {
+      orientation,
+      includeTargets
+    } = config;
+    const vertical = orientation === 'vertical';
+    const ordering = this.createOrdering();
+    const {
+      mode,
+      role
+    } = env || {};
+    const Tiler = vertical ? _tiler.VerticalTiler : _tiler.HorizontalTiler;
+    const displayNote = (showingCorrect || mode === 'view' && role === 'instructor') && showNote && note;
+    const showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
+    const showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
+    const containerStyle = {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background(),
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
       boxSizing: 'border-box'
-    },
-    prompt: {
-      paddingBottom: theme.spacing.unit
-    },
-    toggle: {
-      paddingBottom: theme.spacing.unit
-    },
-    note: {
-      paddingBottom: theme.spacing.unit * 2
-    },
-    collapsible: {
-      marginBottom: theme.spacing.unit * 2,
-      alignSelf: 'flex-start'
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(PlacementOrdering);
-
-exports["default"] = _default;
+    };
+    return /*#__PURE__*/_react.default.createElement(_drag.DragProvider, {
+      onDragStart: () => {},
+      onDragEnd: this.onDragEnd
+    }, /*#__PURE__*/_react.default.createElement(PlacementOrderingContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.UiLayout, {
+      extraCSSRules: extraCSSRules,
+      style: containerStyle
+    }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      },
+      className: "collapsible"
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: teacherInstructions
+    })), /*#__PURE__*/_react.default.createElement(StyledPrompt, null, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: prompt
+    })), /*#__PURE__*/_react.default.createElement(StyledToggle, {
+      className: "toggle",
+      show: showToggle,
+      toggled: showingCorrect,
+      onToggle: this.toggleCorrect,
+      language: language
+    }), /*#__PURE__*/_react.default.createElement(OrderingTiler, {
+      instanceId: this.instanceId,
+      choiceLabel: config.choiceLabel,
+      targetLabel: config.targetLabel,
+      ordering: ordering,
+      tiler: Tiler,
+      disabled: disabled,
+      addGuide: config.showOrdering,
+      tileSize: config.tileSize,
+      includeTargets: includeTargets,
+      choiceLabelEnabled: model.config && model.config.choiceLabelEnabled
+    }), displayNote && /*#__PURE__*/_react.default.createElement(StyledNote, {
+      dangerouslySetInnerHTML: {
+        __html: note
+      }
+    }), showRationale && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      },
+      className: "collapsible"
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: rationale
+    })), !showingCorrect && /*#__PURE__*/_react.default.createElement(_renderUi.Feedback, {
+      correctness: correctness,
+      feedback: feedback
+    }))));
+  }
+}
+exports.PlacementOrdering = PlacementOrdering;
+(0, _defineProperty2.default)(PlacementOrdering, "propTypes", {
+  onSessionChange: _propTypes.default.func.isRequired,
+  model: _propTypes.default.object.isRequired,
+  session: _propTypes.default.oneOfType([_propTypes.default.array.isRequired, _propTypes.default.object.isRequired])
+});
+var _default = exports.default = PlacementOrdering;
 //# sourceMappingURL=placement-ordering.js.map