npm - @pie-element/placement-ordering - Versions diffs - 14.2.0 → 14.2.1 - Mend

@pie-element/placement-ordering 14.2.0 → 14.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.md +6 -0
package/configure/CHANGELOG.md +6 -0
package/configure/package.json +3 -3
package/lib/placement-ordering.js +97 -4
package/lib/placement-ordering.js.map +1 -1
package/lib/tile.js +89 -20
package/lib/tile.js.map +1 -1
package/lib/tiler.js +7 -1
package/lib/tiler.js.map +1 -1
package/package.json +2 -2

package/CHANGELOG.md CHANGED Viewed

@@ -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.
+## [14.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.2.0...@pie-element/placement-ordering@14.2.1) (2026-08-19)
+### Bug Fixes
+- bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
 # [14.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.8...@pie-element/placement-ordering@14.2.0) (2026-08-13)
 ### Bug Fixes

package/configure/CHANGELOG.md CHANGED Viewed

@@ -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.
+## [11.1.11](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.10...@pie-element/placement-ordering-configure@11.1.11) (2026-08-19)
+### Bug Fixes
+- bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
 ## [11.1.10](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.8...@pie-element/placement-ordering-configure@11.1.10) (2026-08-13)
 **Note:** Version bump only for package @pie-element/placement-ordering-configure

package/configure/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/placement-ordering-configure",
-  "version": "11.1.10",
+  "version": "11.1.11",
   "private": true,
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -11,9 +11,9 @@
     "@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.14",
+    "@pie-lib/config-ui": "13.0.15",
     "@pie-lib/drag": "4.1.0",
-    "@pie-lib/editable-html-tip-tap": "2.1.12",
+    "@pie-lib/editable-html-tip-tap": "2.1.13",
     "@pie-lib/render-ui": "6.1.3",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",

package/lib/placement-ordering.js CHANGED Viewed

@@ -24,6 +24,10 @@ var _tiler = require("./tiler");
 var _ordering = require("./ordering");
 var _utils = require("./utils");
 var _keyboardCoordinates = require("./keyboard-coordinates");
+// A click that lands right after a real drag gesture ends must be ignored by the
+// 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 getKeyboardDragOptions = includeTargets => includeTargets ? {
   keyboardCoordinateGetter: _keyboardCoordinates.closestDroppableKeyboardCoordinates,
   keyboardCodes: {
@@ -237,6 +241,12 @@ class PlacementOrdering extends _react.default.Component {
         active
       } = event;
       const ordering = this.createOrdering();
+      // A real drag (pointer or keyboard) just ended — whatever mirrored selection it
+      // set on start is now resolved, and any click landing immediately after this must
+      // not be misread as a fresh selection/placement
+      this.cancelSelection();
+      this.lastDragEndAt = Date.now();
       if (over && active) {
         const draggedItem = active.data.current;
         const droppedOnItem = over.data.current;
@@ -254,14 +264,91 @@ class PlacementOrdering extends _react.default.Component {
         }
       }
     });
