@ncds/ui-admin 1.8.28-alpha.3 → 1.8.28-alpha.4

package/dist/cjs/assets/scripts/table/rowSpanBlock.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.readRowSpans = exports.locateRow = exports.expandRowsToBlocks = exports.computeRowSpanBlock = exports.computeOpenEdges = exports.collectBlockIndices = void 0;
+const SINGLE_ROW = 1;
+const collectRanges = rowSpans => rowSpans.flatMap((spans, index) => spans.filter(span => span > SINGLE_ROW).map(span => ({
+  start: index,
+  end: Math.min(index + span - SINGLE_ROW, rowSpans.length - 1)
+})));
+const overlaps = (a, b) => a.start <= b.end && b.start <= a.end;
+/**
+ * 병합을 쪼개지 않고 통째로 옮길 수 있는 최소 행 구간을 구한다.
+ * 범위가 겹치면 어느 쪽도 쪼갤 수 없으므로 연결된 범위를 모두 합친다.
+ *
+ * @param rowSpans 행별 셀 rowSpan 목록. 병합에 덮여 생략된 셀은 포함하지 않는다
+ * @param index 기준 행의 위치
+ */
+const computeRowSpanBlock = (rowSpans, index) => {
+  const ranges = collectRanges(rowSpans);
+  let block = {
+    start: index,
+    end: index
+  };
+  let expanded = true;
+  while (expanded) {
+    expanded = false;
+    for (const range of ranges) {
+      if (!overlaps(range, block)) continue;
+      const start = Math.min(block.start, range.start);
+      const end = Math.max(block.end, range.end);
+      if (start !== block.start || end !== block.end) {
+        block = {
+          start,
+          end
+        };
+        expanded = true;
+      }
+    }
+  }
+  return block;
+};
+/**
+ * 드롭을 받을 수 있는 변. 블록 가운데에 떨어뜨리면 그 블록이 쪼개지므로 경계만 연다.
+ */
+exports.computeRowSpanBlock = computeRowSpanBlock;
+const computeOpenEdges = (rowSpans, index) => {
+  const block = computeRowSpanBlock(rowSpans, index);
+  const edges = [];
+  if (index === block.start) edges.push('top');
+  if (index === block.end) edges.push('bottom');
+  return edges;
+};
+/** 고른 행들이 끌고 오는 행 전부. 병합 블록을 쪼개면 병합이 깨지므로 블록째 더한다. */
+exports.computeOpenEdges = computeOpenEdges;
+const collectBlockIndices = (rowSpans, indices) => {
+  const picked = new Set();
+  for (const index of indices) {
+    const block = computeRowSpanBlock(rowSpans, index);
+    for (let row = block.start; row <= block.end; row++) {
+      picked.add(row);
+    }
+  }
+  return Array.from(picked).sort((a, b) => a - b);
+};
+/** 행이 속한 `tbody` 와 그 안에서의 위치. 표 밖 요소면 `null`. */
+exports.collectBlockIndices = collectBlockIndices;
+const locateRow = rowEl => {
+  const body = rowEl.closest('tbody');
+  if (!body) return null;
+  const index = Array.from(body.rows).indexOf(rowEl);
+  return index < 0 ? null : {
+    body,
+    index
+  };
+};
+/** 표 본문의 행별 rowSpan 을 읽어 `computeRowSpanBlock` 에 넘길 형태로 만든다. */
+exports.locateRow = locateRow;
+const readRowSpans = body => Array.from(body.rows).map(row => Array.from(row.cells).map(cell => cell.rowSpan));
+/** 다중 선택으로 고른 행들이 끌고 오는 행 전부. 행 순서는 표에 놓인 순서를 따른다. */
+exports.readRowSpans = readRowSpans;
+const expandRowsToBlocks = rows => {
+  const perBody = new Map();
+  for (const row of rows) {
+    const located = locateRow(row);
+    if (!located) continue;
+    const picked = perBody.get(located.body) ?? [];
+    picked.push(located.index);
+    perBody.set(located.body, picked);
+  }
+  return Array.from(perBody).flatMap(_ref => {
+    let [body, indices] = _ref;
+    return collectBlockIndices(readRowSpans(body), indices).map(index => body.rows[index]);
+  });
+};
+exports.expandRowsToBlocks = expandRowsToBlocks;

