@pie-element/match-list 5.3.4-next.0 → 6.0.0-beta.0

package/lib/answer.js

@@ -1,313 +1,266 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.DropAnswer = exports.DragAnswer = exports.Answer = 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.Answer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _reactDnd = require("react-dnd");
-
+var _core = require("@dnd-kit/core");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _debug = _interopRequireDefault(require("debug"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _drag = require("@pie-lib/drag");
-
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-
 var _renderUi = require("@pie-lib/render-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 log = (0, _debug["default"])('pie-elements:match-title:answer');
-var Holder = (0, _styles.withStyles)(function (theme) {
-  return {
-    number: {
-      width: '100%',
-      fontSize: '18px',
-      textAlign: 'center',
-      color: "rgba(".concat(theme.palette.common.black, ", 0.6)")
-    },
-    placeholder: {
-      display: 'flex',
-      padding: '0',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: '40px'
-    }
-  };
-})(function (_ref) {
-  var classes = _ref.classes,
-      index = _ref.index,
-      isOver = _ref.isOver,
-      disabled = _ref.disabled;
-  return /*#__PURE__*/_react["default"].createElement(_drag.PlaceHolder, {
-    className: classes.placeholder,
-    disabled: disabled,
-    isOver: isOver
-  }, index !== undefined && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.number
-  }, index));
-});
+const log = (0, _debug.default)('pie-elements:match-title:answer');
+const HolderNumber = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  width: '100%',
+  fontSize: '18px',
+  textAlign: 'center',
+  color: `rgba(${theme.palette.common.black}, 0.6)`
+}));
+const Holder = ({
+  index,
+  isOver,
+  disabled,
+  type
+}) => /*#__PURE__*/_react.default.createElement(_drag.PlaceHolder, {
+  extraStyles: {
+    display: 'flex',
+    padding: '0',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '40px'
+  },
+  disabled: disabled,
+  isOver: isOver,
+  type: type
+}, index !== undefined && /*#__PURE__*/_react.default.createElement(HolderNumber, null, index));
 Holder.propTypes = {
-  index: _propTypes["default"].number,
-  isOver: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool
+  index: _propTypes.default.number,
+  isOver: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  type: _propTypes.default.string
 };
