@pie-element/placement-ordering 14.3.0-beta.0 → 14.3.1

package/CHANGELOG.md

@@ -3,24 +3,91 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [14.3.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.2.0-beta.0...@pie-element/placement-ordering@14.3.0-beta.0) (2026-08-07)
+## [14.3.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.3.0...@pie-element/placement-ordering@14.3.1) (2026-08-26)
 
 **Note:** Version bump only for package @pie-element/placement-ordering
 
-# [14.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.0...@pie-element/placement-ordering@14.2.0-beta.0) (2026-08-07)
+# [14.3.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.2.1...@pie-element/placement-ordering@14.3.0) (2026-08-21)
+
+### Bug Fixes
+
+- move [@pie-lib](https://github.com/pie-lib) deps back to latest, off next prereleases PIE-927 ([a53e012](https://github.com/pie-framework/pie-elements/commit/a53e0127eb4ac95ece54e1e2bd669ae4974f4251))
+- **theming:** move the grey palette reads onto --pie-\* tokens PIE-856 ([d7d005b](https://github.com/pie-framework/pie-elements/commit/d7d005bf081843335b4b0377852f2ecd075cb62d)), closes [#000000](https://github.com/pie-framework/pie-elements/issues/000000) [#E0E1E6](https://github.com/pie-framework/pie-elements/issues/E0E1E6) [#646464](https://github.com/pie-framework/pie-elements/issues/646464) [#616161](https://github.com/pie-framework/pie-elements/issues/616161) [#E0E1E6](https://github.com/pie-framework/pie-elements/issues/E0E1E6) [#C0C3](https://github.com/pie-framework/pie-elements/issues/C0C3)
+
+### Features
+
+- bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
+
+## [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
+
+- **match-list/placement-ordering:** scroll the interactive region horizontally when it does not fit PIE-766 & PIE-768 ([f0395a9](https://github.com/pie-framework/pie-elements/commit/f0395a91b16a803c5609d5ece6d3f87208dee1b2))
+
+### Features
+
+- **placement-ordering:** add Tab/Shift+Tab keyboard accessibility support PIE-767 ([6199e0e](https://github.com/pie-framework/pie-elements/commit/6199e0ef2689304d33d2fe576f4ab3f2788703b5))
+
+## [14.1.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.7...@pie-element/placement-ordering@14.1.9) (2026-08-11)
+
+### Bug Fixes
+
+- **placement-ordering:** adjust choice grid row height and center choices PIE-787 ([ad3e41e](https://github.com/pie-framework/pie-elements/commit/ad3e41e606a1e80b2c6ba2c37e18367cbb9ccda1))
+
+## [14.1.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.7...@pie-element/placement-ordering@14.1.8) (2026-07-31)
+
+### Bug Fixes
+
+- **placement-ordering:** adjust choice grid row height and center choices PIE-787 ([ad3e41e](https://github.com/pie-framework/pie-elements/commit/ad3e41e606a1e80b2c6ba2c37e18367cbb9ccda1))
+
+## [14.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.6...@pie-element/placement-ordering@14.1.7) (2026-07-08)
 
 ### Bug Fixes
 
 - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
-- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
-- bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
-- bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
+
+## [14.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.5...@pie-element/placement-ordering@14.1.6) (2026-07-02)
+
+### Bug Fixes
+
 - bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
-- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
-- handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
-- **placement-ordering:** adjust choice grid row height and center choices PIE-787 ([ad3e41e](https://github.com/pie-framework/pie-elements/commit/ad3e41e606a1e80b2c6ba2c37e18367cbb9ccda1))
 - sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
 
+## [14.1.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.4...@pie-element/placement-ordering@14.1.5) (2026-06-22)
+
+### Bug Fixes
+
+- bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
+- handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
+
+## [14.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.3...@pie-element/placement-ordering@14.1.4) (2026-06-17)
+
+### Bug Fixes
+
+- bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
+
+## [14.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.2...@pie-element/placement-ordering@14.1.3) (2026-06-12)
+
+### Bug Fixes
+
+- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
+
+## [14.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.1...@pie-element/placement-ordering@14.1.2) (2026-06-04)
+
+### Bug Fixes
+
+- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
+
+## [14.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.0...@pie-element/placement-ordering@14.1.1) (2026-05-21)
+
+**Note:** Version bump only for package @pie-element/placement-ordering
+
 # [14.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering@14.1.0-next.1...@pie-element/placement-ordering@14.1.0) (2026-05-21)
 
 ### Bug Fixes

package/configure/CHANGELOG.md

@@ -3,24 +3,80 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [11.3.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.2.0-beta.0...@pie-element/placement-ordering-configure@11.3.0-beta.0) (2026-08-07)
+## [11.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.2.0...@pie-element/placement-ordering-configure@11.2.1) (2026-08-26)
 
 **Note:** Version bump only for package @pie-element/placement-ordering-configure
 
-# [11.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.0...@pie-element/placement-ordering-configure@11.2.0-beta.0) (2026-08-07)
+# [11.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.11...@pie-element/placement-ordering-configure@11.2.0) (2026-08-21)
+
+### Features
+
+- bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
+
+## [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
+
+## [11.1.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.7...@pie-element/placement-ordering-configure@11.1.9) (2026-08-11)
+
+### Bug Fixes
+
+- **placement-ordering:** adjust choice grid row height and center choices PIE-787 ([ad3e41e](https://github.com/pie-framework/pie-elements/commit/ad3e41e606a1e80b2c6ba2c37e18367cbb9ccda1))
+
+## [11.1.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.7...@pie-element/placement-ordering-configure@11.1.8) (2026-07-31)
+
+### Bug Fixes
+
+- **placement-ordering:** adjust choice grid row height and center choices PIE-787 ([ad3e41e](https://github.com/pie-framework/pie-elements/commit/ad3e41e606a1e80b2c6ba2c37e18367cbb9ccda1))
+
+## [11.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.6...@pie-element/placement-ordering-configure@11.1.7) (2026-07-08)
 
 ### Bug Fixes
 
 - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
-- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
-- bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
-- bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
+
+## [11.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.5...@pie-element/placement-ordering-configure@11.1.6) (2026-07-02)
+
+### Bug Fixes
+
 - bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
-- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
-- handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
-- **placement-ordering:** adjust choice grid row height and center choices PIE-787 ([ad3e41e](https://github.com/pie-framework/pie-elements/commit/ad3e41e606a1e80b2c6ba2c37e18367cbb9ccda1))
 - sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
 
+## [11.1.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.4...@pie-element/placement-ordering-configure@11.1.5) (2026-06-22)
+
+### Bug Fixes
+
+- bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
+- handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
+
+## [11.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.3...@pie-element/placement-ordering-configure@11.1.4) (2026-06-17)
+
+### Bug Fixes
+
+- bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
+
+## [11.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.2...@pie-element/placement-ordering-configure@11.1.3) (2026-06-12)
+
+### Bug Fixes
+
+- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
+
+## [11.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.1...@pie-element/placement-ordering-configure@11.1.2) (2026-06-04)
+
+### Bug Fixes
+
+- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
+
+## [11.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.0...@pie-element/placement-ordering-configure@11.1.1) (2026-05-21)
+
+**Note:** Version bump only for package @pie-element/placement-ordering-configure
+
 # [11.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-configure@11.1.0-next.1...@pie-element/placement-ordering-configure@11.1.0) (2026-05-21)
 
 ### Bug Fixes

package/configure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/placement-ordering-configure",
-  "version": "11.3.0-beta.0",
+  "version": "11.2.1",
   "private": true,
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -11,10 +11,10 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "13.1.0-beta.1",
-    "@pie-lib/drag": "4.0.6",
-    "@pie-lib/editable-html-tip-tap": "2.2.0-beta.1",
-    "@pie-lib/render-ui": "6.1.3",
+    "@pie-lib/config-ui": "13.0.17",
+    "@pie-lib/drag": "4.1.2",
+    "@pie-lib/editable-html-tip-tap": "2.1.15",
+    "@pie-lib/render-ui": "7.0.1",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
     "nested-property": "^0.0.7",

package/controller/CHANGELOG.md

@@ -3,16 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [11.3.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-controller@11.2.0-beta.0...@pie-element/placement-ordering-controller@11.3.0-beta.0) (2026-08-07)
+## [11.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-controller@11.1.2...@pie-element/placement-ordering-controller@11.1.4) (2026-08-13)
 
 **Note:** Version bump only for package @pie-element/placement-ordering-controller
 
-# [11.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-controller@11.1.0...@pie-element/placement-ordering-controller@11.2.0-beta.0) (2026-08-07)
+## [11.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-controller@11.1.2...@pie-element/placement-ordering-controller@11.1.3) (2026-08-11)
+
+**Note:** Version bump only for package @pie-element/placement-ordering-controller
+
+## [11.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-controller@11.1.1...@pie-element/placement-ordering-controller@11.1.2) (2026-07-02)
 
 ### Bug Fixes
 
 - bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
 
+## [11.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-controller@11.1.0...@pie-element/placement-ordering-controller@11.1.1) (2026-05-21)
+
+**Note:** Version bump only for package @pie-element/placement-ordering-controller
+
 # [11.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/placement-ordering-controller@11.1.0-next.1...@pie-element/placement-ordering-controller@11.1.0) (2026-05-21)
 
 ### Bug Fixes

package/controller/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/placement-ordering-controller",
-  "version": "11.3.0-beta.0",
+  "version": "11.1.4",
   "private": true,
   "main": "lib/index.js",
   "module": "src/index.js",

package/lib/keyboard-coordinates.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.closestDroppableKeyboardCoordinates = void 0;
+var _core = require("@dnd-kit/core");
+/**
+ * Custom keyboard coordinate getter for placement-ordering's Tab-based placement mode
+ * (enabled only when the item is configured with `placementArea` / `includeTargets`).
+ *
+ * Tab/Shift+Tab cycle the dragged choice directly onto the next/previous enabled
+ * droppable (a placement/target tile, or an empty gap left behind in the choices row),
+ * in real on-screen position order, placing the dragged item's own top-left corner at
+ * the target's center-left point.
+ *
+ * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter` so the
+ * pre-existing free-form arrow-key dragging behavior is left completely unchanged.
+ *
+ * The tile currently being dragged already disables its own droppable
+ * (see `useDroppable({ disabled: isDragging })` in tile.jsx), so it's naturally
+ * excluded from the candidate list here without any extra bookkeeping.
+ *
+ * When picking up a choice from the choices row, the other not-yet-placed choice
+ * tiles are also registered droppables (tile.jsx disables a droppable only while it's
+ * the one being dragged), but dropping a choice onto another choice is a no-op in the
+ * reducer (ordering.js's updateResponse has no `choice -> choice` case) — so they're
+ * excluded from the Tab/Shift+Tab cycle, leaving only the real placement targets.
+ */
+const closestDroppableKeyboardCoordinates = (event, {
+  active,
+  context,
+  currentCoordinates
+}) => {
+  const {
+    code
+  } = event;
+  const isTab = code === 'Tab';
+  const isArrow = code === _core.KeyboardCode.Down || code === _core.KeyboardCode.Up || code === _core.KeyboardCode.Left || code === _core.KeyboardCode.Right;
+  if (!isTab && !isArrow) {
+    return undefined;
+  }
+  if (isArrow) {
+    return (0, _core.defaultKeyboardCoordinateGetter)(event, {
+      context,
+      currentCoordinates
+    });
+  }
+  event.preventDefault();
+  const {
+    droppableRects,
+    droppableContainers,
+    collisionRect
+  } = context;
+  if (!droppableRects || droppableRects.size === 0) {
+    return currentCoordinates;
+  }
+
+  // `currentCoordinates` is the top-left of the dragged item's collision rect (not its
+  // center), so derive the dragged item's center in the same frame before comparing it
+  // against droppable centers below.
+  const draggedHalfSize = {
+    x: (collisionRect?.width || 0) / 2,
+    y: (collisionRect?.height || 0) / 2
+  };
+  const currentCenter = {
+    x: currentCoordinates.x + draggedHalfSize.x,
+    y: currentCoordinates.y + draggedHalfSize.y
+  };
+
+  // Only exclude other choice tiles while dragging a choice; dragging a placed target
+  // back onto a choice-row gap is still a valid "return to pool" destination.
+  const activeType = active?.data?.current?.type;
+  const excludeChoiceDroppables = activeType === 'choice';
+  const targets = [];
+  for (const [id, container] of droppableContainers) {
+    if (container?.disabled) continue;
+    if (excludeChoiceDroppables && container?.data?.current?.type === 'choice') continue;
+    const rect = droppableRects.get(id);
+    if (!rect) continue;
+    const center = {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2
+    };
+    // Land the dragged item's own top-left corner at the target's center-left point,
+    // rather than at the target's own top-left corner.
+    const dropPosition = {
+      x: rect.left,
+      y: rect.top + rect.height / 2
+    };
+    targets.push({
+      id,
+      dropPosition,
+      center
+    });
+  }
+  if (targets.length === 0) {
+    return currentCoordinates;
+  }
+  const reverse = event.shiftKey;
+
+  // Sort targets by real on-screen position (top to bottom, then left to right), so
+  // this works the same whether the tiler is laid out vertically or horizontally.
+  targets.sort((a, b) => {
+    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;
+    return a.center.x - b.center.x;
+  });
+
+  // Find the current target (closest to current coordinates)
+  let currentIndex = 0;
+  let minDist = Infinity;
+  for (let i = 0; i < targets.length; i++) {
+    const dist = distance(currentCenter, targets[i].center);
+    if (dist < minDist) {
+      minDist = dist;
+      currentIndex = i;
+    }
+  }
+  const nextIndex = reverse ? (currentIndex - 1 + targets.length) % targets.length : (currentIndex + 1) % targets.length;
+  return targets[nextIndex].dropPosition;
+};
+exports.closestDroppableKeyboardCoordinates = closestDroppableKeyboardCoordinates;
+const distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
+//# sourceMappingURL=keyboard-coordinates.js.map

package/lib/keyboard-coordinates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-coordinates.js","names":["_core","require","closestDroppableKeyboardCoordinates","event","active","context","currentCoordinates","code","isTab","isArrow","KeyboardCode","Down","Up","Left","Right","undefined","defaultKeyboardCoordinateGetter","preventDefault","droppableRects","droppableContainers","collisionRect","size","draggedHalfSize","x","width","y","height","currentCenter","activeType","data","current","type","excludeChoiceDroppables","targets","id","container","disabled","rect","get","center","left","top","dropPosition","push","length","reverse","shiftKey","sort","a","b","Math","abs","currentIndex","minDist","Infinity","i","dist","distance","nextIndex","exports","sqrt"],"sources":["../src/keyboard-coordinates.js"],"sourcesContent":["import { defaultKeyboardCoordinateGetter, KeyboardCode } from '@dnd-kit/core';\n\n/**\n * Custom keyboard coordinate getter for placement-ordering's Tab-based placement mode\n * (enabled only when the item is configured with `placementArea` / `includeTargets`).\n *\n * Tab/Shift+Tab cycle the dragged choice directly onto the next/previous enabled\n * droppable (a placement/target tile, or an empty gap left behind in the choices row),\n * in real on-screen position order, placing the dragged item's own top-left corner at\n * the target's center-left point.\n *\n * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter` so the\n * pre-existing free-form arrow-key dragging behavior is left completely unchanged.\n *\n * The tile currently being dragged already disables its own droppable\n * (see `useDroppable({ disabled: isDragging })` in tile.jsx), so it's naturally\n * excluded from the candidate list here without any extra bookkeeping.\n *\n * When picking up a choice from the choices row, the other not-yet-placed choice\n * tiles are also registered droppables (tile.jsx disables a droppable only while it's\n * the one being dragged), but dropping a choice onto another choice is a no-op in the\n * reducer (ordering.js's updateResponse has no `choice -> choice` case) — so they're\n * excluded from the Tab/Shift+Tab cycle, leaving only the real placement targets.\n */\nexport const closestDroppableKeyboardCoordinates = (event, { active, context, currentCoordinates }) => {\n  const { code } = event;\n  const isTab = code === 'Tab';\n  const isArrow =\n    code === KeyboardCode.Down || code === KeyboardCode.Up || code === KeyboardCode.Left || code === KeyboardCode.Right;\n\n  if (!isTab && !isArrow) {\n    return undefined;\n  }\n\n  if (isArrow) {\n    return defaultKeyboardCoordinateGetter(event, { context, currentCoordinates });\n  }\n\n  event.preventDefault();\n\n  const { droppableRects, droppableContainers, collisionRect } = context;\n\n  if (!droppableRects || droppableRects.size === 0) {\n    return currentCoordinates;\n  }\n\n  // `currentCoordinates` is the top-left of the dragged item's collision rect (not its\n  // center), so derive the dragged item's center in the same frame before comparing it\n  // against droppable centers below.\n  const draggedHalfSize = {\n    x: (collisionRect?.width || 0) / 2,\n    y: (collisionRect?.height || 0) / 2,\n  };\n  const currentCenter = {\n    x: currentCoordinates.x + draggedHalfSize.x,\n    y: currentCoordinates.y + draggedHalfSize.y,\n  };\n\n  // Only exclude other choice tiles while dragging a choice; dragging a placed target\n  // back onto a choice-row gap is still a valid \"return to pool\" destination.\n  const activeType = active?.data?.current?.type;\n  const excludeChoiceDroppables = activeType === 'choice';\n\n  const targets = [];\n\n  for (const [id, container] of droppableContainers) {\n    if (container?.disabled) continue;\n\n    if (excludeChoiceDroppables && container?.data?.current?.type === 'choice') continue;\n\n    const rect = droppableRects.get(id);\n\n    if (!rect) continue;\n\n    const center = {\n      x: rect.left + rect.width / 2,\n      y: rect.top + rect.height / 2,\n    };\n    // Land the dragged item's own top-left corner at the target's center-left point,\n    // rather than at the target's own top-left corner.\n    const dropPosition = {\n      x: rect.left,\n      y: rect.top + rect.height / 2,\n    };\n\n    targets.push({ id, dropPosition, center });\n  }\n\n  if (targets.length === 0) {\n    return currentCoordinates;\n  }\n\n  const reverse = event.shiftKey;\n\n  // Sort targets by real on-screen position (top to bottom, then left to right), so\n  // this works the same whether the tiler is laid out vertically or horizontally.\n  targets.sort((a, b) => {\n    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;\n    return a.center.x - b.center.x;\n  });\n\n  // Find the current target (closest to current coordinates)\n  let currentIndex = 0;\n  let minDist = Infinity;\n\n  for (let i = 0; i < targets.length; i++) {\n    const dist = distance(currentCenter, targets[i].center);\n\n    if (dist < minDist) {\n      minDist = dist;\n      currentIndex = i;\n    }\n  }\n\n  const nextIndex = reverse\n    ? (currentIndex - 1 + targets.length) % targets.length\n    : (currentIndex + 1) % targets.length;\n\n  return targets[nextIndex].dropPosition;\n};\n\nconst distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);\n"],"mappings":"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","ignoreList":[]}

package/lib/placement-ordering.js

@@ -14,6 +14,7 @@ var _debug = _interopRequireDefault(require("debug"));
 var _lodashEs = require("lodash-es");
 var _styles = require("@mui/material/styles");
 var _core = require("@dnd-kit/core");
+var _modifiers = require("@dnd-kit/modifiers");
 var _renderUi = require("@pie-lib/render-ui");
 var _mathRendering = require("@pie-lib/math-rendering");
 var _translator = _interopRequireDefault(require("@pie-lib/translator"));
@@ -22,6 +23,24 @@ var _drag = require("@pie-lib/drag");
 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: {
+    start: ['Space', 'Enter'],
+    cancel: ['Escape'],
+    end: ['Space', 'Enter']
+  },
+  accessibility: {
+    screenReaderInstructions: {
+      draggable: 'Press Space or Enter to pick up this answer choice. Once picked up, use Tab or Shift+Tab to cycle through response areas, or use arrow keys to move it freely. Press Space or Enter to drop, or Escape to cancel.'
+    }
+  }
+} : {};
 const {
   translator
 } = _translator.default;
@@ -34,6 +53,26 @@ const PlacementOrderingContainer = (0, _styles.styled)('div')({
   alignItems: 'center',
   boxSizing: 'border-box'
 });
+
+// The interactive region - the choices and answers columns for a vertical item, or the choices and
+// answers rows for a horizontal one - scrolls horizontally when it does not fit the available width.
+const InteractiveRegion = (0, _styles.styled)('div')({
+  // the ancestors centre their children, which shrink-wraps this box to its content. without a
+  // definite width it grows with the tiler and the overflow escapes outwards instead of scrolling.
+  alignSelf: 'stretch',
+  maxWidth: '100%',
+  overflowX: 'auto',
+  // tiles are dragged by transform, which counts towards scrollable overflow, so leaving this axis
+  // scrollable would pop a vertical scrollbar mid-drag
+  overflowY: 'hidden'
+});
+
+// keeps the tiler at its natural width, and centred while it still fits
+const InteractiveRegionContent = (0, _styles.styled)('div')({
+  display: 'flex',
+  justifyContent: 'center',
+  minWidth: 'min-content'
+});
 const StyledPrompt = (0, _styles.styled)('div')(({
   theme
 }) => ({
@@ -202,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;
@@ -219,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 || {};
@@ -356,13 +478,21 @@ class PlacementOrdering extends _react.default.Component {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
-      boxSizing: 'border-box'
+      boxSizing: 'border-box',
+      width: '100%'
     };
-    return /*#__PURE__*/_react.default.createElement(_drag.DragProvider, {
-      onDragStart: () => {},
+    const clickPlacementProps = includeTargets ? {
+      selectedChoice: this.state.selectedChoice,
+      onChoiceClick: this.onChoiceClick,
+      onPlacementClick: this.onPlacementClick
+    } : {};
+    return /*#__PURE__*/_react.default.createElement(_drag.DragProvider, (0, _extends2.default)({
+      onDragStart: this.onDragStart,
       onDragEnd: this.onDragEnd,
-      collisionDetection: _core.closestCenter
-    }, /*#__PURE__*/_react.default.createElement(PlacementOrderingContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.UiLayout, {
+      onDragCancel: this.onDragCancel,
+      collisionDetection: _core.rectIntersection,
+      modifiers: [_modifiers.restrictToParentElement]
+    }, getKeyboardDragOptions(includeTargets)), /*#__PURE__*/_react.default.createElement(PlacementOrderingContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.UiLayout, {
       extraCSSRules: extraCSSRules,
       style: containerStyle
     }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
@@ -380,7 +510,7 @@ class PlacementOrdering extends _react.default.Component {
       toggled: showingCorrect,
       onToggle: this.toggleCorrect,
       language: language
-    }), /*#__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,
@@ -391,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
       }