@suphark/ui 0.38.0 → 0.40.1

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

@@ -38,8 +38,10 @@ import {
   gatherItems,
   groupOfItem,
   moveItemToGroup,
-  reorderGroups,
+  moveItemToRoot,
+  moveRootEntry,
   reorderItems,
+  rootEntries,
   type SortableOrder,
   sameOrder,
   UNGROUPED,
@@ -110,6 +112,11 @@ function createShiftStore() {
       else shifts.delete(id);
       for (const listener of listeners) listener();
     },
+    clear() {
+      if (shifts.size === 0) return;
+      shifts.clear();
+      for (const listener of listeners) listener();
+    },
     subscribe(listener: () => void) {
       listeners.add(listener);
       return () => {
@@ -129,6 +136,9 @@ interface SortableState {
   overlay: boolean;
   /** กลุ่มที่กำลังถูกลาก (แถวรายการของกลุ่มนี้จางตามหัวกลุ่ม) */
   activeGroup: string | null;
+  /** กำลังลากของในชั้นบนสุด (กลุ่ม หรือรายการไม่มีกลุ่มเมื่อ `freeLayout`) — ระยะเลื่อนมาจาก provider */
+  rootDrag: boolean;
+  freeLayout: boolean;
   /** รายการอื่นที่ลากไปพร้อมกันแบบ bulk (ไม่รวมตัวที่จับ) — แสดงจาง ๆ ระหว่างลาก */
   carried: ReadonlySet<string>;
   multiSelect: boolean;
@@ -146,6 +156,8 @@ const SortableStateContext = createContext<SortableState>({
   handleLabel: "ลากเพื่อจัดลำดับ",
   overlay: false,
   activeGroup: null,
+  rootDrag: false,
+  freeLayout: false,
   carried: EMPTY,
   multiSelect: false,
   selected: EMPTY,
@@ -240,6 +252,13 @@ export interface SortableProviderProps {
    * ลากตัวที่เลือกอยู่ = ลากทุกตัวที่เลือกไปรวมที่จุดวาง เรียงตามลำดับเดิม
    */
   multiSelect?: boolean;
+  /**
+   * ชั้นบนสุดจัดได้อิสระ: กลุ่มกับรายการที่ไม่มีกลุ่มสลับที่กันได้ทุกแบบ (กลุ่มขึ้นไปเหนือรายการ /
+   * รายการไปอยู่ระหว่างกลุ่ม / เอารายการออกจากกลุ่มไปวางก่อนกลุ่มไหนก็ได้) — แอปต้องเรนเดอร์ตาม
+   * `rootEntries(order)` และบันทึก `sortableOrderToPayload(order).root` · ชี้ครึ่งบนของหัวกลุ่ม = วางก่อนกลุ่ม,
+   * ครึ่งล่าง = เข้ากลุ่มเป็นตัวแรก · ไม่เปิด = รายการไม่มีกลุ่มอยู่บนสุดเสมอ (แบบเดิม)
+   */
+  freeLayout?: boolean;
   /** รายการที่เลือก (ควบคุมจากภายนอก) — ไม่ส่ง = provider เก็บเอง */
   selected?: string[];
   onSelectedChange?: (ids: string[]) => void;
@@ -267,6 +286,7 @@ export function SortableProvider({
   id,
   renderOverlay,
   multiSelect = false,
+  freeLayout = false,
   selected: selectedProp,
   onSelectedChange,
   children,
@@ -395,40 +415,122 @@ export function SortableProvider({
     [blockRect],
   );
 
-  // ---------- เลื่อนทั้งก้อนระหว่างลากกลุ่ม (แบบรายการ: กลุ่มอื่นหลบ ช่องว่างของกลุ่มที่ลากเลื่อนไปจุดวาง) ----------
-  const blocks = useRef(new Map<string, { top: number; bottom: number }>());
-  const [overGroup, setOverGroup] = useState<string | null>(null);
+  // ---------- เลื่อนทั้งก้อนในชั้นบนสุด (แบบรายการ: ตัวอื่นหลบ ช่องว่างของตัวที่ลากเลื่อนไปจุดวาง) ----------
+  const freeRef = useRef(freeLayout);
+  freeRef.current = freeLayout;
   const overlayOn = Boolean(renderOverlay);
+
+  /**
+   * ลำดับที่ตัวที่ลากเรียงอยู่ด้วย (เป็น dnd id) — `freeLayout` = ชั้นบนสุดทั้งหมด,
+   * ไม่เปิด = เฉพาะกลุ่ม (รายการไม่มีกลุ่มเรียงกันเองด้วย dnd-kit) · null = ไม่ใช่การลากในชั้นบนสุด
+   */
+  const entryKeys = useCallback((current: SortableOrder, activeKey: string): string[] | null => {
+    if (freeRef.current) {
+      const keys = rootEntries(current).map((e) => dndId(e.kind, e.id));
+      return keys.includes(activeKey) ? keys : null;
+    }
+    return kindOf(activeKey) === "g" ? current.groups.map((g) => dndId("group", g)) : null;
+  }, []);
+
+  /** กรอบของสิ่งหนึ่งในชั้นบนสุด: กลุ่ม = ทั้งก้อน, รายการ = แถวเดียว */
+  const measureKey = useCallback(
+    (key: string) => {
+      const raw = rawOf(key);
+      if (kindOf(key) === "g") {
+        const header = nodes.current.groups.get(raw);
+        return header?.isConnected ? blockRect(raw, header) : null;
+      }
+      const node = nodes.current.items.get(raw);
+      return node?.isConnected ? getClientRect(node, { ignoreTransform: true }) : null;
+    },
+    [blockRect],
+  );
+
+  /** จะวาง "ก่อน" อะไร (dnd id; null = ท้ายสุดของลำดับ) — null ทั้ง object = ไม่ใช่เป้าหมายในชั้นบนสุด */
+  const [target, setTargetState] = useState<{ before: string | null } | null>(null);
+  const targetRef = useRef(target);
+  const setTarget = useCallback((next: { before: string | null } | null) => {
+    const prev = targetRef.current;
+    if (prev === next || (prev && next && prev.before === next.before)) return;
+    targetRef.current = next;
+    setTargetState(next);
+  }, []);
+
   useEffect(() => {
-    const active = activeDrag?.kind === "group" ? activeDrag.id : null;
-    const groups = order.groups;
-    if (!active) {
-      for (const g of groups) shifts.set(g, undefined);
+    if (!activeDrag) return;
+    const activeKey = dndId(activeDrag.kind, activeDrag.id);
+    const keys = entryKeys(order, activeKey);
+    if (!keys) {
+      // รายการที่ลากเข้าไปอยู่ในกลุ่มแล้ว → dnd-kit ของกลุ่มนั้นคุมต่อ
+      shifts.clear();
       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 rest = keys.filter((k) => k !== activeKey);
+    const at = target
+      ? target.before === null
+        ? rest.length
+        : rest.indexOf(target.before)
+      : keys.indexOf(activeKey);
+    const final = [...rest.slice(0, Math.max(0, at)), activeKey, ...rest.slice(Math.max(0, at))];
+    const rects = new Map(keys.map((k) => [k, measureKey(k)] as const));
+    const first = rects.get(keys[0] ?? "");
+    const second = rects.get(keys[1] ?? "");
+    if (!first) return;
+    // ช่องไฟระหว่างก้อน (ตาราง = 0, การ์ดมีระยะห่าง) — ใช้ระยะจริงระหว่างสองก้อนแรก
+    const gap = second ? Math.max(0, second.top - first.bottom) : 0;
     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]);
+    let cursor = first.top;
+    for (const key of final) {
+      const rect = rects.get(key);
+      if (!rect) continue;
+      const dy = cursor - rect.top;
+      cursor += rect.height + gap;
+      // ไม่มี overlay = ตัวที่ลากลอยตามเมาส์เอง (กลุ่ม: onDragMove, รายการ: dnd-kit)
+      if (key === activeKey && !overlayOn) continue;
+      shifts.set(key, { transform: `translate3d(0px, ${dy}px, 0)`, transition });
+    }
+  }, [activeDrag, target, order, overlayOn, shifts, entryKeys, measureKey]);
+
+  /** ตั้งเป้าหมายในชั้นบนสุดจากสิ่งที่ชี้อยู่ + ตัวที่ลากเลยครึ่งของมันหรือยัง */
+  function updateTarget(
+    active: DragMoveEvent["active"],
+    over: DragMoveEvent["over"],
+    keyboard: boolean,
+  ) {
+    const activeKey = String(active.id);
+    const keys = entryKeys(latest.current, activeKey);
+    if (!keys) {
+      setTarget(null);
+      return;
+    }
+    if (!over) return;
+    const overKey = String(over.id);
+    const nextAfter = (index: number) => keys.slice(index + 1).find((k) => k !== activeKey) ?? null;
+    if (kindOf(overKey) === "z" && rawOf(overKey) === UNGROUPED) {
+      setTarget({ before: null });
+    } else if (overKey === activeKey) {
+      setTarget({ before: nextAfter(keys.indexOf(activeKey)) });
+    } else if (keys.includes(overKey)) {
+      if (kindOf(activeKey) === "i" && kindOf(overKey) === "g") {
+        // รายการชี้ครึ่งบนของหัวกลุ่ม = วางก่อนกลุ่มนั้น
+        setTarget({ before: overKey });
+        return;
+      }
+      const a = keys.indexOf(activeKey);
+      const o = keys.indexOf(overKey);
+      const rect = measureKey(overKey);
+      const dragged = active.rect.current.translated;
+      // คีย์บอร์ดขยับทีละตำแหน่งไปทับกลางเป้าหมายพอดี → ใช้ทิศทางแทน
+      const after =
+        keyboard || !rect || !dragged
+          ? o > a
+          : dragged.top + dragged.height / 2 > (rect.top + rect.bottom) / 2;
+      setTarget({ before: after ? nextAfter(o) : overKey });
+    } else {
+      setTarget(null);
+    }
+  }
+
   const measuring = useMemo(
     () => ({ droppable: { strategy: MeasuringStrategy.Always, measure: measureDroppable } }),
     [measureDroppable],
@@ -452,10 +554,16 @@ export function SortableProvider({
    */
   const collisionDetection: CollisionDetection = useCallback((args) => {
     if (kindOf(args.active.id) === "g") {
-      return closestCenter({
-        ...args,
-        droppableContainers: args.droppableContainers.filter((c) => kindOf(c.id) === "g"),
-      });
+      // freeLayout: กลุ่มเรียงปนกับรายการไม่มีกลุ่ม → เทียบกับทั้งสองอย่าง (สิ่งที่อยู่ใต้เมาส์ก่อน)
+      const loose = new Set(latest.current.items[UNGROUPED] ?? []);
+      const rootLevel = args.droppableContainers.filter(
+        (c) =>
+          kindOf(c.id) === "g" ||
+          (freeRef.current && kindOf(c.id) === "i" && loose.has(rawOf(c.id))),
+      );
+      const scoped = { ...args, droppableContainers: rootLevel };
+      const under = freeRef.current ? pointerWithin(scoped) : [];
+      return under.length > 0 ? under.slice(0, 1) : closestCenter(scoped);
     }
     const candidates = args.droppableContainers.filter((c) => kindOf(c.id) !== "g");
     const scoped = { ...args, droppableContainers: candidates };
@@ -463,14 +571,27 @@ export function SortableProvider({
     const hits = underPointer.length > 0 ? underPointer : rectIntersection(scoped);
     let overId = getFirstCollision(hits, "id");
     if (overId != null) {
-      if (kindOf(overId) === "z") {
-        const ids = new Set(latest.current.items[rawOf(overId)] ?? []);
-        const inGroup = candidates.filter(
-          (c) => kindOf(c.id) === "i" && c.id !== args.active.id && ids.has(rawOf(c.id)),
+      const header = kindOf(overId) === "z" ? args.droppableRects.get(overId) : undefined;
+      const pointer = args.pointerCoordinates;
+      if (
+        freeRef.current &&
+        header &&
+        pointer &&
+        rawOf(overId) !== UNGROUPED &&
+        pointer.y < header.top + header.height / 2
+      ) {
+        // freeLayout: ครึ่งบนของหัวกลุ่ม = วาง "ก่อนกลุ่ม" ในชั้นบนสุด (ครึ่งล่าง = เข้ากลุ่มเป็นตัวแรก)
+        overId = dndId("group", rawOf(overId));
+      } else if (kindOf(overId) === "z" && rawOf(overId) !== UNGROUPED) {
+        // (โซนของ UNGROUPED = ที่วาง "ท้ายสุด" ไม่ใช่หัวกลุ่ม — ห้ามเปลี่ยนเป็นรายการแรก)
+        // ชี้หัวกลุ่ม = "บนสุดของกลุ่ม" → เป้าหมายคือรายการแรกที่แสดงอยู่ "รวมตัวที่ลากเอง"
+        // (เดิมเลือกตัวที่ใกล้ที่สุดที่ไม่ใช่ตัวที่ลาก: ลากเข้ากลุ่มแล้วขึ้นเป็นตัวแรกถูก แต่พอปล่อย
+        // onDragEnd ย้ายไปแทนที่ตัวแรกเดิม → กลายเป็นตัวที่สอง วางเป็นรายการแรกไม่ได้)
+        const rendered = new Set(
+          candidates.filter((c) => kindOf(c.id) === "i").map((c) => rawOf(c.id)),
         );
-        if (inGroup.length > 0) {
-          overId = closestCenter({ ...args, droppableContainers: inGroup })[0]?.id ?? overId;
-        }
+        const first = (latest.current.items[rawOf(overId)] ?? []).find((x) => rendered.has(x));
+        if (first !== undefined) overId = dndId("item", first);
       }
       lastOverId.current = overId;
       return [{ id: overId }];
@@ -503,21 +624,16 @@ export function SortableProvider({
       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);
-    }
+    setTarget(null);
     setDragging(kind);
     setActiveDrag({ kind, id: raw, ids: bulk.current ?? [raw] });
   }
 
-  /** ไม่มี overlay: ก้อนของกลุ่มที่ลากลอยตามเมาส์ทั้งก้อน (หัวกลุ่ม + แถวรายการ) */
-  function onDragMove({ active, delta }: DragMoveEvent) {
+  function onDragMove({ active, over, delta, activatorEvent }: DragMoveEvent) {
+    updateTarget(active, over, activatorEvent instanceof KeyboardEvent);
+    // ไม่มี overlay: ก้อนของกลุ่มที่ลากลอยตามเมาส์ทั้งก้อน (หัวกลุ่ม + แถวรายการ)
     if (overlayOn || kindOf(active.id) !== "g") return;
-    shifts.set(rawOf(active.id), {
+    shifts.set(String(active.id), {
       transform: `translate3d(${delta.x}px, ${delta.y}px, 0)`,
       transition: undefined,
     });
@@ -526,23 +642,54 @@ export function SortableProvider({
   function endDrag() {
     draggingRef.current = null;
     bulk.current = null;
-    setOverGroup(null);
+    setTarget(null);
     // ล้างระยะเลื่อนพร้อมกับที่ลำดับใหม่ render (รอ effect = มีเฟรมที่แถวใหม่ยังติด transform เก่า → กระพริบ)
-    for (const g of nodes.current.groups.keys()) shifts.set(g, undefined);
+    shifts.clear();
     setDragging(null);
     setActiveDrag(null);
   }
 
-  function onDragOver({ active, over }: DragOverEvent) {
-    if (over && kindOf(active.id) === "g" && kindOf(over.id) === "g") {
-      setOverGroup(rawOf(over.id));
+  function onDragOver({ active, over, activatorEvent }: DragOverEvent) {
+    const keyboard = activatorEvent instanceof KeyboardEvent;
+    if (!over || kindOf(active.id) !== "i") {
+      updateTarget(active, over, keyboard);
       return;
     }
-    if (!over || kindOf(active.id) !== "i") return;
     const current = latest.current;
+    const raw = rawOf(active.id);
+    const apply = (next: SortableOrder) => {
+      if (next === current) return;
+      movedAcross.current = true;
+      latest.current = next;
+      onOrderChange(next);
+    };
+    // ครึ่งบนของหัวกลุ่ม (freeLayout) = ออกมาวางก่อนกลุ่มนั้นในชั้นบนสุด
+    if (kindOf(over.id) === "g") {
+      if (groupOfItem(current, raw) !== UNGROUPED) {
+        apply(moveItemToRoot(current, raw, { kind: "group", id: rawOf(over.id) }));
+      }
+      updateTarget(active, over, keyboard);
+      return;
+    }
     const from = containerOf(active.id, current);
     const to = containerOf(over.id, current);
-    if (!from || !to || from === to) return;
+    if (!from || !to || from === to) {
+      updateTarget(active, over, keyboard);
+      return;
+    }
+    if (to === UNGROUPED) {
+      // ออกจากกลุ่มมาชั้นบนสุด: ก่อน/หลังรายการที่ชี้ตามครึ่งแถว (ถัดไปอาจเป็นกลุ่ม) หรือท้ายสุด
+      const root = rootEntries(current);
+      let before: (typeof root)[number] | null = null;
+      if (kindOf(over.id) === "i") {
+        const at = root.findIndex((e) => e.kind === "item" && e.id === rawOf(over.id));
+        const dragged = active.rect.current.translated;
+        const below = dragged != null && dragged.top > over.rect.top + over.rect.height / 2;
+        before = root[at + (below ? 1 : 0)] ?? null;
+      }
+      apply(moveItemToRoot(current, raw, before));
+      return;
+    }
     // วางก่อนหรือหลังแถวเป้าหมาย ตามว่าตัวที่ลากเลยครึ่งแถวนั้นลงมาหรือยัง
     // (เดิมแทรก "ก่อน" เสมอ — ลากเข้าจากด้านล่างแล้วรายการกระโดดข้ามขึ้นไป)
     let before: string | null = null;
@@ -552,17 +699,12 @@ export function SortableProvider({
       const dragged = active.rect.current.translated;
       const below = dragged != null && dragged.top > over.rect.top + over.rect.height / 2;
       before = list[at + (below ? 1 : 0)] ?? null;
-    } else if (to !== UNGROUPED) {
+    } else {
       // วางบนหัวโฟลเดอร์ = ขึ้นบนสุดของโฟลเดอร์ (ตรงกับตำแหน่งที่เห็น และไม่กระโดดตอนโฟลเดอร์ที่ย่อไว้เปิดออก)
       // ส่วนโซน "ไม่มีกลุ่ม" อยู่ท้ายตาราง จึงต่อท้าย
       before = current.items[to]?.[0] ?? null;
     }
-    const next = moveItemToGroup(current, rawOf(active.id), to, before);
-    if (next !== current) {
-      movedAcross.current = true;
-      latest.current = next;
-      onOrderChange(next);
-    }
+    apply(moveItemToGroup(current, raw, to, before));
   }
 
   /** ล้มเหลว = คืนลำดับเดิมเสมอ แล้วส่ง error ต่อให้แอป (ไม่มี `onCommitError` = ขึ้น toast ให้) */
@@ -589,12 +731,33 @@ export function SortableProvider({
   function onDragEnd({ active, over }: DragEndEvent) {
     const snapshot = beforeDrag.current;
     const carried = bulk.current;
+    // อ่านเป้าหมายก่อน endDrag (endDrag ล้างทิ้ง)
+    const finalTarget = targetRef.current;
     beforeDrag.current = null;
     endDrag();
     const current = latest.current;
     let next = current;
-    if (over && kindOf(active.id) === "g" && kindOf(over.id) === "g") {
-      next = reorderGroups(current, rawOf(active.id), rawOf(over.id));
+    const activeKey = String(active.id);
+    const keys = entryKeys(current, activeKey);
+    if (keys && finalTarget) {
+      // ชั้นบนสุด: แปลง "ก่อน X / ท้ายลำดับ" เป็นตำแหน่งใน root (ลำดับที่ไม่รวมตัวที่ลาก)
+      const rootRest = rootEntries(current)
+        .map((e) => dndId(e.kind, e.id))
+        .filter((k) => k !== activeKey);
+      const last = keys.filter((k) => k !== activeKey).at(-1);
+      const index =
+        finalTarget.before !== null
+          ? rootRest.indexOf(finalTarget.before)
+          : last
+            ? rootRest.indexOf(last) + 1
+            : rootRest.length;
+      if (index >= 0) {
+        next = moveRootEntry(
+          current,
+          { kind: kindOf(activeKey) === "g" ? "group" : "item", id: rawOf(activeKey) },
+          index,
+        );
+      }
     } else if (over && kindOf(active.id) === "i" && kindOf(over.id) === "i") {
       next = reorderItems(current, rawOf(active.id), rawOf(over.id));
     }
@@ -742,6 +905,10 @@ 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 rootDrag =
+    activeDrag !== null &&
+    (activeDrag.kind === "group" ||
+      (freeLayout && groupOfItem(order, activeDrag.id) === UNGROUPED));
   const carried = useMemo<ReadonlySet<string>>(
     () =>
       activeDrag && activeDrag.ids.length > 1
@@ -757,6 +924,8 @@ export function SortableProvider({
       handleLabel: handleLabel ?? text.sortable?.handle ?? "ลากเพื่อจัดลำดับ",
       overlay: Boolean(renderOverlay),
       activeGroup: activeDrag?.kind === "group" ? activeDrag.id : null,
+      rootDrag,
+      freeLayout,
       carried,
       multiSelect,
       selected,
@@ -772,6 +941,8 @@ export function SortableProvider({
       text.sortable?.handle,
       renderOverlay,
       activeDrag,
+      rootDrag,
+      freeLayout,
       carried,
       multiSelect,
       selected,
@@ -887,18 +1058,30 @@ export function useSortableRow({
   );
 
   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 loose = type === "item" && groupId === UNGROUPED;
+  // ระยะเลื่อนในชั้นบนสุด: กลุ่ม/รายการไม่มีกลุ่ม อ่านของตัวเอง, รายการในกลุ่มอ่านของกลุ่ม
+  const shiftKey =
+    type === "group" || loose ? dndId(type, id) : groupId ? dndId("group", groupId) : undefined;
   const shift = useSyncExternalStore(
     shifts.subscribe,
-    () => (groupId ? shifts.get(groupId) : undefined),
+    () => (shiftKey ? shifts.get(shiftKey) : undefined),
     () => undefined,
   );
 
   let style: CSSProperties = { transform, transition: sortable.transition };
-  if (type === "group" && groupDrag) {
+  if (loose && state.freeLayout && state.rootDrag) {
+    style =
+      sortable.isDragging && !state.overlay
+        ? { ...style, position: "relative", zIndex: 1, opacity: 0.85 }
+        : {
+            transform: shift?.transform,
+            transition: shift?.transition,
+            ...(sortable.isDragging || state.carried.has(id) ? { opacity: 0.4 } : {}),
+          };
+  } else if (type === "group" && state.rootDrag) {
     const own = state.activeGroup === id;
     style = {
       transform: shift?.transform,
@@ -914,7 +1097,7 @@ export function useSortableRow({
       ? // มี overlay ลอยตามเมาส์แล้ว แถวต้นทางเหลือเป็นช่องจาง ๆ บอกตำแหน่งที่จะวาง
         { ...style, opacity: 0.4 }
       : { ...style, position: "relative", zIndex: 1, opacity: 0.85 };
-  } else if (type === "item" && groupDrag && shift) {
+  } else if (type === "item" && state.rootDrag && shift) {
     const own = state.activeGroup !== null && state.activeGroup === groupId;
     style = {
       transform: shift.transform,