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

package/lib/preview-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/preview-component.jsx"],"names":["styles","maskBlank","backgroundColor","color","white","border","text","alignItems","display","height","minHeight","fontSize","whiteSpace","maxWidth","borderRadius","padding","ica","background","borderDark","justifyContent","marginLeft","marginTop","width","categorize","matchList","boxSizing","placementOrdering","getPrompt","itemType","item","choice","value","undefined","getCustomStyle","touchPosition","style","transform","x","y","top","left","position","PreviewComponent","preview","setTouchPosition","zoomLevel","setZoomLevel","handleTouchMove","event","touches","length","touch","touchOffset","clientX","clientY","root","current","zoomAffectedElement","document","querySelector","body","parseFloat","getComputedStyle","zoom","touchMoveListener","window","addEventListener","removeEventListener","customStyle","prompt"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { usePreview } from 'react-dnd-multi-backend';\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 = (itemType, item) => {\n  switch (itemType) {\n    // DRAG-IN-THE-BLANK\n    case 'MaskBlank':\n      return item?.choice?.value;\n    // IMAGE-CLOZE-ASSOCIATION\n    case 'react-dnd-response':\n      return item?.value;\n    // MATCH-LIST\n    case 'Answer':\n      return item?.value;\n    // PLACEMENT-ORDERING\n    case 'Tile':\n      return item?.value;\n    default:\n      return item?.itemType === 'categorize' ? item?.value : undefined;\n  }\n};\n\nconst getCustomStyle = (itemType, item, touchPosition, style) => {\n  const transform = `translate(${touchPosition.x}px, ${touchPosition.y}px)`;\n  const top = style?.top || 0;\n  const left = style?.left || 0;\n  const position = style?.position || 'fixed';\n\n  return {\n    position,\n    top,\n    left,\n    transform,\n    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),\n    ...(item?.itemType === 'categorize' ? styles.categorize : {}),\n    ...(itemType === 'Answer' ? styles.matchList : {}),\n    ...(itemType === 'Tile' ? styles.placementOrdering : {}),\n    ...(itemType === 'react-dnd-response' ? styles.ica : {}),\n  };\n};\n\nconst PreviewComponent = () => {\n  const preview = usePreview();\n  const { itemType, item, style, display } = preview;\n  const [touchPosition, setTouchPosition] = useState({ x: 0, y: 0 });\n  const [zoomLevel, setZoomLevel] = useState(1);\n\n  const handleTouchMove = useCallback(\n    (event) => {\n      if (event.touches.length > 0) {\n        const touch = event.touches[0];\n        const touchOffset = 1;\n        setTouchPosition({\n          x: (touch.clientX + touchOffset) / zoomLevel,\n          y: (touch.clientY + touchOffset) / zoomLevel,\n        });\n      }\n    },\n    [zoomLevel],\n  );\n\n  const root = useRef(null);\n\n  useEffect(() => {\n    if (display && 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\n      setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);\n    }\n  }, [display, item?.choice?.value, item?.value, itemType, item]);\n\n  useEffect(() => {\n    const touchMoveListener = (event) => handleTouchMove(event);\n    if (display) {\n      window.addEventListener('touchmove', touchMoveListener);\n    }\n    return () => {\n      window.removeEventListener('touchmove', touchMoveListener);\n    };\n  }, [display, handleTouchMove]);\n\n  if (!display) {\n    return null;\n  }\n\n  const customStyle = getCustomStyle(itemType, item, touchPosition, style);\n\n  const prompt = getPrompt(itemType, item);\n\n  return (\n    <div ref={root} style={customStyle}>\n      <PreviewPrompt className=\"label\" prompt={prompt} tagName=\"span\" />\n    </div>\n  );\n};\n\nexport default PreviewComponent;\n"],"file":"preview-component.js"}
+{"version":3,"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=\"label\" prompt={prompt} tagName=\"span\" />\n        </div>\n      )}\n    </DragOverlay>\n  );\n};\n\nexport default PreviewComponent;\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAAqD,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;AAAA,SAAAmB,QAAApB,CAAA,EAAAG,CAAA,QAAAF,CAAA,GAAAgB,MAAA,CAAAI,IAAA,CAAArB,CAAA,OAAAiB,MAAA,CAAAK,qBAAA,QAAAhB,CAAA,GAAAW,MAAA,CAAAK,qBAAA,CAAAtB,CAAA,GAAAG,CAAA,KAAAG,CAAA,GAAAA,CAAA,CAAAiB,MAAA,WAAApB,CAAA,WAAAc,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAG,CAAA,EAAAqB,UAAA,OAAAvB,CAAA,CAAAwB,IAAA,CAAAC,KAAA,CAAAzB,CAAA,EAAAK,CAAA,YAAAL,CAAA;AAAA,SAAA0B,cAAA3B,CAAA,aAAAG,CAAA,MAAAA,CAAA,GAAAyB,SAAA,CAAAC,MAAA,EAAA1B,CAAA,UAAAF,CAAA,WAAA2B,SAAA,CAAAzB,CAAA,IAAAyB,SAAA,CAAAzB,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAH,MAAA,CAAAhB,CAAA,OAAA6B,OAAA,WAAA3B,CAAA,QAAA4B,gBAAA,aAAA/B,CAAA,EAAAG,CAAA,EAAAF,CAAA,CAAAE,CAAA,SAAAc,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAjC,CAAA,EAAAiB,MAAA,CAAAe,yBAAA,CAAA/B,CAAA,KAAAmB,OAAA,CAAAH,MAAA,CAAAhB,CAAA,GAAA6B,OAAA,WAAA3B,CAAA,IAAAc,MAAA,CAAAC,cAAA,CAAAlB,CAAA,EAAAG,CAAA,EAAAc,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAE,CAAA,iBAAAH,CAAA;AAErD,IAAMkC,MAAM,GAAG;EACbC,SAAS,EAAE;IACT;IACA;IACAC,eAAe,EAAEC,eAAK,CAACC,KAAK,CAAC,CAAC;IAC9BC,MAAM,eAAAC,MAAA,CAAeH,eAAK,CAACI,IAAI,CAAC,CAAC,CAAE;IACnCJ,KAAK,EAAEA,eAAK,CAACI,IAAI,CAAC,CAAC;IACnBC,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAE,aAAa;IACtBC,MAAM,EAAE,SAAS;IACjBC,SAAS,EAAE,MAAM;IACjBC,QAAQ,EAAE,SAAS;IACnBC,UAAU,EAAE,UAAU;IACtBC,QAAQ,EAAE,OAAO;IACjBC,YAAY,EAAE,KAAK;IACnBC,OAAO,EAAE;EACX,CAAC;EACDC,GAAG,EAAE;IACHf,eAAe,EAAEC,eAAK,CAACe,UAAU,CAAC,CAAC;IACnCb,MAAM,eAAAC,MAAA,CAAeH,eAAK,CAACgB,UAAU,CAAC,CAAC,CAAE;IACzCV,OAAO,EAAE,MAAM;IACfD,UAAU,EAAE,QAAQ;IACpBY,cAAc,EAAE,QAAQ;IACxBT,SAAS,EAAE,MAAM;IACjBK,OAAO,EAAE,OAAO;IAChBK,UAAU,EAAE,CAAC;IACbC,SAAS,EAAE,CAAC;IACZC,KAAK,EAAE;EACT,CAAC;EACDC,UAAU,EAAE;IACVrB,KAAK,EAAEA,eAAK,CAACI,IAAI,CAAC,CAAC;IACnBL,eAAe,EAAEC,eAAK,CAACe,UAAU,CAAC,CAAC;IACnCF,OAAO,EAAE,MAAM;IACfD,YAAY,EAAE,KAAK;IACnBV,MAAM,EAAE;EACV,CAAC;EACDoB,SAAS,EAAE;IACTtB,KAAK,EAAEA,eAAK,CAACI,IAAI,CAAC,CAAC;IACnBL,eAAe,EAAEC,eAAK,CAACe,UAAU,CAAC,CAAC;IACnCF,OAAO,EAAE,MAAM;IACfU,SAAS,EAAE,YAAY;IACvBrB,MAAM,EAAE;EACV,CAAC;EACDsB,iBAAiB,EAAE;IACjBX,OAAO,EAAE,MAAM;IACfU,SAAS,EAAE,YAAY;IACvBrB,MAAM,EAAE,mBAAmB;IAC3BH,eAAe,EAAEC,eAAK,CAACe,UAAU,CAAC;EACpC;AACF,CAAC;AAED,IAAMU,SAAS,GAAG,SAAZA,SAASA,CAAIC,QAAQ,EAAK;EAAA,IAAAC,gBAAA;EAC9B,IAAI,CAACD,QAAQ,EAAE,OAAOE,SAAS;;EAE/B;EACA,IAAIF,QAAQ,CAACG,QAAQ,EAAE;IACrB;IACA,OAAOH,QAAQ,CAACI,KAAK;EACvB;;EAEA;EACA,QAAQJ,QAAQ,CAACK,QAAQ;IACvB,KAAK,WAAW;MACd,QAAAJ,gBAAA,GAAOD,QAAQ,CAACM,MAAM,cAAAL,gBAAA,uBAAfA,gBAAA,CAAiBG,KAAK;IAC/B,KAAK,kBAAkB;MACrB,OAAOJ,QAAQ,CAACI,KAAK;IACvB,KAAK,QAAQ;MACX,OAAOJ,QAAQ,CAACI,KAAK;IACvB,KAAK,MAAM;MACT,OAAOJ,QAAQ,CAACI,KAAK;IACvB,KAAK,YAAY;MACf,OAAOJ,QAAQ,CAACI,KAAK;IACvB;MACE,OAAOJ,QAAQ,CAACI,KAAK;EACzB;AACF,CAAC;AAED,IAAMG,cAAc,GAAG,SAAjBA,cAAcA,CAAIP,QAAQ,EAAK;EACnC,IAAI,CAACA,QAAQ,EAAE,OAAO,CAAC,CAAC;EAExB,IAAMQ,SAAS,GAAG;IAChBC,MAAM,EAAE,UAAU;IAClBC,OAAO,EAAE,GAAG;IACZC,SAAS,EAAE,cAAc,CAAE;EAC7B,CAAC;;EAED;EACA,IAAIX,QAAQ,CAACK,QAAQ,KAAK,WAAW,EAAE;IACrC,OAAAzC,aAAA,CAAAA,aAAA,KAAY4C,SAAS,GAAKrC,MAAM,CAACC,SAAS;EAC5C;EACA,IAAI4B,QAAQ,CAACK,QAAQ,KAAK,YAAY,EAAE;IACtC,OAAAzC,aAAA,CAAAA,aAAA,KAAY4C,SAAS,GAAKrC,MAAM,CAACwB,UAAU;EAC7C;EACA,IAAIK,QAAQ,CAACK,QAAQ,KAAK,QAAQ,EAAE;IAClC,OAAAzC,aAAA,CAAAA,aAAA,KAAY4C,SAAS,GAAKrC,MAAM,CAACyB,SAAS;EAC5C;EACA,IAAII,QAAQ,CAACK,QAAQ,KAAK,MAAM,EAAE;IAChC,OAAAzC,aAAA,CAAAA,aAAA,KAAY4C,SAAS,GAAKrC,MAAM,CAAC2B,iBAAiB;EACpD;EACA,IAAIE,QAAQ,CAACK,QAAQ,KAAK,kBAAkB,EAAE;IAC5C,OAAAzC,aAAA,CAAAA,aAAA,KAAY4C,SAAS,GAAKrC,MAAM,CAACiB,GAAG;EACtC;;EAEA;EACA,OAAAxB,aAAA,CAAAA,aAAA,KAAY4C,SAAS,GAAKrC,MAAM,CAACwB,UAAU;AAC7C,CAAC;AAED,IAAMiB,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;EAAA,IAAAC,YAAA;EAC7B,IAAAC,cAAA,GAAmB,IAAAC,mBAAa,EAAC,CAAC;IAA1BC,MAAM,GAAAF,cAAA,CAANE,MAAM;EACd,IAAAC,SAAA,GAAkC,IAAAC,eAAQ,EAAC,CAAC,CAAC;IAAAC,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAAtCI,SAAS,GAAAF,UAAA;IAAEG,YAAY,GAAAH,UAAA;EAC9B,IAAMI,IAAI,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAEzB,IAAMxB,QAAQ,GAAGgB,MAAM,aAANA,MAAM,gBAAAH,YAAA,GAANG,MAAM,CAAES,IAAI,cAAAZ,YAAA,uBAAZA,YAAA,CAAca,OAAO;EACtC,IAAMC,QAAQ,GAAG,CAAC,CAACX,MAAM;EAEzB,IAAAY,gBAAS,EAAC,YAAM;IACd,IAAID,QAAQ,IAAIJ,IAAI,CAACG,OAAO,EAAE;MAC5B,IAAAG,yBAAU,EAACN,IAAI,CAACG,OAAO,CAAC;;MAExB;MACA,IAAMI,mBAAmB,GAAGC,QAAQ,CAACC,aAAa,CAAC,UAAU,CAAC,IAAID,QAAQ,CAACE,IAAI;MAC/EX,YAAY,CAACY,UAAU,CAACC,gBAAgB,CAACL,mBAAmB,CAAC,CAACM,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3E;EACF,CAAC,EAAE,CAACT,QAAQ,EAAE3B,QAAQ,CAAC,CAAC;EAExB,IAAMqC,WAAW,GAAG9B,cAAc,CAACP,QAAQ,CAAC;EAC5C,IAAMsC,MAAM,GAAGvC,SAAS,CAACC,QAAQ,CAAC;EAElC,oBACErE,MAAA,YAAA4G,aAAA,CAACzG,KAAA,CAAA0G,WAAW,QACTb,QAAQ,IAAIW,MAAM,iBACjB3G,MAAA,YAAA4G,aAAA;IAAKE,GAAG,EAAElB,IAAK;IAACmB,KAAK,EAAEL;EAAY,gBACjC1G,MAAA,YAAA4G,aAAA,CAACxG,SAAA,CAAA4G,aAAa;IAACC,SAAS,EAAC,OAAO;IAACN,MAAM,EAAEA,MAAO;IAACO,OAAO,EAAC;EAAM,CAAE,CAC9D,CAEI,CAAC;AAElB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEanC,gBAAgB","ignoreList":[]}

