@ncds/ui-admin 1.7.0 → 1.8.1

package/dist/cjs/src/components/tab/TabButton.js

@@ -9,84 +9,64 @@ var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Badge = require("../badge/Badge");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var __assign = void 0 && (void 0).__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-var TabButton = function (_a) {
-  var id = _a.id,
-    label = _a.label,
-    _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
-    tabButtonType = _a.tabButtonType,
-    type = _a.type,
-    _c = _a.isActive,
-    isActive = _c === void 0 ? false : _c,
-    badgeInfo = _a.badgeInfo,
-    className = _a.className,
-    children = _a.children,
-    props = __rest(_a, ["id", "label", "size", "tabButtonType", "type", "isActive", "badgeInfo", "className", "children"]);
-  var componentClassName = (0, _classnames.default)('ncua-tab-button', {
+const TabButton = _ref => {
+  let {
+    id,
+    label,
+    size = 'sm',
+    tabButtonType,
+    type,
+    isActive = false,
+    badgeInfo,
+    className,
+    children,
+    ...props
+  } = _ref;
+  const componentClassName = (0, _classnames.default)('ncua-tab-button', {
     'is-active': isActive
   }, className);
   if ('href' in props && props.href) {
-    var _d = props,
-      href = _d.href,
-      _e = _d.target,
-      target = _e === void 0 ? '_self' : _e,
-      _onClick = _d.onClick,
-      anchorProps = __rest(_d, ["href", "target", "onClick"]);
-    return (0, _jsxRuntime.jsxs)("a", __assign({
+    const {
+      href,
+      target = '_self',
+      onClick: _onClick,
+      ...anchorProps
+    } = props;
+    return (0, _jsxRuntime.jsxs)("a", {
       className: componentClassName,
       href: href,
-      target: target
-    }, anchorProps, {
-      children: [label, badgeInfo && (0, _jsxRuntime.jsx)(_Badge.Badge, __assign({}, badgeInfo, {
+      target: target,
+      ...anchorProps,
+      children: [label, badgeInfo && (0, _jsxRuntime.jsx)(_Badge.Badge, {
+        ...badgeInfo,
         size: "xs"
-      })), children]
-    }));
+      }), children]
+    });
   }
-  var _f = props,
-    onClick = _f.onClick,
-    onClose = _f.onClose,
-    buttonProps = __rest(_f, ["onClick", "onClose"]);
+  const {
+    onClick,
+    onClose,
+    ...buttonProps
+  } = props;
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)("button", __assign({
+    children: [(0, _jsxRuntime.jsxs)("button", {
       type: "button",
       className: componentClassName,
-      onClick: function () {
-        return onClick === null || onClick === void 0 ? void 0 : onClick(id !== null && id !== void 0 ? id : '');
-      }
-    }, buttonProps, {
-      children: [label, badgeInfo && (0, _jsxRuntime.jsx)(_Badge.Badge, __assign({}, badgeInfo, {
+      onClick: () => onClick?.(id ?? ''),
+      ...buttonProps,
+      children: [label, badgeInfo && (0, _jsxRuntime.jsx)(_Badge.Badge, {
+        ...badgeInfo,
         size: "xs"
-      })), children]
-    })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
+      }), children]
+    }), onClose && (0, _jsxRuntime.jsx)("button", {
       type: "button",
       className: "ncua-tab-close",
-      onClick: function () {
-        return onClose === null || onClose === void 0 ? void 0 : onClose(id !== null && id !== void 0 ? id : '');
-      }
-    }, {
+      onClick: () => onClose?.(id ?? ''),
       children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
         width: 14,
         height: 14
       })
-    }))]
+    })]
   });
 };
 exports.TabButton = TabButton;

package/dist/cjs/src/components/tab/index.js

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _HorizontalTab = require("./HorizontalTab");
-Object.keys(_HorizontalTab).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _HorizontalTab[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _HorizontalTab[key];
-    }
-  });
-});
 var _TabButton = require("./TabButton");
 Object.keys(_TabButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,15 +13,4 @@ Object.keys(_TabButton).forEach(function (key) {
       return _TabButton[key];
     }
   });
-});
-var _VerticalTab = require("./VerticalTab");
-Object.keys(_VerticalTab).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _VerticalTab[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _VerticalTab[key];
-    }
-  });
 });

package/dist/cjs/src/components/table/Table.js

