@ncds/ui-admin 1.8.27 → 1.8.28-alpha.1

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

@@ -0,0 +1,320 @@
+"use strict";
+
+var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
+var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
+var _react = require("react");
+var _vitest = require("vitest");
+var _Table = require("../Table");
+var _tableDndTestUtils = require("./tableDndTestUtils");
+var _tableTestUtils = require("./tableTestUtils");
+// @vitest-environment jsdom
+//
+// Table 행 드래그앤드롭 위험 경로 중 drag 쪽(DragCell 핸들 · 드래그 상태 · 프리뷰 · 자동 스크롤) — 위험 목록표 TB-xx (DnD).
+// adapter mock 방식은 Table.dnd.test.ts 머리 주석과 같다. 프리뷰 오버레이 좌표는 행의 getBoundingClientRect stub 으로 만든다.
+
+// 등록 기록은 tableDndTestUtils 의 draggables·dropTargets·monitors 가 mock 호출 이력에서 읽는다.
+_vitest.vi.mock('@atlaskit/pragmatic-drag-and-drop/element/adapter', () => ({
+  draggable: _vitest.vi.fn(() => _vitest.vi.fn()),
+  dropTargetForElements: _vitest.vi.fn(() => _vitest.vi.fn()),
+  monitorForElements: _vitest.vi.fn(() => _vitest.vi.fn())
+}));
+// 네이티브 프리뷰 비활성화·자동 스크롤은 브라우저 drag 세션이 있어야 의미가 있으므로 호출 여부만 본다.
+_vitest.vi.mock('@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview', () => ({
+  disableNativeDragPreview: _vitest.vi.fn()
+}));
+const autoScrollCleanup = _vitest.vi.hoisted(() => ({
+  calls: 0
+}));
+_vitest.vi.mock('@atlaskit/pragmatic-drag-and-drop-auto-scroll/element', () => ({
+  autoScrollForElements: _vitest.vi.fn(() => () => {
+    autoScrollCleanup.calls += 1;
+  })
+}));
+(0, _vitest.beforeEach)(() => {
+  _vitest.vi.stubGlobal('ResizeObserver', _tableTestUtils.ResizeObserverStub);
+  autoScrollCleanup.calls = 0;
+  (0, _tableDndTestUtils.trackDragOverListeners)();
+});
+(0, _vitest.afterEach)(() => {
+  (0, _tableTestUtils.cleanupRender)();
+  (0, _tableDndTestUtils.cleanupDragPreview)();
+  _vitest.vi.clearAllMocks();
+  _vitest.vi.unstubAllGlobals();
+});
+(0, _vitest.describe)('Table.DragCell 핸들 등록 (TB-08)', () => {
+  (0, _vitest.it)('TB-08 draggable 테이블이면 핸들 button 을 렌더하고 draggable 로 등록한다', () => {
+    const view = (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    const handle = (0, _tableDndTestUtils.rowOf)('a').querySelector('button.ncua-table__drag-handle');
+    (0, _vitest.expect)(handle.type).toBe('button');
+    (0, _vitest.expect)(handle.getAttribute('aria-label')).toBe('행 순서 변경');
+    (0, _vitest.expect)(handle.disabled).toBe(false);
+    (0, _vitest.expect)(handle.querySelector('svg')).not.toBeNull();
+    (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, _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
+    });
+  });
+  (0, _vitest.it)('TB-08 disabled 면 button 을 disabled 로 렌더하고 draggable 로 등록하지 않는다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a'
+    }, {
+      id: 'b',
+      disabled: true
+    }]));
+    const handle = (0, _tableDndTestUtils.rowOf)('b').querySelector('button');
+    (0, _vitest.expect)(handle.disabled).toBe(true);
+    (0, _vitest.expect)((0, _tableDndTestUtils.draggables)().map(entry => entry.element)).not.toContain(handle);
+    (0, _vitest.expect)((0, _tableDndTestUtils.draggables)()).toHaveLength(1);
+  });
+  (0, _vitest.it)('TB-08 draggable 이 아니면 핸들 없이 children 만 렌더한다', () => {
+    const view = (0, _tableTestUtils.render)(/*#__PURE__*/(0, _react.createElement)(_Table.Table, null, /*#__PURE__*/(0, _react.createElement)(_Table.Table.Body, null, /*#__PURE__*/(0, _react.createElement)(_Table.Table.Row, {
+      dragId: 'a'
+    }, /*#__PURE__*/(0, _react.createElement)(_Table.Table.DragCell, {
+      className: 'dc-extra'
+    }, '체크')))));
+    const cell = view.querySelector('td.ncua-table__drag-cell');
+    (0, _vitest.expect)(cell.classList.contains('dc-extra')).toBe(true);
+    (0, _vitest.expect)(cell.querySelector('button')).toBeNull();
+    (0, _vitest.expect)(cell.querySelector('.ncua-table__drag-cell-inner')?.textContent).toBe('체크');
+  });
+  (0, _vitest.it)('TB-08 dragId 가 없는 행의 DragCell 은 핸들은 그리지만 draggable 로 등록하지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #588 (끌 수 없는 핸들이 활성 상태로 보여 사용자가 조작 가능하다고 오인)
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: ''
+    }]));
+    (0, _vitest.expect)(document.querySelector('button.ncua-table__drag-handle')).not.toBeNull();
+    (0, _vitest.expect)((0, _tableDndTestUtils.draggables)()).toHaveLength(0);
+  });
+  _vitest.it.todo('TB-08 dragId 가 없는 행의 DragCell 은 핸들을 그리지 않거나 비활성(disabled)으로 표시한다');
+});
+(0, _vitest.describe)('Table.DragCell 드래그 상태 (TB-09)', () => {
+  (0, _vitest.it)('TB-09 onDragStart 이면 행에 is-dragging 을 붙이고 onDrop 이면 뗀다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    const args = (0, _tableDndTestUtils.draggableArgsOf)('b');
+    (0, _tableDndTestUtils.startDrag)(args);
+    (0, _vitest.expect)((0, _tableDndTestUtils.rowOf)('b').classList.contains('is-dragging')).toBe(true);
+    (0, _vitest.expect)((0, _tableDndTestUtils.rowOf)('a').classList.contains('is-dragging')).toBe(false);
+    (0, _tableDndTestUtils.endDrag)(args);
+    (0, _vitest.expect)((0, _tableDndTestUtils.rowOf)('b').classList.contains('is-dragging')).toBe(false);
+  });
+});
+(0, _vitest.describe)('Table.DragCell 드래그 프리뷰 (TB-10)', () => {
+  const stubRowRect = dragId => {
+    (0, _tableDndTestUtils.stubRect)((0, _tableDndTestUtils.rowOf)(dragId), {
+      left: _tableDndTestUtils.ROW_LEFT,
+      top: _tableDndTestUtils.ROW_TOP,
+      width: _tableDndTestUtils.ROW_WIDTH,
+      height: _tableDndTestUtils.ROW_HEIGHT
+    });
+  };
+  (0, _vitest.it)('TB-10 onGenerateDragPreview 는 네이티브 프리뷰를 끄고 body 에는 아직 아무것도 붙이지 않는다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    stubRowRect('a');
+    const nativeSetDragImage = _vitest.vi.fn();
+    (0, _tableDndTestUtils.generatePreview)((0, _tableDndTestUtils.draggableArgsOf)('a'), nativeSetDragImage);
+    (0, _vitest.expect)(_disableNativeDragPreview.disableNativeDragPreview).toHaveBeenCalledWith({
+      nativeSetDragImage
+    });
+    (0, _vitest.expect)((0, _tableDndTestUtils.previewOverlays)()).toHaveLength(0);
+  });
+  (0, _vitest.it)('TB-10 onDragStart 에 오버레이를 body 에 붙이고 포인터-행 오프셋(+배지 절반)만큼 당긴 좌표에 둔다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    stubRowRect('a');
+    const args = (0, _tableDndTestUtils.draggableArgsOf)('a');
+    (0, _tableDndTestUtils.generatePreview)(args);
+    (0, _tableDndTestUtils.startDrag)(args);
+    const [overlay] = (0, _tableDndTestUtils.previewOverlays)();
+    (0, _vitest.expect)((0, _tableDndTestUtils.previewOverlays)()).toHaveLength(1);
+    (0, _vitest.expect)(overlay.style.left).toBe(`${_tableDndTestUtils.START_X - _tableDndTestUtils.OFFSET_X}px`);
+    (0, _vitest.expect)(overlay.style.top).toBe(`${_tableDndTestUtils.START_Y - _tableDndTestUtils.OFFSET_Y}px`);
+    (0, _vitest.expect)(overlay.querySelector('.ncua-table-dnd-preview__badge')).toBeNull();
+    (0, _vitest.expect)(overlay.querySelectorAll('.ncua-table-dnd-preview__card')).toHaveLength(1);
+  });
+  (0, _vitest.it)('TB-10 dragover 마다 오버레이가 포인터를 따라가고 onDrop 이면 제거·리스너 해제한다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    stubRowRect('a');
+    const args = (0, _tableDndTestUtils.draggableArgsOf)('a');
+    (0, _tableDndTestUtils.generatePreview)(args);
+    (0, _tableDndTestUtils.startDrag)(args);
+    const [overlay] = (0, _tableDndTestUtils.previewOverlays)();
+    const dragOverHandler = _vitest.vi.mocked(document.addEventListener).mock.calls.filter(_ref => {
+      let [type] = _ref;
+      return type === 'dragover';
+    }).pop()?.[1];
+    (0, _vitest.expect)(dragOverHandler).toBeDefined();
+    (0, _tableDndTestUtils.fireDragOver)(_tableDndTestUtils.MOVE_X, _tableDndTestUtils.MOVE_Y);
+    (0, _vitest.expect)(overlay.style.left).toBe(`${_tableDndTestUtils.MOVE_X - _tableDndTestUtils.OFFSET_X}px`);
+    (0, _vitest.expect)(overlay.style.top).toBe(`${_tableDndTestUtils.MOVE_Y - _tableDndTestUtils.OFFSET_Y}px`);
+    const removeSpy = _vitest.vi.spyOn(document, 'removeEventListener');
+    try {
+      (0, _tableDndTestUtils.endDrag)(args);
+      (0, _vitest.expect)((0, _tableDndTestUtils.previewOverlays)()).toHaveLength(0);
+      (0, _vitest.expect)(overlay.isConnected).toBe(false);
+      // onDrop 이 overlay 를 먼저 비워 onDragOver 가 일찍 빠지므로, 좌표 불변만으로는 리스너 해제를 증명할 수 없다
+      (0, _vitest.expect)(removeSpy).toHaveBeenCalledWith('dragover', dragOverHandler);
+    } finally {
+      removeSpy.mockRestore();
+    }
+  });
+  (0, _vitest.it)('TB-10 onDrop 뒤 다음 드래그는 프리뷰 생성 없이 onDragStart 만 와도 오버레이를 만들지 않는다 (pendingPreview 초기화)', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    stubRowRect('a');
+    const args = (0, _tableDndTestUtils.draggableArgsOf)('a');
+    (0, _tableDndTestUtils.generatePreview)(args);
+    (0, _tableDndTestUtils.startDrag)(args);
+    (0, _tableDndTestUtils.endDrag)(args);
+    (0, _tableDndTestUtils.startDrag)(args);
+    (0, _vitest.expect)((0, _tableDndTestUtils.previewOverlays)()).toHaveLength(0);
+    (0, _tableDndTestUtils.endDrag)(args);
+  });
+  (0, _vitest.it)('TB-10 선택된 행을 끌면 같은 body 의 선택 행 전부로 프리뷰를 만들고 개수 배지를 붙인다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a',
+      selected: true
+    }, {
+      id: 'b'
+    }, {
+      id: 'c',
+      selected: true
+    }]));
+    stubRowRect('a');
+    const args = (0, _tableDndTestUtils.draggableArgsOf)('a');
+    (0, _tableDndTestUtils.generatePreview)(args);
+    (0, _tableDndTestUtils.startDrag)(args);
+    const [overlay] = (0, _tableDndTestUtils.previewOverlays)();
+    (0, _vitest.expect)(overlay.querySelector('.ncua-table-dnd-preview__badge')?.textContent).toBe('2');
+    (0, _vitest.expect)(overlay.querySelectorAll('.ncua-table-dnd-preview__card')).toHaveLength(2);
+    (0, _tableDndTestUtils.endDrag)(args);
+  });
+  (0, _vitest.it)('TB-10 선택된 행이 하나뿐이면 단일 행 프리뷰다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a',
+      selected: true
+    }, {
+      id: 'b'
+    }]));
+    stubRowRect('a');
+    const args = (0, _tableDndTestUtils.draggableArgsOf)('a');
+    (0, _tableDndTestUtils.generatePreview)(args);
+    (0, _tableDndTestUtils.startDrag)(args);
+    (0, _vitest.expect)((0, _tableDndTestUtils.previewOverlays)()[0].querySelector('.ncua-table-dnd-preview__badge')).toBeNull();
+    (0, _tableDndTestUtils.endDrag)(args);
+  });
+  (0, _vitest.it)('TB-10 선택되지 않은 행을 끌면 다른 선택 행이 있어도 그 행만 프리뷰한다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a'
+    }, {
+      id: 'b',
+      selected: true
+    }, {
+      id: 'c',
+      selected: true
+    }]));
+    stubRowRect('a');
+    const args = (0, _tableDndTestUtils.draggableArgsOf)('a');
+    (0, _tableDndTestUtils.generatePreview)(args);
+    (0, _tableDndTestUtils.startDrag)(args);
+    (0, _vitest.expect)((0, _tableDndTestUtils.previewOverlays)()[0].querySelectorAll('.ncua-table-dnd-preview__card')).toHaveLength(1);
+    (0, _tableDndTestUtils.endDrag)(args);
+  });
+  (0, _vitest.it)('TB-10 Table.Body 가 아닌 tbody 안의 선택 행이면 body 를 못 찾아 단일 행 프리뷰다', () => {
+    (0, _tableTestUtils.render)(/*#__PURE__*/(0, _react.createElement)(_Table.Table, {
+      draggable: true
+    }, /*#__PURE__*/(0, _react.createElement)('tbody', null, ['a', 'b'].map(id => /*#__PURE__*/(0, _react.createElement)(_Table.Table.Row, {
+      key: id,
+      dragId: id,
+      selected: true
+    }, /*#__PURE__*/(0, _react.createElement)(_Table.Table.DragCell, null))))));
+    stubRowRect('a');
+    const args = (0, _tableDndTestUtils.draggableArgsOf)('a');
+    (0, _tableDndTestUtils.generatePreview)(args);
+    (0, _tableDndTestUtils.startDrag)(args);
+    (0, _vitest.expect)((0, _tableDndTestUtils.previewOverlays)()[0].querySelector('.ncua-table-dnd-preview__badge')).toBeNull();
+    (0, _tableDndTestUtils.endDrag)(args);
+  });
+  (0, _vitest.it)('TB-10 drop 없이 onDragStart 가 두 번 오면 첫 오버레이가 body 에 남는다', () => {
+    // 현재 동작 고정 — 결함 후보: #588
+    // (onDragStart 가 drop 없이 다시 오면 이전 오버레이·dragover 리스너를 정리하지 않고 덮어써
+    //  첫 오버레이가 body 에 남는다. 라이브러리가 한 드래그에 onDragStart 를 두 번 부르지 않는 한 발생하지 않음)
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    stubRowRect('a');
+    const args = (0, _tableDndTestUtils.draggableArgsOf)('a');
+    (0, _tableDndTestUtils.generatePreview)(args);
+    (0, _tableDndTestUtils.startDrag)(args);
+    (0, _tableDndTestUtils.startDrag)(args);
+    const [stale, current] = (0, _tableDndTestUtils.previewOverlays)();
+    (0, _tableDndTestUtils.endDrag)(args);
+    (0, _tableDndTestUtils.fireDragOver)(_tableDndTestUtils.MOVE_X, _tableDndTestUtils.MOVE_Y);
+    (0, _vitest.expect)((0, _tableDndTestUtils.previewOverlays)()).toEqual([stale]);
+    (0, _vitest.expect)(current.isConnected).toBe(false);
+    (0, _vitest.expect)(stale.style.left).toBe(`${_tableDndTestUtils.START_X - _tableDndTestUtils.OFFSET_X}px`);
+  });
+  _vitest.it.todo('TB-10 onDragStart 가 drop 없이 다시 와도 이전 오버레이·dragover 리스너를 정리한다');
+});
+(0, _vitest.describe)('Table 자동 스크롤 (TB-16)', () => {
+  const MAX_HEIGHT = 300;
+  (0, _vitest.it)('TB-16 draggable + fixedHeader + maxHeight 이면 scroll-container 에 autoScroll 을 등록하고 언마운트 시 해제한다', () => {
+    const view = (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a'
+    }], {
+      fixedHeader: true,
+      maxHeight: MAX_HEIGHT
+    }));
+    (0, _vitest.expect)(_element.autoScrollForElements).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(_element.autoScrollForElements).toHaveBeenCalledWith({
+      element: view.querySelector('.ncua-table__scroll-container')
+    });
+    (0, _tableTestUtils.render)(/*#__PURE__*/(0, _react.createElement)('div'));
+    (0, _vitest.expect)(autoScrollCleanup.calls).toBe(1);
+  });
+  _vitest.it.each([['fixedHeader 없음', {
+    maxHeight: MAX_HEIGHT
+  }], ['maxHeight 없음', {
+    fixedHeader: true
+  }], ['draggable=false', {
+    draggable: false,
+    fixedHeader: true,
+    maxHeight: MAX_HEIGHT
+  }], ['type=vertical', {
+    type: 'vertical',
+    fixedHeader: true,
+    maxHeight: MAX_HEIGHT
+  }]])('TB-16 %s 이면 autoScroll 을 등록하지 않는다', (_label, props) => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a'
+    }], props));
+    (0, _vitest.expect)(_element.autoScrollForElements).not.toHaveBeenCalled();
+  });
+});
+(0, _vitest.describe)('Table.DragCell 행 밖 핸들 (TB-26)', () => {
+  (0, _vitest.it)('TB-26 핸들이 tr 밖에 있으면 프리뷰를 건너뛰고 onDragStart 는 is-dragging 만 붙인다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    const args = (0, _tableDndTestUtils.draggableArgsOf)('a');
+    const handle = args.element;
+    const homeRow = (0, _tableDndTestUtils.rowOf)('a');
+    document.body.appendChild(handle);
+    try {
+      (0, _tableDndTestUtils.generatePreview)(args);
+      (0, _tableDndTestUtils.startDrag)(args);
+      (0, _vitest.expect)(_disableNativeDragPreview.disableNativeDragPreview).not.toHaveBeenCalled();
+      (0, _vitest.expect)((0, _tableDndTestUtils.previewOverlays)()).toHaveLength(0);
+      (0, _vitest.expect)(homeRow.classList.contains('is-dragging')).toBe(true);
+      (0, _tableDndTestUtils.endDrag)(args);
+    } finally {
+      handle.remove();
+    }
+  });
+  (0, _vitest.it)('TB-26 언마운트 뒤 늦게 온 onGenerateDragPreview 는 핸들 ref 가 비어 아무것도 하지 않는다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    const args = (0, _tableDndTestUtils.draggableArgsOf)('a');
+    (0, _tableTestUtils.render)(/*#__PURE__*/(0, _react.createElement)('div'));
+    (0, _tableDndTestUtils.generatePreview)(args);
+    (0, _vitest.expect)(_disableNativeDragPreview.disableNativeDragPreview).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,313 @@
+"use strict";
+
+var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
+var _react = require("react");
+var _vitest = require("vitest");
+var _tableDndTestUtils = require("./tableDndTestUtils");
+var _tableTestUtils = require("./tableTestUtils");
+// @vitest-environment jsdom
+//
+// Table 행 드래그앤드롭 위험 경로 중 drop 쪽(Body monitor · Row dropTarget · tableId) — 위험 목록표 TB-xx (DnD).
+// jsdom 은 HTML5 drag 이벤트로 pragmatic-drag-and-drop 을 구동할 수 없어, adapter 의
+// draggable · dropTargetForElements · monitorForElements 를 mock 해 넘겨받은 옵션을 캡처하고
+// 콜백(getInitialData · getData · canMonitor · onDrop)을 직접 호출한다.
+// closest-edge(hitbox) 는 실제 구현을 써서 행의 getBoundingClientRect stub 으로 top/bottom 을 만든다.
+// 핸들·프리뷰·자동 스크롤(drag 쪽)은 Table.dnd.dragCell.test.ts 가 맡는다.
+
+// 등록 기록은 tableDndTestUtils 의 draggables·dropTargets·monitors 가 mock 호출 이력에서 읽는다.
+_vitest.vi.mock('@atlaskit/pragmatic-drag-and-drop/element/adapter', () => ({
+  draggable: _vitest.vi.fn(() => _vitest.vi.fn()),
+  dropTargetForElements: _vitest.vi.fn(() => _vitest.vi.fn()),
+  monitorForElements: _vitest.vi.fn(() => _vitest.vi.fn())
+}));
+(0, _vitest.afterEach)(() => {
+  (0, _tableTestUtils.cleanupRender)();
+  _vitest.vi.clearAllMocks();
+});
+const DRAG_OVER_TOP = 'ncua-table__row--drag-over-top';
+const DRAG_OVER_BOTTOM = 'ncua-table__row--drag-over-bottom';
+(0, _vitest.describe)('Table 행 드롭 → onRowDrop (TB-01)', () => {
+  (0, _vitest.it)('TB-01 다른 행의 아래쪽 절반에 놓으면 onRowDrop(fromId, toId, "bottom") 을 1회 호출한다', () => {
+    const onRowDrop = _vitest.vi.fn();
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(onRowDrop));
+    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.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.it)('TB-01 target 에 closest edge 정보가 없으면 "top" 으로 전달한다', () => {
+    const onRowDrop = _vitest.vi.fn();
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(onRowDrop));
+    const source = (0, _tableDndTestUtils.sourceDataOf)('a');
+    (0, _tableDndTestUtils.dropOnMonitors)(source, [{
+      id: 'b',
+      tableId: source.tableId
+    }]);
+    (0, _vitest.expect)(onRowDrop).toHaveBeenCalledWith('a', 'b', 'top');
+  });
+  (0, _vitest.it)('TB-01 여러 drop target 이 겹치면 가장 안쪽(첫 번째) target 기준으로 전달한다', () => {
+    const onRowDrop = _vitest.vi.fn();
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(onRowDrop));
+    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.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-/)
+    });
+    (0, _vitest.expect)(target.id).toBe('b');
+    (0, _vitest.expect)(target.tableId).toBe(source.tableId);
+  });
+});
+(0, _vitest.describe)('Table.Body drop 가드 (TB-03)', () => {
+  (0, _vitest.it)('TB-03 onRowDrop 이 없으면 drop 이 와도 예외 없이 무시한다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a'
+    }, {
+      id: 'b'
+    }]));
+    const source = (0, _tableDndTestUtils.sourceDataOf)('a');
+    (0, _vitest.expect)(() => (0, _tableDndTestUtils.dropOnMonitors)(source, [(0, _tableDndTestUtils.targetDataOf)('b', _tableDndTestUtils.LOWER_HALF_Y, source)])).not.toThrow();
+  });
+  (0, _vitest.it)('TB-03 drop target 이 없으면(테이블 밖에 놓음) onRowDrop 을 호출하지 않는다', () => {
+    const onRowDrop = _vitest.vi.fn();
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(onRowDrop));
+    (0, _tableDndTestUtils.dropOnMonitors)((0, _tableDndTestUtils.sourceDataOf)('a'), []);
+    (0, _vitest.expect)(onRowDrop).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('TB-03 자기 자신 위에 놓으면(fromId === toId) onRowDrop 을 호출하지 않는다', () => {
+    const onRowDrop = _vitest.vi.fn();
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(onRowDrop));
+    const source = (0, _tableDndTestUtils.sourceDataOf)('a');
+    (0, _tableDndTestUtils.dropOnMonitors)(source, [(0, _tableDndTestUtils.targetDataOf)('a', _tableDndTestUtils.LOWER_HALF_Y, source)]);
+    (0, _vitest.expect)(onRowDrop).not.toHaveBeenCalled();
+  });
+  _vitest.it.each([['source id 가 숫자', {
+    id: 1
+  }, {
+    id: 'b'
+  }], ['target id 가 숫자', {
+    id: 'a'
+  }, {
+    id: 2
+  }], ['target id 가 없음', {
+    id: 'a'
+  }, {}]])('TB-03 %s 이면 onRowDrop 을 호출하지 않는다', (_label, sourcePatch, targetPatch) => {
+    const onRowDrop = _vitest.vi.fn();
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(onRowDrop));
+    const source = (0, _tableDndTestUtils.sourceDataOf)('a');
+    (0, _tableDndTestUtils.dropOnMonitors)({
+      ...source,
+      ...sourcePatch
+    }, [{
+      tableId: source.tableId,
+      ...targetPatch
+    }]);
+    (0, _vitest.expect)(onRowDrop).not.toHaveBeenCalled();
+  });
+});
+(0, _vitest.describe)('Table.Body canMonitor — 테이블 격리 (TB-04)', () => {
+  const twoTables = (first, second) => /*#__PURE__*/(0, _react.createElement)('div', null, /*#__PURE__*/(0, _react.createElement)('section', {
+    key: 'first',
+    id: 'first'
+  }, (0, _tableDndTestUtils.draggableTable)(first)), /*#__PURE__*/(0, _react.createElement)('section', {
+    key: 'second',
+    id: 'second'
+  }, (0, _tableDndTestUtils.draggableTable)(second)));
+  const sectionOf = sectionId => document.getElementById(sectionId);
+  (0, _vitest.it)('TB-04 다른 tableId 의 source 는 canMonitor 가 거부해 그 테이블의 onRowDrop 이 불리지 않는다', () => {
+    const first = _vitest.vi.fn();
+    const second = _vitest.vi.fn();
+    (0, _tableTestUtils.render)(twoTables(first, second));
+    const source = (0, _tableDndTestUtils.sourceDataOf)('a', sectionOf('first'));
+    (0, _tableDndTestUtils.dropOnMonitors)(source, [{
+      id: 'b',
+      tableId: source.tableId
+    }]);
+    (0, _vitest.expect)(first).toHaveBeenCalledWith('a', 'b', 'top');
+    (0, _vitest.expect)(second).not.toHaveBeenCalled();
+    (0, _vitest.expect)((0, _tableDndTestUtils.sourceDataOf)('a', sectionOf('second')).tableId).not.toBe(source.tableId);
+  });
+  (0, _vitest.it)('TB-04 canMonitor 는 자기 tableId 의 source 만 통과시킨다', () => {
+    (0, _tableTestUtils.render)(twoTables(_vitest.vi.fn(), _vitest.vi.fn()));
+    // monitor 는 Body effect 등록 순서(=DOM 순서)로 쌓이므로 첫 번째가 #first 테이블 것이다.
+    const [firstMonitor, secondMonitor] = (0, _tableDndTestUtils.monitors)();
+    const source = (0, _tableDndTestUtils.sourceDataOf)('a', sectionOf('second'));
+    const payload = {
+      source: {
+        data: source
+      }
+    };
+    (0, _vitest.expect)(firstMonitor.canMonitor?.(payload)).toBe(false);
+    (0, _vitest.expect)(secondMonitor.canMonitor?.(payload)).toBe(true);
+  });
+  (0, _vitest.it)('TB-04 다른 테이블의 행 위에 놓으면 source 테이블의 onRowDrop 이 상대 테이블 행 id 로 호출된다', () => {
+    // 현재 동작 고정 — 결함 후보: #588
+    // (행 dropTarget 에 canDrop 이 없고 Body.onDrop 이 target.data.tableId 를 확인하지 않아,
+    //  A 테이블 행을 B 테이블 행 위에 놓으면 A 의 onRowDrop 이 B 의 행 id 로 호출된다)
+    const first = _vitest.vi.fn();
+    const second = _vitest.vi.fn();
+    (0, _tableTestUtils.render)(twoTables(first, second));
+    const source = (0, _tableDndTestUtils.sourceDataOf)('a', sectionOf('first'));
+    const foreignTarget = (0, _tableDndTestUtils.sourceDataOf)('c', sectionOf('second'));
+    (0, _tableDndTestUtils.dropOnMonitors)(source, [{
+      id: 'c',
+      tableId: foreignTarget.tableId
+    }]);
+    (0, _vitest.expect)(first).toHaveBeenCalledWith('a', 'c', 'top');
+    (0, _vitest.expect)(second).not.toHaveBeenCalled();
+  });
+  _vitest.it.todo('TB-04 다른 테이블의 행 위에 놓으면 어느 테이블의 onRowDrop 도 호출하지 않는다 (canDrop 또는 target tableId 검사)');
+});
+(0, _vitest.describe)('Table.Body onRowDrop ref 갱신 (TB-05)', () => {
+  (0, _vitest.it)('TB-05 onRowDrop 을 교체해도 monitor 를 재구독하지 않고 최신 콜백을 호출한다', () => {
+    const first = _vitest.vi.fn();
+    const latest = _vitest.vi.fn();
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(first));
+    const monitorBefore = (0, _tableDndTestUtils.monitors)()[0];
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(latest));
+    const source = (0, _tableDndTestUtils.sourceDataOf)('a');
+    (0, _tableDndTestUtils.dropOnMonitors)(source, [(0, _tableDndTestUtils.targetDataOf)('b', _tableDndTestUtils.LOWER_HALF_Y, source)]);
+    (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.it)('TB-05 onRowDrop 을 undefined 로 바꾸면 이후 drop 은 무시된다', () => {
+    const first = _vitest.vi.fn();
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(first));
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(undefined));
+    const source = (0, _tableDndTestUtils.sourceDataOf)('a');
+    (0, _tableDndTestUtils.dropOnMonitors)(source, [(0, _tableDndTestUtils.targetDataOf)('b', _tableDndTestUtils.LOWER_HALF_Y, source)]);
+    (0, _vitest.expect)(first).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('TB-05 언마운트하면 monitor 구독을 해제한다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    (0, _vitest.expect)((0, _tableDndTestUtils.monitors)()).toHaveLength(1);
+    (0, _tableTestUtils.render)(/*#__PURE__*/(0, _react.createElement)('div'));
+    (0, _vitest.expect)((0, _tableDndTestUtils.monitors)()).toHaveLength(0);
+  });
+});
+(0, _vitest.describe)('Table.Row dropTarget 등록 (TB-06)', () => {
+  (0, _vitest.it)('TB-06 draggable 테이블에서 dragId 가 있는 행만 dropTarget 으로 등록한다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a'
+    }, {
+      id: '',
+      withDragCell: false
+    }]));
+    (0, _vitest.expect)((0, _tableDndTestUtils.dropTargets)().map(entry => entry.element.dataset.draggableId)).toEqual(['a']);
+  });
+  (0, _vitest.it)('TB-06 draggable 이 아니면 dragId 가 있어도 dropTarget·draggable 을 등록하지 않는다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a'
+    }, {
+      id: 'b'
+    }], {
+      draggable: false
+    }));
+    (0, _vitest.expect)((0, _tableDndTestUtils.dropTargets)()).toHaveLength(0);
+    (0, _vitest.expect)((0, _tableDndTestUtils.draggables)()).toHaveLength(0);
+  });
+  (0, _vitest.it)('TB-06 getData 는 {id, tableId} 에 top/bottom 만 허용한 closest edge 를 붙인다 (좌우 0px 이어도 left/right 아님)', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    const source = (0, _tableDndTestUtils.sourceDataOf)('a');
+    const upper = (0, _tableDndTestUtils.targetDataOf)('b', _tableDndTestUtils.UPPER_HALF_Y, source);
+    const lower = (0, _tableDndTestUtils.targetDataOf)('b', _tableDndTestUtils.LOWER_HALF_Y, source);
+    (0, _vitest.expect)(upper).toMatchObject({
+      id: 'b',
+      tableId: source.tableId
+    });
+    (0, _vitest.expect)((0, _closestEdge.extractClosestEdge)(upper)).toBe('top');
+    (0, _vitest.expect)((0, _closestEdge.extractClosestEdge)(lower)).toBe('bottom');
+  });
+  (0, _vitest.it)('TB-06 행이 언마운트되면 dropTarget 등록을 해제한다', () => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a'
+    }, {
+      id: 'b'
+    }]));
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a'
+    }]));
+    (0, _vitest.expect)((0, _tableDndTestUtils.dropTargets)().map(entry => entry.element.dataset.draggableId)).toEqual(['a']);
+  });
+});
+(0, _vitest.describe)('Table.Row drag-over 표시 (TB-07)', () => {
+  _vitest.it.each(['onDragEnter', 'onDrag'])('TB-07 %s: 위쪽 절반이면 drag-over-top 클래스를 붙인다', event => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    (0, _tableDndTestUtils.fireRowEvent)(event, 'b', 'c', _tableDndTestUtils.UPPER_HALF_Y);
+    (0, _vitest.expect)((0, _tableDndTestUtils.rowOf)('b').classList.contains(DRAG_OVER_TOP)).toBe(true);
+    (0, _vitest.expect)((0, _tableDndTestUtils.rowOf)('b').classList.contains(DRAG_OVER_BOTTOM)).toBe(false);
+  });
+  _vitest.it.each(['onDragEnter', 'onDrag'])('TB-07 %s: 아래쪽 절반이어도 다음 행이 있으면 표시하지 않는다 (다음 행의 top 과 중복 방지)', event => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    (0, _tableDndTestUtils.fireRowEvent)(event, 'b', 'a', _tableDndTestUtils.LOWER_HALF_Y);
+    (0, _vitest.expect)((0, _tableDndTestUtils.rowOf)('b').classList.contains(DRAG_OVER_TOP)).toBe(false);
+    (0, _vitest.expect)((0, _tableDndTestUtils.rowOf)('b').classList.contains(DRAG_OVER_BOTTOM)).toBe(false);
+  });
+  _vitest.it.each(['onDragEnter', 'onDrag'])('TB-07 %s: 마지막 행의 아래쪽 절반이면 drag-over-bottom 을 붙인다', event => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    (0, _tableDndTestUtils.fireRowEvent)(event, 'c', 'a', _tableDndTestUtils.LOWER_HALF_Y);
+    (0, _vitest.expect)((0, _tableDndTestUtils.rowOf)('c').classList.contains(DRAG_OVER_BOTTOM)).toBe(true);
+  });
+  _vitest.it.each(['onDragEnter', 'onDrag'])('TB-07 %s: 자기 자신 위에서는 표시하지 않는다', event => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    (0, _tableDndTestUtils.fireRowEvent)(event, 'a', 'a', _tableDndTestUtils.UPPER_HALF_Y);
+    (0, _vitest.expect)((0, _tableDndTestUtils.rowOf)('a').classList.contains(DRAG_OVER_TOP)).toBe(false);
+  });
+  _vitest.it.each(['onDragLeave', 'onDrop'])('TB-07 %s 이면 표시를 지운다', event => {
+    (0, _tableTestUtils.render)((0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()));
+    (0, _tableDndTestUtils.fireRowEvent)('onDragEnter', 'b', 'c', _tableDndTestUtils.UPPER_HALF_Y);
+    (0, _vitest.expect)((0, _tableDndTestUtils.rowOf)('b').classList.contains(DRAG_OVER_TOP)).toBe(true);
+    (0, _tableDndTestUtils.fireRowEvent)(event, 'b', 'c', _tableDndTestUtils.UPPER_HALF_Y);
+    (0, _vitest.expect)((0, _tableDndTestUtils.rowOf)('b').classList.contains(DRAG_OVER_TOP)).toBe(false);
+  });
+});
+(0, _vitest.describe)('Table type=vertical + draggable (TB-11)', () => {
+  (0, _vitest.it)('TB-11 vertical 이면 draggable=true 여도 클래스·핸들·dropTarget·draggable 을 만들지 않는다', () => {
+    const view = (0, _tableTestUtils.render)((0, _tableDndTestUtils.customTable)([{
+      id: 'a'
+    }, {
+      id: 'b'
+    }], {
+      type: 'vertical'
+    }));
+    (0, _vitest.expect)(view.querySelector('.ncua-table')?.classList.contains('ncua-table--draggable')).toBe(false);
+    (0, _vitest.expect)(view.querySelector('button.ncua-table__drag-handle')).toBeNull();
+    (0, _vitest.expect)((0, _tableDndTestUtils.dropTargets)()).toHaveLength(0);
+    (0, _vitest.expect)((0, _tableDndTestUtils.draggables)()).toHaveLength(0);
+  });
+});
+(0, _vitest.describe)('Table tableId (TB-25)', () => {
+  (0, _vitest.it)('TB-25 인스턴스마다 다른 tableId 를 쓰고 리렌더해도 유지해 monitor 를 재구독하지 않는다', () => {
+    (0, _tableTestUtils.render)(/*#__PURE__*/(0, _react.createElement)('div', null, (0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()), /*#__PURE__*/(0, _react.createElement)('div', {
+      key: 'x'
+    })));
+    const before = (0, _tableDndTestUtils.sourceDataOf)('a').tableId;
+    const monitorBefore = (0, _tableDndTestUtils.monitors)()[0];
+    (0, _tableTestUtils.render)(/*#__PURE__*/(0, _react.createElement)('div', null, (0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()), /*#__PURE__*/(0, _react.createElement)('div', {
+      key: 'x'
+    }, '변경')));
+    (0, _vitest.expect)((0, _tableDndTestUtils.sourceDataOf)('a').tableId).toBe(before);
+    (0, _vitest.expect)((0, _tableDndTestUtils.monitors)()[0]).toBe(monitorBefore);
+    (0, _tableTestUtils.render)(/*#__PURE__*/(0, _react.createElement)('div', null, (0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()), /*#__PURE__*/(0, _react.createElement)('section', {
+      key: 'y'
+    }, (0, _tableDndTestUtils.draggableTable)(_vitest.vi.fn()))));
+    const ids = new Set((0, _tableDndTestUtils.draggables)().map(entry => (entry.getInitialData?.({})).tableId));
+    (0, _vitest.expect)(ids.size).toBe(2);
+  });
+});