@suphark/ui 0.45.1 → 0.47.0

package/CHANGELOG.md

@@ -2,7 +2,23 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
-## [0.45.1] — 2026-10-08
+## [0.47.0] — 2026-10-08
+
+### Changed
+
+- **`@suphark/ui/sortable` รองรับโครงเดียว: หัวกลุ่มกับแถวรายการเป็นพี่น้องกัน** (`<tr>` ใน `<tbody>` เดียวกัน หรือการ์ดในลิสต์เดียวกัน) — เจ้าของเลือกให้เหลือรูปแบบเดียวเพื่อดูแลง่าย หลัง Pi Config ย้ายจากโครง "`<tbody>` ต่อกลุ่ม" มาแบบนี้แล้ว (71735f0) · **ห้ามให้ node ของกลุ่มครอบแถวรายการไว้** (เช่นแปะ `ref` ของกลุ่มที่ `<tbody>` ที่ห่อแถวคีย์) ไม่งั้นแถวลูกจะเลื่อนสองชั้นและกรอบของก้อนถูกนับซ้ำ · ถอดโค้ดที่เคยรองรับโครงนั้นออก (`insideGroup` ใน context ภายใน, การกันนับซ้ำใน `blockRect`) — ไม่มี props ใดเปลี่ยน แอปที่ทำตามตัวอย่างใน `/components/sortable-list` ไม่ต้องแก้อะไร
+
+
+### Added
+
+- type `DistributiveOmit<T, K>` / `DistributivePick<T, K>` (ขอจาก Pi Auth): `Omit` ปกติยุบ union ของ props ที่มี discriminant — `Omit<DatePickerProps, "locale">` ทำให้ `name` กลายเป็น `string | [string, string]` แยกตาม `mode` ไม่ได้อีก ตัวห่อของแอปจึงพัง · ใช้ `DistributiveOmit<DatePickerProps, "locale">` แทนได้เลย ไม่ต้อง cast (มีเทสต์ type ที่พิสูจน์แล้วว่าแดงเมื่อถอดตัวแก้)
+
+
+### Fixed
+
+- `@suphark/ui/sortable`: ลากรายการเข้ากลุ่มอื่นไปวาง "ใต้" แถวหนึ่ง ระหว่างลากอยู่ถูกที่ แต่ปล่อยแล้วกระโดดไปอยู่ "เหนือ" แถวนั้น (เจ้าของเจอในตัวอย่างโครง `<tbody>`) — ตอนข้ามกลุ่มจัดตำแหน่งก่อน/หลังไว้แล้ว แต่ตอนปล่อย `reorderItems` ย้ายไปแทนที่แถวที่ชี้ซ้ำอีกรอบ · ตอนนี้ถ้าปล่อยตอนยังชี้แถวเดิมที่ข้ามกลุ่มเข้ามา ใช้ตำแหน่งที่จัดไว้เลย
+- showcase: `/components/sortable-list` **เอาตัวอย่างโครง `<tbody>` ต่อกลุ่มออก** — เจ้าของเลือกให้มีรูปแบบเดียว (หัวกลุ่ม + แถวรายการเป็น `<tr>` ใน `<tbody>` เดียวกัน) เพื่อดูแลง่าย
+
 
 ### Fixed
 

package/README.md

