@pie-lib/drag 2.31.0-mui-update.0 → 2.32.0-mui-update.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.32.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.31.0-mui-update.0...@pie-lib/drag@2.32.0-mui-update.0) (2025-12-11)
+
+
+### Features
+
+* drag changes for ditb ([fc79ecd](https://github.com/pie-framework/pie-lib/commit/fc79ecdacb5693f1b5dcf19c7114f9cd4bed83ba))
+* updates for drag-in-the-blank ([0c096d8](https://github.com/pie-framework/pie-lib/commit/0c096d887f97edecd2dac68cda136b2d265dc7d5))
+
+
+
+
+
 # [2.31.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.30.0-mui-update.0...@pie-lib/drag@2.31.0-mui-update.0) (2025-12-02)
 
 

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

@@ -6,34 +6,61 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DragInTheBlankDroppable = DragInTheBlankDroppable;
 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", "onDrop"];
+var _placeholder = _interopRequireDefault(require("./placeholder"));
+var _core = require("@dnd-kit/core");
+var _styles = require("@mui/material/styles");
+var _excluded = ["children", "disabled", "classes", "isVerticalPool", "minHeight", "instanceId"];
 // With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
 // This component now just wraps DroppablePlaceholder with drag-in-the-blank specific logic
 
+var DroppablePlaceholderContainer = (0, _styles.styled)('div')({
+  minHeight: '100px'
+});
 function DragInTheBlankDroppable(_ref) {
-  var id = _ref.id,
-    children = _ref.children,
+  var children = _ref.children,
     disabled = _ref.disabled,
-    onDrop = _ref.onDrop,
+    classes = _ref.classes,
+    isVerticalPool = _ref.isVerticalPool,
+    minHeight = _ref.minHeight,
+    instanceId = _ref.instanceId,
     rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   // The actual drop handling will be managed by the parent component
   // through the DragProvider's onDragEnd callback
-
-  return /*#__PURE__*/_react["default"].createElement(_droppablePlaceholder.DroppablePlaceholder, (0, _extends2["default"])({
-    id: id,
-    disabled: disabled
-  }, rest), children);
+  var _useDroppable = (0, _core.useDroppable)({
+      id: 'drag-in-the-blank-droppable',
+      data: {
+        type: 'MaskBlank',
+        accepts: ['MaskBlank'],
+        id: 'drag-in-the-blank-droppable',
+        toChoiceBoard: true,
+        instanceId: instanceId
+      }
+    }),
+    setNodeRef = _useDroppable.setNodeRef,
+    isOver = _useDroppable.isOver;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: setNodeRef
+  }, /*#__PURE__*/_react["default"].createElement(DroppablePlaceholderContainer, null, /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
+    isOver: isOver,
+    choiceBoard: true,
+    className: classes,
+    isVerticalPool: isVerticalPool,
+    extraStyles: {
+      width: '100%',
+      minHeight: minHeight || 100,
+      height: 'auto'
+    }
+  }, children)));
 }
 DragInTheBlankDroppable.propTypes = {
   id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
   children: _propTypes["default"].node,
   disabled: _propTypes["default"].bool,
-  onDrop: _propTypes["default"].func
+  onDrop: _propTypes["default"].func,
+  instanceId: _propTypes["default"].string
 };
 var _default = exports["default"] = DragInTheBlankDroppable;
 //# sourceMappingURL=drag-in-the-blank-dp.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"drag-in-the-blank-dp.js","names":["_react","_interopRequireDefault","require","_propTypes","_droppablePlaceholder","_excluded","DragInTheBlankDroppable","_ref","id","children","disabled","onDrop","rest","_objectWithoutProperties2","createElement","DroppablePlaceholder","_extends2","propTypes","PropTypes","oneOfType","string","number","isRequired","node","bool","func","_default","exports"],"sources":["../src/drag-in-the-blank-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 drag-in-the-blank specific logic\n\nexport function DragInTheBlankDroppable({ \n  id, \n  children, \n  disabled, \n  onDrop,\n  ...rest \n}) {\n  // The actual drop handling will be managed by the parent component\n  // through the DragProvider's onDragEnd callback\n  \n  return (\n    <DroppablePlaceholder\n      id={id}\n      disabled={disabled}\n      {...rest}\n    >\n      {children}\n    </DroppablePlaceholder>\n  );\n}\n\nDragInTheBlankDroppable.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  onDrop: PropTypes.func,\n};\n\nexport default DragInTheBlankDroppable;\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,uBAAuBA,CAAAC,IAAA,EAMpC;EAAA,IALDC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IACHC,IAAI,OAAAC,yBAAA,aAAAN,IAAA,EAAAF,SAAA;EAEP;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,uBAAuB,CAACW,SAAS,GAAG;EAClCT,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,MAAM,EAAEO,qBAAS,CAACO;AACpB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEarB,uBAAuB","ignoreList":[]}