+    (0, _defineProperty2.default)(this, "onDragStart", event => {
+      const {
+        active
+      } = event;
+      if (active?.data?.current) {
+        // A real drag (pointer or keyboard) is itself a selection — mirror it into the
+        // same selectedChoice state that click-to-select uses, so the two interaction
+        // models can be freely intermixed
+        this.selectChoice(active.data.current);
+      }
+    });
+    (0, _defineProperty2.default)(this, "onDragCancel", () => {
+      this.cancelSelection();
+      this.lastDragEndAt = Date.now();
+    });
+    (0, _defineProperty2.default)(this, "isSameChoice", (a, b) => !!a && !!b && a.type === b.type && a.id === b.id && a.index === b.index);
+    (0, _defineProperty2.default)(this, "selectChoice", data => {
+      this.setState({
+        selectedChoice: data
+      });
+    });
+    // Click-to-select semantics: selecting the currently-selected choice again clears
+    // the selection instead of re-selecting it.
+    (0, _defineProperty2.default)(this, "toggleChoiceSelection", data => {
+      this.setState(state => ({
+        selectedChoice: this.isSameChoice(state.selectedChoice, data) ? null : data
+      }));
+    });
+    (0, _defineProperty2.default)(this, "cancelSelection", () => {
+      this.setState({
+        selectedChoice: 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. Escape is already configured as
+    // this sensor's cancel key (see getKeyboardDragOptions), and dispatching it as a real
+    // DOM KeyboardEvent is how dnd-kit's own document-level listener is reached from
+    // outside its sensor. onDragCancel only resets local UI state, not the session, 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, "placeSelectedChoice", targetTileData => {
+      const {
+        selectedChoice
+      } = this.state;
+      if (!selectedChoice) {
+        return;
+      }
+      const ordering = this.createOrdering();
+      this.onDropChoice(targetTileData, selectedChoice, ordering);
+      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.toggleChoiceSelection(data);
+    });
+    (0, _defineProperty2.default)(this, "onPlacementClick", targetTileData => {
+      if (this.isClickSoonAfterDragEnd()) {
+        return;
+      }
+      this.placeSelectedChoice(targetTileData);
+    });
     this.instanceId = (0, _lodashEs.uniqueId)();
     const {
       value: _value,
       needsReset: _needsReset
     } = this.validateSession(props);
     this.state = {
-      showingCorrect: false
+      showingCorrect: false,
+      selectedChoice: null
     };
+    this.lastDragEndAt = 0;
     const {
       model: _model
     } = props || {};
@@ -394,9 +481,15 @@ class PlacementOrdering extends _react.default.Component {
       boxSizing: 'border-box',
       width: '100%'
     };
+    const clickPlacementProps = includeTargets ? {
+      selectedChoice: this.state.selectedChoice,
+      onChoiceClick: this.onChoiceClick,
+      onPlacementClick: this.onPlacementClick
+    } : {};
     return /*#__PURE__*/_react.default.createElement(_drag.DragProvider, (0, _extends2.default)({
-      onDragStart: () => {},
+      onDragStart: this.onDragStart,
       onDragEnd: this.onDragEnd,
+      onDragCancel: this.onDragCancel,
       collisionDetection: _core.rectIntersection,
       modifiers: [_modifiers.restrictToParentElement]
     }, getKeyboardDragOptions(includeTargets)), /*#__PURE__*/_react.default.createElement(PlacementOrderingContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.UiLayout, {
@@ -417,7 +510,7 @@ class PlacementOrdering extends _react.default.Component {
       toggled: showingCorrect,
       onToggle: this.toggleCorrect,
       language: language
-    }), /*#__PURE__*/_react.default.createElement(InteractiveRegion, null, /*#__PURE__*/_react.default.createElement(InteractiveRegionContent, null, /*#__PURE__*/_react.default.createElement(OrderingTiler, {
+    }), /*#__PURE__*/_react.default.createElement(InteractiveRegion, null, /*#__PURE__*/_react.default.createElement(InteractiveRegionContent, null, /*#__PURE__*/_react.default.createElement(OrderingTiler, (0, _extends2.default)({
       instanceId: this.instanceId,
       choiceLabel: config.choiceLabel,
       targetLabel: config.targetLabel,
@@ -428,7 +521,7 @@ class PlacementOrdering extends _react.default.Component {
       tileSize: config.tileSize,
       includeTargets: includeTargets,
       choiceLabelEnabled: model.config && model.config.choiceLabelEnabled
-    }))), displayNote && /*#__PURE__*/_react.default.createElement(StyledNote, {
+    }, clickPlacementProps)))), displayNote && /*#__PURE__*/_react.default.createElement(StyledNote, {
       dangerouslySetInnerHTML: {
         __html: note
       }

package/lib/placement-ordering.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"placement-ordering.js","names":["_react","_interopRequireDefault","require","_reactDom","_propTypes","_debug","_lodashEs","_styles","_core","_modifiers","_renderUi","_mathRendering","_translator","_correctAnswerToggle","_drag","_tiler","_ordering","_utils","_keyboardCoordinates","getKeyboardDragOptions","includeTargets","keyboardCoordinateGetter","closestDroppableKeyboardCoordinates","keyboardCodes","start","cancel","end","accessibility","screenReaderInstructions","draggable","translator","Translator","log","debug","PlacementOrderingContainer","styled","color","text","backgroundColor","background","display","flexDirection","alignItems","boxSizing","InteractiveRegion","alignSelf","maxWidth","overflowX","overflowY","InteractiveRegionContent","justifyContent","minWidth","StyledPrompt","theme","paddingBottom","spacing","StyledNote","StyledToggle","CorrectAnswerToggle","StyledCollapsible","Collapsible","marginBottom","OrderingTiler","props","tiler","Comp","ordering","onDropChoice","onRemoveChoice","compProps","default","createElement","_extends2","tiles","t","s","propTypes","PropTypes","func","any","PlacementOrdering","React","Component","constructor","_defineProperty2","showingCorrect","setState","model","session","areChoicesShuffled","config","choices","choicesIds","map","c","id","value","needsReset","sessionMissing","length","missingChoiceIds","difference","extraChoiceIds","isEqual","sessionIsMismatched","concat","Array","filter","cId","includes","console","warn","target","source","onSessionChange","from","find","type","index","to","update","reducer","sessionUpdate","Object","assign","response","state","orientation","buildState","correctResponse","outcome","allowSameChoiceInTargets","outcomes","event","over","active","createOrdering","draggedItem","data","current","droppedOnItem","instanceId","uniqueId","validateSession","env","mode","componentDidUpdate","domNode","ReactDOM","findDOMNode","renderMath","UNSAFE_componentWillReceiveProps","nextProps","nextModel","currentModel","nextChoices","newState","isLanguageChanged","language","isDefaultNote","note","lng","haveSameValuesButDifferentOrder","validatedSession","newSession","includeTargetsChanged","render","correctness","extraCSSRules","prompt","rationale","feedback","configs","showNote","disabled","teacherInstructions","showToggle","vertical","role","Tiler","VerticalTiler","HorizontalTiler","displayNote","showRationale","hasText","hasMedia","showTeacherInstructions","containerStyle","width","DragProvider","onDragStart","onDragEnd","collisionDetection","rectIntersection","modifiers","restrictToParentElement","UiLayout","style","labels","hidden","visible","className","PreviewPrompt","show","toggled","onToggle","toggleCorrect","choiceLabel","targetLabel","addGuide","showOrdering","tileSize","choiceLabelEnabled","dangerouslySetInnerHTML","__html","Feedback","exports","isRequired","object","oneOfType","array","_default"],"sources":["../src/placement-ordering.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport debug from 'debug';\nimport { difference, isEqual, uniqueId } from 'lodash-es';\nimport { styled } from '@mui/material/styles';\nimport { rectIntersection } from '@dnd-kit/core';\nimport { restrictToParentElement } from '@dnd-kit/modifiers';\n\nimport { Collapsible, color, Feedback, hasMedia, hasText, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport Translator from '@pie-lib/translator';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { DragProvider } from '@pie-lib/drag';\n\nimport { HorizontalTiler, VerticalTiler } from './tiler';\nimport { buildState, reducer } from './ordering';\nimport { haveSameValuesButDifferentOrder } from './utils';\nimport { closestDroppableKeyboardCoordinates } from './keyboard-coordinates';\n\nconst getKeyboardDragOptions = (includeTargets) =>\n includeTargets\n ? {\n keyboardCoordinateGetter: closestDroppableKeyboardCoordinates,\n keyboardCodes: {\n start: ['Space', 'Enter'],\n cancel: ['Escape'],\n end: ['Space', 'Enter'],\n },\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 : {};\n\nconst { translator } = Translator;\n\nconst log = debug('pie-elements:placement-ordering');\n\nconst PlacementOrderingContainer = styled('div')({\n color: color.text(),\n backgroundColor: color.background(),\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n boxSizing: 'border-box',\n});\n\n// The interactive region - the choices and answers columns for a vertical item, or the choices and\n// answers rows for a horizontal one - scrolls horizontally when it does not fit the available width.\nconst InteractiveRegion = styled('div')({\n // the ancestors centre their children, which shrink-wraps this box to its content. without a\n // definite width it grows with the tiler and the overflow escapes outwards instead of scrolling.\n alignSelf: 'stretch',\n maxWidth: '100%',\n overflowX: 'auto',\n // tiles are dragged by transform, which counts towards scrollable overflow, so leaving this axis\n // scrollable would pop a vertical scrollbar mid-drag\n overflowY: 'hidden',\n});\n\n// keeps the tiler at its natural width, and centred while it still fits\nconst InteractiveRegionContent = styled('div')({\n display: 'flex',\n justifyContent: 'center',\n minWidth: 'min-content',\n});\n\nconst StyledPrompt = styled('div')(({ theme }) => ({\n paddingBottom: theme.spacing(1),\n}));\n\nconst StyledNote = styled('div')(({ theme }) => ({\n paddingBottom: theme.spacing(2),\n}));\n\nconst StyledToggle = styled(CorrectAnswerToggle)(({ theme }) => ({\n paddingBottom: theme.spacing(1),\n}));\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n marginBottom: theme.spacing(2),\n alignSelf: 'flex-start',\n}));\n\nconst OrderingTiler = (props) => {\n const { tiler: Comp, ordering, onDropChoice, onRemoveChoice, ...compProps } = props;\n\n return (\n <Comp\n {...compProps}\n tiles={ordering.tiles}\n onDropChoice={(t, s) => onDropChoice(t, s, ordering)}\n onRemoveChoice={(t) => onRemoveChoice(t, ordering)}\n />\n );\n};\n\nOrderingTiler.propTypes = {\n tiler: PropTypes.func,\n ordering: PropTypes.any,\n onDropChoice: PropTypes.func,\n onRemoveChoice: PropTypes.func,\n};\n\nexport class PlacementOrdering extends React.Component {\n static propTypes = {\n onSessionChange: PropTypes.func.isRequired,\n model: PropTypes.object.isRequired,\n session: PropTypes.oneOfType([PropTypes.array.isRequired, PropTypes.object.isRequired]),\n };\n\n constructor(props) {\n super(props);\n\n this.instanceId = uniqueId();\n\n const { value, needsReset } = this.validateSession(props);\n\n this.state = {\n showingCorrect: false,\n };\n\n const { model } = props \|\| {};\n const { env } = model \|\| {};\n const { mode } = env \|\| {};\n\n if (needsReset && mode === 'gather') {\n this.props.onSessionChange({\n ...props.session,\n value,\n });\n }\n }\n\n toggleCorrect = (showingCorrect) => this.setState({ showingCorrect });\n\n componentDidUpdate() {\n //eslint-disable-next-line\n const domNode = ReactDOM.findDOMNode(this);\n\n renderMath(domNode);\n }\n\n validateSession = ({ model, session }, areChoicesShuffled = false) => {\n const { config, choices } = model \|\| {};\n const { includeTargets } = config \|\| {};\n const choicesIds = choices.map((c) => c.id);\n\n let { value } = session \|\| {};\n let needsReset;\n\n if (!includeTargets) {\n // Use all choice IDs if choices were shuffled or session is missing/invalid\n const sessionMissing = !value \|\| !value.length;\n if (sessionMissing \|\| areChoicesShuffled) {\n // if there's no value on session in No Targets Mode, we need to set an initial session\n value = choicesIds;\n } else {\n // in No Targets Mode, all choice ids need to be used\n const missingChoiceIds = difference(choicesIds, value);\n // this is the case that handles extra choice ids in session\n const extraChoiceIds = difference(value, choicesIds);\n\n if (missingChoiceIds.length \|\| extraChoiceIds.length) {\n value = choicesIds;\n }\n }\n\n needsReset = !isEqual(session.value, value);\n } else {\n // in Targets Area selected, it's important to check the length of session\n const sessionIsMismatched = value && value.length !== choicesIds.length;\n if (sessionIsMismatched) {\n needsReset = true;\n\n // if choices were added, add value in session\n if (value.length < choicesIds.length) {\n value = value.concat(new Array(choicesIds.length - value.length));\n } else {\n // if choices were removed, make sure to remove from session as well\n value = value.filter((cId) => choicesIds.includes(cId));\n }\n }\n }\n\n if (needsReset) {\n // eslint-disable-next-line no-console\n console.warn('This session is not valid anymore. It will be reset.');\n }\n\n return { value, needsReset };\n };\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { model: nextModel = {} } = nextProps \|\| {};\n const { model: currentModel = {} } = this.props \|\| {};\n const { correctResponse, config, choices: nextChoices = [], env } = nextModel;\n const { includeTargets } = config \|\| {};\n\n const newState = {};\n\n const isLanguageChanged = currentModel.language && currentModel.language !== nextModel.language;\n const isDefaultNote =\n currentModel.note &&\n currentModel.note === translator.t('common:commonCorrectAnswerWithAlternates', { lng: currentModel.language });\n\n // check if the note is the default one for prev language and change to the default one for new language\n // this check is necessary in order to diferanciate between default and authour defined note\n // and only change between languages for default ones\n if (isLanguageChanged && isDefaultNote) {\n currentModel.note = translator.t('common:commonCorrectAnswerWithAlternates', { lng: nextModel.language });\n }\n\n if (!correctResponse) {\n newState.showingCorrect = false;\n }\n\n //PD-4924\n // show student choices same order as in model when teacher changes student choices order\n // for cases when student view and instructor view are on same page\n const areChoicesShuffled = haveSameValuesButDifferentOrder(nextChoices, currentModel.choices);\n\n const validatedSession = this.validateSession(nextProps, areChoicesShuffled);\n let { value, needsReset } = validatedSession;\n\n const newSession = {\n ...nextProps.session,\n value,\n };\n const includeTargetsChanged = currentModel.config?.includeTargets !== includeTargets;\n\n if (includeTargets && includeTargetsChanged) {\n needsReset = true;\n\n delete newSession.value;\n }\n\n this.setState(newState, () => {\n const { mode } = env \|\| {};\n\n if (needsReset && mode === 'gather') {\n this.props.onSessionChange(newSession);\n }\n });\n }\n\n onDropChoice = (target, source, ordering) => {\n const { onSessionChange, session } = this.props;\n const from = ordering.tiles.find((t) => t.id === source.id && t.type === source.type && t.index === source.index);\n const to = target;\n log('[onDropChoice] ', from, to);\n const update = reducer({ type: 'move', from, to }, ordering);\n const sessionUpdate = Object.assign({}, session, {\n value: update.response,\n });\n\n onSessionChange(sessionUpdate);\n };\n\n onRemoveChoice = (target, ordering) => {\n const { onSessionChange, session } = this.props;\n log('[onRemoveChoice]', target);\n const update = reducer({ type: 'remove', target }, ordering);\n const sessionUpdate = Object.assign({}, session, {\n value: update.response,\n });\n onSessionChange(sessionUpdate);\n };\n\n createOrdering = () => {\n const { model, session } = this.props;\n const { showingCorrect } = this.state;\n const config = model.config \|\| {\n orientation: 'vertical',\n includeTargets: true,\n };\n const { includeTargets } = config;\n\n return showingCorrect\n ? buildState(\n model.choices,\n model.correctResponse,\n model.correctResponse.map((id) => ({ id, outcome: 'correct' })),\n {\n includeTargets,\n allowSameChoiceInTargets: model.config.allowSameChoiceInTargets,\n },\n )\n : buildState(model.choices, session.value, model.outcomes, {\n includeTargets,\n allowSameChoiceInTargets: model.config.allowSameChoiceInTargets,\n });\n };\n\n onDragEnd = (event) => {\n const { over, active } = event;\n const ordering = this.createOrdering();\n\n if (over && active) {\n const draggedItem = active.data.current;\n const droppedOnItem = over.data.current;\n\n if (draggedItem && droppedOnItem && droppedOnItem.type === 'target') {\n this.onDropChoice(droppedOnItem, draggedItem, ordering);\n return;\n }\n\n if (draggedItem && droppedOnItem) {\n this.onDropChoice(droppedOnItem, draggedItem, ordering);\n }\n } else if (!over && active) {\n const draggedItem = active.data.current;\n if (draggedItem && draggedItem.type === 'target') {\n this.onRemoveChoice(draggedItem, ordering);\n }\n }\n };\n\n render() {\n const { model } = this.props;\n const {\n correctResponse,\n correctness,\n extraCSSRules,\n prompt,\n rationale,\n feedback,\n config: configs,\n note,\n showNote,\n env,\n disabled,\n teacherInstructions,\n language,\n } = model;\n const showToggle = correctResponse && correctResponse.length > 0;\n const { showingCorrect } = this.state;\n const config = configs \|\| {\n orientation: 'vertical',\n includeTargets: true,\n };\n const { orientation, includeTargets } = config;\n const vertical = orientation === 'vertical';\n const ordering = this.createOrdering();\n const { mode, role } = env \|\| {};\n\n const Tiler = vertical ? VerticalTiler : HorizontalTiler;\n const displayNote = (showingCorrect \|\| (mode === 'view' && role === 'instructor')) && showNote && note;\n const showRationale = rationale && (hasText(rationale) \|\| hasMedia(rationale));\n const showTeacherInstructions =\n teacherInstructions && (hasText(teacherInstructions) \|\| hasMedia(teacherInstructions));\n\n const containerStyle = {\n color: color.text(),\n backgroundColor: color.background(),\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n boxSizing: 'border-box',\n width: '100%',\n };\n\n return (\n <DragProvider\n onDragStart={() => { }}\n onDragEnd={this.onDragEnd}\n collisionDetection={rectIntersection}\n modifiers={[restrictToParentElement]}\n {...getKeyboardDragOptions(includeTargets)}\n >\n <PlacementOrderingContainer>\n <UiLayout extraCSSRules={extraCSSRules} style={containerStyle}>\n {showTeacherInstructions && (\n <StyledCollapsible\n labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n className=\"collapsible\"\n >\n <PreviewPrompt prompt={teacherInstructions} />\n </StyledCollapsible>\n )}\n\n <StyledPrompt>\n <PreviewPrompt prompt={prompt} />\n </StyledPrompt>\n\n <StyledToggle\n show={showToggle}\n toggled={showingCorrect}\n onToggle={this.toggleCorrect}\n language={language}\n />\n\n <InteractiveRegion>\n <InteractiveRegionContent>\n <OrderingTiler\n instanceId={this.instanceId}\n choiceLabel={config.choiceLabel}\n targetLabel={config.targetLabel}\n ordering={ordering}\n tiler={Tiler}\n disabled={disabled}\n addGuide={config.showOrdering}\n tileSize={config.tileSize}\n includeTargets={includeTargets}\n choiceLabelEnabled={model.config && model.config.choiceLabelEnabled}\n />\n </InteractiveRegionContent>\n </InteractiveRegion>\n\n {displayNote && <StyledNote dangerouslySetInnerHTML={{ __html: note }} />}\n\n {showRationale && (\n <StyledCollapsible\n labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}\n className=\"collapsible\"\n >\n <PreviewPrompt prompt={rationale} />\n </StyledCollapsible>\n )}\n\n {!showingCorrect && <Feedback correctness={correctness} feedback={feedback} />}\n </UiLayout>\n </PlacementOrderingContainer>\n </DragProvider>\n );\n }\n}\n\nexport default PlacementOrdering;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"placement-ordering.js","names":["_react","_interopRequireDefault","require","_reactDom","_propTypes","_debug","_lodashEs","_styles","_core","_modifiers","_renderUi","_mathRendering","_translator","_correctAnswerToggle","_drag","_tiler","_ordering","_utils","_keyboardCoordinates","CLICK_AFTER_DRAG_GUARD_MS","getKeyboardDragOptions","includeTargets","keyboardCoordinateGetter","closestDroppableKeyboardCoordinates","keyboardCodes","start","cancel","end","accessibility","screenReaderInstructions","draggable","translator","Translator","log","debug","PlacementOrderingContainer","styled","color","text","backgroundColor","background","display","flexDirection","alignItems","boxSizing","InteractiveRegion","alignSelf","maxWidth","overflowX","overflowY","InteractiveRegionContent","justifyContent","minWidth","StyledPrompt","theme","paddingBottom","spacing","StyledNote","StyledToggle","CorrectAnswerToggle","StyledCollapsible","Collapsible","marginBottom","OrderingTiler","props","tiler","Comp","ordering","onDropChoice","onRemoveChoice","compProps","default","createElement","_extends2","tiles","t","s","propTypes","PropTypes","func","any","PlacementOrdering","React","Component","constructor","_defineProperty2","showingCorrect","setState","model","session","areChoicesShuffled","config","choices","choicesIds","map","c","id","value","needsReset","sessionMissing","length","missingChoiceIds","difference","extraChoiceIds","isEqual","sessionIsMismatched","concat","Array","filter","cId","includes","console","warn","target","source","onSessionChange","from","find","type","index","to","update","reducer","sessionUpdate","Object","assign","response","state","orientation","buildState","correctResponse","outcome","allowSameChoiceInTargets","outcomes","event","over","active","createOrdering","cancelSelection","lastDragEndAt","Date","now","draggedItem","data","current","droppedOnItem","selectChoice","a","b","selectedChoice","isSameChoice","document","dispatchEvent","KeyboardEvent","code","bubbles","cancelable","targetTileData","endAnyLiveKeyboardDrag","isClickSoonAfterDragEnd","toggleChoiceSelection","placeSelectedChoice","instanceId","uniqueId","validateSession","env","mode","componentDidUpdate","domNode","ReactDOM","findDOMNode","renderMath","UNSAFE_componentWillReceiveProps","nextProps","nextModel","currentModel","nextChoices","newState","isLanguageChanged","language","isDefaultNote","note","lng","haveSameValuesButDifferentOrder","validatedSession","newSession","includeTargetsChanged","render","correctness","extraCSSRules","prompt","rationale","feedback","configs","showNote","disabled","teacherInstructions","showToggle","vertical","role","Tiler","VerticalTiler","HorizontalTiler","displayNote","showRationale","hasText","hasMedia","showTeacherInstructions","containerStyle","width","clickPlacementProps","onChoiceClick","onPlacementClick","DragProvider","onDragStart","onDragEnd","onDragCancel","collisionDetection","rectIntersection","modifiers","restrictToParentElement","UiLayout","style","labels","hidden","visible","className","PreviewPrompt","show","toggled","onToggle","toggleCorrect","choiceLabel","targetLabel","addGuide","showOrdering","tileSize","choiceLabelEnabled","dangerouslySetInnerHTML","__html","Feedback","exports","isRequired","object","oneOfType","array","_default"],"sources":["../src/placement-ordering.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport debug from 'debug';\nimport { difference, isEqual, uniqueId } from 'lodash-es';\nimport { styled } from '@mui/material/styles';\nimport { rectIntersection } from '@dnd-kit/core';\nimport { restrictToParentElement } from '@dnd-kit/modifiers';\n\nimport { Collapsible, color, Feedback, hasMedia, hasText, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport Translator from '@pie-lib/translator';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { DragProvider } from '@pie-lib/drag';\n\nimport { HorizontalTiler, VerticalTiler } from './tiler';\nimport { buildState, reducer } from './ordering';\nimport { haveSameValuesButDifferentOrder } from './utils';\nimport { closestDroppableKeyboardCoordinates } from './keyboard-coordinates';\n\n// A click that lands right after a real drag gesture ends must be ignored by the\n// 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 getKeyboardDragOptions = (includeTargets) =>\n includeTargets\n ? {\n keyboardCoordinateGetter: closestDroppableKeyboardCoordinates,\n keyboardCodes: {\n start: ['Space', 'Enter'],\n cancel: ['Escape'],\n end: ['Space', 'Enter'],\n },\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 : {};\n\nconst { translator } = Translator;\n\nconst log = debug('pie-elements:placement-ordering');\n\nconst PlacementOrderingContainer = styled('div')({\n color: color.text(),\n backgroundColor: color.background(),\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n boxSizing: 'border-box',\n});\n\n// The interactive region - the choices and answers columns for a vertical item, or the choices and\n// answers rows for a horizontal one - scrolls horizontally when it does not fit the available width.\nconst InteractiveRegion = styled('div')({\n // the ancestors centre their children, which shrink-wraps this box to its content. without a\n // definite width it grows with the tiler and the overflow escapes outwards instead of scrolling.\n alignSelf: 'stretch',\n maxWidth: '100%',\n overflowX: 'auto',\n // tiles are dragged by transform, which counts towards scrollable overflow, so leaving this axis\n // scrollable would pop a vertical scrollbar mid-drag\n overflowY: 'hidden',\n});\n\n// keeps the tiler at its natural width, and centred while it still fits\nconst InteractiveRegionContent = styled('div')({\n display: 'flex',\n justifyContent: 'center',\n minWidth: 'min-content',\n});\n\nconst StyledPrompt = styled('div')(({ theme }) => ({\n paddingBottom: theme.spacing(1),\n}));\n\nconst StyledNote = styled('div')(({ theme }) => ({\n paddingBottom: theme.spacing(2),\n}));\n\nconst StyledToggle = styled(CorrectAnswerToggle)(({ theme }) => ({\n paddingBottom: theme.spacing(1),\n}));\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n marginBottom: theme.spacing(2),\n alignSelf: 'flex-start',\n}));\n\nconst OrderingTiler = (props) => {\n const { tiler: Comp, ordering, onDropChoice, onRemoveChoice, ...compProps } = props;\n\n return (\n <Comp\n {...compProps}\n tiles={ordering.tiles}\n onDropChoice={(t, s) => onDropChoice(t, s, ordering)}\n onRemoveChoice={(t) => onRemoveChoice(t, ordering)}\n />\n );\n};\n\nOrderingTiler.propTypes = {\n tiler: PropTypes.func,\n ordering: PropTypes.any,\n onDropChoice: PropTypes.func,\n onRemoveChoice: PropTypes.func,\n};\n\nexport class PlacementOrdering extends React.Component {\n static propTypes = {\n onSessionChange: PropTypes.func.isRequired,\n model: PropTypes.object.isRequired,\n session: PropTypes.oneOfType([PropTypes.array.isRequired, PropTypes.object.isRequired]),\n };\n\n constructor(props) {\n super(props);\n\n this.instanceId = uniqueId();\n\n const { value, needsReset } = this.validateSession(props);\n\n this.state = {\n showingCorrect: false,\n selectedChoice: null,\n };\n this.lastDragEndAt = 0;\n\n const { model } = props \|\| {};\n const { env } = model \|\| {};\n const { mode } = env \|\| {};\n\n if (needsReset && mode === 'gather') {\n this.props.onSessionChange({\n ...props.session,\n value,\n });\n }\n }\n\n toggleCorrect = (showingCorrect) => this.setState({ showingCorrect });\n\n componentDidUpdate() {\n //eslint-disable-next-line\n const domNode = ReactDOM.findDOMNode(this);\n\n renderMath(domNode);\n }\n\n validateSession = ({ model, session }, areChoicesShuffled = false) => {\n const { config, choices } = model \|\| {};\n const { includeTargets } = config \|\| {};\n const choicesIds = choices.map((c) => c.id);\n\n let { value } = session \|\| {};\n let needsReset;\n\n if (!includeTargets) {\n // Use all choice IDs if choices were shuffled or session is missing/invalid\n const sessionMissing = !value \|\| !value.length;\n if (sessionMissing \|\| areChoicesShuffled) {\n // if there's no value on session in No Targets Mode, we need to set an initial session\n value = choicesIds;\n } else {\n // in No Targets Mode, all choice ids need to be used\n const missingChoiceIds = difference(choicesIds, value);\n // this is the case that handles extra choice ids in session\n const extraChoiceIds = difference(value, choicesIds);\n\n if (missingChoiceIds.length \|\| extraChoiceIds.length) {\n value = choicesIds;\n }\n }\n\n needsReset = !isEqual(session.value, value);\n } else {\n // in Targets Area selected, it's important to check the length of session\n const sessionIsMismatched = value && value.length !== choicesIds.length;\n if (sessionIsMismatched) {\n needsReset = true;\n\n // if choices were added, add value in session\n if (value.length < choicesIds.length) {\n value = value.concat(new Array(choicesIds.length - value.length));\n } else {\n // if choices were removed, make sure to remove from session as well\n value = value.filter((cId) => choicesIds.includes(cId));\n }\n }\n }\n\n if (needsReset) {\n // eslint-disable-next-line no-console\n console.warn('This session is not valid anymore. It will be reset.');\n }\n\n return { value, needsReset };\n };\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { model: nextModel = {} } = nextProps \|\| {};\n const { model: currentModel = {} } = this.props \|\| {};\n const { correctResponse, config, choices: nextChoices = [], env } = nextModel;\n const { includeTargets } = config \|\| {};\n\n const newState = {};\n\n const isLanguageChanged = currentModel.language && currentModel.language !== nextModel.language;\n const isDefaultNote =\n currentModel.note &&\n currentModel.note === translator.t('common:commonCorrectAnswerWithAlternates', { lng: currentModel.language });\n\n // check if the note is the default one for prev language and change to the default one for new language\n // this check is necessary in order to diferanciate between default and authour defined note\n // and only change between languages for default ones\n if (isLanguageChanged && isDefaultNote) {\n currentModel.note = translator.t('common:commonCorrectAnswerWithAlternates', { lng: nextModel.language });\n }\n\n if (!correctResponse) {\n newState.showingCorrect = false;\n }\n\n //PD-4924\n // show student choices same order as in model when teacher changes student choices order\n // for cases when student view and instructor view are on same page\n const areChoicesShuffled = haveSameValuesButDifferentOrder(nextChoices, currentModel.choices);\n\n const validatedSession = this.validateSession(nextProps, areChoicesShuffled);\n let { value, needsReset } = validatedSession;\n\n const newSession = {\n ...nextProps.session,\n value,\n };\n const includeTargetsChanged = currentModel.config?.includeTargets !== includeTargets;\n\n if (includeTargets && includeTargetsChanged) {\n needsReset = true;\n\n delete newSession.value;\n }\n\n this.setState(newState, () => {\n const { mode } = env \|\| {};\n\n if (needsReset && mode === 'gather') {\n this.props.onSessionChange(newSession);\n }\n });\n }\n\n onDropChoice = (target, source, ordering) => {\n const { onSessionChange, session } = this.props;\n const from = ordering.tiles.find((t) => t.id === source.id && t.type === source.type && t.index === source.index);\n const to = target;\n log('[onDropChoice] ', from, to);\n const update = reducer({ type: 'move', from, to }, ordering);\n const sessionUpdate = Object.assign({}, session, {\n value: update.response,\n });\n\n onSessionChange(sessionUpdate);\n };\n\n onRemoveChoice = (target, ordering) => {\n const { onSessionChange, session } = this.props;\n log('[onRemoveChoice]', target);\n const update = reducer({ type: 'remove', target }, ordering);\n const sessionUpdate = Object.assign({}, session, {\n value: update.response,\n });\n onSessionChange(sessionUpdate);\n };\n\n createOrdering = () => {\n const { model, session } = this.props;\n const { showingCorrect } = this.state;\n const config = model.config \|\| {\n orientation: 'vertical',\n includeTargets: true,\n };\n const { includeTargets } = config;\n\n return showingCorrect\n ? buildState(\n model.choices,\n model.correctResponse,\n model.correctResponse.map((id) => ({ id, outcome: 'correct' })),\n {\n includeTargets,\n allowSameChoiceInTargets: model.config.allowSameChoiceInTargets,\n },\n )\n : buildState(model.choices, session.value, model.outcomes, {\n includeTargets,\n allowSameChoiceInTargets: model.config.allowSameChoiceInTargets,\n });\n };\n\n onDragEnd = (event) => {\n const { over, active } = event;\n const ordering = this.createOrdering();\n\n // A real drag (pointer or keyboard) just ended — whatever mirrored selection it\n // set on start is now resolved, and any click landing immediately after this must\n // not be misread as a fresh selection/placement\n this.cancelSelection();\n this.lastDragEndAt = Date.now();\n\n if (over && active) {\n const draggedItem = active.data.current;\n const droppedOnItem = over.data.current;\n\n if (draggedItem && droppedOnItem && droppedOnItem.type === 'target') {\n this.onDropChoice(droppedOnItem, draggedItem, ordering);\n return;\n }\n\n if (draggedItem && droppedOnItem) {\n this.onDropChoice(droppedOnItem, draggedItem, ordering);\n }\n } else if (!over && active) {\n const draggedItem = active.data.current;\n if (draggedItem && draggedItem.type === 'target') {\n this.onRemoveChoice(draggedItem, ordering);\n }\n }\n };\n\n onDragStart = (event) => {\n const { active } = event;\n\n if (active?.data?.current) {\n // A real drag (pointer or keyboard) is itself a selection — mirror it into the\n // same selectedChoice state that click-to-select uses, so the two interaction\n // models can be freely intermixed\n this.selectChoice(active.data.current);\n }\n };\n\n onDragCancel = () => {\n this.cancelSelection();\n this.lastDragEndAt = Date.now();\n };\n\n isSameChoice = (a, b) => !!a && !!b && a.type === b.type && a.id === b.id && a.index === b.index;\n\n selectChoice = (data) => {\n this.setState({ selectedChoice: data });\n };\n\n // Click-to-select semantics: selecting the currently-selected choice again clears\n // the selection instead of re-selecting it.\n toggleChoiceSelection = (data) => {\n this.setState((state) => ({\n selectedChoice: this.isSameChoice(state.selectedChoice, data) ? null : data,\n }));\n };\n\n cancelSelection = () => {\n this.setState({ selectedChoice: 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. Escape is already configured as\n // this sensor's cancel key (see getKeyboardDragOptions), and dispatching it as a real\n // DOM KeyboardEvent is how dnd-kit's own document-level listener is reached from\n // outside its sensor. onDragCancel only resets local UI state, not the session, so\n // this is safe to call unconditionally, including when no drag is actually live\n // (dnd-kit simply has no listener attached in that case, and the dispatch is a\n // no-op).\n endAnyLiveKeyboardDrag = () => {\n document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape', bubbles: true, cancelable: true }));\n };\n\n placeSelectedChoice = (targetTileData) => {\n const { selectedChoice } = this.state;\n\n if (!selectedChoice) {\n return;\n }\n\n const ordering = this.createOrdering();\n\n this.onDropChoice(targetTileData, selectedChoice, ordering);\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.toggleChoiceSelection(data);\n };\n\n onPlacementClick = (targetTileData) => {\n if (this.isClickSoonAfterDragEnd()) {\n return;\n }\n\n this.placeSelectedChoice(targetTileData);\n };\n\n render() {\n const { model } = this.props;\n const {\n correctResponse,\n correctness,\n extraCSSRules,\n prompt,\n rationale,\n feedback,\n config: configs,\n note,\n showNote,\n env,\n disabled,\n teacherInstructions,\n language,\n } = model;\n const showToggle = correctResponse && correctResponse.length > 0;\n const { showingCorrect } = this.state;\n const config = configs \|\| {\n orientation: 'vertical',\n includeTargets: true,\n };\n const { orientation, includeTargets } = config;\n const vertical = orientation === 'vertical';\n const ordering = this.createOrdering();\n const { mode, role } = env \|\| {};\n\n const Tiler = vertical ? VerticalTiler : HorizontalTiler;\n const displayNote = (showingCorrect \|\| (mode === 'view' && role === 'instructor')) && showNote && note;\n const showRationale = rationale && (hasText(rationale) \|\| hasMedia(rationale));\n const showTeacherInstructions =\n teacherInstructions && (hasText(teacherInstructions) \|\| hasMedia(teacherInstructions));\n\n const containerStyle = {\n color: color.text(),\n backgroundColor: color.background(),\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n boxSizing: 'border-box',\n width: '100%',\n };\n\n const clickPlacementProps = includeTargets\n ? {\n selectedChoice: this.state.selectedChoice,\n onChoiceClick: this.onChoiceClick,\n onPlacementClick: this.onPlacementClick,\n }\n : {};\n\n return (\n <DragProvider\n onDragStart={this.onDragStart}\n onDragEnd={this.onDragEnd}\n onDragCancel={this.onDragCancel}\n collisionDetection={rectIntersection}\n modifiers={[restrictToParentElement]}\n {...getKeyboardDragOptions(includeTargets)}\n >\n <PlacementOrderingContainer>\n <UiLayout extraCSSRules={extraCSSRules} style={containerStyle}>\n {showTeacherInstructions && (\n <StyledCollapsible\n labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n className=\"collapsible\"\n >\n <PreviewPrompt prompt={teacherInstructions} />\n </StyledCollapsible>\n )}\n\n <StyledPrompt>\n <PreviewPrompt prompt={prompt} />\n </StyledPrompt>\n\n <StyledToggle\n show={showToggle}\n toggled={showingCorrect}\n onToggle={this.toggleCorrect}\n language={language}\n />\n\n <InteractiveRegion>\n <InteractiveRegionContent>\n <OrderingTiler\n instanceId={this.instanceId}\n choiceLabel={config.choiceLabel}\n targetLabel={config.targetLabel}\n ordering={ordering}\n tiler={Tiler}\n disabled={disabled}\n addGuide={config.showOrdering}\n tileSize={config.tileSize}\n includeTargets={includeTargets}\n choiceLabelEnabled={model.config && model.config.choiceLabelEnabled}\n {...clickPlacementProps}\n />\n </InteractiveRegionContent>\n </InteractiveRegion>\n\n {displayNote && <StyledNote dangerouslySetInnerHTML={{ __html: note }} />}\n\n {showRationale && (\n <StyledCollapsible\n labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}\n className=\"collapsible\"\n >\n <PreviewPrompt prompt={rationale} />\n </StyledCollapsible>\n )}\n\n {!showingCorrect && <Feedback correctness={correctness} feedback={feedback} />}\n </UiLayout>\n </PlacementOrderingContainer>\n </DragProvider>\n );\n }\n}\n\nexport default PlacementOrdering;\n"],"mappings":"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","ignoreList":[]}

package/lib/tile.js CHANGED Viewed

@@ -41,6 +41,7 @@ Holder.propTypes = {
 const StyledTileContent = (0, _styles.styled)('div')(({
   theme,
   isDragging,
+  isSelected,
   isOver,
   disabled,
   outcome,
@@ -73,7 +74,7 @@ const StyledTileContent = (0, _styles.styled)('div')(({
     borderStyle: 'dashed',
     transform: 'scale(1.05)'
   }),
-  ...((type === 'choice' || type === 'target') && isDragging && !disabled && {
+  ...((type === 'choice' || type === 'target') && (isDragging || isSelected) && !disabled && {
     opacity: 0.6,
     backgroundColor: _renderUi.color.secondaryLight(),
     transform: 'scale(1.05) rotate(2deg)',
@@ -104,6 +105,7 @@ const TileContent = props => {
   const {
     type,
     isDragging,
+    isSelected,
     empty,
     isOver,
     label,
@@ -122,6 +124,7 @@ const TileContent = props => {
     return /*#__PURE__*/_react.default.createElement(StyledTileContent, {
       type: type,
       isDragging: isDragging,
+      isSelected: isSelected,
       isOver: isOver,
       disabled: disabled,
       outcome: outcome,
@@ -144,7 +147,10 @@ const Tile = props => {
     guideIndex,
     instanceId,
     draggable,
-    tileIndex
+    tileIndex,
+    selectedChoice,
+    onChoiceClick,
+    onPlacementClick
   } = props;
   // Use type + tileIndex in the IDs to guarantee uniqueness in all modes.
@@ -153,6 +159,16 @@ const Tile = props => {
   // tileIndex (array position from tiler) ensures empty placeholders are also unique.
   const dragId = `tile-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;
   const dropId = `drop-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;
+  // Built once and reused for dnd-kit's own drag/drop data and for the click handlers
+  // below, so a click carries exactly the same shape a real drag would.
+  const tileData = {
+    id,
+    type,
+    instanceId,
+    value: label,
+    index
+  };
   const {
     attributes,
     listeners,
@@ -161,13 +177,7 @@ const Tile = props => {
     isDragging
   } = (0, _core.useDraggable)({
     id: dragId,
-    data: {
-      id,
-      type,
-      instanceId,
-      value: label,
-      index
-    },
+    data: tileData,
     disabled: !draggable || disabled
   });
   const {
@@ -175,17 +185,66 @@ const Tile = props => {
     isOver: dropIsOver
   } = (0, _core.useDroppable)({
     id: dropId,
-    data: {
-      id,
-      type,
-      instanceId,
-      value: label,
-      index
-    },
+    data: tileData,
     // Disable droppable on the tile currently being dragged so closestCenter
     // cannot pick it as the drop target (prevents self-collision and wrong matches).
     disabled: isDragging
   });
+  const isSelected = !!selectedChoice && selectedChoice.type === tileData.type && selectedChoice.id === tileData.id && selectedChoice.index === tileData.index;
+  // dnd-kit's own isOver (dropIsOver) only reflects real collision detection during an
+  // active drag, so it stays false while a placement area is merely a candidate for a
+  // pending click-based placement. Track hovering locally and fold it into the same
+  // isOver signal the styling below already uses, 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] = _react.default.useState(false);
+  const hasSelection = !!selectedChoice && !disabled;
+  const showsHoverEffect = dropIsOver || type === 'target' && hasSelection && isHovered;
+  // Click-to-select/click-to-place (both choices and targets are handled by this same
+  // component, differentiated by `type`):
+  //  - Choice tile: selects/switches/deselects it, UNLESS a placed answer (a "target")
+  //    is currently selected, in which case clicking any choice-row tile returns it to
+  //    the choices column/row (choice -> choice has no placement meaning in the
+  //    reducer, so there's no ambiguity there).
+  //  - Target tile: clicking the already-selected placed answer again deselects it;
+  //    clicking it while something else is selected places that selection here
+  //    (empty or occupied); clicking a filled target with nothing selected selects
+  //    that placed answer for moving, the same way Tab+Space/Enter does. An empty
+  //    target with nothing selected is a no-op.
+  const handleClick = () => {
+    if (disabled) return;
+    if (type === 'choice') {
+      if (selectedChoice?.type === 'target') {
+        onPlacementClick?.(tileData);
+      } else if (draggable) {
+        onChoiceClick?.(tileData);
+      }
+    } else if (type === 'target') {
+      if (isSelected) {
+        onChoiceClick?.(tileData);
+      } else if (selectedChoice) {
+        onPlacementClick?.(tileData);
+      } else if (draggable) {
+        onChoiceClick?.(tileData);
+      }
+    }
+  };
+  // dnd-kit's own draggable attributes (spread below) already make a draggable tile a
+  // native Tab stop with its own Space/Enter activation. An empty tile is never
+  // draggable, so without this it wouldn't be reachable by Tab at all — needed for
+  // "select a choice, then Tab to a placement area and press Space/Enter" to work.
+  // Gated to non-draggable tiles specifically so it never overrides dnd-kit's own
+  // keydown handling (see the conditional spread order below).
+  const isNativeTabStop = !(draggable && !disabled) && !disabled;
+  const handleKeyDown = e => {
+    if (e.code === 'Space' || e.code === 'Enter') {
+      e.preventDefault();
+      handleClick();
+    }
+  };
   const ref = _react.default.useRef(null);
   _react.default.useEffect(() => {
     const currentRef = ref.current;
@@ -217,13 +276,19 @@ const Tile = props => {
     margin: 0,
     textAlign: 'center',
     pointerEvents: 'auto',
-    cursor: disabled ? 'not-allowed' : isDragging ? 'grabbing' : 'grab',
+    cursor: disabled ? 'not-allowed' : type === 'target' && hasSelection ? 'pointer' : isDragging ? 'grabbing' : 'grab',
     zIndex: isDragging ? 1000 : 'auto',
     willChange: isDragging ? 'transform' : 'auto'
   };
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     ref: setRefs,
-    style: style
+    style: style,
+    role: isNativeTabStop ? 'button' : undefined,
+    tabIndex: isNativeTabStop ? 0 : undefined,
+    onKeyDown: isNativeTabStop ? handleKeyDown : undefined,
+    onClick: handleClick,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
   }, draggable && !disabled ? {
     ...listeners,
     ...attributes
@@ -233,8 +298,9 @@ const Tile = props => {
     empty: empty,
     index: index,
     guideIndex: guideIndex,
-    isOver: dropIsOver,
+    isOver: showsHoverEffect,
     isDragging: isDragging,
+    isSelected: isSelected,
     disabled: disabled,
     outcome: outcome,
     type: type
@@ -253,7 +319,10 @@ Tile.propTypes = {
   guideIndex: _propTypes.default.number,
   instanceId: _propTypes.default.any,
   draggable: _propTypes.default.bool,
-  tileIndex: _propTypes.default.number
+  tileIndex: _propTypes.default.number,
+  selectedChoice: _propTypes.default.object,
+  onChoiceClick: _propTypes.default.func,
+  onPlacementClick: _propTypes.default.func
 };
 var _default = exports.default = Tile;
 //# sourceMappingURL=tile.js.map

package/lib/tile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tile.js","names":["_react","_interopRequireDefault","require","_propTypes","_debug","_core","_styles","_drag","_renderUi","log","debug","StyledNumberContainer","styled","theme","width","fontSize","typography","textAlign","color","palette","common","black","Holder","type","index","isOver","disabled","default","createElement","PlaceHolder","undefined","propTypes","PropTypes","string","number","bool","StyledTileContent","isDragging","outcome","label","cursor","height","padding","boxSizing","overflow","border","grey","backgroundColor","background","transition","pointerEvents","userSelect","secondary","borderColor","primary","main","transform","opacity","primaryLight","borderStyle","secondaryLight","boxShadow","incorrect","correct","TileContent","props","empty","guideIndex","dangerouslySetInnerHTML","__html","Tile","id","instanceId","draggable","tileIndex","dragId","dropId","attributes","listeners","setNodeRef","setDragRef","useDraggable","data","value","setDropRef","dropIsOver","useDroppable","ref","React","useRef","useEffect","currentRef","current","handleTouchStart","e","preventDefault","addEventListener","passive","removeEventListener","setRefs","element","style","x","y","margin","zIndex","willChange","_extends2","exports","any","_default"],"sources":["../src/tile.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debug from 'debug';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\n\nimport { PlaceHolder } from '@pie-lib/drag';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:placement-ordering:tile');\n\nconst StyledNumberContainer = styled('div')(({ theme }) => ({\n width: '100%',\n fontSize: theme.typography.fontSize + 4,\n textAlign: 'center',\n color: `rgba(${theme.palette.common.black}, 0.6)`,\n}));\n\nconst Holder = ({ type, index, isOver, disabled }) => (\n <PlaceHolder type={type} isOver={isOver} disabled={disabled}>\n {type === 'target' && index !== undefined && <StyledNumberContainer>{index}</StyledNumberContainer>}\n </PlaceHolder>\n);\n\nHolder.propTypes = {\n type: PropTypes.string,\n index: PropTypes.number,\n isOver: PropTypes.bool,\n disabled: PropTypes.bool,\n};\n\nconst StyledTileContent = styled('div')(({ theme, isDragging, isOver, disabled, outcome, label, type }) => ({\n cursor: disabled ? 'not-allowed' : 'grab',\n width: '100%',\n height: '100%',\n padding: '10px',\n boxSizing: 'border-box',\n overflow: 'hidden',\n border: (type === 'choice' \|\| type === 'target') ? `1px solid ${theme.palette.grey[400]}` : '1px solid transparent',\n backgroundColor: (type === 'choice' \|\| type === 'target') ? color.background() : 'transparent',\n transition: (type === 'choice' \|\| type === 'target') ? 'background-color 150ms ease, border-color 150ms ease, opacity 150ms ease' : 'none',\n pointerEvents: 'none',\n userSelect: 'none',\n\n ...((type === 'choice' \|\| type === 'target') && {\n '&:hover': {\n backgroundColor: disabled ? color.background() : color.secondary(),\n borderColor: disabled ? theme.palette.grey[400] : theme.palette.primary.main,\n transform: disabled ? 'none' : 'scale(1.02)',\n },\n }),\n\n // Apply conditional styles based on props (only if not empty spacing tile)\n ...((type === 'choice' \|\| type === 'target') && isOver && !disabled && {\n opacity: 0.4,\n backgroundColor: color.primaryLight(),\n borderColor: theme.palette.primary.main,\n borderStyle: 'dashed',\n transform: 'scale(1.05)',\n }),\n\n ...((type === 'choice' \|\| type === 'target') && isDragging && !disabled && {\n opacity: 0.6,\n backgroundColor: color.secondaryLight(),\n transform: 'scale(1.05) rotate(2deg)',\n boxShadow: '0 8px 16px rgba(0,0,0,0.2)',\n cursor: 'grabbing',\n }),\n\n ...((type === 'choice' \|\| type === 'target') && disabled && {\n cursor: 'not-allowed',\n '&:hover': {\n backgroundColor: color.background(),\n transform: 'none',\n },\n }),\n\n ...((type === 'choice' \|\| type === 'target') && outcome === 'incorrect' && {\n border: `1px solid ${color.incorrect()}`,\n }),\n\n ...((type === 'choice' \|\| type === 'target') && outcome === 'correct' && {\n border: `1px solid ${color.correct()}`,\n }),\n\n ...(!label && {\n border: 'none',\n '&:hover': {\n backgroundColor: 'unset',\n },\n }),\n}));\n\nconst TileContent = (props) => {\n const { type, isDragging, empty, isOver, label, disabled, outcome, guideIndex } = props;\n\n if (empty) {\n return <Holder type={type} index={guideIndex} isOver={isOver} disabled={disabled} />;\n } else {\n return (\n <StyledTileContent\n type={type}\n isDragging={isDragging}\n isOver={isOver}\n disabled={disabled}\n outcome={outcome}\n label={label}\n dangerouslySetInnerHTML={{ __html: label }}\n />\n );\n }\n};\n\nexport const Tile = (props) => {\n const {\n label,\n type,\n id,\n empty,\n disabled,\n outcome,\n index,\n guideIndex,\n instanceId,\n draggable,\n tileIndex,\n } = props;\n\n // Use type + tileIndex in the IDs to guarantee uniqueness in all modes.\n // In includeTargets mode, a choice (id:'c1', type:'choice') and a target (id:'c1', type:'target')\n // can coexist — the type differentiates them.\n // tileIndex (array position from tiler) ensures empty placeholders are also unique.\n const dragId = `tile-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;\n const dropId = `drop-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;\n\n const {\n attributes,\n listeners,\n setNodeRef: setDragRef,\n transform,\n isDragging,\n } = useDraggable({\n id: dragId,\n data: {\n id,\n type,\n instanceId,\n value: label,\n index\n },\n disabled: !draggable \|\| disabled,\n });\n\n const {\n setNodeRef: setDropRef,\n isOver: dropIsOver,\n } = useDroppable({\n id: dropId,\n data: {\n id,\n type,\n instanceId,\n value: label,\n index\n },\n // Disable droppable on the tile currently being dragged so closestCenter\n // cannot pick it as the drop target (prevents self-collision and wrong matches).\n disabled: isDragging,\n });\n\n const ref = React.useRef(null);\n\n React.useEffect(() => {\n const currentRef = ref.current;\n\n const handleTouchStart = (e) => {\n e.preventDefault(); // Prevent the default touch event behavior\n };\n\n if (currentRef) {\n currentRef.addEventListener('touchstart', handleTouchStart, { passive: false });\n }\n\n return () => {\n if (currentRef) {\n currentRef.removeEventListener('touchstart', handleTouchStart);\n }\n };\n }, []);\n\n const setRefs = (element) => {\n ref.current = element;\n setDragRef(element);\n setDropRef(element);\n };\n\n log('[render], props: ', props);\n\n const style = {\n transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,\n boxSizing: 'border-box',\n overflow: 'visible',\n padding: 0,\n margin: 0,\n textAlign: 'center',\n pointerEvents: 'auto',\n cursor: disabled ? 'not-allowed' : (isDragging ? 'grabbing' : 'grab'),\n zIndex: isDragging ? 1000 : 'auto',\n willChange: isDragging ? 'transform' : 'auto',\n };\n\n return (\n <div\n ref={setRefs}\n style={style}\n {...(draggable && !disabled ? { ...listeners, ...attributes } : {})}\n >\n <TileContent\n label={label}\n id={id}\n empty={empty}\n index={index}\n guideIndex={guideIndex}\n isOver={dropIsOver}\n isDragging={isDragging}\n disabled={disabled}\n outcome={outcome}\n type={type}\n />\n </div>\n );\n};\n\nTile.propTypes = {\n id: PropTypes.any,\n label: PropTypes.string,\n isOver: PropTypes.bool,\n type: PropTypes.string,\n empty: PropTypes.bool,\n disabled: PropTypes.bool,\n outcome: PropTypes.string,\n index: PropTypes.number,\n guideIndex: PropTypes.number,\n instanceId: PropTypes.any,\n draggable: PropTypes.bool,\n tileIndex: PropTypes.number,\n};\n\nexport default Tile;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"tile.js","names":["_react","_interopRequireDefault","require","_propTypes","_debug","_core","_styles","_drag","_renderUi","log","debug","StyledNumberContainer","styled","theme","width","fontSize","typography","textAlign","color","palette","common","black","Holder","type","index","isOver","disabled","default","createElement","PlaceHolder","undefined","propTypes","PropTypes","string","number","bool","StyledTileContent","isDragging","isSelected","outcome","label","cursor","height","padding","boxSizing","overflow","border","grey","backgroundColor","background","transition","pointerEvents","userSelect","secondary","borderColor","primary","main","transform","opacity","primaryLight","borderStyle","secondaryLight","boxShadow","incorrect","correct","TileContent","props","empty","guideIndex","dangerouslySetInnerHTML","__html","Tile","id","instanceId","draggable","tileIndex","selectedChoice","onChoiceClick","onPlacementClick","dragId","dropId","tileData","value","attributes","listeners","setNodeRef","setDragRef","useDraggable","data","setDropRef","dropIsOver","useDroppable","isHovered","setIsHovered","React","useState","hasSelection","showsHoverEffect","handleClick","isNativeTabStop","handleKeyDown","e","code","preventDefault","ref","useRef","useEffect","currentRef","current","handleTouchStart","addEventListener","passive","removeEventListener","setRefs","element","style","x","y","margin","zIndex","willChange","_extends2","role","tabIndex","onKeyDown","onClick","onMouseEnter","onMouseLeave","exports","any","object","func","_default"],"sources":["../src/tile.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debug from 'debug';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\n\nimport { PlaceHolder } from '@pie-lib/drag';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:placement-ordering:tile');\n\nconst StyledNumberContainer = styled('div')(({ theme }) => ({\n width: '100%',\n fontSize: theme.typography.fontSize + 4,\n textAlign: 'center',\n color: `rgba(${theme.palette.common.black}, 0.6)`,\n}));\n\nconst Holder = ({ type, index, isOver, disabled }) => (\n <PlaceHolder type={type} isOver={isOver} disabled={disabled}>\n {type === 'target' && index !== undefined && <StyledNumberContainer>{index}</StyledNumberContainer>}\n </PlaceHolder>\n);\n\nHolder.propTypes = {\n type: PropTypes.string,\n index: PropTypes.number,\n isOver: PropTypes.bool,\n disabled: PropTypes.bool,\n};\n\nconst StyledTileContent = styled('div')(\n ({ theme, isDragging, isSelected, isOver, disabled, outcome, label, type }) => ({\n cursor: disabled ? 'not-allowed' : 'grab',\n width: '100%',\n height: '100%',\n padding: '10px',\n boxSizing: 'border-box',\n overflow: 'hidden',\n border: type === 'choice' \|\| type === 'target' ? `1px solid ${theme.palette.grey[400]}` : '1px solid transparent',\n backgroundColor: type === 'choice' \|\| type === 'target' ? color.background() : 'transparent',\n transition:\n type === 'choice' \|\| type === 'target'\n ? 'background-color 150ms ease, border-color 150ms ease, opacity 150ms ease'\n : 'none',\n pointerEvents: 'none',\n userSelect: 'none',\n\n ...((type === 'choice' \|\| type === 'target') && {\n '&:hover': {\n backgroundColor: disabled ? color.background() : color.secondary(),\n borderColor: disabled ? theme.palette.grey[400] : theme.palette.primary.main,\n transform: disabled ? 'none' : 'scale(1.02)',\n },\n }),\n\n // Apply conditional styles based on props (only if not empty spacing tile)\n ...((type === 'choice' \|\| type === 'target') &&\n isOver &&\n !disabled && {\n opacity: 0.4,\n backgroundColor: color.primaryLight(),\n borderColor: theme.palette.primary.main,\n borderStyle: 'dashed',\n transform: 'scale(1.05)',\n }),\n\n ...((type === 'choice' \|\| type === 'target') &&\n (isDragging \|\| isSelected) &&\n !disabled && {\n opacity: 0.6,\n backgroundColor: color.secondaryLight(),\n transform: 'scale(1.05) rotate(2deg)',\n boxShadow: '0 8px 16px rgba(0,0,0,0.2)',\n cursor: 'grabbing',\n }),\n\n ...((type === 'choice' \|\| type === 'target') &&\n disabled && {\n cursor: 'not-allowed',\n '&:hover': {\n backgroundColor: color.background(),\n transform: 'none',\n },\n }),\n\n ...((type === 'choice' \|\| type === 'target') &&\n outcome === 'incorrect' && {\n border: `1px solid ${color.incorrect()}`,\n }),\n\n ...((type === 'choice' \|\| type === 'target') &&\n outcome === 'correct' && {\n border: `1px solid ${color.correct()}`,\n }),\n\n ...(!label && {\n border: 'none',\n '&:hover': {\n backgroundColor: 'unset',\n },\n }),\n }),\n);\n\nconst TileContent = (props) => {\n const { type, isDragging, isSelected, empty, isOver, label, disabled, outcome, guideIndex } = props;\n\n if (empty) {\n return <Holder type={type} index={guideIndex} isOver={isOver} disabled={disabled} />;\n } else {\n return (\n <StyledTileContent\n type={type}\n isDragging={isDragging}\n isSelected={isSelected}\n isOver={isOver}\n disabled={disabled}\n outcome={outcome}\n label={label}\n dangerouslySetInnerHTML={{ __html: label }}\n />\n );\n }\n};\n\nexport const Tile = (props) => {\n const {\n label,\n type,\n id,\n empty,\n disabled,\n outcome,\n index,\n guideIndex,\n instanceId,\n draggable,\n tileIndex,\n selectedChoice,\n onChoiceClick,\n onPlacementClick,\n } = props;\n\n // Use type + tileIndex in the IDs to guarantee uniqueness in all modes.\n // In includeTargets mode, a choice (id:'c1', type:'choice') and a target (id:'c1', type:'target')\n // can coexist — the type differentiates them.\n // tileIndex (array position from tiler) ensures empty placeholders are also unique.\n const dragId = `tile-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;\n const dropId = `drop-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;\n\n // Built once and reused for dnd-kit's own drag/drop data and for the click handlers\n // below, so a click carries exactly the same shape a real drag would.\n const tileData = { id, type, instanceId, value: label, index };\n\n const {\n attributes,\n listeners,\n setNodeRef: setDragRef,\n transform,\n isDragging,\n } = useDraggable({\n id: dragId,\n data: tileData,\n disabled: !draggable \|\| disabled,\n });\n\n const { setNodeRef: setDropRef, isOver: dropIsOver } = useDroppable({\n id: dropId,\n data: tileData,\n // Disable droppable on the tile currently being dragged so closestCenter\n // cannot pick it as the drop target (prevents self-collision and wrong matches).\n disabled: isDragging,\n });\n\n const isSelected =\n !!selectedChoice &&\n selectedChoice.type === tileData.type &&\n selectedChoice.id === tileData.id &&\n selectedChoice.index === tileData.index;\n\n // dnd-kit's own isOver (dropIsOver) only reflects real collision detection during an\n // active drag, so it stays false while a placement area is merely a candidate for a\n // pending click-based placement. Track hovering locally and fold it into the same\n // isOver signal the styling below already uses, so hovering a response area while\n // something is selected gets the exact same treatment as hovering it during a real\n // drag — one code path, no duplicated CSS.\n const [isHovered, setIsHovered] = React.useState(false);\n const hasSelection = !!selectedChoice && !disabled;\n const showsHoverEffect = dropIsOver \|\| (type === 'target' && hasSelection && isHovered);\n\n // Click-to-select/click-to-place (both choices and targets are handled by this same\n // component, differentiated by `type`):\n // - Choice tile: selects/switches/deselects it, UNLESS a placed answer (a \"target\")\n // is currently selected, in which case clicking any choice-row tile returns it to\n // the choices column/row (choice -> choice has no placement meaning in the\n // reducer, so there's no ambiguity there).\n // - Target tile: clicking the already-selected placed answer again deselects it;\n // clicking it while something else is selected places that selection here\n // (empty or occupied); clicking a filled target with nothing selected selects\n // that placed answer for moving, the same way Tab+Space/Enter does. An empty\n // target with nothing selected is a no-op.\n const handleClick = () => {\n if (disabled) return;\n\n if (type === 'choice') {\n if (selectedChoice?.type === 'target') {\n onPlacementClick?.(tileData);\n } else if (draggable) {\n onChoiceClick?.(tileData);\n }\n } else if (type === 'target') {\n if (isSelected) {\n onChoiceClick?.(tileData);\n } else if (selectedChoice) {\n onPlacementClick?.(tileData);\n } else if (draggable) {\n onChoiceClick?.(tileData);\n }\n }\n };\n\n // dnd-kit's own draggable attributes (spread below) already make a draggable tile a\n // native Tab stop with its own Space/Enter activation. An empty tile is never\n // draggable, so without this it wouldn't be reachable by Tab at all — needed for\n // \"select a choice, then Tab to a placement area and press Space/Enter\" to work.\n // Gated to non-draggable tiles specifically so it never overrides dnd-kit's own\n // keydown handling (see the conditional spread order below).\n const isNativeTabStop = !(draggable && !disabled) && !disabled;\n\n const handleKeyDown = (e) => {\n if (e.code === 'Space' \|\| e.code === 'Enter') {\n e.preventDefault();\n handleClick();\n }\n };\n\n const ref = React.useRef(null);\n\n React.useEffect(() => {\n const currentRef = ref.current;\n\n const handleTouchStart = (e) => {\n e.preventDefault(); // Prevent the default touch event behavior\n };\n\n if (currentRef) {\n currentRef.addEventListener('touchstart', handleTouchStart, { passive: false });\n }\n\n return () => {\n if (currentRef) {\n currentRef.removeEventListener('touchstart', handleTouchStart);\n }\n };\n }, []);\n\n const setRefs = (element) => {\n ref.current = element;\n setDragRef(element);\n setDropRef(element);\n };\n\n log('[render], props: ', props);\n\n const style = {\n transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,\n boxSizing: 'border-box',\n overflow: 'visible',\n padding: 0,\n margin: 0,\n textAlign: 'center',\n pointerEvents: 'auto',\n cursor: disabled ? 'not-allowed' : type === 'target' && hasSelection ? 'pointer' : isDragging ? 'grabbing' : 'grab',\n zIndex: isDragging ? 1000 : 'auto',\n willChange: isDragging ? 'transform' : 'auto',\n };\n\n return (\n <div\n ref={setRefs}\n style={style}\n role={isNativeTabStop ? 'button' : undefined}\n tabIndex={isNativeTabStop ? 0 : undefined}\n onKeyDown={isNativeTabStop ? handleKeyDown : undefined}\n onClick={handleClick}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n {...(draggable && !disabled ? { ...listeners, ...attributes } : {})}\n >\n <TileContent\n label={label}\n id={id}\n empty={empty}\n index={index}\n guideIndex={guideIndex}\n isOver={showsHoverEffect}\n isDragging={isDragging}\n isSelected={isSelected}\n disabled={disabled}\n outcome={outcome}\n type={type}\n />\n </div>\n );\n};\n\nTile.propTypes = {\n id: PropTypes.any,\n label: PropTypes.string,\n isOver: PropTypes.bool,\n type: PropTypes.string,\n empty: PropTypes.bool,\n disabled: PropTypes.bool,\n outcome: PropTypes.string,\n index: PropTypes.number,\n guideIndex: PropTypes.number,\n instanceId: PropTypes.any,\n draggable: PropTypes.bool,\n tileIndex: PropTypes.number,\n selectedChoice: PropTypes.object,\n onChoiceClick: PropTypes.func,\n onPlacementClick: PropTypes.func,\n};\n\nexport default Tile;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAEA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AAEA,MAAMO,GAAG,GAAG,IAAAC,cAAK,EAAC,sCAAsC,CAAC;AAEzD,MAAMC,qBAAqB,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAC1DC,KAAK,EAAE,MAAM;EACbC,QAAQ,EAAEF,KAAK,CAACG,UAAU,CAACD,QAAQ,GAAG,CAAC;EACvCE,SAAS,EAAE,QAAQ;EACnBC,KAAK,EAAE,QAAQL,KAAK,CAACM,OAAO,CAACC,MAAM,CAACC,KAAK;AAC3C,CAAC,CAAC,CAAC;AAEH,MAAMC,MAAM,GAAGA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC,MAAM;EAAEC;AAAS,CAAC,kBAC/C1B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACrB,KAAA,CAAAsB,WAAW;EAACN,IAAI,EAAEA,IAAK;EAACE,MAAM,EAAEA,MAAO;EAACC,QAAQ,EAAEA;AAAS,GACzDH,IAAI,KAAK,QAAQ,IAAIC,KAAK,KAAKM,SAAS,iBAAI9B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACjB,qBAAqB,QAAEa,KAA6B,CACvF,CACd;AAEDF,MAAM,CAACS,SAAS,GAAG;EACjBR,IAAI,EAAES,kBAAS,CAACC,MAAM;EACtBT,KAAK,EAAEQ,kBAAS,CAACE,MAAM;EACvBT,MAAM,EAAEO,kBAAS,CAACG,IAAI;EACtBT,QAAQ,EAAEM,kBAAS,CAACG;AACtB,CAAC;AAED,MAAMC,iBAAiB,GAAG,IAAAxB,cAAM,EAAC,KAAK,CAAC,CACrC,CAAC;EAAEC,KAAK;EAAEwB,UAAU;EAAEC,UAAU;EAAEb,MAAM;EAAEC,QAAQ;EAAEa,OAAO;EAAEC,KAAK;EAAEjB;AAAK,CAAC,MAAM;EAC9EkB,MAAM,EAAEf,QAAQ,GAAG,aAAa,GAAG,MAAM;EACzCZ,KAAK,EAAE,MAAM;EACb4B,MAAM,EAAE,MAAM;EACdC,OAAO,EAAE,MAAM;EACfC,SAAS,EAAE,YAAY;EACvBC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAEvB,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ,GAAG,aAAaV,KAAK,CAACM,OAAO,CAAC4B,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,uBAAuB;EACjHC,eAAe,EAAEzB,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ,GAAGL,eAAK,CAAC+B,UAAU,CAAC,CAAC,GAAG,aAAa;EAC5FC,UAAU,EACR3B,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ,GAClC,0EAA0E,GAC1E,MAAM;EACZ4B,aAAa,EAAE,MAAM;EACrBC,UAAU,EAAE,MAAM;EAElB,IAAI,CAAC7B,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ,KAAK;IAC9C,SAAS,EAAE;MACTyB,eAAe,EAAEtB,QAAQ,GAAGR,eAAK,CAAC+B,UAAU,CAAC,CAAC,GAAG/B,eAAK,CAACmC,SAAS,CAAC,CAAC;MAClEC,WAAW,EAAE5B,QAAQ,GAAGb,KAAK,CAACM,OAAO,CAAC4B,IAAI,CAAC,GAAG,CAAC,GAAGlC,KAAK,CAACM,OAAO,CAACoC,OAAO,CAACC,IAAI;MAC5EC,SAAS,EAAE/B,QAAQ,GAAG,MAAM,GAAG;IACjC;EACF,CAAC,CAAC;EAEF;EACA,IAAI,CAACH,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ,KACzCE,MAAM,IACN,CAACC,QAAQ,IAAI;IACXgC,OAAO,EAAE,GAAG;IACZV,eAAe,EAAE9B,eAAK,CAACyC,YAAY,CAAC,CAAC;IACrCL,WAAW,EAAEzC,KAAK,CAACM,OAAO,CAACoC,OAAO,CAACC,IAAI;IACvCI,WAAW,EAAE,QAAQ;IACrBH,SAAS,EAAE;EACb,CAAC,CAAC;EAEJ,IAAI,CAAClC,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ,MACxCc,UAAU,IAAIC,UAAU,CAAC,IAC1B,CAACZ,QAAQ,IAAI;IACXgC,OAAO,EAAE,GAAG;IACZV,eAAe,EAAE9B,eAAK,CAAC2C,cAAc,CAAC,CAAC;IACvCJ,SAAS,EAAE,0BAA0B;IACrCK,SAAS,EAAE,4BAA4B;IACvCrB,MAAM,EAAE;EACV,CAAC,CAAC;EAEJ,IAAI,CAAClB,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ,KACzCG,QAAQ,IAAI;IACVe,MAAM,EAAE,aAAa;IACrB,SAAS,EAAE;MACTO,eAAe,EAAE9B,eAAK,CAAC+B,UAAU,CAAC,CAAC;MACnCQ,SAAS,EAAE;IACb;EACF,CAAC,CAAC;EAEJ,IAAI,CAAClC,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ,KACzCgB,OAAO,KAAK,WAAW,IAAI;IACzBO,MAAM,EAAE,aAAa5B,eAAK,CAAC6C,SAAS,CAAC,CAAC;EACxC,CAAC,CAAC;EAEJ,IAAI,CAACxC,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ,KACzCgB,OAAO,KAAK,SAAS,IAAI;IACvBO,MAAM,EAAE,aAAa5B,eAAK,CAAC8C,OAAO,CAAC,CAAC;EACtC,CAAC,CAAC;EAEJ,IAAI,CAACxB,KAAK,IAAI;IACZM,MAAM,EAAE,MAAM;IACd,SAAS,EAAE;MACTE,eAAe,EAAE;IACnB;EACF,CAAC;AACH,CAAC,CACH,CAAC;AAED,MAAMiB,WAAW,GAAIC,KAAK,IAAK;EAC7B,MAAM;IAAE3C,IAAI;IAAEc,UAAU;IAAEC,UAAU;IAAE6B,KAAK;IAAE1C,MAAM;IAAEe,KAAK;IAAEd,QAAQ;IAAEa,OAAO;IAAE6B;EAAW,CAAC,GAAGF,KAAK;EAEnG,IAAIC,KAAK,EAAE;IACT,oBAAOnE,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACN,MAAM;MAACC,IAAI,EAAEA,IAAK;MAACC,KAAK,EAAE4C,UAAW;MAAC3C,MAAM,EAAEA,MAAO;MAACC,QAAQ,EAAEA;IAAS,CAAE,CAAC;EACtF,CAAC,MAAM;IACL,oBACE1B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACQ,iBAAiB;MAChBb,IAAI,EAAEA,IAAK;MACXc,UAAU,EAAEA,UAAW;MACvBC,UAAU,EAAEA,UAAW;MACvBb,MAAM,EAAEA,MAAO;MACfC,QAAQ,EAAEA,QAAS;MACnBa,OAAO,EAAEA,OAAQ;MACjBC,KAAK,EAAEA,KAAM;MACb6B,uBAAuB,EAAE;QAAEC,MAAM,EAAE9B;MAAM;IAAE,CAC5C,CAAC;EAEN;AACF,CAAC;AAEM,MAAM+B,IAAI,GAAIL,KAAK,IAAK;EAC7B,MAAM;IACJ1B,KAAK;IACLjB,IAAI;IACJiD,EAAE;IACFL,KAAK;IACLzC,QAAQ;IACRa,OAAO;IACPf,KAAK;IACL4C,UAAU;IACVK,UAAU;IACVC,SAAS;IACTC,SAAS;IACTC,cAAc;IACdC,aAAa;IACbC;EACF,CAAC,GAAGZ,KAAK;;EAET;EACA;EACA;EACA;EACA,MAAMa,MAAM,GAAG,QAAQxD,IAAI,IAAIiD,EAAE,IAAI,IAAI,GAAGA,EAAE,GAAG,OAAO,IAAIG,SAAS,IAAIF,UAAU,EAAE;EACrF,MAAMO,MAAM,GAAG,QAAQzD,IAAI,IAAIiD,EAAE,IAAI,IAAI,GAAGA,EAAE,GAAG,OAAO,IAAIG,SAAS,IAAIF,UAAU,EAAE;;EAErF;EACA;EACA,MAAMQ,QAAQ,GAAG;IAAET,EAAE;IAAEjD,IAAI;IAAEkD,UAAU;IAAES,KAAK,EAAE1C,KAAK;IAAEhB;EAAM,CAAC;EAE9D,MAAM;IACJ2D,UAAU;IACVC,SAAS;IACTC,UAAU,EAAEC,UAAU;IACtB7B,SAAS;IACTpB;EACF,CAAC,GAAG,IAAAkD,kBAAY,EAAC;IACff,EAAE,EAAEO,MAAM;IACVS,IAAI,EAAEP,QAAQ;IACdvD,QAAQ,EAAE,CAACgD,SAAS,IAAIhD;EAC1B,CAAC,CAAC;EAEF,MAAM;IAAE2D,UAAU,EAAEI,UAAU;IAAEhE,MAAM,EAAEiE;EAAW,CAAC,GAAG,IAAAC,kBAAY,EAAC;IAClEnB,EAAE,EAAEQ,MAAM;IACVQ,IAAI,EAAEP,QAAQ;IACd;IACA;IACAvD,QAAQ,EAAEW;EACZ,CAAC,CAAC;EAEF,MAAMC,UAAU,GACd,CAAC,CAACsC,cAAc,IAChBA,cAAc,CAACrD,IAAI,KAAK0D,QAAQ,CAAC1D,IAAI,IACrCqD,cAAc,CAACJ,EAAE,KAAKS,QAAQ,CAACT,EAAE,IACjCI,cAAc,CAACpD,KAAK,KAAKyD,QAAQ,CAACzD,KAAK;;EAEzC;EACA;EACA;EACA;EACA;EACA;EACA,MAAM,CAACoE,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;EACvD,MAAMC,YAAY,GAAG,CAAC,CAACpB,cAAc,IAAI,CAAClD,QAAQ;EAClD,MAAMuE,gBAAgB,GAAGP,UAAU,IAAKnE,IAAI,KAAK,QAAQ,IAAIyE,YAAY,IAAIJ,SAAU;;EAEvF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMM,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAIxE,QAAQ,EAAE;IAEd,IAAIH,IAAI,KAAK,QAAQ,EAAE;MACrB,IAAIqD,cAAc,EAAErD,IAAI,KAAK,QAAQ,EAAE;QACrCuD,gBAAgB,GAAGG,QAAQ,CAAC;MAC9B,CAAC,MAAM,IAAIP,SAAS,EAAE;QACpBG,aAAa,GAAGI,QAAQ,CAAC;MAC3B;IACF,CAAC,MAAM,IAAI1D,IAAI,KAAK,QAAQ,EAAE;MAC5B,IAAIe,UAAU,EAAE;QACduC,aAAa,GAAGI,QAAQ,CAAC;MAC3B,CAAC,MAAM,IAAIL,cAAc,EAAE;QACzBE,gBAAgB,GAAGG,QAAQ,CAAC;MAC9B,CAAC,MAAM,IAAIP,SAAS,EAAE;QACpBG,aAAa,GAAGI,QAAQ,CAAC;MAC3B;IACF;EACF,CAAC;;EAED;EACA;EACA;EACA;EACA;EACA;EACA,MAAMkB,eAAe,GAAG,EAAEzB,SAAS,IAAI,CAAChD,QAAQ,CAAC,IAAI,CAACA,QAAQ;EAE9D,MAAM0E,aAAa,GAAIC,CAAC,IAAK;IAC3B,IAAIA,CAAC,CAACC,IAAI,KAAK,OAAO,IAAID,CAAC,CAACC,IAAI,KAAK,OAAO,EAAE;MAC5CD,CAAC,CAACE,cAAc,CAAC,CAAC;MAClBL,WAAW,CAAC,CAAC;IACf;EACF,CAAC;EAED,MAAMM,GAAG,GAAGV,cAAK,CAACW,MAAM,CAAC,IAAI,CAAC;EAE9BX,cAAK,CAACY,SAAS,CAAC,MAAM;IACpB,MAAMC,UAAU,GAAGH,GAAG,CAACI,OAAO;IAE9B,MAAMC,gBAAgB,GAAIR,CAAC,IAAK;MAC9BA,CAAC,CAACE,cAAc,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IAED,IAAII,UAAU,EAAE;MACdA,UAAU,CAACG,gBAAgB,CAAC,YAAY,EAAED,gBAAgB,EAAE;QAAEE,OAAO,EAAE;MAAM,CAAC,CAAC;IACjF;IAEA,OAAO,MAAM;MACX,IAAIJ,UAAU,EAAE;QACdA,UAAU,CAACK,mBAAmB,CAAC,YAAY,EAAEH,gBAAgB,CAAC;MAChE;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMI,OAAO,GAAIC,OAAO,IAAK;IAC3BV,GAAG,CAACI,OAAO,GAAGM,OAAO;IACrB5B,UAAU,CAAC4B,OAAO,CAAC;IACnBzB,UAAU,CAACyB,OAAO,CAAC;EACrB,CAAC;EAEDzG,GAAG,CAAC,mBAAmB,EAAEyD,KAAK,CAAC;EAE/B,MAAMiD,KAAK,GAAG;IACZ1D,SAAS,EAAEA,SAAS,GAAG,eAAeA,SAAS,CAAC2D,CAAC,OAAO3D,SAAS,CAAC4D,CAAC,QAAQ,GAAGvF,SAAS;IACvFc,SAAS,EAAE,YAAY;IACvBC,QAAQ,EAAE,SAAS;IACnBF,OAAO,EAAE,CAAC;IACV2E,MAAM,EAAE,CAAC;IACTrG,SAAS,EAAE,QAAQ;IACnBkC,aAAa,EAAE,MAAM;IACrBV,MAAM,EAAEf,QAAQ,GAAG,aAAa,GAAGH,IAAI,KAAK,QAAQ,IAAIyE,YAAY,GAAG,SAAS,GAAG3D,UAAU,GAAG,UAAU,GAAG,MAAM;IACnHkF,MAAM,EAAElF,UAAU,GAAG,IAAI,GAAG,MAAM;IAClCmF,UAAU,EAAEnF,UAAU,GAAG,WAAW,GAAG;EACzC,CAAC;EAED,oBACErC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,YAAA6F,SAAA,CAAA9F,OAAA;IACE6E,GAAG,EAAES,OAAQ;IACbE,KAAK,EAAEA,KAAM;IACbO,IAAI,EAAEvB,eAAe,GAAG,QAAQ,GAAGrE,SAAU;IAC7C6F,QAAQ,EAAExB,eAAe,GAAG,CAAC,GAAGrE,SAAU;IAC1C8F,SAAS,EAAEzB,eAAe,GAAGC,aAAa,GAAGtE,SAAU;IACvD+F,OAAO,EAAE3B,WAAY;IACrB4B,YAAY,EAAEA,CAAA,KAAMjC,YAAY,CAAC,IAAI,CAAE;IACvCkC,YAAY,EAAEA,CAAA,KAAMlC,YAAY,CAAC,KAAK;EAAE,GACnCnB,SAAS,IAAI,CAAChD,QAAQ,GAAG;IAAE,GAAG0D,SAAS;IAAE,GAAGD;EAAW,CAAC,GAAG,CAAC,CAAC,gBAElEnF,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACqC,WAAW;IACVzB,KAAK,EAAEA,KAAM;IACbgC,EAAE,EAAEA,EAAG;IACPL,KAAK,EAAEA,KAAM;IACb3C,KAAK,EAAEA,KAAM;IACb4C,UAAU,EAAEA,UAAW;IACvB3C,MAAM,EAAEwE,gBAAiB;IACzB5D,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEA,UAAW;IACvBZ,QAAQ,EAAEA,QAAS;IACnBa,OAAO,EAAEA,OAAQ;IACjBhB,IAAI,EAAEA;EAAK,CACZ,CACE,CAAC;AAEV,CAAC;AAACyG,OAAA,CAAAzD,IAAA,GAAAA,IAAA;AAEFA,IAAI,CAACxC,SAAS,GAAG;EACfyC,EAAE,EAAExC,kBAAS,CAACiG,GAAG;EACjBzF,KAAK,EAAER,kBAAS,CAACC,MAAM;EACvBR,MAAM,EAAEO,kBAAS,CAACG,IAAI;EACtBZ,IAAI,EAAES,kBAAS,CAACC,MAAM;EACtBkC,KAAK,EAAEnC,kBAAS,CAACG,IAAI;EACrBT,QAAQ,EAAEM,kBAAS,CAACG,IAAI;EACxBI,OAAO,EAAEP,kBAAS,CAACC,MAAM;EACzBT,KAAK,EAAEQ,kBAAS,CAACE,MAAM;EACvBkC,UAAU,EAAEpC,kBAAS,CAACE,MAAM;EAC5BuC,UAAU,EAAEzC,kBAAS,CAACiG,GAAG;EACzBvD,SAAS,EAAE1C,kBAAS,CAACG,IAAI;EACzBwC,SAAS,EAAE3C,kBAAS,CAACE,MAAM;EAC3B0C,cAAc,EAAE5C,kBAAS,CAACkG,MAAM;EAChCrD,aAAa,EAAE7C,kBAAS,CAACmG,IAAI;EAC7BrD,gBAAgB,EAAE9C,kBAAS,CAACmG;AAC9B,CAAC;AAAC,IAAAC,QAAA,GAAAJ,OAAA,CAAArG,OAAA,GAEa4C,IAAI","ignoreList":[]}

package/lib/tiler.js CHANGED Viewed

@@ -17,7 +17,10 @@ const types = {
   disabled: _propTypes.default.bool,
   tiles: _propTypes.default.array.isRequired,
   tileSize: _propTypes.default.string,
-  addGuide: _propTypes.default.bool
+  addGuide: _propTypes.default.bool,
+  selectedChoice: _propTypes.default.object,
+  onChoiceClick: _propTypes.default.func,
+  onPlacementClick: _propTypes.default.func
 };
 const defaults = {
   tileSize: '1fr',
@@ -31,6 +34,9 @@ const buildTiles = props => {
     tile.guideIndex = props.addGuide ? tile.index + 1 : undefined;
     // unique key for dnd-kit IDs
     tile.tileIndex = index;
+    tile.selectedChoice = props.selectedChoice;
+    tile.onChoiceClick = props.onChoiceClick;
+    tile.onPlacementClick = props.onPlacementClick;
     if (props.includeTargets) {
       return /*#__PURE__*/_react.default.createElement(_tile.default, (0, _extends2.default)({}, tile, {
         key: index

package/lib/tiler.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tiler.js","names":["_propTypes","_interopRequireDefault","require","_react","_styles","_tile","types","choiceLabel","PropTypes","string","targetLabel","disabled","bool","tiles","array","isRequired","tileSize","addGuide","defaults","buildTiles","props","T","tile","index","instanceId","guideIndex","undefined","tileIndex","includeTargets","default","createElement","_extends2","key","type","label","propTypes","StyledHTilerContainer","styled","theme","display","paddingBottom","spacing","gridGap","StyledChoiceLabel","textAlign","StyledTargetLabel","gridRow","StyledVTilerContainer","gridAutoFlow","StyledVChoiceLabel","gridColumn","StyledVTargetLabel","HorizontalTiler","React","Component","render","choiceLabelEnabled","rows","columns","length","style","gridTemplateColumns","Math","floor","gridTemplateRows","labelStyle","dangerouslySetInnerHTML","__html","map","exports","_defineProperty2","VerticalTiler"],"sources":["../src/tiler.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport { styled } from '@mui/material/styles';\n\nimport Tile from './tile';\n\nconst types = {\n choiceLabel: PropTypes.string,\n targetLabel: PropTypes.string,\n disabled: PropTypes.bool,\n tiles: PropTypes.array.isRequired,\n tileSize: PropTypes.string,\n addGuide: PropTypes.bool,\n};\n\nconst defaults = {\n tileSize: '1fr',\n disabled: false,\n addGuide: false,\n};\n\nconst buildTiles = (props) => {\n const T = (tile, index) => {\n tile.instanceId = props.instanceId;\n tile.disabled = props.disabled;\n tile.guideIndex = props.addGuide ? tile.index + 1 : undefined;\n // unique key for dnd-kit IDs\n tile.tileIndex = index;\n\n if (props.includeTargets) {\n return <Tile {...tile} key={index} />;\n } else {\n return tile.type === 'choice' ? <Tile {...tile} key={index} /> : <Tile {...tile} label=\"\" key={index} />;\n }\n };\n\n T.propTypes = { ...types };\n return T;\n};\n\nconst StyledHTilerContainer = styled('div')(({ theme, includeTargets }) => ({\n display: 'grid',\n paddingBottom: theme.spacing(2),\n ...(includeTargets && {\n gridGap: '10px',\n }),\n}));\n\nconst StyledChoiceLabel = styled('div')({\n textAlign: 'center',\n});\n\nconst StyledTargetLabel = styled('div')({\n textAlign: 'center',\n gridRow: '3/4',\n});\n\nconst StyledVTilerContainer = styled('div')(({ includeTargets }) => ({\n gridAutoFlow: 'column',\n display: 'grid',\n ...(includeTargets && {\n gridGap: '10px',\n }),\n}));\n\nconst StyledVChoiceLabel = styled('div')({\n gridColumn: '1/2',\n textAlign: 'center',\n});\n\nconst StyledVTargetLabel = styled('div')({\n gridColumn: '2/3',\n textAlign: 'center',\n});\n\nexport class HorizontalTiler extends React.Component {\n static propTypes = { ...types };\n static defaultProps = { ...defaults };\n render() {\n const { includeTargets, choiceLabelEnabled, choiceLabel, targetLabel, tiles, tileSize } = this.props;\n\n const rows = includeTargets ? `auto ${tileSize} auto ${tileSize}` : `auto ${tileSize} auto`;\n const columns = includeTargets ? tiles.length / 2 : tiles.length;\n\n const style = {\n gridTemplateColumns: includeTargets\n ? `repeat(${columns}, ${tileSize})`\n : `auto repeat(${Math.floor(columns / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,\n gridTemplateRows: rows,\n };\n\n const labelStyle = {\n gridColumn: `1/${columns + 1}`,\n };\n\n return (\n <StyledHTilerContainer includeTargets={includeTargets} style={style}>\n <StyledChoiceLabel\n style={labelStyle}\n dangerouslySetInnerHTML={{ __html: choiceLabelEnabled ? choiceLabel : '' }}\n />\n {includeTargets && (\n <StyledTargetLabel style={labelStyle} dangerouslySetInnerHTML={{ __html: targetLabel }} />\n )}\n {tiles.map(buildTiles(this.props))}\n </StyledHTilerContainer>\n );\n }\n}\n\nexport class VerticalTiler extends React.Component {\n static propTypes = { ...types };\n static defaultProps = { ...defaults };\n render() {\n const { includeTargets, choiceLabelEnabled, choiceLabel, targetLabel, tiles, tileSize } = this.props;\n\n const columns = includeTargets ? 2 : 1;\n const rows = includeTargets ? tiles.length / 2 : tiles.length;\n\n const style = {\n gridTemplateColumns: `repeat(${columns}, ${tileSize})`,\n gridTemplateRows: includeTargets\n ? `auto repeat(${rows}, ${tileSize})`\n : `auto auto repeat(${Math.floor(rows / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,\n };\n\n return (\n <StyledVTilerContainer includeTargets={includeTargets} style={style}>\n <StyledVChoiceLabel\n dangerouslySetInnerHTML={{ __html: choiceLabelEnabled ? choiceLabel : '' }}\n />\n\n {includeTargets && <StyledVTargetLabel dangerouslySetInnerHTML={{ __html: targetLabel }} />}\n {tiles.map(buildTiles(this.props))}\n </StyledVTilerContainer>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"tiler.js","names":["_propTypes","_interopRequireDefault","require","_react","_styles","_tile","types","choiceLabel","PropTypes","string","targetLabel","disabled","bool","tiles","array","isRequired","tileSize","addGuide","selectedChoice","object","onChoiceClick","func","onPlacementClick","defaults","buildTiles","props","T","tile","index","instanceId","guideIndex","undefined","tileIndex","includeTargets","default","createElement","_extends2","key","type","label","propTypes","StyledHTilerContainer","styled","theme","display","paddingBottom","spacing","gridGap","StyledChoiceLabel","textAlign","StyledTargetLabel","gridRow","StyledVTilerContainer","gridAutoFlow","StyledVChoiceLabel","gridColumn","StyledVTargetLabel","HorizontalTiler","React","Component","render","choiceLabelEnabled","rows","columns","length","style","gridTemplateColumns","Math","floor","gridTemplateRows","labelStyle","dangerouslySetInnerHTML","__html","map","exports","_defineProperty2","VerticalTiler"],"sources":["../src/tiler.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport { styled } from '@mui/material/styles';\n\nimport Tile from './tile';\n\nconst types = {\n choiceLabel: PropTypes.string,\n targetLabel: PropTypes.string,\n disabled: PropTypes.bool,\n tiles: PropTypes.array.isRequired,\n tileSize: PropTypes.string,\n addGuide: PropTypes.bool,\n selectedChoice: PropTypes.object,\n onChoiceClick: PropTypes.func,\n onPlacementClick: PropTypes.func,\n};\n\nconst defaults = {\n tileSize: '1fr',\n disabled: false,\n addGuide: false,\n};\n\nconst buildTiles = (props) => {\n const T = (tile, index) => {\n tile.instanceId = props.instanceId;\n tile.disabled = props.disabled;\n tile.guideIndex = props.addGuide ? tile.index + 1 : undefined;\n // unique key for dnd-kit IDs\n tile.tileIndex = index;\n tile.selectedChoice = props.selectedChoice;\n tile.onChoiceClick = props.onChoiceClick;\n tile.onPlacementClick = props.onPlacementClick;\n\n if (props.includeTargets) {\n return <Tile {...tile} key={index} />;\n } else {\n return tile.type === 'choice' ? <Tile {...tile} key={index} /> : <Tile {...tile} label=\"\" key={index} />;\n }\n };\n\n T.propTypes = { ...types };\n return T;\n};\n\nconst StyledHTilerContainer = styled('div')(({ theme, includeTargets }) => ({\n display: 'grid',\n paddingBottom: theme.spacing(2),\n ...(includeTargets && {\n gridGap: '10px',\n }),\n}));\n\nconst StyledChoiceLabel = styled('div')({\n textAlign: 'center',\n});\n\nconst StyledTargetLabel = styled('div')({\n textAlign: 'center',\n gridRow: '3/4',\n});\n\nconst StyledVTilerContainer = styled('div')(({ includeTargets }) => ({\n gridAutoFlow: 'column',\n display: 'grid',\n ...(includeTargets && {\n gridGap: '10px',\n }),\n}));\n\nconst StyledVChoiceLabel = styled('div')({\n gridColumn: '1/2',\n textAlign: 'center',\n});\n\nconst StyledVTargetLabel = styled('div')({\n gridColumn: '2/3',\n textAlign: 'center',\n});\n\nexport class HorizontalTiler extends React.Component {\n static propTypes = { ...types };\n static defaultProps = { ...defaults };\n render() {\n const { includeTargets, choiceLabelEnabled, choiceLabel, targetLabel, tiles, tileSize } = this.props;\n\n const rows = includeTargets ? `auto ${tileSize} auto ${tileSize}` : `auto ${tileSize} auto`;\n const columns = includeTargets ? tiles.length / 2 : tiles.length;\n\n const style = {\n gridTemplateColumns: includeTargets\n ? `repeat(${columns}, ${tileSize})`\n : `auto repeat(${Math.floor(columns / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,\n gridTemplateRows: rows,\n };\n\n const labelStyle = {\n gridColumn: `1/${columns + 1}`,\n };\n\n return (\n <StyledHTilerContainer includeTargets={includeTargets} style={style}>\n <StyledChoiceLabel\n style={labelStyle}\n dangerouslySetInnerHTML={{ __html: choiceLabelEnabled ? choiceLabel : '' }}\n />\n {includeTargets && (\n <StyledTargetLabel style={labelStyle} dangerouslySetInnerHTML={{ __html: targetLabel }} />\n )}\n {tiles.map(buildTiles(this.props))}\n </StyledHTilerContainer>\n );\n }\n}\n\nexport class VerticalTiler extends React.Component {\n static propTypes = { ...types };\n static defaultProps = { ...defaults };\n render() {\n const { includeTargets, choiceLabelEnabled, choiceLabel, targetLabel, tiles, tileSize } = this.props;\n\n const columns = includeTargets ? 2 : 1;\n const rows = includeTargets ? tiles.length / 2 : tiles.length;\n\n const style = {\n gridTemplateColumns: `repeat(${columns}, ${tileSize})`,\n gridTemplateRows: includeTargets\n ? `auto repeat(${rows}, ${tileSize})`\n : `auto auto repeat(${Math.floor(rows / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,\n };\n\n return (\n <StyledVTilerContainer includeTargets={includeTargets} style={style}>\n <StyledVChoiceLabel\n dangerouslySetInnerHTML={{ __html: choiceLabelEnabled ? choiceLabel : '' }}\n />\n\n {includeTargets && <StyledVTargetLabel dangerouslySetInnerHTML={{ __html: targetLabel }} />}\n {tiles.map(buildTiles(this.props))}\n </StyledVTilerContainer>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/placement-ordering",
   "repository": "pie-framework/pie-elements",
-  "version": "14.2.0",
+  "version": "14.2.1",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "d43fe1fb43626141b09cdda5292cf5d1f044440c",
+  "gitHead": "0f939adae5927fe0a54d21a4a98e224775562406",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },