@suphark/ui 0.37.0 → 0.39.0

package/src/lib/sortable-order.ts

@@ -1,18 +1,57 @@
 /**
  * ลำดับของรายการ 2 ระดับ (กลุ่ม → รายการในกลุ่ม) แบบ pure — ไม่พึ่ง dnd-kit และไม่พึ่ง React
  * ใช้โดย `@suphark/ui/sortable` และเทสต์ได้ตรง ๆ; แอปเอาไปสร้าง payload ตอนบันทึกได้เลย
+ *
+ * ชั้นบนสุด (root) มีทั้งกลุ่มและรายการที่ไม่มีกลุ่มปนกันได้ตามใจ — `root` เก็บลำดับนั้น
+ * ส่วน `groups` / `items[UNGROUPED]` เป็นมุมมองเดิมที่ได้จาก root (แอปเก่าที่ไม่รู้จัก root ยังอ่านได้)
  */
 
-/** รายการที่ยังไม่อยู่กลุ่มไหน — เก็บในถังนี้ (แสดงเป็นกลุ่มไม่มีชื่อ) */
+/** รายการที่ยังไม่อยู่กลุ่มไหน — เก็บในถังนี้ */
 export const UNGROUPED = "__ungrouped__";
 
+/** สิ่งหนึ่งในชั้นบนสุด: กลุ่ม หรือรายการที่ไม่มีกลุ่ม */
+export interface SortableRootEntry {
+  kind: "group" | "item";
+  id: string;
+}
+
 export interface SortableOrder {
   /** ลำดับของกลุ่ม (ไม่รวม `UNGROUPED`) */
   groups: string[];
   /** id ของรายการในแต่ละกลุ่ม — key เป็น id ของกลุ่มหรือ `UNGROUPED` */
   items: Record<string, string[]>;
+  /**
+   * ลำดับชั้นบนสุดที่กลุ่มกับรายการไม่มีกลุ่มสลับกันได้ — ไม่มี = รายการไม่มีกลุ่มอยู่บนสุดแล้วตามด้วยกลุ่ม
+   * (รูปแบบเดิม) · ใช้ `rootEntries(order)` อ่าน แทนการอ่านฟิลด์นี้ตรง ๆ
+   */
+  root?: SortableRootEntry[];
+}
+
+/** ลำดับชั้นบนสุด (กลุ่ม + รายการไม่มีกลุ่ม) — แอปใช้วนเรนเดอร์ตามลำดับนี้ */
+export function rootEntries(order: SortableOrder): SortableRootEntry[] {
+  if (order.root) return order.root;
+  return [
+    ...(order.items[UNGROUPED] ?? []).map((id) => ({ kind: "item" as const, id })),
+    ...order.groups.map((id) => ({ kind: "group" as const, id })),
+  ];
+}
+
+/** ตั้งชั้นบนสุดใหม่ แล้วให้ `groups` / `items[UNGROUPED]` ตรงกับมันเสมอ */
+function withRoot(order: SortableOrder, root: SortableRootEntry[]): SortableOrder {
+  return {
+    ...order,
+    root,
+    groups: root.filter((e) => e.kind === "group").map((e) => e.id),
+    items: {
+      ...order.items,
+      [UNGROUPED]: root.filter((e) => e.kind === "item").map((e) => e.id),
+    },
+  };
 }
 