+{"version":3,"file":"drag-in-the-blank-dp.js","names":["_react","_interopRequireDefault","require","_propTypes","_placeholder","_core","_styles","_excluded","DroppablePlaceholderContainer","styled","minHeight","DragInTheBlankDroppable","_ref","children","disabled","classes","isVerticalPool","instanceId","rest","_objectWithoutProperties2","_useDroppable","useDroppable","id","data","type","accepts","toChoiceBoard","setNodeRef","isOver","createElement","ref","choiceBoard","className","extraStyles","width","height","propTypes","PropTypes","oneOfType","string","number","isRequired","node","bool","onDrop","func","_default","exports"],"sources":["../src/drag-in-the-blank-dp.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport PlaceHolder from './placeholder';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\n\n// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback\n// This component now just wraps DroppablePlaceholder with drag-in-the-blank specific logic\n\nconst DroppablePlaceholderContainer = styled('div')({\n  minHeight: '100px',\n});\n\nexport function DragInTheBlankDroppable({\n  children,\n  disabled,\n  classes,\n  isVerticalPool,\n  minHeight,\n  instanceId,\n  ...rest\n}) {\n  // The actual drop handling will be managed by the parent component\n  // through the DragProvider's onDragEnd callback\n  const { setNodeRef, isOver } = useDroppable({\n     id: 'drag-in-the-blank-droppable',\n    data: {\n      type: 'MaskBlank',\n      accepts: ['MaskBlank'],\n      id: 'drag-in-the-blank-droppable',\n      toChoiceBoard: true,\n      instanceId\n    }\n  });\n\n  return (\n    <div ref={setNodeRef} >\n      <DroppablePlaceholderContainer>\n        <PlaceHolder\n          isOver={isOver}\n          choiceBoard={true}\n          className={classes}\n          isVerticalPool={isVerticalPool}\n          extraStyles={{\n            width: '100%',\n            minHeight: minHeight || 100,\n            height: 'auto',\n          }}\n        >\n          {children}\n        </PlaceHolder>\n      </DroppablePlaceholderContainer>\n    </div>\n  );\n}\n\nDragInTheBlankDroppable.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  onDrop: PropTypes.func,\n  instanceId: PropTypes.string,\n};\n\nexport default DragInTheBlankDroppable;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAA8C,IAAAK,SAAA;AAE9C;AACA;;AAEA,IAAMC,6BAA6B,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC;EAClDC,SAAS,EAAE;AACb,CAAC,CAAC;AAEK,SAASC,uBAAuBA,CAAAC,IAAA,EAQpC;EAAA,IAPDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;IACdN,SAAS,GAAAE,IAAA,CAATF,SAAS;IACTO,UAAU,GAAAL,IAAA,CAAVK,UAAU;IACPC,IAAI,OAAAC,yBAAA,aAAAP,IAAA,EAAAL,SAAA;EAEP;EACA;EACA,IAAAa,aAAA,GAA+B,IAAAC,kBAAY,EAAC;MACzCC,EAAE,EAAE,6BAA6B;MAClCC,IAAI,EAAE;QACJC,IAAI,EAAE,WAAW;QACjBC,OAAO,EAAE,CAAC,WAAW,CAAC;QACtBH,EAAE,EAAE,6BAA6B;QACjCI,aAAa,EAAE,IAAI;QACnBT,UAAU,EAAVA;MACF;IACF,CAAC,CAAC;IATMU,UAAU,GAAAP,aAAA,CAAVO,UAAU;IAAEC,MAAM,GAAAR,aAAA,CAANQ,MAAM;EAW1B,oBACE5B,MAAA,YAAA6B,aAAA;IAAKC,GAAG,EAAEH;EAAW,gBACnB3B,MAAA,YAAA6B,aAAA,CAACrB,6BAA6B,qBAC5BR,MAAA,YAAA6B,aAAA,CAACzB,YAAA,WAAW;IACVwB,MAAM,EAAEA,MAAO;IACfG,WAAW,EAAE,IAAK;IAClBC,SAAS,EAAEjB,OAAQ;IACnBC,cAAc,EAAEA,cAAe;IAC/BiB,WAAW,EAAE;MACXC,KAAK,EAAE,MAAM;MACbxB,SAAS,EAAEA,SAAS,IAAI,GAAG;MAC3ByB,MAAM,EAAE;IACV;EAAE,GAEDtB,QACU,CACgB,CAC5B,CAAC;AAEV;AAEAF,uBAAuB,CAACyB,SAAS,GAAG;EAClCd,EAAE,EAAEe,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACE,MAAM,EAAEF,qBAAS,CAACG,MAAM,CAAC,CAAC,CAACC,UAAU;EACxE5B,QAAQ,EAAEwB,qBAAS,CAACK,IAAI;EACxB5B,QAAQ,EAAEuB,qBAAS,CAACM,IAAI;EACxBC,MAAM,EAAEP,qBAAS,CAACQ,IAAI;EACtB5B,UAAU,EAAEoB,qBAAS,CAACE;AACxB,CAAC;AAAC,IAAAO,QAAA,GAAAC,OAAA,cAEapC,uBAAuB","ignoreList":[]}

package/lib/drag-provider.js

@@ -15,7 +15,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function DragProvider(_ref) {
   var children = _ref.children,
     onDragEnd = _ref.onDragEnd,
-    onDragStart = _ref.onDragStart;
+    onDragStart = _ref.onDragStart,
+    collisionDetection = _ref.collisionDetection,
+    modifiers = _ref.modifiers;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     activeId = _useState2[0],
@@ -40,13 +42,17 @@ function DragProvider(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
     sensors: sensors,
     onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd
+    onDragEnd: handleDragEnd,
+    collisionDetection: collisionDetection,
+    modifiers: modifiers
   }, children);
 }
 DragProvider.propTypes = {
   children: _propTypes["default"].node.isRequired,
   onDragEnd: _propTypes["default"].func,
-  onDragStart: _propTypes["default"].func
+  onDragStart: _propTypes["default"].func,
+  collisionDetection: _propTypes["default"].func,
+  modifiers: _propTypes["default"].arrayOf(_propTypes["default"].func)
 };
 var _default = exports["default"] = DragProvider;
 //# sourceMappingURL=drag-provider.js.map

