@pie-element/match-list 7.1.6 → 7.1.8

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.1.6...@pie-element/match-list@7.1.8) (2026-08-13)
+
+### Bug Fixes
+
+- **match-list/placement-ordering:** scroll the interactive region horizontally when it does not fit PIE-766 & PIE-768 ([f0395a9](https://github.com/pie-framework/pie-elements/commit/f0395a91b16a803c5609d5ece6d3f87208dee1b2))
+- **match-list:** improve keyboard drag-and-drop, collision detection and drop-zone visuals PIE-643 ([265b832](https://github.com/pie-framework/pie-elements/commit/265b8329b27b0226ce49ac83f3f3b944c18fc506))
+
+## [7.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.1.6...@pie-element/match-list@7.1.7) (2026-08-11)
+
+**Note:** Version bump only for package @pie-element/match-list
+
 ## [7.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.1.5...@pie-element/match-list@7.1.6) (2026-07-02)
 
 ### Bug Fixes

package/controller/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.
 
+## [6.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.1.2...@pie-element/match-list-controller@6.1.4) (2026-08-13)
+
+**Note:** Version bump only for package @pie-element/match-list-controller
+
+## [6.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.1.2...@pie-element/match-list-controller@6.1.3) (2026-08-11)
+
+**Note:** Version bump only for package @pie-element/match-list-controller
+
 ## [6.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.1.1...@pie-element/match-list-controller@6.1.2) (2026-07-02)
 
 ### Bug Fixes

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/match-list-controller",
   "private": true,
-  "version": "6.1.2",
+  "version": "6.1.4",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",

package/lib/answer-area.js

@@ -12,9 +12,13 @@ var _styles = require("@mui/material/styles");
 var _lodashEs = require("lodash-es");
 var _arrow = _interopRequireDefault(require("./arrow"));
 var _answer = _interopRequireDefault(require("./answer"));
+// matches the min width of the answer entries (see AnswerContainer in ./answer), so the two columns
+// give the row an intrinsic min width that the horizontal scroll container can overflow.
+const MIN_COLUMN_WIDTH = 200;
 const ArrowEntry = (0, _styles.styled)('div')({
   alignItems: 'normal',
   display: 'flex',
+  flexShrink: 0,
   height: 40,
   margin: '10px 20px'
 });
@@ -37,6 +41,7 @@ const PromptEntry = (0, _styles.styled)('div')(({
   flex: 1,
   margin: '10px 0',
   minHeight: 40,
+  minWidth: MIN_COLUMN_WIDTH,
   overflow: 'hidden',
   padding: 10,
   textAlign: 'center',

package/lib/answer-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"answer-area.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_lodashEs","_arrow","_answer","ArrowEntry","styled","alignItems","display","height","margin","ItemList","theme","flex","flexDirection","justifyContent","marginTop","spacing","marginBottom","PromptEntry","border","palette","grey","boxSizing","minHeight","overflow","padding","textAlign","width","wordBreak","Row","AnswerArea","React","Component","constructor","args","_defineProperty2","default","promptId","model","session","showCorrect","props","config","answerId","prompts","find","p","id","relatedAnswer","value","answer","answers","sessionValue","reduce","obj","prompt","undefined","mode","correctPromptMap","isUndefined","val","key","map","sessionAnswer","getAnswerFromSession","render","disabled","instanceId","onRemoveAnswer","rows","buildRows","correctnessMap","getCorrectOrIncorrectMap","createElement","title","index","dangerouslySetInnerHTML","__html","direction","className","correct","draggable","isEmpty","type","onRemoveChoice","exports","PropTypes","object","isRequired","bool","onSessionChange","func","string","_default"],"sources":["../src/answer-area.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { isEmpty, isUndefined, reduce } from 'lodash-es';\n\nimport Arrow from './arrow';\nimport DragAndDropAnswer from './answer';\n\nconst ArrowEntry = styled('div')({\n  alignItems: 'normal',\n  display: 'flex',\n  height: 40,\n  margin: '10px 20px',\n});\n\nconst ItemList = styled('div')(({ theme }) => ({\n  alignItems: 'flex-start',\n  display: 'flex',\n  flex: 1,\n  flexDirection: 'column',\n  justifyContent: 'space-between',\n  marginTop: theme.spacing(2),\n  marginBottom: theme.spacing(2),\n}));\n\nconst PromptEntry = styled('div')(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[400]}`,\n  boxSizing: 'border-box',\n  flex: 1,\n  margin: '10px 0',\n  minHeight: 40,\n  overflow: 'hidden',\n  padding: 10,\n  textAlign: 'center',\n  width: '100%',\n  wordBreak: 'break-word',\n}));\n\nconst Row = styled('div')({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'space-between',\n  width: '100%',\n});\n\nexport class AnswerArea extends React.Component {\n  static propTypes = {\n    session: PropTypes.object.isRequired,\n    showCorrect: PropTypes.bool.isRequired,\n    disabled: PropTypes.bool.isRequired,\n    onSessionChange: PropTypes.func,\n    onRemoveAnswer: PropTypes.func,\n    instanceId: PropTypes.string.isRequired,\n    model: PropTypes.object.isRequired,\n    prompt: PropTypes.string,\n  };\n\n  getAnswerFromSession = (promptId) => {\n    const { model, session, showCorrect } = this.props;\n    const { config } = model;\n    const answerId = showCorrect\n      ? config.prompts.find((p) => p.id === promptId).relatedAnswer\n      : session.value && session.value[promptId];\n    const answer = config.answers.find((answer) => answer.id === answerId);\n\n    return answer || {};\n  };\n\n  getCorrectOrIncorrectMap = () => {\n    const { model, session, showCorrect } = this.props;\n    const { config } = model;\n    const sessionValue =\n      session.value ||\n      config.prompts.reduce((obj, prompt) => {\n        obj[prompt.id] = undefined;\n        return obj;\n      }, {});\n\n    if (model.mode !== 'evaluate') {\n      return {};\n    }\n\n    if (showCorrect) {\n      return config.prompts.reduce((obj, prompt) => {\n        obj[prompt.id] = true;\n\n        return obj;\n      }, {});\n    }\n\n    const correctPromptMap = config.prompts.reduce((obj, prompt) => {\n      if (!isUndefined(prompt.relatedAnswer)) {\n        obj[prompt.id] = prompt.relatedAnswer;\n      }\n\n      return obj;\n    }, {});\n\n    return reduce(\n      sessionValue,\n      (obj, val, key) => {\n        obj[key] = correctPromptMap[key] === sessionValue[key];\n\n        return obj;\n      },\n      {},\n    );\n  };\n\n  buildRows = () => {\n    const { model } = this.props;\n    const { config } = model;\n    const prompts = config.prompts || [];\n\n    return prompts.map((prompt) => {\n      const sessionAnswer = this.getAnswerFromSession(prompt.id);\n\n      return {\n        ...prompt,\n        sessionAnswer,\n      };\n    });\n  };\n\n  render() {\n    const { disabled, instanceId, onRemoveAnswer } = this.props;\n    const rows = this.buildRows();\n    const correctnessMap = this.getCorrectOrIncorrectMap();\n\n    return (\n      <ItemList>\n        {rows.map(({ sessionAnswer, title, id }, index) => {\n          return (\n            <Row key={index}>\n              <PromptEntry dangerouslySetInnerHTML={{ __html: title }} />\n\n              <ArrowEntry>\n                <Arrow direction=\"left\" />\n                <Arrow />\n              </ArrowEntry>\n\n              <DragAndDropAnswer\n                key={index}\n                className=\"answer\"\n                index={index}\n                promptId={id}\n                correct={correctnessMap[id]}\n                draggable={!isEmpty(sessionAnswer)}\n                disabled={disabled}\n                instanceId={instanceId}\n                id={sessionAnswer.id}\n                title={sessionAnswer.title}\n                type={'target'}\n                onRemoveChoice={() => onRemoveAnswer(id)}\n              />\n            </Row>\n          );\n        })}\n      </ItemList>\n    );\n  }\n}\n\nexport default AnswerArea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"answer-area.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_lodashEs","_arrow","_answer","MIN_COLUMN_WIDTH","ArrowEntry","styled","alignItems","display","flexShrink","height","margin","ItemList","theme","flex","flexDirection","justifyContent","marginTop","spacing","marginBottom","PromptEntry","border","palette","grey","boxSizing","minHeight","minWidth","overflow","padding","textAlign","width","wordBreak","Row","AnswerArea","React","Component","constructor","args","_defineProperty2","default","promptId","model","session","showCorrect","props","config","answerId","prompts","find","p","id","relatedAnswer","value","answer","answers","sessionValue","reduce","obj","prompt","undefined","mode","correctPromptMap","isUndefined","val","key","map","sessionAnswer","getAnswerFromSession","render","disabled","instanceId","onRemoveAnswer","rows","buildRows","correctnessMap","getCorrectOrIncorrectMap","createElement","title","index","dangerouslySetInnerHTML","__html","direction","className","correct","draggable","isEmpty","type","onRemoveChoice","exports","PropTypes","object","isRequired","bool","onSessionChange","func","string","_default"],"sources":["../src/answer-area.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { isEmpty, isUndefined, reduce } from 'lodash-es';\n\nimport Arrow from './arrow';\nimport DragAndDropAnswer from './answer';\n\n// matches the min width of the answer entries (see AnswerContainer in ./answer), so the two columns\n// give the row an intrinsic min width that the horizontal scroll container can overflow.\nconst MIN_COLUMN_WIDTH = 200;\n\nconst ArrowEntry = styled('div')({\n  alignItems: 'normal',\n  display: 'flex',\n  flexShrink: 0,\n  height: 40,\n  margin: '10px 20px',\n});\n\nconst ItemList = styled('div')(({ theme }) => ({\n  alignItems: 'flex-start',\n  display: 'flex',\n  flex: 1,\n  flexDirection: 'column',\n  justifyContent: 'space-between',\n  marginTop: theme.spacing(2),\n  marginBottom: theme.spacing(2),\n}));\n\nconst PromptEntry = styled('div')(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[400]}`,\n  boxSizing: 'border-box',\n  flex: 1,\n  margin: '10px 0',\n  minHeight: 40,\n  minWidth: MIN_COLUMN_WIDTH,\n  overflow: 'hidden',\n  padding: 10,\n  textAlign: 'center',\n  width: '100%',\n  wordBreak: 'break-word',\n}));\n\nconst Row = styled('div')({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'space-between',\n  width: '100%',\n});\n\nexport class AnswerArea extends React.Component {\n  static propTypes = {\n    session: PropTypes.object.isRequired,\n    showCorrect: PropTypes.bool.isRequired,\n    disabled: PropTypes.bool.isRequired,\n    onSessionChange: PropTypes.func,\n    onRemoveAnswer: PropTypes.func,\n    instanceId: PropTypes.string.isRequired,\n    model: PropTypes.object.isRequired,\n    prompt: PropTypes.string,\n  };\n\n  getAnswerFromSession = (promptId) => {\n    const { model, session, showCorrect } = this.props;\n    const { config } = model;\n    const answerId = showCorrect\n      ? config.prompts.find((p) => p.id === promptId).relatedAnswer\n      : session.value && session.value[promptId];\n    const answer = config.answers.find((answer) => answer.id === answerId);\n\n    return answer || {};\n  };\n\n  getCorrectOrIncorrectMap = () => {\n    const { model, session, showCorrect } = this.props;\n    const { config } = model;\n    const sessionValue =\n      session.value ||\n      config.prompts.reduce((obj, prompt) => {\n        obj[prompt.id] = undefined;\n        return obj;\n      }, {});\n\n    if (model.mode !== 'evaluate') {\n      return {};\n    }\n\n    if (showCorrect) {\n      return config.prompts.reduce((obj, prompt) => {\n        obj[prompt.id] = true;\n\n        return obj;\n      }, {});\n    }\n\n    const correctPromptMap = config.prompts.reduce((obj, prompt) => {\n      if (!isUndefined(prompt.relatedAnswer)) {\n        obj[prompt.id] = prompt.relatedAnswer;\n      }\n\n      return obj;\n    }, {});\n\n    return reduce(\n      sessionValue,\n      (obj, val, key) => {\n        obj[key] = correctPromptMap[key] === sessionValue[key];\n\n        return obj;\n      },\n      {},\n    );\n  };\n\n  buildRows = () => {\n    const { model } = this.props;\n    const { config } = model;\n    const prompts = config.prompts || [];\n\n    return prompts.map((prompt) => {\n      const sessionAnswer = this.getAnswerFromSession(prompt.id);\n\n      return {\n        ...prompt,\n        sessionAnswer,\n      };\n    });\n  };\n\n  render() {\n    const { disabled, instanceId, onRemoveAnswer } = this.props;\n    const rows = this.buildRows();\n    const correctnessMap = this.getCorrectOrIncorrectMap();\n\n    return (\n      <ItemList>\n        {rows.map(({ sessionAnswer, title, id }, index) => {\n          return (\n            <Row key={index}>\n              <PromptEntry dangerouslySetInnerHTML={{ __html: title }} />\n\n              <ArrowEntry>\n                <Arrow direction=\"left\" />\n                <Arrow />\n              </ArrowEntry>\n\n              <DragAndDropAnswer\n                key={index}\n                className=\"answer\"\n                index={index}\n                promptId={id}\n                correct={correctnessMap[id]}\n                draggable={!isEmpty(sessionAnswer)}\n                disabled={disabled}\n                instanceId={instanceId}\n                id={sessionAnswer.id}\n                title={sessionAnswer.title}\n                type={'target'}\n                onRemoveChoice={() => onRemoveAnswer(id)}\n              />\n            </Row>\n          );\n        })}\n      </ItemList>\n    );\n  }\n}\n\nexport default AnswerArea;\n"],"mappings":"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","ignoreList":[]}

package/lib/answer.js

@@ -219,20 +219,27 @@ function DragAndDropAnswer(props) {
   const transformStyle = transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined;
 
   // If this item is a drop-zone (prompt slot), we render an outer droppable wrapper.
-  // For droppable wrapper we apply style to the outer wrapper
+  // The outer wrapper's rect is what dnd-kit measures for this slot's own droppable
+  // ("drop-{promptId}"), so it must stay untransformed — applying the drag transform
+  // there would make the slot's own droppable rect chase the dragged item during the
+  // drag, corrupting collision/keyboard-navigation results. The transform belongs on
+  // the inner draggable node instead.
   if (dropId) {
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: setDropRef,
       style: {
         flex: 1,
-        transform: transformStyle,
-        transition,
         opacity: isDragging ? 0.5 : 1,
-        backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent'
+        backgroundColor: isDragging || isOver ? 'rgba(0,0,0,0.05)' : 'transparent'
       }
     }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
       ref: setDragRef
-    }, listeners, attributes), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
+    }, listeners, attributes, {
+      style: {
+        transform: transformStyle,
+        transition
+      }
+    }), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
       isDragging: isDragging,
       isOver: isOver
     }))));

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","touchAction","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","_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  touchAction: 'none'\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":[]}
+{"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","touchAction","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","_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 ${\n    outcome === 'correct' ? color.correct() : outcome === 'incorrect' ? color.incorrect() : 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  touchAction: 'none',\n}));\n\nconst AnswerContent = (props) => {\n  const { isDragging, isOver, title, disabled, empty, outcome, guideIndex, type } = props;\n\n  if (empty) {\n    return <Holder index={guideIndex} isOver={isOver} disabled={disabled} type={type} />;\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:\n    correct === true\n      ? `1px solid var(--feedback-correct-bg-color, ${color.correct()})`\n      : correct === false\n        ? `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 { id, title, isDragging = false, className, disabled, isOver = false, type, correct } = 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 ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined;\n\n  // If this item is a drop-zone (prompt slot), we render an outer droppable wrapper.\n  // The outer wrapper's rect is what dnd-kit measures for this slot's own droppable\n  // (\"drop-{promptId}\"), so it must stay untransformed — applying the drag transform\n  // there would make the slot's own droppable rect chase the dragged item during the\n  // drag, corrupting collision/keyboard-navigation results. The transform belongs on\n  // the inner draggable node instead.\n  if (dropId) {\n    return (\n      <div\n        ref={setDropRef}\n        style={{\n          flex: 1,\n          opacity: isDragging ? 0.5 : 1,\n          backgroundColor: isDragging || isOver ? 'rgba(0,0,0,0.05)' : 'transparent',\n        }}\n      >\n        <div ref={setDragRef} {...listeners} {...attributes} style={{ transform: transformStyle, transition }}>\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/keyboard-coordinates.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.closestDroppableKeyboardCoordinates = void 0;
+var _core = require("@dnd-kit/core");
+const ARROW_STEP = 25;
+
+/**
+ * Custom keyboard coordinate getter for non-sortable drag-and-drop.
+ *
+ * Tab/Shift+Tab cycle the dragged item directly onto the next/previous droppable
+ * (response area or the choices pool), in DOM order, placing the dragged item's own
+ * top-left corner at the target's center-left point. Arrow keys are left doing plain
+ * free-form movement (nudging the dragged item by a fixed step, same as dnd-kit's own
+ * default keyboard behavior) rather than jumping between droppables — collision
+ * detection (rectIntersection) still picks up whatever the item ends up actually
+ * overlapping.
+ */
+const closestDroppableKeyboardCoordinates = (event, {
+  active,
+  context,
+  currentCoordinates
+}) => {
+  const {
+    code
+  } = event;
+  const isTab = code === 'Tab';
+  const isArrow = code === _core.KeyboardCode.Down || code === _core.KeyboardCode.Up || code === _core.KeyboardCode.Left || code === _core.KeyboardCode.Right;
+  if (!isTab && !isArrow) {
+    return undefined;
+  }
+  event.preventDefault();
+  if (isArrow) {
+    switch (code) {
+      case _core.KeyboardCode.Down:
+        return {
+          ...currentCoordinates,
+          y: currentCoordinates.y + ARROW_STEP
+        };
+      case _core.KeyboardCode.Up:
+        return {
+          ...currentCoordinates,
+          y: currentCoordinates.y - ARROW_STEP
+        };
+      case _core.KeyboardCode.Right:
+        return {
+          ...currentCoordinates,
+          x: currentCoordinates.x + ARROW_STEP
+        };
+      case _core.KeyboardCode.Left:
+        return {
+          ...currentCoordinates,
+          x: currentCoordinates.x - ARROW_STEP
+        };
+      default:
+        return currentCoordinates;
+    }
+  }
+  const {
+    droppableRects,
+    droppableContainers,
+    collisionRect
+  } = context;
+  if (!droppableRects || droppableRects.size === 0) {
+    return currentCoordinates;
+  }
+
+  // `currentCoordinates` is the top-left of the dragged item's collision rect (not its
+  // center), so derive the dragged item's center in the same frame before comparing it
+  // against droppable centers below. Returning a droppable's *center* as the next
+  // coordinates (as opposed to its top-left) would shift the dragged item's top-left to
+  // that center, overshooting the target by roughly half its size and causing
+  // dnd-kit to resolve collisions against a neighboring droppable instead.
+  const draggedHalfSize = {
+    x: (collisionRect?.width || 0) / 2,
+    y: (collisionRect?.height || 0) / 2
+  };
+  const currentCenter = {
+    x: currentCoordinates.x + draggedHalfSize.x,
+    y: currentCoordinates.y + draggedHalfSize.y
+  };
+
+  // A placed answer ("target") is itself a droppable for its own prompt slot
+  // ("drop-{promptId}"). That self drop-zone must never be treated as a navigable
+  // target: it sits under the dragged item, so a tiny (even sub-pixel) discrepancy
+  // between its measured rect and the dragged item's own rect is enough to make it
+  // register as the "closest" candidate, which reads as the drag being stuck.
+  // Exclude it outright rather than relying on a distance threshold.
+  const activeData = active?.data?.current;
+  const ownDropId = activeData?.promptId != null ? `drop-${activeData.promptId}` : undefined;
+
+  // Collect top-left and center of all enabled droppable containers
+  const targets = [];
+  for (const [id, container] of droppableContainers) {
+    if (container?.disabled) continue;
+    if (id === ownDropId) continue;
+    const rect = droppableRects.get(id);
+    if (!rect) continue;
+    const center = {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2
+    };
+    // Land the dragged item's own top-left corner at the target's center-left point,
+    // rather than at the target's own top-left corner.
+    const dropPosition = {
+      x: rect.left,
+      y: rect.top + rect.height / 2
+    };
+    targets.push({
+      id,
+      dropPosition,
+      center
+    });
+  }
+  if (targets.length === 0) {
+    return currentCoordinates;
+  }
+
+  // Tab/Shift+Tab: cycle through targets in DOM order (sorted top-to-bottom, left-to-right)
+  const reverse = event.shiftKey;
+
+  // Sort targets by position (top to bottom, then left to right)
+  targets.sort((a, b) => {
+    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;
+    return a.center.x - b.center.x;
+  });
+
+  // Find the current target (closest to current coordinates)
+  let currentIndex = 0;
+  let minDist = Infinity;
+  for (let i = 0; i < targets.length; i++) {
+    const dist = distance(currentCenter, targets[i].center);
+    if (dist < minDist) {
+      minDist = dist;
+      currentIndex = i;
+    }
+  }
+
+  // Move to next/previous
+  const nextIndex = reverse ? (currentIndex - 1 + targets.length) % targets.length : (currentIndex + 1) % targets.length;
+  return targets[nextIndex].dropPosition;
+};
+exports.closestDroppableKeyboardCoordinates = closestDroppableKeyboardCoordinates;
+const distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
+//# sourceMappingURL=keyboard-coordinates.js.map

package/lib/keyboard-coordinates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-coordinates.js","names":["_core","require","ARROW_STEP","closestDroppableKeyboardCoordinates","event","active","context","currentCoordinates","code","isTab","isArrow","KeyboardCode","Down","Up","Left","Right","undefined","preventDefault","y","x","droppableRects","droppableContainers","collisionRect","size","draggedHalfSize","width","height","currentCenter","activeData","data","current","ownDropId","promptId","targets","id","container","disabled","rect","get","center","left","top","dropPosition","push","length","reverse","shiftKey","sort","a","b","Math","abs","currentIndex","minDist","Infinity","i","dist","distance","nextIndex","exports","sqrt"],"sources":["../src/keyboard-coordinates.js"],"sourcesContent":["import { KeyboardCode } from '@dnd-kit/core';\n\nconst ARROW_STEP = 25;\n\n/**\n * Custom keyboard coordinate getter for non-sortable drag-and-drop.\n *\n * Tab/Shift+Tab cycle the dragged item directly onto the next/previous droppable\n * (response area or the choices pool), in DOM order, placing the dragged item's own\n * top-left corner at the target's center-left point. Arrow keys are left doing plain\n * free-form movement (nudging the dragged item by a fixed step, same as dnd-kit's own\n * default keyboard behavior) rather than jumping between droppables — collision\n * detection (rectIntersection) still picks up whatever the item ends up actually\n * overlapping.\n */\nexport const closestDroppableKeyboardCoordinates = (event, { active, context, currentCoordinates }) => {\n  const { code } = event;\n  const isTab = code === 'Tab';\n  const isArrow =\n    code === KeyboardCode.Down || code === KeyboardCode.Up || code === KeyboardCode.Left || code === KeyboardCode.Right;\n\n  if (!isTab && !isArrow) {\n    return undefined;\n  }\n\n  event.preventDefault();\n\n  if (isArrow) {\n    switch (code) {\n      case KeyboardCode.Down:\n        return { ...currentCoordinates, y: currentCoordinates.y + ARROW_STEP };\n\n      case KeyboardCode.Up:\n        return { ...currentCoordinates, y: currentCoordinates.y - ARROW_STEP };\n\n      case KeyboardCode.Right:\n        return { ...currentCoordinates, x: currentCoordinates.x + ARROW_STEP };\n\n      case KeyboardCode.Left:\n        return { ...currentCoordinates, x: currentCoordinates.x - ARROW_STEP };\n\n      default:\n        return currentCoordinates;\n    }\n  }\n\n  const { droppableRects, droppableContainers, collisionRect } = context;\n\n  if (!droppableRects || droppableRects.size === 0) {\n    return currentCoordinates;\n  }\n\n  // `currentCoordinates` is the top-left of the dragged item's collision rect (not its\n  // center), so derive the dragged item's center in the same frame before comparing it\n  // against droppable centers below. Returning a droppable's *center* as the next\n  // coordinates (as opposed to its top-left) would shift the dragged item's top-left to\n  // that center, overshooting the target by roughly half its size and causing\n  // dnd-kit to resolve collisions against a neighboring droppable instead.\n  const draggedHalfSize = {\n    x: (collisionRect?.width || 0) / 2,\n    y: (collisionRect?.height || 0) / 2,\n  };\n  const currentCenter = {\n    x: currentCoordinates.x + draggedHalfSize.x,\n    y: currentCoordinates.y + draggedHalfSize.y,\n  };\n\n  // A placed answer (\"target\") is itself a droppable for its own prompt slot\n  // (\"drop-{promptId}\"). That self drop-zone must never be treated as a navigable\n  // target: it sits under the dragged item, so a tiny (even sub-pixel) discrepancy\n  // between its measured rect and the dragged item's own rect is enough to make it\n  // register as the \"closest\" candidate, which reads as the drag being stuck.\n  // Exclude it outright rather than relying on a distance threshold.\n  const activeData = active?.data?.current;\n  const ownDropId = activeData?.promptId != null ? `drop-${activeData.promptId}` : undefined;\n\n  // Collect top-left and center of all enabled droppable containers\n  const targets = [];\n\n  for (const [id, container] of droppableContainers) {\n    if (container?.disabled) continue;\n\n    if (id === ownDropId) continue;\n\n    const rect = droppableRects.get(id);\n\n    if (!rect) continue;\n\n    const center = {\n      x: rect.left + rect.width / 2,\n      y: rect.top + rect.height / 2,\n    };\n    // Land the dragged item's own top-left corner at the target's center-left point,\n    // rather than at the target's own top-left corner.\n    const dropPosition = {\n      x: rect.left,\n      y: rect.top + rect.height / 2,\n    };\n\n    targets.push({ id, dropPosition, center });\n  }\n\n  if (targets.length === 0) {\n    return currentCoordinates;\n  }\n\n  // Tab/Shift+Tab: cycle through targets in DOM order (sorted top-to-bottom, left-to-right)\n  const reverse = event.shiftKey;\n\n  // Sort targets by position (top to bottom, then left to right)\n  targets.sort((a, b) => {\n    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;\n    return a.center.x - b.center.x;\n  });\n\n  // Find the current target (closest to current coordinates)\n  let currentIndex = 0;\n  let minDist = Infinity;\n\n  for (let i = 0; i < targets.length; i++) {\n    const dist = distance(currentCenter, targets[i].center);\n\n    if (dist < minDist) {\n      minDist = dist;\n      currentIndex = i;\n    }\n  }\n\n  // Move to next/previous\n  const nextIndex = reverse\n    ? (currentIndex - 1 + targets.length) % targets.length\n    : (currentIndex + 1) % targets.length;\n\n  return targets[nextIndex].dropPosition;\n};\n\nconst distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);\n"],"mappings":"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","ignoreList":[]}

package/lib/main.js

@@ -11,6 +11,7 @@ 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 _keyboardCoordinates = require("./keyboard-coordinates");
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
 var _renderUi = require("@pie-lib/render-ui");
 var _styles = require("@mui/material/styles");
@@ -18,6 +19,20 @@ var _lodashEs = require("lodash-es");
 var _answerArea = _interopRequireDefault(require("./answer-area"));
 var _choicesList = _interopRequireDefault(require("./choices-list"));
 var _answer = require("./answer");
+const sensors = [{
+  sensor: _core.PointerSensor,
+  options: {}
+}, {
+  sensor: _core.KeyboardSensor,
+  options: {
+    coordinateGetter: _keyboardCoordinates.closestDroppableKeyboardCoordinates,
+    keyboardCodes: {
+      start: [_core.KeyboardCode.Space, _core.KeyboardCode.Enter],
+      cancel: [_core.KeyboardCode.Esc],
+      end: [_core.KeyboardCode.Space, _core.KeyboardCode.Enter]
+    }
+  }
+}];
 const MainContainer = (0, _styles.styled)('div')({
   display: 'flex',
   flexDirection: 'column',
@@ -25,6 +40,19 @@ const MainContainer = (0, _styles.styled)('div')({
   color: _renderUi.color.text(),
   backgroundColor: _renderUi.color.background()
 });
+const InteractiveRegion = (0, _styles.styled)('div')({
+  width: '100%',
+  overflowX: 'auto',
+  overflowY: 'hidden'
+});
+
+// A block child of a scroll port is sized to the scroll port, so it has to opt out explicitly for
+// the content to be able to overflow. min-content keeps the rows and the pool the same width.
+const InteractiveRegionContent = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  minWidth: 'min-content'
+});
 class Main extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -178,10 +206,79 @@ class Main extends _react.default.Component {
       prompt,
       language
     } = config;
+
+    // Helpers for accessible announcements
+    const getChoiceLabel = dragId => {
+      // dragId is like "choice-123" or "target-123"
+      const answerId = String(dragId).replace(/^(choice|target)-/, '');
+      const answer = config.answers.find(a => String(a.id) === answerId);
+      if (answer?.title) {
+        // Strip HTML tags for screen reader
+        const text = answer.title.replace(/<[^>]*>/g, '').trim();
+        return text || `Answer ${answerId}`;
+      }
+      return `Answer ${answerId}`;
+    };
+    const getDropTargetLabel = dropId => {
+      // dropId is like "drop-456" or "choices-pool"
+      if (dropId === 'choices-pool') {
+        return {
+          label: 'Choices list',
+          choiceId: null
+        };
+      }
+      const promptId = String(dropId).replace(/^drop-/, '');
+      const promptItem = config.prompts.find(p => String(p.id) === promptId);
+      const label = promptItem?.title ? `Response area for ${promptItem.title.replace(/<[^>]*>/g, '').trim()}` : `Response area ${promptId}`;
+      const choiceId = session.value?.[promptId];
+      return {
+        label,
+        choiceId: choiceId || null
+      };
+    };
+    const announcements = {
+      onDragStart({
+        active
+      }) {
+        return `Picked up ${getChoiceLabel(active.id)}. Use Tab to move between response areas, then press Space or Enter to drop.`;
+      },
+      onDragOver({
+        active,
+        over
+      }) {
+        if (!over) {
+          return `${getChoiceLabel(active.id)} is not over a response area.`;
+        }
+        const target = getDropTargetLabel(over.id);
+        const content = target.choiceId ? `Currently contains ${getChoiceLabel(target.choiceId)}.` : 'Currently empty.';
+        return `Over ${target.label}. ${content}`;
+      },
+      onDragEnd({
+        active,
+        over
+      }) {
+        if (!over) {
+          return `${getChoiceLabel(active.id)} was returned to its original position.`;
+        }
+        return `Dropped ${getChoiceLabel(active.id)} in ${getDropTargetLabel(over.id).label}.`;
+      },
+      onDragCancel({
+        active
+      }) {
+        return `Cancelled. ${getChoiceLabel(active.id)} was returned to its original position.`;
+      }
+    };
     return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+      sensors: sensors,
+      collisionDetection: _core.rectIntersection,
       onDragStart: this.onDragStart,
       onDragEnd: this.onPlaceAnswer,
-      modifiers: [_modifiers.restrictToFirstScrollableAncestor]
+      modifiers: [_modifiers.restrictToFirstScrollableAncestor],
+      accessibility: {
+        screenReaderInstructions: {
+          draggable: 'Press Space or Enter to pick up this answer choice. Once picked up, use Tab or Shift+Tab to cycle through response areas, or use arrow keys to move it freely. Press Space or Enter to drop, or Escape to cancel.'
+        }
+      }
     }, /*#__PURE__*/_react.default.createElement(MainContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
       className: "prompt",
       prompt: prompt
@@ -190,7 +287,7 @@ class Main extends _react.default.Component {
       toggled: showCorrectAnswer,
       onToggle: this.toggleShowCorrect,
       language: language
-    }), /*#__PURE__*/_react.default.createElement(_answerArea.default, {
+    }), /*#__PURE__*/_react.default.createElement(InteractiveRegion, null, /*#__PURE__*/_react.default.createElement(InteractiveRegionContent, null, /*#__PURE__*/_react.default.createElement(_answerArea.default, {
       instanceId: this.instanceId,
       model: model,
       session: session,
@@ -203,7 +300,7 @@ class Main extends _react.default.Component {
       session: session,
       disabled: mode !== 'gather',
       onRemoveAnswer: id => this.onRemoveAnswer(id)
-    }), model.correctness && model.feedback && !showCorrectAnswer && /*#__PURE__*/_react.default.createElement(_renderUi.Feedback, {
+    }))), 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()));

