Prevent cancelled drags from committing moves

e2e/fixtures/form-reorder-probe.js

@@ -0,0 +1,48 @@
+// Rôle : expose les hooks réels de formulaire et déplacement sous StrictMode pour les tests navigateur.
+import { createElement as h, StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { useDraftForm } from "../../website/src/hooks/useDraftForm.js";
+import { usePointerReorder } from "../../website/src/hooks/usePointerReorder.js";
+
+export function mountFormReorderProbe(element, kind) {
+  const events = [];
+  const root = createRoot(element);
+  function Form() {
+    const form = useDraftForm({ title: "Initial", detail: "Kept" });
+    return h("form", { onSubmit: (event) => {
+      form.handleSubmit(event, (values, { reset }) => {
+        events.push({ ...values });
+        if (!values.title.trim()) return "Required";
+        reset();
+      });
+      events.push({ prevented: event.defaultPrevented });
+    } },
+    h("input", form.getFieldProps("title", { "aria-label": "Title", onChange: () => events.push("changed") })),
+    h("input", form.getFieldProps("detail", { "aria-label": "Detail" })),
+    h("p", { role: "alert" }, form.error),
+    h("button", { type: "submit" }, "Submit"),
+    h("button", { type: "button", onClick: () => form.updateValues({ title: "Patched" }) }, "Patch"),
+    h("button", { type: "button", onClick: () => form.reset({ title: "Replacement", detail: "New" }) }, "Replace"));
+  }
+  function Reorder({ revision }) {
+    const reorder = usePointerReorder({
+      targetSelector: "[data-probe-item]",
+      getTargetId: (element) => element.dataset.probeItem,
+      canDropOn: (element) => element.dataset.probeItem !== "blocked",
+      onMove: (source, target, placement) => events.push({ source, target, placement, revision })
+    });
+    return h("section", null,
+      h("output", { "aria-label": "Dragging", style: { display: "block", height: 24 } }, reorder.draggingId),
+      ...["a", "b", "blocked"].map((id) => h("div", {
+        key: id, "data-probe-item": id,
+        style: { height: 100, width: 300, border: "1px solid", margin: 10 }
+      }, h("button", { type: "button", onPointerDown: (event) => reorder.startDrag(event, id) }, id))));
+  }
+  const Component = kind === "form" ? Form : Reorder;
+  function update(revision = 0) {
+    flushSync(() => root.render(h(StrictMode, null, h(Component, { revision }))));
+  }
+  update();
+  return { events, update, unmount: () => root.unmount() };
+}