-var AnswerContent = (0, _styles.withStyles)(function (theme) {
-  return {
-    over: {
-      opacity: 0.2
-    },
-    answerContent: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.white(),
-      border: "1px solid ".concat(theme.palette.grey[400]),
-      cursor: 'pointer',
-      width: '100%',
-      padding: '10px',
-      boxSizing: 'border-box',
-      overflow: 'hidden',
-      transition: 'opacity 200ms linear',
-      wordBreak: 'break-word',
-      // Added for touch devices, for image content.
-      // This will prevent the context menu from appearing and not allowing other interactions with the image.
-      // If interactions with the image in the token will be requested we should handle only the context Menu.
-      pointerEvents: 'none'
-    },
-    dragging: {
-      opacity: 0.5
-    },
-    disabled: {
-      backgroundColor: _renderUi.color.white(),
-      cursor: 'not-allowed'
-    },
-    incorrect: {
-      border: "1px solid ".concat(_renderUi.color.incorrect())
-    },
-    correct: {
-      border: "1px solid ".concat(_renderUi.color.correct())
-    }
-  };
-})(function (props) {
-  var classes = props.classes,
-      isDragging = props.isDragging,
-      isOver = props.isOver,
-      title = props.title,
-      disabled = props.disabled,
-      empty = props.empty,
-      outcome = props.outcome,
-      guideIndex = props.guideIndex,
-      type = props.type;
-
+const AnswerContentContainer = (0, _styles.styled)('div')(({
+  theme,
+  isDragging,
+  isOver,
+  disabled,
+  outcome
+}) => ({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.white(),
+  border: `1px solid ${outcome === 'correct' ? _renderUi.color.correct() : outcome === 'incorrect' ? _renderUi.color.incorrect() : theme.palette.grey[400]}`,
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  width: '100%',
+  padding: '10px',
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  transition: 'opacity 200ms linear',
+  wordBreak: 'break-word',
+  opacity: isDragging && !disabled ? 0.5 : isOver && !disabled ? 0.2 : 1
+}));
+const AnswerContent = props => {
+  const {
+    isDragging,
+    isOver,
+    title,
+    disabled,
+    empty,
+    outcome,
+    guideIndex,
+    type
+  } = props;
   if (empty) {
-    return /*#__PURE__*/_react["default"].createElement(Holder, {
+    return /*#__PURE__*/_react.default.createElement(Holder, {
       index: guideIndex,
       isOver: isOver,
       disabled: disabled,
       type: type
     });
   } else {
-    var names = (0, _classnames["default"])(classes.answerContent, isDragging && !disabled && classes.dragging, isOver && !disabled && classes.over, disabled && classes.disabled, outcome && classes[outcome]);
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: names,
+    return /*#__PURE__*/_react.default.createElement(AnswerContentContainer, {
+      isDragging: isDragging,
+      isOver: isOver,
+      disabled: disabled,
+      outcome: outcome,
       dangerouslySetInnerHTML: {
         __html: title
       }
     });
   }
-});
-
-var Answer = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Answer, _React$Component);
-
-  var _super = _createSuper(Answer);
-
-  function Answer() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Answer);
-
-    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), "handleTouchStart", function (e) {
-      e.preventDefault();
+};
+const AnswerContainer = (0, _styles.styled)('div')(({
+  correct,
+  theme
+}) => ({
+  boxSizing: 'border-box',
+  minHeight: 40,
+  minWidth: '200px',
+  overflow: 'hidden',
+  margin: theme.spacing(0.5),
+  padding: '0px',
+  textAlign: 'center',
+  height: 'initial',
+  border: correct === true ? `1px solid var(--feedback-correct-bg-color, ${_renderUi.color.correct()})` : correct === false ? `1px solid var(--feedback-incorrect-bg-color, ${_renderUi.color.incorrect()})` : 'none'
+}));
+class Answer extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "handleTouchStart", e => {
+      // do NOT call e.preventDefault() here — it prevents pointer events necessary for dnd-kit.
+      // Keep this handler empty or remove it if you don't need it.
+      // e.preventDefault();
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Answer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.ref) {
-        this.ref.addEventListener('touchstart', this.handleTouchStart, {
-          passive: false
-        });
-      }
+  componentDidMount() {
+    if (this.ref) {
+      // NOTE: preventing default on touchstart can block dnd-kit pointer handling on some devices.
+      // Consider removing this if you have issues on touch devices.
+      this.ref.addEventListener('touchstart', this.handleTouchStart, {
+        passive: true
+      });
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.ref) {
-        this.ref.removeEventListener('touchstart', this.handleTouchStart);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classNames,
-          _this2 = this;
-
-      var _this$props = this.props,
-          id = _this$props.id,
-          title = _this$props.title,
-          isDragging = _this$props.isDragging,
-          className = _this$props.className,
-          connectDragSource = _this$props.connectDragSource,
-          connectDropTarget = _this$props.connectDropTarget,
-          disabled = _this$props.disabled,
-          classes = _this$props.classes,
-          isOver = _this$props.isOver,
-          type = _this$props.type,
-          correct = _this$props.correct;
-      log('[render], props: ', this.props);
-      var name = (0, _classnames["default"])(className, classes.answer, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.correct, correct === true), (0, _defineProperty2["default"])(_classNames, classes.incorrect, correct === false), _classNames));
-
-      var content = /*#__PURE__*/_react["default"].createElement("div", {
-        className: name,
-        ref: function ref(_ref2) {
-          return _this2.ref = _ref2;
-        }
-      }, /*#__PURE__*/_react["default"].createElement(AnswerContent, {
-        title: title,
-        id: id,
-        isOver: isOver,
-        empty: (0, _isEmpty["default"])(title),
-        isDragging: isDragging,
-        disabled: disabled,
-        type: type
-      }));
-
-      var droppable = connectDropTarget ? connectDropTarget(content) : content;
-      return connectDragSource ? connectDragSource(droppable) : droppable;
-    }
-  }]);
-  return Answer;
-}(_react["default"].Component);
-
-exports.Answer = Answer;
-(0, _defineProperty2["default"])(Answer, "propTypes", {
-  className: _propTypes["default"].string,
-  connectDragSource: _propTypes["default"].func,
-  connectDropTarget: _propTypes["default"].func,
-  isDragging: _propTypes["default"].bool.isRequired,
-  id: _propTypes["default"].any,
-  title: _propTypes["default"].string,
-  isOver: _propTypes["default"].bool,
-  classes: _propTypes["default"].object.isRequired,
-  empty: _propTypes["default"].bool,
-  type: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  correct: _propTypes["default"].bool
-});
-var StyledAnswer = (0, _styles.withStyles)({
-  answer: {
-    boxSizing: 'border-box',
-    minHeight: 40,
-    minWidth: '100px',
-    overflow: 'hidden',
-    margin: '10px 0',
-    padding: '0px',
-    textAlign: 'center'
-  },
-  incorrect: {
-    border: "1px solid var(--feedback-incorrect-bg-color, ".concat(_renderUi.color.incorrect(), ")")
-  },
-  correct: {
-    border: "1px solid var(--feedback-correct-bg-color, ".concat(_renderUi.color.correct(), ")")
   }
-})(Answer);
-var answerTarget = {
-  drop: function drop(props, monitor) {
-    var draggedItem = monitor.getItem();
-
-    if (draggedItem.instanceId === props.instanceId) {
-      props.onPlaceAnswer(props.promptId, draggedItem.id);
+  componentWillUnmount() {
+    if (this.ref) {
+      this.ref.removeEventListener('touchstart', this.handleTouchStart);
     }
-  },
-  canDrop: function canDrop(props, monitor) {
-    var draggedItem = monitor.getItem();
-    return draggedItem.instanceId === props.instanceId;
   }
-};
-var DropAnswer = (0, _reactDnd.DropTarget)('Answer', answerTarget, function (connect, monitor) {
-  return {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver()
-  };
-})(StyledAnswer);
-exports.DropAnswer = DropAnswer;
-var answerSource = {
-  canDrag: function canDrag(props) {
-    return props.draggable && !props.disabled;
-  },
-  beginDrag: function beginDrag(props) {
-    return {
-      id: props.id,
-      type: props.type,
-      instanceId: props.instanceId,
+  render() {
+    const {
+      id,
+      title,
+      isDragging = false,
+      className,
+      disabled,
+      isOver = false,
+      type,
+      correct
+    } = this.props;
+    log('[render], props: ', this.props);
+    return /*#__PURE__*/_react.default.createElement(AnswerContainer, {
+      correct: correct,
+      className: className,
+      ref: ref => this.ref = ref
+    }, /*#__PURE__*/_react.default.createElement(AnswerContent, {
+      title: title,
+      id: id,
+      isOver: isOver,
+      empty: (0, _isEmpty.default)(title),
+      isDragging: isDragging,
+      disabled: disabled,
+      type: type
+    }));
+  }
+}
+exports.Answer = Answer;
+(0, _defineProperty2.default)(Answer, "propTypes", {
+  className: _propTypes.default.string,
+  isDragging: _propTypes.default.bool,
+  id: _propTypes.default.any,
+  title: _propTypes.default.string,
+  isOver: _propTypes.default.bool,
+  empty: _propTypes.default.bool,
+  type: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  correct: _propTypes.default.bool
+});
+function DragAndDropAnswer(props) {
+  const {
+    id,
+    instanceId,
+    promptId,
+    draggable = true,
+    disabled = false,
+    type
+  } = props;
+  const dragId = `${type || 'answer'}-${id}`;
+  // droppable only if promptId exists
+  const dropId = promptId ? `drop-${promptId}` : undefined;
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragRef,
+    transform,
+    transition,
+    isDragging
+  } = (0, _core.useDraggable)({
+    id: dragId,
+    data: {
+      type: type || 'answer',
+      id,
+      instanceId,
       value: props.title,
-      promptId: props.promptId
-    };
-  },
-  endDrag: function endDrag(props, monitor) {
-    if (!monitor.didDrop()) {
-      if (props.type === 'target') {
-        props.onRemoveChoice(monitor.getItem());
+      promptId
+    },
+    disabled: !draggable || disabled
+  });
+  const droppable = (0, _core.useDroppable)({
+    id: dropId,
+    data: dropId ? {
+      type: 'drop-zone',
+      promptId,
+      instanceId
+    } : undefined,
+    disabled: disabled || !dropId
+  });
+  const setDropRef = droppable.setNodeRef;
+  const isOver = droppable.isOver;
+
+  // compute style: apply transform to the element that actually moves
+  const transformStyle = transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined;
+
+  // If this item is a drop-zone (prompt slot), we render an outer droppable wrapper.
+  // For droppable wrapper we apply style to the outer wrapper
+  if (dropId) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: setDropRef,
+      style: {
+        flex: 1,
+        transform: transformStyle,
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+        backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent'
       }
-    }
+    }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+      ref: setDragRef
+    }, listeners, attributes), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
+      isDragging: isDragging,
+      isOver: isOver
+    }))));
   }
