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

package/dist/esm/src/components/data-display/table/__tests__/Table.rowGroupDnd.test.js

@@ -0,0 +1,210 @@
+// @vitest-environment jsdom
+/**
+ * 묶음은 스타일 레이어이므로 드래그앤드롭 동작이 묶음 유무와 무관해야 한다.
+ * 드롭 자체는 실제 포인터 이벤트가 필요해 jsdom 으로 재현할 수 없어, 감시 등록 횟수와 콜백 전달만 고정한다.
+ */
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const monitorCalls = [];
+vi.mock('@atlaskit/pragmatic-drag-and-drop/element/adapter', () => ({
+  dropTargetForElements: () => () => undefined,
+  draggable: () => () => undefined,
+  monitorForElements: args => {
+    monitorCalls.push(args);
+    return () => undefined;
+  }
+}));
+vi.mock('@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview', () => ({
+  disableNativeDragPreview: () => undefined
+}));
+vi.mock('@atlaskit/pragmatic-drag-and-drop-auto-scroll/element', () => ({
+  autoScrollForElements: () => () => undefined
+}));
+vi.mock('@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge', () => ({
+  attachClosestEdge: data => data,
+  extractClosestEdge: () => 'bottom'
+}));
+import { planMoveIds } from '../dnd-move';
+const {
+  Table
+} = await import('../Table');
+let container;
+let root;
+beforeEach(() => {
+  monitorCalls.length = 0;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+  });
+});
+afterEach(() => {
+  act(() => {
+    root.unmount();
+  });
+  container.remove();
+});
+const rowProps = id => ({
+  key: id,
+  dragId: id,
+  children: /*#__PURE__*/createElement(Table.Cell, null, id)
+});
+const row = id => /*#__PURE__*/createElement(Table.Row, rowProps(id));
+const groupProps = (key, onRowDrop, ids) => ({
+  key,
+  onRowDrop,
+  children: ids.map(row)
+});
+const group = (key, onRowDrop, ids) => /*#__PURE__*/createElement(Table.RowGroup, groupProps(key, onRowDrop, ids));
+const bodyProps = (onRowDrop, ids) => ({
+  onRowDrop,
+  children: ids.map(row)
+});
+const plainBodyProps = ids => ({
+  children: ids.map(row)
+});
+const tableProps = children => ({
+  type: 'horizontal',
+  draggable: true,
+  children
+});
+const renderTable = children => {
+  act(() => {
+    root.render(/*#__PURE__*/createElement(Table, tableProps(children)));
+  });
+};
+describe('Table.RowGroup — 드래그앤드롭', () => {
+  it('묶음이 여러 개여도 드롭 감시는 한 번만 등록된다', () => {
+    const onRowDrop = vi.fn();
+    renderTable([group('g1', onRowDrop, ['a', 'b']), group('g2', onRowDrop, ['c', 'd']), group('g3', onRowDrop, ['e'])]);
+    expect(monitorCalls).toHaveLength(1);
+  });
+  it('묶음에 넘긴 onRowDrop 이 드롭 1회에 1번만 호출된다', () => {
+    const onRowDrop = vi.fn();
+    renderTable([group('g1', onRowDrop, ['a', 'b']), group('g2', onRowDrop, ['c', 'd'])]);
+    for (const call of monitorCalls) {
+      call.onDrop({
+        source: {
+          data: {
+            id: 'a'
+          }
+        },
+        location: {
+          current: {
+            dropTargets: [{
+              data: {
+                id: 'c'
+              }
+            }]
+          }
+        }
+      });
+    }
+    expect(onRowDrop).toHaveBeenCalledTimes(1);
+    expect(onRowDrop).toHaveBeenCalledWith('a', 'c', 'bottom', ['a']);
+  });
+  it('다중 선택 드래그는 고른 행과 그 병합 블록을 모두 넘긴다', () => {
+    const onRowDrop = vi.fn();
+    renderTable(/*#__PURE__*/createElement(Table.Body, bodyProps(onRowDrop, ['a', 'b', 'c', 'd'])));
+    const rows = Array.from(container.querySelectorAll('tbody tr'));
+    // a 가 b 를 덮고, c 는 혼자다 — a·c 를 고르면 b 도 따라와야 한다
+    rows[0].cells[0].rowSpan = 2;
+    rows[0].classList.add('ncua-table__row--selected');
+    rows[2].classList.add('ncua-table__row--selected');
+    monitorCalls[0].onDrop({
+      source: {
+        data: {
+          id: 'a',
+          moveIds: planMoveIds(rows[0])
+        }
+      },
+      location: {
+        current: {
+          dropTargets: [{
+            data: {
+              id: 'd'
+            }
+          }]
+        }
+      }
+    });
+    expect(onRowDrop).toHaveBeenCalledWith('a', 'd', 'bottom', ['a', 'b', 'c']);
+  });
+  it('고르지 않은 행을 잡으면 그 행의 블록만 넘긴다', () => {
+    const onRowDrop = vi.fn();
+    renderTable(/*#__PURE__*/createElement(Table.Body, bodyProps(onRowDrop, ['a', 'b', 'c', 'd'])));
+    const rows = Array.from(container.querySelectorAll('tbody tr'));
+    rows[0].cells[0].rowSpan = 2;
+    rows[2].classList.add('ncua-table__row--selected');
+    monitorCalls[0].onDrop({
+      source: {
+        data: {
+          id: 'a',
+          moveIds: planMoveIds(rows[0])
+        }
+      },
+      location: {
+        current: {
+          dropTargets: [{
+            data: {
+              id: 'd'
+            }
+          }]
+        }
+      }
+    });
+    expect(onRowDrop).toHaveBeenCalledWith('a', 'd', 'bottom', ['a', 'b']);
+  });
+  it('onRowDrop 을 거두면 드롭이 더 이상 호출되지 않는다', () => {
+    const onRowDrop = vi.fn();
+    const drop = () => monitorCalls[0].onDrop({
+      source: {
+        data: {
+          id: 'a'
+        }
+      },
+      location: {
+        current: {
+          dropTargets: [{
+            data: {
+              id: 'b'
+            }
+          }]
+        }
+      }
+    });
+    renderTable(/*#__PURE__*/createElement(Table.Body, bodyProps(onRowDrop, ['a', 'b'])));
+    drop();
+    expect(onRowDrop).toHaveBeenCalledTimes(1);
+    act(() => {
+      root.render(/*#__PURE__*/createElement(Table, tableProps(/*#__PURE__*/createElement(Table.Body, plainBodyProps(['a', 'b'])))));
+    });
+    drop();
+    expect(onRowDrop).toHaveBeenCalledTimes(1);
+  });
+  it('Table.Body 의 onRowDrop 동작은 묶음 도입 전과 같다', () => {
+    const onRowDrop = vi.fn();
+    renderTable(/*#__PURE__*/createElement(Table.Body, bodyProps(onRowDrop, ['a', 'b'])));
+    expect(monitorCalls).toHaveLength(1);
+    monitorCalls[0].onDrop({
+      source: {
+        data: {
+          id: 'a'
+        }
+      },
+      location: {
+        current: {
+          dropTargets: [{
+            data: {
+              id: 'b'
+            }
+          }]
+        }
+      }
+    });
+    expect(onRowDrop).toHaveBeenCalledTimes(1);
+    expect(onRowDrop).toHaveBeenCalledWith('a', 'b', 'bottom', ['a']);
+  });
+});