package/lib/swap.js

@@ -1,25 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
-var _default = function _default(arr, fromIndex, toIndex) {
+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;
 };
-
-exports["default"] = _default;
 //# sourceMappingURL=swap.js.map

package/lib/swap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/swap.js"],"names":["arr","fromIndex","toIndex","length","undefined","Error","update","tmp"],"mappings":";;;;;;;;;AAAA;;eAEe,kBAACA,GAAD,EAAMC,SAAN,EAAiBC,OAAjB,EAA6B;AAC1C,MAAI,CAACF,GAAD,IAAQA,GAAG,CAACG,MAAJ,IAAc,CAAtB,IAA2BF,SAAS,KAAKG,SAAzC,IAAsDF,OAAO,KAAKE,SAAtE,EAAiF;AAC/E,UAAM,IAAIC,KAAJ,gEAAkEL,GAAlE,eAA0EC,SAA1E,cAAuFC,OAAvF,EAAN;AACD;;AAED,MAAMI,MAAM,GAAG,2BAAUN,GAAV,CAAf;AACA,MAAMO,GAAG,GAAGP,GAAG,CAACE,OAAD,CAAf;AACAI,EAAAA,MAAM,CAACJ,OAAD,CAAN,GAAkBI,MAAM,CAACL,SAAD,CAAxB;AACAK,EAAAA,MAAM,CAACL,SAAD,CAAN,GAAoBM,GAApB;AAEA,SAAOD,MAAP;AACD,C","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"],"file":"swap.js"}
+{"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

@@ -1,30 +1,19 @@
 "use strict";
 
 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"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _React$createContext = /*#__PURE__*/_react["default"].createContext(-1),
-    Consumer = _React$createContext.Consumer,
-    Provider = _React$createContext.Provider;
-
-exports.Provider = Provider;
-exports.Consumer = Consumer;
-
-var generateId = function generateId() {
+  Consumer = exports.Consumer = _React$createContext.Consumer,
+  Provider = exports.Provider = _React$createContext.Provider;
+var generateId = exports.generateId = function generateId() {
   return (Math.random() * 1000001).toFixed(0);
 };
-
-exports.generateId = generateId;
-
-var withUid = function withUid(Component) {
+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, {
@@ -32,9 +21,6 @@ var withUid = function withUid(Component) {
       }));
     });
   };
