@ncds/ui-admin 1.8.9 → 1.8.12

package/dist/cjs/src/components/data-display/data-grid/DataGrid.js

@@ -82,7 +82,8 @@ const DataGridTable = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     hoverable,
     selectable,
     horizontalScroll,
-    minWidth
+    minWidth,
+    draggable
   } = _ref5;
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
@@ -96,6 +97,7 @@ const DataGridTable = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
       selectable: selectable,
       horizontalScroll: horizontalScroll,
       minWidth: minWidth,
+      draggable: draggable,
       children: children
     })
   });

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

@@ -5,10 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Table = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+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 _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _FloatingContext = require("../../../contexts/FloatingContext");
+var _dndContext = require("./dnd-context");
+var _dndPreview = require("./dnd-preview");
 var _useTableScrollbars = require("./useTableScrollbars");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // 가로 스크롤 디자인 기준 폭 — 14인치 모니터 + LNB 고려한 디자인 권장 너비
@@ -50,35 +56,254 @@ Header.displayName = 'Table.Header';
 const Body = _ref2 => {
   let {
     children,
-    className
+    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]);
   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)((_ref3, ref) => {
+const Row = /*#__PURE__*/(0, _react.forwardRef)((_ref5, forwardedRef) => {
   let {
     children,
     className,
     selected,
     status,
+    dragId,
     ...rest
-  } = _ref3;
-  return (0, _jsxRuntime.jsx)("tr", {
-    ref: ref,
-    className: (0, _classnames.default)('ncua-table__row', className, {
-      'ncua-table__row--selected': selected,
-      'ncua-table__row--warning': status === 'warning',
-      'ncua-table__row--error': status === 'error'
-    }),
-    ...rest,
-    children: children
+  } = _ref5;
+  const {
+    isDraggable,
+    tableId
+  } = (0, _react.useContext)(_dndContext.TableDndContext);
+  const internalRef = (0, _react.useRef)(null);
+  const [closestEdge, setClosestEdge] = (0, _react.useState)(null);
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const setRef = (0, _react.useCallback)(el => {
+    internalRef.current = el;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(el);
+    } else if (forwardedRef) {
+      forwardedRef.current = el;
+    }
+  }, [forwardedRef]);
+  (0, _react.useEffect)(() => {
+    if (!isDraggable || !dragId || !internalRef.current) return;
+    return (0, _adapter.dropTargetForElements)({
+      element: internalRef.current,
+      getData: _ref6 => {
+        let {
+          input,
+          element
+        } = _ref6;
+        return (0, _closestEdge.attachClosestEdge)({
+          id: dragId,
+          tableId
+        }, {
+          input,
+          element,
+          allowedEdges: ['top', 'bottom']
+        });
+      },
+      onDragEnter: _ref7 => {
+        let {
+          self,
+          source
+        } = _ref7;
+        if (source.data.id === dragId) return;
+        const edge = (0, _closestEdge.extractClosestEdge)(self.data);
+        setClosestEdge(edge === 'bottom' && internalRef.current?.nextElementSibling ? null : edge);
+      },
+      onDrag: _ref8 => {
+        let {
+          self,
+          source
+        } = _ref8;
+        if (source.data.id === dragId) return;
+        const edge = (0, _closestEdge.extractClosestEdge)(self.data);
+        setClosestEdge(edge === 'bottom' && internalRef.current?.nextElementSibling ? null : edge);
+      },
+      onDragLeave: () => setClosestEdge(null),
+      onDrop: () => setClosestEdge(null)
+    });
+  }, [isDraggable, dragId, tableId]);
+  return (0, _jsxRuntime.jsx)(_dndContext.RowDndContext.Provider, {
+    value: {
+      dragId,
+      setIsDragging
+    },
+    children: (0, _jsxRuntime.jsx)("tr", {
+      ref: setRef,
+      "data-draggable-id": dragId,
+      className: (0, _classnames.default)('ncua-table__row', className, {
+        'ncua-table__row--selected': selected,
+        'ncua-table__row--warning': status === 'warning',
+        'ncua-table__row--error': status === 'error',
+        'ncua-table__row--drag-over-top': closestEdge === 'top',
+        'ncua-table__row--drag-over-bottom': closestEdge === 'bottom',
+        'is-dragging': isDragging
+      }),
+      ...rest,
+      children: children
+    })
   });
 });
 Row.displayName = 'Table.Row';
-const HeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const DragHeaderCell = _ref9 => {
+  let {
+    className,
+    children
+  } = _ref9;
+  return (0, _jsxRuntime.jsx)("th", {
+    className: (0, _classnames.default)('ncua-table__header-cell', 'ncua-table__drag-header-cell', className),
+    children: (0, _jsxRuntime.jsxs)("span", {
+      className: "ncua-table__drag-cell-inner",
+      children: [(0, _jsxRuntime.jsx)("span", {
+        className: "ncua-table__drag-header-icon",
+        "aria-hidden": "true",
+        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.DotsGrid02, {
+          width: 16,
+          height: 16
+        })
+      }), children]
+    })
+  });
+};
+DragHeaderCell.displayName = 'Table.DragHeaderCell';
+const DragCell = _ref0 => {
+  let {
+    disabled,
+    className,
+    children
+  } = _ref0;
+  const {
+    isDraggable,
+    tableId
+  } = (0, _react.useContext)(_dndContext.TableDndContext);
+  const {
+    dragId,
+    setIsDragging
+  } = (0, _react.useContext)(_dndContext.RowDndContext);
+  const handleRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!isDraggable || !dragId || !handleRef.current || disabled) return;
+    let overlay = null;
+    let removePointerMove = null;
+    let pendingPreview = null;
+    return (0, _adapter.draggable)({
+      element: handleRef.current,
+      getInitialData: () => ({
+        id: dragId,
+        tableId
+      }),
+      onGenerateDragPreview: _ref1 => {
+        let {
+          nativeSetDragImage,
+          location
+        } = _ref1;
+        if (!handleRef.current) return;
+        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
+        };
+      },
+      onDragStart: _ref10 => {
+        let {
+          location
+        } = _ref10;
+        setIsDragging(true);
+        if (!pendingPreview) return;
+        const {
+          rows,
+          rowRect,
+          offsetX,
+          offsetY
+        } = pendingPreview;
+        overlay = (0, _dndPreview.buildDragPreview)(rows, rowRect);
+        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);
+        const onDragOver = e => {
+          if (!overlay) return;
+          overlay.style.left = `${e.clientX - offsetX}px`;
+          overlay.style.top = `${e.clientY - offsetY}px`;
+        };
+        document.addEventListener('dragover', onDragOver);
+        removePointerMove = () => document.removeEventListener('dragover', onDragOver);
+      },
+      onDrop: () => {
+        setIsDragging(false);
+        removePointerMove?.();
+        removePointerMove = null;
+        overlay?.remove();
+        overlay = null;
+        pendingPreview = null;
+      }
+    });
+  }, [isDraggable, dragId, tableId, disabled, setIsDragging]);
+  return (0, _jsxRuntime.jsx)("td", {
+    className: (0, _classnames.default)('ncua-table__drag-cell', className),
+    children: (0, _jsxRuntime.jsxs)("span", {
+      className: "ncua-table__drag-cell-inner",
+      children: [isDraggable && (0, _jsxRuntime.jsx)("button", {
+        ref: handleRef,
+        type: "button",
+        className: "ncua-table__drag-handle",
+        "aria-label": "\uD589 \uC21C\uC11C \uBCC0\uACBD",
+        disabled: disabled,
+        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.DotsGrid02, {})
+      }), children]
+    })
+  });
+};
+DragCell.displayName = 'Table.DragCell';
+const HeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref11, ref) => {
   let {
     children,
     className,
@@ -88,7 +313,7 @@ const HeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     minWidth,
     style,
     ...rest
-  } = _ref4;
+  } = _ref11;
   const isSortable = sortDirection !== undefined && onSort !== undefined;
   const SortIcon = isSortable ? SORT_ICONS[sortDirection] : undefined;
   return (0, _jsxRuntime.jsx)("th", {
@@ -120,13 +345,13 @@ const HeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   });
 });
 HeaderCell.displayName = 'Table.HeaderCell';
