@pie-lib/drag 3.1.0-next.2 → 3.1.0-next.36

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.1.0-next.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@3.1.0-next.2...@pie-lib/drag@3.1.0-next.4) (2026-01-27)
+
+**Note:** Version bump only for package @pie-lib/drag
+
+
+
+
+
 # [3.1.0-next.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@3.1.0-next.1...@pie-lib/drag@3.1.0-next.2) (2026-01-26)
 
 **Note:** Version bump only for package @pie-lib/drag

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

@@ -0,0 +1,67 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragInTheBlankDroppable = DragInTheBlankDroppable;
+exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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 children = _ref.children,
+    disabled = _ref.disabled,
+    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
+  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,
+  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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,68 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragProvider = DragProvider;
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _core = require("@dnd-kit/core");
+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 DragProvider(_ref) {
+  var children = _ref.children,
+    onDragEnd = _ref.onDragEnd,
+    onDragStart = _ref.onDragStart,
+    collisionDetection = _ref.collisionDetection,
+    modifiers = _ref.modifiers,
+    autoScroll = _ref.autoScroll;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    activeId = _useState2[0],
+    setActiveId = _useState2[1];
+  var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor, {
+    activationConstraint: {
+      distance: 8
+    }
+  }), (0, _core.useSensor)(_core.KeyboardSensor));
+  var handleDragStart = function handleDragStart(event) {
+    setActiveId(event.active.id);
+    if (onDragStart) {
+      onDragStart(event);
+    }
+  };
+  var handleDragEnd = function handleDragEnd(event) {
+    setActiveId(null);
+    if (onDragEnd) {
+      onDragEnd(event);
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
+    sensors: sensors,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    collisionDetection: collisionDetection,
+    modifiers: modifiers,
+    autoScroll: autoScroll
+  }, children);
+}
+DragProvider.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  onDragEnd: _propTypes["default"].func,
+  onDragStart: _propTypes["default"].func,
+  collisionDetection: _propTypes["default"].func,
+  modifiers: _propTypes["default"].arrayOf(_propTypes["default"].func),
+  autoScroll: _propTypes["default"].object
+};
+var _default = exports["default"] = DragProvider;
+//# sourceMappingURL=drag-provider.js.map

package/lib/drag-provider.js.map

@@ -0,0 +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","collisionDetection","modifiers","autoScroll","_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","object","_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, autoScroll }) {\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      autoScroll={autoScroll}\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  autoScroll: PropTypes.object,\n};\n\nexport default DragProvider;"],"mappings":"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","ignoreList":[]}

package/lib/drag-type.js

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

package/lib/drag-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-type.js","names":["types","ica","ml","db"],"sources":["../src/drag-type.js"],"sourcesContent":["export default {\n  types: {\n    ica: 'dnd-kit-response',\n    ml: 'Answer',\n    db: 'MaskBlank',\n  },\n};\n"],"mappings":";;;;;;;oCAAe;EACbA,KAAK,EAAE;IACLC,GAAG,EAAE,kBAAkB;IACvBC,EAAE,EAAE,QAAQ;IACZC,EAAE,EAAE;EACN;AACF,CAAC","ignoreList":[]}

package/lib/draggable-choice.js