package/lib/drag-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag-provider.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DragProvider","_ref","children","onDragEnd","onDragStart","_useState","useState","_useState2","_slicedToArray2","activeId","setActiveId","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","handleDragStart","event","active","id","handleDragEnd","createElement","DndContext","propTypes","PropTypes","node","isRequired","func","_default","exports"],"sources":["../src/drag-provider.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { DndContext, PointerSensor, KeyboardSensor, useSensor, useSensors } from '@dnd-kit/core';\n\nexport function DragProvider({ children, onDragEnd, onDragStart }) {\n  const [activeId, setActiveId] = useState(null);\n  \n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 8 }}),\n    useSensor(KeyboardSensor)\n  );\n\n  const handleDragStart = (event) => {\n    setActiveId(event.active.id);\n    if (onDragStart) {\n      onDragStart(event);\n    }\n  };\n\n  const handleDragEnd = (event) => {\n    setActiveId(null);\n    if (onDragEnd) {\n      onDragEnd(event);\n    }\n  };\n\n  return (\n    <DndContext \n      sensors={sensors} \n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n    >\n      {children}\n    </DndContext>\n  );\n}\n\nDragProvider.propTypes = {\n  children: PropTypes.node.isRequired,\n  onDragEnd: PropTypes.func,\n  onDragStart: PropTypes.func,\n};\n\nexport default DragProvider;"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAiG,SAAAD,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;AAE1F,SAASmB,YAAYA,CAAAC,IAAA,EAAuC;EAAA,IAApCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAEC,WAAW,GAAAH,IAAA,CAAXG,WAAW;EAC7D,IAAAC,SAAA,GAAgC,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAAC,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAAvCI,QAAQ,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAE5B,IAAMI,OAAO,GAAG,IAAAC,gBAAU,EACxB,IAAAC,eAAS,EAACC,mBAAa,EAAE;IAAEC,oBAAoB,EAAE;MAAEC,QAAQ,EAAE;IAAE;EAAC,CAAC,CAAC,EAClE,IAAAH,eAAS,EAACI,oBAAc,CAC1B,CAAC;EAED,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAAK,EAAK;IACjCT,WAAW,CAACS,KAAK,CAACC,MAAM,CAACC,EAAE,CAAC;IAC5B,IAAIjB,WAAW,EAAE;MACfA,WAAW,CAACe,KAAK,CAAC;IACpB;EACF,CAAC;EAED,IAAMG,aAAa,GAAG,SAAhBA,aAAaA,CAAIH,KAAK,EAAK;IAC/BT,WAAW,CAAC,IAAI,CAAC;IACjB,IAAIP,SAAS,EAAE;MACbA,SAAS,CAACgB,KAAK,CAAC;IAClB;EACF,CAAC;EAED,oBACE7C,MAAA,YAAAiD,aAAA,CAAC5C,KAAA,CAAA6C,UAAU;IACTb,OAAO,EAAEA,OAAQ;IACjBP,WAAW,EAAEc,eAAgB;IAC7Bf,SAAS,EAAEmB;EAAc,GAExBpB,QACS,CAAC;AAEjB;AAEAF,YAAY,CAACyB,SAAS,GAAG;EACvBvB,QAAQ,EAAEwB,qBAAS,CAACC,IAAI,CAACC,UAAU;EACnCzB,SAAS,EAAEuB,qBAAS,CAACG,IAAI;EACzBzB,WAAW,EAAEsB,qBAAS,CAACG;AACzB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEa/B,YAAY","ignoreList":[]}
+{"version":3,"file":"drag-provider.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DragProvider","_ref","children","onDragEnd","onDragStart","collisionDetection","modifiers","_useState","useState","_useState2","_slicedToArray2","activeId","setActiveId","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","handleDragStart","event","active","id","handleDragEnd","createElement","DndContext","propTypes","PropTypes","node","isRequired","func","arrayOf","_default","exports"],"sources":["../src/drag-provider.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { DndContext, PointerSensor, KeyboardSensor, useSensor, useSensors } from '@dnd-kit/core';\n\nexport function DragProvider({ children, onDragEnd, onDragStart, collisionDetection, modifiers }) {\n  const [activeId, setActiveId] = useState(null);\n  \n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 8 }}),\n    useSensor(KeyboardSensor)\n  );\n\n  const handleDragStart = (event) => {\n    setActiveId(event.active.id);\n    if (onDragStart) {\n      onDragStart(event);\n    }\n  };\n\n  const handleDragEnd = (event) => {\n    setActiveId(null);\n    if (onDragEnd) {\n      onDragEnd(event);\n    }\n  };\n\n  return (\n    <DndContext \n      sensors={sensors} \n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      collisionDetection={collisionDetection}\n      modifiers={modifiers}\n    >\n      {children}\n    </DndContext>\n  );\n}\n\nDragProvider.propTypes = {\n  children: PropTypes.node.isRequired,\n  onDragEnd: PropTypes.func,\n  onDragStart: PropTypes.func,\n  collisionDetection: PropTypes.func,\n  modifiers: PropTypes.arrayOf(PropTypes.func),\n};\n\nexport default DragProvider;"],"mappings":"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","ignoreList":[]}

