@pie-element/match-list 7.1.1-next.123 → 7.1.1-next.138

package/lib/answer-area.js

@@ -12,6 +12,7 @@ var _styles = require("@mui/material/styles");
 var _lodashEs = require("lodash-es");
 var _arrow = _interopRequireDefault(require("./arrow"));
 var _answer = _interopRequireDefault(require("./answer"));
+var _renderUi = require("@pie-lib/render-ui");
 // 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;
@@ -33,10 +34,8 @@ const ItemList = (0, _styles.styled)('div')(({
   marginTop: theme.spacing(2),
   marginBottom: theme.spacing(2)
 }));
-const PromptEntry = (0, _styles.styled)('div')(({
-  theme
-}) => ({
-  border: `1px solid ${theme.palette.grey[400]}`,
+const PromptEntry = (0, _styles.styled)('div')(() => ({
+  border: `1px solid ${_renderUi.color.border()}`,
   boxSizing: 'border-box',
   flex: 1,
   margin: '10px 0',
@@ -124,7 +123,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();
@@ -153,7 +155,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
       }));
     }));
   }
@@ -167,7 +172,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","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":[]}
+{"version":3,"file":"answer-area.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_lodashEs","_arrow","_answer","_renderUi","MIN_COLUMN_WIDTH","ArrowEntry","styled","alignItems","display","flexShrink","height","margin","ItemList","theme","flex","flexDirection","justifyContent","marginTop","spacing","marginBottom","PromptEntry","border","color","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';\nimport { color } from '@pie-lib/render-ui';\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')(() => ({\n  border: `1px solid ${color.border()}`,\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
@@ -48,15 +49,15 @@ Holder.propTypes = {
   type: _propTypes.default.string
 };
 const AnswerContentContainer = (0, _styles.styled)('div')(({
-  theme,
   isDragging,
+  isSelected,
   isOver,
   disabled,
   outcome
 }) => ({
   color: _renderUi.color.text(),
   backgroundColor: _renderUi.color.white(),
-  border: `1px solid ${outcome === 'correct' ? _renderUi.color.correct() : outcome === 'incorrect' ? _renderUi.color.incorrect() : theme.palette.grey[400]}`,
+  border: `1px solid ${outcome === 'correct' ? _renderUi.color.correct() : outcome === 'incorrect' ? _renderUi.color.incorrect() : _renderUi.color.border()}`,
   cursor: disabled ? 'not-allowed' : 'pointer',
   width: '100%',
   padding: '10px',
@@ -64,12 +65,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 +90,7 @@ const AnswerContent = props => {
   } else {
     return /*#__PURE__*/_react.default.createElement(AnswerContentContainer, {
       isDragging: isDragging,
+      isSelected: isSelected,
       isOver: isOver,
       disabled: disabled,
       outcome: outcome,
@@ -139,6 +142,7 @@ class Answer extends _react.default.Component {
       id,
       title,
       isDragging = false,
+      isSelected = false,
       className,
       disabled,
       isOver = false,
@@ -156,6 +160,7 @@ class Answer extends _react.default.Component {
       isOver: isOver,
       empty: (0, _lodashEs.isEmpty)(title),
       isDragging: isDragging,
+      isSelected: isSelected,
       disabled: disabled,
       type: type
     }));
@@ -165,6 +170,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 +186,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,27 +218,27 @@ 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;
 
@@ -225,12 +249,59 @@ function DragAndDropAnswer(props) {
   // 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,
-        opacity: isDragging ? 0.5 : 1,
-        backgroundColor: isDragging || 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
@@ -241,23 +312,33 @@ function DragAndDropAnswer(props) {
       }
     }), /*#__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
   })));
 }
@@ -268,7 +349,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 ${\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":[]}
+{"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","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')(({ 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() : color.border()\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/arrow.js

@@ -10,16 +10,19 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
 var _styles = require("@mui/material/styles");
+var _renderUi = require("@pie-lib/render-ui");
 const ArrowContainer = (0, _styles.styled)('div')({
   display: 'inline-block',
   position: 'relative',
   width: '100%'
 });
+
+// A 1px rule joining a prompt to its answer: it is the connector, so it needs to
+// stay perceivable on every scheme's surface.
 const Line = (0, _styles.styled)('span')(({
-  theme,
   isRight
 }) => ({
-  backgroundColor: theme.palette.grey[500],
+  backgroundColor: _renderUi.color.border(),
   bottom: isRight ? 20 : 19,
   content: '""',
   display: 'block',
@@ -41,7 +44,9 @@ class Arrow extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, {
       style: {
         transform: 'rotate(90deg)',
-        color: '#979797',
+        // Pairs with Line above: head and shaft are one connector and have to
+        // step together, or the arrow loses its point on a dark scheme.
+        color: _renderUi.color.border(),
         fontSize: 40
       }
     }), /*#__PURE__*/_react.default.createElement(Line, {

package/lib/arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrow.js","names":["_react","_interopRequireDefault","require","_propTypes","_ArrowDropDown","_styles","ArrowContainer","styled","display","position","width","Line","theme","isRight","backgroundColor","palette","grey","bottom","content","height","left","Arrow","React","Component","render","direction","props","extraStyle","transform","default","createElement","style","color","fontSize","exports","_defineProperty2","PropTypes","string","_default"],"sources":["../src/arrow.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ArrowHead from '@mui/icons-material/ArrowDropDown';\nimport { styled } from '@mui/material/styles';\n\nconst ArrowContainer = styled('div')({\n  display: 'inline-block',\n  position: 'relative',\n  width: '100%',\n});\n\nconst Line = styled('span')(({ theme, isRight }) => ({\n  backgroundColor: theme.palette.grey[500],\n  bottom: isRight ? 20 : 19,\n  content: '\"\"',\n  display: 'block',\n  height: 1,\n  left: 20,\n  position: 'absolute',\n  width: '100%',\n}));\n\nexport class Arrow extends React.Component {\n  static propTypes = {\n    direction: PropTypes.string,\n  };\n\n  render() {\n    const { direction } = this.props;\n\n    const extraStyle =\n      direction === 'left'\n        ? {}\n        : {\n            transform: 'rotate(180deg)',\n          };\n\n    return (\n      <ArrowContainer style={extraStyle}>\n        <ArrowHead\n          style={{\n            transform: 'rotate(90deg)',\n            color: '#979797',\n            fontSize: 40,\n          }}\n        />\n        <Line isRight={direction !== 'left'} />\n      </ArrowContainer>\n    );\n  }\n}\n\nexport default Arrow;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAEA,MAAMI,cAAc,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC;EACnCC,OAAO,EAAE,cAAc;EACvBC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMC,IAAI,GAAG,IAAAJ,cAAM,EAAC,MAAM,CAAC,CAAC,CAAC;EAAEK,KAAK;EAAEC;AAAQ,CAAC,MAAM;EACnDC,eAAe,EAAEF,KAAK,CAACG,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;EACxCC,MAAM,EAAEJ,OAAO,GAAG,EAAE,GAAG,EAAE;EACzBK,OAAO,EAAE,IAAI;EACbV,OAAO,EAAE,OAAO;EAChBW,MAAM,EAAE,CAAC;EACTC,IAAI,EAAE,EAAE;EACRX,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AAEI,MAAMW,KAAK,SAASC,cAAK,CAACC,SAAS,CAAC;EAKzCC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC;IAAU,CAAC,GAAG,IAAI,CAACC,KAAK;IAEhC,MAAMC,UAAU,GACdF,SAAS,KAAK,MAAM,GAChB,CAAC,CAAC,GACF;MACEG,SAAS,EAAE;IACb,CAAC;IAEP,oBACE5B,MAAA,CAAA6B,OAAA,CAAAC,aAAA,CAACxB,cAAc;MAACyB,KAAK,EAAEJ;IAAW,gBAChC3B,MAAA,CAAA6B,OAAA,CAAAC,aAAA,CAAC1B,cAAA,CAAAyB,OAAS;MACRE,KAAK,EAAE;QACLH,SAAS,EAAE,eAAe;QAC1BI,KAAK,EAAE,SAAS;QAChBC,QAAQ,EAAE;MACZ;IAAE,CACH,CAAC,eACFjC,MAAA,CAAA6B,OAAA,CAAAC,aAAA,CAACnB,IAAI;MAACE,OAAO,EAAEY,SAAS,KAAK;IAAO,CAAE,CACxB,CAAC;EAErB;AACF;AAACS,OAAA,CAAAb,KAAA,GAAAA,KAAA;AAAA,IAAAc,gBAAA,CAAAN,OAAA,EA5BYR,KAAK,eACG;EACjBI,SAAS,EAAEW,kBAAS,CAACC;AACvB,CAAC;AAAA,IAAAC,QAAA,GAAAJ,OAAA,CAAAL,OAAA,GA2BYR,KAAK","ignoreList":[]}
+{"version":3,"file":"arrow.js","names":["_react","_interopRequireDefault","require","_propTypes","_ArrowDropDown","_styles","_renderUi","ArrowContainer","styled","display","position","width","Line","isRight","backgroundColor","color","border","bottom","content","height","left","Arrow","React","Component","render","direction","props","extraStyle","transform","default","createElement","style","fontSize","exports","_defineProperty2","PropTypes","string","_default"],"sources":["../src/arrow.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ArrowHead from '@mui/icons-material/ArrowDropDown';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst ArrowContainer = styled('div')({\n  display: 'inline-block',\n  position: 'relative',\n  width: '100%',\n});\n\n// A 1px rule joining a prompt to its answer: it is the connector, so it needs to\n// stay perceivable on every scheme's surface.\nconst Line = styled('span')(({ isRight }) => ({\n  backgroundColor: color.border(),\n  bottom: isRight ? 20 : 19,\n  content: '\"\"',\n  display: 'block',\n  height: 1,\n  left: 20,\n  position: 'absolute',\n  width: '100%',\n}));\n\nexport class Arrow extends React.Component {\n  static propTypes = {\n    direction: PropTypes.string,\n  };\n\n  render() {\n    const { direction } = this.props;\n\n    const extraStyle =\n      direction === 'left'\n        ? {}\n        : {\n            transform: 'rotate(180deg)',\n          };\n\n    return (\n      <ArrowContainer style={extraStyle}>\n        <ArrowHead\n          style={{\n            transform: 'rotate(90deg)',\n            // Pairs with Line above: head and shaft are one connector and have to\n            // step together, or the arrow loses its point on a dark scheme.\n            color: color.border(),\n            fontSize: 40,\n          }}\n        />\n        <Line isRight={direction !== 'left'} />\n      </ArrowContainer>\n    );\n  }\n}\n\nexport default Arrow;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAEA,MAAMK,cAAc,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC;EACnCC,OAAO,EAAE,cAAc;EACvBC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE;AACT,CAAC,CAAC;;AAEF;AACA;AACA,MAAMC,IAAI,GAAG,IAAAJ,cAAM,EAAC,MAAM,CAAC,CAAC,CAAC;EAAEK;AAAQ,CAAC,MAAM;EAC5CC,eAAe,EAAEC,eAAK,CAACC,MAAM,CAAC,CAAC;EAC/BC,MAAM,EAAEJ,OAAO,GAAG,EAAE,GAAG,EAAE;EACzBK,OAAO,EAAE,IAAI;EACbT,OAAO,EAAE,OAAO;EAChBU,MAAM,EAAE,CAAC;EACTC,IAAI,EAAE,EAAE;EACRV,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AAEI,MAAMU,KAAK,SAASC,cAAK,CAACC,SAAS,CAAC;EAKzCC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC;IAAU,CAAC,GAAG,IAAI,CAACC,KAAK;IAEhC,MAAMC,UAAU,GACdF,SAAS,KAAK,MAAM,GAChB,CAAC,CAAC,GACF;MACEG,SAAS,EAAE;IACb,CAAC;IAEP,oBACE5B,MAAA,CAAA6B,OAAA,CAAAC,aAAA,CAACvB,cAAc;MAACwB,KAAK,EAAEJ;IAAW,gBAChC3B,MAAA,CAAA6B,OAAA,CAAAC,aAAA,CAAC1B,cAAA,CAAAyB,OAAS;MACRE,KAAK,EAAE;QACLH,SAAS,EAAE,eAAe;QAC1B;QACA;QACAb,KAAK,EAAEA,eAAK,CAACC,MAAM,CAAC,CAAC;QACrBgB,QAAQ,EAAE;MACZ;IAAE,CACH,CAAC,eACFhC,MAAA,CAAA6B,OAAA,CAAAC,aAAA,CAAClB,IAAI;MAACC,OAAO,EAAEY,SAAS,KAAK;IAAO,CAAE,CACxB,CAAC;EAErB;AACF;AAACQ,OAAA,CAAAZ,KAAA,GAAAA,KAAA;AAAA,IAAAa,gBAAA,CAAAL,OAAA,EA9BYR,KAAK,eACG;EACjBI,SAAS,EAAEU,kBAAS,CAACC;AACvB,CAAC;AAAA,IAAAC,QAAA,GAAAJ,OAAA,CAAAJ,OAAA,GA6BYR,KAAK","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

package/lib/droppable-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"droppable-placeholder.js","names":["_react","_interopRequireDefault","require","_propTypes","_core","_styles","_drag","Container","styled","theme","alignItems","display","flexDirection","flexWrap","justifyContent","marginTop","spacing","marginBottom","minHeight","transition","DroppablePlaceholder","id","disabled","children","rest","setNodeRef","isOver","useDroppable","data","type","default","createElement","_extends2","ref","style","backgroundColor","MatchDroppablePlaceholder","propTypes","PropTypes","oneOfType","string","number","bool","node","_default","exports"],"sources":["../src/droppable-placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { MatchDroppablePlaceholder } from '@pie-lib/drag';\n\nconst Container = styled('div')(({ theme }) => ({\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'space-between',\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n    minHeight: 50,\n    transition: 'background-color 200ms ease',\n}));\n\nexport function DroppablePlaceholder({ id, disabled, children, ...rest }) {\n    const { setNodeRef, isOver } = useDroppable({\n        id: id || 'choices-pool',\n        data: { type: 'choices-pool' },\n        disabled,\n    });\n\n    return (\n        <Container\n            ref={setNodeRef}\n            style={{ backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent' }}\n            {...rest}\n        >\n            <MatchDroppablePlaceholder id={id} disabled={disabled}>\n                {children}\n            </MatchDroppablePlaceholder>\n        </Container>\n    );\n}\n\nDroppablePlaceholder.propTypes = {\n    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    disabled: PropTypes.bool,\n    children: PropTypes.node,\n};\n\nexport default DroppablePlaceholder;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAEA,MAAMK,SAAS,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAC5CC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,KAAK;EACpBC,QAAQ,EAAE,MAAM;EAChBC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAEN,KAAK,CAACO,OAAO,CAAC,CAAC,CAAC;EAC3BC,YAAY,EAAER,KAAK,CAACO,OAAO,CAAC,CAAC,CAAC;EAC9BE,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE;AAChB,CAAC,CAAC,CAAC;AAEI,SAASC,oBAAoBA,CAAC;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAE;EACtE,MAAM;IAAEC,UAAU;IAAEC;EAAO,CAAC,GAAG,IAAAC,kBAAY,EAAC;IACxCN,EAAE,EAAEA,EAAE,IAAI,cAAc;IACxBO,IAAI,EAAE;MAAEC,IAAI,EAAE;IAAe,CAAC;IAC9BP;EACJ,CAAC,CAAC;EAEF,oBACItB,MAAA,CAAA8B,OAAA,CAAAC,aAAA,CAACxB,SAAS,MAAAyB,SAAA,CAAAF,OAAA;IACNG,GAAG,EAAER,UAAW;IAChBS,KAAK,EAAE;MAAEC,eAAe,EAAET,MAAM,GAAG,kBAAkB,GAAG;IAAc;EAAE,GACpEF,IAAI,gBAERxB,MAAA,CAAA8B,OAAA,CAAAC,aAAA,CAACzB,KAAA,CAAA8B,yBAAyB;IAACf,EAAE,EAAEA,EAAG;IAACC,QAAQ,EAAEA;EAAS,GACjDC,QACsB,CACpB,CAAC;AAEpB;AAEAH,oBAAoB,CAACiB,SAAS,GAAG;EAC7BhB,EAAE,EAAEiB,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,MAAM,CAAC,CAAC;EAC7DnB,QAAQ,EAAEgB,kBAAS,CAACI,IAAI;EACxBnB,QAAQ,EAAEe,kBAAS,CAACK;AACxB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAf,OAAA,GAEaV,oBAAoB","ignoreList":[]}
+{"version":3,"file":"droppable-placeholder.js","names":["_react","_interopRequireDefault","require","_propTypes","_core","_styles","_drag","Container","styled","theme","alignItems","display","flexDirection","flexWrap","justifyContent","marginTop","spacing","marginBottom","minHeight","transition","DroppablePlaceholder","id","disabled","children","onPlacementClick","rest","setNodeRef","isOver","useDroppable","data","type","handleClick","default","createElement","_extends2","ref","onClick","style","backgroundColor","MatchDroppablePlaceholder","propTypes","PropTypes","oneOfType","string","number","bool","node","func","_default","exports"],"sources":["../src/droppable-placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { MatchDroppablePlaceholder } from '@pie-lib/drag';\n\nconst Container = styled('div')(({ theme }) => ({\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'space-between',\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n    minHeight: 50,\n    transition: 'background-color 200ms ease',\n}));\n\nexport function DroppablePlaceholder({ id, disabled, children, onPlacementClick, ...rest }) {\n    const { setNodeRef, isOver } = useDroppable({\n        id: id || 'choices-pool',\n        data: { type: 'choices-pool' },\n        disabled,\n    });\n\n    const handleClick = () => {\n        if (disabled) {\n          return;\n        }\n\n        onPlacementClick?.({ type: 'choices-pool' });\n    };\n\n    return (\n        <Container\n            ref={setNodeRef}\n            onClick={handleClick}\n            style={{ backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent' }}\n            {...rest}\n        >\n            <MatchDroppablePlaceholder id={id} disabled={disabled}>\n                {children}\n            </MatchDroppablePlaceholder>\n        </Container>\n    );\n}\n\nDroppablePlaceholder.propTypes = {\n    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    disabled: PropTypes.bool,\n    children: PropTypes.node,\n    onPlacementClick: PropTypes.func,\n};\n\nexport default DroppablePlaceholder;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAEA,MAAMK,SAAS,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAC5CC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,KAAK;EACpBC,QAAQ,EAAE,MAAM;EAChBC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAEN,KAAK,CAACO,OAAO,CAAC,CAAC,CAAC;EAC3BC,YAAY,EAAER,KAAK,CAACO,OAAO,CAAC,CAAC,CAAC;EAC9BE,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE;AAChB,CAAC,CAAC,CAAC;AAEI,SAASC,oBAAoBA,CAAC;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC,gBAAgB;EAAE,GAAGC;AAAK,CAAC,EAAE;EACxF,MAAM;IAAEC,UAAU;IAAEC;EAAO,CAAC,GAAG,IAAAC,kBAAY,EAAC;IACxCP,EAAE,EAAEA,EAAE,IAAI,cAAc;IACxBQ,IAAI,EAAE;MAAEC,IAAI,EAAE;IAAe,CAAC;IAC9BR;EACJ,CAAC,CAAC;EAEF,MAAMS,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAIT,QAAQ,EAAE;MACZ;IACF;IAEAE,gBAAgB,GAAG;MAAEM,IAAI,EAAE;IAAe,CAAC,CAAC;EAChD,CAAC;EAED,oBACI9B,MAAA,CAAAgC,OAAA,CAAAC,aAAA,CAAC1B,SAAS,MAAA2B,SAAA,CAAAF,OAAA;IACNG,GAAG,EAAET,UAAW;IAChBU,OAAO,EAAEL,WAAY;IACrBM,KAAK,EAAE;MAAEC,eAAe,EAAEX,MAAM,GAAG,kBAAkB,GAAG;IAAc;EAAE,GACpEF,IAAI,gBAERzB,MAAA,CAAAgC,OAAA,CAAAC,aAAA,CAAC3B,KAAA,CAAAiC,yBAAyB;IAAClB,EAAE,EAAEA,EAAG;IAACC,QAAQ,EAAEA;EAAS,GACjDC,QACsB,CACpB,CAAC;AAEpB;AAEAH,oBAAoB,CAACoB,SAAS,GAAG;EAC7BnB,EAAE,EAAEoB,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,MAAM,CAAC,CAAC;EAC7DtB,QAAQ,EAAEmB,kBAAS,CAACI,IAAI;EACxBtB,QAAQ,EAAEkB,kBAAS,CAACK,IAAI;EACxBtB,gBAAgB,EAAEiB,kBAAS,CAACM;AAChC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjB,OAAA,GAEaZ,oBAAoB","ignoreList":[]}

package/lib/main.js

@@ -19,9 +19,28 @@ var _lodashEs = require("lodash-es");
 var _answerArea = _interopRequireDefault(require("./answer-area"));
 var _choicesList = _interopRequireDefault(require("./choices-list"));
 var _answer = require("./answer");
-const sensors = [{
+// A click that lands right after a real drag gesture ends (pointer drag-and-drop, or
+// the browser's own synthetic click for a keyboard Space/Enter) must be ignored by the
+// new click-to-select/click-to-place handlers below, or it would immediately reopen or
+// re-trigger a selection for a drag that just completed.
+const CLICK_AFTER_DRAG_GUARD_MS = 250;
+const sensors = [
+// Without an activationConstraint, dnd-kit's PointerSensor calls its internal
+// handleStart() synchronously on pointerdown, before any movement — meaning a plain
+// click is itself "activated" as a drag. Once activated, dnd-kit adds a capture-phase
+// document click listener that calls stopPropagation() (to suppress the native
+// "ghost click" a real drag leaves behind), which also swallows the click for a
+// gesture with zero movement, before it ever reaches our own onClick handlers below.
+// Requiring 8px of movement (matching @pie-lib/drag's DragProvider convention used
+// elsewhere in this codebase) defers activation until an actual drag gesture is
+// underway, so a plain click passes through untouched.
+{
   sensor: _core.PointerSensor,
-  options: {}
+  options: {
+    activationConstraint: {
+      distance: 8
+    }
+  }
 }, {
   sensor: _core.KeyboardSensor,
   options: {
@@ -79,22 +98,19 @@ class Main extends _react.default.Component {
             rect
           }
         });
+        this.selectAnswer(active.data.current);
       }
     });
-    (0, _defineProperty2.default)(this, "onPlaceAnswer", event => {
+    (0, _defineProperty2.default)(this, "onDragCancel", () => {
       this.setState({
         draggingElement: null
       });
-      const {
-        active,
-        over
-      } = event;
-      if (!active) {
-        return;
-      }
-      const activeData = active.data.current;
-      const overData = over?.data.current;
-      if (!activeData) {
+      this.cancelSelection();
+      this.lastDragEndAt = Date.now();
+    });
+    // Pure placement logic
+    (0, _defineProperty2.default)(this, "placeAnswer", (activeData, overData) => {
+      if (!activeData || !overData) {
         return;
       }
       const {
@@ -121,9 +137,9 @@ class Main extends _react.default.Component {
       const sourcePromptId = activeData.promptId;
 
       // Handle dropping onto a drop zone
-      if (overData && overData.type === 'drop-zone' && overData.promptId != null) {
+      if (overData.type === 'drop-zone' && overData.promptId != null) {
         const targetPromptId = overData.promptId;
-        if (activeData.type === 'choice' && overData.type === 'drop-zone' && targetPromptId !== undefined) {
+        if (activeData.type === 'choice' && targetPromptId !== undefined) {
           // check if this choice is already placed somewhere
           const existingPlacement = (0, _lodashEs.findKey)(session.value, val => val === answerId);
           if (existingPlacement && !duplicates) {
@@ -154,6 +170,88 @@ class Main extends _react.default.Component {
         onSessionChange(session);
       }
     });
+    (0, _defineProperty2.default)(this, "onPlaceAnswer", event => {
+      this.setState({
+        draggingElement: null
+      });
+      const {
+        active,
+        over
+      } = event;
+      if (!active) {
+        return;
+      }
+      const activeData = active.data.current;
+      const overData = over?.data.current;
+      if (!activeData) {
+        return;
+      }
+      this.placeAnswer(activeData, overData);
+      this.cancelSelection();
+      this.lastDragEndAt = Date.now();
+    });
+    (0, _defineProperty2.default)(this, "isSameAnswer", (a, b) => !!a && !!b && a.type === b.type && a.id === b.id && a.promptId === b.promptId);
+    // Unconditionally selects (used by the drag-start mirror, and internally when
+    // switching from one choice to another).
+    (0, _defineProperty2.default)(this, "selectAnswer", data => {
+      this.setState({
+        selectedAnswer: data
+      });
+    });
+    // Click-to-select semantics: selecting the currently-selected answer again clears
+    // the selection instead of re-selecting it.
+    (0, _defineProperty2.default)(this, "toggleAnswerSelection", data => {
+      this.setState(state => ({
+        selectedAnswer: this.isSameAnswer(state.selectedAnswer, data) ? null : data
+      }));
+    });
+    (0, _defineProperty2.default)(this, "cancelSelection", () => {
+      this.setState({
+        selectedAnswer: null
+      });
+    });
+    // If a real dnd-kit drag (started via keyboard Space/Enter) is still live when a
+    // click completes the placement below, it needs to be cleanly ended — otherwise
+    // dnd-kit would still think a drag is in progress (still listening for Tab/arrow/
+    // Space/Escape, still showing the drag overlay) for a placement the click already
+    // performed. Escape is already configured as this sensor's cancel key, and
+    // dispatching it as a real DOM KeyboardEvent is how dnd-kit's own document-level
+    // listener is reached from outside its sensor. onDragCancel is intentionally not
+    // wired to redo any placement — it only resets local UI state — so this is safe to
+    // call unconditionally, including when no drag is actually live (dnd-kit simply has
+    // no listener attached in that case, and the dispatch is a no-op).
+    (0, _defineProperty2.default)(this, "endAnyLiveKeyboardDrag", () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', {
+        code: 'Escape',
+        bubbles: true,
+        cancelable: true
+      }));
+    });
+    (0, _defineProperty2.default)(this, "placeSelectedAnswer", overData => {
+      const {
+        selectedAnswer
+      } = this.state;
+      if (!selectedAnswer) {
+        return;
+      }
+      this.placeAnswer(selectedAnswer, overData);
+      this.cancelSelection();
+      this.endAnyLiveKeyboardDrag();
+      this.lastDragEndAt = Date.now();
+    });
+    (0, _defineProperty2.default)(this, "isClickSoonAfterDragEnd", () => Date.now() - this.lastDragEndAt < CLICK_AFTER_DRAG_GUARD_MS);
+    (0, _defineProperty2.default)(this, "onChoiceClick", data => {
+      if (this.isClickSoonAfterDragEnd()) {
+        return;
+      }
+      this.toggleAnswerSelection(data);
+    });
+    (0, _defineProperty2.default)(this, "onPlacementClick", overData => {
+      if (this.isClickSoonAfterDragEnd()) {
+        return;
+      }
+      this.placeSelectedAnswer(overData);
+    });
     (0, _defineProperty2.default)(this, "toggleShowCorrect", () => {
       this.setState({
         showCorrectAnswer: !this.state.showCorrectAnswer
@@ -179,8 +277,10 @@ class Main extends _react.default.Component {
     this.instanceId = (0, _lodashEs.uniqueId)();
     this.state = {
       showCorrectAnswer: false,
-      draggingElement: null
+      draggingElement: null,
+      selectedAnswer: null
     };
+    this.lastDragEndAt = 0;
   }
   onRemoveAnswer(id) {
     const {
@@ -273,10 +373,11 @@ class Main extends _react.default.Component {
       collisionDetection: _core.rectIntersection,
       onDragStart: this.onDragStart,
       onDragEnd: this.onPlaceAnswer,
+      onDragCancel: this.onDragCancel,
       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.'
+          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. You can also click an answer choice to select it, then click a response area to place it there.'
         }
       }
     }, /*#__PURE__*/_react.default.createElement(MainContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
@@ -293,13 +394,19 @@ class Main extends _react.default.Component {
       session: session,
       onRemoveAnswer: id => this.onRemoveAnswer(id),
       disabled: mode !== 'gather',
-      showCorrect: showCorrectAnswer
+      showCorrect: showCorrectAnswer,
+      selectedAnswer: this.state.selectedAnswer,
+      onChoiceClick: this.onChoiceClick,
+      onPlacementClick: this.onPlacementClick
     }), /*#__PURE__*/_react.default.createElement(_choicesList.default, {
       instanceId: this.instanceId,
       model: model,
       session: session,
       disabled: mode !== 'gather',
-      onRemoveAnswer: id => this.onRemoveAnswer(id)
+      onRemoveAnswer: id => this.onRemoveAnswer(id),
+      selectedAnswer: this.state.selectedAnswer,
+      onChoiceClick: this.onChoiceClick,
+      onPlacementClick: this.onPlacementClick
     }))), model.correctness && model.feedback && !showCorrectAnswer && /*#__PURE__*/_react.default.createElement(_renderUi.Feedback, {
       correctness: model.correctness.correctness,
       feedback: model.feedback

package/lib/main.js.map

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_drag","_core","_modifiers","_keyboardCoordinates","_correctAnswerToggle","_renderUi","_styles","_lodashEs","_answerArea","_choicesList","_answer","CLICK_AFTER_DRAG_GUARD_MS","sensors","sensor","PointerSensor","options","activationConstraint","distance","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","selectAnswer","cancelSelection","lastDragEndAt","Date","now","activeData","overData","session","onSessionChange","model","config","duplicates","isUndefined","value","type","promptId","undefined","answerId","id","sourcePromptId","targetPromptId","existingPlacement","findKey","val","swap","targetHasItem","temp","over","placeAnswer","a","b","selectedAnswer","state","isSameAnswer","document","dispatchEvent","KeyboardEvent","code","bubbles","cancelable","endAnyLiveKeyboardDrag","isClickSoonAfterDragEnd","toggleAnswerSelection","placeSelectedAnswer","showCorrectAnswer","createElement","Answer","title","disabled","isDragging","style","boxSizing","instanceId","uniqueId","onRemoveAnswer","render","mode","prompt","language","getChoiceLabel","dragId","String","replace","answer","answers","find","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","onChoiceClick","onPlacementClick","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\n// A click that lands right after a real drag gesture ends (pointer drag-and-drop, or\n// the browser's own synthetic click for a keyboard Space/Enter) must be ignored by the\n// new click-to-select/click-to-place handlers below, or it would immediately reopen or\n// re-trigger a selection for a drag that just completed.\nconst CLICK_AFTER_DRAG_GUARD_MS = 250;\n\nconst sensors = [\n  // Without an activationConstraint, dnd-kit's PointerSensor calls its internal\n  // handleStart() synchronously on pointerdown, before any movement — meaning a plain\n  // click is itself \"activated\" as a drag. Once activated, dnd-kit adds a capture-phase\n  // document click listener that calls stopPropagation() (to suppress the native\n  // \"ghost click\" a real drag leaves behind), which also swallows the click for a\n  // gesture with zero movement, before it ever reaches our own onClick handlers below.\n  // Requiring 8px of movement (matching @pie-lib/drag's DragProvider convention used\n  // elsewhere in this codebase) defers activation until an actual drag gesture is\n  // underway, so a plain click passes through untouched.\n  { sensor: PointerSensor, options: { activationConstraint: { distance: 8 } } },\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      selectedAnswer: null,\n    };\n    this.lastDragEndAt = 0;\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      this.selectAnswer(active.data.current);\n    }\n  };\n\n  onDragCancel = () => {\n    this.setState({ draggingElement: null });\n    this.cancelSelection();\n    this.lastDragEndAt = Date.now();\n  };\n\n  // Pure placement logic\n  placeAnswer = (activeData, overData) => {\n    if (!activeData || !overData) {\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.type === 'drop-zone' && overData.promptId != null) {\n      const targetPromptId = overData.promptId;\n\n      if (activeData.type === 'choice' && 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  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    this.placeAnswer(activeData, overData);\n    this.cancelSelection();\n    this.lastDragEndAt = Date.now();\n  };\n\n  isSameAnswer = (a, b) => !!a && !!b && a.type === b.type && a.id === b.id && a.promptId === b.promptId;\n\n  // Unconditionally selects (used by the drag-start mirror, and internally when\n  // switching from one choice to another).\n  selectAnswer = (data) => {\n    this.setState({ selectedAnswer: data });\n  };\n\n  // Click-to-select semantics: selecting the currently-selected answer again clears\n  // the selection instead of re-selecting it.\n  toggleAnswerSelection = (data) => {\n    this.setState((state) => ({\n      selectedAnswer: this.isSameAnswer(state.selectedAnswer, data) ? null : data,\n    }));\n  };\n\n  cancelSelection = () => {\n    this.setState({ selectedAnswer: null });\n  };\n\n  // If a real dnd-kit drag (started via keyboard Space/Enter) is still live when a\n  // click completes the placement below, it needs to be cleanly ended — otherwise\n  // dnd-kit would still think a drag is in progress (still listening for Tab/arrow/\n  // Space/Escape, still showing the drag overlay) for a placement the click already\n  // performed. Escape is already configured as this sensor's cancel key, and\n  // dispatching it as a real DOM KeyboardEvent is how dnd-kit's own document-level\n  // listener is reached from outside its sensor. onDragCancel is intentionally not\n  // wired to redo any placement — it only resets local UI state — so this is safe to\n  // call unconditionally, including when no drag is actually live (dnd-kit simply has\n  // no listener attached in that case, and the dispatch is a no-op).\n  endAnyLiveKeyboardDrag = () => {\n    document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape', bubbles: true, cancelable: true }));\n  };\n\n  placeSelectedAnswer = (overData) => {\n    const { selectedAnswer } = this.state;\n\n    if (!selectedAnswer) {\n      return;\n    }\n\n    this.placeAnswer(selectedAnswer, overData);\n    this.cancelSelection();\n    this.endAnyLiveKeyboardDrag();\n    this.lastDragEndAt = Date.now();\n  };\n\n  isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < CLICK_AFTER_DRAG_GUARD_MS;\n\n  onChoiceClick = (data) => {\n    if (this.isClickSoonAfterDragEnd()) {\n      return;\n    }\n\n    this.toggleAnswerSelection(data);\n  };\n\n  onPlacementClick = (overData) => {\n    if (this.isClickSoonAfterDragEnd()) {\n      return;\n    }\n\n    this.placeSelectedAnswer(overData);\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        onDragCancel={this.onDragCancel}\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. You can also click an answer choice to select it, then click a response area to place it there.',\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                selectedAnswer={this.state.selectedAnswer}\n                onChoiceClick={this.onChoiceClick}\n                onPlacementClick={this.onPlacementClick}\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                selectedAnswer={this.state.selectedAnswer}\n                onChoiceClick={this.onChoiceClick}\n                onPlacementClick={this.onPlacementClick}\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.1-next.123+cef96a516",
+  "version": "7.1.1-next.138+4fef74502",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -18,10 +18,10 @@
     "@mui/icons-material": "^7.3.4",
     "@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.1.0",
+    "@pie-lib/correct-answer-toggle": "4.0.6",
+    "@pie-lib/drag": "4.1.1",
     "@pie-lib/math-rendering": "5.1.0",
-    "@pie-lib/render-ui": "6.1.3",
+    "@pie-lib/render-ui": "7.0.0",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",
@@ -30,7 +30,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "cef96a516506454b98b46b92958a23bb757665a1",
+  "gitHead": "4fef74502f599174dc66542fc648b7b71912797e",
   "main": "lib/index.js",
   "module": "src/index.js"
 }