@@ -0,0 +1,90 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DRAG_TYPE = void 0;
+exports.DraggableChoice = DraggableChoice;
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _core = require("@dnd-kit/core");
+var _colors = require("@mui/material/colors");
+var DRAG_TYPE = exports.DRAG_TYPE = 'CHOICE';
+var StyledChoice = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    backgroundColor: theme.palette.background.paper,
+    border: "solid 1px ".concat(_colors.grey[400]),
+    padding: theme.spacing(1),
+    minHeight: '30px',
+    minWidth: theme.spacing(20),
+    maxWidth: theme.spacing(75),
+    cursor: 'grab',
+    '&:active': {
+      cursor: 'grabbing'
+    }
+  };
+});
+function DraggableChoice(_ref2) {
+  var choice = _ref2.choice,
+    children = _ref2.children,
+    className = _ref2.className,
+    disabled = _ref2.disabled,
+    category = _ref2.category,
+    alternateResponseIndex = _ref2.alternateResponseIndex,
+    choiceIndex = _ref2.choiceIndex,
+    onRemoveChoice = _ref2.onRemoveChoice,
+    type = _ref2.type,
+    id = _ref2.id;
+  var _useDraggable = (0, _core.useDraggable)({
+      id: id || choice.id,
+      // id to be used for dnd-kit
+      disabled: disabled,
+      categoryId: category === null || category === void 0 ? void 0 : category.id,
+      alternateResponseIndex: alternateResponseIndex,
+      data: {
+        id: choice.id,
+        value: choice.value,
+        choiceId: choice.id,
+        from: category === null || category === void 0 ? void 0 : category.id,
+        categoryId: category === null || category === void 0 ? void 0 : category.id,
+        alternateResponseIndex: alternateResponseIndex,
+        choiceIndex: choiceIndex,
+        onRemoveChoice: onRemoveChoice,
+        type: type
+      }
+    }),
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    setNodeRef = _useDraggable.setNodeRef,
+    isDragging = _useDraggable.isDragging;
+  return /*#__PURE__*/_react["default"].createElement(StyledChoice, (0, _extends2["default"])({
+    ref: setNodeRef,
+    className: className,
+    isDragging: isDragging
+  }, attributes, listeners), children);
+}
+DraggableChoice.propTypes = {
+  choice: _propTypes["default"].shape({
+    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+    value: _propTypes["default"].any
+  }).isRequired,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
+  className: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  category: _propTypes["default"].shape({
+    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  }),
+  alternateResponseIndex: _propTypes["default"].number,
+  choiceIndex: _propTypes["default"].number,
+  onRemoveChoice: _propTypes["default"].func,
+  type: _propTypes["default"].string,
+  id: _propTypes["default"].string
+};
+var _default = exports["default"] = DraggableChoice;
+//# sourceMappingURL=draggable-choice.js.map