package/lib/ica-dp.js

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _droppablePlaceholder = require("./droppable-placeholder");
-var _excluded = ["id", "children", "disabled", "onRemoveAnswer"];
+var _excluded = ["id", "children", "disabled"];
 // With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
 // This component now just wraps DroppablePlaceholder with ICA specific logic
 
@@ -19,20 +19,9 @@ function ICADroppable(_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);
-  //     }
-  //   }
-  // };
 
   return /*#__PURE__*/_react["default"].createElement(_droppablePlaceholder.DroppablePlaceholder, (0, _extends2["default"])({
     id: id,
@@ -42,8 +31,7 @@ function ICADroppable(_ref) {
 ICADroppable.propTypes = {
   id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
   children: _propTypes["default"].node,
-  disabled: _propTypes["default"].bool,
-  onRemoveAnswer: _propTypes["default"].func
+  disabled: _propTypes["default"].bool
 };
 var _default = exports["default"] = ICADroppable;
 //# sourceMappingURL=ica-dp.js.map

package/lib/ica-dp.js.map

@@ -1 +1 @@
-{"version":3,"file":"ica-dp.js","names":["_react","_interopRequireDefault","require","_propTypes","_droppablePlaceholder","_excluded","ICADroppable","_ref","id","children","disabled","onRemoveAnswer","rest","_objectWithoutProperties2","createElement","DroppablePlaceholder","_extends2","propTypes","PropTypes","oneOfType","string","number","isRequired","node","bool","func","_default","exports"],"sources":["../src/ica-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 ICA specific logic\n\nexport function ICADroppable({ \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);\n  //     }\n  //   }\n  // };\n  \n  return (\n    <DroppablePlaceholder\n      id={id}\n      disabled={disabled}\n      {...rest}\n    >\n      {children}\n    </DroppablePlaceholder>\n  );\n}\n\nICADroppable.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 ICADroppable;\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,YAAYA,CAAAC,IAAA,EAMzB;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,YAAY,CAACW,SAAS,GAAG;EACvBT,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,YAAY","ignoreList":[]}
+{"version":3,"file":"ica-dp.js","names":["_react","_interopRequireDefault","require","_propTypes","_droppablePlaceholder","_excluded","ICADroppable","_ref","id","children","disabled","rest","_objectWithoutProperties2","createElement","DroppablePlaceholder","_extends2","propTypes","PropTypes","oneOfType","string","number","isRequired","node","bool","_default","exports"],"sources":["../src/ica-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 ICA specific logic\n\nexport function ICADroppable({ id, children, disabled, ...rest }) {\n  // The actual drop handling will be managed by the parent component\n  // through the DragProvider's onDragEnd callback\n\n  return (\n    <DroppablePlaceholder id={id} disabled={disabled} {...rest}>\n      {children}\n    </DroppablePlaceholder>\n  );\n}\n\nICADroppable.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n};\n\nexport default ICADroppable;\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,YAAYA,CAAAC,IAAA,EAAsC;EAAA,IAAnCC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAKC,IAAI,OAAAC,yBAAA,aAAAL,IAAA,EAAAF,SAAA;EAC5D;EACA;;EAEA,oBACEL,MAAA,YAAAa,aAAA,CAACT,qBAAA,CAAAU,oBAAoB,MAAAC,SAAA;IAACP,EAAE,EAAEA,EAAG;IAACE,QAAQ,EAAEA;EAAS,GAAKC,IAAI,GACvDF,QACmB,CAAC;AAE3B;AAEAH,YAAY,CAACU,SAAS,GAAG;EACvBR,EAAE,EAAES,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACE,MAAM,EAAEF,qBAAS,CAACG,MAAM,CAAC,CAAC,CAACC,UAAU;EACxEZ,QAAQ,EAAEQ,qBAAS,CAACK,IAAI;EACxBZ,QAAQ,EAAEO,qBAAS,CAACM;AACtB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEanB,YAAY","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/drag",
-  "version": "2.31.0-mui-update.0",
+  "version": "2.32.0-mui-update.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -12,8 +12,8 @@
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/math-rendering": "3.35.0-mui-update.0",
-    "@pie-lib/render-ui": "4.44.0-mui-update.0",
+    "@pie-lib/math-rendering": "3.36.0-mui-update.0",
+    "@pie-lib/render-ui": "4.45.0-mui-update.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
@@ -25,5 +25,5 @@
   "scripts": {},
   "author": "",
   "license": "ISC",
-  "gitHead": "23a7cb8864b947778ac7e6dffdc6fa4a74af5927"
+  "gitHead": "56f71068deecd32adaab99fd03515f1133919d9d"
 }

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

@@ -1,28 +1,56 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DroppablePlaceholder } from './droppable-placeholder';
+import PlaceHolder from './placeholder';
+import { useDroppable } from '@dnd-kit/core';
+import { styled } from '@mui/material/styles';
 
 // With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
 // This component now just wraps DroppablePlaceholder with drag-in-the-blank specific logic
 
-export function DragInTheBlankDroppable({ 
-  id, 
-  children, 
-  disabled, 
-  onDrop,
-  ...rest 
+const DroppablePlaceholderContainer = styled('div')({
+  minHeight: '100px',
+});
+
+export function DragInTheBlankDroppable({
+  children,
+  disabled,
+  classes,
+  isVerticalPool,
+  minHeight,
+  instanceId,
+  ...rest
 }) {
   // The actual drop handling will be managed by the parent component
   // through the DragProvider's onDragEnd callback
-  
+  const { setNodeRef, isOver } = useDroppable({
+     id: 'drag-in-the-blank-droppable',
+    data: {
+      type: 'MaskBlank',
+      accepts: ['MaskBlank'],
+      id: 'drag-in-the-blank-droppable',
+      toChoiceBoard: true,
+      instanceId
+    }
+  });
+
   return (
-    <DroppablePlaceholder
-      id={id}
-      disabled={disabled}
-      {...rest}
-    >
-      {children}
-    </DroppablePlaceholder>
+    <div ref={setNodeRef} >
+      <DroppablePlaceholderContainer>
+        <PlaceHolder
+          isOver={isOver}
+          choiceBoard={true}
+          className={classes}
+          isVerticalPool={isVerticalPool}
+          extraStyles={{
+            width: '100%',
+            minHeight: minHeight || 100,
+            height: 'auto',
+          }}
+        >
+          {children}
+        </PlaceHolder>
+      </DroppablePlaceholderContainer>
+    </div>
   );
 }
 
@@ -31,6 +59,7 @@ DragInTheBlankDroppable.propTypes = {
   children: PropTypes.node,
   disabled: PropTypes.bool,
   onDrop: PropTypes.func,
+  instanceId: PropTypes.string,
 };
 
 export default DragInTheBlankDroppable;

package/src/drag-provider.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { DndContext, PointerSensor, KeyboardSensor, useSensor, useSensors } from '@dnd-kit/core';
 
-export function DragProvider({ children, onDragEnd, onDragStart }) {
+export function DragProvider({ children, onDragEnd, onDragStart, collisionDetection, modifiers }) {
   const [activeId, setActiveId] = useState(null);
   
   const sensors = useSensors(
@@ -29,6 +29,8 @@ export function DragProvider({ children, onDragEnd, onDragStart }) {
       sensors={sensors} 
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
+      collisionDetection={collisionDetection}
+      modifiers={modifiers}
     >
       {children}
     </DndContext>
@@ -39,6 +41,8 @@ DragProvider.propTypes = {
   children: PropTypes.node.isRequired,
   onDragEnd: PropTypes.func,
   onDragStart: PropTypes.func,
+  collisionDetection: PropTypes.func,
+  modifiers: PropTypes.arrayOf(PropTypes.func),
 };
 
 export default DragProvider;

package/src/ica-dp.jsx

@@ -5,32 +5,12 @@ import { DroppablePlaceholder } from './droppable-placeholder';
 // With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
 // This component now just wraps DroppablePlaceholder with ICA specific logic
 
-export function ICADroppable({ 
-  id, 
-  children, 
-  disabled, 
-  onRemoveAnswer,
-  ...rest 
-}) {
+export function ICADroppable({ id, children, disabled, ...rest }) {
   // 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);
-  //     }
-  //   }
-  // };
-  
+
   return (
-    <DroppablePlaceholder
-      id={id}
-      disabled={disabled}
-      {...rest}
-    >
+    <DroppablePlaceholder id={id} disabled={disabled} {...rest}>
       {children}
     </DroppablePlaceholder>
   );
@@ -40,7 +20,6 @@ ICADroppable.propTypes = {
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   children: PropTypes.node,
   disabled: PropTypes.bool,
-  onRemoveAnswer: PropTypes.func,
 };
 
 export default ICADroppable;