@pie-element/image-cloze-association 10.2.0 → 10.3.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [10.3.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.2.0...@pie-element/image-cloze-association@10.3.0) (2026-08-26)
+
+### Features
+
+- **image-cloze-association:** add additional keyboard navigation (Tab/Shift+Tab placement) PIE-802 and click-to-select/click-to-place functionality PIE-795 ([603e597](https://github.com/pie-framework/pie-elements/commit/603e5972c1de522b5578ade70fcf26be31cb5685))
+
 # [10.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.11...@pie-element/image-cloze-association@10.2.0) (2026-08-21)
 
 ### Bug Fixes

package/configure/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.2.0...@pie-element/image-cloze-association-configure@9.2.1) (2026-08-26)
+
+**Note:** Version bump only for package @pie-element/image-cloze-association-configure
+
 # [9.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.11...@pie-element/image-cloze-association-configure@9.2.0) (2026-08-21)
 
 ### Features

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/image-cloze-association-configure",
   "private": true,
-  "version": "9.2.0",
+  "version": "9.2.1",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -12,8 +12,8 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "13.0.16",
-    "@pie-lib/editable-html-tip-tap": "2.1.14",
+    "@pie-lib/config-ui": "13.0.17",
+    "@pie-lib/editable-html-tip-tap": "2.1.15",
     "debug": "^4.1.1",
     "prop-types": "^15.8.1",
     "react": "18.3.1",

package/lib/image-container.js

@@ -37,7 +37,10 @@ class ImageContainer extends _react.Component {
       answerChoiceTransparency,
       responseContainerPadding,
       imageDropTargetPadding,
-      maxResponsePerZone
+      maxResponsePerZone,
+      selectedResponse,
+      onSelectClick,
+      onPlacementClick
     } = this.props;
     return /*#__PURE__*/_react.default.createElement(BaseContainer, null, /*#__PURE__*/_react.default.createElement("img", {
       src: src,
@@ -69,7 +72,10 @@ class ImageContainer extends _react.Component {
         answerChoiceTransparency: answerChoiceTransparency,
         responseContainerPadding: responseContainerPadding,
         imageDropTargetPadding: imageDropTargetPadding,
-        maxResponsePerZone: maxResponsePerZone
+        maxResponsePerZone: maxResponsePerZone,
+        selectedResponse: selectedResponse,
+        onSelectClick: onSelectClick,
+        onPlacementClick: onPlacementClick
       });
     }));
   }
@@ -88,7 +94,10 @@ ImageContainer.propTypes = {
   responseAreaFill: _propTypes.default.string,
   responseContainerPadding: _propTypes.default.string,
   imageDropTargetPadding: _propTypes.default.string,
-  maxResponsePerZone: _propTypes.default.number
+  maxResponsePerZone: _propTypes.default.number,
+  selectedResponse: _propTypes.default.object,
+  onSelectClick: _propTypes.default.func,
+  onPlacementClick: _propTypes.default.func
 };
 var _default = exports.default = ImageContainer;
 //# sourceMappingURL=image-container.js.map

package/lib/image-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-container.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_imageDropTarget","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseContainer","styled","theme","margin","spacing","position","width","ImageContainer","Component","render","answers","canDrag","draggingElement","image","height","src","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","maxResponsePerZone","props","createElement","map","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","containerStyle","left","top","key","id","onDrop","item","propTypes","PropTypes","array","isRequired","bool","shape","object","func","string","number","_default","exports"],"sources":["../src/image-container.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\n\nimport ImageDropTarget from './image-drop-target';\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n  margin: theme.spacing(2),\n  position: 'relative',\n  width: 'fit-content',\n}));\n\nclass ImageContainer extends Component {\n  render() {\n    const {\n      answers,\n      canDrag,\n      draggingElement,\n      image: { height, src, width } = {},\n      onAnswerSelect,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      responseContainers,\n      showDashedBorder,\n      responseAreaFill,\n      answerChoiceTransparency,\n      responseContainerPadding,\n      imageDropTargetPadding,\n      maxResponsePerZone,\n    } = this.props;\n\n    return (\n      <BaseContainer>\n        <img src={src} height={height} width={width} />\n\n        {(responseContainers || []).map((r, i) => {\n          const rHeight = (r.height.replace('%', '') / 100) * height;\n          const rWidth = (r.width.replace('%', '') / 100) * width;\n          const rLeft = (r.x / 100) * width;\n          const rTop = (r.y / 100) * height;\n          const answersParsed = answers.filter((a) => a.containerIndex === r.index);\n\n          return (\n            <ImageDropTarget\n              answers={answersParsed}\n              canDrag={canDrag}\n              containerStyle={{\n                height: rHeight,\n                width: rWidth,\n                left: rLeft,\n                top: rTop,\n              }}\n              key={r.id + i}\n              draggingElement={draggingElement}\n              index={r.index}\n              onDrop={(item) => onAnswerSelect(item, r.index)}\n              onDragAnswerBegin={onDragAnswerBegin}\n              onDragAnswerEnd={onDragAnswerEnd}\n              showDashedBorder={showDashedBorder}\n              responseAreaFill={responseAreaFill}\n              answerChoiceTransparency={answerChoiceTransparency}\n              responseContainerPadding={responseContainerPadding}\n              imageDropTargetPadding={imageDropTargetPadding}\n              maxResponsePerZone={maxResponsePerZone}\n            />\n          );\n        })}\n      </BaseContainer>\n    );\n  }\n}\n\nImageContainer.propTypes = {\n  answers: PropTypes.array.isRequired,\n  canDrag: PropTypes.bool.isRequired,\n  draggingElement: PropTypes.shape({}).isRequired,\n  image: PropTypes.object.isRequired,\n  onAnswerSelect: PropTypes.func.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  responseContainers: PropTypes.array.isRequired,\n  showDashedBorder: PropTypes.bool,\n  answerChoiceTransparency: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n  maxResponsePerZone: PropTypes.number,\n};\n\nexport default ImageContainer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"image-container.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_imageDropTarget","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseContainer","styled","theme","margin","spacing","position","width","ImageContainer","Component","render","answers","canDrag","draggingElement","image","height","src","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","maxResponsePerZone","selectedResponse","onSelectClick","onPlacementClick","props","createElement","map","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","containerStyle","left","top","key","id","onDrop","item","propTypes","PropTypes","array","isRequired","bool","shape","object","func","string","number","_default","exports"],"sources":["../src/image-container.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\n\nimport ImageDropTarget from './image-drop-target';\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n  margin: theme.spacing(2),\n  position: 'relative',\n  width: 'fit-content',\n}));\n\nclass ImageContainer extends Component {\n  render() {\n    const {\n      answers,\n      canDrag,\n      draggingElement,\n      image: { height, src, width } = {},\n      onAnswerSelect,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      responseContainers,\n      showDashedBorder,\n      responseAreaFill,\n      answerChoiceTransparency,\n      responseContainerPadding,\n      imageDropTargetPadding,\n      maxResponsePerZone,\n      selectedResponse,\n      onSelectClick,\n      onPlacementClick,\n    } = this.props;\n\n    return (\n      <BaseContainer>\n        <img src={src} height={height} width={width} />\n\n        {(responseContainers || []).map((r, i) => {\n          const rHeight = (r.height.replace('%', '') / 100) * height;\n          const rWidth = (r.width.replace('%', '') / 100) * width;\n          const rLeft = (r.x / 100) * width;\n          const rTop = (r.y / 100) * height;\n          const answersParsed = answers.filter((a) => a.containerIndex === r.index);\n\n          return (\n            <ImageDropTarget\n              answers={answersParsed}\n              canDrag={canDrag}\n              containerStyle={{\n                height: rHeight,\n                width: rWidth,\n                left: rLeft,\n                top: rTop,\n              }}\n              key={r.id + i}\n              draggingElement={draggingElement}\n              index={r.index}\n              onDrop={(item) => onAnswerSelect(item, r.index)}\n              onDragAnswerBegin={onDragAnswerBegin}\n              onDragAnswerEnd={onDragAnswerEnd}\n              showDashedBorder={showDashedBorder}\n              responseAreaFill={responseAreaFill}\n              answerChoiceTransparency={answerChoiceTransparency}\n              responseContainerPadding={responseContainerPadding}\n              imageDropTargetPadding={imageDropTargetPadding}\n              maxResponsePerZone={maxResponsePerZone}\n              selectedResponse={selectedResponse}\n              onSelectClick={onSelectClick}\n              onPlacementClick={onPlacementClick}\n            />\n          );\n        })}\n      </BaseContainer>\n    );\n  }\n}\n\nImageContainer.propTypes = {\n  answers: PropTypes.array.isRequired,\n  canDrag: PropTypes.bool.isRequired,\n  draggingElement: PropTypes.shape({}).isRequired,\n  image: PropTypes.object.isRequired,\n  onAnswerSelect: PropTypes.func.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  responseContainers: PropTypes.array.isRequired,\n  showDashedBorder: PropTypes.bool,\n  answerChoiceTransparency: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n  maxResponsePerZone: PropTypes.number,\n  selectedResponse: PropTypes.object,\n  onSelectClick: PropTypes.func,\n  onPlacementClick: PropTypes.func,\n};\n\nexport default ImageContainer;\n"],"mappings":"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","ignoreList":[]}