+
+  // if there is NO dropId (this is a choice / draggable-only), render only draggable node and apply transform to it.
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setDragRef
+  }, listeners, attributes, {
+    style: {
+      transform: transformStyle,
+      transition,
+      cursor: disabled ? 'not-allowed' : 'grab',
+      opacity: isDragging ? 0.5 : 1,
+      touchAction: draggable && !disabled ? 'none' : 'auto'
+    }
+  }), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
+    isDragging: isDragging,
+    isOver: false
+  })));
+}
+DragAndDropAnswer.propTypes = {
+  id: _propTypes.default.any,
+  instanceId: _propTypes.default.string,
+  promptId: _propTypes.default.any,
+  title: _propTypes.default.string,
+  draggable: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  type: _propTypes.default.string
 };
-var DragAnswer = (0, _reactDnd.DragSource)('Answer', answerSource, function (connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging()
-  };
-})(StyledAnswer);
-exports.DragAnswer = DragAnswer;
-var DragAndDropAnswer = (0, _reactDnd.DragSource)('Answer', answerSource, function (connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging()
-  };
-})(DropAnswer);
-var _default = DragAndDropAnswer;
-exports["default"] = _default;
+var _default = exports.default = DragAndDropAnswer;
 //# sourceMappingURL=answer.js.map