package/dist/cjs/src/components/data-display/table/Table.js

@@ -12,8 +12,10 @@ var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edg
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _rowSpanBlock = require("../../../../assets/scripts/table/rowSpanBlock");
 var _FloatingContext = require("../../../contexts/FloatingContext");
 var _dndContext = require("./dnd-context");
+var _dndMove = require("./dnd-move");
 var _dndPreview = require("./dnd-preview");
 var _useTableScrollbars = require("./useTableScrollbars");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -53,49 +55,51 @@ const Header = _ref => {
   });
 };
 Header.displayName = 'Table.Header';
+// 묶음마다 호출되므로 핸들러 없는 묶음이 있는 묶음을 덮지 않게 둔다.
+// 거둘 때는 자기가 넣은 것만 비운다 — 조건부로 넘긴 핸들러를 끄면 드롭도 멈춰야 한다.
+const useRowDropHandler = onRowDrop => {
+  const {
+    onRowDropRef
+  } = (0, _react.useContext)(_dndContext.TableDndContext);
+  (0, _react.useEffect)(() => {
+    if (!onRowDrop) {
+      return;
+    }
+    onRowDropRef.current = onRowDrop;
+    return () => {
+      if (onRowDropRef.current === onRowDrop) {
+        onRowDropRef.current = undefined;
+      }
+    };
+  }, [onRowDrop, onRowDropRef]);
+};
 const Body = _ref2 => {
   let {
     children,
     className,
     onRowDrop
   } = _ref2;
-  const {
-    tableId
-  } = (0, _react.useContext)(_dndContext.TableDndContext);
-  // onRowDrop 참조를 ref로 유지 — 콜백이 매 렌더마다 재생성되어도 effect가 재구독하지 않도록
-  const onRowDropRef = (0, _react.useRef)(onRowDrop);
-  onRowDropRef.current = onRowDrop;
-  (0, _react.useEffect)(() => {
-    return (0, _adapter.monitorForElements)({
-      canMonitor: _ref3 => {
-        let {
-          source
-        } = _ref3;
-        return source.data.tableId === tableId;
-      },
-      onDrop: _ref4 => {
-        let {
-          source,
-          location
-        } = _ref4;
-        if (!onRowDropRef.current) return;
-        const target = location.current.dropTargets[0];
-        if (!target) return;
-        const fromId = source.data.id;
-        const toId = target.data.id;
-        if (typeof fromId !== 'string' || typeof toId !== 'string' || fromId === toId) return;
-        const edge = (0, _closestEdge.extractClosestEdge)(target.data);
-        onRowDropRef.current(fromId, toId, edge === 'bottom' ? 'bottom' : 'top');
-      }
-    });
-  }, [tableId]);
+  useRowDropHandler(onRowDrop);
   return (0, _jsxRuntime.jsx)("tbody", {
     className: (0, _classnames.default)('ncua-table__body', className),
     children: children
   });
 };
 Body.displayName = 'Table.Body';