@@ -236,6 +236,7 @@ const [order, setOrder] = useState(() =>
 - การ์ดลอยตามเมาส์: `renderOverlay={(drag) => drag.kind === "item" ? <ItemCard id={drag.id} /> : <GroupCard id={drag.id} />}` (วาดใน portal จึงเป็น `div` ได้ ไม่ต้องเป็น `<tr>`) — ไม่ใส่ = แถวขยับเองแบบเดิม · โฟลเดอร์ที่ย่ออยู่: `useSortableDropZone(id, { onDwell: collapsed ? open : undefined })` ลากค้าง 600ms แล้วเปิดให้ · วางบนหัวกลุ่ม = ขึ้นบนสุดของกลุ่ม, วางบนโซนของ `UNGROUPED` = ต่อท้าย
 - เลือกหลายรายการแล้วลากพร้อมกัน: `SortableProvider multiSelect` แล้วกระจาย `row.selectProps` ลงแถว (ทำสีด้วย `data-[selected]:bg-primary/10`) — ⌘/Ctrl+คลิก, Shift+คลิก, ที่จับกด `x` / ⌘/Ctrl+A, Esc ล้าง · แถบนับใช้ `SelectionBar` + `useSortableState().selected/clearSelection` · `renderOverlay` ได้ `drag.ids` ไว้ทำการ์ดซ้อน
 - จัดชั้นบนสุดอิสระ (กลุ่มกับรายการไม่มีกลุ่มสลับกันได้): `SortableProvider freeLayout` + เรนเดอร์ตาม `rootEntries(order)` (ครอบทั้งหมดด้วย `<SortableGroup itemIds={order.items[UNGROUPED]}>` แล้วแต่ละกลุ่มมี `SortableGroup` ของตัวเองข้างใน) + บันทึก `payload.root` และส่งกลับ `sortableOrderOf(..., { root })` ตอนโหลด · หัวกลุ่มครึ่งบน = ก่อนกลุ่ม, ครึ่งล่าง = เข้ากลุ่ม
+- ห่อ component ที่ props เป็น union (เช่น `DatePicker` ที่มี `mode="range"`): ใช้ `DistributiveOmit`/`DistributivePick` แทน `Omit`/`Pick` ไม่งั้น union ถูกยุบจนแยกตาม `mode` ไม่ได้
 - `sortableOrderToPayload(order)` คืน `{ groups, items }` — `groups` คือลำดับของกลุ่ม, `items` คือรายการในแต่ละกลุ่มเรียงตามนั้น (ของที่ยังไม่มีกลุ่มมาก่อนด้วย `groupId: null`)
 - `SortableProvider disabled` (เช่นระหว่างกรอง ซึ่งลำดับที่เห็นไม่ใช่ลำดับจริง) ทำให้ `DragHandle` จางลงและกดไม่ได้ — ไม่อยากให้เห็นเลยใส่ `hideWhenDisabled`
 - ข้อความ screen reader: ใส่ `announcements`/`screenReaderInstructions` เป็น prop (callback ได้ `{ id, kind, groupId, index, total }`) หรือปล่อยให้ใช้แม่แบบจาก `UiText.sortable`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.45.1",
+  "version": "0.47.0",
   "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

@@ -153,8 +153,6 @@ interface SortableState {
   selected: ReadonlySet<string>;
   select: (id: string, mode: SelectMode) => void;
   groupOf: (itemId: string) => string | undefined;
-  /** แถวรายการอยู่ใน node ของกลุ่มเองไหม (กลุ่มเป็น <tbody> ทั้งก้อน) — ถ้าใช่ เลื่อนตามพ่ออยู่แล้ว */
-  insideGroup: (itemId: string, groupId: string) => boolean;
   register: (kind: SortableKind, id: string, node: HTMLElement | null) => void;
   shifts: ShiftStore;
 }
@@ -173,7 +171,6 @@ const SortableStateContext = createContext<SortableState>({
   selected: EMPTY,
   select: () => {},
   groupOf: () => undefined,
-  insideGroup: () => false,
   register: () => {},
   shifts: createShiftStore(),
 });
@@ -319,6 +316,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);
@@ -396,14 +396,16 @@ export function SortableProvider({
     } else map.delete(rowId);
   }, []);
 
