@pie-element/match-list 7.1.7 → 7.1.9

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.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.1.8...@pie-element/match-list@7.1.9) (2026-08-19)
+
+**Note:** Version bump only for package @pie-element/match-list
+
+## [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

package/controller/CHANGELOG.md

@@ -3,6 +3,10 @@
 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

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/match-list-controller",
   "private": true,
-  "version": "6.1.3",
+  "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',
@@ -119,7 +124,10 @@ class AnswerArea extends _react.default.Component {
     const {
       disabled,
       instanceId,
-      onRemoveAnswer
+      onRemoveAnswer,
+      selectedAnswer,
+      onChoiceClick,
+      onPlacementClick
     } = this.props;
     const rows = this.buildRows();
     const correctnessMap = this.getCorrectOrIncorrectMap();
@@ -148,7 +156,10 @@ class AnswerArea extends _react.default.Component {
         id: sessionAnswer.id,
         title: sessionAnswer.title,
         type: 'target',
-        onRemoveChoice: () => onRemoveAnswer(id)
+        onRemoveChoice: () => onRemoveAnswer(id),
+        selectedAnswer: selectedAnswer,
+        onSelectClick: onChoiceClick,
+        onPlacementClick: onPlacementClick
       }));
     }));
   }
@@ -162,7 +173,10 @@ exports.AnswerArea = AnswerArea;
   onRemoveAnswer: _propTypes.default.func,
   instanceId: _propTypes.default.string.isRequired,
   model: _propTypes.default.object.isRequired,
-  prompt: _propTypes.default.string
+  prompt: _propTypes.default.string,
+  selectedAnswer: _propTypes.default.object,
+  onChoiceClick: _propTypes.default.func,
+  onPlacementClick: _propTypes.default.func
 });
 var _default = exports.default = AnswerArea;
 //# sourceMappingURL=answer-area.js.map

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","selectedAnswer","onChoiceClick","onPlacementClick","rows","buildRows","correctnessMap","getCorrectOrIncorrectMap","createElement","title","index","dangerouslySetInnerHTML","__html","direction","className","correct","draggable","isEmpty","type","onRemoveChoice","onSelectClick","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    selectedAnswer: PropTypes.object,\n    onChoiceClick: PropTypes.func,\n    onPlacementClick: PropTypes.func,\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, selectedAnswer, onChoiceClick, onPlacementClick } = 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                selectedAnswer={selectedAnswer}\n                onSelectClick={onChoiceClick}\n                onPlacementClick={onPlacementClick}\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