-const Row = /*#__PURE__*/(0, _react.forwardRef)((_ref5, forwardedRef) => {
+const RowGroup = _ref3 => {
+  let {
+    children,
+    className,
+    onRowDrop
+  } = _ref3;
+  useRowDropHandler(onRowDrop);
+  return (0, _jsxRuntime.jsx)("tbody", {
+    className: (0, _classnames.default)('ncua-table__body', 'ncua-table__row-group', className),
+    children: children
+  });
+};
+RowGroup.displayName = 'Table.RowGroup';
+const Row = /*#__PURE__*/(0, _react.forwardRef)((_ref4, forwardedRef) => {
   let {
     children,
     className,
@@ -103,7 +107,7 @@ const Row = /*#__PURE__*/(0, _react.forwardRef)((_ref5, forwardedRef) => {
     status,
     dragId,
     ...rest
-  } = _ref5;
+  } = _ref4;
   const {
     isDraggable,
     tableId
@@ -121,8 +125,32 @@ const Row = /*#__PURE__*/(0, _react.forwardRef)((_ref5, forwardedRef) => {
   }, [forwardedRef]);
   (0, _react.useEffect)(() => {
     if (!isDraggable || !dragId || !internalRef.current) return;
+    // 끌고 있는 블록 안쪽은 드롭 대상이 아니다 — 거기 놓으면 병합이 쪼개진다
+    const isInsideDraggedBlock = data => {
+      const {
+        blockBody,
+        blockStart,
+        blockEnd
+      } = data;
+      if (typeof blockStart !== 'number' || typeof blockEnd !== 'number' || blockStart < 0) return false;
+      const located = internalRef.current ? (0, _dndMove.locateRow)(internalRef.current) : null;
+      if (!located || located.bodyIndex !== blockBody) return false;
+      return located.index >= blockStart && located.index <= blockEnd;
+    };
+    // 병합 블록 가운데에 놓으면 그 블록이 쪼개진다 — 받을 수 있는 변만 연다
+    const openEdges = () => {
+      const located = internalRef.current ? (0, _dndMove.locateRow)(internalRef.current) : null;
+      if (!located) return ['top', 'bottom'];
+      return (0, _rowSpanBlock.computeOpenEdges)((0, _rowSpanBlock.readRowSpans)(located.body), located.index);
+    };
     return (0, _adapter.dropTargetForElements)({
       element: internalRef.current,
+      canDrop: _ref5 => {
+        let {
+          source
+        } = _ref5;
+        return !isInsideDraggedBlock(source.data) && openEdges().length > 0;
+      },
       getData: _ref6 => {
         let {
           input,
@@ -134,7 +162,7 @@ const Row = /*#__PURE__*/(0, _react.forwardRef)((_ref5, forwardedRef) => {
         }, {
           input,
           element,
-          allowedEdges: ['top', 'bottom']
+          allowedEdges: openEdges()
         });
       },
       onDragEnter: _ref7 => {
@@ -202,10 +230,28 @@ const DragHeaderCell = _ref9 => {
   });
 };
 DragHeaderCell.displayName = 'Table.DragHeaderCell';
+// 미리보기에 그릴 행과 배지에 적을 건수를 정한다 — 묶음은 행이 여러 개여도 한 건이다
+const planDragPreview = (rowEl, input) => {
+  const rowRect = rowEl.getBoundingClientRect();
+  const badgeHalf = _dndPreview.PREVIEW_BADGE_SIZE / 2;
+  // 묶음마다 `tbody` 가 생기므로 표 전체에서 모은다 — 자기 `tbody` 기준이면 자기 묶음만 보인다.
+  // 대상은 `Table.Body` 가 그린 `tbody` 뿐이다 — 맨 `tbody` 의 행까지 세면 TB-10 의 단일 프리뷰가 깨진다
+  const tableEl = rowEl.classList.contains('ncua-table__row--selected') ? rowEl.closest('table') : null;
+  const selectedRows = tableEl ? Array.from(tableEl.querySelectorAll('.ncua-table__body > .ncua-table__row--selected')) : [];
+  const isMultiSelect = selectedRows.length > 1;
+  return {
+    rows: isMultiSelect ? selectedRows : (0, _dndMove.findRowSpanBlock)(rowEl)?.rows ?? [rowEl],
+    itemCount: isMultiSelect ? selectedRows.length : 1,
+    rowRect,
+    offsetX: Math.round(input.clientX - rowRect.left) + badgeHalf,
+    offsetY: Math.round(input.clientY - rowRect.top) + badgeHalf
+  };
+};
 const DragCell = _ref0 => {
   let {
     disabled,
     className,
+    rowSpan,
     children
   } = _ref0;
   const {
@@ -224,34 +270,31 @@ const DragCell = _ref0 => {
     let pendingPreview = null;
     return (0, _adapter.draggable)({
       element: handleRef.current,
-      getInitialData: () => ({
-        id: dragId,
-        tableId
-      }),
+      getInitialData: () => {
+        const rowEl = handleRef.current?.closest('tr');
+        const block = rowEl ? (0, _dndMove.findRowSpanBlock)(rowEl) : null;
+        // 블록 전체가 움직이므로 소비자에게는 블록 첫 행을 출발점으로 알린다
+        const blockId = block?.rows[0]?.getAttribute(_dndMove.DRAG_ID_ATTRIBUTE) ?? dragId;
+        return {
+          id: blockId,
+          tableId,
+          moveIds: rowEl ? (0, _dndMove.planMoveIds)(rowEl) : [],
+          blockBody: block?.bodyIndex ?? -1,
+          blockStart: block?.start ?? -1,
+          blockEnd: block?.end ?? -1
+        };
+      },
       onGenerateDragPreview: _ref1 => {
         let {
           nativeSetDragImage,
           location
         } = _ref1;
-        if (!handleRef.current) return;
-        const rowEl = handleRef.current.closest('tr');
+        const rowEl = handleRef.current?.closest('tr');
         if (!rowEl) return;
         (0, _disableNativeDragPreview.disableNativeDragPreview)({
           nativeSetDragImage
         });
-        const rowRect = rowEl.getBoundingClientRect();
-        const badgeHalf = _dndPreview.PREVIEW_BADGE_SIZE / 2;
-        const offsetX = Math.round(location.initial.input.clientX - rowRect.left) + badgeHalf;
-        const offsetY = Math.round(location.initial.input.clientY - rowRect.top) + badgeHalf;
-        const isSelected = rowEl.classList.contains('ncua-table__row--selected');
-        const bodyEl = rowEl.closest('.ncua-table__body');
-        const selectedRows = isSelected && bodyEl ? Array.from(bodyEl.querySelectorAll('.ncua-table__row--selected')) : [];
-        pendingPreview = {
-          rows: selectedRows.length > 1 ? selectedRows : [rowEl],
-          rowRect,
-          offsetX,
-          offsetY
-        };
+        pendingPreview = planDragPreview(rowEl, location.initial.input);
       },
       onDragStart: _ref10 => {
         let {
@@ -261,11 +304,12 @@ const DragCell = _ref0 => {
         if (!pendingPreview) return;
         const {
           rows,
+          itemCount,
           rowRect,
           offsetX,
           offsetY
         } = pendingPreview;
-        overlay = (0, _dndPreview.buildDragPreview)(rows, rowRect);
+        overlay = (0, _dndPreview.buildDragPreview)(rows, rowRect, itemCount);
         overlay.style.left = `${Math.round(location.initial.input.clientX) - offsetX}px`;
         overlay.style.top = `${Math.round(location.initial.input.clientY) - offsetY}px`;
         document.body.appendChild(overlay);
@@ -289,6 +333,7 @@ const DragCell = _ref0 => {
   }, [isDraggable, dragId, tableId, disabled, setIsDragging]);
   return (0, _jsxRuntime.jsx)("td", {
     className: (0, _classnames.default)('ncua-table__drag-cell', className),
+    rowSpan: rowSpan,
     children: (0, _jsxRuntime.jsxs)("span", {
       className: "ncua-table__drag-cell-inner",
       children: [isDraggable && (0, _jsxRuntime.jsx)("button", {
@@ -461,9 +506,21 @@ const sortChildren = children => {
   });
   return result;
 };
-// ──────────────────────────────────────────────
-// Main Table component
-// ──────────────────────────────────────────────
+const readRowDrop = (sourceData, target) => {
+  if (!target) return null;
+  const fromId = sourceData.id;
+  const toId = target.data.id;
+  if (typeof fromId !== 'string' || typeof toId !== 'string' || fromId === toId) return null;
+  const isStringArray = v => Array.isArray(v) && v.every(x => typeof x === 'string');
+  const moveIds = isStringArray(sourceData.moveIds) ? sourceData.moveIds : [fromId];
+  const edge = (0, _closestEdge.extractClosestEdge)(target.data) === 'bottom' ? 'bottom' : 'top';
+  return {
+    fromId,
+    toId,
+    edge,
+    moveIds
+  };
+};
 const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref17, ref) => {
   let {
     type = 'horizontal',
@@ -480,6 +537,25 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref17, ref) => {
   } = _ref17;
   const tableIdRef = (0, _react.useRef)(`ncua-table-${Math.random().toString(_dndPreview.TABLE_DND_ID_RADIX).slice(_dndPreview.TABLE_DND_ID_SLICE_START, _dndPreview.TABLE_DND_ID_SLICE_END)}`);
   const tableId = tableIdRef.current;
+  // 콜백이 매 렌더마다 재생성되어도 effect 가 재구독하지 않도록 ref 로 유지한다.
+  const onRowDropRef = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(() => (0, _adapter.monitorForElements)({
+    canMonitor: _ref18 => {
+      let {
+        source
+      } = _ref18;
+      return source.data.tableId === tableId;
+    },
+    onDrop: _ref19 => {
+      let {
+        source,
+        location
+      } = _ref19;
+      const drop = readRowDrop(source.data, location.current.dropTargets[0]);
+      if (!drop) return;
+      onRowDropRef.current?.(drop.fromId, drop.toId, drop.edge, drop.moveIds);
+    }
+  }), [tableId]);
   const effectiveDraggable = draggable && type === 'horizontal';
   const tableClasses = (0, _classnames.default)('ncua-table', className, {
     'ncua-table--horizontal': type === 'horizontal',
@@ -568,7 +644,8 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref17, ref) => {
   };
   const dndContextValue = {
     isDraggable: effectiveDraggable,
-    tableId
+    tableId,
+    onRowDropRef
   };
   // horizontalScroll=true 시 외곽 wrapper + FloatingProvider 부착.
   // 핵심 — __h-scroll-container 는 <table>(또는 scroll-area) 만 감싸고, footer/pagination 은
@@ -645,6 +722,7 @@ TableComponent.displayName = 'Table';
 const Table = exports.Table = Object.assign(TableComponent, {
   Header,
   Body,
+  RowGroup,
   Row,
   DragHeaderCell,
   DragCell,

package/dist/cjs/src/components/data-display/table/__tests__/Table.dnd.dragCell.test.js

@@ -52,12 +52,17 @@ _vitest.vi.mock('@atlaskit/pragmatic-drag-and-drop-auto-scroll/element', () => (
     (0, _vitest.expect)((0, _tableDndTestUtils.draggableArgsOf)('a').element).toBe(handle);
     (0, _vitest.expect)(view.querySelectorAll('button.ncua-table__drag-handle')).toHaveLength(_tableDndTestUtils.ROW_IDS.length);
   });
-  (0, _vitest.it)('TB-08 getInitialData 는 {id: dragId, tableId} 를 돌려준다', () => {
+  (0, _vitest.it)('TB-08 getInitialData 는 {id: dragId, tableId} 와 옮길 행·블록 좌표를 돌려준다', () => {
     (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
     const tableId = (0, _tableDndTestUtils.sourceDataOf)('b').tableId;
+    // 병합이 없으면 블록은 자기 행 한 칸이고 옮길 행도 자기 자신뿐이다
     (0, _vitest.expect)((0, _tableDndTestUtils.draggableArgsOf)('a').getInitialData?.({})).toEqual({
       id: 'a',
-      tableId
+      tableId,
+      moveIds: ['a'],
+      blockBody: 0,
+      blockStart: 0,
+      blockEnd: 0
     });
   });
   (0, _vitest.it)('TB-08 disabled 면 button 을 disabled 로 렌더하고 draggable 로 등록하지 않는다', () => {

package/dist/cjs/src/components/data-display/table/__tests__/Table.dnd.test.js

@@ -33,14 +33,14 @@ const DRAG_OVER_BOTTOM = 'ncua-table__row--drag-over-bottom';
     const source = (0, _tableDndTestUtils.sourceDataOf)('a');
     (0, _tableDndTestUtils.dropOnMonitors)(source, [(0, _tableDndTestUtils.targetDataOf)('b', _tableDndTestUtils.LOWER_HALF_Y, source)]);
     (0, _vitest.expect)(onRowDrop).toHaveBeenCalledTimes(1);
-    (0, _vitest.expect)(onRowDrop).toHaveBeenCalledWith('a', 'b', 'bottom');
+    (0, _vitest.expect)(onRowDrop).toHaveBeenCalledWith('a', 'b', 'bottom', ['a']);
   });
   (0, _vitest.it)('TB-01 다른 행의 위쪽 절반에 놓으면 edge 는 "top" 이다', () => {
     const onRowDrop = _vitest.vi.fn();
     (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(onRowDrop));
     const source = (0, _tableDndTestUtils.sourceDataOf)('c');
     (0, _tableDndTestUtils.dropOnMonitors)(source, [(0, _tableDndTestUtils.targetDataOf)('a', _tableDndTestUtils.UPPER_HALF_Y, source)]);
-    (0, _vitest.expect)(onRowDrop).toHaveBeenCalledWith('c', 'a', 'top');
+    (0, _vitest.expect)(onRowDrop).toHaveBeenCalledWith('c', 'a', 'top', ['c']);
   });
   (0, _vitest.it)('TB-01 target 에 closest edge 정보가 없으면 "top" 으로 전달한다', () => {
     const onRowDrop = _vitest.vi.fn();
@@ -50,7 +50,7 @@ const DRAG_OVER_BOTTOM = 'ncua-table__row--drag-over-bottom';
       id: 'b',
       tableId: source.tableId
     }]);
-    (0, _vitest.expect)(onRowDrop).toHaveBeenCalledWith('a', 'b', 'top');
+    (0, _vitest.expect)(onRowDrop).toHaveBeenCalledWith('a', 'b', 'top', ['a']);
   });
   (0, _vitest.it)('TB-01 여러 drop target 이 겹치면 가장 안쪽(첫 번째) target 기준으로 전달한다', () => {
     const onRowDrop = _vitest.vi.fn();
@@ -58,15 +58,20 @@ const DRAG_OVER_BOTTOM = 'ncua-table__row--drag-over-bottom';
     const source = (0, _tableDndTestUtils.sourceDataOf)('a');
     (0, _tableDndTestUtils.dropOnMonitors)(source, [(0, _tableDndTestUtils.targetDataOf)('c', _tableDndTestUtils.LOWER_HALF_Y, source), (0, _tableDndTestUtils.targetDataOf)('b', _tableDndTestUtils.UPPER_HALF_Y, source)]);
     (0, _vitest.expect)(onRowDrop).toHaveBeenCalledTimes(1);
-    (0, _vitest.expect)(onRowDrop).toHaveBeenCalledWith('a', 'c', 'bottom');
+    (0, _vitest.expect)(onRowDrop).toHaveBeenCalledWith('a', 'c', 'bottom', ['a']);
   });
   (0, _vitest.it)('TB-01 행의 source·target data 에 이 테이블의 tableId 가 실린다', () => {
     (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
     const source = (0, _tableDndTestUtils.sourceDataOf)('a');
     const target = (0, _tableDndTestUtils.targetDataOf)('b', _tableDndTestUtils.LOWER_HALF_Y, source);
+    // 블록 좌표는 병합 블록 드롭 판정에 쓰인다. 병합이 없으면 자기 행 한 칸이다
     (0, _vitest.expect)(source).toEqual({
       id: 'a',
-      tableId: _vitest.expect.stringMatching(/^ncua-table-/)
+      tableId: _vitest.expect.stringMatching(/^ncua-table-/),
+      moveIds: ['a'],
+      blockBody: 0,
+      blockStart: 0,
+      blockEnd: 0
     });
     (0, _vitest.expect)(target.id).toBe('b');
     (0, _vitest.expect)(target.tableId).toBe(source.tableId);
@@ -137,7 +142,7 @@ const DRAG_OVER_BOTTOM = 'ncua-table__row--drag-over-bottom';
       id: 'b',
       tableId: source.tableId
     }]);
-    (0, _vitest.expect)(first).toHaveBeenCalledWith('a', 'b', 'top');
+    (0, _vitest.expect)(first).toHaveBeenCalledWith('a', 'b', 'top', ['a']);
     (0, _vitest.expect)(second).not.toHaveBeenCalled();
     (0, _vitest.expect)((0, _tableDndTestUtils.sourceDataOf)('a', sectionOf('second')).tableId).not.toBe(source.tableId);
   });
@@ -167,7 +172,7 @@ const DRAG_OVER_BOTTOM = 'ncua-table__row--drag-over-bottom';
       id: 'c',
       tableId: foreignTarget.tableId
     }]);
-    (0, _vitest.expect)(first).toHaveBeenCalledWith('a', 'c', 'top');
+    (0, _vitest.expect)(first).toHaveBeenCalledWith('a', 'c', 'top', ['a']);
     (0, _vitest.expect)(second).not.toHaveBeenCalled();
   });
   _vitest.it.todo('TB-04 다른 테이블의 행 위에 놓으면 어느 테이블의 onRowDrop 도 호출하지 않는다 (canDrop 또는 target tableId 검사)');
@@ -184,7 +189,7 @@ const DRAG_OVER_BOTTOM = 'ncua-table__row--drag-over-bottom';
     (0, _vitest.expect)((0, _tableDndTestUtils.monitors)()).toHaveLength(1);
     (0, _vitest.expect)((0, _tableDndTestUtils.monitors)()[0]).toBe(monitorBefore);
     (0, _vitest.expect)(first).not.toHaveBeenCalled();
-    (0, _vitest.expect)(latest).toHaveBeenCalledWith('a', 'b', 'bottom');
+    (0, _vitest.expect)(latest).toHaveBeenCalledWith('a', 'b', 'bottom', ['a']);
   });
   (0, _vitest.it)('TB-05 onRowDrop 을 undefined 로 바꾸면 이후 drop 은 무시된다', () => {
     const first = _vitest.vi.fn();

package/dist/cjs/src/components/data-display/table/__tests__/Table.rowGroup.test.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Table = require("../Table");
+// @vitest-environment jsdom
+/**
+ * `Table.RowGroup` 의 DOM 계약만 다룬다.
+ * hover·selected 배경은 CSS 캐스케이드 결과이므로 jsdom 으로 판정할 수 없다 (브라우저에서 확인).
+ */
+
+let container;
+let root;
+(0, _vitest.beforeEach)(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  (0, _testUtils.act)(() => {
+    root = (0, _client.createRoot)(container);
+  });
+});
+(0, _vitest.afterEach)(() => {
+  (0, _testUtils.act)(() => {
+    root.unmount();
+  });
+  container.remove();
+});
+// `children` 은 TableRowGroupProps 의 필수 prop 이라 createElement 의 props 인자에 담는다.
+const rowGroupProps = className => ({
+  className,
+  children: /*#__PURE__*/(0, _react.createElement)('tr', null, /*#__PURE__*/(0, _react.createElement)('td', null, '셀'))
+});
+const renderRowGroup = className => {
+  (0, _testUtils.act)(() => {
+    root.render(/*#__PURE__*/(0, _react.createElement)('table', null, /*#__PURE__*/(0, _react.createElement)(_Table.Table.RowGroup, rowGroupProps(className))));
+  });
+  const tbody = container.querySelector('tbody');
+  if (!tbody) throw new Error('tbody 가 렌더되지 않았다.');
+  return tbody;
+};
+(0, _vitest.describe)('Table.RowGroup', () => {
+  (0, _vitest.it)('ncua-table__body 와 ncua-table__row-group 을 가진 tbody 를 렌더한다', () => {
+    const tbody = renderRowGroup();
+    (0, _vitest.expect)(tbody.classList.contains('ncua-table__body')).toBe(true);
+    (0, _vitest.expect)(tbody.classList.contains('ncua-table__row-group')).toBe(true);
+  });
+  (0, _vitest.it)('전달한 className 을 기본 클래스와 함께 붙인다', () => {
+    const tbody = renderRowGroup('custom-group');
+    (0, _vitest.expect)(tbody.classList.contains('custom-group')).toBe(true);
+    (0, _vitest.expect)(tbody.classList.contains('ncua-table__body')).toBe(true);
+    (0, _vitest.expect)(tbody.classList.contains('ncua-table__row-group')).toBe(true);
+  });
+});