@pie-element/categorize 11.1.0 → 11.2.0-mui-update.0

package/lib/categorize/index.js

@@ -1,388 +1,413 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Categorize = 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.Categorize = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _choices = _interopRequireDefault(require("./choices"));
-
-var _categories = _interopRequireDefault(require("./categories"));
-
+var _debug = _interopRequireDefault(require("debug"));
+var _styles = require("@mui/material/styles");
+var _core = require("@dnd-kit/core");
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
-
-var _styles = require("@material-ui/core/styles");
-
 var _categorize = require("@pie-lib/categorize");
-
 var _drag = require("@pie-lib/drag");
-
 var _renderUi = require("@pie-lib/render-ui");
-
-var _debug = _interopRequireDefault(require("debug"));
-
+var _mathRendering = require("@pie-lib/math-rendering");
 var _translator = _interopRequireDefault(require("@pie-lib/translator"));
-
 var _configUi = require("@pie-lib/config-ui");
-
-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-ui:categorize');
-
-var Categorize = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Categorize, _React$Component);
-
-  var _super = _createSuper(Categorize);
-
-  function Categorize(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Categorize);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeChoice", function (c) {
+var _choices = _interopRequireDefault(require("./choices"));
+var _choice = _interopRequireDefault(require("./choice"));
+var _categories = _interopRequireDefault(require("./categories"));
+const {
+  translator
+} = _translator.default;
+const log = (0, _debug.default)('@pie-ui:categorize');
+class DragPreviewWrapper extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "containerRef", /*#__PURE__*/_react.default.createRef());
+  }
+  componentDidMount() {
+    if (this.containerRef.current) {
+      console.log('Rendering math in drag preview wrapper');
+      (0, _mathRendering.renderMath)(this.containerRef.current);
+    }
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.containerRef
+    }, this.props.children);
+  }
+}
+class Categorize extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "removeChoice", c => {
       log('[removeChoice]: ', c);
-      var _this$props = _this.props,
-          onAnswersChange = _this$props.onAnswersChange,
-          session = _this$props.session;
-      var answers = (0, _categorize.removeChoiceFromCategory)(c.id, c.categoryId, c.choiceIndex, session.answers);
+      const {
+        onAnswersChange,
+        session
+      } = this.props;
+      const answers = (0, _categorize.removeChoiceFromCategory)(c.id, c.categoryId, c.choiceIndex, session.answers);
       onAnswersChange(answers);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dropChoice", function (categoryId, draggedChoice) {
-      var _this$props2 = _this.props,
-          session = _this$props2.session,
-          onAnswersChange = _this$props2.onAnswersChange,
-          model = _this$props2.model;
-
-      var _ref = model || {},
-          _ref$maxChoicesPerCat = _ref.maxChoicesPerCategory,
-          maxChoicesPerCategory = _ref$maxChoicesPerCat === void 0 ? 0 : _ref$maxChoicesPerCat;
-
-      var _ref2 = session || {},
-          _ref2$answers = _ref2.answers,
-          answers = _ref2$answers === void 0 ? [] : _ref2$answers;
-
-      var newAnswers;
-
+    (0, _defineProperty2.default)(this, "dropChoice", (categoryId, draggedChoice) => {
+      const {
+        session,
+        onAnswersChange,
+        model
+      } = this.props;
+      const {
+        maxChoicesPerCategory = 0
+      } = model || {};
+      const {
+        answers = []
+      } = session || {};
+      let newAnswers;
       if (draggedChoice) {
         log('[dropChoice] category: ', draggedChoice.categoryId, 'choice: ', draggedChoice);
       } else {
         log('[dropChoice] category: ', undefined, 'choice: ', undefined);
       }
+      const answer = answers.find(answer => answer.category === categoryId);
 
-      var answer = answers.find(function (answer) {
-        return answer.category === categoryId;
-      }); // treat special case to replace the existing choice with the new one when maxChoicesPerCategory = 1
-
+      // treat special case to replace the existing choice with the new one when maxChoicesPerCategory = 1
       if (draggedChoice && maxChoicesPerCategory === 1 && answer && answer.choices && answer.choices.length === 1) {
         newAnswers = (0, _categorize.moveChoiceToCategory)(draggedChoice.id, draggedChoice.categoryId, categoryId, draggedChoice.choiceIndex, answers);
         newAnswers = (0, _categorize.removeChoiceFromCategory)(answer.choices[0], categoryId, 0, answers);
-      } // treat special case when there are as many choices as maxChoicesPerCategory is
+      }
+
+      // treat special case when there are as many choices as maxChoicesPerCategory is
       else if (draggedChoice && maxChoicesPerCategory > 1 && answer && answer.choices && answer.choices.length === maxChoicesPerCategory) {
         newAnswers = draggedChoice.categoryId ? (0, _categorize.moveChoiceToCategory)(draggedChoice.id, draggedChoice.categoryId, draggedChoice.categoryId, draggedChoice.choiceIndex, answers) : (0, _categorize.removeChoiceFromCategory)(draggedChoice.id, draggedChoice.categoryId, draggedChoice.choiceIndex, answers);
-
-        _this.setState({
+        this.setState({
           showMaxChoiceAlert: true
         });
-      } // treat special case when there are more choices that maxChoicesPerCategory is (testing purpose in pits)
+      }
+
+      // treat special case when there are more choices that maxChoicesPerCategory is (testing purpose in pits)
       else if (maxChoicesPerCategory !== 0 && answer && answer.choices && answer.choices.length > maxChoicesPerCategory) {
         newAnswers = answers;
-
-        _this.setState({
+        this.setState({
           showMaxChoiceAlert: true
         });
       } else {
-        newAnswers = draggedChoice ? (0, _categorize.moveChoiceToCategory)(draggedChoice.id, draggedChoice.categoryId, categoryId, draggedChoice.choiceIndex, answers) : _this.removeChoice(categoryId);
+        newAnswers = draggedChoice ? (0, _categorize.moveChoiceToCategory)(draggedChoice.id, draggedChoice.categoryId, categoryId, draggedChoice.choiceIndex, answers) : this.removeChoice(categoryId);
       }
-
       if (draggedChoice) {
         onAnswersChange(newAnswers);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleShowCorrect", function () {
-      return _this.setState({
-        showCorrect: !_this.state.showCorrect
-      }, function () {
-        _this.props.onShowCorrectToggle();
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPositionDirection", function (choicePosition) {
-      var flexDirection;
-
+    (0, _defineProperty2.default)(this, "toggleShowCorrect", () => this.setState({
+      showCorrect: !this.state.showCorrect
+    }, () => {
+      this.props.onShowCorrectToggle();
+    }));
+    (0, _defineProperty2.default)(this, "getPositionDirection", choicePosition => {
+      let flexDirection;
       switch (choicePosition) {
         case 'left':
           flexDirection = 'row-reverse';
           break;
-
         case 'right':
           flexDirection = 'row';
           break;
-
         case 'below':
           flexDirection = 'column';
           break;
-
         default:
           // above
           flexDirection = 'column-reverse';
           break;
       }
-
       return flexDirection;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "existAlternateResponse", function (correctResponse) {
-      return correctResponse === null || correctResponse === void 0 ? void 0 : correctResponse.some(function (correctRes) {
-        var _correctRes$alternate;
-
-        return ((_correctRes$alternate = correctRes.alternateResponses) === null || _correctRes$alternate === void 0 ? void 0 : _correctRes$alternate.length) > 0;
-      });
-    });
-    _this.state = {
+    (0, _defineProperty2.default)(this, "existAlternateResponse", correctResponse => correctResponse?.some(correctRes => correctRes.alternateResponses?.length > 0));
+    this.state = {
       showCorrect: false,
       showMaxChoiceAlert: false
     };
-    return _this;
   }
-
-  (0, _createClass2["default"])(Categorize, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var model = this.props.model;
-      var nextModel = nextProps.model; // 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 (model.note && model.language && model.language !== nextModel.language && model.note === translator.t('common:commonCorrectAnswerWithAlternates', {
-        lng: model.language
-      })) {
-        model.note = translator.t('common:commonCorrectAnswerWithAlternates', {
-          lng: nextModel.language
-        });
-      }
-
-      this.setState({
-        showCorrect: false
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      model
+    } = this.props;
+    const {
+      model: nextModel
+    } = nextProps;
+
+    // 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 (model.note && model.language && model.language !== nextModel.language && model.note === translator.t('common:commonCorrectAnswerWithAlternates', {
+      lng: model.language
+    })) {
+      model.note = translator.t('common:commonCorrectAnswerWithAlternates', {
+        lng: nextModel.language
       });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props3 = this.props,
-          classes = _this$props3.classes,
-          model = _this$props3.model,
-          session = _this$props3.session;
-      var _this$state = this.state,
-          showCorrect = _this$state.showCorrect,
-          showMaxChoiceAlert = _this$state.showMaxChoiceAlert;
-      var choicesPosition = model.choicesPosition,
-          extraCSSRules = model.extraCSSRules,
-          note = model.note,
-          showNote = model.showNote,
-          env = model.env,
-          language = model.language,
-          maxChoicesPerCategory = model.maxChoicesPerCategory,
-          autoplayAudioEnabled = model.autoplayAudioEnabled,
-          customAudioButton = model.customAudioButton;
-
-      var _ref3 = env || {},
-          mode = _ref3.mode,
-          role = _ref3.role;
-
-      var choicePosition = choicesPosition || 'above';
-      var style = {
-        flexDirection: this.getPositionDirection(choicePosition),
-        gap: '8px'
-      };
-
-      var _buildState = (0, _categorize.buildState)(model.categories, model.choices, showCorrect ? model.correctResponse : session.answers, model.correctResponse),
-          categories = _buildState.categories,
-          choices = _buildState.choices,
-          correct = _buildState.correct;
-
-      log('[render] disabled: ', model.disabled);
-      var rowLabels = model.rowLabels,
-          categoriesPerRow = model.categoriesPerRow,
-          correctResponse = model.correctResponse,
-          fontSizeFactor = model.fontSizeFactor;
-      var nbOfRows = categories && Math.ceil(categories.length / categoriesPerRow) || 0;
-      var existAlternate = this.existAlternateResponse(correctResponse) || false;
-      var displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note && existAlternate;
-      var alertMessage = translator.t('translation:categorize:limitMaxChoicesPerCategory', {
-        lng: model.language,
-        maxChoicesPerCategory: maxChoicesPerCategory
-      });
-      var alertTitle = translator.t('common:warning', {
-        lng: model.language
-      });
-      var onCloseText = translator.t('common:cancel', {
-        lng: model.language
-      });
-      var showRationale = model.rationale && ((0, _renderUi.hasText)(model.rationale) || (0, _renderUi.hasMedia)(model.rationale));
-      var showTeacherInstructions = model.teacherInstructions && ((0, _renderUi.hasText)(model.teacherInstructions) || (0, _renderUi.hasMedia)(model.teacherInstructions));
-      return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-        extraCSSRules: extraCSSRules,
-        id: 'main-container',
-        className: classes.mainContainer,
-        fontSizeFactor: fontSizeFactor
-      }, showTeacherInstructions && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__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: model.teacherInstructions
-      }))), model.prompt && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: model.prompt,
-        autoplayAudioEnabled: autoplayAudioEnabled,
-        customAudioButton: customAudioButton
-      }), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        show: showCorrect || correct === false,
-        toggled: showCorrect,
-        onToggle: this.toggleShowCorrect,
-        language: language
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.categorize,
-        style: style
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          flex: 1
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_categories["default"], {
-        model: model,
-        disabled: model.disabled,
-        categories: categories,
-        onDropChoice: this.dropChoice,
-        onRemoveChoice: this.removeChoice,
-        rowLabels: (rowLabels || []).slice(0, nbOfRows)
-      })), /*#__PURE__*/_react["default"].createElement(_choices["default"], {
-        disabled: model.disabled,
-        model: model,
-        choices: choices,
-        choicePosition: choicePosition,
-        onDropChoice: this.dropChoice,
-        onRemoveChoice: this.removeChoice
-      })), 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: model.rationale
-      })), model.correctness && model.feedback && !showCorrect && /*#__PURE__*/_react["default"].createElement(_renderUi.Feedback, {
-        correctness: model.correctness,
-        feedback: model.feedback
-      }), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
-        title: alertTitle,
-        text: alertMessage,
-        open: showMaxChoiceAlert,
-        onCloseText: onCloseText,
-        onClose: function onClose() {
-          return _this2.setState({
-            showMaxChoiceAlert: false
-          });
-        }
-      }));
-    }
-  }]);
-  return Categorize;
-}(_react["default"].Component);
-
+    this.setState({
+      showCorrect: false
+    });
+  }
+  render() {
+    const {
+      model,
+      session
+    } = this.props;
+    const {
+      showCorrect,
+      showMaxChoiceAlert
+    } = this.state;
+    const {
+      choicesPosition,
+      extraCSSRules,
+      note,
+      showNote,
+      env,
+      language,
+      maxChoicesPerCategory,
+      autoplayAudioEnabled,
+      customAudioButton
+    } = model;
+    const {
+      mode,
+      role
+    } = env || {};
+    const choicePosition = choicesPosition || 'above';
+    const style = {
+      flexDirection: this.getPositionDirection(choicePosition),
+      gap: '8px'
+    };
+    const {
+      categories,
+      choices,
+      correct
+    } = (0, _categorize.buildState)(model.categories, model.choices, showCorrect ? model.correctResponse : session.answers, model.correctResponse);
+    log('[render] disabled: ', model.disabled);
+    const {
+      rowLabels,
+      categoriesPerRow,
+      correctResponse,
+      fontSizeFactor
+    } = model;
+    const nbOfRows = categories && Math.ceil(categories.length / categoriesPerRow) || 0;
+    const existAlternate = this.existAlternateResponse(correctResponse) || false;
+    const displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note && existAlternate;
+    const alertMessage = translator.t('translation:categorize:limitMaxChoicesPerCategory', {
+      lng: model.language,
+      maxChoicesPerCategory
+    });
+    const alertTitle = translator.t('common:warning', {
+      lng: model.language
+    });
+    const onCloseText = translator.t('common:cancel', {
+      lng: model.language
+    });
+    const showRationale = model.rationale && ((0, _renderUi.hasText)(model.rationale) || (0, _renderUi.hasMedia)(model.rationale));
+    const showTeacherInstructions = model.teacherInstructions && ((0, _renderUi.hasText)(model.teacherInstructions) || (0, _renderUi.hasMedia)(model.teacherInstructions));
+    return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules,
+      id: 'main-container',
+      fontSizeFactor: fontSizeFactor
+    }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: model.teacherInstructions
+    }))), model.prompt && /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: model.prompt,
+      autoplayAudioEnabled: autoplayAudioEnabled,
+      customAudioButton: customAudioButton
+    }), /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      show: showCorrect || correct === false,
+      toggled: showCorrect,
+      onToggle: this.toggleShowCorrect,
+      language: language
+    }), /*#__PURE__*/_react.default.createElement(StyledCategorize, {
+      style: style
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        flex: 1
+      }
+    }, /*#__PURE__*/_react.default.createElement(_categories.default, {
+      model: model,
+      disabled: model.disabled,
+      categories: categories,
+      onDropChoice: this.dropChoice,
+      onRemoveChoice: this.removeChoice,
+      rowLabels: (rowLabels || []).slice(0, nbOfRows)
+    })), /*#__PURE__*/_react.default.createElement(_choices.default, {
+      disabled: model.disabled,
+      model: model,
+      choices: choices,
+      choicePosition: choicePosition,
+      onDropChoice: this.dropChoice,
+      onRemoveChoice: this.removeChoice
+    })), displayNote && /*#__PURE__*/_react.default.createElement(StyledNote, {
+      dangerouslySetInnerHTML: {
+        __html: note
+      }
+    }), showRationale && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: model.rationale
+    })), model.correctness && model.feedback && !showCorrect && /*#__PURE__*/_react.default.createElement(_renderUi.Feedback, {
+      correctness: model.correctness,
+      feedback: model.feedback
+    }), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      title: alertTitle,
+      text: alertMessage,
+      open: showMaxChoiceAlert,
+      onCloseText: onCloseText,
+      onClose: () => this.setState({
+        showMaxChoiceAlert: false
+      })
+    }));
+  }
+}
 exports.Categorize = Categorize;