-
   return Wrapped;
 };
-
-exports.withUid = withUid;
 //# sourceMappingURL=uid-context.js.map

package/lib/uid-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/uid-context.js"],"names":["React","createContext","Consumer","Provider","generateId","Math","random","toFixed","withUid","Component","Wrapped","props","uid"],"mappings":";;;;;;;;;;;AAAA;;AAEA,wCAA+BA,kBAAMC,aAAN,CAAoB,CAAC,CAArB,CAA/B;AAAA,IAAQC,QAAR,wBAAQA,QAAR;AAAA,IAAkBC,QAAlB,wBAAkBA,QAAlB;;;;;AAIO,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,SAAM,CAACC,IAAI,CAACC,MAAL,KAAgB,OAAjB,EAA0BC,OAA1B,CAAkC,CAAlC,CAAN;AAAA,CAAnB;;;;AAEA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,SAAD,EAAe;AACpC,MAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,KAAD;AAAA,wBAAW,gCAAC,QAAD,QAAW,UAACC,GAAD;AAAA,0BAAS,gCAAC,SAAD,gCAAeD,KAAf;AAAsB,QAAA,GAAG,EAAEC;AAA3B,SAAT;AAAA,KAAX,CAAX;AAAA,GAAhB;;AAEA,SAAOF,OAAP;AACD,CAJM","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"],"file":"uid-context.js"}
+{"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,23 @@
 {
   "name": "@pie-lib/drag",
-  "version": "2.22.1",
+  "version": "2.23.0-mui-update.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@material-ui/core": "^3.8.3",
-    "@pie-lib/math-rendering": "^3.22.1",
-    "@pie-lib/render-ui": "^4.35.1",
+    "@dnd-kit/core": "6.1.0",
+    "@dnd-kit/sortable": "8.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": "^3.27.0-mui-update.0",
+    "@pie-lib/render-ui": "^4.36.0-mui-update.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.1",
-    "react-dnd": "^14.0.5",
-    "react-dnd-html5-backend": "^14.0.2",
-    "react-dnd-multi-backend": "^6.0.2",
-    "react-dnd-touch-backend": "^12.0.0"
+    "react": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"
@@ -23,5 +25,5 @@
   "scripts": {},
   "author": "",
   "license": "ISC",
-  "gitHead": "ce0ec7134200c51f3a3301257be3e707054b36ca"
+  "gitHead": "2e0222bda045f46b504640a972d43787e68288c4"
 }

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

@@ -1,19 +1,36 @@
-import { DropTarget } from 'react-dnd';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { DroppablePlaceholder } from './droppable-placeholder';
-import dragType from './drag-type';
 
-export const spec = {
-  canDrop: (props) => {
-    return !props.disabled;
-  },
-  drop: () => ({
-    dropped: true,
-  }),
-};
+// 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 
+}) {
+  // The actual drop handling will be managed by the parent component
+  // through the DragProvider's onDragEnd callback
+  
+  return (
+    <DroppablePlaceholder
+      id={id}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </DroppablePlaceholder>
+  );
+}
 