+const sameEntry = (a: SortableRootEntry, b: SortableRootEntry) =>
+  a.kind === b.kind && a.id === b.id;
+
 /** สร้างลำดับเริ่มต้นจากข้อมูลที่โหลดมา (กลุ่มเรียงตามที่ส่งมา รายการเรียงตามที่ส่งมา) */
 export function sortableOrderOf<TGroup, TItem>(
   groups: ReadonlyArray<TGroup>,
@@ -23,6 +62,13 @@ export function sortableOrderOf<TGroup, TItem>(
     /** รายการนี้อยู่กลุ่มไหน — `null`/`undefined` = ยังไม่อยู่กลุ่มไหน */
     itemGroupId: (item: TItem) => string | null | undefined;
   },
+  options?: {
+    /**
+     * ลำดับชั้นบนสุดที่บันทึกไว้ (จาก `sortableOrderToPayload(order).root`) — ไม่ส่ง = รายการไม่มีกลุ่มก่อน
+     * แล้วตามด้วยกลุ่ม · ของที่ไม่มีใน root ต่อท้าย ของใน root ที่ไม่มีอยู่แล้วถูกทิ้ง
+     */
+    root?: ReadonlyArray<SortableRootEntry>;
+  },
 ): SortableOrder {
   const order: SortableOrder = { groups: [], items: { [UNGROUPED]: [] } };
   for (const group of groups) {
@@ -36,10 +82,14 @@ export function sortableOrderOf<TGroup, TItem>(
     if (list) list.push(select.itemId(item));
     else order.items[container] = [select.itemId(item)];
   }
-  return order;
+  if (!options?.root) return order;
+  const known = rootEntries(order);
+  const kept = options.root.filter((e) => known.some((k) => sameEntry(k, e)));
+  const rest = known.filter((k) => !kept.some((e) => sameEntry(k, e)));
+  return withRoot(order, [...kept, ...rest]);
 }
 
-/** กลุ่มที่รายการนี้อยู่ (ไม่เจอ = undefined) */
+/** กลุ่มที่รายการนี้อยู่ (`UNGROUPED` = ชั้นบนสุด; ไม่เจอ = undefined) */
 export function groupOfItem(order: SortableOrder, itemId: string): string | undefined {
   return Object.keys(order.items).find((group) => order.items[group]?.includes(itemId));
 }
@@ -53,19 +103,42 @@ export function moveWithin<T>(list: ReadonlyArray<T>, from: number, to: number):
   return next;
 }
 
-/** เรียงกลุ่มใหม่: ย้าย `groupId` ไปอยู่ตำแหน่งของ `overGroupId` */
+/**
+ * ย้ายสิ่งหนึ่งในชั้นบนสุดไปที่ตำแหน่ง `index` (นับในรายการที่ "เอาตัวมันออกแล้ว")
+ * ใช้ได้ทั้งกลุ่มและรายการไม่มีกลุ่ม — กลุ่มลงไปอยู่ระหว่างรายการไม่มีกลุ่มได้
+ */
+export function moveRootEntry(
+  order: SortableOrder,
+  entry: SortableRootEntry,
+  index: number,
+): SortableOrder {
+  const root = rootEntries(order);
+  const from = root.findIndex((e) => sameEntry(e, entry));
+  if (from < 0) return order;
+  const rest = root.filter((_, i) => i !== from);
+  const at = Math.max(0, Math.min(index, rest.length));
+  if (at === from) return order;
+  return withRoot(order, [
+    ...rest.slice(0, at),
+    root[from] as SortableRootEntry,
+    ...rest.slice(at),
+  ]);
+}
+
+/** เรียงกลุ่มใหม่: ย้าย `groupId` ไปอยู่ตำแหน่งของ `overGroupId` (ในชั้นบนสุด) */
 export function reorderGroups(
   order: SortableOrder,
   groupId: string,
   overGroupId: string,
 ): SortableOrder {
-  const from = order.groups.indexOf(groupId);
-  const to = order.groups.indexOf(overGroupId);
+  const root = rootEntries(order);
+  const from = root.findIndex((e) => e.kind === "group" && e.id === groupId);
+  const to = root.findIndex((e) => e.kind === "group" && e.id === overGroupId);
   if (from < 0 || to < 0 || from === to) return order;
-  return { ...order, groups: moveWithin(order.groups, from, to) };
+  return withRoot(order, moveWithin(root, from, to));
 }
 
