Test grouped drag constraints and orientation

e2e/fixtures/grouped-reorder-probe.js

@@ -0,0 +1,49 @@
+// Rôle : expose la politique réelle de réorganisation dans une géométrie stable sous StrictMode.
+import { createElement as h, StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { useGroupedReorder } from "../../website/src/hooks/useGroupedReorder.js";
+
+const items = [
+  { id: "a", group: "A", parent: "p" }, { id: "b", group: "A", parent: "p" },
+  { id: "c", group: "B", parent: "p" }, { id: "d", group: "B", parent: "q" }
+];
+
+export function mountGroupedReorderProbe(element) {
+  const root = createRoot(element);
+  const events = [];
+  let options = {
+    orientation: "vertical", hierarchy: { enabled: true, stickyParents: true },
+    reorderFeatures: { item: { groupChange: true }, group: { reorder: true } }, veto: false
+  };
+  function Probe({ config }) {
+    const reorder = useGroupedReorder({
+      ...config, namespace: "probe", items,
+      getItemGroup: (item) => item.group, getParentId: (item) => item.parent,
+      canMoveItem: () => !config.veto, canMoveGroup: () => !config.veto,
+      onItemMove: (operation) => events.push(operation), onGroupMove: (operation) => events.push(operation)
+    });
+    const tile = (id, props, child) => h("div", {
+      ...props, key: id, "data-testid": id,
+      style: { height: 96, width: 220, border: "1px solid" }
+    }, child);
+    return h("section", null,
+      h("output", { "aria-label": "Dragging", style: { display: "block", height: 24 } },
+        reorder.itemReorder.draggingId || reorder.groupReorder.draggingId ? "active" : ""),
+      h("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 222px)", gap: 12 } },
+        ...items.map((item) => tile(item.id, reorder.getItemProps({ itemId: item.id, groupId: item.group, parentId: item.parent }),
+          h("button", { type: "button", onPointerDown: (event) => reorder.itemReorder.startDrag(event, item.id) }, `Item ${item.id}`))),
+        ...["A", "B"].map((groupId) => tile(`group-${groupId}`, reorder.getGroupProps({ groupId, parentId: "p" }),
+          h("button", { type: "button", onPointerDown: (event) => reorder.groupReorder.startDrag(event, { groupId, parentId: "p" }) }, `Group ${groupId}`))),
+        tile("boundary", reorder.getGroupBoundaryProps({ groupId: "B", parentId: "p", placement: "after" }), "Boundary"),
+        tile("ungrouped", reorder.getUngroupedDropProps({ parentId: "p" }), "Ungrouped"),
+        tile("alien", { ...reorder.getItemProps({ itemId: "alien", groupId: "A", parentId: "p" }), "data-reorder-namespace": "other" }, "Other namespace")
+      ));
+  }
+  function update(patch = {}) {
+    options = { ...options, ...patch };
+    flushSync(() => root.render(h(StrictMode, null, h(Probe, { config: options }))));
+  }
+  update();
+  return { events, update, unmount: () => root.unmount() };
+}