sellmate-design-system-react 2.1.1 → 2.2.0

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { forwardRef, useState, useId, useEffect, useRef, useCallback, createContext, useImperativeHandle, useMemo, useContext, useLayoutEffect, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
+import { forwardRef, useState, useId, useEffect, useRef, useCallback, createContext, useImperativeHandle, useMemo, useContext, Fragment as Fragment$1, useLayoutEffect, useSyncExternalStore } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -4873,7 +4873,8 @@ function SConfirmModal({
   const mainStyle = MAIN_BUTTON_STYLE[mainButtonName ?? DEFAULT_MAIN_BUTTON[type]];
   const tagNode = tagSlot ?? (tagLabel ? /* @__PURE__ */ jsx(STag, { shape: tagShape, size: tagSize, color: tagColor, label: tagLabel }) : null);
   const optionNode = optionSlot ?? (slotLabel ? /* @__PURE__ */ jsx("span", { children: slotLabel }) : null);
-  const hasBody = topMessage.length > 0 || bottomMessage.length > 0 || tagNode != null || optionNode != null;
+  const hasContentBox = tagNode != null || optionNode != null;
+  const hasBody = topMessage.length > 0 || bottomMessage.length > 0 || hasContentBox;
   return /* @__PURE__ */ jsx(
     SModalContainer,
     {
@@ -4908,8 +4909,12 @@ function SConfirmModal({
               },
               i
             )) }),
-            tagNode != null && // tag 위치 content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
-            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px] w-full", children: tagNode }),
+            hasContentBox && // content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
+            // tag 왼쪽, slotLabel/optionSlot 이 그 오른쪽에 gap 8 로 나란히 놓인다
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px] w-full", children: [
+              tagNode,
+              optionNode
+            ] }),
             bottomMessage.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: bottomMessage.map((m, i) => /* @__PURE__ */ jsx(
               "p",
               {
@@ -4917,8 +4922,7 @@ function SConfirmModal({
                 dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m) }
               },
               i
-            )) }),
-            optionNode != null && optionNode
+            )) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 gap-[8px]", children: [
@@ -7352,8 +7356,10 @@ var STable = forwardRef(function STable2({
   stickyColumn,
   radius = "default",
   noDataLabel = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  noDataSlot,
   isLoading = false,
   dense = false,
+  noHover = false,
   pagination,
   onPageChange,
   useInternalPagination = false,
@@ -7439,7 +7445,10 @@ var STable = forwardRef(function STable2({
   );
   const handleScroll = useCallback(() => {
     const el = scrollRef.current;
-    if (!el) return;
+    if (!el) {
+      setHeaderGutter(0);
+      return;
+    }
     const header = headerScrollRef.current;
     if (header) header.scrollLeft = el.scrollLeft;
     setHeaderGutter(el.offsetWidth - el.clientWidth);
@@ -7571,6 +7580,7 @@ var STable = forwardRef(function STable2({
     bodyRows = rows.slice(pageInfo.startIndex, pageInfo.endIndex);
   }
   const isNoData = rowCount === 0 && !isLoading;
+  const showNoDataSlot = isNoData && noDataSlot != null;
   const showPagination = !useVirtualScroll && (pagination != null || useInternalPagination);
   const lastPage = useInternalPagination ? Math.max(1, Math.ceil(rowCount / (innerRowsPerPage || 1))) : pagination?.lastPage ?? Math.max(1, Math.ceil(rowCount / (pagination?.rowsPerPage ?? 10)));
   const displayPage = useInternalPagination ? currentPage : pagination?.page ?? 1;
@@ -7632,6 +7642,12 @@ var STable = forwardRef(function STable2({
       isRightEdge && scrolledRight && "shadow-[-5px_0_8px_0_rgba(34,34,34,0.1)]"
     );
   };
+  const bodyScrollClass = cn(
+    "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-table-border-color)]",
+    SCROLLBAR_CLASS,
+    SCROLLBAR_TRACK_BG_CLASS,
+    SCROLLBAR_TRACK_BORDER_CLASS
+  );
   const colgroup = /* @__PURE__ */ jsxs("colgroup", { children: [
     selectable && /* @__PURE__ */ jsx("col", { style: { width: SELECTABLE_COLUMN_WIDTH } }),
     visibleCols.map((col, i) => /* @__PURE__ */ jsx("col", { style: col.autoWidth ? void 0 : { width: columnWidths[i] } }, col.name))
@@ -7753,97 +7769,106 @@ var STable = forwardRef(function STable2({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  ref: scrollRef,
-                  onScroll: handleScroll,
-                  className: cn(
-                    // 헤더 하단 구분선은 body 상단 border로 그린다. body 래퍼는 스크롤바를 포함한
-                    // 전체 폭을 차지하므로(스크롤바는 border 안쪽) 헤더 거터의 border-right와 미터가
-                    // 생기지 않아 색·길이가 균일한 한 줄이 된다.
-                    "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-table-border-color)]",
-                    SCROLLBAR_CLASS,
-                    SCROLLBAR_TRACK_BG_CLASS,
-                    SCROLLBAR_TRACK_BORDER_CLASS,
-                    // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
-                    (isLoading || rowCount === 0) && "overflow-hidden"
-                  ),
-                  children: /* @__PURE__ */ jsxs(
-                    "table",
-                    {
-                      className: "w-full table-fixed border-separate border-spacing-0 text-left",
-                      style: { fontSize: 12 },
-                      children: [
-                        colgroup,
-                        /* @__PURE__ */ jsxs("tbody", { children: [
-                          useVirtualScroll && topSpacer > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
-                          rowCount === 0 ? null : bodyRows.map((row, ri) => {
-                            const isSel = selectedKeys.has(row[rowKey]);
-                            const rowBg = "bg-white";
-                            return /* @__PURE__ */ jsxs(
-                              "tr",
-                              {
-                                onClick: () => onRowClick?.(row),
-                                className: cn(
-                                  "group/table-row hover:bg-[var(--color-grey-05)]",
-                                  onRowClick && "cursor-pointer"
-                                ),
-                                style: { height: useVirtualScroll ? effectiveRowHeight : rowH },
-                                children: [
-                                  selectable && /* @__PURE__ */ jsx(
-                                    "td",
-                                    {
-                                      className: cn(
-                                        // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                        "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle group-hover/table-row:bg-[var(--color-grey-05)]",
-                                        rowBg,
-                                        stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
-                                      ),
-                                      style: {
-                                        width: SELECTABLE_COLUMN_WIDTH,
-                                        minWidth: SELECTABLE_COLUMN_WIDTH,
-                                        maxWidth: SELECTABLE_COLUMN_WIDTH
-                                      },
-                                      onClick: (e) => e.stopPropagation(),
-                                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(SCheckbox, { value: isSel, onValueChange: () => toggleRow(row) }) })
-                                    }
+              showNoDataSlot ? /* @__PURE__ */ jsx("div", { className: cn(bodyScrollClass, "pointer-events-auto bg-white"), children: /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-[60px] w-full items-center justify-center", children: noDataSlot }) }) : (
+                /* 바디: 세로 스크롤은 이 컨테이너에만 생긴다 (헤더 제외) */
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: scrollRef,
+                    onScroll: handleScroll,
+                    className: cn(
+                      bodyScrollClass,
+                      // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
+                      (isLoading || rowCount === 0) && "overflow-hidden"
+                    ),
+                    children: /* @__PURE__ */ jsxs(
+                      "table",
+                      {
+                        className: "w-full table-fixed border-separate border-spacing-0 text-left",
+                        style: { fontSize: 12 },
+                        children: [
+                          colgroup,
+                          /* @__PURE__ */ jsxs("tbody", { children: [
+                            useVirtualScroll && topSpacer > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
+                            rowCount === 0 ? null : bodyRows.map((row, ri) => {
+                              const isSel = selectedKeys.has(row[rowKey]);
+                              const rowBg = "bg-white";
+                              return /* @__PURE__ */ jsxs(
+                                "tr",
+                                {
+                                  onClick: () => onRowClick?.(row),
+                                  className: cn(
+                                    "group/table-row",
+                                    !noHover && "hover:bg-[var(--color-grey-05)]",
+                                    onRowClick && "cursor-pointer"
                                   ),
-                                  visibleCols.map((col, i) => /* @__PURE__ */ jsx(
-                                    "td",
-                                    {
-                                      className: cn(
+                                  style: { height: useVirtualScroll ? effectiveRowHeight : rowH },
+                                  children: [
+                                    selectable && /* @__PURE__ */ jsx(
+                                      "td",
+                                      {
+                                        className: cn(
+                                          // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
+                                          "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle",
+                                          rowBg,
+                                          !noHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                          stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
+                                        ),
+                                        style: {
+                                          width: SELECTABLE_COLUMN_WIDTH,
+                                          minWidth: SELECTABLE_COLUMN_WIDTH,
+                                          maxWidth: SELECTABLE_COLUMN_WIDTH
+                                        },
+                                        onClick: (e) => e.stopPropagation(),
+                                        children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(SCheckbox, { value: isSel, onValueChange: () => toggleRow(row) }) })
+                                      }
+                                    ),
+                                    visibleCols.map((col, i) => {
+                                      const tdClassName = cn(
                                         // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
                                         // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
                                         "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
                                         rowBg,
-                                        "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                        !noHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
                                         stickyShadowClass(i),
                                         typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
-                                      ),
-                                      style: {
+                                      );
+                                      const tdStyle = {
                                         paddingLeft: cellPadX,
                                         paddingRight: cellPadX,
                                         paddingTop: cellPadY,
                                         paddingBottom: cellPadY,
                                         textAlign: col.align ?? "left",
                                         ...cellStyle(i)
-                                      },
-                                      children: col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row)
-                                    },
-                                    col.name
-                                  ))
-                                ]
-                              },
-                              row[rowKey] ?? ri
-                            );
-                          }),
-                          useVirtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
-                        ] })
-                      ]
-                    }
-                  )
-                }
+                                      };
+                                      if (col.renderCell) {
+                                        const cell = col.renderCell({
+                                          row,
+                                          value: cellValue(col, row),
+                                          column: col,
+                                          colIndex: i,
+                                          rowIndex: ri,
+                                          isSelected: isSel,
+                                          className: tdClassName,
+                                          style: tdStyle
+                                        });
+                                        if (cell == null || cell === false) return null;
+                                        return /* @__PURE__ */ jsx(Fragment$1, { children: cell }, col.name);
+                                      }
+                                      return /* @__PURE__ */ jsx("td", { className: tdClassName, style: tdStyle, children: col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row) }, col.name);
+                                    })
+                                  ]
+                                },
+                                row[rowKey] ?? ri
+                              );
+                            }),
+                            useVirtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
+                          ] })
+                        ]
+                      }
+                    )
+                  }
+                )
               ),
               isNoData && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
@@ -7853,7 +7878,7 @@ var STable = forwardRef(function STable2({
                     className: "pointer-events-none absolute left-0 right-0 top-0 z-[31] h-[var(--cmp-table-header-height)] bg-white/60"
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
+                !showNoDataSlot && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
               ] }),
               isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-white/60", children: /* @__PURE__ */ jsx(SCircleProgress, { indeterminate: true }) })
             ]