sellmate-design-system-react 2.1.2 → 3.0.0

package/dist/components/STable/STable.cjs

@@ -4532,8 +4532,10 @@ var STable = react.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,
@@ -4619,7 +4621,10 @@ var STable = react.forwardRef(function STable2({
   );
   const handleScroll = react.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);
@@ -4751,6 +4756,7 @@ var STable = react.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;
@@ -4812,6 +4818,12 @@ var STable = react.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__ */ jsxRuntime.jsxs("colgroup", { children: [
     selectable && /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: SELECTABLE_COLUMN_WIDTH } }),
     visibleCols.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx("col", { style: col.autoWidth ? void 0 : { width: columnWidths[i] } }, col.name))
@@ -4933,97 +4945,106 @@ var STable = react.forwardRef(function STable2({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-                    "table",
-                    {
-                      className: "w-full table-fixed border-separate border-spacing-0 text-left",
-                      style: { fontSize: 12 },
-                      children: [
-                        colgroup,
-                        /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-                          useVirtualScroll && topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: isSel, onValueChange: () => toggleRow(row) }) })
-                                    }
+              showNoDataSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bodyScrollClass, "pointer-events-auto bg-white"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-[60px] w-full items-center justify-center", children: noDataSlot }) }) : (
+                /* 바디: 세로 스크롤은 이 컨테이너에만 생긴다 (헤더 제외) */
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: scrollRef,
+                    onScroll: handleScroll,
+                    className: cn(
+                      bodyScrollClass,
+                      // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
+                      (isLoading || rowCount === 0) && "overflow-hidden"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "table",
+                      {
+                        className: "w-full table-fixed border-separate border-spacing-0 text-left",
+                        style: { fontSize: 12 },
+                        children: [
+                          colgroup,
+                          /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+                            useVirtualScroll && topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                                    "td",
-                                    {
-                                      className: cn(
+                                  style: { height: useVirtualScroll ? effectiveRowHeight : rowH },
+                                  children: [
+                                    selectable && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.Fragment, { children: cell }, col.name);
+                                      }
+                                      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
+                          ] })
+                        ]
+                      }
+                    )
+                  }
+                )
               ),
               isNoData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -5033,7 +5054,7 @@ var STable = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
+                !showNoDataSlot && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
               ] }),
               isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-white/60", children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true }) })
             ]