-(0, _defineProperty2["default"])(Categorize, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  model: _propTypes["default"].object,
-  session: _propTypes["default"].shape({
-    answers: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-      choice: _propTypes["default"].string,
-      category: _propTypes["default"].string
+(0, _defineProperty2.default)(Categorize, "propTypes", {
+  model: _propTypes.default.object,
+  session: _propTypes.default.shape({
+    answers: _propTypes.default.arrayOf(_propTypes.default.shape({
+      choice: _propTypes.default.string,
+      category: _propTypes.default.string
     }))
   }),
-  onAnswersChange: _propTypes["default"].func.isRequired,
-  onShowCorrectToggle: _propTypes["default"].func.isRequired
+  onAnswersChange: _propTypes.default.func.isRequired,
+  onShowCorrectToggle: _propTypes.default.func.isRequired,
+  pauseMathObserver: _propTypes.default.func,
+  resumeMathObserver: _propTypes.default.func
 });
-(0, _defineProperty2["default"])(Categorize, "defaultProps", {
+(0, _defineProperty2.default)(Categorize, "defaultProps", {
   disabled: false
 });
-
-var CategorizeProvider = /*#__PURE__*/function (_React$Component2) {
-  (0, _inherits2["default"])(CategorizeProvider, _React$Component2);
-
-  var _super2 = _createSuper(CategorizeProvider);
-
-  function CategorizeProvider(props) {
-    var _this3;
-
-    (0, _classCallCheck2["default"])(this, CategorizeProvider);
-    _this3 = _super2.call(this, props);
-    _this3.uid = _drag.uid.generateId();
-    return _this3;
+class CategorizeProvider extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "onDragStart", event => {
+      const {
+        active
+      } = event;
+      const {
+        pauseMathObserver
+      } = this.props;
+      if (pauseMathObserver) {
+        pauseMathObserver();
+      }
+      if (active?.data?.current) {
+        this.setState({
+          activeDragItem: active.data.current
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "onDragEnd", event => {
+      const {
+        active,
+        over
+      } = event;
+      const {
+        resumeMathObserver
+      } = this.props;
+      this.setState({
+        activeDragItem: null
+      });
+      if (resumeMathObserver) {
+        resumeMathObserver();
+      }
+      if (!over || !active) {
+        return;
+      }
+      const draggedItem = active.data.current;
+      if (draggedItem && draggedItem.type === 'choice') {
+        const choiceData = {
+          id: draggedItem.id,
+          categoryId: draggedItem.categoryId,
+          choiceIndex: draggedItem.choiceIndex,
+          value: draggedItem.value,
+          itemType: draggedItem.itemType
+        };
+        if (over.id === 'choices-board') {
+          if (this.categorizeRef && this.categorizeRef.removeChoice && draggedItem.categoryId) {
+            this.categorizeRef.removeChoice(choiceData);
+          }
+        } else {
+          const categoryId = over.id;
+          if (this.categorizeRef && this.categorizeRef.dropChoice) {
+            this.categorizeRef.dropChoice(categoryId, choiceData);
+          }
+        }
+      }
+    });
+    (0, _defineProperty2.default)(this, "renderDragOverlay", () => {
+      const {
+        activeDragItem
+      } = this.state;
+      const {
+        model
+      } = this.props;
+      if (!activeDragItem) return null;
+      if (activeDragItem.type === 'choice') {
+        const choice = model.choices?.find(c => c.id === activeDragItem.id);
+        if (choice) {
+          return /*#__PURE__*/_react.default.createElement(_choice.default, (0, _extends2.default)({
+            key: choice.id,
+            id: choice.id
+          }, choice));
+        }
+      }
+      return null;
+    });
+    this.uid = _drag.uid.generateId();
+    this.state = {
+      activeDragItem: null
+    };
   }
-
-  (0, _createClass2["default"])(CategorizeProvider, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react["default"].createElement(_drag.uid.Provider, {
-        value: this.uid
-      }, /*#__PURE__*/_react["default"].createElement(Categorize, this.props));
-    }
-  }]);
-  return CategorizeProvider;
-}(_react["default"].Component);
-
-var styles = function styles(theme) {
-  return {
-    mainContainer: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
-      position: 'relative'
-    },
-    note: {
-      marginBottom: theme.spacing.unit * 2
-    },
-    categorize: {
-      marginBottom: theme.spacing.unit,
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    collapsible: {
-      paddingBottom: theme.spacing.unit * 2
-    }
-  };
-};
-
-var _default = (0, _drag.withDragContext)((0, _styles.withStyles)(styles)(CategorizeProvider));
-
-exports["default"] = _default;
+  render() {
+    return /*#__PURE__*/_react.default.createElement(_drag.DragProvider, {
+      onDragStart: this.onDragStart,
+      onDragEnd: this.onDragEnd
+    }, /*#__PURE__*/_react.default.createElement(_drag.uid.Provider, {
+      value: this.uid
+    }, /*#__PURE__*/_react.default.createElement(Categorize, (0, _extends2.default)({
+      ref: ref => this.categorizeRef = ref
+    }, this.props)), /*#__PURE__*/_react.default.createElement(_core.DragOverlay, null, /*#__PURE__*/_react.default.createElement(DragPreviewWrapper, null, this.renderDragOverlay()))));
+  }
+}
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)(({
+  theme
+}) => ({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  position: 'relative'
+}));
+const StyledNote = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const StyledCategorize = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(1),
+  display: 'flex',
+  flexDirection: 'column'
+}));
+const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  paddingBottom: theme.spacing(2)
+}));
+var _default = exports.default = CategorizeProvider;
 //# sourceMappingURL=index.js.map