-/** เรียงรายการในกลุ่มเดียวกัน: ย้าย `itemId` ไปอยู่ตำแหน่งของ `overItemId` */
+/** เรียงรายการในกลุ่มเดียวกัน (รวมรายการไม่มีกลุ่มในชั้นบนสุด): ย้าย `itemId` ไปอยู่ตำแหน่งของ `overItemId` */
 export function reorderItems(
   order: SortableOrder,
   itemId: string,
@@ -73,6 +146,13 @@ export function reorderItems(
 ): SortableOrder {
   const group = groupOfItem(order, itemId);
   if (!group || group !== groupOfItem(order, overItemId)) return order;
+  if (group === UNGROUPED) {
+    const root = rootEntries(order);
+    const from = root.findIndex((e) => e.kind === "item" && e.id === itemId);
+    const to = root.findIndex((e) => e.kind === "item" && e.id === overItemId);
+    if (from < 0 || to < 0 || from === to) return order;
+    return withRoot(order, moveWithin(root, from, to));
+  }
   const list = order.items[group] ?? [];
   const from = list.indexOf(itemId);
   const to = list.indexOf(overItemId);
@@ -80,8 +160,25 @@ export function reorderItems(
   return { ...order, items: { ...order.items, [group]: moveWithin(list, from, to) } };
 }
 
+/** เอารายการออกจากที่อยู่ปัจจุบัน (กลุ่ม หรือชั้นบนสุด) */
+function removeItem(order: SortableOrder, itemId: string): SortableOrder {
+  const from = groupOfItem(order, itemId);
+  if (!from) return order;
+  if (from === UNGROUPED) {
+    return withRoot(
+      order,
+      rootEntries(order).filter((e) => !(e.kind === "item" && e.id === itemId)),
+    );
+  }
+  return {
+    ...order,
+    items: { ...order.items, [from]: (order.items[from] ?? []).filter((id) => id !== itemId) },
+  };
+}
+
 /**
  * ย้ายรายการไปกลุ่มอื่น — แทรกก่อน `beforeItemId` (ไม่ส่ง = ต่อท้ายกลุ่มปลายทาง)
+ * `toGroup = UNGROUPED` = ออกมาอยู่ชั้นบนสุด (ก่อนรายการ `beforeItemId` หรือท้ายสุด) — จะวางก่อนกลุ่มใช้ `moveItemToRoot`
  * เรียกระหว่างลากได้ (ให้แถวไปโผล่ในกลุ่มใหม่ทันที) เพราะคืน object ใหม่เมื่อมีอะไรเปลี่ยนจริงเท่านั้น
  */
 export function moveItemToGroup(
@@ -92,24 +189,52 @@ export function moveItemToGroup(
 ): SortableOrder {
   const from = groupOfItem(order, itemId);
   if (!from || from === toGroup) return order;
-  const target = order.items[toGroup] ?? [];
+  if (toGroup === UNGROUPED) {
+    const root = rootEntries(order);
+    const at = beforeItemId
+      ? root.findIndex((e) => e.kind === "item" && e.id === beforeItemId)
+      : -1;
+    return moveItemToRoot(order, itemId, at >= 0 ? (root[at] as SortableRootEntry) : null);
+  }
+  const removed = removeItem(order, itemId);
+  const target = removed.items[toGroup] ?? [];
   const at = beforeItemId ? target.indexOf(beforeItemId) : -1;
   const index = at >= 0 ? at : target.length;
   return {
-    ...order,
+    ...removed,
     items: {
-      ...order.items,
-      [from]: (order.items[from] ?? []).filter((id) => id !== itemId),
+      ...removed.items,
       [toGroup]: [...target.slice(0, index), itemId, ...target.slice(index)],
     },
   };
 }
 
+/** ย้ายรายการออกมาอยู่ชั้นบนสุด ก่อน `before` (กลุ่มหรือรายการ; `null` = ท้ายสุด) */
+export function moveItemToRoot(
+  order: SortableOrder,
+  itemId: string,
+  before: SortableRootEntry | null,
+): SortableOrder {
+  const from = groupOfItem(order, itemId);
+  if (!from) return order;
+  const removed = removeItem(order, itemId);
+  const root = rootEntries(removed);
+  const at = before ? root.findIndex((e) => sameEntry(e, before)) : -1;
+  const index = at >= 0 ? at : root.length;
+  const entry: SortableRootEntry = { kind: "item", id: itemId };
+  const next = [...root.slice(0, index), entry, ...root.slice(index)];
+  if (from === UNGROUPED && sameRoot(next, rootEntries(order))) return order;
+  return withRoot(removed, next);
+}
+
+function sameRoot(a: ReadonlyArray<SortableRootEntry>, b: ReadonlyArray<SortableRootEntry>) {
+  return a.length === b.length && a.every((e, i) => sameEntry(e, b[i] as SortableRootEntry));
+}
+
 /** ลำดับเหมือนกันไหม (ใช้ตัดสินว่าต้องบันทึกหรือไม่) */
 export function sameOrder(a: SortableOrder, b: SortableOrder): boolean {
   if (a === b) return true;
-  if (a.groups.length !== b.groups.length) return false;
-  if (a.groups.some((id, i) => b.groups[i] !== id)) return false;
+  if (!sameRoot(rootEntries(a), rootEntries(b))) return false;
   const keys = new Set([...Object.keys(a.items), ...Object.keys(b.items)]);
   for (const key of keys) {
     const left = a.items[key] ?? [];
@@ -120,15 +245,51 @@ export function sameOrder(a: SortableOrder, b: SortableOrder): boolean {
   return true;
 }
 
+/** รายการทั้งหมดเรียงตามที่แสดง: ไล่ชั้นบนสุด กลุ่มคลี่รายการของมันออกมา */
+export function flatItems(order: SortableOrder): string[] {
+  return rootEntries(order).flatMap((e) =>
+    e.kind === "item" ? [e.id] : (order.items[e.id] ?? []),
+  );
+}
+
+/**
+ * ลากหลายรายการพร้อมกัน (bulk): ดึงรายการใน `ids` ทั้งหมดมารวมที่ตำแหน่งของ `activeId`
+ * (ตัวที่ผู้ใช้จับลาก) เรียงตามลำดับใน `ids` — ตัวอื่นหายจากที่เดิม ไม่ว่าจะอยู่กลุ่มไหนหรือชั้นบนสุด
+ */
+export function gatherItems(
+  order: SortableOrder,
+  activeId: string,
+  ids: ReadonlyArray<string>,
+): SortableOrder {
+  const present = new Set(flatItems(order));
+  const moving = ids.filter((id) => present.has(id));
+  if (moving.length <= 1 || !moving.includes(activeId)) return order;
+  const others = new Set(moving.filter((id) => id !== activeId));
+  const expand = (id: string) => (others.has(id) ? [] : id === activeId ? moving : [id]);
+  const items: Record<string, string[]> = {};
+  for (const [group, list] of Object.entries(order.items)) {
+    if (group !== UNGROUPED) items[group] = list.flatMap(expand);
+  }
+  const root = rootEntries(order).flatMap((e) =>
+    e.kind === "group" ? [e] : expand(e.id).map((id) => ({ kind: "item" as const, id })),
+  );
+  return withRoot({ ...order, items: { ...order.items, ...items } }, root);
+}
+
 export interface SortableOrderPayload {
   /** ลำดับของกลุ่ม (ไม่มี `UNGROUPED` — ของที่ไม่มีกลุ่มไม่ใช่กลุ่มจริง) */
   groups: string[];
   /** รายการในแต่ละกลุ่ม เรียงตามลำดับกลุ่ม โดยของที่ไม่มีกลุ่มมาก่อนด้วย `groupId: null` */
   items: Array<{ groupId: string | null; itemIds: string[] }>;
+  /**
+   * ลำดับชั้นบนสุด (กลุ่มกับรายการไม่มีกลุ่มปนกัน) — เก็บเป็นตำแหน่งเดียวกันของทั้งสองชนิด
+   * แล้วส่งกลับเข้า `sortableOrderOf(..., { root })` ตอนโหลด
+   */
+  root: SortableRootEntry[];
 }
 
 /**
- * แปลงเป็นรูปที่ส่งเข้า server action ได้ — คืนทั้งลำดับกลุ่มและรายการในกลุ่ม
+ * แปลงเป็นรูปที่ส่งเข้า server action ได้ — คืนทั้งลำดับกลุ่ม รายการในกลุ่ม และชั้นบนสุด
  * ชื่อฟิลด์เป็นศัพท์กลางของแพ็กเกจ (`groupId`) แอปที่ใช้ศัพท์อื่น (เช่น `sectionId`) rename ชั้นเดียวที่ปลายทาง
  */
 export function sortableOrderToPayload(order: SortableOrder): SortableOrderPayload {
@@ -138,5 +299,6 @@ export function sortableOrderToPayload(order: SortableOrder): SortableOrderPaylo
       groupId: group === UNGROUPED ? null : group,
       itemIds: order.items[group] ?? [],
     })),
+    root: rootEntries(order).map((e) => ({ ...e })),
   };
 }

package/src/sortable.ts

@@ -7,6 +7,7 @@ export {
   DragHandle,
   type SortableAnnouncementContext,
   type SortableAnnouncements,
+  type SortableDrag,
   SortableGroup,
   type SortableKind,
   SortableProvider,
@@ -17,13 +18,19 @@ export {
   useSortableState,
 } from "./components/sortable/sortable-list";
 export {
+  flatItems,
+  gatherItems,
   groupOfItem,
   moveItemToGroup,
+  moveItemToRoot,
+  moveRootEntry,
   moveWithin,
   reorderGroups,
   reorderItems,
+  rootEntries,
   type SortableOrder,
   type SortableOrderPayload,
+  type SortableRootEntry,
   sameOrder,
   sortableOrderOf,
   sortableOrderToPayload,