-const WithTarget = DropTarget(dragType.types.db, spec, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-}))(DroppablePlaceholder);
+DragInTheBlankDroppable.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  onDrop: PropTypes.func,
+};
 
-export default WithTarget;
+export default DragInTheBlankDroppable;

package/src/drag-provider.jsx

@@ -0,0 +1,40 @@
+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 }) {
+  const [activeId, setActiveId] = useState(null);
+  
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 }}),
+    useSensor(KeyboardSensor)
+  );
+
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+
+  const handleDragEnd = (event) => {
+    setActiveId(null);
+    if (onDragEnd) {
+      onDragEnd(event);
+    }
+  };
+
+  return (
+    <DndContext 
+      sensors={sensors} 
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      {children}
+    </DndContext>
+  );
+}
+
+DragProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  onDragEnd: PropTypes.func,
+};
+
+export default DragProvider;

package/src/drag-type.js

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

package/src/draggable-choice.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { useDraggable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { grey } from '@mui/material/colors';
+
+export const DRAG_TYPE = 'CHOICE';
+
+const StyledChoice = styled('div')(({ theme, isDragging }) => ({
+  backgroundColor: theme.palette.background.paper,
+  border: `solid 1px ${grey[400]}`,
+  padding: theme.spacing(1),
+  minHeight: '30px',
+  minWidth: theme.spacing(20),
+  maxWidth: theme.spacing(75),
+  cursor: 'grab',
+  opacity: isDragging ? 0.5 : 1,
+  '&:active': {
+    cursor: 'grabbing',
+  },
+}));
+
+export function DraggableChoice({ 
+  choice, 
+  children, 
+  className,
+  disabled,
+  category,
+  alternateResponseIndex,
+  choiceIndex,
+  onRemoveChoice
+}) {
+  const { 
+    attributes, 
+    listeners, 
+    setNodeRef, 
+    transform, 
+    isDragging 
+  } = useDraggable({
+    id: choice.id,
+    disabled: disabled,
+    data: { 
+      value: choice.value,
+      choiceId: choice.id,
+      from: category?.id,
+      alternateResponseIndex,
+      choiceIndex,
+      onRemoveChoice
+    }
+  });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+  };
+
+  return (
+    <StyledChoice 
+      ref={setNodeRef}
+      style={style}
+      className={className}
+      isDragging={isDragging}
+      {...attributes}
+      {...listeners}
+    >
+      {children}
+    </StyledChoice>
+  );
+}
+
+DraggableChoice.propTypes = {
+  choice: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    value: PropTypes.any,
+  }).isRequired,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  category: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  }),
+  alternateResponseIndex: PropTypes.number,
+  choiceIndex: PropTypes.number,
+  onRemoveChoice: PropTypes.func,
+};
+
+export default DraggableChoice;