-const Cell = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+const Cell = /*#__PURE__*/(0, _react.forwardRef)((_ref12, ref) => {
   let {
     children,
     className,
     isHeader,
     ...rest
-  } = _ref5;
+  } = _ref12;
   if (isHeader) {
     return (0, _jsxRuntime.jsx)("th", {
       ref: ref,
@@ -144,55 +369,57 @@ const Cell = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   });
 });
 Cell.displayName = 'Table.Cell';
-const Footer = _ref6 => {
+const Footer = _ref13 => {
   let {
     children,
     className
-  } = _ref6;
+  } = _ref13;
   return (0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)('ncua-table__footer', className),
     children: children
   });
 };
 Footer.displayName = 'Table.Footer';
-const Pagination = _ref7 => {
+const Pagination = _ref14 => {
   let {
     children,
     className
-  } = _ref7;
+  } = _ref14;
   return (0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)('ncua-table__pagination', className),
     children: children
   });
 };
 Pagination.displayName = 'Table.Pagination';
-const ColGroup = _ref8 => {
+const ColGroup = _ref15 => {
   let {
     widths,
     minWidths
-  } = _ref8;
+  } = _ref15;
   const resolveColWidth = width => {
     if (width === undefined || width === 'auto') return undefined;
     if (typeof width === 'number') return `${width}px`;
     return width;
   };
   return (0, _jsxRuntime.jsx)("colgroup", {
-    children: widths.map((width, index) =>
-    // biome-ignore lint/suspicious/noArrayIndexKey: colgroup columns never reorder or change
-    (0, _jsxRuntime.jsx)("col", {
-      style: {
+    children: widths.map((width, index) => {
+      const colStyle = {
         width: resolveColWidth(width),
         minWidth: resolveColWidth(minWidths?.[index])
-      }
-    }, index))
+      };
+      // biome-ignore lint/suspicious/noArrayIndexKey: colgroup columns never reorder or change
+      return (0, _jsxRuntime.jsx)("col", {
+        style: colStyle
+      }, index);
+    })
   });
 };
 ColGroup.displayName = 'Table.ColGroup';
