@suphark/ui 0.37.0 → 0.38.0

package/CHANGELOG.md

@@ -2,7 +2,21 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
-## [0.37.0] — 2026-10-07
+## [0.38.0] — 2026-10-07
+
+### Fixed
+
+- **`@suphark/ui/sortable` ลากกลุ่มแล้วไม่เห็นอะไรขยับ** (เจ้าของแจ้ง): หัวกลุ่มมักอยู่ใน `SortableGroup` ซึ่งเป็น context ของรายการ dnd-kit จึงหากลุ่มในลำดับไม่เจอ ไม่มีแถวไหนได้ transform เลยจนปล่อย · ตอนนี้ provider คำนวณระยะเลื่อนของกลุ่มเอง และเลื่อน **ทั้งก้อน** (หัวกลุ่ม + แถวรายการ) — กลุ่มอื่นหลบเท่าความสูงทั้งก้อน, ช่องจาง ๆ ของกลุ่มที่ลากเลื่อนไปจุดวาง (ไม่มี overlay = ทั้งก้อนลอยตามเมาส์) · ที่วางของกลุ่มวัดรวมแถวรายการ ใช้ได้ทุกโครงสร้างโดยไม่ต้องแก้ call site · วัดบนหน้า demo: ลาก "ฐานข้อมูล" ลงเลย "อีเมล" → ฐานข้อมูลทั้งก้อน +134px, อีเมลทั้งก้อน −135px, ปล่อยแล้วไม่มี style ค้าง
+- แถวต้นทางจางค้างหลังปล่อย (เจอกับหัวกลุ่ม): side effect ของ drop animation ใน dnd-kit จำ opacity ที่เราตั้งไว้เป็นค่าเดิมแล้วเขียนคืน — ปิด side effect นั้น (opacity คุมผ่าน style ของ React อยู่แล้ว)
+
+### Added
+
+- `SortableProvider multiSelect` (+ `selected`/`onSelectedChange` ถ้าจะคุมเอง): เลือกหลายรายการแล้วลากไปพร้อมกัน — ⌘/Ctrl+คลิก ทีละตัว, Shift+คลิก เป็นช่วง (เฉพาะแถวที่แสดง), คลิกเฉย ๆ ล้าง (คลิกปุ่ม/ช่องกรอกในแถวไม่นับ) · ที่จับ: `x` เลือก/ไม่เลือก, ⌘/Ctrl+A ทั้งหมด, Esc ล้าง · ลากตัวที่เลือก = ทุกตัวที่เลือกจางลงตรงที่เดิมแล้วไปรวมที่จุดวาง เรียงตามลำดับเดิม (ข้ามกลุ่มได้) · ลากตัวที่ไม่ได้เลือก = ลากตัวเดียวและล้างการเลือก
+- `useSortableRow` คืน `selected` + `selectProps` (กระจายลงแถว มี `data-selected` ไว้ทำสี) · `useSortableState` คืน `selected`/`clearSelection` (ใช้คู่ `SelectionBar`)
+- `renderOverlay` ได้ `SortableDrag` = `{ kind, id, ids }` (`ids` = ทุกตัวที่ลากไปด้วยกัน — ทำการ์ดซ้อน + จำนวน) · `SortableAnnouncementContext.count` + `UiText.sortable.startedMany` ("เริ่มลาก {count} รายการที่เลือกไว้")
+- helper pure: `flatItems(order)`, `gatherItems(order, activeId, ids)`
+- showcase: `/components/sortable-list` เปิด `multiSelect` + `SelectionBar` + การ์ดซ้อนตอนลากหลายคีย์
+
 
 ### Added
 

package/README.md