package/lib/draggable-choice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable-choice.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_core","_colors","DRAG_TYPE","exports","StyledChoice","styled","_ref","theme","backgroundColor","palette","background","paper","border","concat","grey","padding","spacing","minHeight","minWidth","maxWidth","cursor","DraggableChoice","_ref2","choice","children","className","disabled","category","alternateResponseIndex","choiceIndex","onRemoveChoice","type","id","_useDraggable","useDraggable","categoryId","data","value","choiceId","from","attributes","listeners","setNodeRef","isDragging","createElement","_extends2","ref","propTypes","PropTypes","shape","oneOfType","string","number","isRequired","any","arrayOf","node","bool","func","_default"],"sources":["../src/draggable-choice.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { useDraggable } from '@dnd-kit/core';\nimport { grey } from '@mui/material/colors';\n\nexport const DRAG_TYPE = 'CHOICE';\n\nconst StyledChoice = styled('div')(({ theme }) => ({\n  backgroundColor: theme.palette.background.paper,\n  border: `solid 1px ${grey[400]}`,\n  padding: theme.spacing(1),\n  minHeight: '30px',\n  minWidth: theme.spacing(20),\n  maxWidth: theme.spacing(75),\n  cursor: 'grab',\n  '&:active': {\n    cursor: 'grabbing',\n  },\n}));\n\nexport function DraggableChoice({\n  choice,\n  children,\n  className,\n  disabled,\n  category,\n  alternateResponseIndex,\n  choiceIndex,\n  onRemoveChoice,\n  type,\n  id\n}) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    isDragging\n  } = useDraggable({\n    id: id || choice.id, // id to be used for dnd-kit\n    disabled: disabled,\n    categoryId: category?.id,\n    alternateResponseIndex,\n    data: {\n      id: choice.id,\n      value: choice.value,\n      choiceId: choice.id,\n      from: category?.id,\n      categoryId: category?.id,\n      alternateResponseIndex,\n      choiceIndex,\n      onRemoveChoice,\n      type\n    }\n  });\n\n  return (\n    <StyledChoice\n      ref={setNodeRef}\n      className={className}\n      isDragging={isDragging}\n      {...attributes}\n      {...listeners}\n    >\n      {children}\n    </StyledChoice>\n  );\n}\n\nDraggableChoice.propTypes = {\n  choice: PropTypes.shape({\n    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n    value: PropTypes.any,\n  }).isRequired,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n  category: PropTypes.shape({\n    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  }),\n  alternateResponseIndex: PropTypes.number,\n  choiceIndex: PropTypes.number,\n  onRemoveChoice: PropTypes.func,\n  type: PropTypes.string,\n  id: PropTypes.string,\n};\n\nexport default DraggableChoice;\n"],"mappings":"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","ignoreList":[]}

package/lib/droppable-placeholder.js

@@ -0,0 +1,51 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DroppablePlaceholder = DroppablePlaceholder;
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _placeholder = _interopRequireDefault(require("./placeholder"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _core = require("@dnd-kit/core");
+var preventInteractionStyle = {
+  flex: 1
+};
+function DroppablePlaceholder(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    classes = _ref.classes,
+    isVerticalPool = _ref.isVerticalPool,
+    minHeight = _ref.minHeight;
+  var _useDroppable = (0, _core.useDroppable)({
+      id: id,
+      disabled: disabled
+    }),
+    setNodeRef = _useDroppable.setNodeRef,
+    isOver = _useDroppable.isOver;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: setNodeRef,
+    style: preventInteractionStyle
+  }, /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
+    disabled: disabled,
+    isOver: isOver,
+    choiceBoard: true,
+    className: classes,
+    isVerticalPool: isVerticalPool,
+    minHeight: minHeight
+  }, children));
+}
+DroppablePlaceholder.propTypes = {
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
+  disabled: _propTypes["default"].bool,
+  classes: _propTypes["default"].object,
+  isVerticalPool: _propTypes["default"].bool,
+  minHeight: _propTypes["default"].number
+};
+var _default = exports["default"] = DroppablePlaceholder;
+//# sourceMappingURL=droppable-placeholder.js.map

