@pie-lib/drag 2.22.2-next.0 → 2.23.0-mui-update.0

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AACA;;AACA;;AACA","sourcesContent":["import { DragSource, DropTarget } from 'react-dnd';\n\nimport PlaceHolder from './placeholder';\nimport Choice from './choice';\nimport withDragContext from './with-drag-context';\nimport swap from './swap';\nimport * as uid from './uid-context';\nimport MatchDroppablePlaceholder from './match-list-dp';\nimport DragDroppablePlaceholder from './drag-in-the-blank-dp';\nimport ICADroppablePlaceholder from './ica-dp';\n\nexport {\n  PlaceHolder,\n  MatchDroppablePlaceholder,\n  DragDroppablePlaceholder,\n  ICADroppablePlaceholder,\n  withDragContext,\n  Choice,\n  swap,\n  uid,\n  DragSource,\n  DropTarget,\n};\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_placeholder","_interopRequireDefault","require","_draggableChoice","_dragProvider","_swap","uid","_interopRequireWildcard","exports","_matchListDp","_dragInTheBlankDp","_icaDp","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sources":["../src/index.js"],"sourcesContent":["import PlaceHolder from './placeholder';\nimport DraggableChoice   from './draggable-choice';\nimport DragProvider from './drag-provider';\nimport swap from './swap';\nimport * as uid from './uid-context';\nimport MatchDroppablePlaceholder from './match-list-dp';\nimport DragDroppablePlaceholder from './drag-in-the-blank-dp';\nimport ICADroppablePlaceholder from './ica-dp';\n\nexport {\n  PlaceHolder,\n  MatchDroppablePlaceholder,\n  DragDroppablePlaceholder,\n  ICADroppablePlaceholder,\n  DragProvider,\n  DraggableChoice,\n  swap,\n  uid,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,GAAA,GAAAC,uBAAA,CAAAL,OAAA;AAAqCM,OAAA,CAAAF,GAAA,GAAAA,GAAA;AACrC,IAAAG,YAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,iBAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,MAAA,GAAAV,sBAAA,CAAAC,OAAA;AAA+C,SAAAK,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,wBAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,mBAAAT,CAAA,iBAAAA,CAAA,gBAAAU,OAAA,CAAAV,CAAA,0BAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA","ignoreList":[]}

package/lib/match-list-dp.js

@@ -1,37 +1,49 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.spec = exports["default"] = void 0;
-
-var _reactDnd = require("react-dnd");
-
+exports.MatchListDroppable = MatchListDroppable;
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _droppablePlaceholder = require("./droppable-placeholder");
+var _excluded = ["id", "children", "disabled", "onRemoveAnswer"];
+// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
+// This component now just wraps DroppablePlaceholder with match-list specific logic
 
-var _dragType = _interopRequireDefault(require("./drag-type"));
-
-var spec = {
-  canDrop: function canDrop(props) {
-    return !props.disabled;
-  },
-  drop: function drop(props, monitor) {
-    var item = monitor.getItem();
+function MatchListDroppable(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    onRemoveAnswer = _ref.onRemoveAnswer,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  // The actual drop handling will be managed by the parent component
+  // through the DragProvider's onDragEnd callback
+  // The onRemoveAnswer logic should be handled in the parent's onDragEnd:
+  // 
+  // const handleDragEnd = (event) => {
+  //   if (event.over && event.active) {
+  //     const item = event.active.data.current;
+  //     if (onRemoveAnswer) {
+  //       onRemoveAnswer(item.promptId);
+  //     }
+  //   }
+  // };
 
-    if (props.onRemoveAnswer) {
-      props.onRemoveAnswer(item.promptId);
-    }
-  }
+  return /*#__PURE__*/_react["default"].createElement(_droppablePlaceholder.DroppablePlaceholder, (0, _extends2["default"])({
+    id: id,
+    disabled: disabled
+  }, rest), children);
+}
+MatchListDroppable.propTypes = {
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+  children: _propTypes["default"].node,
+  disabled: _propTypes["default"].bool,
+  onRemoveAnswer: _propTypes["default"].func
 };
-exports.spec = spec;
-var WithTarget = (0, _reactDnd.DropTarget)(_dragType["default"].types.ml, spec, function (connect, monitor) {
-  return {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver()
-  };
-})(_droppablePlaceholder.DroppablePlaceholder);
-var _default = WithTarget;
-exports["default"] = _default;
+var _default = exports["default"] = MatchListDroppable;
 //# sourceMappingURL=match-list-dp.js.map

package/lib/match-list-dp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/match-list-dp.jsx"],"names":["spec","canDrop","props","disabled","drop","monitor","item","getItem","onRemoveAnswer","promptId","WithTarget","dragType","types","ml","connect","connectDropTarget","dropTarget","isOver","DroppablePlaceholder"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,IAAI,GAAG;AAClBC,EAAAA,OAAO,EAAE,iBAACC,KAAD,EAAW;AAClB,WAAO,CAACA,KAAK,CAACC,QAAd;AACD,GAHiB;AAIlBC,EAAAA,IAAI,EAAE,cAACF,KAAD,EAAQG,OAAR,EAAoB;AACxB,QAAMC,IAAI,GAAGD,OAAO,CAACE,OAAR,EAAb;;AAEA,QAAIL,KAAK,CAACM,cAAV,EAA0B;AACxBN,MAAAA,KAAK,CAACM,cAAN,CAAqBF,IAAI,CAACG,QAA1B;AACD;AACF;AAViB,CAAb;;AAaP,IAAMC,UAAU,GAAG,0BAAWC,qBAASC,KAAT,CAAeC,EAA1B,EAA8Bb,IAA9B,EAAoC,UAACc,OAAD,EAAUT,OAAV;AAAA,SAAuB;AAC5EU,IAAAA,iBAAiB,EAAED,OAAO,CAACE,UAAR,EADyD;AAE5EC,IAAAA,MAAM,EAAEZ,OAAO,CAACY,MAAR;AAFoE,GAAvB;AAAA,CAApC,EAGfC,0CAHe,CAAnB;eAKeR,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from './droppable-placeholder';\nimport dragType from './drag-type';\n\nexport const spec = {\n  canDrop: (props) => {\n    return !props.disabled;\n  },\n  drop: (props, monitor) => {\n    const item = monitor.getItem();\n\n    if (props.onRemoveAnswer) {\n      props.onRemoveAnswer(item.promptId);\n    }\n  },\n};\n\nconst WithTarget = DropTarget(dragType.types.ml, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"match-list-dp.js"}
+{"version":3,"file":"match-list-dp.js","names":["_react","_interopRequireDefault","require","_propTypes","_droppablePlaceholder","_excluded","MatchListDroppable","_ref","id","children","disabled","onRemoveAnswer","rest","_objectWithoutProperties2","createElement","DroppablePlaceholder","_extends2","propTypes","PropTypes","oneOfType","string","number","isRequired","node","bool","func","_default","exports"],"sources":["../src/match-list-dp.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DroppablePlaceholder } from './droppable-placeholder';\n\n// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback\n// This component now just wraps DroppablePlaceholder with match-list specific logic\n\nexport function MatchListDroppable({ \n  id, \n  children, \n  disabled, \n  onRemoveAnswer,\n  ...rest \n}) {\n  // The actual drop handling will be managed by the parent component\n  // through the DragProvider's onDragEnd callback\n  // The onRemoveAnswer logic should be handled in the parent's onDragEnd:\n  // \n  // const handleDragEnd = (event) => {\n  //   if (event.over && event.active) {\n  //     const item = event.active.data.current;\n  //     if (onRemoveAnswer) {\n  //       onRemoveAnswer(item.promptId);\n  //     }\n  //   }\n  // };\n  \n  return (\n    <DroppablePlaceholder\n      id={id}\n      disabled={disabled}\n      {...rest}\n    >\n      {children}\n    </DroppablePlaceholder>\n  );\n}\n\nMatchListDroppable.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  onRemoveAnswer: PropTypes.func,\n};\n\nexport default MatchListDroppable;\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AAA+D,IAAAG,SAAA;AAE/D;AACA;;AAEO,SAASC,kBAAkBA,CAAAC,IAAA,EAM/B;EAAA,IALDC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;IACXC,IAAI,OAAAC,yBAAA,aAAAN,IAAA,EAAAF,SAAA;EAEP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAEA,oBACEL,MAAA,YAAAc,aAAA,CAACV,qBAAA,CAAAW,oBAAoB,MAAAC,SAAA;IACnBR,EAAE,EAAEA,EAAG;IACPE,QAAQ,EAAEA;EAAS,GACfE,IAAI,GAEPH,QACmB,CAAC;AAE3B;AAEAH,kBAAkB,CAACW,SAAS,GAAG;EAC7BT,EAAE,EAAEU,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACE,MAAM,EAAEF,qBAAS,CAACG,MAAM,CAAC,CAAC,CAACC,UAAU;EACxEb,QAAQ,EAAES,qBAAS,CAACK,IAAI;EACxBb,QAAQ,EAAEQ,qBAAS,CAACM,IAAI;EACxBb,cAAc,EAAEO,qBAAS,CAACO;AAC5B,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEarB,kBAAkB","ignoreList":[]}

package/lib/placeholder.js

@@ -1,75 +1,112 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.PlaceHolder = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-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; }
-
-var PlaceHolder = function PlaceHolder(props) {
+var _colors = require("@mui/material/colors");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var StyledPlaceholder = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    WebkitTouchCallout: 'none',
+    WebkitUserSelect: 'none',
+    KhtmlUserSelect: 'none',
+    MozUserSelect: 'none',
+    MsUserSelect: 'none',
+    userSelect: 'none',
+    width: '100%',
+    height: '100%',
+    background: _renderUi.color.white(),
+    transition: 'background-color 200ms linear, border-color 200ms linear',
+    boxSizing: 'border-box',
+    display: 'grid',
+    gridRowGap: "".concat(theme.spacing(1), "px"),
+    gridColumnGap: "".concat(theme.spacing(1), "px"),
+    padding: theme.spacing(1),
+    border: "2px dashed ".concat(_renderUi.color.black()),
+    '&.disabled': {
+      boxShadow: 'none',
+      background: theme.palette.background.paper
+    },
+    '&.over': {
+      border: "1px solid ".concat(_colors.grey[500]),
+      backgroundColor: "".concat(_colors.grey[300])
+    },
+    '&.board': {
+      padding: theme.spacing(1),
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      minHeight: '100px',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      touchAction: 'none',
+      backgroundColor: _renderUi.color.backgroundDark()
+    },
+    '&.categorizeBoard': {
+      padding: theme.spacing(0.5),
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      minHeight: '100px',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      touchAction: 'none',
+      backgroundColor: _renderUi.color.backgroundDark()
+    },
+    '&.verticalPool': {
+      display: 'flex',
+      flexFlow: 'column wrap'
+    }
+  };
+});
+var PlaceHolder = exports.PlaceHolder = function PlaceHolder(props) {
   var children = props.children,
-      classes = props.classes,
-      className = props.className,
-      isOver = props.isOver,
-      type = props.type,
-      grid = props.grid,
-      disabled = props.disabled,
-      choiceBoard = props.choiceBoard,
-      isCategorize = props.isCategorize,
-      isVerticalPool = props.isVerticalPool,
-      minHeight = props.minHeight;
-  var names = (0, _classnames["default"])(classes.placeholder, disabled && classes.disabled, isOver && classes.over, classes[type], className);
+    className = props.className,
+    isOver = props.isOver,
+    type = props.type,
+    grid = props.grid,
+    disabled = props.disabled,
+    choiceBoard = props.choiceBoard,
+    isCategorize = props.isCategorize,
+    isVerticalPool = props.isVerticalPool,
+    minHeight = props.minHeight;
+  var names = (0, _classnames["default"])('placeholder', disabled && 'disabled', isOver && 'over', type, className);
   var style = {};
-
   if (grid && grid.columns) {
     style.gridTemplateColumns = "repeat(".concat(grid.columns, ", 1fr)");
   }
-
   if (grid && grid.rows) {
     var repeatValue = grid.rowsRepeatValue || '1fr';
     style.gridTemplateRows = "repeat(".concat(grid.rows, ", ").concat(repeatValue, ")");
-  } // The "type" is only sent through placement-ordering / placeholder
+  }
+
+  // The "type" is only sent through placement-ordering / placeholder
   // It can be "choice" or "target"
   // We apply a different style for the "choice" type
   // For any other type, use a dashed black border and a white fill