@@ -234,6 +234,7 @@ const [order, setOrder] = useState(() =>
 - ตั้ง `id` ของ `SortableProvider` ได้ (ไม่ตั้ง = `useId()`) — ต้องคงที่ระหว่าง SSR กับ client ไม่งั้น `aria-describedby` ของ dnd-kit จะ hydration mismatch · ตรวจได้จากที่จับ: `aria-describedby` จะเป็น **id ที่ส่งเข้าไปตรง ๆ** (ไม่มี prefix) และต้องชี้ element ที่มีข้อความวิธีลาก — element นี้สร้างหลัง hydrate จึงต้องรอหน้า mount ก่อนค่อย query
 - `onCommit` ล้มเหลว (throw หรือ `{ ok: false, error }`) = คืนลำดับเดิม + toast; ถ้าอยากจัดการ error เองใส่ `onCommitError`
 - การ์ดลอยตามเมาส์: `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` ไว้ทำการ์ดซ้อน
 - `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.37.0",
+  "version": "0.38.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/shared/ui-text.tsx

@@ -28,6 +28,8 @@ export interface UiText {
     instructions: string;
     /** ใช้ `{index}` / `{total}` */
     started: string;
+    /** เริ่มลากหลายรายการที่เลือกไว้ — ใช้ `{count}` */
+    startedMany: string;
     moved: string;
     dropped: string;
     cancelled: string;
@@ -255,6 +257,7 @@ export const UI_TEXT_TH: UiText = {
     handle: "ลากเพื่อจัดลำดับ",
     instructions: "กด Space เพื่อเริ่มลาก ใช้ปุ่มลูกศรเลื่อน แล้วกด Space อีกครั้งเพื่อวาง (Esc = ยกเลิก)",
     started: "เริ่มลากรายการที่ {index} จาก {total}",
+    startedMany: "เริ่มลาก {count} รายการที่เลือกไว้",
     moved: "ย้ายไปตำแหน่งที่ {index} จาก {total}",
     dropped: "วางที่ตำแหน่งที่ {index} จาก {total}",
     cancelled: "ยกเลิกการลาก",
@@ -425,6 +428,7 @@ export const UI_TEXT_EN: UiText = {
     instructions:
       "Press Space to start dragging, use arrow keys to move, Space again to drop (Esc to cancel)",
     started: "Picked up item {index} of {total}",
+    startedMany: "Picked up {count} selected items",
     moved: "Moved to position {index} of {total}",
     dropped: "Dropped at position {index} of {total}",
     cancelled: "Dragging cancelled",

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

@@ -5,11 +5,12 @@ import {
   closestCenter,
   DndContext,
   type DragEndEvent,
+  type DragMoveEvent,
   type DragOverEvent,
   DragOverlay,
   type DragStartEvent,
   type DropAnimation,
-  defaultDropAnimationSideEffects,
+  getClientRect,
   getFirstCollision,
   KeyboardSensor,
   MeasuringStrategy,
@@ -33,6 +34,8 @@ import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { useMounted } from "@suphark/ui/hooks/use-mounted";
 import { errorMessage } from "@suphark/ui/lib/action-result";
 import {
+  flatItems,
+  gatherItems,
   groupOfItem,
   moveItemToGroup,
   reorderGroups,
@@ -46,6 +49,8 @@ import { GripVerticalIcon } from "lucide-react";
 import {
   type CSSProperties,
   createContext,
+  type KeyboardEvent,
+  type MouseEvent,
   type ReactNode,
   useCallback,
   useContext,
@@ -54,6 +59,7 @@ import {
   useMemo,
   useRef,
   useState,
+  useSyncExternalStore,
 } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
@@ -72,9 +78,48 @@ const SORT_TRANSITION = { duration: 200, easing: EASING };
 const DROP_ANIMATION: DropAnimation = {
   duration: 200,
   easing: EASING,
-  sideEffects: defaultDropAnimationSideEffects({ styles: { active: { opacity: "0.4" } } }),
+  // ช่องจาง ๆ ของแถวต้นทางเราใส่ผ่าน style ของ React เองแล้ว — side effect ของ dnd-kit จะจำค่า 0.4 นั้น
+  // ไว้เป็น "ค่าเดิม" แล้วเขียนคืนหลังปล่อย ทำให้แถวจางค้าง (เจอกับหัวกลุ่ม)
+  sideEffects: null,
 };
 
+/** สิ่งที่กำลังลาก — `ids` = ทุกรายการที่ลากไปด้วยกัน (ลากแบบ bulk; ลากตัวเดียว = `[id]`) */
+export interface SortableDrag {
+  kind: SortableKind;
+  id: string;
+  ids: string[];
+}
+
+type SelectMode = "toggle" | "range" | "all" | "clear";
+
+/** ระยะเลื่อนของหัวกลุ่มแต่ละกลุ่มระหว่างลากกลุ่ม — แถวรายการในกลุ่มอ่านไปเลื่อนตาม (ทั้งก้อนขยับพร้อมกัน) */
+interface GroupShift {
+  transform: string | undefined;
+  transition: string | undefined;
+}
+
+function createShiftStore() {
+  const shifts = new Map<string, GroupShift>();
+  const listeners = new Set<() => void>();
+  return {
+    get: (id: string) => shifts.get(id),
+    set(id: string, shift: GroupShift | undefined) {
+      const prev = shifts.get(id);
+      if (prev?.transform === shift?.transform && prev?.transition === shift?.transition) return;
+      if (shift) shifts.set(id, shift);
+      else shifts.delete(id);
+      for (const listener of listeners) listener();
+    },
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+type ShiftStore = ReturnType<typeof createShiftStore>;
+
 interface SortableState {
   /** กำลังลากชนิดไหนอยู่ (null = ไม่ได้ลาก) — ใช้ปิดที่วางของอีกชนิด */
   dragging: SortableKind | null;
@@ -82,22 +127,52 @@ interface SortableState {
   handleLabel: string;
   /** มี `renderOverlay` = แถวต้นทางเป็นที่ว่างจาง ๆ ส่วนของที่ลอยตามเมาส์คือ overlay */
   overlay: boolean;
+  /** กลุ่มที่กำลังถูกลาก (แถวรายการของกลุ่มนี้จางตามหัวกลุ่ม) */
+  activeGroup: string | null;
+  /** รายการอื่นที่ลากไปพร้อมกันแบบ bulk (ไม่รวมตัวที่จับ) — แสดงจาง ๆ ระหว่างลาก */
+  carried: ReadonlySet<string>;
+  multiSelect: boolean;
+  selected: ReadonlySet<string>;
+  select: (id: string, mode: SelectMode) => void;
+  groupOf: (itemId: string) => string | undefined;
+  register: (kind: SortableKind, id: string, node: HTMLElement | null) => void;
+  shifts: ShiftStore;
 }
 
+const EMPTY = new Set<string>();
 const SortableStateContext = createContext<SortableState>({
   dragging: null,
   disabled: true,
   handleLabel: "ลากเพื่อจัดลำดับ",
   overlay: false,
+  activeGroup: null,
+  carried: EMPTY,
+  multiSelect: false,
+  selected: EMPTY,
+  select: () => {},
+  groupOf: () => undefined,
+  register: () => {},
+  shifts: createShiftStore(),
 });
 
 /**
  * สถานะการลากตอนนี้ — ใช้ตัดสินใจเรนเดอร์ที่วางเอง เช่นแถว "ลากมาที่นี่เพื่อเอาออกจากกลุ่ม"
  * ที่ควรโผล่เฉพาะตอน `dragging === "item"` (กลุ่มที่ไม่มีหัวกลุ่มต้องมีที่วางของตัวเอง)
+ * `selected`/`clearSelection` ใช้ทำแถบ "เลือก N รายการ" เมื่อเปิด `multiSelect`
  */
-export function useSortableState(): { dragging: SortableKind | null; disabled: boolean } {
+export function useSortableState(): {
+  dragging: SortableKind | null;
+  disabled: boolean;
+  selected: string[];
+  clearSelection: () => void;
+} {
   const state = useContext(SortableStateContext);
-  return { dragging: state.dragging, disabled: state.disabled };
+  return {
+    dragging: state.dragging,
+    disabled: state.disabled,
+    selected: [...state.selected],
+    clearSelection: () => state.select("", "clear"),
+  };
 }
 
 /** ข้อมูลของสิ่งที่กำลังลาก ส่งให้แอปประกอบข้อความเอง (แอปรู้ชื่อคีย์/ชื่อกลุ่ม แพ็กเกจไม่รู้) */
@@ -109,6 +184,8 @@ export interface SortableAnnouncementContext {
   /** ตำแหน่งในกลุ่ม/ในลำดับกลุ่ม เริ่มที่ 1 */
   index: number;
   total: number;
+  /** จำนวนรายการที่ลากไปด้วยกัน (ลากแบบ bulk > 1) */
+  count: number;
 }
 
 export interface SortableAnnouncements {
@@ -155,7 +232,17 @@ export interface SortableProviderProps {
    * ส่งมา = แถวต้นทางกลายเป็นช่องว่างจาง ๆ บอกตำแหน่งที่จะวาง และมีแอนิเมชันตอนปล่อย
    * วาดใน portal ที่ `body` จึงคืน `<div>` ได้แม้รายการจริงเป็นแถว `<tr>` ของตาราง
    */
-  renderOverlay?: (drag: { kind: SortableKind; id: string }) => ReactNode;
+  renderOverlay?: (drag: SortableDrag) => ReactNode;
+  /**
+   * เลือกหลายรายการแล้วลากไปพร้อมกัน: ⌘/Ctrl+คลิก = เลือกทีละตัว, Shift+คลิก = เลือกเป็นช่วง,
+   * คลิกเฉย ๆ = ล้าง · ที่จับ (คีย์บอร์ด): `x` = เลือก/ไม่เลือก, ⌘/Ctrl+A = ทั้งหมด, Esc = ล้าง
+   * แถวต้องกระจาย `selectProps` จาก `useSortableRow` (มี `data-selected` ไว้ทำสีแถวที่เลือก)
+   * ลากตัวที่เลือกอยู่ = ลากทุกตัวที่เลือกไปรวมที่จุดวาง เรียงตามลำดับเดิม
+   */
+  multiSelect?: boolean;
+  /** รายการที่เลือก (ควบคุมจากภายนอก) — ไม่ส่ง = provider เก็บเอง */
+  selected?: string[];
+  onSelectedChange?: (ids: string[]) => void;
   children: ReactNode;
 }
 
@@ -179,13 +266,25 @@ export function SortableProvider({
   announcements,
   id,
   renderOverlay,
+  multiSelect = false,
+  selected: selectedProp,
+  onSelectedChange,
   children,
 }: SortableProviderProps) {
   const fallbackId = useId();
   const text = useUiText();
   const mounted = useMounted();
   const [dragging, setDragging] = useState<SortableKind | null>(null);
-  const [activeDrag, setActiveDrag] = useState<{ kind: SortableKind; id: string } | null>(null);
+  const [activeDrag, setActiveDrag] = useState<SortableDrag | null>(null);
+  const draggingRef = useRef<SortableKind | null>(null);
+  // รายการที่ลากไปด้วยกันแบบ bulk (รวมตัวที่จับ เรียงตามลำดับที่แสดง) — null = ลากตัวเดียว
+  const bulk = useRef<string[] | null>(null);
+  const nodes = useRef({
+    groups: new Map<string, HTMLElement>(),
+    items: new Map<string, HTMLElement>(),
+    groupOfNode: new WeakMap<HTMLElement, string>(),
+  });
+  const shifts = useMemo(createShiftStore, []);
   // กันกระพริบตอนย้ายข้ามกลุ่ม: จำเป้าหมายล่าสุดไว้ใช้ตอนที่ layout กำลังขยับแล้วหาเป้าหมายไม่เจอ
   const lastOverId = useRef<UniqueIdentifier | null>(null);
   const movedAcross = useRef(false);
@@ -194,6 +293,147 @@ export function SortableProvider({
   const latest = useRef(order);
   latest.current = order;
 
+  // ---------- เลือกหลายรายการ ----------
+  const [ownSelected, setOwnSelected] = useState<string[]>([]);
+  const selectedList = selectedProp ?? ownSelected;
+  const selected = useMemo<ReadonlySet<string>>(() => {
+    if (!multiSelect || selectedList.length === 0) return EMPTY;
+    const present = new Set(flatItems(order));
+    return new Set(selectedList.filter((x) => present.has(x)));
+  }, [multiSelect, selectedList, order]);
+  const selectedRef = useRef(selected);
+  selectedRef.current = selected;
+  const anchor = useRef<string | null>(null);
+  const onSelectedChangeRef = useRef(onSelectedChange);
+  onSelectedChangeRef.current = onSelectedChange;
+  const controlled = selectedProp !== undefined;
+
+  const setSelected = useCallback(
+    (ids: string[]) => {
+      if (!controlled) setOwnSelected(ids);
+      onSelectedChangeRef.current?.(ids);
+    },
+    [controlled],
+  );
+
+  const select = useCallback(
+    (itemId: string, mode: SelectMode) => {
+      const all = flatItems(latest.current);
+      // เลือกเป็นช่วง/ทั้งหมด = เฉพาะแถวที่แสดงอยู่ (ไม่หยิบของในกลุ่มที่ย่อไว้โดยไม่รู้ตัว)
+      const visible = all.filter((x) => nodes.current.items.get(x)?.isConnected);
+      const current = selectedRef.current;
+      let next: Set<string>;
+      if (mode === "clear") next = new Set();
+      else if (mode === "all") next = new Set(visible);
+      else if (mode === "toggle") {
+        next = new Set(current);
+        if (next.has(itemId)) next.delete(itemId);
+        else next.add(itemId);
+        anchor.current = itemId;
+      } else {
+        const from = visible.indexOf(anchor.current ?? itemId);
+        const to = visible.indexOf(itemId);
+        next = new Set(current);
+        if (from >= 0 && to >= 0) {
+          for (const x of visible.slice(Math.min(from, to), Math.max(from, to) + 1)) next.add(x);
+        } else next.add(itemId);
+        if (anchor.current === null) anchor.current = itemId;
+      }
+      if (mode === "clear" || mode === "all") anchor.current = null;
+      if (next.size === current.size && [...next].every((x) => current.has(x))) return;
+      setSelected(all.filter((x) => next.has(x)));
+    },
+    [setSelected],
+  );
+
+  // Esc ที่ไหนก็ได้ = ล้างการเลือก (ระหว่างลาก Esc เป็นของการยกเลิกลาก)
+  const hasSelection = selected.size > 0;
+  useEffect(() => {
+    if (!hasSelection) return;
+    function onKey(event: globalThis.KeyboardEvent) {
+      if (event.key === "Escape" && draggingRef.current === null) select("", "clear");
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [hasSelection, select]);
+
+  const register = useCallback((kind: SortableKind, rowId: string, node: HTMLElement | null) => {
+    const map = kind === "group" ? nodes.current.groups : nodes.current.items;
+    if (node) {
+      map.set(rowId, node);
+      if (kind === "group") nodes.current.groupOfNode.set(node, rowId);
+    } else map.delete(rowId);
+  }, []);
+
+  /** กรอบของทั้งก้อน: หัวกลุ่ม + แถวรายการที่แสดงอยู่ (ไม่สนใจ transform ระหว่างลาก) */
+  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);
+      if (!node?.isConnected) continue;
+      const r = getClientRect(node, { ignoreTransform: true });
+      top = Math.min(top, r.top);
+      bottom = Math.max(bottom, r.bottom);
+      left = Math.min(left, r.left);
+      right = Math.max(right, r.right);
+    }
+    return { top, bottom, left, right, width: right - left, height: bottom - top };
+  }, []);
+
+  /**
+   * ขนาดของที่วางตอนลากกลุ่ม = หัวกลุ่ม "รวมแถวรายการของกลุ่มนั้น" ทั้งก้อน
+   * (เดิมวัดแค่หัวกลุ่ม กลุ่มอื่นจึงเลื่อนหลบแค่ความสูงหัวกลุ่มเดียว แถวรายการไม่ขยับ)
+   */
+  const measureDroppable = useCallback(
+    (element: HTMLElement) => {
+      const groupId =
+        draggingRef.current === "group" ? nodes.current.groupOfNode.get(element) : undefined;
+      return groupId
+        ? blockRect(groupId, element)
+        : getClientRect(element, { ignoreTransform: true });
+    },
+    [blockRect],
+  );
+
+  // ---------- เลื่อนทั้งก้อนระหว่างลากกลุ่ม (แบบรายการ: กลุ่มอื่นหลบ ช่องว่างของกลุ่มที่ลากเลื่อนไปจุดวาง) ----------
+  const blocks = useRef(new Map<string, { top: number; bottom: number }>());
+  const [overGroup, setOverGroup] = useState<string | null>(null);
+  const overlayOn = Boolean(renderOverlay);
+  useEffect(() => {
+    const active = activeDrag?.kind === "group" ? activeDrag.id : null;
+    const groups = order.groups;
+    if (!active) {
+      for (const g of groups) shifts.set(g, undefined);
+      return;
+    }
+    const a = groups.indexOf(active);
+    const o = overGroup ? groups.indexOf(overGroup) : a;
+    const at = (i: number) => blocks.current.get(groups[i] ?? "");
+    const self = at(a);
+    if (!self || o < 0) return;
+    // ระยะที่กลุ่มอื่นหลบ = จากหัวของกลุ่มที่ลากไปถึงหัวของกลุ่มถัดไป (รวมช่องไฟ)
+    const step = (at(a + 1)?.top ?? self.bottom) - self.top;
+    const transition = `transform ${SORT_TRANSITION.duration}ms ${EASING}`;
+    groups.forEach((g, i) => {
+      let dy = 0;
+      if (i === a) {
+        if (!overlayOn) return; // ไม่มี overlay = หัวกลุ่มลอยตามเมาส์ (onDragMove)
+        dy =
+          o > a
+            ? (at(o)?.bottom ?? self.bottom) - self.bottom
+            : o < a
+              ? (at(o)?.top ?? self.top) - self.top
+              : 0;
+      } else if (a < o && i > a && i <= o) dy = -step;
+      else if (o < a && i >= o && i < a) dy = step;
+      shifts.set(g, { transform: `translate3d(0px, ${dy}px, 0)`, transition });
+    });
+  }, [activeDrag, overGroup, order.groups, overlayOn, shifts]);
+  const measuring = useMemo(
+    () => ({ droppable: { strategy: MeasuringStrategy.Always, measure: measureDroppable } }),
+    [measureDroppable],
+  );
+
   // ย้ายข้ามกลุ่มเสร็จแล้ว (render ลำดับใหม่ไปแล้ว) ค่อยปลดธงในเฟรมถัดไป
   useEffect(() => {
     const frame = requestAnimationFrame(() => {
@@ -253,11 +493,51 @@ export function SortableProvider({
     beforeDrag.current = latest.current;
     lastOverId.current = null;
     const kind: SortableKind = kindOf(active.id) === "g" ? "group" : "item";
+    const raw = rawOf(active.id);
+    const chosen = selectedRef.current;
+    bulk.current = null;
+    if (kind === "item" && chosen.has(raw) && chosen.size > 1) {
+      bulk.current = flatItems(latest.current).filter((x) => chosen.has(x));
+    } else if (kind === "item" && chosen.size > 0 && !chosen.has(raw)) {
+      // ลากตัวที่ไม่ได้เลือก = ลากตัวนั้นตัวเดียว และล้างการเลือกเดิม (แบบ Finder)
+      select("", "clear");
+    }
+    draggingRef.current = kind;
+    if (kind === "group") {
+      blocks.current.clear();
+      for (const [groupId, header] of nodes.current.groups) {
+        if (header.isConnected) blocks.current.set(groupId, blockRect(groupId, header));
+      }
+      setOverGroup(raw);
+    }
     setDragging(kind);
-    setActiveDrag({ kind, id: rawOf(active.id) });
+    setActiveDrag({ kind, id: raw, ids: bulk.current ?? [raw] });
+  }
+
+  /** ไม่มี overlay: ก้อนของกลุ่มที่ลากลอยตามเมาส์ทั้งก้อน (หัวกลุ่ม + แถวรายการ) */
+  function onDragMove({ active, delta }: DragMoveEvent) {
+    if (overlayOn || kindOf(active.id) !== "g") return;
+    shifts.set(rawOf(active.id), {
+      transform: `translate3d(${delta.x}px, ${delta.y}px, 0)`,
+      transition: undefined,
+    });
+  }
+
+  function endDrag() {
+    draggingRef.current = null;
+    bulk.current = null;
+    setOverGroup(null);
+    // ล้างระยะเลื่อนพร้อมกับที่ลำดับใหม่ render (รอ effect = มีเฟรมที่แถวใหม่ยังติด transform เก่า → กระพริบ)
+    for (const g of nodes.current.groups.keys()) shifts.set(g, undefined);
+    setDragging(null);
+    setActiveDrag(null);
   }
 
   function onDragOver({ active, over }: DragOverEvent) {
+    if (over && kindOf(active.id) === "g" && kindOf(over.id) === "g") {
+      setOverGroup(rawOf(over.id));
+      return;
+    }
     if (!over || kindOf(active.id) !== "i") return;
     const current = latest.current;
     const from = containerOf(active.id, current);
@@ -308,9 +588,9 @@ export function SortableProvider({
 
   function onDragEnd({ active, over }: DragEndEvent) {
     const snapshot = beforeDrag.current;
+    const carried = bulk.current;
     beforeDrag.current = null;
-    setDragging(null);
-    setActiveDrag(null);
+    endDrag();
     const current = latest.current;
     let next = current;
     if (over && kindOf(active.id) === "g" && kindOf(over.id) === "g") {
@@ -318,6 +598,8 @@ export function SortableProvider({
     } else if (over && kindOf(active.id) === "i" && kindOf(over.id) === "i") {
       next = reorderItems(current, rawOf(active.id), rawOf(over.id));
     }
+    // bulk: ตัวที่เลือกไว้ตัวอื่นตามมารวมที่จุดวางของตัวที่จับ (เรียงตามลำดับเดิม)
+    if (carried) next = gatherItems(next, rawOf(active.id), carried);
     if (next !== current) {
       latest.current = next;
       onOrderChange(next);
@@ -328,8 +610,7 @@ export function SortableProvider({
   function onDragCancel() {
     const snapshot = beforeDrag.current;
     beforeDrag.current = null;
-    setDragging(null);
-    setActiveDrag(null);
+    endDrag();
     if (snapshot) {
       latest.current = snapshot;
       onOrderChange(snapshot);
@@ -351,6 +632,7 @@ export function SortableProvider({
         kind: "group",
         index: current.groups.indexOf(raw) + 1,
         total: current.groups.length,
+        count: 1,
       };
     }
     const group = groupOfItem(current, raw);
@@ -361,6 +643,7 @@ export function SortableProvider({
       groupId: group,
       index: list.indexOf(raw) + 1,
       total: list.length,
+      count: bulk.current?.length ?? 1,
     };
   }, []);
 
@@ -397,12 +680,15 @@ export function SortableProvider({
     ) =>
       (template ?? fallback)
         .replace("{index}", String(ctx.index))
-        .replace("{total}", String(ctx.total));
+        .replace("{total}", String(ctx.total))
+        .replace("{count}", String(ctx.count));
     const announce =
       (
         own: ((context: SortableAnnouncementContext) => string | undefined) | undefined,
         template: string | undefined,
         fallback: string,
+        // ประโยคแทนเมื่อลากหลายรายการพร้อมกัน
+        many: { template: string | undefined; fallback: string } | null,
         // ระหว่างลาก = ตำแหน่งของเป้าหมาย; ตอนปล่อย order อัปเดตแล้ว จึงใช้ตำแหน่งจริงของตัวที่ลาก
         useTarget = false,
       ) =>
@@ -416,39 +702,84 @@ export function SortableProvider({
         const context = useTarget
           ? describeTarget(active.id, over?.id ?? null)
           : describe(active.id);
-        return own?.(context) ?? fill(template, fallback, context);
+        if (own) {
+          const said = own(context);
+          if (said !== undefined) return said;
+        }
+        return many && context.count > 1
+          ? fill(many.template, many.fallback, context)
+          : fill(template, fallback, context);
       };
     return {
       onDragStart: announce(
         announcements?.onDragStart,
         text.sortable?.started,
         "เริ่มลากรายการที่ {index} จาก {total}",
+        { template: text.sortable?.startedMany, fallback: "เริ่มลาก {count} รายการที่เลือกไว้" },
       ),
       onDragOver: announce(
         announcements?.onDragOver,
         text.sortable?.moved,
         "ย้ายไปตำแหน่งที่ {index} จาก {total}",
+        null,
         true,
       ),
       onDragEnd: announce(
         announcements?.onDragEnd,
         text.sortable?.dropped,
         "วางที่ตำแหน่งที่ {index} จาก {total}",
+        null,
+      ),
+      onDragCancel: announce(
+        announcements?.onDragCancel,
+        text.sortable?.cancelled,
+        "ยกเลิกการลาก",
+        null,
       ),
-      onDragCancel: announce(announcements?.onDragCancel, text.sortable?.cancelled, "ยกเลิกการลาก"),
     };
   }, [announcements, describeTarget, text.sortable]);
 
   const groupIds = useMemo(() => order.groups.map((id) => dndId("group", id)), [order.groups]);
 
+  const groupOf = useCallback((itemId: string) => groupOfItem(order, itemId), [order]);
+  const carried = useMemo<ReadonlySet<string>>(
+    () =>
+      activeDrag && activeDrag.ids.length > 1
+        ? new Set(activeDrag.ids.filter((x) => x !== activeDrag.id))
+        : EMPTY,
+    [activeDrag],
+  );
+
   const state = useMemo<SortableState>(
     () => ({
       dragging,
       disabled,
       handleLabel: handleLabel ?? text.sortable?.handle ?? "ลากเพื่อจัดลำดับ",
       overlay: Boolean(renderOverlay),
+      activeGroup: activeDrag?.kind === "group" ? activeDrag.id : null,
+      carried,
+      multiSelect,
+      selected,
+      select,
+      groupOf,
+      register,
+      shifts,
     }),
-    [dragging, disabled, handleLabel, text.sortable?.handle, renderOverlay],
+    [
+      dragging,
+      disabled,
+      handleLabel,
+      text.sortable?.handle,
+      renderOverlay,
+      activeDrag,
+      carried,
+      multiSelect,
+      selected,
+      select,
+      groupOf,
+      register,
+      shifts,
+    ],
   );
 
   return (
@@ -458,13 +789,15 @@ export function SortableProvider({
         sensors={sensors}
         collisionDetection={collisionDetection}
         // วัดตำแหน่งที่วางใหม่ตลอดระหว่างลาก — ย้ายข้ามกลุ่มแล้ว layout เปลี่ยน ต้องใช้ตำแหน่งปัจจุบัน
-        measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}
+        // (ตอนลากกลุ่ม วัดหัวกลุ่มรวมแถวรายการทั้งก้อน — ดู measureDroppable)
+        measuring={measuring}
         accessibility={{
           screenReaderInstructions: { draggable: instructions },
           announcements: dndAnnouncements,
         }}
         onDragStart={onDragStart}
         onDragOver={onDragOver}
+        onDragMove={onDragMove}
         onDragEnd={onDragEnd}
         onDragCancel={onDragCancel}
       >
@@ -511,8 +844,18 @@ export interface SortableRow {
   /** props ที่ต้องแปะที่ "ที่จับ" — ส่งต่อให้ `<DragHandle {...handleProps} />` */
   handleProps: Record<string, unknown>;
   isDragging: boolean;
+  /** รายการนี้ถูกเลือกอยู่ (`multiSelect`) */
+  selected: boolean;
+  /**
+   * กระจายลงแถวเมื่อเปิด `multiSelect`: คลิกพร้อม ⌘/Ctrl/Shift เพื่อเลือก + `data-selected`
+   * สำหรับทำสี (`data-[selected]:bg-primary/10`) — ปิด `multiSelect` หรือเป็นแถวกลุ่ม = object ว่าง
+   */
+  selectProps: Record<string, unknown>;
 }
 
+const INTERACTIVE =
+  "a,button,input,select,textarea,label,[contenteditable=''],[contenteditable='true'],[role=button],[role=checkbox],[role=switch],[role=combobox]";
+
 /**
  * ทำให้แถวหนึ่งลากได้ — แอปเอา `ref`/`style` ไปแปะที่ `<TableRow>` และ `handleProps` ที่ `<DragHandle>`
  * `type: "group"` = ลากทั้งกลุ่ม, `"item"` = ลากรายการในกลุ่ม
@@ -533,21 +876,105 @@ export function useSortableRow({
     disabled: disabled || state.disabled,
     transition: SORT_TRANSITION,
   });
-  const dragStyle: CSSProperties = !sortable.isDragging
-    ? {}
-    : state.overlay
+  const { register, shifts, select } = state;
+  const { setNodeRef } = sortable;
+  const ref = useCallback(
+    (node: HTMLElement | null) => {
+      setNodeRef(node);
+      register(type, id, node);
+    },
+    [setNodeRef, register, type, id],
+  );
+
+  const transform = CSS.Translate.toString(sortable.transform);
+  const groupDrag = state.dragging === "group";
+  // ระหว่างลากกลุ่ม provider คำนวณระยะเลื่อนของแต่ละกลุ่มเอง — หัวกลุ่มและแถวรายการของกลุ่มอ่านค่าเดียวกัน
+  // (หัวกลุ่มมักอยู่ใน `SortableGroup` ซึ่งเป็น context ของรายการ dnd-kit จึงคำนวณให้หัวกลุ่มไม่ได้)
+  const groupId = type === "item" ? state.groupOf(id) : id;
+  const shift = useSyncExternalStore(
+    shifts.subscribe,
+    () => (groupId ? shifts.get(groupId) : undefined),
+    () => undefined,
+  );
+
+  let style: CSSProperties = { transform, transition: sortable.transition };
+  if (type === "group" && groupDrag) {
+    const own = state.activeGroup === id;
+    style = {
+      transform: shift?.transform,
+      transition: shift?.transition,
+      ...(own
+        ? state.overlay
+          ? { opacity: 0.4 }
+          : { position: "relative", zIndex: 1, opacity: 0.85 }
+        : {}),
+    };
+  } else if (sortable.isDragging) {
+    style = state.overlay
       ? // มี overlay ลอยตามเมาส์แล้ว แถวต้นทางเหลือเป็นช่องจาง ๆ บอกตำแหน่งที่จะวาง
-        { opacity: 0.4 }
-      : { position: "relative", zIndex: 1, opacity: 0.85 };
+        { ...style, opacity: 0.4 }
+      : { ...style, position: "relative", zIndex: 1, opacity: 0.85 };
+  } else if (type === "item" && groupDrag && shift) {
+    const own = state.activeGroup !== null && state.activeGroup === groupId;
+    style = {
+      transform: shift.transform,
+      transition: shift.transition,
+      ...(own
+        ? state.overlay
+          ? { opacity: 0.4 }
+          : { position: "relative", zIndex: 1, opacity: 0.85 }
+        : {}),
+    };
+  } else if (type === "item" && state.carried.has(id)) {
+    // ลากแบบ bulk: ตัวที่ตามไปด้วยจางลงตรงที่เดิม แล้วไปรวมที่จุดวางตอนปล่อย
+    style = { ...style, opacity: 0.4 };
+  }
+
+  const selectable = type === "item" && state.multiSelect;
+  const isSelected = selectable && state.selected.has(id);
+  const listeners = sortable.listeners;
+  const handleProps: Record<string, unknown> = { ...sortable.attributes, ...listeners };
+  if (selectable) {
+    handleProps.onKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+      const mod = event.metaKey || event.ctrlKey;
+      if (!mod && !event.altKey && event.key.toLowerCase() === "x") {
+        event.preventDefault();
+        select(id, "toggle");
+        return;
+      }
+      if (mod && event.key.toLowerCase() === "a") {
+        event.preventDefault();
+        select(id, "all");
+        return;
+      }
+      listeners?.onKeyDown?.(event);
+    };
+  }
+  const selectProps: Record<string, unknown> = selectable
+    ? {
+        "data-selected": isSelected ? "" : undefined,
+        onMouseDown: (event: MouseEvent<HTMLElement>) => {
+          // Shift+คลิก ไม่ให้เบราว์เซอร์ลากคลุมข้อความทั้งแถว
+          if (event.shiftKey) event.preventDefault();
+        },
+        onClick: (event: MouseEvent<HTMLElement>) => {
+          const target = event.target as Element;
+          const control = target.closest(INTERACTIVE);
+          if (control && !control.closest("[data-sortable-handle]")) return;
+          if (event.metaKey || event.ctrlKey) select(id, "toggle");
+          else if (event.shiftKey) select(id, "range");
+          else if (state.selected.size > 0) select(id, "clear");
+        },
+      }
+    : {};
+
   return {
-    ref: sortable.setNodeRef,
-    style: {
-      transform: CSS.Translate.toString(sortable.transform),
-      transition: sortable.transition,
-      ...dragStyle,
-    },
-    handleProps: { ...sortable.attributes, ...sortable.listeners },
+    ref,
+    style,
+    handleProps,
     isDragging: sortable.isDragging,
+    selected: isSelected,
+    selectProps,
   };
 }
 
@@ -617,6 +1044,7 @@ export function DragHandle({
       aria-label={label ?? state.handleLabel}
       disabled={off}
       className={cn("cursor-grab touch-none active:cursor-grabbing", className)}
+      data-sortable-handle=""
       {...handleProps}
     >
       <GripVerticalIcon />

package/src/lib/sortable-order.ts

@@ -105,6 +105,31 @@ export function moveItemToGroup(
   };
 }
 
+/** รายการทั้งหมดเรียงตามที่แสดง: ของที่ไม่มีกลุ่มก่อน แล้วไล่ตามลำดับกลุ่ม */
+export function flatItems(order: SortableOrder): string[] {
+  return [UNGROUPED, ...order.groups].flatMap((group) => order.items[group] ?? []);
+}
+
+/**
+ * ลากหลายรายการพร้อมกัน (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 items: Record<string, string[]> = {};
+  for (const [group, list] of Object.entries(order.items)) {
+    items[group] = list.flatMap((id) => (others.has(id) ? [] : id === activeId ? moving : [id]));
+  }
+  return { ...order, items };
+}
+
 /** ลำดับเหมือนกันไหม (ใช้ตัดสินว่าต้องบันทึกหรือไม่) */
 export function sameOrder(a: SortableOrder, b: SortableOrder): boolean {
   if (a === b) return true;

package/src/sortable.ts

@@ -7,6 +7,7 @@ export {
   DragHandle,
   type SortableAnnouncementContext,
   type SortableAnnouncements,
+  type SortableDrag,
   SortableGroup,
   type SortableKind,
   SortableProvider,
@@ -17,6 +18,8 @@ export {
   useSortableState,
 } from "./components/sortable/sortable-list";
 export {
+  flatItems,
+  gatherItems,
   groupOfItem,
   moveItemToGroup,
   moveWithin,