package/lib/droppable-placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"droppable-placeholder.js","names":["_react","_interopRequireDefault","require","_placeholder","_propTypes","_core","preventInteractionStyle","flex","DroppablePlaceholder","_ref","id","children","disabled","classes","isVerticalPool","minHeight","_useDroppable","useDroppable","setNodeRef","isOver","createElement","ref","style","choiceBoard","className","propTypes","PropTypes","oneOfType","string","number","isRequired","arrayOf","node","bool","object","_default","exports"],"sources":["../src/droppable-placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport PlaceHolder from './placeholder';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\n\nconst preventInteractionStyle = {\n  flex: 1,\n};\n\nexport function DroppablePlaceholder({ \n  id,\n  children, \n  disabled, \n  classes, \n  isVerticalPool, \n  minHeight \n}) {\n  const { setNodeRef, isOver } = useDroppable({ \n    id,\n    disabled \n  });\n\n  return (\n    <div ref={setNodeRef} style={preventInteractionStyle}>\n      <PlaceHolder\n        disabled={disabled}\n        isOver={isOver}\n        choiceBoard={true}\n        className={classes}\n        isVerticalPool={isVerticalPool}\n        minHeight={minHeight}\n      >\n        {children}\n      </PlaceHolder>\n    </div>\n  );\n}\n\nDroppablePlaceholder.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n  disabled: PropTypes.bool,\n  classes: PropTypes.object,\n  isVerticalPool: PropTypes.bool,\n  minHeight: PropTypes.number,\n};\n\nexport default DroppablePlaceholder;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAEA,IAAMI,uBAAuB,GAAG;EAC9BC,IAAI,EAAE;AACR,CAAC;AAEM,SAASC,oBAAoBA,CAAAC,IAAA,EAOjC;EAAA,IANDC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,cAAc,GAAAL,IAAA,CAAdK,cAAc;IACdC,SAAS,GAAAN,IAAA,CAATM,SAAS;EAET,IAAAC,aAAA,GAA+B,IAAAC,kBAAY,EAAC;MAC1CP,EAAE,EAAFA,EAAE;MACFE,QAAQ,EAARA;IACF,CAAC,CAAC;IAHMM,UAAU,GAAAF,aAAA,CAAVE,UAAU;IAAEC,MAAM,GAAAH,aAAA,CAANG,MAAM;EAK1B,oBACEnB,MAAA,YAAAoB,aAAA;IAAKC,GAAG,EAAEH,UAAW;IAACI,KAAK,EAAEhB;EAAwB,gBACnDN,MAAA,YAAAoB,aAAA,CAACjB,YAAA,WAAW;IACVS,QAAQ,EAAEA,QAAS;IACnBO,MAAM,EAAEA,MAAO;IACfI,WAAW,EAAE,IAAK;IAClBC,SAAS,EAAEX,OAAQ;IACnBC,cAAc,EAAEA,cAAe;IAC/BC,SAAS,EAAEA;EAAU,GAEpBJ,QACU,CACV,CAAC;AAEV;AAEAH,oBAAoB,CAACiB,SAAS,GAAG;EAC/Bf,EAAE,EAAEgB,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACE,MAAM,EAAEF,qBAAS,CAACG,MAAM,CAAC,CAAC,CAACC,UAAU;EACxEnB,QAAQ,EAAEe,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACK,OAAO,CAACL,qBAAS,CAACM,IAAI,CAAC,EAAEN,qBAAS,CAACM,IAAI,CAAC,CAAC,CAACF,UAAU;EAC7FlB,QAAQ,EAAEc,qBAAS,CAACO,IAAI;EACxBpB,OAAO,EAAEa,qBAAS,CAACQ,MAAM;EACzBpB,cAAc,EAAEY,qBAAS,CAACO,IAAI;EAC9BlB,SAAS,EAAEW,qBAAS,CAACG;AACvB,CAAC;AAAC,IAAAM,QAAA,GAAAC,OAAA,cAEa5B,oBAAoB","ignoreList":[]}

package/lib/ica-dp.js

@@ -0,0 +1,38 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICADroppable = ICADroppable;
+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"];
+// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
+// This component now just wraps DroppablePlaceholder with ICA specific logic
+
+function ICADroppable(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    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);
+}
+ICADroppable.propTypes = {
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+  children: _propTypes["default"].node,
+  disabled: _propTypes["default"].bool
+};
+var _default = exports["default"] = ICADroppable;
+//# sourceMappingURL=ica-dp.js.map

package/lib/ica-dp.js.map

