@pie-element/match-list 6.1.0-next.0 → 6.1.1-next.1

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/match-list-controller",
   "private": true,
-  "version": "5.1.0-next.0",
+  "version": "5.1.1-next.1",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -9,8 +9,8 @@
     "test": "./node_modules/.bin/jest"
   },
   "dependencies": {
-    "@pie-lib/controller-utils": "1.1.1-next.1",
-    "@pie-lib/feedback": "1.1.1-next.1",
+    "@pie-lib/controller-utils": "1.2.0-next.3",
+    "@pie-lib/feedback": "1.2.0-next.3",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23"
   },

package/lib/answer.js

@@ -183,7 +183,7 @@ function DragAndDropAnswer(props) {
   } = props;
   const dragId = `${type || 'answer'}-${id}`;
   // droppable only if promptId exists
-  const dropId = promptId ? `drop-${promptId}` : undefined;
+  const dropId = promptId !== undefined && promptId !== null ? `drop-${promptId}` : undefined;
   const {
     attributes,
     listeners,

package/lib/answer.js.map

@@ -1 +1 @@
-{"version":3,"file":"answer.js","names":["_core","require","_propTypes","_interopRequireDefault","_react","_debug","_styles","_drag","_lodashEs","_renderUi","log","debug","HolderNumber","styled","theme","width","fontSize","textAlign","color","palette","common","black","Holder","index","isOver","disabled","type","default","createElement","PlaceHolder","extraStyles","display","padding","alignItems","justifyContent","height","undefined","propTypes","PropTypes","number","bool","string","AnswerContentContainer","isDragging","outcome","text","backgroundColor","white","border","correct","incorrect","grey","cursor","boxSizing","overflow","transition","wordBreak","opacity","AnswerContent","props","title","empty","guideIndex","dangerouslySetInnerHTML","__html","AnswerContainer","minHeight","minWidth","margin","spacing","Answer","React","Component","constructor","args","_defineProperty2","e","componentDidMount","ref","addEventListener","handleTouchStart","passive","componentWillUnmount","removeEventListener","render","id","className","isEmpty","exports","any","DragAndDropAnswer","instanceId","promptId","draggable","dragId","dropId","attributes","listeners","setNodeRef","setDragRef","transform","useDraggable","data","value","droppable","useDroppable","setDropRef","transformStyle","x","y","style","flex","_extends2","touchAction","_default"],"sources":["../src/answer.jsx"],"sourcesContent":["import { useDraggable, useDroppable } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport { styled } from '@mui/material/styles';\nimport { PlaceHolder } from '@pie-lib/drag';\nimport { isEmpty } from 'lodash-es';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:match-title:answer');\n\nconst HolderNumber = styled('div')(({ theme }) => ({\n  width: '100%',\n  fontSize: '18px',\n  textAlign: 'center',\n  color: `rgba(${theme.palette.common.black}, 0.6)`,\n}));\n\nconst Holder = ({ index, isOver, disabled, type }) => (\n  <PlaceHolder\n    extraStyles={{\n      display: 'flex',\n      padding: '0',\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: '40px',\n    }}\n    disabled={disabled}\n    isOver={isOver}\n    type={type}\n  >\n    {index !== undefined && <HolderNumber>{index}</HolderNumber>}\n  </PlaceHolder>\n);\n\nHolder.propTypes = {\n  index: PropTypes.number,\n  isOver: PropTypes.bool,\n  disabled: PropTypes.bool,\n  type: PropTypes.string,\n};\n\nconst AnswerContentContainer = styled('div')(({ theme, isDragging, isOver, disabled, outcome }) => ({\n  color: color.text(),\n  backgroundColor: color.white(),\n  border: `1px solid ${outcome === 'correct' ? color.correct() :\n    outcome === 'incorrect' ? color.incorrect() :\n      theme.palette.grey[400]\n    }`,\n  cursor: disabled ? 'not-allowed' : 'pointer',\n  width: '100%',\n  padding: '10px',\n  boxSizing: 'border-box',\n  overflow: 'hidden',\n  transition: 'opacity 200ms linear',\n  wordBreak: 'break-word',\n  opacity: isDragging && !disabled ? 0.5 : isOver && !disabled ? 0.2 : 1,\n}));\n\nconst AnswerContent = (props) => {\n  const { isDragging, isOver, title, disabled, empty, outcome, guideIndex, type } = props;\n\n  if (empty) {\n    return <Holder\n      index={guideIndex}\n      isOver={isOver}\n      disabled={disabled}\n      type={type}\n\n    />;\n  } else {\n    return (\n      <AnswerContentContainer\n        isDragging={isDragging}\n        isOver={isOver}\n        disabled={disabled}\n        outcome={outcome}\n        dangerouslySetInnerHTML={{ __html: title }}\n      />\n    );\n  }\n};\n\nconst AnswerContainer = styled('div')(({ correct, theme }) => ({\n  boxSizing: 'border-box',\n  minHeight: 40,\n  minWidth: '200px',\n  overflow: 'hidden',\n  margin: theme.spacing(0.5),\n  padding: '0px',\n  textAlign: 'center',\n  height: 'initial',\n  border: correct === true ? `1px solid var(--feedback-correct-bg-color, ${color.correct()})` :\n    correct === false ? `1px solid var(--feedback-incorrect-bg-color, ${color.incorrect()})` :\n      'none',\n}));\n\nexport class Answer extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    isDragging: PropTypes.bool,\n    id: PropTypes.any,\n    title: PropTypes.string,\n    isOver: PropTypes.bool,\n    empty: PropTypes.bool,\n    type: PropTypes.string,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n\n  componentDidMount() {\n    if (this.ref) {\n      // NOTE: preventing default on touchstart can block dnd-kit pointer handling on some devices.\n      // Consider removing this if you have issues on touch devices.\n      this.ref.addEventListener('touchstart', this.handleTouchStart, { passive: true });\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.ref) {\n      this.ref.removeEventListener('touchstart', this.handleTouchStart);\n    }\n  }\n\n  handleTouchStart = (e) => {\n    // do NOT call e.preventDefault() here — it prevents pointer events necessary for dnd-kit.\n    // Keep this handler empty or remove it if you don't need it.\n    // e.preventDefault();\n  };\n\n  render() {\n    const {\n      id,\n      title,\n      isDragging = false,\n      className,\n      disabled,\n      isOver = false,\n      type,\n      correct,\n    } = this.props;\n\n    log('[render], props: ', this.props);\n\n    return (\n      <AnswerContainer correct={correct} className={className} ref={(ref) => (this.ref = ref)}>\n        <AnswerContent\n          title={title}\n          id={id}\n          isOver={isOver}\n          empty={isEmpty(title)}\n          isDragging={isDragging}\n          disabled={disabled}\n          type={type}\n        />\n      </AnswerContainer>\n    );\n  }\n}\n\nfunction DragAndDropAnswer(props) {\n  const { id, instanceId, promptId, draggable = true, disabled = false, type } = props;\n\n  const dragId = `${type || 'answer'}-${id}`;\n  // droppable only if promptId exists\n  const dropId = promptId ? `drop-${promptId}` : undefined;\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef: setDragRef,\n    transform,\n    transition,\n    isDragging,\n  } = useDraggable({\n    id: dragId,\n    data: {\n      type: type || 'answer',\n      id,\n      instanceId,\n      value: props.title,\n      promptId,\n    },\n    disabled: !draggable || disabled,\n  });\n\n  const droppable = useDroppable({\n    id: dropId,\n    data: dropId ? { type: 'drop-zone', promptId, instanceId } : undefined,\n    disabled: disabled || !dropId,\n  });\n\n  const setDropRef = droppable.setNodeRef;\n  const isOver = droppable.isOver;\n\n  // compute style: apply transform to the element that actually moves\n  const transformStyle = transform\n    ? `translate3d(${transform.x}px, ${transform.y}px, 0)`\n    : undefined;\n\n  // If this item is a drop-zone (prompt slot), we render an outer droppable wrapper.\n  // For droppable wrapper we apply style to the outer wrapper\n  if (dropId) {\n    return (\n      <div\n        ref={setDropRef}\n        style={{\n          flex: 1,\n          transform: transformStyle,\n          transition,\n          opacity: isDragging ? 0.5 : 1,\n          backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent',\n        }}\n      >\n        <div ref={setDragRef} {...listeners} {...attributes}>\n          <Answer {...props} isDragging={isDragging} isOver={isOver} />\n        </div>\n      </div>\n    );\n  }\n\n  // if there is NO dropId (this is a choice / draggable-only), render only draggable node and apply transform to it.\n  return (\n    <div\n      ref={setDragRef}\n      {...listeners}\n      {...attributes}\n      style={{\n        transform: transformStyle,\n        transition,\n        cursor: disabled ? 'not-allowed' : 'grab',\n        opacity: isDragging ? 0.5 : 1,\n        touchAction: draggable && !disabled ? 'none' : 'auto',\n      }}\n    >\n      <Answer {...props} isDragging={isDragging} isOver={false} />\n    </div>\n  );\n}\n\nDragAndDropAnswer.propTypes = {\n  id: PropTypes.any,\n  instanceId: PropTypes.string,\n  promptId: PropTypes.any,\n  title: PropTypes.string,\n  draggable: PropTypes.bool,\n  disabled: PropTypes.bool,\n  type: PropTypes.string,\n};\n\nexport default DragAndDropAnswer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"answer.js","names":["_core","require","_propTypes","_interopRequireDefault","_react","_debug","_styles","_drag","_lodashEs","_renderUi","log","debug","HolderNumber","styled","theme","width","fontSize","textAlign","color","palette","common","black","Holder","index","isOver","disabled","type","default","createElement","PlaceHolder","extraStyles","display","padding","alignItems","justifyContent","height","undefined","propTypes","PropTypes","number","bool","string","AnswerContentContainer","isDragging","outcome","text","backgroundColor","white","border","correct","incorrect","grey","cursor","boxSizing","overflow","transition","wordBreak","opacity","AnswerContent","props","title","empty","guideIndex","dangerouslySetInnerHTML","__html","AnswerContainer","minHeight","minWidth","margin","spacing","Answer","React","Component","constructor","args","_defineProperty2","e","componentDidMount","ref","addEventListener","handleTouchStart","passive","componentWillUnmount","removeEventListener","render","id","className","isEmpty","exports","any","DragAndDropAnswer","instanceId","promptId","draggable","dragId","dropId","attributes","listeners","setNodeRef","setDragRef","transform","useDraggable","data","value","droppable","useDroppable","setDropRef","transformStyle","x","y","style","flex","_extends2","touchAction","_default"],"sources":["../src/answer.jsx"],"sourcesContent":["import { useDraggable, useDroppable } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport { styled } from '@mui/material/styles';\nimport { PlaceHolder } from '@pie-lib/drag';\nimport { isEmpty } from 'lodash-es';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:match-title:answer');\n\nconst HolderNumber = styled('div')(({ theme }) => ({\n  width: '100%',\n  fontSize: '18px',\n  textAlign: 'center',\n  color: `rgba(${theme.palette.common.black}, 0.6)`,\n}));\n\nconst Holder = ({ index, isOver, disabled, type }) => (\n  <PlaceHolder\n    extraStyles={{\n      display: 'flex',\n      padding: '0',\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: '40px',\n    }}\n    disabled={disabled}\n    isOver={isOver}\n    type={type}\n  >\n    {index !== undefined && <HolderNumber>{index}</HolderNumber>}\n  </PlaceHolder>\n);\n\nHolder.propTypes = {\n  index: PropTypes.number,\n  isOver: PropTypes.bool,\n  disabled: PropTypes.bool,\n  type: PropTypes.string,\n};\n\nconst AnswerContentContainer = styled('div')(({ theme, isDragging, isOver, disabled, outcome }) => ({\n  color: color.text(),\n  backgroundColor: color.white(),\n  border: `1px solid ${outcome === 'correct' ? color.correct() :\n    outcome === 'incorrect' ? color.incorrect() :\n      theme.palette.grey[400]\n    }`,\n  cursor: disabled ? 'not-allowed' : 'pointer',\n  width: '100%',\n  padding: '10px',\n  boxSizing: 'border-box',\n  overflow: 'hidden',\n  transition: 'opacity 200ms linear',\n  wordBreak: 'break-word',\n  opacity: isDragging && !disabled ? 0.5 : isOver && !disabled ? 0.2 : 1,\n}));\n\nconst AnswerContent = (props) => {\n  const { isDragging, isOver, title, disabled, empty, outcome, guideIndex, type } = props;\n\n  if (empty) {\n    return <Holder\n      index={guideIndex}\n      isOver={isOver}\n      disabled={disabled}\n      type={type}\n\n    />;\n  } else {\n    return (\n      <AnswerContentContainer\n        isDragging={isDragging}\n        isOver={isOver}\n        disabled={disabled}\n        outcome={outcome}\n        dangerouslySetInnerHTML={{ __html: title }}\n      />\n    );\n  }\n};\n\nconst AnswerContainer = styled('div')(({ correct, theme }) => ({\n  boxSizing: 'border-box',\n  minHeight: 40,\n  minWidth: '200px',\n  overflow: 'hidden',\n  margin: theme.spacing(0.5),\n  padding: '0px',\n  textAlign: 'center',\n  height: 'initial',\n  border: correct === true ? `1px solid var(--feedback-correct-bg-color, ${color.correct()})` :\n    correct === false ? `1px solid var(--feedback-incorrect-bg-color, ${color.incorrect()})` :\n      'none',\n}));\n\nexport class Answer extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    isDragging: PropTypes.bool,\n    id: PropTypes.any,\n    title: PropTypes.string,\n    isOver: PropTypes.bool,\n    empty: PropTypes.bool,\n    type: PropTypes.string,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n\n  componentDidMount() {\n    if (this.ref) {\n      // NOTE: preventing default on touchstart can block dnd-kit pointer handling on some devices.\n      // Consider removing this if you have issues on touch devices.\n      this.ref.addEventListener('touchstart', this.handleTouchStart, { passive: true });\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.ref) {\n      this.ref.removeEventListener('touchstart', this.handleTouchStart);\n    }\n  }\n\n  handleTouchStart = (e) => {\n    // do NOT call e.preventDefault() here — it prevents pointer events necessary for dnd-kit.\n    // Keep this handler empty or remove it if you don't need it.\n    // e.preventDefault();\n  };\n\n  render() {\n    const {\n      id,\n      title,\n      isDragging = false,\n      className,\n      disabled,\n      isOver = false,\n      type,\n      correct,\n    } = this.props;\n\n    log('[render], props: ', this.props);\n\n    return (\n      <AnswerContainer correct={correct} className={className} ref={(ref) => (this.ref = ref)}>\n        <AnswerContent\n          title={title}\n          id={id}\n          isOver={isOver}\n          empty={isEmpty(title)}\n          isDragging={isDragging}\n          disabled={disabled}\n          type={type}\n        />\n      </AnswerContainer>\n    );\n  }\n}\n\nfunction DragAndDropAnswer(props) {\n  const { id, instanceId, promptId, draggable = true, disabled = false, type } = props;\n\n  const dragId = `${type || 'answer'}-${id}`;\n  // droppable only if promptId exists\n  const dropId = promptId !== undefined && promptId !== null ? `drop-${promptId}` : undefined;\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef: setDragRef,\n    transform,\n    transition,\n    isDragging,\n  } = useDraggable({\n    id: dragId,\n    data: {\n      type: type || 'answer',\n      id,\n      instanceId,\n      value: props.title,\n      promptId,\n    },\n    disabled: !draggable || disabled,\n  });\n\n  const droppable = useDroppable({\n    id: dropId,\n    data: dropId ? { type: 'drop-zone', promptId, instanceId } : undefined,\n    disabled: disabled || !dropId,\n  });\n\n  const setDropRef = droppable.setNodeRef;\n  const isOver = droppable.isOver;\n\n  // compute style: apply transform to the element that actually moves\n  const transformStyle = transform\n    ? `translate3d(${transform.x}px, ${transform.y}px, 0)`\n    : undefined;\n\n  // If this item is a drop-zone (prompt slot), we render an outer droppable wrapper.\n  // For droppable wrapper we apply style to the outer wrapper\n  if (dropId) {\n    return (\n      <div\n        ref={setDropRef}\n        style={{\n          flex: 1,\n          transform: transformStyle,\n          transition,\n          opacity: isDragging ? 0.5 : 1,\n          backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent',\n        }}\n      >\n        <div ref={setDragRef} {...listeners} {...attributes}>\n          <Answer {...props} isDragging={isDragging} isOver={isOver} />\n        </div>\n      </div>\n    );\n  }\n\n  // if there is NO dropId (this is a choice / draggable-only), render only draggable node and apply transform to it.\n  return (\n    <div\n      ref={setDragRef}\n      {...listeners}\n      {...attributes}\n      style={{\n        transform: transformStyle,\n        transition,\n        cursor: disabled ? 'not-allowed' : 'grab',\n        opacity: isDragging ? 0.5 : 1,\n        touchAction: draggable && !disabled ? 'none' : 'auto',\n      }}\n    >\n      <Answer {...props} isDragging={isDragging} isOver={false} />\n    </div>\n  );\n}\n\nDragAndDropAnswer.propTypes = {\n  id: PropTypes.any,\n  instanceId: PropTypes.string,\n  promptId: PropTypes.any,\n  title: PropTypes.string,\n  draggable: PropTypes.bool,\n  disabled: PropTypes.bool,\n  type: PropTypes.string,\n};\n\nexport default DragAndDropAnswer;\n"],"mappings":"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","ignoreList":[]}

package/lib/choices-list.js

@@ -12,23 +12,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _lodashEs = require("lodash-es");
 var _answer = _interopRequireDefault(require("./answer"));
-var _drag = require("@pie-lib/drag");
+var _droppablePlaceholder = require("./droppable-placeholder");
 const ChoicesContainer = (0, _styles.styled)('div')(({
   theme
 }) => ({
   marginBottom: theme.spacing(2)
 }));
-const AnswersContainer = (0, _styles.styled)('div')(({
-  theme
-}) => ({
-  alignItems: 'center',
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
-  justifyContent: 'space-between',
-  marginTop: theme.spacing(1),
-  marginBottom: theme.spacing(1)
-}));
 class ChoicesList extends _react.default.Component {
   render() {
     const {
@@ -52,10 +41,11 @@ class ChoicesList extends _react.default.Component {
       session: session,
       type: "choice"
     }, answer)));
-    return /*#__PURE__*/_react.default.createElement(ChoicesContainer, null, _drag.MatchDroppablePlaceholder ? /*#__PURE__*/_react.default.createElement(_drag.MatchDroppablePlaceholder, {
+    return /*#__PURE__*/_react.default.createElement(ChoicesContainer, null, /*#__PURE__*/_react.default.createElement(_droppablePlaceholder.DroppablePlaceholder, {
+      id: "choices-pool",
       disabled: disabled,
       onRemoveAnswer: onRemoveAnswer
-    }, filteredAnswers) : /*#__PURE__*/_react.default.createElement(AnswersContainer, null, filteredAnswers));
+    }, filteredAnswers));
   }
 }
 exports.ChoicesList = ChoicesList;

package/lib/choices-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"choices-list.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_lodashEs","_answer","_drag","ChoicesContainer","styled","theme","marginBottom","spacing","AnswersContainer","alignItems","display","flexDirection","flexWrap","justifyContent","marginTop","ChoicesList","React","Component","render","model","disabled","session","instanceId","onRemoveAnswer","props","config","duplicates","filteredAnswers","answers","filter","answer","isEmpty","value","isUndefined","find","val","id","map","default","createElement","_extends2","key","draggable","type","MatchDroppablePlaceholder","exports","_defineProperty2","PropTypes","object","isRequired","string","bool","func","_default"],"sources":["../src/choices-list.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { find, isEmpty, isUndefined } from 'lodash-es';\nimport DragAndDropAnswer from './answer';\nimport { MatchDroppablePlaceholder } from '@pie-lib/drag';\n\nconst ChoicesContainer = styled('div')(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nconst AnswersContainer = styled('div')(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  flexDirection: 'row',\n  flexWrap: 'wrap',\n  justifyContent: 'space-between',\n  marginTop: theme.spacing(1),\n  marginBottom: theme.spacing(1),\n}));\n\nexport class ChoicesList extends React.Component {\n  static propTypes = {\n    session: PropTypes.object.isRequired,\n    instanceId: PropTypes.string.isRequired,\n    model: PropTypes.object.isRequired,\n    disabled: PropTypes.bool.isRequired,\n    onRemoveAnswer: PropTypes.func,\n  };\n\n  render() {\n    const { model, disabled, session, instanceId, onRemoveAnswer } = this.props;\n    const { config } = model;\n    const { duplicates } = config;\n\n    const filteredAnswers = config.answers\n      .filter(\n        (answer) =>\n          duplicates ||\n          isEmpty(session) ||\n          !session.value ||\n          isUndefined(find(session.value, (val) => val === answer.id)),\n      )\n      .map((answer) => (\n        <DragAndDropAnswer\n          key={answer.id}\n          instanceId={instanceId}\n          draggable={true}\n          disabled={disabled}\n          session={session}\n          type=\"choice\"\n          {...answer}\n        />\n      ));\n\n    return (\n      <ChoicesContainer>\n        {MatchDroppablePlaceholder ? (\n          <MatchDroppablePlaceholder disabled={disabled} onRemoveAnswer={onRemoveAnswer}>\n            {filteredAnswers}\n          </MatchDroppablePlaceholder>\n        ) : (\n          <AnswersContainer>{filteredAnswers}</AnswersContainer>\n        )}\n      </ChoicesContainer>\n    );\n  }\n}\n\nexport default ChoicesList;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"choices-list.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_lodashEs","_answer","_droppablePlaceholder","ChoicesContainer","styled","theme","marginBottom","spacing","ChoicesList","React","Component","render","model","disabled","session","instanceId","onRemoveAnswer","props","config","duplicates","filteredAnswers","answers","filter","answer","isEmpty","value","isUndefined","find","val","id","map","default","createElement","_extends2","key","draggable","type","DroppablePlaceholder","exports","_defineProperty2","PropTypes","object","isRequired","string","bool","func","_default"],"sources":["../src/choices-list.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { find, isEmpty, isUndefined } from 'lodash-es';\nimport DragAndDropAnswer from './answer';\nimport { DroppablePlaceholder } from './droppable-placeholder';\n\nconst ChoicesContainer = styled('div')(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nexport class ChoicesList extends React.Component {\n  static propTypes = {\n    session: PropTypes.object.isRequired,\n    instanceId: PropTypes.string.isRequired,\n    model: PropTypes.object.isRequired,\n    disabled: PropTypes.bool.isRequired,\n    onRemoveAnswer: PropTypes.func,\n  };\n\n  render() {\n    const { model, disabled, session, instanceId, onRemoveAnswer } = this.props;\n    const { config } = model;\n    const { duplicates } = config;\n\n    const filteredAnswers = config.answers\n      .filter(\n        (answer) =>\n          duplicates ||\n          isEmpty(session) ||\n          !session.value ||\n          isUndefined(find(session.value, (val) => val === answer.id)),\n      )\n      .map((answer) => (\n        <DragAndDropAnswer\n          key={answer.id}\n          instanceId={instanceId}\n          draggable={true}\n          disabled={disabled}\n          session={session}\n          type=\"choice\"\n          {...answer}\n        />\n      ));\n\n    return (\n      <ChoicesContainer>\n        <DroppablePlaceholder id=\"choices-pool\" disabled={disabled} onRemoveAnswer={onRemoveAnswer}>\n          {filteredAnswers}\n        </DroppablePlaceholder>\n      </ChoicesContainer>\n    );\n  }\n}\n\nexport default ChoicesList;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,qBAAA,GAAAL,OAAA;AAEA,MAAMM,gBAAgB,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EACrDC,YAAY,EAAED,KAAK,CAACE,OAAO,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEI,MAAMC,WAAW,SAASC,cAAK,CAACC,SAAS,CAAC;EAS/CC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,KAAK;MAAEC,QAAQ;MAAEC,OAAO;MAAEC,UAAU;MAAEC;IAAe,CAAC,GAAG,IAAI,CAACC,KAAK;IAC3E,MAAM;MAAEC;IAAO,CAAC,GAAGN,KAAK;IACxB,MAAM;MAAEO;IAAW,CAAC,GAAGD,MAAM;IAE7B,MAAME,eAAe,GAAGF,MAAM,CAACG,OAAO,CACnCC,MAAM,CACJC,MAAM,IACLJ,UAAU,IACV,IAAAK,iBAAO,EAACV,OAAO,CAAC,IAChB,CAACA,OAAO,CAACW,KAAK,IACd,IAAAC,qBAAW,EAAC,IAAAC,cAAI,EAACb,OAAO,CAACW,KAAK,EAAGG,GAAG,IAAKA,GAAG,KAAKL,MAAM,CAACM,EAAE,CAAC,CAC/D,CAAC,CACAC,GAAG,CAAEP,MAAM,iBACV5B,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAC/B,OAAA,CAAA8B,OAAiB,MAAAE,SAAA,CAAAF,OAAA;MAChBG,GAAG,EAAEX,MAAM,CAACM,EAAG;MACfd,UAAU,EAAEA,UAAW;MACvBoB,SAAS,EAAE,IAAK;MAChBtB,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBsB,IAAI,EAAC;IAAQ,GACTb,MAAM,CACX,CACF,CAAC;IAEJ,oBACE5B,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAC7B,gBAAgB,qBACfR,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAC9B,qBAAA,CAAAmC,oBAAoB;MAACR,EAAE,EAAC,cAAc;MAAChB,QAAQ,EAAEA,QAAS;MAACG,cAAc,EAAEA;IAAe,GACxFI,eACmB,CACN,CAAC;EAEvB;AACF;AAACkB,OAAA,CAAA9B,WAAA,GAAAA,WAAA;AAAA,IAAA+B,gBAAA,CAAAR,OAAA,EA1CYvB,WAAW,eACH;EACjBM,OAAO,EAAE0B,kBAAS,CAACC,MAAM,CAACC,UAAU;EACpC3B,UAAU,EAAEyB,kBAAS,CAACG,MAAM,CAACD,UAAU;EACvC9B,KAAK,EAAE4B,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClC7B,QAAQ,EAAE2B,kBAAS,CAACI,IAAI,CAACF,UAAU;EACnC1B,cAAc,EAAEwB,kBAAS,CAACK;AAC5B,CAAC;AAAA,IAAAC,QAAA,GAAAR,OAAA,CAAAP,OAAA,GAqCYvB,WAAW","ignoreList":[]}

package/lib/droppable-placeholder.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DroppablePlaceholder = DroppablePlaceholder;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _core = require("@dnd-kit/core");
+var _styles = require("@mui/material/styles");
+var _drag = require("@pie-lib/drag");
+const Container = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'space-between',
+  marginTop: theme.spacing(1),
+  marginBottom: theme.spacing(1),
+  minHeight: 50,
+  transition: 'background-color 200ms ease'
+}));
+function DroppablePlaceholder({
+  id,
+  disabled,
+  children,
+  ...rest
+}) {
+  const {
+    setNodeRef,
+    isOver
+  } = (0, _core.useDroppable)({
+    id: id || 'choices-pool',
+    data: {
+      type: 'choices-pool'
+    },
+    disabled
+  });
+  return /*#__PURE__*/_react.default.createElement(Container, (0, _extends2.default)({
+    ref: setNodeRef,
+    style: {
+      backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent'
+    }
+  }, rest), /*#__PURE__*/_react.default.createElement(_drag.MatchDroppablePlaceholder, {
+    id: id,
+    disabled: disabled
+  }, children));
+}
+DroppablePlaceholder.propTypes = {
+  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  disabled: _propTypes.default.bool,
+  children: _propTypes.default.node
+};
+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","_propTypes","_core","_styles","_drag","Container","styled","theme","alignItems","display","flexDirection","flexWrap","justifyContent","marginTop","spacing","marginBottom","minHeight","transition","DroppablePlaceholder","id","disabled","children","rest","setNodeRef","isOver","useDroppable","data","type","default","createElement","_extends2","ref","style","backgroundColor","MatchDroppablePlaceholder","propTypes","PropTypes","oneOfType","string","number","bool","node","_default","exports"],"sources":["../src/droppable-placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { MatchDroppablePlaceholder } from '@pie-lib/drag';\n\nconst Container = styled('div')(({ theme }) => ({\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'space-between',\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n    minHeight: 50,\n    transition: 'background-color 200ms ease',\n}));\n\nexport function DroppablePlaceholder({ id, disabled, children, ...rest }) {\n    const { setNodeRef, isOver } = useDroppable({\n        id: id || 'choices-pool',\n        data: { type: 'choices-pool' },\n        disabled,\n    });\n\n    return (\n        <Container\n            ref={setNodeRef}\n            style={{ backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent' }}\n            {...rest}\n        >\n            <MatchDroppablePlaceholder id={id} disabled={disabled}>\n                {children}\n            </MatchDroppablePlaceholder>\n        </Container>\n    );\n}\n\nDroppablePlaceholder.propTypes = {\n    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    disabled: PropTypes.bool,\n    children: PropTypes.node,\n};\n\nexport default DroppablePlaceholder;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAEA,MAAMK,SAAS,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAC5CC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,KAAK;EACpBC,QAAQ,EAAE,MAAM;EAChBC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAEN,KAAK,CAACO,OAAO,CAAC,CAAC,CAAC;EAC3BC,YAAY,EAAER,KAAK,CAACO,OAAO,CAAC,CAAC,CAAC;EAC9BE,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE;AAChB,CAAC,CAAC,CAAC;AAEI,SAASC,oBAAoBA,CAAC;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAE;EACtE,MAAM;IAAEC,UAAU;IAAEC;EAAO,CAAC,GAAG,IAAAC,kBAAY,EAAC;IACxCN,EAAE,EAAEA,EAAE,IAAI,cAAc;IACxBO,IAAI,EAAE;MAAEC,IAAI,EAAE;IAAe,CAAC;IAC9BP;EACJ,CAAC,CAAC;EAEF,oBACItB,MAAA,CAAA8B,OAAA,CAAAC,aAAA,CAACxB,SAAS,MAAAyB,SAAA,CAAAF,OAAA;IACNG,GAAG,EAAER,UAAW;IAChBS,KAAK,EAAE;MAAEC,eAAe,EAAET,MAAM,GAAG,kBAAkB,GAAG;IAAc;EAAE,GACpEF,IAAI,gBAERxB,MAAA,CAAA8B,OAAA,CAAAC,aAAA,CAACzB,KAAA,CAAA8B,yBAAyB;IAACf,EAAE,EAAEA,EAAG;IAACC,QAAQ,EAAEA;EAAS,GACjDC,QACsB,CACpB,CAAC;AAEpB;AAEAH,oBAAoB,CAACiB,SAAS,GAAG;EAC7BhB,EAAE,EAAEiB,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,MAAM,CAAC,CAAC;EAC7DnB,QAAQ,EAAEgB,kBAAS,CAACI,IAAI;EACxBnB,QAAQ,EAAEe,kBAAS,CAACK;AACxB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAf,OAAA,GAEaV,oBAAoB","ignoreList":[]}

package/lib/main.js

@@ -10,12 +10,14 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _drag = require("@pie-lib/drag");
 var _core = require("@dnd-kit/core");
+var _modifiers = require("@dnd-kit/modifiers");
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
 var _renderUi = require("@pie-lib/render-ui");
 var _styles = require("@mui/material/styles");
 var _lodashEs = require("lodash-es");
 var _answerArea = _interopRequireDefault(require("./answer-area"));
 var _choicesList = _interopRequireDefault(require("./choices-list"));
+var _answer = require("./answer");
 const MainContainer = (0, _styles.styled)('div')({
   display: 'flex',
   flexDirection: 'column',
@@ -26,35 +28,74 @@ const MainContainer = (0, _styles.styled)('div')({
 class Main extends _react.default.Component {
   constructor(props) {
     super(props);
+    (0, _defineProperty2.default)(this, "onDragStart", event => {
+      const {
+        active
+      } = event;
+      if (active?.data?.current) {
+        let rect = null;
+        const node = active.node?.current;
+        if (node) {
+          const {
+            width,
+            height
+          } = node.getBoundingClientRect();
+          rect = {
+            width,
+            height
+          };
+        }
+        this.setState({
+          draggingElement: {
+            ...active.data.current,
+            rect
+          }
+        });
+      }
+    });
     (0, _defineProperty2.default)(this, "onPlaceAnswer", event => {
+      this.setState({
+        draggingElement: null
+      });
       const {
         active,
         over
       } = event;
-      if (!over || !active) {
+      if (!active) {
         return;
       }
       const activeData = active.data.current;
-      const overData = over.data.current;
-      if (activeData && overData) {
-        const {
-          session,
-          onSessionChange,
-          model
-        } = this.props;
-        const {
-          config: {
-            duplicates
-          }
-        } = model;
-        if ((0, _lodashEs.isUndefined)(session.value)) {
-          session.value = {};
+      const overData = over?.data.current;
+      if (!activeData) {
+        return;
+      }
+      const {
+        session,
+        onSessionChange,
+        model
+      } = this.props;
+      const {
+        config: {
+          duplicates
         }
-        const answerId = activeData.id;
-        const targetPromptId = overData.promptId;
+      } = model;
+      if ((0, _lodashEs.isUndefined)(session.value)) {
+        session.value = {};
+      }
+
+      // dropping a placed answer back to the choices pool = remove it
+      if (overData.type === 'choices-pool' && activeData.promptId !== undefined) {
+        session.value[activeData.promptId] = undefined;
+        onSessionChange(session);
+        return;
+      }
+      const answerId = activeData.id;
+      const sourcePromptId = activeData.promptId;
 
-        // only allow dropping choices (not already placed answers) onto drop zones
-        if (activeData.type === 'choice' && overData.type === 'drop-zone' && targetPromptId) {
+      // Handle dropping onto a drop zone
+      if (overData && overData.type === 'drop-zone' && overData.promptId != null) {
+        const targetPromptId = overData.promptId;
+        if (activeData.type === 'choice' && overData.type === 'drop-zone' && targetPromptId !== undefined) {
           // check if this choice is already placed somewhere
           const existingPlacement = (0, _lodashEs.findKey)(session.value, val => val === answerId);
           if (existingPlacement && !duplicates) {
@@ -64,8 +105,25 @@ class Main extends _react.default.Component {
             // place answer
             session.value[targetPromptId] = answerId;
           }
-          onSessionChange(session);
         }
+        // Handle moving a placed item (target) to another drop zone
+        else if (activeData.type === 'target' && sourcePromptId != null) {
+          // If moving to a different placeholder
+          if (sourcePromptId !== targetPromptId) {
+            const targetHasItem = session.value[targetPromptId] != null;
+            if (targetHasItem && !duplicates) {
+              // swap items between placeholders
+              const temp = session.value[targetPromptId];
+              session.value[targetPromptId] = answerId;
+              session.value[sourcePromptId] = temp;
+            } else if (!targetHasItem) {
+              // move item to empty placeholder
+              session.value[targetPromptId] = answerId;
+              delete session.value[sourcePromptId];
+            }
+          }
+        }
+        onSessionChange(session);
       }
     });
     (0, _defineProperty2.default)(this, "toggleShowCorrect", () => {
@@ -73,9 +131,27 @@ class Main extends _react.default.Component {
         showCorrectAnswer: !this.state.showCorrectAnswer
       });
     });
+    (0, _defineProperty2.default)(this, "renderDragOverlay", () => {
+      const {
+        draggingElement
+      } = this.state;
+      if (!draggingElement) return null;
+      return /*#__PURE__*/_react.default.createElement(_answer.Answer, {
+        id: draggingElement.id,
+        title: draggingElement.value,
+        disabled: false,
+        isDragging: false,
+        style: draggingElement.rect ? {
+          width: draggingElement.rect.width,
+          height: draggingElement.rect.height,
+          boxSizing: 'border-box'
+        } : {}
+      });
+    });
     this.instanceId = (0, _lodashEs.uniqueId)();
     this.state = {
-      showCorrectAnswer: false
+      showCorrectAnswer: false,
+      draggingElement: null
     };
   }
   onRemoveAnswer(id) {
@@ -103,7 +179,9 @@ class Main extends _react.default.Component {
       language
     } = config;
     return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
-      onDragEnd: this.onPlaceAnswer
+      onDragStart: this.onDragStart,
+      onDragEnd: this.onPlaceAnswer,
+      modifiers: [_modifiers.restrictToFirstScrollableAncestor]
     }, /*#__PURE__*/_react.default.createElement(MainContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
       className: "prompt",
       prompt: prompt
@@ -128,7 +206,7 @@ class Main extends _react.default.Component {
     }), model.correctness && model.feedback && !showCorrectAnswer && /*#__PURE__*/_react.default.createElement(_renderUi.Feedback, {
       correctness: model.correctness.correctness,
       feedback: model.feedback
-    })));
+    })), /*#__PURE__*/_react.default.createElement(_core.DragOverlay, null, this.renderDragOverlay()));
   }
 }
 exports.Main = Main;

package/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_drag","_core","_correctAnswerToggle","_renderUi","_styles","_lodashEs","_answerArea","_choicesList","MainContainer","styled","display","flexDirection","justifyContent","color","text","backgroundColor","background","Main","React","Component","constructor","props","_defineProperty2","default","event","active","over","activeData","data","current","overData","session","onSessionChange","model","config","duplicates","isUndefined","value","answerId","id","targetPromptId","promptId","type","existingPlacement","findKey","val","swap","setState","showCorrectAnswer","state","instanceId","uniqueId","onRemoveAnswer","undefined","render","mode","prompt","language","createElement","DndContext","onDragEnd","onPlaceAnswer","PreviewPrompt","className","show","toggled","onToggle","toggleShowCorrect","disabled","showCorrect","correctness","feedback","Feedback","exports","PropTypes","object","isRequired","func","string","_default"],"sources":["../src/main.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { swap } from '@pie-lib/drag';\nimport { DndContext } from '@dnd-kit/core';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { color, Feedback, PreviewPrompt } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\nimport { findKey, isUndefined, uniqueId } from 'lodash-es';\nimport AnswerArea from './answer-area';\nimport ChoicesList from './choices-list';\n\nconst MainContainer = styled('div')({\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  color: color.text(),\n  backgroundColor: color.background(),\n});\n\nexport class Main extends React.Component {\n  static propTypes = {\n    session: PropTypes.object.isRequired,\n    onSessionChange: PropTypes.func,\n    model: PropTypes.object.isRequired,\n    prompt: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.instanceId = uniqueId();\n    this.state = {\n      showCorrectAnswer: false,\n    };\n  }\n\n  onRemoveAnswer(id) {\n    const { session, onSessionChange } = this.props;\n\n    session.value[id] = undefined;\n\n    onSessionChange(session);\n  }\n\n  onPlaceAnswer = (event) => {\n    const { active, over } = event;\n\n    if (!over || !active) {\n      return;\n    }\n\n    const activeData = active.data.current;\n    const overData = over.data.current;\n\n    if (activeData && overData) {\n      const { session, onSessionChange, model } = this.props;\n      const {\n        config: { duplicates },\n      } = model;\n\n      if (isUndefined(session.value)) {\n        session.value = {};\n      }\n\n      const answerId = activeData.id;\n      const targetPromptId = overData.promptId;\n\n      // only allow dropping choices (not already placed answers) onto drop zones\n      if (activeData.type === 'choice' && overData.type === 'drop-zone' && targetPromptId) {\n        // check if this choice is already placed somewhere\n        const existingPlacement = findKey(session.value, (val) => val === answerId);\n\n        if (existingPlacement && !duplicates) {\n          // swap if duplicates not allowed\n          session.value = swap(session.value, existingPlacement, targetPromptId);\n        } else {\n          // place answer\n          session.value[targetPromptId] = answerId;\n        }\n\n        onSessionChange(session);\n      }\n    }\n  };\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const { model, session } = this.props;\n    const { config, mode } = model;\n    const { prompt, language } = config;\n\n    return (\n      <DndContext onDragEnd={this.onPlaceAnswer}>\n        <MainContainer>\n          <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n          <CorrectAnswerToggle\n            show={mode === 'evaluate'}\n            toggled={showCorrectAnswer}\n            onToggle={this.toggleShowCorrect}\n            language={language}\n          />\n\n          <AnswerArea\n            instanceId={this.instanceId}\n            model={model}\n            session={session}\n            onRemoveAnswer={(id) => this.onRemoveAnswer(id)}\n            disabled={mode !== 'gather'}\n            showCorrect={showCorrectAnswer}\n          />\n\n          <ChoicesList\n            instanceId={this.instanceId}\n            model={model}\n            session={session}\n            disabled={mode !== 'gather'}\n            onRemoveAnswer={(id) => this.onRemoveAnswer(id)}\n          />\n\n          {model.correctness && model.feedback && !showCorrectAnswer && (\n            <Feedback correctness={model.correctness.correctness} feedback={model.feedback} />\n          )}\n        </MainContainer>\n      </DndContext>\n    );\n  }\n}\n\nexport default Main;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_drag","_core","_modifiers","_correctAnswerToggle","_renderUi","_styles","_lodashEs","_answerArea","_choicesList","_answer","MainContainer","styled","display","flexDirection","justifyContent","color","text","backgroundColor","background","Main","React","Component","constructor","props","_defineProperty2","default","event","active","data","current","rect","node","width","height","getBoundingClientRect","setState","draggingElement","over","activeData","overData","session","onSessionChange","model","config","duplicates","isUndefined","value","type","promptId","undefined","answerId","id","sourcePromptId","targetPromptId","existingPlacement","findKey","val","swap","targetHasItem","temp","showCorrectAnswer","state","createElement","Answer","title","disabled","isDragging","style","boxSizing","instanceId","uniqueId","onRemoveAnswer","render","mode","prompt","language","DndContext","onDragStart","onDragEnd","onPlaceAnswer","modifiers","restrictToFirstScrollableAncestor","PreviewPrompt","className","show","toggled","onToggle","toggleShowCorrect","showCorrect","correctness","feedback","Feedback","DragOverlay","renderDragOverlay","exports","PropTypes","object","isRequired","func","string","_default"],"sources":["../src/main.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { swap } from '@pie-lib/drag';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { color, Feedback, PreviewPrompt } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\nimport { findKey, isUndefined, uniqueId } from 'lodash-es';\nimport AnswerArea from './answer-area';\nimport ChoicesList from './choices-list';\nimport { Answer } from './answer';\n\nconst MainContainer = styled('div')({\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  color: color.text(),\n  backgroundColor: color.background(),\n});\n\nexport class Main extends React.Component {\n  static propTypes = {\n    session: PropTypes.object.isRequired,\n    onSessionChange: PropTypes.func,\n    model: PropTypes.object.isRequired,\n    prompt: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.instanceId = uniqueId();\n    this.state = {\n      showCorrectAnswer: false,\n      draggingElement: null,\n    };\n  }\n\n  onRemoveAnswer(id) {\n    const { session, onSessionChange } = this.props;\n\n    session.value[id] = undefined;\n\n    onSessionChange(session);\n  }\n\n  onDragStart = (event) => {\n    const { active } = event;\n\n    if (active?.data?.current) {\n      let rect = null;\n      const node = active.node?.current;\n\n      if (node) {\n        const { width, height } = node.getBoundingClientRect();\n        rect = { width, height };\n      }\n\n      this.setState({\n        draggingElement: { ...active.data.current, rect },\n      });\n    }\n  };\n\n  onPlaceAnswer = (event) => {\n    this.setState({ draggingElement: null });\n    const { active, over } = event;\n\n    if (!active) {\n      return;\n    }\n\n    const activeData = active.data.current;\n    const overData = over?.data.current;\n\n    if (!activeData) {\n      return;\n    }\n\n    const { session, onSessionChange, model } = this.props;\n    const {\n      config: { duplicates },\n    } = model;\n\n      if (isUndefined(session.value)) {\n        session.value = {};\n      }\n\n      // dropping a placed answer back to the choices pool = remove it\n      if (overData.type === 'choices-pool' && activeData.promptId !== undefined) {\n        session.value[activeData.promptId] = undefined;\n        onSessionChange(session);\n        return;\n      }\n\n    const answerId = activeData.id;\n    const sourcePromptId = activeData.promptId;\n\n    // Handle dropping onto a drop zone\n    if (overData && overData.type === 'drop-zone' && overData.promptId != null) {\n      const targetPromptId = overData.promptId;\n\n      if (activeData.type === 'choice' && overData.type === 'drop-zone' && targetPromptId !== undefined) {\n        // check if this choice is already placed somewhere\n        const existingPlacement = findKey(session.value, (val) => val === answerId);\n\n        if (existingPlacement && !duplicates) {\n          // swap if duplicates not allowed\n          session.value = swap(session.value, existingPlacement, targetPromptId);\n        } else {\n          // place answer\n          session.value[targetPromptId] = answerId;\n        }\n      }\n      // Handle moving a placed item (target) to another drop zone\n      else if (activeData.type === 'target' && sourcePromptId != null) {\n        // If moving to a different placeholder\n        if (sourcePromptId !== targetPromptId) {\n          const targetHasItem = session.value[targetPromptId] != null;\n\n          if (targetHasItem && !duplicates) {\n            // swap items between placeholders\n            const temp = session.value[targetPromptId];\n            session.value[targetPromptId] = answerId;\n            session.value[sourcePromptId] = temp;\n          } else if (!targetHasItem) {\n            // move item to empty placeholder\n            session.value[targetPromptId] = answerId;\n            delete session.value[sourcePromptId];\n          }\n        }\n      }\n\n      onSessionChange(session);\n    }\n  };\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  renderDragOverlay = () => {\n    const { draggingElement } = this.state;\n\n    if (!draggingElement) return null;\n\n    return (\n      <Answer\n        id={draggingElement.id}\n        title={draggingElement.value}\n        disabled={false}\n        isDragging={false}\n        style={\n          draggingElement.rect\n            ? { width: draggingElement.rect.width, height: draggingElement.rect.height, boxSizing: 'border-box' }\n            : {}\n        }\n      />\n    );\n  };\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const { model, session } = this.props;\n    const { config, mode } = model;\n    const { prompt, language } = config;\n\n    return (\n      <DndContext\n        onDragStart={this.onDragStart}\n        onDragEnd={this.onPlaceAnswer}\n        modifiers={[restrictToFirstScrollableAncestor]}\n      >\n        <MainContainer>\n          <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n          <CorrectAnswerToggle\n            show={mode === 'evaluate'}\n            toggled={showCorrectAnswer}\n            onToggle={this.toggleShowCorrect}\n            language={language}\n          />\n\n          <AnswerArea\n            instanceId={this.instanceId}\n            model={model}\n            session={session}\n            onRemoveAnswer={(id) => this.onRemoveAnswer(id)}\n            disabled={mode !== 'gather'}\n            showCorrect={showCorrectAnswer}\n          />\n\n          <ChoicesList\n            instanceId={this.instanceId}\n            model={model}\n            session={session}\n            disabled={mode !== 'gather'}\n            onRemoveAnswer={(id) => this.onRemoveAnswer(id)}\n          />\n\n          {model.correctness && model.feedback && !showCorrectAnswer && (\n            <Feedback correctness={model.correctness.correctness} feedback={model.feedback} />\n          )}\n        </MainContainer>\n        <DragOverlay>{this.renderDragOverlay()}</DragOverlay>\n      </DndContext>\n    );\n  }\n}\n\nexport default Main;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,13 +1,10 @@
 {
   "name": "@pie-element/match-list",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/pie-framework/pie-elements"
-  },
+  "repository": "pie-framework/pie-elements",
   "publishConfig": {
     "access": "public"
   },
-  "version": "6.1.0-next.0+20d879b",
+  "version": "6.1.1-next.1",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -15,15 +12,16 @@
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/modifiers": "9.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "3.1.1-next.1",
-    "@pie-lib/drag": "3.1.1-next.1",
-    "@pie-lib/math-rendering": "4.1.1-next.1",
-    "@pie-lib/render-ui": "5.1.1-next.1",
+    "@pie-lib/correct-answer-toggle": "3.2.0-next.4",
+    "@pie-lib/drag": "3.2.0-next.4",
+    "@pie-lib/math-rendering": "4.2.0-next.3",
+    "@pie-lib/render-ui": "5.2.0-next.4",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",
@@ -32,7 +30,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "20d879b8b8fa74decf5028d860d54cd09cbdf051",
+  "gitHead": "9cc4a1cd183a260a03c7d817e0085517112a1a56",
   "main": "lib/index.js",
   "module": "src/index.js"
 }