package/lib/answer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/answer.js"],"names":["log","Holder","theme","number","width","fontSize","textAlign","color","palette","common","black","placeholder","display","padding","alignItems","justifyContent","height","classes","index","isOver","disabled","undefined","propTypes","PropTypes","bool","AnswerContent","over","opacity","answerContent","text","backgroundColor","white","border","grey","cursor","boxSizing","overflow","transition","wordBreak","pointerEvents","dragging","incorrect","correct","props","isDragging","title","empty","outcome","guideIndex","type","names","__html","Answer","e","preventDefault","ref","addEventListener","handleTouchStart","passive","removeEventListener","id","className","connectDragSource","connectDropTarget","name","answer","content","droppable","React","Component","string","func","isRequired","any","object","StyledAnswer","minHeight","minWidth","margin","answerTarget","drop","monitor","draggedItem","getItem","instanceId","onPlaceAnswer","promptId","canDrop","DropAnswer","connect","dropTarget","answerSource","canDrag","draggable","beginDrag","value","endDrag","didDrop","onRemoveChoice","DragAnswer","dragSource","DragAndDropAnswer"],"mappings":"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","sourcesContent":["import { DragSource, DropTarget } from 'react-dnd';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport { PlaceHolder } from '@pie-lib/drag';\nimport isEmpty from 'lodash/isEmpty';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:match-title:answer');\n\nconst Holder = withStyles((theme) => ({\n  number: {\n    width: '100%',\n    fontSize: '18px',\n    textAlign: 'center',\n    color: `rgba(${theme.palette.common.black}, 0.6)`,\n  },\n  placeholder: {\n    display: 'flex',\n    padding: '0',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '40px',\n  },\n}))(({ classes, index, isOver, disabled }) => (\n  <PlaceHolder className={classes.placeholder} disabled={disabled} isOver={isOver}>\n    {index !== undefined && <div className={classes.number}>{index}</div>}\n  </PlaceHolder>\n));\n\nHolder.propTypes = {\n  index: PropTypes.number,\n  isOver: PropTypes.bool,\n  disabled: PropTypes.bool,\n};\n\nconst AnswerContent = withStyles((theme) => ({\n  over: {\n    opacity: 0.2,\n  },\n  answerContent: {\n    color: color.text(),\n    backgroundColor: color.white(),\n    border: `1px solid ${theme.palette.grey[400]}`,\n    cursor: 'pointer',\n    width: '100%',\n    padding: '10px',\n    boxSizing: 'border-box',\n    overflow: 'hidden',\n    transition: 'opacity 200ms linear',\n    wordBreak: 'break-word',\n    // Added for touch devices, for image content.\n    // This will prevent the context menu from appearing and not allowing other interactions with the image.\n    // If interactions with the image in the token will be requested we should handle only the context Menu.\n    pointerEvents: 'none',\n  },\n  dragging: {\n    opacity: 0.5,\n  },\n  disabled: {\n    backgroundColor: color.white(),\n    cursor: 'not-allowed',\n  },\n  incorrect: {\n    border: `1px solid ${color.incorrect()}`,\n  },\n  correct: {\n    border: `1px solid ${color.correct()}`,\n  },\n}))((props) => {\n  const { classes, isDragging, isOver, title, disabled, empty, outcome, guideIndex, type } = props;\n\n  if (empty) {\n    return <Holder index={guideIndex} isOver={isOver} disabled={disabled} type={type} />;\n  } else {\n    const names = classNames(\n      classes.answerContent,\n      isDragging && !disabled && classes.dragging,\n      isOver && !disabled && classes.over,\n      disabled && classes.disabled,\n      outcome && classes[outcome],\n    );\n\n    return <div className={names} dangerouslySetInnerHTML={{ __html: title }} />;\n  }\n});\n\nexport class Answer extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    connectDragSource: PropTypes.func,\n    connectDropTarget: PropTypes.func,\n    isDragging: PropTypes.bool.isRequired,\n    id: PropTypes.any,\n    title: PropTypes.string,\n    isOver: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    empty: PropTypes.bool,\n    type: PropTypes.string,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n\n  componentDidMount() {\n    if (this.ref) {\n      this.ref.addEventListener('touchstart', this.handleTouchStart, { passive: false });\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.ref) {\n      this.ref.removeEventListener('touchstart', this.handleTouchStart);\n    }\n  }\n\n  handleTouchStart = (e) => {\n    e.preventDefault();\n  };\n\n  render() {\n    const {\n      id,\n      title,\n      isDragging,\n      className,\n      connectDragSource,\n      connectDropTarget,\n      disabled,\n      classes,\n      isOver,\n      type,\n      correct,\n    } = this.props;\n\n    log('[render], props: ', this.props);\n\n    const name = classNames(className, classes.answer, {\n      [classes.correct]: correct === true,\n      [classes.incorrect]: correct === false,\n    });\n\n    const content = (\n      <div className={name} ref={(ref) => (this.ref = ref)}>\n        <AnswerContent\n          title={title}\n          id={id}\n          isOver={isOver}\n          empty={isEmpty(title)}\n          isDragging={isDragging}\n          disabled={disabled}\n          type={type}\n        />\n      </div>\n    );\n    const droppable = connectDropTarget ? connectDropTarget(content) : content;\n\n    return connectDragSource ? connectDragSource(droppable) : droppable;\n  }\n}\n\nconst StyledAnswer = withStyles({\n  answer: {\n    boxSizing: 'border-box',\n    minHeight: 40,\n    minWidth: '100px',\n    overflow: 'hidden',\n    margin: '10px 0',\n    padding: '0px',\n    textAlign: 'center',\n  },\n  incorrect: {\n    border: `1px solid var(--feedback-incorrect-bg-color, ${color.incorrect()})`,\n  },\n  correct: {\n    border: `1px solid var(--feedback-correct-bg-color, ${color.correct()})`,\n  },\n})(Answer);\n\nconst answerTarget = {\n  drop(props, monitor) {\n    const draggedItem = monitor.getItem();\n\n    if (draggedItem.instanceId === props.instanceId) {\n      props.onPlaceAnswer(props.promptId, draggedItem.id);\n    }\n  },\n  canDrop(props, monitor) {\n    const draggedItem = monitor.getItem();\n\n    return draggedItem.instanceId === props.instanceId;\n  },\n};\n\nexport const DropAnswer = DropTarget('Answer', answerTarget, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(StyledAnswer);\n\nconst answerSource = {\n  canDrag(props) {\n    return props.draggable && !props.disabled;\n  },\n  beginDrag(props) {\n    return {\n      id: props.id,\n      type: props.type,\n      instanceId: props.instanceId,\n      value: props.title,\n      promptId: props.promptId,\n    };\n  },\n  endDrag(props, monitor) {\n    if (!monitor.didDrop()) {\n      if (props.type === 'target') {\n        props.onRemoveChoice(monitor.getItem());\n      }\n    }\n  },\n};\n\nexport const DragAnswer = DragSource('Answer', answerSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(StyledAnswer);\n\nconst DragAndDropAnswer = DragSource('Answer', answerSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(DropAnswer);\n\nexport default DragAndDropAnswer;\n"],"file":"answer.js"}
+{"version":3,"file":"answer.js","names":["_core","require","_propTypes","_interopRequireDefault","_react","_debug","_styles","_drag","_isEmpty","_renderUi","log","debug","HolderNumber","styled","theme","width","fontSize","textAlign","color","palette","common","black","Holder","index","isOver","disabled","type","default","createElement","PlaceHolder","extraStyles","display","padding","alignItems","justifyContent","height","undefined","propTypes","PropTypes","number","bool","string","AnswerContentContainer","isDragging","outcome","text","backgroundColor","white","border","correct","incorrect","grey","cursor","boxSizing","overflow","transition","wordBreak","opacity","AnswerContent","props","title","empty","guideIndex","dangerouslySetInnerHTML","__html","AnswerContainer","minHeight","minWidth","margin","spacing","Answer","React","Component","constructor","args","_defineProperty2","e","componentDidMount","ref","addEventListener","handleTouchStart","passive","componentWillUnmount","removeEventListener","render","id","className","isEmpty","exports","any","DragAndDropAnswer","instanceId","promptId","draggable","dragId","dropId","attributes","listeners","setNodeRef","setDragRef","transform","useDraggable","data","value","droppable","useDroppable","setDropRef","transformStyle","x","y","style","flex","_extends2","touchAction","_default"],"sources":["../src/answer.jsx"],"sourcesContent":["import { useDraggable, useDroppable } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport { styled } from '@mui/material/styles';\nimport { PlaceHolder } from '@pie-lib/drag';\nimport isEmpty from 'lodash/isEmpty';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:match-title:answer');\n\nconst HolderNumber = styled('div')(({ theme }) => ({\n  width: '100%',\n  fontSize: '18px',\n  textAlign: 'center',\n  color: `rgba(${theme.palette.common.black}, 0.6)`,\n}));\n\nconst Holder = ({ index, isOver, disabled, type }) => (\n  <PlaceHolder\n    extraStyles={{\n      display: 'flex',\n      padding: '0',\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: '40px',\n    }}\n    disabled={disabled}\n    isOver={isOver}\n    type={type}\n  >\n    {index !== undefined && <HolderNumber>{index}</HolderNumber>}\n  </PlaceHolder>\n);\n\nHolder.propTypes = {\n  index: PropTypes.number,\n  isOver: PropTypes.bool,\n  disabled: PropTypes.bool,\n  type: PropTypes.string,\n};\n\nconst AnswerContentContainer = styled('div')(({ theme, isDragging, isOver, disabled, outcome }) => ({\n  color: color.text(),\n  backgroundColor: color.white(),\n  border: `1px solid ${outcome === 'correct' ? color.correct() :\n    outcome === 'incorrect' ? color.incorrect() :\n      theme.palette.grey[400]\n    }`,\n  cursor: disabled ? 'not-allowed' : 'pointer',\n  width: '100%',\n  padding: '10px',\n  boxSizing: 'border-box',\n  overflow: 'hidden',\n  transition: 'opacity 200ms linear',\n  wordBreak: 'break-word',\n  opacity: isDragging && !disabled ? 0.5 : isOver && !disabled ? 0.2 : 1,\n}));\n\nconst AnswerContent = (props) => {\n  const { isDragging, isOver, title, disabled, empty, outcome, guideIndex, type } = props;\n\n  if (empty) {\n    return <Holder\n      index={guideIndex}\n      isOver={isOver}\n      disabled={disabled}\n      type={type}\n\n    />;\n  } else {\n    return (\n      <AnswerContentContainer\n        isDragging={isDragging}\n        isOver={isOver}\n        disabled={disabled}\n        outcome={outcome}\n        dangerouslySetInnerHTML={{ __html: title }}\n      />\n    );\n  }\n};\n\nconst AnswerContainer = styled('div')(({ correct, theme }) => ({\n  boxSizing: 'border-box',\n  minHeight: 40,\n  minWidth: '200px',\n  overflow: 'hidden',\n  margin: theme.spacing(0.5),\n  padding: '0px',\n  textAlign: 'center',\n  height: 'initial',\n  border: correct === true ? `1px solid var(--feedback-correct-bg-color, ${color.correct()})` :\n    correct === false ? `1px solid var(--feedback-incorrect-bg-color, ${color.incorrect()})` :\n      'none',\n}));\n\nexport class Answer extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    isDragging: PropTypes.bool,\n    id: PropTypes.any,\n    title: PropTypes.string,\n    isOver: PropTypes.bool,\n    empty: PropTypes.bool,\n    type: PropTypes.string,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n\n  componentDidMount() {\n    if (this.ref) {\n      // NOTE: preventing default on touchstart can block dnd-kit pointer handling on some devices.\n      // Consider removing this if you have issues on touch devices.\n      this.ref.addEventListener('touchstart', this.handleTouchStart, { passive: true });\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.ref) {\n      this.ref.removeEventListener('touchstart', this.handleTouchStart);\n    }\n  }\n\n  handleTouchStart = (e) => {\n    // do NOT call e.preventDefault() here — it prevents pointer events necessary for dnd-kit.\n    // Keep this handler empty or remove it if you don't need it.\n    // e.preventDefault();\n  };\n\n  render() {\n    const {\n      id,\n      title,\n      isDragging = false,\n      className,\n      disabled,\n      isOver = false,\n      type,\n      correct,\n    } = this.props;\n\n    log('[render], props: ', this.props);\n\n    return (\n      <AnswerContainer correct={correct} className={className} ref={(ref) => (this.ref = ref)}>\n        <AnswerContent\n          title={title}\n          id={id}\n          isOver={isOver}\n          empty={isEmpty(title)}\n          isDragging={isDragging}\n          disabled={disabled}\n          type={type}\n        />\n      </AnswerContainer>\n    );\n  }\n}\n\nfunction DragAndDropAnswer(props) {\n  const { id, instanceId, promptId, draggable = true, disabled = false, type } = props;\n\n  const dragId = `${type || 'answer'}-${id}`;\n  // droppable only if promptId exists\n  const dropId = promptId ? `drop-${promptId}` : undefined;\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef: setDragRef,\n    transform,\n    transition,\n    isDragging,\n  } = useDraggable({\n    id: dragId,\n    data: {\n      type: type || 'answer',\n      id,\n      instanceId,\n      value: props.title,\n      promptId,\n    },\n    disabled: !draggable || disabled,\n  });\n\n  const droppable = useDroppable({\n    id: dropId,\n    data: dropId ? { type: 'drop-zone', promptId, instanceId } : undefined,\n    disabled: disabled || !dropId,\n  });\n\n  const setDropRef = droppable.setNodeRef;\n  const isOver = droppable.isOver;\n\n  // compute style: apply transform to the element that actually moves\n  const transformStyle = transform\n    ? `translate3d(${transform.x}px, ${transform.y}px, 0)`\n    : undefined;\n\n  // If this item is a drop-zone (prompt slot), we render an outer droppable wrapper.\n  // For droppable wrapper we apply style to the outer wrapper\n  if (dropId) {\n    return (\n      <div\n        ref={setDropRef}\n        style={{\n          flex: 1,\n          transform: transformStyle,\n          transition,\n          opacity: isDragging ? 0.5 : 1,\n          backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent',\n        }}\n      >\n        <div ref={setDragRef} {...listeners} {...attributes}>\n          <Answer {...props} isDragging={isDragging} isOver={isOver} />\n        </div>\n      </div>\n    );\n  }\n\n  // if there is NO dropId (this is a choice / draggable-only), render only draggable node and apply transform to it.\n  return (\n    <div\n      ref={setDragRef}\n      {...listeners}\n      {...attributes}\n      style={{\n        transform: transformStyle,\n        transition,\n        cursor: disabled ? 'not-allowed' : 'grab',\n        opacity: isDragging ? 0.5 : 1,\n        touchAction: draggable && !disabled ? 'none' : 'auto',\n      }}\n    >\n      <Answer {...props} isDragging={isDragging} isOver={false} />\n    </div>\n  );\n}\n\nDragAndDropAnswer.propTypes = {\n  id: PropTypes.any,\n  instanceId: PropTypes.string,\n  promptId: PropTypes.any,\n  title: PropTypes.string,\n  draggable: PropTypes.bool,\n  disabled: PropTypes.bool,\n  type: PropTypes.string,\n};\n\nexport default DragAndDropAnswer;\n"],"mappings":"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","ignoreList":[]}