@@ -0,0 +1 @@
+{"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/lib/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DragDroppablePlaceholder", {
+  enumerable: true,
+  get: function get() {
+    return _dragInTheBlankDp["default"];
+  }
+});
+Object.defineProperty(exports, "DragProvider", {
+  enumerable: true,
+  get: function get() {
+    return _dragProvider["default"];
+  }
+});
+Object.defineProperty(exports, "DraggableChoice", {
+  enumerable: true,
+  get: function get() {
+    return _draggableChoice["default"];
+  }
+});
+Object.defineProperty(exports, "ICADroppablePlaceholder", {
+  enumerable: true,
+  get: function get() {
+    return _icaDp["default"];
+  }
+});
+Object.defineProperty(exports, "MatchDroppablePlaceholder", {
+  enumerable: true,
+  get: function get() {
+    return _matchListDp["default"];
+  }
+});
+Object.defineProperty(exports, "PlaceHolder", {
+  enumerable: true,
+  get: function get() {
+    return _placeholder["default"];
+  }
+});
+Object.defineProperty(exports, "swap", {
+  enumerable: true,
+  get: function get() {
+    return _swap["default"];
+  }
+});
+exports.uid = void 0;
+var _placeholder = _interopRequireDefault(require("./placeholder"));
+var _draggableChoice = _interopRequireDefault(require("./draggable-choice"));
+var _dragProvider = _interopRequireDefault(require("./drag-provider"));
+var _swap = _interopRequireDefault(require("./swap"));
+var uid = _interopRequireWildcard(require("./uid-context"));
+exports.uid = uid;
+var _matchListDp = _interopRequireDefault(require("./match-list-dp"));
+var _dragInTheBlankDp = _interopRequireDefault(require("./drag-in-the-blank-dp"));
+var _icaDp = _interopRequireDefault(require("./ica-dp"));
+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); }
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,50 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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
+
+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);
+  //     }
+  //   }
+  // };
+
+  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
+};
+var _default = exports["default"] = MatchListDroppable;
+//# sourceMappingURL=match-list-dp.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,142 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+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"));
+require("core-js/modules/es.array.concat.js");
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@mui/material/styles");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _renderUi = require("@pie-lib/render-ui");
+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 {
+    '&.placeholder': {
+      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,
+    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,
+    extraStyles = props.extraStyles;
+  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
+  // 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 ? 'categorizeBoard' : 'board';
+  return /*#__PURE__*/_react["default"].createElement(StyledPlaceholder, {
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      minHeight: minHeight
+    }, extraStyles),
+    className: (0, _classnames["default"])(choiceBoard ? boardStyle : names, isVerticalPool && 'verticalPool')
+  }, children);
+};
+PlaceHolder.propTypes = {
+  choiceBoard: _propTypes["default"].bool,
+  grid: _propTypes["default"].shape({
+    columns: _propTypes["default"].number,
+    rows: _propTypes["default"].number,
+    // if a different value then 1fr is wanted
+    rowsRepeatValue: _propTypes["default"].string
+  }),
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
+  className: _propTypes["default"].string,
+  isOver: _propTypes["default"].bool,
+  index: _propTypes["default"].number,
+  type: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  isCategorize: _propTypes["default"].bool,
+  isVerticalPool: _propTypes["default"].bool,
+  minHeight: _propTypes["default"].number
+};
+var _default = exports["default"] = PlaceHolder;
+//# sourceMappingURL=placeholder.js.map

package/lib/placeholder.js.map

@@ -0,0 +1 @@
+{"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","extraStyles","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  '&.placeholder': {\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  },\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    extraStyles\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, ...extraStyles }}\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

@@ -0,0 +1,169 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.parse-float.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _core = require("@dnd-kit/core");
+var _renderUi = require("@pie-lib/render-ui");
+var _mathRendering = require("@pie-lib/math-rendering");
+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.
+    // It is styled to be identical to the drag-in-the-blank chip
+    backgroundColor: _renderUi.color.white(),
+    border: "1px solid ".concat(_renderUi.color.text()),
+    color: _renderUi.color.text(),
+    alignItems: 'center',
+    display: 'inline-flex',
+    height: 'initial',
+    minHeight: '32px',
+    fontSize: 'inherit',
+    whiteSpace: 'pre-wrap',
+    maxWidth: '374px',
+    borderRadius: '3px',
+    padding: '12px'
+  },
+  ica: {
+    backgroundColor: _renderUi.color.background(),
+    border: "1px solid ".concat(_renderUi.color.borderDark()),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '28px',
+    padding: '0 3px',
+    marginLeft: 2,
+    marginTop: 2,
+    width: 'fit-content'
+  },
+  categorize: {
+    color: _renderUi.color.text(),
+    backgroundColor: _renderUi.color.background(),
+    padding: '16px',
+    borderRadius: '4px',
+    border: '1px solid'
+  },
+  matchList: {
+    color: _renderUi.color.text(),
+    backgroundColor: _renderUi.color.background(),
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1'
+  },
+  placementOrdering: {
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1',
+    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;
+  }
+
+  // Legacy format support
+  switch (dragData.itemType) {
+    case 'MaskBlank':
+      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 dragData.value;
+    case 'Tile':
+      return dragData.value;
+    case 'categorize':
+      return dragData.value;
+    default:
+      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);
+  }
+
+  // Default style for choice items
+  return _objectSpread(_objectSpread({}, baseStyle), styles.categorize);
+};
+var PreviewComponent = function PreviewComponent() {
+  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 (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);
+    }
+  }, [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: "prompt-label",
+    prompt: prompt,
+    tagName: "span"
+  })));
+};
+var _default = exports["default"] = PreviewComponent;
+//# sourceMappingURL=preview-component.js.map