package/lib/main.js.map

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_drag","_core","_modifiers","_keyboardCoordinates","_correctAnswerToggle","_renderUi","_styles","_lodashEs","_answerArea","_choicesList","_answer","sensors","sensor","PointerSensor","options","KeyboardSensor","coordinateGetter","closestDroppableKeyboardCoordinates","keyboardCodes","start","KeyboardCode","Space","Enter","cancel","Esc","end","MainContainer","styled","display","flexDirection","justifyContent","color","text","backgroundColor","background","InteractiveRegion","width","overflowX","overflowY","InteractiveRegionContent","minWidth","Main","React","Component","constructor","props","_defineProperty2","default","event","active","data","current","rect","node","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","getChoiceLabel","dragId","String","replace","answer","answers","find","a","trim","getDropTargetLabel","dropId","label","choiceId","promptItem","prompts","p","announcements","onDragStart","onDragOver","target","content","onDragEnd","onDragCancel","DndContext","collisionDetection","rectIntersection","onPlaceAnswer","modifiers","restrictToFirstScrollableAncestor","accessibility","screenReaderInstructions","draggable","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, PointerSensor, KeyboardSensor, KeyboardCode, rectIntersection } from '@dnd-kit/core';\nimport { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';\nimport { closestDroppableKeyboardCoordinates } from './keyboard-coordinates';\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 sensors = [\n  { sensor: PointerSensor, options: {} },\n  {\n    sensor: KeyboardSensor,\n    options: {\n      coordinateGetter: closestDroppableKeyboardCoordinates,\n      keyboardCodes: {\n        start: [KeyboardCode.Space, KeyboardCode.Enter],\n        cancel: [KeyboardCode.Esc],\n        end: [KeyboardCode.Space, KeyboardCode.Enter],\n      },\n    },\n  },\n];\n\nconst MainContainer = styled('div')({\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  color: color.text(),\n  backgroundColor: color.background(),\n});\n\nconst InteractiveRegion = styled('div')({\n  width: '100%',\n  overflowX: 'auto',\n  overflowY: 'hidden',\n});\n\n// A block child of a scroll port is sized to the scroll port, so it has to opt out explicitly for\n// the content to be able to overflow. min-content keeps the rows and the pool the same width.\nconst InteractiveRegionContent = styled('div')({\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 'min-content',\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    // Helpers for accessible announcements\n    const getChoiceLabel = (dragId) => {\n      // dragId is like \"choice-123\" or \"target-123\"\n      const answerId = String(dragId).replace(/^(choice|target)-/, '');\n      const answer = config.answers.find((a) => String(a.id) === answerId);\n\n      if (answer?.title) {\n        // Strip HTML tags for screen reader\n        const text = answer.title.replace(/<[^>]*>/g, '').trim();\n        return text || `Answer ${answerId}`;\n      }\n\n      return `Answer ${answerId}`;\n    };\n\n    const getDropTargetLabel = (dropId) => {\n      // dropId is like \"drop-456\" or \"choices-pool\"\n      if (dropId === 'choices-pool') {\n        return { label: 'Choices list', choiceId: null };\n      }\n\n      const promptId = String(dropId).replace(/^drop-/, '');\n      const promptItem = config.prompts.find((p) => String(p.id) === promptId);\n      const label = promptItem?.title\n        ? `Response area for ${promptItem.title.replace(/<[^>]*>/g, '').trim()}`\n        : `Response area ${promptId}`;\n      const choiceId = session.value?.[promptId];\n\n      return { label, choiceId: choiceId || null };\n    };\n\n    const announcements = {\n      onDragStart({ active }) {\n        return `Picked up ${getChoiceLabel(active.id)}. Use Tab to move between response areas, then press Space or Enter to drop.`;\n      },\n\n      onDragOver({ active, over }) {\n        if (!over) {\n          return `${getChoiceLabel(active.id)} is not over a response area.`;\n        }\n\n        const target = getDropTargetLabel(over.id);\n        const content = target.choiceId ? `Currently contains ${getChoiceLabel(target.choiceId)}.` : 'Currently empty.';\n\n        return `Over ${target.label}. ${content}`;\n      },\n\n      onDragEnd({ active, over }) {\n        if (!over) {\n          return `${getChoiceLabel(active.id)} was returned to its original position.`;\n        }\n\n        return `Dropped ${getChoiceLabel(active.id)} in ${getDropTargetLabel(over.id).label}.`;\n      },\n\n      onDragCancel({ active }) {\n        return `Cancelled. ${getChoiceLabel(active.id)} was returned to its original position.`;\n      },\n    };\n\n    return (\n      <DndContext\n        sensors={sensors}\n        collisionDetection={rectIntersection}\n        onDragStart={this.onDragStart}\n        onDragEnd={this.onPlaceAnswer}\n        modifiers={[restrictToFirstScrollableAncestor]}\n        accessibility={{\n          screenReaderInstructions: {\n            draggable:\n              'Press Space or Enter to pick up this answer choice. Once picked up, use Tab or Shift+Tab to cycle through response areas, or use arrow keys to move it freely. Press Space or Enter to drop, or Escape to cancel.',\n          },\n        }}\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          <InteractiveRegion>\n            <InteractiveRegionContent>\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            </InteractiveRegionContent>\n          </InteractiveRegion>\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

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "7.1.6",
+  "version": "7.1.8",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -19,7 +19,7 @@
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
     "@pie-lib/correct-answer-toggle": "4.0.5",
-    "@pie-lib/drag": "4.0.6",
+    "@pie-lib/drag": "4.1.0",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/render-ui": "6.1.3",
     "debug": "^4.1.1",
@@ -30,7 +30,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "c022c438107df16842a810eefc9a0fe52664be49",
+  "gitHead": "d43fe1fb43626141b09cdda5292cf5d1f044440c",
   "main": "lib/index.js",
   "module": "src/index.js"
 }