@suphark/ui 0.45.1 → 0.45.2

package/CHANGELOG.md

@@ -2,7 +2,13 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
-## [0.45.1] — 2026-10-08
+## [0.45.2] — 2026-10-08
+
+### Fixed
+
+- `@suphark/ui/sortable`: ลากรายการเข้ากลุ่มอื่นไปวาง "ใต้" แถวหนึ่ง ระหว่างลากอยู่ถูกที่ แต่ปล่อยแล้วกระโดดไปอยู่ "เหนือ" แถวนั้น (เจ้าของเจอในตัวอย่างโครง `<tbody>`) — ตอนข้ามกลุ่มจัดตำแหน่งก่อน/หลังไว้แล้ว แต่ตอนปล่อย `reorderItems` ย้ายไปแทนที่แถวที่ชี้ซ้ำอีกรอบ · ตอนนี้ถ้าปล่อยตอนยังชี้แถวเดิมที่ข้ามกลุ่มเข้ามา ใช้ตำแหน่งที่จัดไว้เลย
+- showcase: `/components/sortable-list` **เอาตัวอย่างโครง `<tbody>` ต่อกลุ่มออก** — เจ้าของเลือกให้มีรูปแบบเดียว (หัวกลุ่ม + แถวรายการเป็น `<tr>` ใน `<tbody>` เดียวกัน) เพื่อดูแลง่าย
+
 
 ### Fixed
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.45.1",
+  "version": "0.45.2",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

package/src/components/sortable/sortable-list.tsx

@@ -319,6 +319,9 @@ export function SortableProvider({
   // กันกระพริบตอนย้ายข้ามกลุ่ม: จำเป้าหมายล่าสุดไว้ใช้ตอนที่ layout กำลังขยับแล้วหาเป้าหมายไม่เจอ
   const lastOverId = useRef<UniqueIdentifier | null>(null);
   const movedAcross = useRef(false);
+  // เป้าหมายตอนย้ายข้ามกลุ่มครั้งล่าสุด — ตำแหน่งถูกจัดไว้แล้ว (ก่อน/หลังตามครึ่งแถว) ถ้าปล่อยตอนยังชี้ตัวเดิม
+  // ห้าม reorderItems ซ้ำ (arrayMove ไปแทนที่ตัวนั้น = วาง "หลัง" กลายเป็น "ก่อน")
+  const crossedAt = useRef<UniqueIdentifier | null>(null);
   const beforeDrag = useRef<SortableOrder | null>(null);
   // อ่านลำดับล่าสุดตอนปล่อย (onDragOver เปลี่ยนไปหลายรอบแล้ว prop ยังไม่ทัน)
   const latest = useRef(order);
@@ -626,6 +629,7 @@ export function SortableProvider({
 
   function onDragStart({ active }: DragStartEvent) {
     beforeDrag.current = latest.current;
+    crossedAt.current = null;
     lastOverId.current = null;
     const kind: SortableKind = kindOf(active.id) === "g" ? "group" : "item";
     const raw = rawOf(active.id);
@@ -679,6 +683,7 @@ export function SortableProvider({
     const raw = rawOf(active.id);
     const apply = (next: SortableOrder) => {
       if (next === current) return;
+      crossedAt.current = over.id;
       movedAcross.current = true;
       latest.current = next;
       onOrderChange(next);
@@ -694,6 +699,8 @@ export function SortableProvider({
     const from = containerOf(active.id, current);
     const to = containerOf(over.id, current);
     if (!from || !to || from === to) {
+      // ชี้ตัวอื่นในกลุ่มเดียวกันแล้ว = เรียงต่อแบบปกติ (ไม่ใช่ตำแหน่งที่จัดไว้ตอนข้ามกลุ่ม)
+      if (over.id !== crossedAt.current) crossedAt.current = null;
       updateTarget(active, over, keyboard, pointerY);
       return;
     }
@@ -778,7 +785,12 @@ export function SortableProvider({
           index,
         );
       }
-    } else if (over && kindOf(active.id) === "i" && kindOf(over.id) === "i") {
+    } else if (
+      over &&
+      kindOf(active.id) === "i" &&
+      kindOf(over.id) === "i" &&
+      over.id !== crossedAt.current
+    ) {
       next = reorderItems(current, rawOf(active.id), rawOf(over.id));
     }
     // bulk: ตัวที่เลือกไว้ตัวอื่นตามมารวมที่จุดวางของตัวที่จับ (เรียงตามลำดับเดิม)