-
-
   if (type === 'choice') {
     style.border = "1px solid ".concat(_renderUi.color.borderLight());
     style.background = _renderUi.color.backgroundDark();
   }
-
-  var boardStyle = isCategorize ? classes.categorizeBoard : classes.board;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  var boardStyle = isCategorize ? 'categorizeBoard' : 'board';
+  return /*#__PURE__*/_react["default"].createElement(StyledPlaceholder, {
     style: _objectSpread(_objectSpread({}, style), {}, {
       minHeight: minHeight
     }),
-    className: (0, _classnames["default"])(classes.noSelectStyles, choiceBoard ? boardStyle : names, isVerticalPool && classes.verticalPool)
+    className: (0, _classnames["default"])(choiceBoard ? boardStyle : names, isVerticalPool && 'verticalPool')
   }, children);
 };
-
-exports.PlaceHolder = PlaceHolder;
 PlaceHolder.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
   choiceBoard: _propTypes["default"].bool,
   grid: _propTypes["default"].shape({
     columns: _propTypes["default"].number,
@@ -87,67 +124,5 @@ PlaceHolder.propTypes = {
   isVerticalPool: _propTypes["default"].bool,
   minHeight: _propTypes["default"].number
 };
-
-var styles = function styles(theme) {
-  return {
-    noSelectStyles: {
-      WebkitTouchCallout: 'none',
-      WebkitUserSelect: 'none',
-      KhtmlUserSelect: 'none',
-      MozUserSelect: 'none',
-      MsUserSelect: 'none',
-      userSelect: 'none'
-    },
-    placeholder: {
-      width: '100%',
-      height: '100%',
-      background: _renderUi.color.white(),
-      transition: 'background-color 200ms linear, border-color 200ms linear',
-      boxSizing: 'border-box',
-      display: 'grid',
-      gridRowGap: "".concat(theme.spacing.unit, "px"),
-      gridColumnGap: "".concat(theme.spacing.unit, "px"),
-      padding: theme.spacing.unit * 1,
-      border: "2px dashed ".concat(_renderUi.color.black())
-    },
-    disabled: {
-      boxShadow: 'none',
-      background: theme.palette.background.paper
-    },
-    over: {
-      border: "1px solid ".concat(_grey["default"][500]),
-      backgroundColor: "".concat(_grey["default"][300])
-    },
-    board: {
-      padding: theme.spacing.unit,
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-      minHeight: '100px',
-      justifyContent: 'center',
-      overflow: 'hidden',
-      touchAction: 'none',
-      backgroundColor: _renderUi.color.backgroundDark()
-    },
-    categorizeBoard: {
-      padding: theme.spacing.unit / 2,
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-      minHeight: '100px',
-      justifyContent: 'center',
-      overflow: 'hidden',
-      touchAction: 'none',
-      backgroundColor: _renderUi.color.backgroundDark()
-    },
-    verticalPool: {
-      display: 'flex',
-      flexFlow: 'column wrap'
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(PlaceHolder);
-
-exports["default"] = _default;
+var _default = exports["default"] = PlaceHolder;
 //# sourceMappingURL=placeholder.js.map

package/lib/placeholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/placeholder.jsx"],"names":["PlaceHolder","props","children","classes","className","isOver","type","grid","disabled","choiceBoard","isCategorize","isVerticalPool","minHeight","names","placeholder","over","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","border","color","borderLight","background","backgroundDark","boardStyle","categorizeBoard","board","noSelectStyles","verticalPool","propTypes","PropTypes","object","isRequired","bool","shape","number","string","oneOfType","arrayOf","node","index","styles","theme","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","userSelect","width","height","white","transition","boxSizing","display","gridRowGap","spacing","unit","gridColumnGap","padding","black","boxShadow","palette","paper","grey","backgroundColor","flexWrap","alignItems","justifyContent","overflow","touchAction","flexFlow"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAW;AACpC,MACEC,QADF,GAYID,KAZJ,CACEC,QADF;AAAA,MAEEC,OAFF,GAYIF,KAZJ,CAEEE,OAFF;AAAA,MAGEC,SAHF,GAYIH,KAZJ,CAGEG,SAHF;AAAA,MAIEC,MAJF,GAYIJ,KAZJ,CAIEI,MAJF;AAAA,MAKEC,IALF,GAYIL,KAZJ,CAKEK,IALF;AAAA,MAMEC,IANF,GAYIN,KAZJ,CAMEM,IANF;AAAA,MAOEC,QAPF,GAYIP,KAZJ,CAOEO,QAPF;AAAA,MAQEC,WARF,GAYIR,KAZJ,CAQEQ,WARF;AAAA,MASEC,YATF,GAYIT,KAZJ,CASES,YATF;AAAA,MAUEC,cAVF,GAYIV,KAZJ,CAUEU,cAVF;AAAA,MAWEC,SAXF,GAYIX,KAZJ,CAWEW,SAXF;AAcA,MAAMC,KAAK,GAAG,4BACZV,OAAO,CAACW,WADI,EAEZN,QAAQ,IAAIL,OAAO,CAACK,QAFR,EAGZH,MAAM,IAAIF,OAAO,CAACY,IAHN,EAIZZ,OAAO,CAACG,IAAD,CAJK,EAKZF,SALY,CAAd;AAQA,MAAMY,KAAK,GAAG,EAAd;;AAEA,MAAIT,IAAI,IAAIA,IAAI,CAACU,OAAjB,EAA0B;AACxBD,IAAAA,KAAK,CAACE,mBAAN,oBAAsCX,IAAI,CAACU,OAA3C;AACD;;AAED,MAAIV,IAAI,IAAIA,IAAI,CAACY,IAAjB,EAAuB;AACrB,QAAMC,WAAW,GAAGb,IAAI,CAACc,eAAL,IAAwB,KAA5C;AAEAL,IAAAA,KAAK,CAACM,gBAAN,oBAAmCf,IAAI,CAACY,IAAxC,eAAiDC,WAAjD;AACD,GAjCmC,CAmCpC;AACA;AACA;AACA;;;AACA,MAAId,IAAI,KAAK,QAAb,EAAuB;AACrBU,IAAAA,KAAK,CAACO,MAAN,uBAA4BC,gBAAMC,WAAN,EAA5B;AACAT,IAAAA,KAAK,CAACU,UAAN,GAAmBF,gBAAMG,cAAN,EAAnB;AACD;;AAED,MAAMC,UAAU,GAAGlB,YAAY,GAAGP,OAAO,CAAC0B,eAAX,GAA6B1B,OAAO,CAAC2B,KAApE;AAEA,sBACE;AACE,IAAA,KAAK,kCAAOd,KAAP;AAAcJ,MAAAA,SAAS,EAAEA;AAAzB,MADP;AAEE,IAAA,SAAS,EAAE,4BACTT,OAAO,CAAC4B,cADC,EAETtB,WAAW,GAAGmB,UAAH,GAAgBf,KAFlB,EAGTF,cAAc,IAAIR,OAAO,CAAC6B,YAHjB;AAFb,KAQG9B,QARH,CADF;AAYD,CA1DM;;;AA4DPF,WAAW,CAACiC,SAAZ,GAAwB;AACtB9B,EAAAA,OAAO,EAAE+B,sBAAUC,MAAV,CAAiBC,UADJ;AAEtB3B,EAAAA,WAAW,EAAEyB,sBAAUG,IAFD;AAGtB9B,EAAAA,IAAI,EAAE2B,sBAAUI,KAAV,CAAgB;AACpBrB,IAAAA,OAAO,EAAEiB,sBAAUK,MADC;AAEpBpB,IAAAA,IAAI,EAAEe,sBAAUK,MAFI;AAGpB;AACAlB,IAAAA,eAAe,EAAEa,sBAAUM;AAJP,GAAhB,CAHgB;AAStBtC,EAAAA,QAAQ,EAAEgC,sBAAUO,SAAV,CAAoB,CAACP,sBAAUQ,OAAV,CAAkBR,sBAAUS,IAA5B,CAAD,EAAoCT,sBAAUS,IAA9C,CAApB,EAAyEP,UAT7D;AAUtBhC,EAAAA,SAAS,EAAE8B,sBAAUM,MAVC;AAWtBnC,EAAAA,MAAM,EAAE6B,sBAAUG,IAXI;AAYtBO,EAAAA,KAAK,EAAEV,sBAAUK,MAZK;AAatBjC,EAAAA,IAAI,EAAE4B,sBAAUM,MAbM;AActBhC,EAAAA,QAAQ,EAAE0B,sBAAUG,IAdE;AAetB3B,EAAAA,YAAY,EAAEwB,sBAAUG,IAfF;AAgBtB1B,EAAAA,cAAc,EAAEuB,sBAAUG,IAhBJ;AAiBtBzB,EAAAA,SAAS,EAAEsB,sBAAUK;AAjBC,CAAxB;;AAoBA,IAAMM,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBf,IAAAA,cAAc,EAAE;AACdgB,MAAAA,kBAAkB,EAAE,MADN;AAEdC,MAAAA,gBAAgB,EAAE,MAFJ;AAGdC,MAAAA,eAAe,EAAE,MAHH;AAIdC,MAAAA,aAAa,EAAE,MAJD;AAKdC,MAAAA,YAAY,EAAE,MALA;AAMdC,MAAAA,UAAU,EAAE;AANE,KADS;AASzBtC,IAAAA,WAAW,EAAE;AACXuC,MAAAA,KAAK,EAAE,MADI;AAEXC,MAAAA,MAAM,EAAE,MAFG;AAGX5B,MAAAA,UAAU,EAAEF,gBAAM+B,KAAN,EAHD;AAIXC,MAAAA,UAAU,EAAE,0DAJD;AAKXC,MAAAA,SAAS,EAAE,YALA;AAMXC,MAAAA,OAAO,EAAE,MANE;AAOXC,MAAAA,UAAU,YAAKb,KAAK,CAACc,OAAN,CAAcC,IAAnB,OAPC;AAQXC,MAAAA,aAAa,YAAKhB,KAAK,CAACc,OAAN,CAAcC,IAAnB,OARF;AASXE,MAAAA,OAAO,EAAEjB,KAAK,CAACc,OAAN,CAAcC,IAAd,GAAqB,CATnB;AAUXtC,MAAAA,MAAM,uBAAgBC,gBAAMwC,KAAN,EAAhB;AAVK,KATY;AAqBzBxD,IAAAA,QAAQ,EAAE;AACRyD,MAAAA,SAAS,EAAE,MADH;AAERvC,MAAAA,UAAU,EAAEoB,KAAK,CAACoB,OAAN,CAAcxC,UAAd,CAAyByC;AAF7B,KArBe;AAyBzBpD,IAAAA,IAAI,EAAE;AACJQ,MAAAA,MAAM,sBAAe6C,iBAAK,GAAL,CAAf,CADF;AAEJC,MAAAA,eAAe,YAAKD,iBAAK,GAAL,CAAL;AAFX,KAzBmB;AA6BzBtC,IAAAA,KAAK,EAAE;AACLiC,MAAAA,OAAO,EAAEjB,KAAK,CAACc,OAAN,CAAcC,IADlB;AAELH,MAAAA,OAAO,EAAE,MAFJ;AAGLY,MAAAA,QAAQ,EAAE,MAHL;AAILC,MAAAA,UAAU,EAAE,QAJP;AAKL3D,MAAAA,SAAS,EAAE,OALN;AAML4D,MAAAA,cAAc,EAAE,QANX;AAOLC,MAAAA,QAAQ,EAAE,QAPL;AAQLC,MAAAA,WAAW,EAAE,MARR;AASLL,MAAAA,eAAe,EAAE7C,gBAAMG,cAAN;AATZ,KA7BkB;AAwCzBE,IAAAA,eAAe,EAAE;AACfkC,MAAAA,OAAO,EAAEjB,KAAK,CAACc,OAAN,CAAcC,IAAd,GAAqB,CADf;AAEfH,MAAAA,OAAO,EAAE,MAFM;AAGfY,MAAAA,QAAQ,EAAE,MAHK;AAIfC,MAAAA,UAAU,EAAE,QAJG;AAKf3D,MAAAA,SAAS,EAAE,OALI;AAMf4D,MAAAA,cAAc,EAAE,QAND;AAOfC,MAAAA,QAAQ,EAAE,QAPK;AAQfC,MAAAA,WAAW,EAAE,MARE;AASfL,MAAAA,eAAe,EAAE7C,gBAAMG,cAAN;AATF,KAxCQ;AAmDzBK,IAAAA,YAAY,EAAE;AACZ0B,MAAAA,OAAO,EAAE,MADG;AAEZiB,MAAAA,QAAQ,EAAE;AAFE;AAnDW,GAAZ;AAAA,CAAf;;eAyDe,wBAAW9B,MAAX,EAAmB7C,WAAnB,C","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport grey from '@material-ui/core/colors/grey';\nimport { color } from '@pie-lib/render-ui';\n\nexport const PlaceHolder = (props) => {\n  const {\n    children,\n    classes,\n    className,\n    isOver,\n    type,\n    grid,\n    disabled,\n    choiceBoard,\n    isCategorize,\n    isVerticalPool,\n    minHeight,\n  } = props;\n\n  const names = classNames(\n    classes.placeholder,\n    disabled && classes.disabled,\n    isOver && classes.over,\n    classes[type],\n    className,\n  );\n\n  const style = {};\n\n  if (grid && grid.columns) {\n    style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;\n  }\n\n  if (grid && grid.rows) {\n    const repeatValue = grid.rowsRepeatValue || '1fr';\n\n    style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;\n  }\n\n  // The \"type\" is only sent through placement-ordering / placeholder\n  // It can be \"choice\" or \"target\"\n  // We apply a different style for the \"choice\" type\n  // For any other type, use a dashed black border and a white fill\n  if (type === 'choice') {\n    style.border = `1px solid ${color.borderLight()}`;\n    style.background = color.backgroundDark();\n  }\n\n  const boardStyle = isCategorize ? classes.categorizeBoard : classes.board;\n\n  return (\n    <div\n      style={{ ...style, minHeight: minHeight }}\n      className={classNames(\n        classes.noSelectStyles,\n        choiceBoard ? boardStyle : names,\n        isVerticalPool && classes.verticalPool,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nPlaceHolder.propTypes = {\n  classes: PropTypes.object.isRequired,\n  choiceBoard: PropTypes.bool,\n  grid: PropTypes.shape({\n    columns: PropTypes.number,\n    rows: PropTypes.number,\n    // if a different value then 1fr is wanted\n    rowsRepeatValue: PropTypes.string,\n  }),\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n  className: PropTypes.string,\n  isOver: PropTypes.bool,\n  index: PropTypes.number,\n  type: PropTypes.string,\n  disabled: PropTypes.bool,\n  isCategorize: PropTypes.bool,\n  isVerticalPool: PropTypes.bool,\n  minHeight: PropTypes.number,\n};\n\nconst styles = (theme) => ({\n  noSelectStyles: {\n    WebkitTouchCallout: 'none',\n    WebkitUserSelect: 'none',\n    KhtmlUserSelect: 'none',\n    MozUserSelect: 'none',\n    MsUserSelect: 'none',\n    userSelect: 'none',\n  },\n  placeholder: {\n    width: '100%',\n    height: '100%',\n    background: color.white(),\n    transition: 'background-color 200ms linear, border-color 200ms linear',\n    boxSizing: 'border-box',\n    display: 'grid',\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridColumnGap: `${theme.spacing.unit}px`,\n    padding: theme.spacing.unit * 1,\n    border: `2px dashed ${color.black()}`,\n  },\n  disabled: {\n    boxShadow: 'none',\n    background: theme.palette.background.paper,\n  },\n  over: {\n    border: `1px solid ${grey[500]}`,\n    backgroundColor: `${grey[300]}`,\n  },\n  board: {\n    padding: theme.spacing.unit,\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    minHeight: '100px',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    touchAction: 'none',\n    backgroundColor: color.backgroundDark(),\n  },\n  categorizeBoard: {\n    padding: theme.spacing.unit / 2,\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    minHeight: '100px',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    touchAction: 'none',\n    backgroundColor: color.backgroundDark(),\n  },\n  verticalPool: {\n    display: 'flex',\n    flexFlow: 'column wrap',\n  },\n});\n\nexport default withStyles(styles)(PlaceHolder);\n"],"file":"placeholder.js"}
+{"version":3,"file":"placeholder.js","names":["_react","_interopRequireDefault","require","_styles","_classnames","_propTypes","_renderUi","_colors","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","StyledPlaceholder","styled","_ref","theme","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","userSelect","width","height","background","color","white","transition","boxSizing","display","gridRowGap","concat","spacing","gridColumnGap","padding","border","black","boxShadow","palette","paper","grey","backgroundColor","flexWrap","alignItems","minHeight","justifyContent","overflow","touchAction","backgroundDark","flexFlow","PlaceHolder","exports","props","children","className","isOver","type","grid","disabled","choiceBoard","isCategorize","isVerticalPool","names","classNames","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","borderLight","boardStyle","createElement","propTypes","PropTypes","bool","shape","number","string","oneOfType","arrayOf","node","isRequired","index","_default"],"sources":["../src/placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { grey } from '@mui/material/colors';\n\nconst StyledPlaceholder = styled('div')(({ theme }) => ({\n  WebkitTouchCallout: 'none',\n  WebkitUserSelect: 'none',\n  KhtmlUserSelect: 'none',\n  MozUserSelect: 'none',\n  MsUserSelect: 'none',\n  userSelect: 'none',\n  width: '100%',\n  height: '100%',\n  background: color.white(),\n  transition: 'background-color 200ms linear, border-color 200ms linear',\n  boxSizing: 'border-box',\n  display: 'grid',\n  gridRowGap: `${theme.spacing(1)}px`,\n  gridColumnGap: `${theme.spacing(1)}px`,\n  padding: theme.spacing(1),\n  border: `2px dashed ${color.black()}`,\n  '&.disabled': {\n    boxShadow: 'none',\n    background: theme.palette.background.paper,\n  },\n  '&.over': {\n    border: `1px solid ${grey[500]}`,\n    backgroundColor: `${grey[300]}`,\n  },\n  '&.board': {\n    padding: theme.spacing(1),\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    minHeight: '100px',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    touchAction: 'none',\n    backgroundColor: color.backgroundDark(),\n  },\n  '&.categorizeBoard': {\n    padding: theme.spacing(0.5),\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    minHeight: '100px',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    touchAction: 'none',\n    backgroundColor: color.backgroundDark(),\n  },\n  '&.verticalPool': {\n    display: 'flex',\n    flexFlow: 'column wrap',\n  },\n}));\n\nexport const PlaceHolder = (props) => {\n  const {\n    children,\n    className,\n    isOver,\n    type,\n    grid,\n    disabled,\n    choiceBoard,\n    isCategorize,\n    isVerticalPool,\n    minHeight,\n  } = props;\n\n  const names = classNames(\n    'placeholder',\n    disabled && 'disabled',\n    isOver && 'over',\n    type,\n    className,\n  );\n\n  const style = {};\n\n  if (grid && grid.columns) {\n    style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;\n  }\n\n  if (grid && grid.rows) {\n    const repeatValue = grid.rowsRepeatValue || '1fr';\n\n    style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;\n  }\n\n  // The \"type\" is only sent through placement-ordering / placeholder\n  // It can be \"choice\" or \"target\"\n  // We apply a different style for the \"choice\" type\n  // For any other type, use a dashed black border and a white fill\n  if (type === 'choice') {\n    style.border = `1px solid ${color.borderLight()}`;\n    style.background = color.backgroundDark();\n  }\n\n  const boardStyle = isCategorize ? 'categorizeBoard' : 'board';\n\n  return (\n    <StyledPlaceholder\n      style={{ ...style, minHeight: minHeight }}\n      className={classNames(\n        choiceBoard ? boardStyle : names,\n        isVerticalPool && 'verticalPool',\n      )}\n    >\n      {children}\n    </StyledPlaceholder>\n  );\n};\n\nPlaceHolder.propTypes = {\n  choiceBoard: PropTypes.bool,\n  grid: PropTypes.shape({\n    columns: PropTypes.number,\n    rows: PropTypes.number,\n    // if a different value then 1fr is wanted\n    rowsRepeatValue: PropTypes.string,\n  }),\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n  className: PropTypes.string,\n  isOver: PropTypes.bool,\n  index: PropTypes.number,\n  type: PropTypes.string,\n  disabled: PropTypes.bool,\n  isCategorize: PropTypes.bool,\n  isVerticalPool: PropTypes.bool,\n  minHeight: PropTypes.number,\n};\n\nexport default PlaceHolder;\n"],"mappings":"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","ignoreList":[]}

package/lib/preview-component.js

@@ -1,34 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _reactDndMultiBackend = require("react-dnd-multi-backend");
-
+var _core = require("@dnd-kit/core");
 var _renderUi = require("@pie-lib/render-ui");
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var styles = {
   maskBlank: {
     // this style is applied only on small screens and for touch devices when dragging, for drag-in-the-blank.
@@ -79,116 +65,90 @@ var styles = {
     backgroundColor: _renderUi.color.background()
   }
 };
+var getPrompt = function getPrompt(dragData) {
+  var _dragData$choice;
+  if (!dragData) return undefined;
+
+  // Handle different drag data structures based on the component type
+  if (dragData.choiceId) {
+    // DraggableChoice format
+    return dragData.value;
+  }
 
-var getPrompt = function getPrompt(itemType, item) {
-  var _item$choice;
-
-  switch (itemType) {
-    // DRAG-IN-THE-BLANK
+  // Legacy format support
+  switch (dragData.itemType) {
     case 'MaskBlank':
-      return item === null || item === void 0 ? void 0 : (_item$choice = item.choice) === null || _item$choice === void 0 ? void 0 : _item$choice.value;
-    // IMAGE-CLOZE-ASSOCIATION
-
-    case 'react-dnd-response':
-      return item === null || item === void 0 ? void 0 : item.value;
-    // MATCH-LIST
-
+      return (_dragData$choice = dragData.choice) === null || _dragData$choice === void 0 ? void 0 : _dragData$choice.value;
+    case 'dnd-kit-response':
+      return dragData.value;
     case 'Answer':
-      return item === null || item === void 0 ? void 0 : item.value;
-    // PLACEMENT-ORDERING
-
+      return dragData.value;
     case 'Tile':
-      return item === null || item === void 0 ? void 0 : item.value;
-
+      return dragData.value;
+    case 'categorize':
+      return dragData.value;
     default:
-      return (item === null || item === void 0 ? void 0 : item.itemType) === 'categorize' ? item === null || item === void 0 ? void 0 : item.value : undefined;
+      return dragData.value;
   }
 };
+var getCustomStyle = function getCustomStyle(dragData) {
+  if (!dragData) return {};
+  var baseStyle = {
+    cursor: 'grabbing',
+    opacity: 0.8,
+    transform: 'rotate(5deg)' // Slight rotation for visual feedback
+  };
+
+  // Apply specific styles based on item type
+  if (dragData.itemType === 'MaskBlank') {
+    return _objectSpread(_objectSpread({}, baseStyle), styles.maskBlank);
+  }
+  if (dragData.itemType === 'categorize') {
+    return _objectSpread(_objectSpread({}, baseStyle), styles.categorize);
+  }
+  if (dragData.itemType === 'Answer') {
+    return _objectSpread(_objectSpread({}, baseStyle), styles.matchList);
+  }
+  if (dragData.itemType === 'Tile') {
+    return _objectSpread(_objectSpread({}, baseStyle), styles.placementOrdering);
+  }
+  if (dragData.itemType === 'dnd-kit-response') {
+    return _objectSpread(_objectSpread({}, baseStyle), styles.ica);
+  }
 
-var getCustomStyle = function getCustomStyle(itemType, item, touchPosition, style) {
-  var transform = "translate(".concat(touchPosition.x, "px, ").concat(touchPosition.y, "px)");
-  var top = (style === null || style === void 0 ? void 0 : style.top) || 0;
-  var left = (style === null || style === void 0 ? void 0 : style.left) || 0;
-  var position = (style === null || style === void 0 ? void 0 : style.position) || 'fixed';
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    position: position,
-    top: top,
-    left: left,
-    transform: transform
-  }, itemType === 'MaskBlank' ? styles.maskBlank : {}), (item === null || item === void 0 ? void 0 : item.itemType) === 'categorize' ? styles.categorize : {}), itemType === 'Answer' ? styles.matchList : {}), itemType === 'Tile' ? styles.placementOrdering : {}), itemType === 'react-dnd-response' ? styles.ica : {});
+  // Default style for choice items
+  return _objectSpread(_objectSpread({}, baseStyle), styles.categorize);
 };
-
 var PreviewComponent = function PreviewComponent() {
-  var _item$choice2;
-
-  var preview = (0, _reactDndMultiBackend.usePreview)();
-  var itemType = preview.itemType,
-      item = preview.item,
-      style = preview.style,
-      display = preview.display;
-
-  var _useState = (0, _react.useState)({
-    x: 0,
-    y: 0
-  }),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      touchPosition = _useState2[0],
-      setTouchPosition = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(1),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      zoomLevel = _useState4[0],
-      setZoomLevel = _useState4[1];
-
-  var handleTouchMove = (0, _react.useCallback)(function (event) {
-    if (event.touches.length > 0) {
-      var touch = event.touches[0];
-      var touchOffset = 1;
-      setTouchPosition({
-        x: (touch.clientX + touchOffset) / zoomLevel,
-        y: (touch.clientY + touchOffset) / zoomLevel
-      });
-    }
-  }, [zoomLevel]);
+  var _active$data;
+  var _useDndContext = (0, _core.useDndContext)(),
+    active = _useDndContext.active;
+  var _useState = (0, _react.useState)(1),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    zoomLevel = _useState2[0],
+    setZoomLevel = _useState2[1];
   var root = (0, _react.useRef)(null);
+  var dragData = active === null || active === void 0 || (_active$data = active.data) === null || _active$data === void 0 ? void 0 : _active$data.current;
+  var isActive = !!active;
   (0, _react.useEffect)(function () {
-    if (display && root.current) {
-      (0, _mathRendering.renderMath)(root.current); // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding
+    if (isActive && root.current) {
+      (0, _mathRendering.renderMath)(root.current);
 
+      // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding
       var zoomAffectedElement = document.querySelector('.padding') || document.body;
       setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);
     }
-  }, [display, item === null || item === void 0 ? void 0 : (_item$choice2 = item.choice) === null || _item$choice2 === void 0 ? void 0 : _item$choice2.value, item === null || item === void 0 ? void 0 : item.value, itemType, item]);
-  (0, _react.useEffect)(function () {
-    var touchMoveListener = function touchMoveListener(event) {
-      return handleTouchMove(event);
-    };
-
-    if (display) {
-      window.addEventListener('touchmove', touchMoveListener);
-    }
-
-    return function () {
-      window.removeEventListener('touchmove', touchMoveListener);
-    };
-  }, [display, handleTouchMove]);
-
-  if (!display) {
-    return null;
-  }
-
-  var customStyle = getCustomStyle(itemType, item, touchPosition, style);
-  var prompt = getPrompt(itemType, item);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  }, [isActive, dragData]);
+  var customStyle = getCustomStyle(dragData);
+  var prompt = getPrompt(dragData);
+  return /*#__PURE__*/_react["default"].createElement(_core.DragOverlay, null, isActive && prompt && /*#__PURE__*/_react["default"].createElement("div", {
     ref: root,
     style: customStyle
   }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
     className: "label",
     prompt: prompt,
     tagName: "span"
-  }));
+  })));
 };
-
-var _default = PreviewComponent;
-exports["default"] = _default;
+var _default = exports["default"] = PreviewComponent;
 //# sourceMappingURL=preview-component.js.map