-const Empty = _ref9 => {
+const Empty = _ref16 => {
   let {
     colSpan,
     children
-  } = _ref9;
+  } = _ref16;
   return (0, _jsxRuntime.jsx)("tr", {
     children: (0, _jsxRuntime.jsx)("td", {
       colSpan: colSpan,
@@ -237,7 +464,7 @@ const sortChildren = children => {
 // ──────────────────────────────────────────────
 // Main Table component
 // ──────────────────────────────────────────────
-const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
+const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref17, ref) => {
   let {
     type = 'horizontal',
     fixedHeader = false,
@@ -246,16 +473,21 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
     selectable = false,
     horizontalScroll = false,
     minWidth,
+    draggable = false,
     children,
     className,
     ...rest
-  } = _ref0;
+  } = _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;
+  const effectiveDraggable = draggable && type === 'horizontal';
   const tableClasses = (0, _classnames.default)('ncua-table', className, {
     'ncua-table--horizontal': type === 'horizontal',
     'ncua-table--vertical': type === 'vertical',
     'ncua-table--fixed-header': fixedHeader,
     'ncua-table--hoverable': hoverable && type === 'horizontal',
-    'ncua-table--selectable': selectable
+    'ncua-table--selectable': selectable,
+    'ncua-table--draggable': effectiveDraggable
   });
   const {
     headerContent,
@@ -295,6 +527,13 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
     hScrollbarRef,
     hThumbRef
   });
+  // fixedHeader 모드에서 드래그 시 자동 스크롤
+  (0, _react.useEffect)(() => {
+    if (!effectiveDraggable || !fixedScrollEnabled || !scrollContainerRef.current) return;
+    return (0, _element.autoScrollForElements)({
+      element: scrollContainerRef.current
+    });
+  }, [effectiveDraggable, fixedScrollEnabled]);
   // <colgroup> + <thead> + <tbody> 묶음 — fixed-header 분기와 horizontalScroll 분기 모두에서 재사용
   const renderTable = () => (0, _jsxRuntime.jsxs)("table", {
     className: "ncua-table__table",
@@ -326,6 +565,10 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
       })]
     }) : renderTable();
   };
+  const dndContextValue = {
+    isDraggable: effectiveDraggable,
+    tableId
+  };
   // horizontalScroll=true 시 외곽 wrapper + FloatingProvider 부착.
   // 핵심 — __h-scroll-container 는 <table>(또는 scroll-area) 만 감싸고, footer/pagination 은
   // 그 바깥에서 항상 고정 위치. 세로 스크롤바는 h-scroll-container 형제로 배치되어
@@ -337,55 +580,61 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
     const innerStyle = {
       '--ncua-table-min-width': typeof resolvedMinWidth === 'number' ? `${resolvedMinWidth}px` : resolvedMinWidth
     };