@@ -9,12 +9,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@dnd-kit/core");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _debug = _interopRequireDefault(require("debug"));
 var _styles = require("@mui/material/styles");
 var _drag = require("@pie-lib/drag");
 var _lodashEs = require("lodash-es");
 var _renderUi = require("@pie-lib/render-ui");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const log = (0, _debug.default)('pie-elements:match-title:answer');
 const HolderNumber = (0, _styles.styled)('div')(({
   theme
@@ -50,6 +51,7 @@ Holder.propTypes = {
 const AnswerContentContainer = (0, _styles.styled)('div')(({
   theme,
   isDragging,
+  isSelected,
   isOver,
   disabled,
   outcome
@@ -64,12 +66,13 @@ const AnswerContentContainer = (0, _styles.styled)('div')(({
   overflow: 'hidden',
   transition: 'opacity 200ms linear',
   wordBreak: 'break-word',
-  opacity: isDragging && !disabled ? 0.5 : isOver && !disabled ? 0.2 : 1,
+  opacity: (isDragging || isSelected) && !disabled ? 0.5 : isOver && !disabled ? 0.2 : 1,
   touchAction: 'none'
 }));
 const AnswerContent = props => {
   const {
     isDragging,
+    isSelected,
     isOver,
     title,
     disabled,
@@ -88,6 +91,7 @@ const AnswerContent = props => {
   } else {
     return /*#__PURE__*/_react.default.createElement(AnswerContentContainer, {
       isDragging: isDragging,
+      isSelected: isSelected,
       isOver: isOver,
       disabled: disabled,
       outcome: outcome,
@@ -139,6 +143,7 @@ class Answer extends _react.default.Component {
       id,
       title,
       isDragging = false,
+      isSelected = false,
       className,
       disabled,
       isOver = false,
@@ -156,6 +161,7 @@ class Answer extends _react.default.Component {
       isOver: isOver,
       empty: (0, _lodashEs.isEmpty)(title),
       isDragging: isDragging,
+      isSelected: isSelected,
       disabled: disabled,
       type: type
     }));
@@ -165,6 +171,7 @@ exports.Answer = Answer;
 (0, _defineProperty2.default)(Answer, "propTypes", {
   className: _propTypes.default.string,
   isDragging: _propTypes.default.bool,
+  isSelected: _propTypes.default.bool,
   id: _propTypes.default.any,
   title: _propTypes.default.string,
   isOver: _propTypes.default.bool,
@@ -180,11 +187,29 @@ function DragAndDropAnswer(props) {
     promptId,
     draggable = true,
     disabled = false,
-    type
+    type,
+    selectedAnswer,
+    onSelectClick,
+    onPlacementClick
   } = props;
   const dragId = `${type || 'answer'}-${id}`;
   // droppable only if promptId exists
   const dropId = promptId !== undefined && promptId !== null ? `drop-${promptId}` : undefined;
+
+  // Built once and reused for both dnd-kit's own data and the click handlers below, so
+  // a click carries exactly the same shape dnd-kit's onDragStart/onDragEnd would.
+  const activeData = {
+    type: type || 'answer',
+    id,
+    instanceId,
+    value: props.title,
+    promptId
+  };
+  const dropZoneData = dropId ? {
+    type: 'drop-zone',
+    promptId,
+    instanceId
+  } : undefined;
   const {
     attributes,
     listeners,
@@ -194,63 +219,127 @@ function DragAndDropAnswer(props) {
     isDragging
   } = (0, _core.useDraggable)({
     id: dragId,
-    data: {
-      type: type || 'answer',
-      id,
-      instanceId,
-      value: props.title,
-      promptId
-    },
+    data: activeData,
     disabled: !draggable || disabled
   });
   const droppable = (0, _core.useDroppable)({
     id: dropId,
-    data: dropId ? {
-      type: 'drop-zone',
-      promptId,
-      instanceId
-    } : undefined,
+    data: dropZoneData,
     disabled: disabled || !dropId
   });
   const setDropRef = droppable.setNodeRef;
   const isOver = droppable.isOver;
 
+  // dnd-kit's own isOver only reflects real collision detection during an active drag,
+  // so it stays false while an answer is merely click-selected (no drag in progress).
+  // Track hovering locally and fold it into the same isOver signal used everywhere
+  // below, so hovering a response area while something is selected gets the exact same
+  // treatment as hovering it during a real drag — one code path, no duplicated CSS.
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const hasSelection = !!selectedAnswer;
+  const showsHoverEffect = isOver || hasSelection && isHovered && !disabled;
+  const isSelected = !!selectedAnswer && selectedAnswer.type === activeData.type && selectedAnswer.id === activeData.id && selectedAnswer.promptId === activeData.promptId;
+
   // compute style: apply transform to the element that actually moves
   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) {
+    const handleResponseAreaClick = () => {
+      if (disabled) return;
+      if (isSelected) {
+        // Clicking the already-selected placed answer again deselects it, same as
+        // for a choice in the pool.
+        onSelectClick?.(activeData);
+      } else if (selectedAnswer) {
+        // Something else is selected — place it here, same whether this area is
+        // currently empty or already occupied.
+        onPlacementClick?.(dropZoneData);
+      } else if (draggable) {
+        // Nothing selected yet, and this response area holds an answer — clicking it
+        // selects that answer for moving elsewhere, the same way Tab+Space/Enter does.
+        onSelectClick?.(activeData);
+      }
+
+      // Empty response area clicked with nothing selected: nothing to place or select.
+    };
+
+    // An empty response area isn't draggable, so dnd-kit's own attributes (only
+    // applied to the inner node, and only when draggable) never make it tabbable —
+    // this outer wrapper needs its own focus/activation handling so "select a choice,
+    // then Tab to a response area and press Space/Enter" works even when the area is
+    // empty. This is independent of, and doesn't change, the existing in-drag
+    // Tab-cycling (that's driven by an active dnd-kit drag, not native focus).
+    //
+    // Only made a native Tab stop when NOT draggable (i.e. empty): when the target is
+    // filled, the inner node is already independently tabbable via dnd-kit's own
+    // attributes for the existing pick-up-to-move gesture, and adding a second,
+    // outer Tab stop for the same visual tile would add an extra stop to the existing
+    // Tab order. Placing into an occupied area is still fully reachable by mouse click
+    // here, or by the existing keyboard drag flow (Tab+Space/Enter on the choice,
+    // Tab-cycle to the occupied target, Space/Enter to swap).
+    const isNativeTabStop = !draggable && !disabled;
+    const handleResponseAreaKeyDown = e => {
+      if (e.code === 'Space' || e.code === 'Enter') {
+        e.preventDefault();
+        handleResponseAreaClick();
+      }
+    };
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: setDropRef,
+      role: "button",
+      tabIndex: isNativeTabStop ? 0 : -1,
+      onClick: handleResponseAreaClick,
+      onKeyDown: isNativeTabStop ? handleResponseAreaKeyDown : undefined,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
       style: {
         flex: 1,
-        transform: transformStyle,
-        transition,
-        opacity: isDragging ? 0.5 : 1,
-        backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent'
+        opacity: isDragging || isSelected ? 0.5 : 1,
+        backgroundColor: isDragging || isSelected || showsHoverEffect ? 'rgba(0,0,0,0.05)' : 'transparent',
+        cursor: hasSelection && !disabled ? 'pointer' : undefined
       }
     }, /*#__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
+      isSelected: isSelected,
+      isOver: showsHoverEffect
     }))));
   }
+  const handleChoiceClick = e => {
+    if (disabled) {
+      return;
+    }
+    e.stopPropagation();
+    onSelectClick?.(activeData);
+  };
 
   // if there is NO dropId (this is a choice / draggable-only), render only draggable node and apply transform to it.
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     ref: setDragRef
   }, listeners, attributes, {
+    onClick: handleChoiceClick,
     style: {
       transform: transformStyle,
       transition,
       cursor: disabled ? 'not-allowed' : 'grab',
-      opacity: isDragging ? 0.5 : 1,
+      opacity: isDragging || isSelected ? 0.5 : 1,
       touchAction: draggable && !disabled ? 'none' : 'auto'
     }
   }), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
     isDragging: isDragging,
+    isSelected: isSelected,
     isOver: false
   })));
 }
@@ -261,7 +350,10 @@ DragAndDropAnswer.propTypes = {
   title: _propTypes.default.string,
   draggable: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-  type: _propTypes.default.string
+  type: _propTypes.default.string,
+  selectedAnswer: _propTypes.default.object,
+  onSelectClick: _propTypes.default.func,
+  onPlacementClick: _propTypes.default.func
 };
 var _default = exports.default = DragAndDropAnswer;
 //# sourceMappingURL=answer.js.map

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","_interopRequireWildcard","_debug","_styles","_drag","_lodashEs","_renderUi","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","log","debug","HolderNumber","styled","theme","width","fontSize","textAlign","color","palette","common","black","Holder","index","isOver","disabled","type","createElement","PlaceHolder","extraStyles","display","padding","alignItems","justifyContent","height","undefined","propTypes","PropTypes","number","bool","string","AnswerContentContainer","isDragging","isSelected","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","componentDidMount","ref","addEventListener","handleTouchStart","passive","componentWillUnmount","removeEventListener","render","id","className","isEmpty","exports","any","DragAndDropAnswer","instanceId","promptId","draggable","selectedAnswer","onSelectClick","onPlacementClick","dragId","dropId","activeData","value","dropZoneData","attributes","listeners","setNodeRef","setDragRef","transform","useDraggable","data","droppable","useDroppable","setDropRef","isHovered","setIsHovered","useState","hasSelection","showsHoverEffect","transformStyle","x","y","handleResponseAreaClick","isNativeTabStop","handleResponseAreaKeyDown","code","preventDefault","role","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","style","flex","_extends2","handleChoiceClick","stopPropagation","object","func","_default"],"sources":["../src/answer.jsx"],"sourcesContent":["import { useDraggable, useDroppable } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport React, { useState } 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, isSelected, 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 || isSelected) && !disabled ? 0.5 : isOver && !disabled ? 0.2 : 1,\n  touchAction: 'none',\n}));\n\nconst AnswerContent = (props) => {\n  const { isDragging, isSelected, 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        isSelected={isSelected}\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    isSelected: 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      isSelected = 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          isSelected={isSelected}\n          disabled={disabled}\n          type={type}\n        />\n      </AnswerContainer>\n    );\n  }\n}\n\nfunction DragAndDropAnswer(props) {\n  const {\n    id,\n    instanceId,\n    promptId,\n    draggable = true,\n    disabled = false,\n    type,\n    selectedAnswer,\n    onSelectClick,\n    onPlacementClick,\n  } = 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  // Built once and reused for both dnd-kit's own data and the click handlers below, so\n  // a click carries exactly the same shape dnd-kit's onDragStart/onDragEnd would.\n  const activeData = {\n    type: type || 'answer',\n    id,\n    instanceId,\n    value: props.title,\n    promptId,\n  };\n  const dropZoneData = dropId\n    ? {\n        type: 'drop-zone',\n        promptId,\n        instanceId,\n      }\n    : undefined;\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef: setDragRef,\n    transform,\n    transition,\n    isDragging,\n  } = useDraggable({\n    id: dragId,\n    data: activeData,\n    disabled: !draggable || disabled,\n  });\n\n  const droppable = useDroppable({\n    id: dropId,\n    data: dropZoneData,\n    disabled: disabled || !dropId,\n  });\n\n  const setDropRef = droppable.setNodeRef;\n  const isOver = droppable.isOver;\n\n  // dnd-kit's own isOver only reflects real collision detection during an active drag,\n  // so it stays false while an answer is merely click-selected (no drag in progress).\n  // Track hovering locally and fold it into the same isOver signal used everywhere\n  // below, so hovering a response area while something is selected gets the exact same\n  // treatment as hovering it during a real drag — one code path, no duplicated CSS.\n  const [isHovered, setIsHovered] = useState(false);\n  const hasSelection = !!selectedAnswer;\n  const showsHoverEffect = isOver || (hasSelection && isHovered && !disabled);\n\n  const isSelected =\n    !!selectedAnswer &&\n    selectedAnswer.type === activeData.type &&\n    selectedAnswer.id === activeData.id &&\n    selectedAnswer.promptId === activeData.promptId;\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    const handleResponseAreaClick = () => {\n      if (disabled) return;\n\n      if (isSelected) {\n        // Clicking the already-selected placed answer again deselects it, same as\n        // for a choice in the pool.\n        onSelectClick?.(activeData);\n      } else if (selectedAnswer) {\n        // Something else is selected — place it here, same whether this area is\n        // currently empty or already occupied.\n        onPlacementClick?.(dropZoneData);\n      } else if (draggable) {\n        // Nothing selected yet, and this response area holds an answer — clicking it\n        // selects that answer for moving elsewhere, the same way Tab+Space/Enter does.\n        onSelectClick?.(activeData);\n      }\n\n      // Empty response area clicked with nothing selected: nothing to place or select.\n    };\n\n    // An empty response area isn't draggable, so dnd-kit's own attributes (only\n    // applied to the inner node, and only when draggable) never make it tabbable —\n    // this outer wrapper needs its own focus/activation handling so \"select a choice,\n    // then Tab to a response area and press Space/Enter\" works even when the area is\n    // empty. This is independent of, and doesn't change, the existing in-drag\n    // Tab-cycling (that's driven by an active dnd-kit drag, not native focus).\n    //\n    // Only made a native Tab stop when NOT draggable (i.e. empty): when the target is\n    // filled, the inner node is already independently tabbable via dnd-kit's own\n    // attributes for the existing pick-up-to-move gesture, and adding a second,\n    // outer Tab stop for the same visual tile would add an extra stop to the existing\n    // Tab order. Placing into an occupied area is still fully reachable by mouse click\n    // here, or by the existing keyboard drag flow (Tab+Space/Enter on the choice,\n    // Tab-cycle to the occupied target, Space/Enter to swap).\n    const isNativeTabStop = !draggable && !disabled;\n\n    const handleResponseAreaKeyDown = (e) => {\n      if (e.code === 'Space' || e.code === 'Enter') {\n        e.preventDefault();\n        handleResponseAreaClick();\n      }\n    };\n\n    return (\n      <div\n        ref={setDropRef}\n        role=\"button\"\n        tabIndex={isNativeTabStop ? 0 : -1}\n        onClick={handleResponseAreaClick}\n        onKeyDown={isNativeTabStop ? handleResponseAreaKeyDown : undefined}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        style={{\n          flex: 1,\n          opacity: isDragging || isSelected ? 0.5 : 1,\n          backgroundColor: isDragging || isSelected || showsHoverEffect ? 'rgba(0,0,0,0.05)' : 'transparent',\n          cursor: hasSelection && !disabled ? 'pointer' : undefined,\n        }}\n      >\n        <div ref={setDragRef} {...listeners} {...attributes} style={{ transform: transformStyle, transition }}>\n          <Answer {...props} isDragging={isDragging} isSelected={isSelected} isOver={showsHoverEffect} />\n        </div>\n      </div>\n    );\n  }\n\n  const handleChoiceClick = (e) => {\n    if (disabled) {\n      return;\n    }\n\n    e.stopPropagation();\n    onSelectClick?.(activeData);\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      onClick={handleChoiceClick}\n      style={{\n        transform: transformStyle,\n        transition,\n        cursor: disabled ? 'not-allowed' : 'grab',\n        opacity: isDragging || isSelected ? 0.5 : 1,\n        touchAction: draggable && !disabled ? 'none' : 'auto',\n      }}\n    >\n      <Answer {...props} isDragging={isDragging} isSelected={isSelected} 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  selectedAnswer: PropTypes.object,\n  onSelectClick: PropTypes.func,\n  onPlacementClick: PropTypes.func,\n};\n\nexport default DragAndDropAnswer;\n"],"mappings":"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","ignoreList":[]}

package/lib/choices-list.js

@@ -25,7 +25,10 @@ class ChoicesList extends _react.default.Component {
       disabled,
       session,
       instanceId,
-      onRemoveAnswer
+      onRemoveAnswer,
+      selectedAnswer,
+      onChoiceClick,
+      onPlacementClick
     } = this.props;
     const {
       config
@@ -39,12 +42,15 @@ class ChoicesList extends _react.default.Component {
       draggable: true,
       disabled: disabled,
       session: session,
-      type: "choice"
+      type: "choice",
+      selectedAnswer: selectedAnswer,
+      onSelectClick: onChoiceClick
     }, answer)));
     return /*#__PURE__*/_react.default.createElement(ChoicesContainer, null, /*#__PURE__*/_react.default.createElement(_droppablePlaceholder.DroppablePlaceholder, {
       id: "choices-pool",
       disabled: disabled,
-      onRemoveAnswer: onRemoveAnswer
+      onRemoveAnswer: onRemoveAnswer,
+      onPlacementClick: onPlacementClick
     }, filteredAnswers));
   }
 }
@@ -54,7 +60,10 @@ exports.ChoicesList = ChoicesList;
   instanceId: _propTypes.default.string.isRequired,
   model: _propTypes.default.object.isRequired,
   disabled: _propTypes.default.bool.isRequired,
-  onRemoveAnswer: _propTypes.default.func
+  onRemoveAnswer: _propTypes.default.func,
+  selectedAnswer: _propTypes.default.object,
+  onChoiceClick: _propTypes.default.func,
+  onPlacementClick: _propTypes.default.func
 });
 var _default = exports.default = ChoicesList;
 //# sourceMappingURL=choices-list.js.map

package/lib/choices-list.js.map

@@ -1 +1 @@
-{"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":[]}
+{"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","selectedAnswer","onChoiceClick","onPlacementClick","props","config","duplicates","filteredAnswers","answers","filter","answer","isEmpty","value","isUndefined","find","val","id","map","default","createElement","_extends2","key","draggable","type","onSelectClick","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    selectedAnswer: PropTypes.object,\n    onChoiceClick: PropTypes.func,\n    onPlacementClick: PropTypes.func,\n  };\n\n  render() {\n    const {\n      model,\n      disabled,\n      session,\n      instanceId,\n      onRemoveAnswer,\n      selectedAnswer,\n      onChoiceClick,\n      onPlacementClick,\n    } = 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          selectedAnswer={selectedAnswer}\n          onSelectClick={onChoiceClick}\n          {...answer}\n        />\n      ));\n\n    return (\n      <ChoicesContainer>\n        <DroppablePlaceholder\n          id=\"choices-pool\"\n          disabled={disabled}\n          onRemoveAnswer={onRemoveAnswer}\n          onPlacementClick={onPlacementClick}\n        >\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;EAY/CC,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,KAAK;MACLC,QAAQ;MACRC,OAAO;MACPC,UAAU;MACVC,cAAc;MACdC,cAAc;MACdC,aAAa;MACbC;IACF,CAAC,GAAG,IAAI,CAACC,KAAK;IACd,MAAM;MAAEC;IAAO,CAAC,GAAGT,KAAK;IACxB,MAAM;MAAEU;IAAW,CAAC,GAAGD,MAAM;IAE7B,MAAME,eAAe,GAAGF,MAAM,CAACG,OAAO,CACnCC,MAAM,CACJC,MAAM,IACLJ,UAAU,IACV,IAAAK,iBAAO,EAACb,OAAO,CAAC,IAChB,CAACA,OAAO,CAACc,KAAK,IACd,IAAAC,qBAAW,EAAC,IAAAC,cAAI,EAAChB,OAAO,CAACc,KAAK,EAAGG,GAAG,IAAKA,GAAG,KAAKL,MAAM,CAACM,EAAE,CAAC,CAC/D,CAAC,CACAC,GAAG,CAAEP,MAAM,iBACV/B,MAAA,CAAAuC,OAAA,CAAAC,aAAA,CAAClC,OAAA,CAAAiC,OAAiB,MAAAE,SAAA,CAAAF,OAAA;MAChBG,GAAG,EAAEX,MAAM,CAACM,EAAG;MACfjB,UAAU,EAAEA,UAAW;MACvBuB,SAAS,EAAE,IAAK;MAChBzB,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjByB,IAAI,EAAC,QAAQ;MACbtB,cAAc,EAAEA,cAAe;MAC/BuB,aAAa,EAAEtB;IAAc,GACzBQ,MAAM,CACX,CACF,CAAC;IAEJ,oBACE/B,MAAA,CAAAuC,OAAA,CAAAC,aAAA,CAAChC,gBAAgB,qBACfR,MAAA,CAAAuC,OAAA,CAAAC,aAAA,CAACjC,qBAAA,CAAAuC,oBAAoB;MACnBT,EAAE,EAAC,cAAc;MACjBnB,QAAQ,EAAEA,QAAS;MACnBG,cAAc,EAAEA,cAAe;MAC/BG,gBAAgB,EAAEA;IAAiB,GAElCI,eACmB,CACN,CAAC;EAEvB;AACF;AAACmB,OAAA,CAAAlC,WAAA,GAAAA,WAAA;AAAA,IAAAmC,gBAAA,CAAAT,OAAA,EA7DY1B,WAAW,eACH;EACjBM,OAAO,EAAE8B,kBAAS,CAACC,MAAM,CAACC,UAAU;EACpC/B,UAAU,EAAE6B,kBAAS,CAACG,MAAM,CAACD,UAAU;EACvClC,KAAK,EAAEgC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClCjC,QAAQ,EAAE+B,kBAAS,CAACI,IAAI,CAACF,UAAU;EACnC9B,cAAc,EAAE4B,kBAAS,CAACK,IAAI;EAC9BhC,cAAc,EAAE2B,kBAAS,CAACC,MAAM;EAChC3B,aAAa,EAAE0B,kBAAS,CAACK,IAAI;EAC7B9B,gBAAgB,EAAEyB,kBAAS,CAACK;AAC9B,CAAC;AAAA,IAAAC,QAAA,GAAAR,OAAA,CAAAR,OAAA,GAqDY1B,WAAW","ignoreList":[]}

package/lib/droppable-placeholder.js

@@ -29,6 +29,7 @@ function DroppablePlaceholder({
   id,
   disabled,
   children,
+  onPlacementClick,
   ...rest
 }) {
   const {
@@ -41,8 +42,17 @@ function DroppablePlaceholder({
     },
     disabled
   });
+  const handleClick = () => {
+    if (disabled) {
+      return;
+    }
+    onPlacementClick?.({
+      type: 'choices-pool'
+    });
+  };
   return /*#__PURE__*/_react.default.createElement(Container, (0, _extends2.default)({
     ref: setNodeRef,
+    onClick: handleClick,
     style: {
       backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent'
     }
@@ -54,7 +64,8 @@ function DroppablePlaceholder({
 DroppablePlaceholder.propTypes = {
   id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   disabled: _propTypes.default.bool,
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  onPlacementClick: _propTypes.default.func
 };
 var _default = exports.default = DroppablePlaceholder;
 //# sourceMappingURL=droppable-placeholder.js.map