package/lib/image-drop-target.js

@@ -46,8 +46,12 @@ const ImageDropTarget = ({
   answerChoiceTransparency,
   maxResponsePerZone,
   onDrop,
-  index
+  index,
+  selectedResponse,
+  onSelectClick,
+  onPlacementClick
 }) => {
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
   const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = (0, _react.useState)(false);
   const dropContainerRef = (0, _react.useRef)(null);
   const dropContainerResponsesHeightRef = (0, _react.useRef)(null);
@@ -75,8 +79,10 @@ const ImageDropTarget = ({
     };
   }, []);
   const isDraggingElement = !!draggingElement.id;
+  const hasSelection = !!selectedResponse;
+  const showsHoverEffect = isOver || hasSelection && isHovered && canDrag;
   const containerClasses = (0, _classnames.default)({
-    'is-over': isOver,
+    'is-over': showsHoverEffect,
     dashed: showDashedBorder && !isDraggingElement,
     active: isDraggingElement
   });
@@ -85,7 +91,29 @@ const ImageDropTarget = ({
     ...containerStyle,
     ...(responseAreaFill && !isDraggingElement && {
       backgroundColor: responseAreaFill
-    })
+    }),
+    cursor: hasSelection && canDrag ? 'pointer' : undefined
+  };
+  const handleContainerClick = () => {
+    if (!canDrag) return;
+    if (selectedResponse) {
+      onPlacementClick?.(index);
+    }
+
+    // Empty background clicked with nothing selected: nothing to place.
+  };
+
+  // Only a native Tab stop when there's nothing else in this container to carry
+  // tabbability — once it holds an answer, that answer's own tile (rendered by
+  // PossibleResponse, via dnd-kit's `useDraggable`) is already independently tabbable,
+  // and adding a second stop for the same visual container would add an extra stop to
+  // the existing Tab order (match-list's equivalent)
+  const isNativeTabStop = answers.length === 0 && canDrag;
+  const handleContainerKeyDown = e => {
+    if (e.code === 'Space' || e.code === 'Enter') {
+      e.preventDefault();
+      handleContainerClick();
+    }
   };
   return /*#__PURE__*/_react.default.createElement(ResponseContainer, {
     ref: ref => {
@@ -93,7 +121,13 @@ const ImageDropTarget = ({
       setNodeRef(ref);
     },
     className: containerClasses,
-    style: updatedContainerStyle
+    style: updatedContainerStyle,
+    role: isNativeTabStop ? 'button' : undefined,
+    tabIndex: isNativeTabStop ? 0 : -1,
+    onClick: handleContainerClick,
+    onKeyDown: isNativeTabStop ? handleContainerKeyDown : undefined,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
   }, answers.length ? /*#__PURE__*/_react.default.createElement(AnswersContainer, {
     ref: ref => {
       dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;
@@ -107,7 +141,10 @@ const ImageDropTarget = ({
     answerChoiceTransparency: answerChoiceTransparency,
     containerStyle: {
       padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px'
-    }
+    },
+    selectedResponse: selectedResponse,
+    onSelectClick: onSelectClick,
+    onPlacementClick: onPlacementClick
   }))) : null);
 };
 ImageDropTarget.propTypes = {
@@ -124,7 +161,10 @@ ImageDropTarget.propTypes = {
   answerChoiceTransparency: _propTypes.default.bool,
   responseContainerPadding: _propTypes.default.string,
   imageDropTargetPadding: _propTypes.default.string,
-  maxResponsePerZone: _propTypes.default.number
+  maxResponsePerZone: _propTypes.default.number,
+  selectedResponse: _propTypes.default.object,
+  onSelectClick: _propTypes.default.func,
+  onPlacementClick: _propTypes.default.func
 };
 var _default = exports.default = ImageDropTarget;
 //# sourceMappingURL=image-drop-target.js.map

package/lib/image-drop-target.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-drop-target.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","_styles","_renderUi","_classnames","_possibleResponse","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnswersContainer","styled","display","flexWrap","ResponseContainer","position","boxSizing","border","color","text","backgroundColor","ImageDropTarget","answers","canDrag","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","answerChoiceTransparency","maxResponsePerZone","onDrop","index","shouldHaveSmallPadding","setShouldHaveSmallPadding","useState","dropContainerRef","useRef","dropContainerResponsesHeightRef","setNodeRef","isOver","useDroppable","id","data","containerIndex","useEffect","container","current","handleTouchStart","preventDefault","addEventListener","passive","removeEventListener","isDraggingElement","containerClasses","cx","dashed","active","updatedContainerStyle","padding","createElement","ref","className","style","length","getBoundingClientRect","height","map","answer","key","onDragBegin","onDragEnd","propTypes","PropTypes","object","array","bool","isRequired","func","string","number","_default","exports"],"sources":["../src/image-drop-target.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\nimport cx from 'classnames';\n\nimport PossibleResponse from './possible-response';\n\nconst AnswersContainer = styled('div')(() => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n}));\n\nconst ResponseContainer = styled('div')(() => ({\n  position: 'absolute',\n  boxSizing: 'border-box',\n  '&.active': {\n    border: `2px solid ${color.text()}`,\n    backgroundColor: 'rgba(230, 242, 252, .8)',\n  },\n  '&.dashed': {\n    border: `2px dashed ${color.text()}`,\n  },\n  '&.is-over': {\n    border: '1px solid rgb(158, 158, 158)',\n    backgroundColor: 'rgb(224, 224, 224)',\n  },\n}));\n\nconst ImageDropTarget = ({\n  answers,\n  canDrag,\n  containerStyle,\n  draggingElement,\n  onDragAnswerBegin,\n  onDragAnswerEnd,\n  showDashedBorder,\n  responseAreaFill,\n  responseContainerPadding = '10px',\n  imageDropTargetPadding,\n  answerChoiceTransparency,\n  maxResponsePerZone,\n  onDrop,\n  index,\n}) => {\n  const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = useState(false);\n  const dropContainerRef = useRef(null);\n  const dropContainerResponsesHeightRef = useRef(null);\n\n  const { setNodeRef, isOver } = useDroppable({\n    id: `response-container-${index}`,\n    data: {\n      containerIndex: index,\n      onDrop,\n    },\n  });\n\n  useEffect(() => {\n    const container = dropContainerRef.current;\n\n    if (!container) return;\n\n    const handleTouchStart = (e) => {\n      e.preventDefault();\n    };\n\n    container.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n    return () => {\n      container.removeEventListener('touchstart', handleTouchStart);\n    };\n  }, []);\n\n  const isDraggingElement = !!draggingElement.id;\n\n  const containerClasses = cx({\n    'is-over': isOver,\n    dashed: showDashedBorder && !isDraggingElement,\n    active: isDraggingElement,\n  });\n\n  const updatedContainerStyle = {\n    padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\n    ...containerStyle,\n    ...(responseAreaFill && !isDraggingElement && { backgroundColor: responseAreaFill }),\n  };\n\n  return (\n    <ResponseContainer\n      ref={(ref) => {\n        dropContainerRef.current = ref;\n        setNodeRef(ref);\n      }}\n      className={containerClasses}\n      style={updatedContainerStyle}\n    >\n      {answers.length ? (\n        <AnswersContainer\n          ref={(ref) => {\n            dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;\n          }}\n        >\n          {answers.map((answer) => (\n            <PossibleResponse\n              key={answer.id}\n              data={answer}\n              canDrag={canDrag}\n              onDragBegin={() => onDragAnswerBegin(answer)}\n              onDragEnd={onDragAnswerEnd}\n              answerChoiceTransparency={answerChoiceTransparency}\n              containerStyle={{\n                padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px',\n              }}\n            />\n          ))}\n        </AnswersContainer>\n      ) : null}\n    </ResponseContainer>\n  );\n};\n\nImageDropTarget.propTypes = {\n  answer: PropTypes.object,\n  answers: PropTypes.array,\n  canDrag: PropTypes.bool.isRequired,\n  containerStyle: PropTypes.object.isRequired,\n  draggingElement: PropTypes.object.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  onDrop: PropTypes.func.isRequired,\n  showDashedBorder: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  answerChoiceTransparency: PropTypes.bool,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n  maxResponsePerZone: PropTypes.number,\n};\n\nexport default ImageDropTarget;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"image-drop-target.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","_styles","_renderUi","_classnames","_possibleResponse","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnswersContainer","styled","display","flexWrap","ResponseContainer","position","boxSizing","border","color","text","backgroundColor","ImageDropTarget","answers","canDrag","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","answerChoiceTransparency","maxResponsePerZone","onDrop","index","selectedResponse","onSelectClick","onPlacementClick","isHovered","setIsHovered","useState","shouldHaveSmallPadding","setShouldHaveSmallPadding","dropContainerRef","useRef","dropContainerResponsesHeightRef","setNodeRef","isOver","useDroppable","id","data","containerIndex","useEffect","container","current","handleTouchStart","preventDefault","addEventListener","passive","removeEventListener","isDraggingElement","hasSelection","showsHoverEffect","containerClasses","cx","dashed","active","updatedContainerStyle","padding","cursor","undefined","handleContainerClick","isNativeTabStop","length","handleContainerKeyDown","code","createElement","ref","className","style","role","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","getBoundingClientRect","height","map","answer","key","onDragBegin","onDragEnd","propTypes","PropTypes","object","array","bool","isRequired","func","string","number","_default","exports"],"sources":["../src/image-drop-target.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\nimport cx from 'classnames';\n\nimport PossibleResponse from './possible-response';\n\nconst AnswersContainer = styled('div')(() => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n}));\n\nconst ResponseContainer = styled('div')(() => ({\n  position: 'absolute',\n  boxSizing: 'border-box',\n  '&.active': {\n    border: `2px solid ${color.text()}`,\n    backgroundColor: 'rgba(230, 242, 252, .8)',\n  },\n  '&.dashed': {\n    border: `2px dashed ${color.text()}`,\n  },\n  '&.is-over': {\n    border: '1px solid rgb(158, 158, 158)',\n    backgroundColor: 'rgb(224, 224, 224)',\n  },\n}));\n\nconst ImageDropTarget = ({\n  answers,\n  canDrag,\n  containerStyle,\n  draggingElement,\n  onDragAnswerBegin,\n  onDragAnswerEnd,\n  showDashedBorder,\n  responseAreaFill,\n  responseContainerPadding = '10px',\n  imageDropTargetPadding,\n  answerChoiceTransparency,\n  maxResponsePerZone,\n  onDrop,\n  index,\n  selectedResponse,\n  onSelectClick,\n  onPlacementClick,\n}) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = useState(false);\n  const dropContainerRef = useRef(null);\n  const dropContainerResponsesHeightRef = useRef(null);\n\n  const { setNodeRef, isOver } = useDroppable({\n    id: `response-container-${index}`,\n    data: {\n      containerIndex: index,\n      onDrop,\n    },\n  });\n\n  useEffect(() => {\n    const container = dropContainerRef.current;\n\n    if (!container) return;\n\n    const handleTouchStart = (e) => {\n      e.preventDefault();\n    };\n\n    container.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n    return () => {\n      container.removeEventListener('touchstart', handleTouchStart);\n    };\n  }, []);\n\n  const isDraggingElement = !!draggingElement.id;\n  const hasSelection = !!selectedResponse;\n  const showsHoverEffect = isOver || (hasSelection && isHovered && canDrag);\n\n  const containerClasses = cx({\n    'is-over': showsHoverEffect,\n    dashed: showDashedBorder && !isDraggingElement,\n    active: isDraggingElement,\n  });\n\n  const updatedContainerStyle = {\n    padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\n    ...containerStyle,\n    ...(responseAreaFill && !isDraggingElement && { backgroundColor: responseAreaFill }),\n    cursor: hasSelection && canDrag ? 'pointer' : undefined,\n  };\n\n  const handleContainerClick = () => {\n    if (!canDrag) return;\n\n    if (selectedResponse) {\n      onPlacementClick?.(index);\n    }\n\n    // Empty background clicked with nothing selected: nothing to place.\n  };\n\n  // Only a native Tab stop when there's nothing else in this container to carry\n  // tabbability — once it holds an answer, that answer's own tile (rendered by\n  // PossibleResponse, via dnd-kit's `useDraggable`) is already independently tabbable,\n  // and adding a second stop for the same visual container would add an extra stop to\n  // the existing Tab order (match-list's equivalent)\n  const isNativeTabStop = answers.length === 0 && canDrag;\n\n  const handleContainerKeyDown = (e) => {\n    if (e.code === 'Space' || e.code === 'Enter') {\n      e.preventDefault();\n      handleContainerClick();\n    }\n  };\n\n  return (\n    <ResponseContainer\n      ref={(ref) => {\n        dropContainerRef.current = ref;\n        setNodeRef(ref);\n      }}\n      className={containerClasses}\n      style={updatedContainerStyle}\n      role={isNativeTabStop ? 'button' : undefined}\n      tabIndex={isNativeTabStop ? 0 : -1}\n      onClick={handleContainerClick}\n      onKeyDown={isNativeTabStop ? handleContainerKeyDown : undefined}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {answers.length ? (\n        <AnswersContainer\n          ref={(ref) => {\n            dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;\n          }}\n        >\n          {answers.map((answer) => (\n            <PossibleResponse\n              key={answer.id}\n              data={answer}\n              canDrag={canDrag}\n              onDragBegin={() => onDragAnswerBegin(answer)}\n              onDragEnd={onDragAnswerEnd}\n              answerChoiceTransparency={answerChoiceTransparency}\n              containerStyle={{\n                padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px',\n              }}\n              selectedResponse={selectedResponse}\n              onSelectClick={onSelectClick}\n              onPlacementClick={onPlacementClick}\n            />\n          ))}\n        </AnswersContainer>\n      ) : null}\n    </ResponseContainer>\n  );\n};\n\nImageDropTarget.propTypes = {\n  answer: PropTypes.object,\n  answers: PropTypes.array,\n  canDrag: PropTypes.bool.isRequired,\n  containerStyle: PropTypes.object.isRequired,\n  draggingElement: PropTypes.object.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  onDrop: PropTypes.func.isRequired,\n  showDashedBorder: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  answerChoiceTransparency: PropTypes.bool,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n  maxResponsePerZone: PropTypes.number,\n  selectedResponse: PropTypes.object,\n  onSelectClick: PropTypes.func,\n  onPlacementClick: PropTypes.func,\n};\n\nexport default ImageDropTarget;\n"],"mappings":"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","ignoreList":[]}

package/lib/keyboard-coordinates.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.closestDroppableKeyboardCoordinates = void 0;
+var _core = require("@dnd-kit/core");
+/**
+ * Custom keyboard coordinate getter for image-cloze-association's Tab-based placement.
+ *
+ * Tab/Shift+Tab cycle the dragged answer directly onto the next/previous enabled
+ * droppable — a response container (`response-container-{index}`) or the choices pool
+ * (`ica-board`) — sorted by on-screen position (top-to-bottom, then left-to-right),
+ * since response containers are absolutely positioned over an image rather than laid
+ * out as a simple list.
+ *
+ * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter`, leaving
+ * the existing free-form arrow-key dragging behavior completely unchanged.
+ */
+const closestDroppableKeyboardCoordinates = (event, {
+  context,
+  currentCoordinates
+}) => {
+  const {
+    code
+  } = event;
+  const isTab = code === 'Tab';
+  const isArrow = code === _core.KeyboardCode.Down || code === _core.KeyboardCode.Up || code === _core.KeyboardCode.Left || code === _core.KeyboardCode.Right;
+  if (!isTab && !isArrow) {
+    return undefined;
+  }
+  if (isArrow) {
+    return (0, _core.defaultKeyboardCoordinateGetter)(event, {
+      context,
+      currentCoordinates
+    });
+  }
+  event.preventDefault();
+  const {
+    droppableRects,
+    droppableContainers,
+    collisionRect
+  } = context;
+  if (!droppableRects || droppableRects.size === 0) {
+    return currentCoordinates;
+  }
+  const targets = [];
+  for (const [id, container] of droppableContainers) {
+    if (container?.disabled) continue;
+    const rect = droppableRects.get(id);
+    if (!rect) continue;
+    const center = {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2
+    };
+    // Land the dragged item's own top-left corner at the target's center-left point,
+    // rather than at the target's own top-left corner (avoids overshooting into a
+    // neighboring droppable when the target is much wider than the dragged item).
+    const dropPosition = {
+      x: rect.left,
+      y: rect.top + rect.height / 2
+    };
+    targets.push({
+      id,
+      rect,
+      dropPosition,
+      center
+    });
+  }
+  if (targets.length === 0) {
+    return currentCoordinates;
+  }
+  const reverse = event.shiftKey;
+  targets.sort((a, b) => {
+    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;
+    return a.center.x - b.center.x;
+  });
+
+  // Find the current target: whichever target's rect actually contains the dragged
+  // item's own center. This holds regardless of how the dragged item's size compares
+  // to the target's — a compact answer tile landed (per `dropPosition` above) at a much
+  // wider container's left edge is still contained within that container's rect.
+  // Comparing distances between reconstructed centers (as an earlier, buggy version of
+  // this same logic in match-list did) breaks down for exactly that shape: a
+  // reconstructed center can end up closer to a completely different droppable than to
+  // the one the item is actually sitting on, so the *next* press re-matches the wrong
+  // target and looks like it does nothing.
+  const draggedCenter = collisionRect ? {
+    x: collisionRect.left + collisionRect.width / 2,
+    y: collisionRect.top + collisionRect.height / 2
+  } : currentCoordinates;
+  let currentIndex = targets.findIndex(t => draggedCenter.x >= t.rect.left && draggedCenter.x <= t.rect.right && draggedCenter.y >= t.rect.top && draggedCenter.y <= t.rect.bottom);
+
+  // Fall back to nearest-by-dropPosition if the dragged item's center isn't strictly
+  // inside any target (e.g. mid-flight after a free arrow-key move).
+  if (currentIndex === -1) {
+    let minDist = Infinity;
+    for (let i = 0; i < targets.length; i++) {
+      const dist = distance(currentCoordinates, targets[i].dropPosition);
+      if (dist < minDist) {
+        minDist = dist;
+        currentIndex = i;
+      }
+    }
+  }
+  const nextIndex = reverse ? (currentIndex - 1 + targets.length) % targets.length : (currentIndex + 1) % targets.length;
+  return targets[nextIndex].dropPosition;
+};
+exports.closestDroppableKeyboardCoordinates = closestDroppableKeyboardCoordinates;
+const distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
+//# sourceMappingURL=keyboard-coordinates.js.map

package/lib/keyboard-coordinates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-coordinates.js","names":["_core","require","closestDroppableKeyboardCoordinates","event","context","currentCoordinates","code","isTab","isArrow","KeyboardCode","Down","Up","Left","Right","undefined","defaultKeyboardCoordinateGetter","preventDefault","droppableRects","droppableContainers","collisionRect","size","targets","id","container","disabled","rect","get","center","x","left","width","y","top","height","dropPosition","push","length","reverse","shiftKey","sort","a","b","Math","abs","draggedCenter","currentIndex","findIndex","t","right","bottom","minDist","Infinity","i","dist","distance","nextIndex","exports","sqrt"],"sources":["../src/keyboard-coordinates.js"],"sourcesContent":["import { defaultKeyboardCoordinateGetter, KeyboardCode } from '@dnd-kit/core';\n\n/**\n * Custom keyboard coordinate getter for image-cloze-association's Tab-based placement.\n *\n * Tab/Shift+Tab cycle the dragged answer directly onto the next/previous enabled\n * droppable — a response container (`response-container-{index}`) or the choices pool\n * (`ica-board`) — sorted by on-screen position (top-to-bottom, then left-to-right),\n * since response containers are absolutely positioned over an image rather than laid\n * out as a simple list.\n *\n * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter`, leaving\n * the existing free-form arrow-key dragging behavior completely unchanged.\n */\nexport const closestDroppableKeyboardCoordinates = (event, { context, currentCoordinates }) => {\n  const { code } = event;\n  const isTab = code === 'Tab';\n  const isArrow =\n    code === KeyboardCode.Down || code === KeyboardCode.Up || code === KeyboardCode.Left || code === KeyboardCode.Right;\n\n  if (!isTab && !isArrow) {\n    return undefined;\n  }\n\n  if (isArrow) {\n    return defaultKeyboardCoordinateGetter(event, { context, currentCoordinates });\n  }\n\n  event.preventDefault();\n\n  const { droppableRects, droppableContainers, collisionRect } = context;\n\n  if (!droppableRects || droppableRects.size === 0) {\n    return currentCoordinates;\n  }\n\n  const targets = [];\n\n  for (const [id, container] of droppableContainers) {\n    if (container?.disabled) continue;\n\n    const rect = droppableRects.get(id);\n\n    if (!rect) continue;\n\n    const center = {\n      x: rect.left + rect.width / 2,\n      y: rect.top + rect.height / 2,\n    };\n    // Land the dragged item's own top-left corner at the target's center-left point,\n    // rather than at the target's own top-left corner (avoids overshooting into a\n    // neighboring droppable when the target is much wider than the dragged item).\n    const dropPosition = {\n      x: rect.left,\n      y: rect.top + rect.height / 2,\n    };\n\n    targets.push({ id, rect, dropPosition, center });\n  }\n\n  if (targets.length === 0) {\n    return currentCoordinates;\n  }\n\n  const reverse = event.shiftKey;\n\n  targets.sort((a, b) => {\n    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;\n    return a.center.x - b.center.x;\n  });\n\n  // Find the current target: whichever target's rect actually contains the dragged\n  // item's own center. This holds regardless of how the dragged item's size compares\n  // to the target's — a compact answer tile landed (per `dropPosition` above) at a much\n  // wider container's left edge is still contained within that container's rect.\n  // Comparing distances between reconstructed centers (as an earlier, buggy version of\n  // this same logic in match-list did) breaks down for exactly that shape: a\n  // reconstructed center can end up closer to a completely different droppable than to\n  // the one the item is actually sitting on, so the *next* press re-matches the wrong\n  // target and looks like it does nothing.\n  const draggedCenter = collisionRect\n    ? { x: collisionRect.left + collisionRect.width / 2, y: collisionRect.top + collisionRect.height / 2 }\n    : currentCoordinates;\n\n  let currentIndex = targets.findIndex(\n    (t) =>\n      draggedCenter.x >= t.rect.left &&\n      draggedCenter.x <= t.rect.right &&\n      draggedCenter.y >= t.rect.top &&\n      draggedCenter.y <= t.rect.bottom,\n  );\n\n  // Fall back to nearest-by-dropPosition if the dragged item's center isn't strictly\n  // inside any target (e.g. mid-flight after a free arrow-key move).\n  if (currentIndex === -1) {\n    let minDist = Infinity;\n\n    for (let i = 0; i < targets.length; i++) {\n      const dist = distance(currentCoordinates, targets[i].dropPosition);\n\n      if (dist < minDist) {\n        minDist = dist;\n        currentIndex = i;\n      }\n    }\n  }\n\n  const nextIndex = reverse\n    ? (currentIndex - 1 + targets.length) % targets.length\n    : (currentIndex + 1) % targets.length;\n\n  return targets[nextIndex].dropPosition;\n};\n\nconst distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,mCAAmC,GAAGA,CAACC,KAAK,EAAE;EAAEC,OAAO;EAAEC;AAAmB,CAAC,KAAK;EAC7F,MAAM;IAAEC;EAAK,CAAC,GAAGH,KAAK;EACtB,MAAMI,KAAK,GAAGD,IAAI,KAAK,KAAK;EAC5B,MAAME,OAAO,GACXF,IAAI,KAAKG,kBAAY,CAACC,IAAI,IAAIJ,IAAI,KAAKG,kBAAY,CAACE,EAAE,IAAIL,IAAI,KAAKG,kBAAY,CAACG,IAAI,IAAIN,IAAI,KAAKG,kBAAY,CAACI,KAAK;EAErH,IAAI,CAACN,KAAK,IAAI,CAACC,OAAO,EAAE;IACtB,OAAOM,SAAS;EAClB;EAEA,IAAIN,OAAO,EAAE;IACX,OAAO,IAAAO,qCAA+B,EAACZ,KAAK,EAAE;MAAEC,OAAO;MAAEC;IAAmB,CAAC,CAAC;EAChF;EAEAF,KAAK,CAACa,cAAc,CAAC,CAAC;EAEtB,MAAM;IAAEC,cAAc;IAAEC,mBAAmB;IAAEC;EAAc,CAAC,GAAGf,OAAO;EAEtE,IAAI,CAACa,cAAc,IAAIA,cAAc,CAACG,IAAI,KAAK,CAAC,EAAE;IAChD,OAAOf,kBAAkB;EAC3B;EAEA,MAAMgB,OAAO,GAAG,EAAE;EAElB,KAAK,MAAM,CAACC,EAAE,EAAEC,SAAS,CAAC,IAAIL,mBAAmB,EAAE;IACjD,IAAIK,SAAS,EAAEC,QAAQ,EAAE;IAEzB,MAAMC,IAAI,GAAGR,cAAc,CAACS,GAAG,CAACJ,EAAE,CAAC;IAEnC,IAAI,CAACG,IAAI,EAAE;IAEX,MAAME,MAAM,GAAG;MACbC,CAAC,EAAEH,IAAI,CAACI,IAAI,GAAGJ,IAAI,CAACK,KAAK,GAAG,CAAC;MAC7BC,CAAC,EAAEN,IAAI,CAACO,GAAG,GAAGP,IAAI,CAACQ,MAAM,GAAG;IAC9B,CAAC;IACD;IACA;IACA;IACA,MAAMC,YAAY,GAAG;MACnBN,CAAC,EAAEH,IAAI,CAACI,IAAI;MACZE,CAAC,EAAEN,IAAI,CAACO,GAAG,GAAGP,IAAI,CAACQ,MAAM,GAAG;IAC9B,CAAC;IAEDZ,OAAO,CAACc,IAAI,CAAC;MAAEb,EAAE;MAAEG,IAAI;MAAES,YAAY;MAAEP;IAAO,CAAC,CAAC;EAClD;EAEA,IAAIN,OAAO,CAACe,MAAM,KAAK,CAAC,EAAE;IACxB,OAAO/B,kBAAkB;EAC3B;EAEA,MAAMgC,OAAO,GAAGlC,KAAK,CAACmC,QAAQ;EAE9BjB,OAAO,CAACkB,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAK;IACrB,IAAIC,IAAI,CAACC,GAAG,CAACH,CAAC,CAACb,MAAM,CAACI,CAAC,GAAGU,CAAC,CAACd,MAAM,CAACI,CAAC,CAAC,GAAG,EAAE,EAAE,OAAOS,CAAC,CAACb,MAAM,CAACI,CAAC,GAAGU,CAAC,CAACd,MAAM,CAACI,CAAC;IAC1E,OAAOS,CAAC,CAACb,MAAM,CAACC,CAAC,GAAGa,CAAC,CAACd,MAAM,CAACC,CAAC;EAChC,CAAC,CAAC;;EAEF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMgB,aAAa,GAAGzB,aAAa,GAC/B;IAAES,CAAC,EAAET,aAAa,CAACU,IAAI,GAAGV,aAAa,CAACW,KAAK,GAAG,CAAC;IAAEC,CAAC,EAAEZ,aAAa,CAACa,GAAG,GAAGb,aAAa,CAACc,MAAM,GAAG;EAAE,CAAC,GACpG5B,kBAAkB;EAEtB,IAAIwC,YAAY,GAAGxB,OAAO,CAACyB,SAAS,CACjCC,CAAC,IACAH,aAAa,CAAChB,CAAC,IAAImB,CAAC,CAACtB,IAAI,CAACI,IAAI,IAC9Be,aAAa,CAAChB,CAAC,IAAImB,CAAC,CAACtB,IAAI,CAACuB,KAAK,IAC/BJ,aAAa,CAACb,CAAC,IAAIgB,CAAC,CAACtB,IAAI,CAACO,GAAG,IAC7BY,aAAa,CAACb,CAAC,IAAIgB,CAAC,CAACtB,IAAI,CAACwB,MAC9B,CAAC;;EAED;EACA;EACA,IAAIJ,YAAY,KAAK,CAAC,CAAC,EAAE;IACvB,IAAIK,OAAO,GAAGC,QAAQ;IAEtB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG/B,OAAO,CAACe,MAAM,EAAEgB,CAAC,EAAE,EAAE;MACvC,MAAMC,IAAI,GAAGC,QAAQ,CAACjD,kBAAkB,EAAEgB,OAAO,CAAC+B,CAAC,CAAC,CAAClB,YAAY,CAAC;MAElE,IAAImB,IAAI,GAAGH,OAAO,EAAE;QAClBA,OAAO,GAAGG,IAAI;QACdR,YAAY,GAAGO,CAAC;MAClB;IACF;EACF;EAEA,MAAMG,SAAS,GAAGlB,OAAO,GACrB,CAACQ,YAAY,GAAG,CAAC,GAAGxB,OAAO,CAACe,MAAM,IAAIf,OAAO,CAACe,MAAM,GACpD,CAACS,YAAY,GAAG,CAAC,IAAIxB,OAAO,CAACe,MAAM;EAEvC,OAAOf,OAAO,CAACkC,SAAS,CAAC,CAACrB,YAAY;AACxC,CAAC;AAACsB,OAAA,CAAAtD,mCAAA,GAAAA,mCAAA;AAEF,MAAMoD,QAAQ,GAAGA,CAACd,CAAC,EAAEC,CAAC,KAAKC,IAAI,CAACe,IAAI,CAAC,CAACjB,CAAC,CAACZ,CAAC,GAAGa,CAAC,CAACb,CAAC,KAAK,CAAC,GAAG,CAACY,CAAC,CAACT,CAAC,GAAGU,CAAC,CAACV,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}

package/lib/possible-response.js

@@ -46,6 +46,9 @@ const BaseContainer = (0, _styles.styled)('div')(() => ({
   },
   '&.baseIncorrect': {
     border: `2px solid ${_renderUi.color.incorrect()} !important`
+  },
+  '&.selected': {
+    opacity: 0.7
   }
 }));
 const StyledSpan = (0, _styles.styled)(_staticHtmlSpan.default)(() => ({
@@ -61,7 +64,10 @@ const PossibleResponse = ({
   data,
   onDragBegin,
   answerChoiceTransparency,
-  isOverlay
+  isOverlay,
+  selectedResponse,
+  onSelectClick,
+  onPlacementClick
 }) => {
   const rootRef = (0, _react.useRef)(null);
   const longPressTimer = (0, _react.useRef)(null);
@@ -79,6 +85,25 @@ const PossibleResponse = ({
     },
     disabled: !canDrag
   });
+  const isSelected = !!selectedResponse && selectedResponse.id === data.id && selectedResponse.containerIndex === data.containerIndex;
+  const handleClick = e => {
+    if (!canDrag) return;
+    e.stopPropagation();
+    const isPlaced = data.containerIndex !== undefined;
+    if (isSelected) {
+      // Clicking the already-selected tile again deselects it.
+      onSelectClick?.(data);
+    } else if (selectedResponse && isPlaced) {
+      // Something else is selected, and this tile is already inside a container:
+      // place the selection into that same container (a swap/insert, handled by the
+      // existing handleOnAnswerSelect logic).
+      onPlacementClick?.(data.containerIndex);
+    } else {
+      // Nothing selected yet, or this is a pool item (pool items are never placement
+      // targets — the pool itself, in possible-responses.jsx, is): select this tile.
+      onSelectClick?.(data);
+    }
+  };
   const handleTouchEnd = () => {
     clearTimeout(longPressTimer.current);
   };
@@ -124,7 +149,8 @@ const PossibleResponse = ({
   const containerClassNames = (0, _classnames.default)({
     answerChoiceTransparency: answerChoiceTransparency && !isDragging,
     [correctnessClass]: !!correctnessClass,
-    textAnswerChoiceStyle: !containsImage && !isOverlay
+    textAnswerChoiceStyle: !containsImage && !isOverlay,
+    selected: isSelected && !isDragging
   });
   const promptClassNames = (0, _classnames.default)({
     hiddenSpan: data.hidden
@@ -135,7 +161,8 @@ const PossibleResponse = ({
     ref: ref => {
       rootRef.current = ref;
       setNodeRef(ref);
-    }
+    },
+    onClick: handleClick
   }, listeners, attributes), /*#__PURE__*/_react.default.createElement(StyledSpan, {
     html: data.value,
     className: promptClassNames
@@ -150,12 +177,16 @@ PossibleResponse.propTypes = {
   data: _propTypes.default.object.isRequired,
   onDragBegin: _propTypes.default.func.isRequired,
   answerChoiceTransparency: _propTypes.default.bool,
-  isOverlay: _propTypes.default.bool
+  isOverlay: _propTypes.default.bool,
+  selectedResponse: _propTypes.default.object,
+  onSelectClick: _propTypes.default.func,
+  onPlacementClick: _propTypes.default.func
 };
 PossibleResponse.defaultProps = {
   containerStyle: {},
   answerChoiceTransparency: false,
-  isOverlay: false
+  isOverlay: false,
+  selectedResponse: null
 };
 var _default = exports.default = PossibleResponse;
 //# sourceMappingURL=possible-response.js.map

package/lib/possible-response.js.map

@@ -1 +1 @@
-{"version":3,"file":"possible-response.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_styles","_core","_renderUi","_evaluationIcon","_staticHtmlSpan","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseContainer","styled","position","backgroundColor","color","white","border","borderDark","display","alignItems","justifyContent","minHeight","width","pointerEvents","padding","margin","transparent","correct","incorrect","StyledSpan","StaticHTMLSpan","cursor","background","visibility","PossibleResponse","canDrag","containerStyle","data","onDragBegin","answerChoiceTransparency","isOverlay","rootRef","useRef","longPressTimer","setNodeRef","attributes","listeners","isDragging","useDraggable","id","value","containerIndex","disabled","handleTouchEnd","clearTimeout","current","handleTouchMove","handleTouchStart","preventDefault","setTimeout","useEffect","node","addEventListener","passive","removeEventListener","isCorrect","evaluationStyle","fontSize","bottom","right","correctnessClass","undefined","imgRegex","containsImage","test","containerClassNames","classNames","textAnswerChoiceStyle","promptClassNames","hiddenSpan","hidden","createElement","_extends2","className","style","ref","html","propTypes","PropTypes","bool","isRequired","object","func","defaultProps","_default","exports"],"sources":["../src/possible-response.jsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { styled } from '@mui/material/styles';\nimport { useDraggable } from '@dnd-kit/core';\nimport { color } from '@pie-lib/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\nimport StaticHTMLSpan from './static-html-span';\n\nconst BaseContainer = styled('div')(() => ({\n  position: 'relative',\n  backgroundColor: color.white(),\n  border: `1px solid ${color.borderDark()}`,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: '28px',\n  width: 'fit-content',\n  '& span img': {\n    // Added for touch devices, for image content.\n    // This will prevent the context menu from appearing and not allowing other interactions with the image.\n    // If interactions with the image in the token will be requested we should handle only the context Menu.\n    pointerEvents: 'none',\n  },\n  '&.textAnswerChoiceStyle': {\n    padding: '0 10px',\n    margin: '4px 6px !important',\n  },\n  '&.answerChoiceTransparency': {\n    border: 'none',\n    backgroundColor: `${color.transparent()}`,\n    '&:hover': {\n      border: `1px solid ${color.borderDark()}`,\n    },\n  },\n  '&.baseCorrect': {\n    border: `2px solid ${color.correct()} !important`,\n  },\n  '&.baseIncorrect': {\n    border: `2px solid ${color.incorrect()} !important`,\n  },\n}));\n\nconst StyledSpan = styled(StaticHTMLSpan)(() => ({\n  cursor: 'grab',\n  backgroundColor: color.background(),\n  '&.hiddenSpan': {\n    visibility: 'hidden',\n  },\n}));\n\nconst PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerChoiceTransparency, isOverlay }) => {\n  const rootRef = useRef(null);\n  const longPressTimer = useRef(null);\n\n  const { setNodeRef, attributes, listeners, isDragging } = useDraggable({\n    id: `possible-response-${data.id}`,\n    data: {\n      id: data.id,\n      value: data.value,\n      containerIndex: data.containerIndex,\n    },\n    disabled: !canDrag,\n  });\n\n  const handleTouchEnd = () => {\n    clearTimeout(longPressTimer.current);\n  };\n\n  const handleTouchMove = () => {\n    clearTimeout(longPressTimer.current);\n  };\n\n  const handleTouchStart = (e) => {\n    e.preventDefault();\n    longPressTimer.current = setTimeout(() => {\n      if (canDrag && rootRef.current) {\n        onDragBegin(data);\n      }\n    }, 500); // start drag after 500ms (touch and hold duration) for chromebooks and other touch devices\n  };\n\n  useEffect(() => {\n    const node = rootRef.current;\n\n    if (!node) return;\n\n    node.addEventListener('touchstart', handleTouchStart, { passive: false });\n    node.addEventListener('touchend', handleTouchEnd);\n    node.addEventListener('touchmove', handleTouchMove, { passive: false });\n\n    return () => {\n      node.removeEventListener('touchstart', handleTouchStart);\n      node.removeEventListener('touchend', handleTouchEnd);\n      node.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [canDrag, data]);\n\n  const { isCorrect } = data || {};\n  const evaluationStyle = {\n    fontSize: 14,\n    position: 'absolute',\n    bottom: '3px',\n    right: '3px',\n  };\n  const correctnessClass = isCorrect === true ? 'baseCorrect' : isCorrect === false ? 'baseIncorrect' : undefined;\n\n  const imgRegex = /<img[^>]+src=\"([^\">]+)\"/;\n  const containsImage = imgRegex.test(data.value);\n\n  const containerClassNames = classNames({\n    answerChoiceTransparency: answerChoiceTransparency && !isDragging,\n    [correctnessClass]: !!correctnessClass,\n    textAnswerChoiceStyle: !containsImage && !isOverlay,\n  });\n\n  const promptClassNames = classNames({ hiddenSpan: data.hidden });\n\n  return (\n    <BaseContainer\n      className={containerClassNames}\n      style={containerStyle}\n      ref={(ref) => {\n        rootRef.current = ref;\n        setNodeRef(ref);\n      }}\n      {...listeners}\n      {...attributes}\n    >\n      <StyledSpan html={data.value} className={promptClassNames} />\n      <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />\n    </BaseContainer>\n  );\n};\n\nPossibleResponse.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  containerStyle: PropTypes.object,\n  data: PropTypes.object.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  answerChoiceTransparency: PropTypes.bool,\n  isOverlay: PropTypes.bool,\n};\n\nPossibleResponse.defaultProps = {\n  containerStyle: {},\n  answerChoiceTransparency: false,\n  isOverlay: false,\n};\n\nexport default PossibleResponse;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"possible-response.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_styles","_core","_renderUi","_evaluationIcon","_staticHtmlSpan","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseContainer","styled","position","backgroundColor","color","white","border","borderDark","display","alignItems","justifyContent","minHeight","width","pointerEvents","padding","margin","transparent","correct","incorrect","opacity","StyledSpan","StaticHTMLSpan","cursor","background","visibility","PossibleResponse","canDrag","containerStyle","data","onDragBegin","answerChoiceTransparency","isOverlay","selectedResponse","onSelectClick","onPlacementClick","rootRef","useRef","longPressTimer","setNodeRef","attributes","listeners","isDragging","useDraggable","id","value","containerIndex","disabled","isSelected","handleClick","stopPropagation","isPlaced","undefined","handleTouchEnd","clearTimeout","current","handleTouchMove","handleTouchStart","preventDefault","setTimeout","useEffect","node","addEventListener","passive","removeEventListener","isCorrect","evaluationStyle","fontSize","bottom","right","correctnessClass","imgRegex","containsImage","test","containerClassNames","classNames","textAnswerChoiceStyle","selected","promptClassNames","hiddenSpan","hidden","createElement","_extends2","className","style","ref","onClick","html","propTypes","PropTypes","bool","isRequired","object","func","defaultProps","_default","exports"],"sources":["../src/possible-response.jsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { styled } from '@mui/material/styles';\nimport { useDraggable } from '@dnd-kit/core';\nimport { color } from '@pie-lib/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\nimport StaticHTMLSpan from './static-html-span';\n\nconst BaseContainer = styled('div')(() => ({\n  position: 'relative',\n  backgroundColor: color.white(),\n  border: `1px solid ${color.borderDark()}`,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: '28px',\n  width: 'fit-content',\n  '& span img': {\n    // Added for touch devices, for image content.\n    // This will prevent the context menu from appearing and not allowing other interactions with the image.\n    // If interactions with the image in the token will be requested we should handle only the context Menu.\n    pointerEvents: 'none',\n  },\n  '&.textAnswerChoiceStyle': {\n    padding: '0 10px',\n    margin: '4px 6px !important',\n  },\n  '&.answerChoiceTransparency': {\n    border: 'none',\n    backgroundColor: `${color.transparent()}`,\n    '&:hover': {\n      border: `1px solid ${color.borderDark()}`,\n    },\n  },\n  '&.baseCorrect': {\n    border: `2px solid ${color.correct()} !important`,\n  },\n  '&.baseIncorrect': {\n    border: `2px solid ${color.incorrect()} !important`,\n  },\n  '&.selected': {\n    opacity: 0.7,\n  },\n}));\n\nconst StyledSpan = styled(StaticHTMLSpan)(() => ({\n  cursor: 'grab',\n  backgroundColor: color.background(),\n  '&.hiddenSpan': {\n    visibility: 'hidden',\n  },\n}));\n\nconst PossibleResponse = ({\n  canDrag,\n  containerStyle,\n  data,\n  onDragBegin,\n  answerChoiceTransparency,\n  isOverlay,\n  selectedResponse,\n  onSelectClick,\n  onPlacementClick,\n}) => {\n  const rootRef = useRef(null);\n  const longPressTimer = useRef(null);\n\n  const { setNodeRef, attributes, listeners, isDragging } = useDraggable({\n    id: `possible-response-${data.id}`,\n    data: {\n      id: data.id,\n      value: data.value,\n      containerIndex: data.containerIndex,\n    },\n    disabled: !canDrag,\n  });\n\n  const isSelected =\n    !!selectedResponse && selectedResponse.id === data.id && selectedResponse.containerIndex === data.containerIndex;\n\n  const handleClick = (e) => {\n    if (!canDrag) return;\n\n    e.stopPropagation();\n\n    const isPlaced = data.containerIndex !== undefined;\n\n    if (isSelected) {\n      // Clicking the already-selected tile again deselects it.\n      onSelectClick?.(data);\n    } else if (selectedResponse && isPlaced) {\n      // Something else is selected, and this tile is already inside a container:\n      // place the selection into that same container (a swap/insert, handled by the\n      // existing handleOnAnswerSelect logic).\n      onPlacementClick?.(data.containerIndex);\n    } else {\n      // Nothing selected yet, or this is a pool item (pool items are never placement\n      // targets — the pool itself, in possible-responses.jsx, is): select this tile.\n      onSelectClick?.(data);\n    }\n  };\n\n  const handleTouchEnd = () => {\n    clearTimeout(longPressTimer.current);\n  };\n\n  const handleTouchMove = () => {\n    clearTimeout(longPressTimer.current);\n  };\n\n  const handleTouchStart = (e) => {\n    e.preventDefault();\n    longPressTimer.current = setTimeout(() => {\n      if (canDrag && rootRef.current) {\n        onDragBegin(data);\n      }\n    }, 500); // start drag after 500ms (touch and hold duration) for chromebooks and other touch devices\n  };\n\n  useEffect(() => {\n    const node = rootRef.current;\n\n    if (!node) return;\n\n    node.addEventListener('touchstart', handleTouchStart, { passive: false });\n    node.addEventListener('touchend', handleTouchEnd);\n    node.addEventListener('touchmove', handleTouchMove, { passive: false });\n\n    return () => {\n      node.removeEventListener('touchstart', handleTouchStart);\n      node.removeEventListener('touchend', handleTouchEnd);\n      node.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [canDrag, data]);\n\n  const { isCorrect } = data || {};\n  const evaluationStyle = {\n    fontSize: 14,\n    position: 'absolute',\n    bottom: '3px',\n    right: '3px',\n  };\n  const correctnessClass = isCorrect === true ? 'baseCorrect' : isCorrect === false ? 'baseIncorrect' : undefined;\n\n  const imgRegex = /<img[^>]+src=\"([^\">]+)\"/;\n  const containsImage = imgRegex.test(data.value);\n\n  const containerClassNames = classNames({\n    answerChoiceTransparency: answerChoiceTransparency && !isDragging,\n    [correctnessClass]: !!correctnessClass,\n    textAnswerChoiceStyle: !containsImage && !isOverlay,\n    selected: isSelected && !isDragging,\n  });\n\n  const promptClassNames = classNames({ hiddenSpan: data.hidden });\n\n  return (\n    <BaseContainer\n      className={containerClassNames}\n      style={containerStyle}\n      ref={(ref) => {\n        rootRef.current = ref;\n        setNodeRef(ref);\n      }}\n      onClick={handleClick}\n      {...listeners}\n      {...attributes}\n    >\n      <StyledSpan html={data.value} className={promptClassNames} />\n      <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />\n    </BaseContainer>\n  );\n};\n\nPossibleResponse.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  containerStyle: PropTypes.object,\n  data: PropTypes.object.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  answerChoiceTransparency: PropTypes.bool,\n  isOverlay: PropTypes.bool,\n  selectedResponse: PropTypes.object,\n  onSelectClick: PropTypes.func,\n  onPlacementClick: PropTypes.func,\n};\n\nPossibleResponse.defaultProps = {\n  containerStyle: {},\n  answerChoiceTransparency: false,\n  isOverlay: false,\n  selectedResponse: null,\n};\n\nexport default PossibleResponse;\n"],"mappings":"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","ignoreList":[]}