package/dist/esm/src/components/data-display/table/__tests__/dnd-context.test.js

@@ -46,13 +46,16 @@ describe('dnd-context — Provider 밖 기본값 (RSD-05)', () => {
     });
     expect(() => row?.setIsDragging(true)).not.toThrow();
   });
-  it('RSD-05 TableDndContext 기본값은 드래그 비활성 · 빈 tableId 다', () => {
+  it('RSD-05 TableDndContext 기본값은 드래그 비활성 · 빈 tableId · 비어 있는 드롭 핸들러 자리다', () => {
     const {
       table
     } = readDefaults();
     expect(table).toEqual({
       isDraggable: false,
-      tableId: ''
+      tableId: '',
+      onRowDropRef: {
+        current: undefined
+      }
     });
   });
 });

package/dist/esm/src/components/data-display/table/__tests__/tableSelectableStyle.test.js

@@ -0,0 +1,72 @@
+import path from 'node:path';
+import { compile as compileSass } from 'sass';
+import { describe, expect, it } from 'vitest';
+// box-shadow 는 jsdom 에서 계산되지 않으므로, 컴파일된 CSS 에서 규칙을 검사한다.
+// (page-title/__tests__/pageTitleStyle.test.ts 와 같은 방식)
+const TABLE_SCSS_PATH = path.resolve(__dirname, '../../../../../assets/styles/components/table/_index.scss');
+const compiledTableCss = compileSass(TABLE_SCSS_PATH).css;
+/** 선택자 → 선언 목록. 같은 선택자가 여러 규칙에 나오면 선언을 이어 붙인다. */
+const parseRules = css => {
+  const rules = new Map();
+  for (const [, selectorList, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const declarations = body.split(';').map(declaration => declaration.trim().replace(/\s+/g, ' ')).filter(Boolean);
+    for (const selector of selectorList.split(',').map(selector => selector.trim().replace(/\s+/g, ' '))) {
+      rules.set(selector, [...(rules.get(selector) ?? []), ...declarations]);
+    }
+  }
+  return rules;
+};
+const rules = parseRules(compiledTableCss);
+const declarationsOf = selector => rules.get(selector) ?? [];
+const SELECTABLE = '.ncua-table--selectable';
+const IN_DATA_GRID = '.ncua-table--in-data-grid.ncua-table--selectable';
+const UNSELECTED_ROW = '.ncua-table__body .ncua-table__row:not(.ncua-table__row--selected)';
+const HEADER_FIRST_CELL = '.ncua-table__header-cell:first-child';
+const COMPENSATION_LINE = 'box-shadow: inset 1px 0 0 0 var(--gray-100)';
+const NO_SHADOW = 'box-shadow: none';
+describe('Table selectable — 좌측 border 보상선', () => {
+  it('행(tr)이 보상선을 갖는다 — 병합 셀이 덮은 행의 첫 셀은 표 왼쪽 끝이 아니다', () => {
+    // Given: 컴파일된 Table CSS 에서
+    // When: selectable 의 보상 규칙을 찾으면
+    const declarations = declarationsOf(`${SELECTABLE} ${UNSELECTED_ROW}`);
+    // Then: 셀이 아니라 행 전체에 보상선을 둔다
+    expect(declarations).toContain(COMPENSATION_LINE);
+  });
+  it('헤더 첫 칸도 보상선을 갖는다', () => {
+    // Given/When: 헤더 첫 칸 규칙을 찾으면
+    // Then: 기존 보상선이 그대로다
+    expect(declarationsOf(`${SELECTABLE} ${HEADER_FIRST_CELL}`)).toContain(COMPENSATION_LINE);
+  });
+});
+describe('Table selectable — DataGrid 안에서는 보상선을 거둔다', () => {
+  it('행(tr)의 보상선이 제거된다 — DataGrid wrapper 가 외곽 border 를 담당한다', () => {
+    // Given: 컴파일된 Table CSS 에서
+    // When: in-data-grid 조합의 행 규칙을 찾으면
+    const declarations = declarationsOf(`${IN_DATA_GRID} ${UNSELECTED_ROW}`);
+    // Then: 보상선을 지워 DataGrid 외곽선과 겹치지 않는다
+    expect(declarations).toContain(NO_SHADOW);
+  });
+  it('헤더 첫 칸의 보상선이 제거된다', () => {
+    // Given/When: in-data-grid 조합의 헤더 첫 칸 규칙을 찾으면
+    // Then: 보상선을 지운다
+    expect(declarationsOf(`${IN_DATA_GRID} ${HEADER_FIRST_CELL}`)).toContain(NO_SHADOW);
+  });
+  it('보상선을 받는 모든 자리에 제거 규칙이 대응한다 — 한쪽만 넓어지면 선이 남는다', () => {
+    // Given: 보상선을 받는 selectable 선택자를 모두 모으고
+    const compensated = [...rules].filter(_ref => {
+      let [selector, declarations] = _ref;
+      return selector.startsWith(SELECTABLE) && declarations.includes(COMPENSATION_LINE);
+    }).map(_ref2 => {
+      let [selector] = _ref2;
+      return selector;
+    });
+    // When: 각 선택자의 in-data-grid 대응 규칙을 찾으면
+    const uncovered = compensated.filter(selector => {
+      const counterpart = selector.replace(SELECTABLE, IN_DATA_GRID);
+      return !declarationsOf(counterpart).includes(NO_SHADOW);
+    });
+    // Then: 대응 없이 남는 자리가 없다
+    expect(compensated.length).toBeGreaterThan(0);
+    expect(uncovered).toEqual([]);
+  });
+});

package/dist/esm/src/components/data-display/table/dnd-context.js

@@ -1,7 +1,10 @@
 import { createContext } from 'react';
 const TableDndContext = /*#__PURE__*/createContext({
   isDraggable: false,
-  tableId: ''
+  tableId: '',
+  onRowDropRef: {
+    current: undefined
+  }
 });
 const RowDndContext = /*#__PURE__*/createContext({
   dragId: undefined,

package/dist/esm/src/components/data-display/table/dnd-move.js

@@ -0,0 +1,38 @@
+import { computeRowSpanBlock, expandRowsToBlocks, locateRow as locateInBody, readRowSpans } from '../../../../assets/scripts/table/rowSpanBlock';
+const DRAG_ID_ATTRIBUTE = 'data-draggable-id';
+const toDragIds = rows => rows.map(row => row.getAttribute(DRAG_ID_ATTRIBUTE)).filter(id => id !== null);
+/** 행 위치는 `tbody` 기준이라 묶음이 여러 개면 서로 겹친다 — 어느 `tbody` 인지 함께 본다 */
+export const locateRow = rowEl => {
+  const located = locateInBody(rowEl);
+  const table = located?.body.closest('table');
+  if (!located || !table) return null;
+  return {
+    ...located,
+    bodyIndex: Array.from(table.tBodies).indexOf(located.body)
+  };
+};
+/** 병합이 덮는 행은 따로 옮길 수 없다. 드래그 단위를 그 행이 속한 병합 블록으로 넓힌다. */
+export const findRowSpanBlock = rowEl => {
+  const located = locateRow(rowEl);
+  if (!located) return null;
+  const {
+    body,
+    bodyIndex,
+    index
+  } = located;
+  const block = computeRowSpanBlock(readRowSpans(body), index);
+  return {
+    ...block,
+    bodyIndex,
+    rows: Array.from(body.rows).slice(block.start, block.end + 1)
+  };
+};
+/** 이번 드래그로 옮겨야 하는 행 전부. 고른 행이 여럿이면 각자의 병합 블록까지 끌고 온다. */
+export const planMoveIds = rowEl => {
+  const tableEl = rowEl.closest('table');
+  const selectedRows = tableEl ? Array.from(tableEl.querySelectorAll('tbody > .ncua-table__row--selected')) : [];
+  const isMultiSelect = selectedRows.length > 1 && selectedRows.includes(rowEl);
+  const rows = isMultiSelect ? expandRowsToBlocks(selectedRows) : findRowSpanBlock(rowEl)?.rows ?? [rowEl];
+  return toDragIds(rows);
+};
+export { DRAG_ID_ATTRIBUTE };

package/dist/esm/src/components/data-display/table/dnd-preview.js

@@ -87,11 +87,16 @@ const buildRowCard = _ref => {
   wrapper.appendChild(table);
   return wrapper;
 };
-const buildDragPreview = (rows, rowRect) => {
+/**
+ * @param rows 미리보기에 그릴 행. 병합 묶음은 한 건이라도 행이 여러 개다
+ * @param itemCount 옮기는 건수. 병합 묶음은 행 수와 다르므로, 생략하면 행 수를 건수로 본다
+ */
+const buildDragPreview = function (rows, rowRect) {
+  let itemCount = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : rows.length;
   const visibleCount = Math.min(rows.length, PREVIEW_MAX_ROWS);
   const hasSummary = rows.length > visibleCount;
   const totalCards = visibleCount + (hasSummary ? 1 : 0);
-  const isMulti = rows.length > 1;
+  const isMulti = itemCount > 1;
   const parentTable = rows[0]?.closest('table') ?? null;
   const rowWidth = Math.round(rowRect.width);
   const rowHeight = Math.round(rowRect.height);
@@ -101,7 +106,7 @@ const buildDragPreview = (rows, rowRect) => {
     width: `${PREVIEW_BADGE_HALF + rowWidth}px`,
     height: `${PREVIEW_BADGE_HALF + rowHeight + PREVIEW_STACK_OFFSET * (totalCards - 1)}px`
   });
-  if (isMulti) container.appendChild(buildCountBadge(rows.length));
+  if (isMulti) container.appendChild(buildCountBadge(itemCount));
   if (hasSummary) container.appendChild(buildSummaryCard(rowRect));
   // 뒤쪽 행 카드부터 렌더해서 앞쪽이 위로 올라오게
   for (let i = visibleCount - 1; i >= 0; i--) {