@@ -0,0 +1,381 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// ──────────────────────────────────────────────
+// $table-header-height 와 동기화 — sticky thead가 차지하는 높이를 maxHeight에 보상
+const TABLE_HEADER_HEIGHT = 40;
+// 스크롤바 트랙 상하 여백 합계 (top 8px + bottom 8px) — SCSS &--fixed-header &__scrollbar 오프셋과 동기화
+const SCROLLBAR_TRACK_OFFSET = 16;
+const SCROLLBAR_THUMB_MIN_HEIGHT = 40;
+// Sort Icons (@ncds/ui-admin-icon)
+// ──────────────────────────────────────────────
+const SORT_ICONS = {
+  none: _uiAdminIcon.ChevronSelectorVertical,
+  asc: _uiAdminIcon.ChevronUp,
+  desc: _uiAdminIcon.ChevronDown
+};
+const ARIA_SORT_MAP = {
+  asc: 'ascending',
+  desc: 'descending',
+  none: 'none'
+};
+// ──────────────────────────────────────────────
+// Sub-components
+// ──────────────────────────────────────────────
+const Header = _ref => {
+  let {
+    children,
+    className
+  } = _ref;
+  return (0, _jsxRuntime.jsx)("thead", {
+    className: (0, _classnames.default)('ncua-table__header', className),
+    children: children
+  });
+};
+Header.displayName = 'Table.Header';
+const Body = _ref2 => {
+  let {
+    children,
+    className
+  } = _ref2;
+  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) => {
+  let {
+    children,
+    className,
+    selected,
+    status,
+    ...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
+  });
+});
+Row.displayName = 'Table.Row';
+const HeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+  let {
+    children,
+    className,
+    sortDirection,
+    onSort,
+    width,
+    style,
+    ...rest
+  } = _ref4;
+  const isSortable = sortDirection !== undefined && onSort !== undefined;
+  const SortIcon = isSortable ? SORT_ICONS[sortDirection] : undefined;
+  return (0, _jsxRuntime.jsx)("th", {
+    ref: ref,
+    className: (0, _classnames.default)('ncua-table__header-cell', className, {
+      'ncua-table__header-cell--sortable': isSortable
+    }),
+    style: {
+      ...style,
+      width
+    },
+    "aria-sort": isSortable ? ARIA_SORT_MAP[sortDirection] : undefined,
+    onClick: isSortable ? onSort : undefined,
+    ...rest,
+    children: isSortable && SortIcon ? (0, _jsxRuntime.jsxs)("span", {
+      className: "ncua-table__header-cell-inner",
+      children: [(0, _jsxRuntime.jsx)("span", {
+        className: "ncua-table__header-cell-text",
+        children: children
+      }), (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-table__sort-icon",
+        children: (0, _jsxRuntime.jsx)(SortIcon, {
+          width: 16,
+          height: 16
+        })
+      })]
+    }) : children
+  });
+});
+HeaderCell.displayName = 'Table.HeaderCell';
+const Cell = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+  let {
+    children,
+    className,
+    isHeader,
+    ...rest
+  } = _ref5;
+  if (isHeader) {
+    return (0, _jsxRuntime.jsx)("th", {
+      ref: ref,
+      scope: "row",
+      className: (0, _classnames.default)('ncua-table__cell', className),
+      ...rest,
+      children: children
+    });
+  }
+  return (0, _jsxRuntime.jsx)("td", {
+    ref: ref,
+    className: (0, _classnames.default)('ncua-table__cell', className),
+    ...rest,
+    children: children
+  });
+});
+Cell.displayName = 'Table.Cell';
+const Footer = _ref6 => {
+  let {
+    children,
+    className
+  } = _ref6;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-table__footer', className),
+    children: children
+  });
+};
+Footer.displayName = 'Table.Footer';
+const Pagination = _ref7 => {
+  let {
+    children,
+    className
+  } = _ref7;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-table__pagination', className),
+    children: children
+  });
+};
+Pagination.displayName = 'Table.Pagination';
+const ColGroup = _ref8 => {
+  let {
+    widths
+  } = _ref8;
+  const resolveColWidth = width => {
+    if (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: {
+        width: resolveColWidth(width)
+      }
+    }, index))
+  });
+};
+ColGroup.displayName = 'Table.ColGroup';
+const Empty = _ref9 => {
+  let {
+    colSpan,
+    children
+  } = _ref9;
+  return (0, _jsxRuntime.jsx)("tr", {
+    children: (0, _jsxRuntime.jsx)("td", {
+      colSpan: colSpan,
+      className: "ncua-table__empty",
+      role: "status",
+      "aria-live": "polite",
+      children: children || '등록된 게시물이 없습니다.'
+    })
+  });
+};
+Empty.displayName = 'Table.Empty';
+const categorizeChild = (child, result) => {
+  if (!child || typeof child !== 'object' || !('type' in child)) {
+    result.tableContent.push(child);
+    return;
+  }
+  if (child.type === Footer) {
+    result.footerContent.push(child);
+  } else if (child.type === Pagination) {
+    result.paginationContent.push(child);
+  } else if (child.type === Header) {
+    result.headerContent.push(child);
+  } else if (child.type === ColGroup) {
+    result.colGroupContent.push(child);
+  } else {
+    result.tableContent.push(child);
+  }
+};
+const sortChildren = children => {
+  const result = {
+    headerContent: [],
+    colGroupContent: [],
+    tableContent: [],
+    footerContent: [],
+    paginationContent: []
+  };
+  _react.Children.forEach(children, child => {
+    categorizeChild(child, result);
+  });
+  return result;
+};
+// ──────────────────────────────────────────────
+// Main Table component
+// ──────────────────────────────────────────────
+const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
+  let {
+    type = 'horizontal',
+    fixedHeader = false,
+    maxHeight,
+    hoverable = true,
+    selectable = false,
+    children,
+    className,
+    ...rest
+  } = _ref0;
+  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
+  });
+  const {
+    headerContent,
+    colGroupContent,
+    tableContent,
+    footerContent,
+    paginationContent
+  } = sortChildren(children);
+  const scrollStyle = fixedHeader && maxHeight ? {
+    maxHeight: typeof maxHeight === 'number' ? `${maxHeight + TABLE_HEADER_HEIGHT}px` : `calc(${maxHeight} + ${TABLE_HEADER_HEIGHT}px)`
+  } : undefined;
+  // Custom scrollbar refs (used only in fixed-header mode)
+  const scrollContainerRef = (0, _react.useRef)(null);
+  const scrollAreaRef = (0, _react.useRef)(null);
+  const thumbRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!fixedHeader || !maxHeight) return;
+    const scrollEl = scrollContainerRef.current;
+    const thumbEl = thumbRef.current;
+    if (!scrollEl || !thumbEl) return;
+    const update = () => {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = scrollEl;
+      if (scrollHeight <= clientHeight) {
+        thumbEl.style.height = '0';
+        return;
+      }
+      const trackHeight = (scrollAreaRef.current?.clientHeight ?? clientHeight) - TABLE_HEADER_HEIGHT - SCROLLBAR_TRACK_OFFSET;
+      const thumbHeight = Math.max(SCROLLBAR_THUMB_MIN_HEIGHT, clientHeight / scrollHeight * trackHeight);
+      const thumbTop = scrollTop / (scrollHeight - clientHeight) * (trackHeight - thumbHeight);
+      thumbEl.style.height = `${thumbHeight}px`;
+      thumbEl.style.transform = `translateY(${thumbTop}px)`;
+    };
+    scrollEl.addEventListener('scroll', update, {
+      passive: true
+    });
+    const observer = new ResizeObserver(update);
+    observer.observe(scrollEl);
+    update();
+    return () => {
+      scrollEl.removeEventListener('scroll', update);
+      observer.disconnect();
+    };
+  }, [fixedHeader, maxHeight]);
+  const handleThumbMouseDown = e => {
+    e.preventDefault();
+    const scrollEl = scrollContainerRef.current;
+    const thumbEl = thumbRef.current;
+    const areaEl = scrollAreaRef.current;
+    if (!scrollEl || !thumbEl) return;
+    areaEl?.setAttribute('data-dragging', '');
+    const startY = e.clientY;
+    const startScrollTop = scrollEl.scrollTop;
+    const {
+      scrollHeight,
+      clientHeight
+    } = scrollEl;
+    const thumbHeight = thumbEl.offsetHeight;
+    const scrollRatio = (scrollHeight - clientHeight) / (clientHeight - thumbHeight);
+    const onMove = ev => {
+      scrollEl.scrollTop = startScrollTop + (ev.clientY - startY) * scrollRatio;
+    };
+    const onUp = () => {
+      areaEl?.removeAttribute('data-dragging');
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  };
+  if (fixedHeader && maxHeight) {
+    return (0, _jsxRuntime.jsxs)("div", {
+      ref: ref,
+      className: "ncua-table-wrapper",
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: tableClasses,
+        ...rest,
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          ref: scrollAreaRef,
+          className: "ncua-table__scroll-area",
+          children: [(0, _jsxRuntime.jsx)("div", {
+            ref: scrollContainerRef,
+            className: "ncua-table__scroll-container",
+            style: scrollStyle,
+            children: (0, _jsxRuntime.jsxs)("table", {
+              className: "ncua-table__table",
+              role: "table",
+              children: [colGroupContent, headerContent, tableContent]
+            })
+          }), (0, _jsxRuntime.jsx)("div", {
+            className: "ncua-table__scrollbar",
+            "aria-hidden": "true",
+            children: (0, _jsxRuntime.jsx)("div", {
+              ref: thumbRef,
+              className: "ncua-table__scrollbar-thumb",
+              onMouseDown: handleThumbMouseDown
+            })
+          })]
+        }), footerContent]
+      }), paginationContent]
+    });
+  }
+  const tableElement = (0, _jsxRuntime.jsxs)("table", {
+    className: "ncua-table__table",
+    role: "table",
+    children: [colGroupContent, headerContent, tableContent]
+  });
+  return (0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    className: "ncua-table-wrapper",
+    children: [(0, _jsxRuntime.jsxs)("div", {
+      className: tableClasses,
+      ...rest,
+      children: [tableElement, footerContent]
+    }), paginationContent]
+  });
+});
+TableComponent.displayName = 'Table';
+// ──────────────────────────────────────────────
+// Compound export
+// ──────────────────────────────────────────────
+const Table = exports.Table = Object.assign(TableComponent, {
+  Header,
+  Body,
+  Row,
+  HeaderCell,
+  Cell,
+  Footer,
+  Pagination,
+  ColGroup,
+  Empty
+});

package/dist/cjs/src/components/table/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Table = require("./Table");
+Object.keys(_Table).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Table[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Table[key];
+    }
+  });
+});

package/dist/cjs/src/components/table/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});