package/src/droppable-placeholder.jsx

@@ -1,38 +1,48 @@
 import React from 'react';
 import PlaceHolder from './placeholder';
 import PropTypes from 'prop-types';
+import { useDroppable } from '@dnd-kit/core';
 
 const preventInteractionStyle = {
   flex: 1,
 };
 
-export class DroppablePlaceholder extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    connectDropTarget: PropTypes.func.isRequired,
-    isOver: PropTypes.bool,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    disabled: PropTypes.bool,
-    isVerticalPool: PropTypes.bool,
-    minHeight: PropTypes.number,
-  };
+export function DroppablePlaceholder({ 
+  id,
+  children, 
+  disabled, 
+  classes, 
+  isVerticalPool, 
+  minHeight 
+}) {
+  const { setNodeRef, isOver } = useDroppable({ 
+    id,
+    disabled 
+  });
 
-  render() {
-    const { children, connectDropTarget, isOver, disabled, classes, isVerticalPool, minHeight } = this.props;
-
-    return connectDropTarget(
-      <div style={preventInteractionStyle}>
-        <PlaceHolder
-          disabled={disabled}
-          isOver={isOver}
-          choiceBoard={true}
-          className={classes}
-          isVerticalPool={isVerticalPool}
-          minHeight={minHeight}
-        >
-          {children}
-        </PlaceHolder>
-      </div>,
-    );
-  }
+  return (
+    <div ref={setNodeRef} style={preventInteractionStyle}>
+      <PlaceHolder
+        disabled={disabled}
+        isOver={isOver}
+        choiceBoard={true}
+        className={classes}
+        isVerticalPool={isVerticalPool}
+        minHeight={minHeight}
+      >
+        {children}
+      </PlaceHolder>
+    </div>
+  );
 }