package/lib/preview-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-component.js","names":["_react","_interopRequireWildcard","require","_core","_renderUi","_mathRendering","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","styles","maskBlank","backgroundColor","color","white","border","concat","text","alignItems","display","height","minHeight","fontSize","whiteSpace","maxWidth","borderRadius","padding","ica","background","borderDark","justifyContent","marginLeft","marginTop","width","categorize","matchList","boxSizing","placementOrdering","getPrompt","dragData","_dragData$choice","undefined","choiceId","value","itemType","choice","getCustomStyle","baseStyle","cursor","opacity","transform","PreviewComponent","_active$data","_useDndContext","useDndContext","active","_useState","useState","_useState2","_slicedToArray2","zoomLevel","setZoomLevel","root","useRef","data","current","isActive","useEffect","renderMath","zoomAffectedElement","document","querySelector","body","parseFloat","getComputedStyle","zoom","customStyle","prompt","createElement","DragOverlay","ref","style","PreviewPrompt","className","tagName","_default","exports"],"sources":["../src/preview-component.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { DragOverlay, useDndContext } from '@dnd-kit/core';\nimport { PreviewPrompt, color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst styles = {\n  maskBlank: {\n    // this style is applied only on small screens and for touch devices when dragging, for drag-in-the-blank.\n    // It is styled to be identical to the drag-in-the-blank chip\n    backgroundColor: color.white(),\n    border: `1px solid ${color.text()}`,\n    color: color.text(),\n    alignItems: 'center',\n    display: 'inline-flex',\n    height: 'initial',\n    minHeight: '32px',\n    fontSize: 'inherit',\n    whiteSpace: 'pre-wrap',\n    maxWidth: '374px',\n    borderRadius: '3px',\n    padding: '12px',\n  },\n  ica: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.borderDark()}`,\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 = (dragData) => {\n  if (!dragData) return undefined;\n\n  // Handle different drag data structures based on the component type\n  if (dragData.choiceId) {\n    // DraggableChoice format\n    return dragData.value;\n  }\n\n  // Legacy format support\n  switch (dragData.itemType) {\n    case 'MaskBlank':\n      return dragData.choice?.value;\n    case 'dnd-kit-response':\n      return dragData.value;\n    case 'Answer':\n      return dragData.value;\n    case 'Tile':\n      return dragData.value;\n    case 'categorize':\n      return dragData.value;\n    default:\n      return dragData.value;\n  }\n};\n\nconst getCustomStyle = (dragData) => {\n  if (!dragData) return {};\n\n  const baseStyle = {\n    cursor: 'grabbing',\n    opacity: 0.8,\n    transform: 'rotate(5deg)', // Slight rotation for visual feedback\n  };\n\n  // Apply specific styles based on item type\n  if (dragData.itemType === 'MaskBlank') {\n    return { ...baseStyle, ...styles.maskBlank };\n  }\n  if (dragData.itemType === 'categorize') {\n    return { ...baseStyle, ...styles.categorize };\n  }\n  if (dragData.itemType === 'Answer') {\n    return { ...baseStyle, ...styles.matchList };\n  }\n  if (dragData.itemType === 'Tile') {\n    return { ...baseStyle, ...styles.placementOrdering };\n  }\n  if (dragData.itemType === 'dnd-kit-response') {\n    return { ...baseStyle, ...styles.ica };\n  }\n\n  // Default style for choice items\n  return { ...baseStyle, ...styles.categorize };\n};\n\nconst PreviewComponent = () => {\n  const { active } = useDndContext();\n  const [zoomLevel, setZoomLevel] = useState(1);\n  const root = useRef(null);\n\n  const dragData = active?.data?.current;\n  const isActive = !!active;\n\n  useEffect(() => {\n    if (isActive && root.current) {\n      renderMath(root.current);\n\n      // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding\n      const zoomAffectedElement = document.querySelector('.padding') || document.body;\n      setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);\n    }\n  }, [isActive, dragData]);\n\n  const customStyle = getCustomStyle(dragData);\n  const prompt = getPrompt(dragData);\n\n  return (\n    <DragOverlay>\n      {isActive && prompt && (\n        <div ref={root} style={customStyle}>\n          <PreviewPrompt className=\"prompt-label\" prompt={prompt} tagName=\"span\" />\n        </div>\n      )}\n    </DragOverlay>\n  );\n};\n\nexport default PreviewComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/swap.js

@@ -0,0 +1,21 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.array.concat.js");
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _default = exports["default"] = function _default(arr, fromIndex, toIndex) {
+  if (!arr || arr.length <= 1 || fromIndex === undefined || toIndex === undefined) {
+    throw new Error("swap requires a non-empty array, fromIndex, toIndex: ".concat(arr, ", ").concat(fromIndex, " ").concat(toIndex));
+  }
+  var update = (0, _cloneDeep["default"])(arr);
+  var tmp = arr[toIndex];
+  update[toIndex] = update[fromIndex];
+  update[fromIndex] = tmp;
+  return update;
+};
+//# sourceMappingURL=swap.js.map

package/lib/swap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swap.js","names":["_cloneDeep","_interopRequireDefault","require","_default","exports","arr","fromIndex","toIndex","length","undefined","Error","concat","update","cloneDeep","tmp"],"sources":["../src/swap.js"],"sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\n\nexport default (arr, fromIndex, toIndex) => {\n  if (!arr || arr.length <= 1 || fromIndex === undefined || toIndex === undefined) {\n    throw new Error(`swap requires a non-empty array, fromIndex, toIndex: ${arr}, ${fromIndex} ${toIndex}`);\n  }\n\n  const update = cloneDeep(arr);\n  const tmp = arr[toIndex];\n  update[toIndex] = update[fromIndex];\n  update[fromIndex] = tmp;\n\n  return update;\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAyC,IAAAC,QAAA,GAAAC,OAAA,cAE1B,SAAAD,SAACE,GAAG,EAAEC,SAAS,EAAEC,OAAO,EAAK;EAC1C,IAAI,CAACF,GAAG,IAAIA,GAAG,CAACG,MAAM,IAAI,CAAC,IAAIF,SAAS,KAAKG,SAAS,IAAIF,OAAO,KAAKE,SAAS,EAAE;IAC/E,MAAM,IAAIC,KAAK,yDAAAC,MAAA,CAAyDN,GAAG,QAAAM,MAAA,CAAKL,SAAS,OAAAK,MAAA,CAAIJ,OAAO,CAAE,CAAC;EACzG;EAEA,IAAMK,MAAM,GAAG,IAAAC,qBAAS,EAACR,GAAG,CAAC;EAC7B,IAAMS,GAAG,GAAGT,GAAG,CAACE,OAAO,CAAC;EACxBK,MAAM,CAACL,OAAO,CAAC,GAAGK,MAAM,CAACN,SAAS,CAAC;EACnCM,MAAM,CAACN,SAAS,CAAC,GAAGQ,GAAG;EAEvB,OAAOF,MAAM;AACf,CAAC","ignoreList":[]}

package/lib/uid-context.js

@@ -0,0 +1,28 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withUid = exports.generateId = exports.Provider = exports.Consumer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.number.to-fixed.js");
+var _react = _interopRequireDefault(require("react"));
+var _React$createContext = /*#__PURE__*/_react["default"].createContext(-1),
+  Consumer = exports.Consumer = _React$createContext.Consumer,
+  Provider = exports.Provider = _React$createContext.Provider;
+var generateId = exports.generateId = function generateId() {
+  return (Math.random() * 1000001).toFixed(0);
+};
+var withUid = exports.withUid = function withUid(Component) {
+  var Wrapped = function Wrapped(props) {
+    return /*#__PURE__*/_react["default"].createElement(Consumer, null, function (uid) {
+      return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, props, {
+        uid: uid
+      }));
+    });
+  };
+  return Wrapped;
+};
+//# sourceMappingURL=uid-context.js.map

package/lib/uid-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uid-context.js","names":["_react","_interopRequireDefault","require","_React$createContext","React","createContext","Consumer","exports","Provider","generateId","Math","random","toFixed","withUid","Component","Wrapped","props","createElement","uid","_extends2"],"sources":["../src/uid-context.js"],"sourcesContent":["import React from 'react';\n\nconst { Consumer, Provider } = React.createContext(-1);\n\nexport { Provider, Consumer };\n\nexport const generateId = () => (Math.random() * 1000001).toFixed(0);\n\nexport const withUid = (Component) => {\n  const Wrapped = (props) => <Consumer>{(uid) => <Component {...props} uid={uid} />}</Consumer>;\n\n  return Wrapped;\n};\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,oBAAA,gBAA+BC,iBAAK,CAACC,aAAa,CAAC,CAAC,CAAC,CAAC;EAA9CC,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAAH,oBAAA,CAARG,QAAQ;EAAEE,QAAQ,GAAAD,OAAA,CAAAC,QAAA,GAAAL,oBAAA,CAARK,QAAQ;AAInB,IAAMC,UAAU,GAAAF,OAAA,CAAAE,UAAA,GAAG,SAAbA,UAAUA,CAAA;EAAA,OAAS,CAACC,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,OAAO,EAAEC,OAAO,CAAC,CAAC,CAAC;AAAA;AAE7D,IAAMC,OAAO,GAAAN,OAAA,CAAAM,OAAA,GAAG,SAAVA,OAAOA,CAAIC,SAAS,EAAK;EACpC,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAIC,KAAK;IAAA,oBAAKhB,MAAA,YAAAiB,aAAA,CAACX,QAAQ,QAAE,UAACY,GAAG;MAAA,oBAAKlB,MAAA,YAAAiB,aAAA,CAACH,SAAS,MAAAK,SAAA,iBAAKH,KAAK;QAAEE,GAAG,EAAEA;MAAI,EAAE,CAAC;IAAA,CAAW,CAAC;EAAA;EAE7F,OAAOH,OAAO;AAChB,CAAC","ignoreList":[]}

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@pie-lib/drag",
-  "version": "3.1.0-next.2",
+  "version": "3.1.0-next.36+33bfeb18",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@dnd-kit/core": "6.1.0",
-    "@dnd-kit/sortable": "8.0.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/math-rendering": "4.1.0-next.1",
-    "@pie-lib/render-ui": "5.1.0-next.2",
+    "@pie-lib/math-rendering": "^4.1.0-next.36+33bfeb18",
+    "@pie-lib/render-ui": "^5.1.0-next.36+33bfeb18",
     "classnames": "^2.2.6",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.23",
     "prop-types": "^15.7.2",
     "react": "^18.2.0"
   },
@@ -25,5 +25,5 @@
   "scripts": {},
   "author": "",
   "license": "ISC",
-  "gitHead": "04c639af6e49d1881bf3244ebb3940171c26bd3e"
+  "gitHead": "33bfeb18392e0e53d66d3f0413e02880561816b2"
 }

package/src/preview-component.jsx

@@ -62,7 +62,7 @@ const getPrompt = (dragData) => {
     // DraggableChoice format
     return dragData.value;
   }
-  
+
   // Legacy format support
   switch (dragData.itemType) {
     case 'MaskBlank':
@@ -135,7 +135,7 @@ const PreviewComponent = () => {
     <DragOverlay>
       {isActive && prompt && (
         <div ref={root} style={customStyle}>
-          <PreviewPrompt className="label" prompt={prompt} tagName="span" />
+          <PreviewPrompt className="prompt-label" prompt={prompt} tagName="span" />
         </div>
       )}
     </DragOverlay>