-  /** กรอบของทั้งก้อน: หัวกลุ่ม + แถวรายการที่แสดงอยู่ (ไม่สนใจ transform ระหว่างลาก) */
+  /**
+   * กรอบของทั้งก้อน: หัวกลุ่ม + แถวรายการที่แสดงอยู่ (ไม่สนใจ transform ระหว่างลาก)
+   * หัวกลุ่มกับแถวรายการต้องเป็นพี่น้องกัน (`<tr>` ใน `<tbody>` เดียวกัน / การ์ดในลิสต์เดียวกัน)
+   * ห้ามให้ node ของกลุ่มครอบแถวรายการไว้ ไม่งั้นกรอบนี้นับซ้ำและแถวลูกจะเลื่อนสองชั้น
+   */
   const blockRect = useCallback((groupId: string, header: HTMLElement) => {
     let { top, bottom, left, right } = getClientRect(header, { ignoreTransform: true });
     for (const itemId of latest.current.items[groupId] ?? []) {
       const node = nodes.current.items.get(itemId);
-      // แถวที่อยู่ "ใน" node ของกลุ่มเอง (แอปแปะ ref กลุ่มที่ <tbody>) — กรอบของกลุ่มครอบอยู่แล้ว
-      // และกรอบของแถวลูกติด transform ของพ่อ (ignoreTransform ไม่ช่วย) → นับซ้ำแล้วก้อนใหญ่เกินจริง
-      if (!node?.isConnected || header.contains(node)) continue;
+      if (!node?.isConnected) continue;
       const r = getClientRect(node, { ignoreTransform: true });
       top = Math.min(top, r.top);
       bottom = Math.max(bottom, r.bottom);
@@ -626,6 +628,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 +682,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 +698,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 +784,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: ตัวที่เลือกไว้ตัวอื่นตามมารวมที่จุดวางของตัวที่จับ (เรียงตามลำดับเดิม)
@@ -925,11 +936,6 @@ export function SortableProvider({
   const groupIds = useMemo(() => order.groups.map((id) => dndId("group", id)), [order.groups]);
 
   const groupOf = useCallback((itemId: string) => groupOfItem(order, itemId), [order]);
-  const insideGroup = useCallback((itemId: string, groupId: string) => {
-    const group = nodes.current.groups.get(groupId);
-    const item = nodes.current.items.get(itemId);
-    return Boolean(group && item && group !== item && group.contains(item));
-  }, []);
   const rootDrag =
     activeDrag !== null &&
     (activeDrag.kind === "group" ||
@@ -956,7 +962,6 @@ export function SortableProvider({
       selected,
       select,
       groupOf,
-      insideGroup,
       register,
       shifts,
     }),
@@ -974,7 +979,6 @@ export function SortableProvider({
       selected,
       select,
       groupOf,
-      insideGroup,
       register,
       shifts,
     ],
@@ -1124,12 +1128,7 @@ export function useSortableRow({
       ? // มี overlay ลอยตามเมาส์แล้ว แถวต้นทางเหลือเป็นช่องจาง ๆ บอกตำแหน่งที่จะวาง
         { ...style, opacity: 0.4 }
       : { ...style, position: "relative", zIndex: 1, opacity: 0.85 };
-  } else if (
-    type === "item" &&
-    state.rootDrag &&
-    shift &&
-    !(groupId && state.insideGroup(id, groupId))
-  ) {
+  } else if (type === "item" && state.rootDrag && shift) {
     const own = state.activeGroup !== null && state.activeGroup === groupId;
     style = {
       transform: shift.transform,

package/src/index.ts

@@ -730,6 +730,7 @@ export {
   statusColorThemes,
   TAILWIND_COLORS,
 } from "./lib/status-colors";
+export type { DistributiveOmit, DistributivePick } from "./lib/types";
 export {
   TYPOGRAPHY_ROLES,
   type TypographyRole,

package/src/lib/types.ts

@@ -0,0 +1,18 @@
+/**
+ * Type helper ที่แอปใช้ตอนห่อ component ของแพ็กเกจ — ไม่มีโค้ดตอนรัน
+ */
+
+/**
+ * `Omit` ที่ทำทีละสมาชิกของ union — props ของ component ที่มี `mode`/variant
+ * (เช่น `DatePickerProps` ที่เป็น `DatePickerSingleProps | DatePickerRangeProps`)
+ * ถ้าใช้ `Omit` ปกติจะถูกยุบเป็นก้อนเดียว แยกตาม discriminant ไม่ได้อีก (Pi Auth เจอตอนห่อ `DateField`)
+ *
+ *   type DateFieldProps = DistributiveOmit<DatePickerProps, "locale"> & { label: string };
+ *   // แยกตาม props.mode ได้ตามปกติ ไม่ต้อง cast
+ */
+export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+
+/** `Pick` ที่ทำทีละสมาชิกของ union (คู่กับ `DistributiveOmit`) */
+export type DistributivePick<T, K extends PropertyKey> = T extends unknown
+  ? Pick<T, Extract<keyof T, K>>
+  : never;