-    return (0, _jsxRuntime.jsx)(_FloatingContext.FloatingProvider, {
-      value: FLOATING_PORTAL_VALUE,
-      children: (0, _jsxRuntime.jsxs)("div", {
-        ref: ref,
-        className: "ncua-table-wrapper",
-        style: WRAPPER_STYLE,
-        children: [(0, _jsxRuntime.jsxs)("div", {
-          className: tableClasses,
-          ...rest,
+    return (0, _jsxRuntime.jsx)(_dndContext.TableDndContext.Provider, {
+      value: dndContextValue,
+      children: (0, _jsxRuntime.jsx)(_FloatingContext.FloatingProvider, {
+        value: FLOATING_PORTAL_VALUE,
+        children: (0, _jsxRuntime.jsxs)("div", {
+          ref: ref,
+          className: "ncua-table-wrapper",
+          style: WRAPPER_STYLE,
           children: [(0, _jsxRuntime.jsxs)("div", {
-            ref: hScrollContainerRef,
-            className: "ncua-table__h-scroll-container",
-            children: [(0, _jsxRuntime.jsx)("div", {
-              className: "ncua-table__h-scroll-inner",
-              style: innerStyle,
-              children: renderScrollableArea(false)
-            }), (0, _jsxRuntime.jsx)("div", {
-              ref: hScrollbarRef,
-              className: "ncua-table__h-scrollbar",
+            className: tableClasses,
+            ...rest,
+            children: [(0, _jsxRuntime.jsxs)("div", {
+              ref: hScrollContainerRef,
+              className: "ncua-table__h-scroll-container",
+              children: [(0, _jsxRuntime.jsx)("div", {
+                className: "ncua-table__h-scroll-inner",
+                style: innerStyle,
+                children: renderScrollableArea(false)
+              }), (0, _jsxRuntime.jsx)("div", {
+                ref: hScrollbarRef,
+                className: "ncua-table__h-scrollbar",
+                "aria-hidden": "true",
+                children: (0, _jsxRuntime.jsx)("div", {
+                  ref: hThumbRef,
+                  className: "ncua-table__h-scrollbar-thumb",
+                  onMouseDown: handleHThumbMouseDown
+                })
+              })]
+            }), fixedScrollEnabled && (0, _jsxRuntime.jsx)("div", {
+              ref: scrollbarRef,
+              className: "ncua-table__scrollbar",
               "aria-hidden": "true",
               children: (0, _jsxRuntime.jsx)("div", {
-                ref: hThumbRef,
-                className: "ncua-table__h-scrollbar-thumb",
-                onMouseDown: handleHThumbMouseDown
+                ref: thumbRef,
+                className: "ncua-table__scrollbar-thumb",
+                onMouseDown: handleThumbMouseDown
               })
-            })]
-          }), fixedScrollEnabled && (0, _jsxRuntime.jsx)("div", {
-            ref: scrollbarRef,
-            className: "ncua-table__scrollbar",
-            "aria-hidden": "true",
-            children: (0, _jsxRuntime.jsx)("div", {
-              ref: thumbRef,
-              className: "ncua-table__scrollbar-thumb",
-              onMouseDown: handleThumbMouseDown
-            })
-          }), footerContent]
-        }), paginationContent]
+            }), footerContent]
+          }), paginationContent]
+        })
       })
     });
   }
-  return (0, _jsxRuntime.jsxs)("div", {
-    ref: ref,
-    className: "ncua-table-wrapper",
-    style: WRAPPER_STYLE,
-    children: [(0, _jsxRuntime.jsxs)("div", {
-      className: tableClasses,
-      ...rest,
-      children: [renderScrollableArea(), footerContent]
-    }), paginationContent]
+  return (0, _jsxRuntime.jsx)(_dndContext.TableDndContext.Provider, {
+    value: dndContextValue,
+    children: (0, _jsxRuntime.jsxs)("div", {
+      ref: ref,
+      className: "ncua-table-wrapper",
+      style: WRAPPER_STYLE,
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: tableClasses,
+        ...rest,
+        children: [renderScrollableArea(), footerContent]
+      }), paginationContent]
+    })
   });
 });
 TableComponent.displayName = 'Table';
@@ -396,6 +645,8 @@ const Table = exports.Table = Object.assign(TableComponent, {
   Header,
   Body,
   Row,
+  DragHeaderCell,
+  DragCell,
   HeaderCell,
   Cell,
   Footer,

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableDndContext = exports.RowDndContext = void 0;
+var _react = require("react");
+const TableDndContext = exports.TableDndContext = /*#__PURE__*/(0, _react.createContext)({
+  isDraggable: false,
+  tableId: ''
+});
+const RowDndContext = exports.RowDndContext = /*#__PURE__*/(0, _react.createContext)({
+  dragId: undefined,
+  setIsDragging: _v => undefined
+});