+
+DroppablePlaceholder.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  disabled: PropTypes.bool,
+  classes: PropTypes.object,
+  isVerticalPool: PropTypes.bool,
+  minHeight: PropTypes.number,
+};
+
+export default DroppablePlaceholder;

package/src/ica-dp.jsx

@@ -1,23 +1,46 @@
-import { DropTarget } from 'react-dnd';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { DroppablePlaceholder } from './droppable-placeholder';
-import dragType from './drag-type';
 
-export const spec = {
-  canDrop: (props) => {
-    return !props.disabled;
-  },
-  drop: (props, monitor) => {
-    const item = monitor.getItem();
+// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
+// This component now just wraps DroppablePlaceholder with ICA specific logic
 
-    if (props.onRemoveAnswer) {
-      props.onRemoveAnswer(item);
-    }
-  },
-};
+export function ICADroppable({ 
+  id, 
+  children, 
+  disabled, 
+  onRemoveAnswer,
+  ...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}
+    >
+      {children}
+    </DroppablePlaceholder>
+  );
+}
 
-const WithTarget = DropTarget(dragType.types.ica, spec, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-}))(DroppablePlaceholder);
+ICADroppable.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  onRemoveAnswer: PropTypes.func,
+};
 
-export default WithTarget;
+export default ICADroppable;

