@pie-lib/drag 2.2.3 → 2.2.5-next.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.3...@pie-lib/drag@2.2.4) (2023-08-07)
+
+
+### Bug Fixes
+
+* **drag:** create droppablePlaceholder for ICA PD-3050 ([b2e595e](https://github.com/pie-framework/pie-lib/commit/b2e595e66b331147064c6b72fa44ba756078f159))
+
+
+
+
+
 ## [2.2.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.2...@pie-lib/drag@2.2.3) (2023-07-31)
 
 **Note:** Version bump only for package @pie-lib/drag

package/lib/drag-in-the-blank-dp.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,8 @@ var _reactDnd = require("react-dnd");
 
 var _droppablePlaceholder = require("../lib/droppable-placeholder");
 
-var DRAG_TYPE = 'MaskBlank';
+var _dragType = _interopRequireDefault(require("./drag-type"));
+
 var spec = {
   canDrop: function canDrop(props) {
     return !props.disabled;
@@ -21,7 +24,7 @@ var spec = {
   }
 };
 exports.spec = spec;
-var WithTarget = (0, _reactDnd.DropTarget)(DRAG_TYPE, spec, function (connect, monitor) {
+var WithTarget = (0, _reactDnd.DropTarget)(_dragType["default"].types.db, spec, function (connect, monitor) {
   return {
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver()

package/lib/drag-in-the-blank-dp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/drag-in-the-blank-dp.jsx"],"names":["DRAG_TYPE","spec","canDrop","props","disabled","drop","dropped","WithTarget","connect","monitor","connectDropTarget","dropTarget","isOver","DroppablePlaceholder"],"mappings":";;;;;;;AAAA;;AACA;;AAEA,IAAMA,SAAS,GAAG,WAAlB;AAEO,IAAMC,IAAI,GAAG;AAClBC,EAAAA,OAAO,EAAE,iBAACC,KAAD,EAAW;AAClB,WAAO,CAACA,KAAK,CAACC,QAAd;AACD,GAHiB;AAIlBC,EAAAA,IAAI,EAAE;AAAA,WAAO;AACXC,MAAAA,OAAO,EAAE;AADE,KAAP;AAAA;AAJY,CAAb;;AASP,IAAMC,UAAU,GAAG,0BAAWP,SAAX,EAAsBC,IAAtB,EAA4B,UAACO,OAAD,EAAUC,OAAV;AAAA,SAAuB;AACpEC,IAAAA,iBAAiB,EAAEF,OAAO,CAACG,UAAR,EADiD;AAEpEC,IAAAA,MAAM,EAAEH,OAAO,CAACG,MAAR;AAF4D,GAAvB;AAAA,CAA5B,EAGfC,0CAHe,CAAnB;eAKeN,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from '../lib/droppable-placeholder';\n\nconst DRAG_TYPE = 'MaskBlank';\n\nexport const spec = {\n  canDrop: (props) => {\n    return !props.disabled;\n  },\n  drop: () => ({\n    dropped: true,\n  }),\n};\n\nconst WithTarget = DropTarget(DRAG_TYPE, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"drag-in-the-blank-dp.js"}
+{"version":3,"sources":["../src/drag-in-the-blank-dp.jsx"],"names":["spec","canDrop","props","disabled","drop","dropped","WithTarget","dragType","types","db","connect","monitor","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;AAAA,WAAO;AACXC,MAAAA,OAAO,EAAE;AADE,KAAP;AAAA;AAJY,CAAb;;AASP,IAAMC,UAAU,GAAG,0BAAWC,qBAASC,KAAT,CAAeC,EAA1B,EAA8BT,IAA9B,EAAoC,UAACU,OAAD,EAAUC,OAAV;AAAA,SAAuB;AAC5EC,IAAAA,iBAAiB,EAAEF,OAAO,CAACG,UAAR,EADyD;AAE5EC,IAAAA,MAAM,EAAEH,OAAO,CAACG,MAAR;AAFoE,GAAvB;AAAA,CAApC,EAGfC,0CAHe,CAAnB;eAKeT,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from '../lib/droppable-placeholder';\nimport dragType from './drag-type';\n\nexport const spec = {\n  canDrop: (props) => {\n    return !props.disabled;\n  },\n  drop: () => ({\n    dropped: true,\n  }),\n};\n\nconst WithTarget = DropTarget(dragType.types.db, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"drag-in-the-blank-dp.js"}

package/lib/drag-type.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  types: {
+    ica: 'react-dnd-response',
+    ml: 'Answer',
+    db: 'MaskBlank'
+  }
+};
+exports["default"] = _default;
+//# sourceMappingURL=drag-type.js.map

package/lib/drag-type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/drag-type.js"],"names":["types","ica","ml","db"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE,oBADA;AAELC,IAAAA,EAAE,EAAE,QAFC;AAGLC,IAAAA,EAAE,EAAE;AAHC;AADM,C","sourcesContent":["export default {\n  types: {\n    ica: 'react-dnd-response',\n    ml: 'Answer',\n    db: 'MaskBlank',\n  },\n};\n"],"file":"drag-type.js"}

package/lib/ica-dp.js

@@ -0,0 +1,37 @@
+"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");
+
+var _droppablePlaceholder = require("./droppable-placeholder");
+
+var _dragType = _interopRequireDefault(require("./drag-type"));
+
+var spec = {
+  canDrop: function canDrop(props) {
+    return !props.disabled;
+  },
+  drop: function drop(props, monitor) {
+    var item = monitor.getItem();
+
+    if (props.onRemoveAnswer) {
+      props.onRemoveAnswer(item);
+    }
+  }
+};
+exports.spec = spec;
+var WithTarget = (0, _reactDnd.DropTarget)(_dragType["default"].types.ica, spec, function (connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  };
+})(_droppablePlaceholder.DroppablePlaceholder);
+var _default = WithTarget;
+exports["default"] = _default;
+//# sourceMappingURL=ica-dp.js.map

package/lib/ica-dp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ica-dp.jsx"],"names":["spec","canDrop","props","disabled","drop","monitor","item","getItem","onRemoveAnswer","WithTarget","dragType","types","ica","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,IAArB;AACD;AACF;AAViB,CAAb;;AAaP,IAAMG,UAAU,GAAG,0BAAWC,qBAASC,KAAT,CAAeC,GAA1B,EAA+BZ,IAA/B,EAAqC,UAACa,OAAD,EAAUR,OAAV;AAAA,SAAuB;AAC7ES,IAAAA,iBAAiB,EAAED,OAAO,CAACE,UAAR,EAD0D;AAE7EC,IAAAA,MAAM,EAAEX,OAAO,CAACW,MAAR;AAFqE,GAAvB;AAAA,CAArC,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);\n    }\n  },\n};\n\nconst WithTarget = DropTarget(dragType.types.ica, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"ica-dp.js"}

package/lib/index.js

@@ -31,6 +31,12 @@ Object.defineProperty(exports, "DropTarget", {
     return _reactDnd.DropTarget;
   }
 });
+Object.defineProperty(exports, "ICADroppablePlaceholder", {
+  enumerable: true,
+  get: function get() {
+    return _icaDp["default"];
+  }
+});
 Object.defineProperty(exports, "MatchDroppablePlaceholder", {
   enumerable: true,
   get: function get() {
@@ -75,6 +81,8 @@ var _matchListDp = _interopRequireDefault(require("./match-list-dp"));
 
 var _dragInTheBlankDp = _interopRequireDefault(require("./drag-in-the-blank-dp"));
 
+var _icaDp = _interopRequireDefault(require("./ica-dp"));
+
 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; }

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;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';\n\nexport {\n  PlaceHolder,\n  MatchDroppablePlaceholder,\n  DragDroppablePlaceholder,\n  withDragContext,\n  Choice,\n  swap,\n  uid,\n  DragSource,\n  DropTarget,\n};\n"],"file":"index.js"}
+{"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"}

package/lib/match-list-dp.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,8 @@ var _reactDnd = require("react-dnd");
 
 var _droppablePlaceholder = require("./droppable-placeholder");
 
-var DRAG_TYPE = 'Answer';
+var _dragType = _interopRequireDefault(require("./drag-type"));
+
 var spec = {
   canDrop: function canDrop(props) {
     return !props.disabled;
@@ -23,7 +26,7 @@ var spec = {
   }
 };
 exports.spec = spec;
-var WithTarget = (0, _reactDnd.DropTarget)(DRAG_TYPE, spec, function (connect, monitor) {
+var WithTarget = (0, _reactDnd.DropTarget)(_dragType["default"].types.ml, spec, function (connect, monitor) {
   return {
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver()

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/match-list-dp.jsx"],"names":["DRAG_TYPE","spec","canDrop","props","disabled","drop","monitor","item","getItem","onRemoveAnswer","promptId","WithTarget","connect","connectDropTarget","dropTarget","isOver","DroppablePlaceholder"],"mappings":";;;;;;;AAAA;;AACA;;AAEA,IAAMA,SAAS,GAAG,QAAlB;AAEO,IAAMC,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,0BAAWX,SAAX,EAAsBC,IAAtB,EAA4B,UAACW,OAAD,EAAUN,OAAV;AAAA,SAAuB;AACpEO,IAAAA,iBAAiB,EAAED,OAAO,CAACE,UAAR,EADiD;AAEpEC,IAAAA,MAAM,EAAET,OAAO,CAACS,MAAR;AAF4D,GAAvB;AAAA,CAA5B,EAGfC,0CAHe,CAAnB;eAKeL,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from './droppable-placeholder';\n\nconst DRAG_TYPE = 'Answer';\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(DRAG_TYPE, 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,"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"}

package/lib/preview-component.js

@@ -43,7 +43,7 @@ var styles = {
   },
   ica: {
     backgroundColor: _renderUi.color.background(),
-    border: "1px solid ".concat(_renderUi.color.text()),
+    border: "1px solid ".concat(_renderUi.color.primary()),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -101,7 +101,7 @@ var getPrompt = function getPrompt(itemType, item) {
 };
 
 var getCustomStyle = function getCustomStyle(itemType, item, style) {
-  var baseStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), itemType === 'MaskBlank' ? styles.maskBlank : {}), (item === null || item === void 0 ? void 0 : item.itemType) === 'categorize' ? styles.categorize : {}), itemType === 'Answer' ? styles.matchList : {}), itemType === 'Tile' ? styles.placementOrdering : {});
+  var baseStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), 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 : {});
 
   return baseStyle;
 };

package/lib/preview-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/preview-component.jsx"],"names":["styles","maskBlank","border","color","minWidth","minHeight","height","maxWidth","display","padding","alignItems","justifyContent","borderRadius","ica","backgroundColor","background","text","marginLeft","marginTop","width","categorize","matchList","boxSizing","placementOrdering","getPrompt","itemType","item","choice","value","undefined","getCustomStyle","style","baseStyle","PreviewComponent","preview","root","current","customStyle","prompt"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { usePreview } from 'react-dnd-multi-backend';\nimport { PreviewPrompt } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nconst styles = {\n  maskBlank: {\n    border: '1px solid black',\n    color: 'black',\n    minWidth: '90px',\n    minHeight: '32px',\n    height: 'auto',\n    maxWidth: '374px',\n    display: 'flex',\n    padding: '4px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: '16px',\n  },\n  ica: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.text()}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: '28px',\n    padding: '0 3px',\n    marginLeft: 2,\n    marginTop: 2,\n    width: 'fit-content',\n  },\n  categorize: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: '16px',\n    borderRadius: '4px',\n    border: '1px solid',\n  },\n  matchList: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: '10px',\n    boxSizing: 'border-box',\n    border: '1px solid #D1D1D1',\n  },\n  placementOrdering: {\n    padding: '10px',\n    boxSizing: 'border-box',\n    border: '1px solid #D1D1D1',\n    backgroundColor: color.background(),\n  },\n};\n\nconst getPrompt = (itemType, item) => {\n  switch (itemType) {\n    // DRAG-IN-THE-BLANK\n    case 'MaskBlank':\n      return item?.choice?.value;\n    // IMAGE-CLOZE-ASSOCIATION\n    case 'react-dnd-response':\n      return item?.value;\n    // MATCH-LIST\n    case 'Answer':\n      return item?.value;\n    // PLACEMENT-ORDERING\n    case 'Tile':\n      return item?.value;\n    default:\n      return item?.itemType === 'categorize' ? item?.value : undefined;\n  }\n};\n\nconst getCustomStyle = (itemType, item, style) => {\n  const baseStyle = {\n    ...style,\n    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),\n    ...(item?.itemType === 'categorize' ? styles.categorize : {}),\n    ...(itemType === 'Answer' ? styles.matchList : {}),\n    ...(itemType === 'Tile' ? styles.placementOrdering : {}),\n    // TODO: In the image-cloze-association component, there's a noticeable delay in the image rendering process. This results in a brief display of an empty image placeholder before the actual image appears after a few seconds. This issue also impacts the correct rendering of the preview feature, thereby negatively affecting the user experience. This needs to be addressed promptly.\n    //...(itemType === 'react-dnd-response' ? styles.ica : {}),\n  };\n\n  return baseStyle;\n};\n\nconst PreviewComponent = () => {\n  const preview = usePreview();\n  const { itemType, item, style, display } = preview;\n\n  const root = useRef(null);\n\n  useEffect(() => {\n    if (display && root.current) {\n      renderMath(root.current);\n    }\n  }, [display, item?.choice?.value, item?.value, itemType, item]);\n\n  if (!display) {\n    return null;\n  }\n\n  const customStyle = getCustomStyle(itemType, item, style);\n\n  const prompt = getPrompt(itemType, item);\n\n  return (\n    <div ref={root} style={customStyle}>\n      <PreviewPrompt className=\"label\" prompt={prompt} tagName=\"span\" />\n    </div>\n  );\n};\n\nexport default PreviewComponent;\n"],"file":"preview-component.js"}
+{"version":3,"sources":["../src/preview-component.jsx"],"names":["styles","maskBlank","border","color","minWidth","minHeight","height","maxWidth","display","padding","alignItems","justifyContent","borderRadius","ica","backgroundColor","background","primary","marginLeft","marginTop","width","categorize","text","matchList","boxSizing","placementOrdering","getPrompt","itemType","item","choice","value","undefined","getCustomStyle","style","baseStyle","PreviewComponent","preview","root","current","customStyle","prompt"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { usePreview } from 'react-dnd-multi-backend';\nimport { PreviewPrompt } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nconst styles = {\n  maskBlank: {\n    border: '1px solid black',\n    color: 'black',\n    minWidth: '90px',\n    minHeight: '32px',\n    height: 'auto',\n    maxWidth: '374px',\n    display: 'flex',\n    padding: '4px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: '16px',\n  },\n  ica: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.primary()}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: '28px',\n    padding: '0 3px',\n    marginLeft: 2,\n    marginTop: 2,\n    width: 'fit-content',\n  },\n  categorize: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: '16px',\n    borderRadius: '4px',\n    border: '1px solid',\n  },\n  matchList: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: '10px',\n    boxSizing: 'border-box',\n    border: '1px solid #D1D1D1',\n  },\n  placementOrdering: {\n    padding: '10px',\n    boxSizing: 'border-box',\n    border: '1px solid #D1D1D1',\n    backgroundColor: color.background(),\n  },\n};\n\nconst getPrompt = (itemType, item) => {\n  switch (itemType) {\n    // DRAG-IN-THE-BLANK\n    case 'MaskBlank':\n      return item?.choice?.value;\n    // IMAGE-CLOZE-ASSOCIATION\n    case 'react-dnd-response':\n      return item?.value;\n    // MATCH-LIST\n    case 'Answer':\n      return item?.value;\n    // PLACEMENT-ORDERING\n    case 'Tile':\n      return item?.value;\n    default:\n      return item?.itemType === 'categorize' ? item?.value : undefined;\n  }\n};\n\nconst getCustomStyle = (itemType, item, style) => {\n  const baseStyle = {\n    ...style,\n    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),\n    ...(item?.itemType === 'categorize' ? styles.categorize : {}),\n    ...(itemType === 'Answer' ? styles.matchList : {}),\n    ...(itemType === 'Tile' ? styles.placementOrdering : {}),\n    ...(itemType === 'react-dnd-response' ? styles.ica : {}),\n  };\n\n  return baseStyle;\n};\n\nconst PreviewComponent = () => {\n  const preview = usePreview();\n  const { itemType, item, style, display } = preview;\n\n  const root = useRef(null);\n\n  useEffect(() => {\n    if (display && root.current) {\n      renderMath(root.current);\n    }\n  }, [display, item?.choice?.value, item?.value, itemType, item]);\n\n  if (!display) {\n    return null;\n  }\n\n  const customStyle = getCustomStyle(itemType, item, style);\n\n  const prompt = getPrompt(itemType, item);\n\n  return (\n    <div ref={root} style={customStyle}>\n      <PreviewPrompt className=\"label\" prompt={prompt} tagName=\"span\" />\n    </div>\n  );\n};\n\nexport default PreviewComponent;\n"],"file":"preview-component.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/drag",
-  "version": "2.2.3",
+  "version": "2.2.5-next.0+1d636215",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -19,5 +19,5 @@
   "scripts": {},
   "author": "",
   "license": "ISC",
-  "gitHead": "08f774aadc4b8345e6fa4338a59cfd57938f3676"
+  "gitHead": "1d636215b1c533cb23ebe7d4ccff533d71894bea"
 }

package/src/drag-in-the-blank-dp.jsx

@@ -1,7 +1,6 @@
 import { DropTarget } from 'react-dnd';
 import { DroppablePlaceholder } from '../lib/droppable-placeholder';
-
-const DRAG_TYPE = 'MaskBlank';
+import dragType from './drag-type';
 
 export const spec = {
   canDrop: (props) => {
@@ -12,7 +11,7 @@ export const spec = {
   }),
 };
 
-const WithTarget = DropTarget(DRAG_TYPE, spec, (connect, monitor) => ({
+const WithTarget = DropTarget(dragType.types.db, spec, (connect, monitor) => ({
   connectDropTarget: connect.dropTarget(),
   isOver: monitor.isOver(),
 }))(DroppablePlaceholder);

package/src/drag-type.js

@@ -0,0 +1,7 @@
+export default {
+  types: {
+    ica: 'react-dnd-response',
+    ml: 'Answer',
+    db: 'MaskBlank',
+  },
+};

package/src/ica-dp.jsx

@@ -0,0 +1,23 @@
+import { DropTarget } from 'react-dnd';
+import { DroppablePlaceholder } from './droppable-placeholder';
+import dragType from './drag-type';
+
+export const spec = {
+  canDrop: (props) => {
+    return !props.disabled;
+  },
+  drop: (props, monitor) => {
+    const item = monitor.getItem();
+
+    if (props.onRemoveAnswer) {
+      props.onRemoveAnswer(item);
+    }
+  },
+};
+
+const WithTarget = DropTarget(dragType.types.ica, spec, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+}))(DroppablePlaceholder);
+
+export default WithTarget;

package/src/index.js

@@ -7,11 +7,13 @@ import swap from './swap';
 import * as uid from './uid-context';
 import MatchDroppablePlaceholder from './match-list-dp';
 import DragDroppablePlaceholder from './drag-in-the-blank-dp';
+import ICADroppablePlaceholder from './ica-dp';
 
 export {
   PlaceHolder,
   MatchDroppablePlaceholder,
   DragDroppablePlaceholder,
+  ICADroppablePlaceholder,
   withDragContext,
   Choice,
   swap,

package/src/match-list-dp.jsx

@@ -1,7 +1,6 @@
 import { DropTarget } from 'react-dnd';
 import { DroppablePlaceholder } from './droppable-placeholder';
-
-const DRAG_TYPE = 'Answer';
+import dragType from './drag-type';
 
 export const spec = {
   canDrop: (props) => {
@@ -16,7 +15,7 @@ export const spec = {
   },
 };
 
-const WithTarget = DropTarget(DRAG_TYPE, spec, (connect, monitor) => ({
+const WithTarget = DropTarget(dragType.types.ml, spec, (connect, monitor) => ({
   connectDropTarget: connect.dropTarget(),
   isOver: monitor.isOver(),
 }))(DroppablePlaceholder);

package/src/preview-component.jsx

@@ -20,7 +20,7 @@ const styles = {
   },
   ica: {
     backgroundColor: color.background(),
-    border: `1px solid ${color.text()}`,
+    border: `1px solid ${color.primary()}`,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -78,8 +78,7 @@ const getCustomStyle = (itemType, item, style) => {
     ...(item?.itemType === 'categorize' ? styles.categorize : {}),
     ...(itemType === 'Answer' ? styles.matchList : {}),
     ...(itemType === 'Tile' ? styles.placementOrdering : {}),
-    // TODO: In the image-cloze-association component, there's a noticeable delay in the image rendering process. This results in a brief display of an empty image placeholder before the actual image appears after a few seconds. This issue also impacts the correct rendering of the preview feature, thereby negatively affecting the user experience. This needs to be addressed promptly.
-    //...(itemType === 'react-dnd-response' ? styles.ica : {}),
+    ...(itemType === 'react-dnd-response' ? styles.ica : {}),
   };
 
   return baseStyle;