sellmate-design-system-react 1.1.1 → 1.2.0

package/dist/components/STable/STable.cjs

@@ -43,8 +43,8 @@ function cn(...inputs) {
 // src/lib/scrollbar.ts
 var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
 var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
-var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]";
-var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
+var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-corner]:bg-[var(--color-grey-10)]";
+var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-corner]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-corner]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
 
 // src/lib/color.ts
 var COLOR_KEYS = [
@@ -4528,7 +4528,6 @@ var STable = react.forwardRef(function STable2({
   resizable = false,
   width,
   height,
-  stickyHeader = false,
   stickyColumn,
   radius = "default",
   noDataLabel = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
@@ -4594,6 +4593,8 @@ var STable = react.forwardRef(function STable2({
   const [rowCountOverride, setRowCountOverride] = react.useState(null);
   const rowCount = rowCountOverride ?? rows.length;
   const scrollRef = react.useRef(null);
+  const headerScrollRef = react.useRef(null);
+  const [headerGutter, setHeaderGutter] = react.useState(0);
   const [vsRange, setVsRange] = react.useState({ start: 0, end: 0 });
   const lastReachEndRef = react.useRef(-1);
   const cbRef = react.useRef({ onVirtualUpdate, onVirtualReachEnd });
@@ -4618,6 +4619,9 @@ var STable = react.forwardRef(function STable2({
   const handleScroll = react.useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
+    const header = headerScrollRef.current;
+    if (header) header.scrollLeft = el.scrollLeft;
+    setHeaderGutter(el.offsetWidth - el.clientWidth);
     setScrolledLeft(el.scrollLeft > 0);
     setScrolledRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
     if (useVirtualScroll) {
@@ -4627,7 +4631,7 @@ var STable = react.forwardRef(function STable2({
   }, [useVirtualScroll, calcRange]);
   react.useEffect(() => {
     handleScroll();
-  }, [handleScroll, rowCount, columnWidths]);
+  }, [handleScroll, rowCount, columnWidths, isLoading, height]);
   react.useEffect(() => {
     if (!useVirtualScroll) return;
     cbRef.current.onVirtualUpdate?.({ from: vsRange.start, to: vsRange.end });
@@ -4807,6 +4811,10 @@ var STable = react.forwardRef(function STable2({
       isRightEdge && scrolledRight && "shadow-[-5px_0_8px_0_rgba(34,34,34,0.1)]"
     );
   };
+  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))
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -4817,42 +4825,45 @@ var STable = react.forwardRef(function STable2({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            ref: scrollRef,
-            onScroll: handleScroll,
             className: cn(
-              "bg-white relative overflow-auto border border-solid border-[color:var(--cmp-table-border-color)]",
-              SCROLLBAR_CLASS,
-              SCROLLBAR_TRACK_BG_CLASS,
-              SCROLLBAR_TRACK_BORDER_CLASS,
+              "bg-white relative flex flex-col overflow-hidden border border-solid border-[color:var(--cmp-table-border-color)]",
+              // height가 없으면 루트가 받은 높이를 끝까지 채운다. 호스트가 className으로
+              // `flex-1 min-h-0` 등을 줘 루트 높이가 확정된 경우, 행이 적어도 테두리 박스가
+              // 남은 영역을 그대로 차지한다. basis는 auto로 둬 높이가 확정되지 않은
+              // 기본 사용(내용만큼 커지는 케이스)에서는 동작이 바뀌지 않는다.
+              !height && "min-h-0 grow",
               radiusClass,
-              // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤·인터랙션 차단
-              (isLoading || rowCount === 0) && "overflow-hidden pointer-events-none"
+              // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 인터랙션 차단
+              (isLoading || rowCount === 0) && "pointer-events-none"
             ),
             style: {
               height,
               minHeight: isNoData ? "calc(var(--cmp-table-header-height) + 60px)" : void 0
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "table",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  className: "w-full table-fixed border-separate border-spacing-0 text-left",
-                  style: { fontSize: 12 },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn(isNoData && "opacity-40"), children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      "tr",
-                      {
-                        className: cn(
-                          "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]",
-                          stickyHeader && "sticky top-0 z-20"
-                        ),
-                        children: [
+                  ref: headerScrollRef,
+                  className: "flex-none overflow-hidden",
+                  style: {
+                    borderRight: headerGutter ? `${headerGutter}px solid var(--cmp-table-header-bg)` : void 0
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "table",
+                    {
+                      className: "w-full table-fixed border-separate border-spacing-0 text-left",
+                      style: { fontSize: 12 },
+                      children: [
+                        colgroup,
+                        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn(isNoData && "opacity-40"), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
                           selectable && /* @__PURE__ */ jsxRuntime.jsxs(
                             "th",
                             {
                               className: cn(
                                 // 원본 .th--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                "sticky left-0 z-[7] border-b border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--cmp-table-header-bg)] text-center align-middle",
+                                // 하단 border는 헤더 래퍼가 연속으로 그리므로 셀에는 두지 않는다.
+                                "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
                                 stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
                               ),
                               style: {
@@ -4876,7 +4887,8 @@ var STable = react.forwardRef(function STable2({
                             "th",
                             {
                               className: cn(
-                                "relative border-b border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[20px] text-[color:var(--sys-color-fg-primary)]",
+                                // 하단 border는 헤더 래퍼가 연속으로 그린다 (거터 영역까지 이어짐).
+                                "relative bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[20px] text-[color:var(--sys-color-fg-primary)]",
                                 stickyInfo(i).isSticky && "z-[6]",
                                 stickyShadowClass(i),
                                 col.thClass
@@ -4914,74 +4926,102 @@ var STable = react.forwardRef(function STable2({
                             },
                             col.name
                           ))
-                        ]
-                      }
-                    ) }),
-                    /* @__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) }) })
-                                }
-                              ),
-                              visibleCols.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                                "td",
-                                {
-                                  className: 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)]",
-                                    stickyShadowClass(i),
-                                    typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
+                        ] }) })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__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) }) })
+                                    }
                                   ),
-                                  style: {
-                                    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" }) })
-                    ] })
-                  ]
+                                  visibleCols.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                                    "td",
+                                    {
+                                      className: 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)]",
+                                        stickyShadowClass(i),
+                                        typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
+                                      ),
+                                      style: {
+                                        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" }) })
+                        ] })
+                      ]
+                    }
+                  )
                 }
               ),
               isNoData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -5000,7 +5040,9 @@ var STable = react.forwardRef(function STable2({
         ),
         showPagination && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
         // SPagination은 전체 폭 기준 중앙, rows-per-page SSelect는 우측에 absolute 배치해 중앙 정렬을 유지한다.
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative -mt-px flex h-[48px] items-center justify-center rounded-[var(--cmp-table-radius)] border border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--color-grey-05)]", children: [
+        // 루트 높이가 확정된 경우(테이블이 남은 영역을 채우는 배치) 페이지네이션 바가
+        // 눌리지 않도록 shrink-0으로 48px를 보장한다.
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative -mt-px flex h-[48px] shrink-0 items-center justify-center rounded-[var(--cmp-table-radius)] border border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--color-grey-05)]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
           useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-[10px] top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
             SSelect,