package/src/index.js

@@ -1,8 +1,6 @@
-import { DragSource, DropTarget } from 'react-dnd';
-
 import PlaceHolder from './placeholder';
-import Choice from './choice';
-import withDragContext from './with-drag-context';
+import DraggableChoice   from './draggable-choice';
+import DragProvider from './drag-provider';
 import swap from './swap';
 import * as uid from './uid-context';
 import MatchDroppablePlaceholder from './match-list-dp';
@@ -14,10 +12,8 @@ export {
   MatchDroppablePlaceholder,
   DragDroppablePlaceholder,
   ICADroppablePlaceholder,
-  withDragContext,
-  Choice,
+  DragProvider,
+  DraggableChoice,
   swap,
   uid,
-  DragSource,
-  DropTarget,
 };

package/src/match-list-dp.jsx

@@ -1,23 +1,46 @@
-import { DropTarget } from 'react-dnd';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { DroppablePlaceholder } from './droppable-placeholder';
-import dragType from './drag-type';
 
-export const spec = {
-  canDrop: (props) => {
-    return !props.disabled;
-  },
-  drop: (props, monitor) => {
-    const item = monitor.getItem();
+// 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
 
-    if (props.onRemoveAnswer) {
-      props.onRemoveAnswer(item.promptId);
-    }
-  },
-};
+export function MatchListDroppable({ 
+  id, 
+  children, 
+  disabled, 
+  onRemoveAnswer,
+  ...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.promptId);
+  //     }
+  //   }
+  // };
+  
+  return (
+    <DroppablePlaceholder
+      id={id}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </DroppablePlaceholder>
+  );
+}
 
-const WithTarget = DropTarget(dragType.types.ml, spec, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-}))(DroppablePlaceholder);
+MatchListDroppable.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  onRemoveAnswer: PropTypes.func,
+};
 
-export default WithTarget;
+export default MatchListDroppable;