sellmate-design-system-react 9.0.0-beta.21 → 9.0.0-beta.22

package/dist/index.js

@@ -3944,7 +3944,8 @@ var SDraggableItemImpl = /* @__PURE__ */ forwardRef(function SDraggableItem({
   ] });
 });
 var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
-var SDivider = /* @__PURE__ */ forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
+var SDivider = /* @__PURE__ */ forwardRef(function SDivider2({ vertical = false, height, className, style, ...rest }, ref) {
+  const fixedHeight = vertical && height !== void 0;
   return /* @__PURE__ */ jsx(
     "hr",
     {
@@ -3952,10 +3953,14 @@ var SDivider = /* @__PURE__ */ forwardRef(function SDivider2({ vertical = false,
       "aria-orientation": vertical ? "vertical" : "horizontal",
       className: cn(
         "shrink-0 border-0",
-        vertical ? "inline-block h-auto w-px self-stretch" : "block h-px w-full",
+        vertical ? cn("inline-block w-px", fixedHeight ? "self-center" : "h-auto self-stretch") : "block h-px w-full",
         className
       ),
-      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
+      style: {
+        backgroundColor: "var(--sys-color-divider-default, #E1E1E1)",
+        ...fixedHeight ? { height: typeof height === "number" ? `${height}px` : height } : null,
+        ...style
+      },
       ...rest
     }
   );
@@ -11313,7 +11318,6 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
   onPageChange,
   useInternalPagination = false,
   useRowsPerPageSelect = false,
-  useDensityToggle = false,
   rowsPerPageOption = DEFAULT_ROWS_PER_PAGE_OPTION,
   onRowsPerPageChange,
   useVirtualScroll = false,
@@ -11329,10 +11333,18 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
 }, ref) {
   const autoId = useId();
   const resolvedTableId = tableId ?? autoId;
+  const [innerDense, setInnerDense] = useState(dense);
+  useEffect(() => {
+    setInnerDense(dense);
+  }, [dense]);
+  const changeDense = (next) => {
+    setInnerDense(next);
+    onDenseChange?.(next);
+  };
   const visibleCols = useMemo(() => columns.filter((c) => c.visible !== false), [columns]);
   const stickyLeft = stickyColumn?.left ?? 0;
   const stickyRight = stickyColumn?.right ?? 0;
-  const effectiveRowHeight = rowHeight ?? (dense ? DENSE_ROW_HEIGHT : DEFAULT_ROW_HEIGHT);
+  const effectiveRowHeight = rowHeight ?? (innerDense ? DENSE_ROW_HEIGHT : DEFAULT_ROW_HEIGHT);
   const colSignature = useMemo(
     () => visibleCols.map((c) => `${c.name}:${c.width ?? ""}:${c.autoWidth ? 1 : 0}`).join("|"),
     [visibleCols]
@@ -11562,9 +11574,9 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
     else onSelectedChange?.([...selected, row]);
   };
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[var(--cmp-table-radius)] rounded-t-none" : "rounded-[var(--cmp-table-radius)]";
-  const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
+  const cellPadY = innerDense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
   const cellPadXOf = (col) => col.contentType === "control" ? "var(--cmp-table-body-paddingX-default)" : "var(--cmp-table-body-paddingX-wide)";
-  const rowH = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-body-default-height)";
+  const rowH = innerDense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-body-default-height)";
   const totalColSpan = visibleCols.length + (selectable ? 1 : 0);
   const stickyInfo = (i) => {
     const isLeft = i < stickyLeft;
@@ -11916,10 +11928,11 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
             ]
           }
         ),
-        showPagination && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
+        (showPagination || dense) && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
         // SPagination은 전체 폭 기준 중앙, rows-per-page SSelect는 우측에 absolute 배치해 중앙 정렬을 유지한다.
         // 루트 높이가 확정된 경우(테이블이 남은 영역을 채우는 배치) 페이지네이션 바가
         // 눌리지 않도록 shrink-0으로 48px를 보장한다.
+        // 페이지네이션이 없어도 dense 면 이 바를 그린다 — 밀도 토글이 사는 곳이 여기다.
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -11929,22 +11942,20 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
               bordered && "-mt-px border border-solid border-[color:var(--cmp-table-border-color)]"
             ),
             children: [
-              /* @__PURE__ */ jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
-              (useDensityToggle || useRowsPerPageSelect) && /* @__PURE__ */ jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
-                useDensityToggle && // 라벨·아이콘은 현재 밀도가 아니라 **누르면 되는 상태**를 가리킨다 (dense 면 "넓게 보기").
-                // row·rowDense 는 세로 막대라 90도 돌려 가로 행으로 쓴다.
-                /* @__PURE__ */ jsx(
+              showPagination && /* @__PURE__ */ jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
+              (dense || useRowsPerPageSelect) && /* @__PURE__ */ jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
+                dense && /* @__PURE__ */ jsx(
                   STextLink,
                   {
                     size: "sm",
-                    icon: dense ? "row" : "rowDense",
+                    icon: innerDense ? "row" : "rowDense",
                     iconRotate: 90,
                     iconColor: "var(--sys-color-fg-quaternary)",
-                    label: dense ? "\uB113\uAC8C \uBCF4\uAE30" : "\uC881\uAC8C \uBCF4\uAE30",
-                    onClick: () => onDenseChange?.(!dense)
+                    label: innerDense ? "\uB113\uAC8C \uBCF4\uAE30" : "\uC881\uAC8C \uBCF4\uAE30",
+                    onClick: () => changeDense(!innerDense)
                   }
                 ),
-                useDensityToggle && useRowsPerPageSelect && /* @__PURE__ */ jsx(SDivider, { vertical: true, className: "my-[6px]" }),
+                dense && useRowsPerPageSelect && /* @__PURE__ */ jsx(SDivider, { vertical: true, className: "my-[6px]" }),
                 useRowsPerPageSelect && /* @__PURE__ */ jsx(
                   SSelect2,
                   {
@@ -12007,7 +12018,7 @@ var STableBar = /* @__PURE__ */ forwardRef(function STableBar2({ total, selected
             SDivider,
             {
               vertical: true,
-              className: "h-[var(--cmp-table-bar-divider-height)] self-center",
+              height: "var(--cmp-table-bar-divider-height)",
               style: { backgroundColor: "var(--cmp-table-border-color)" }
             }
           ),
@@ -12932,13 +12943,7 @@ function SCalendar({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(
-            SDivider,
-            {
-              vertical: true,
-              className: "h-[var(--cmp-datepicker-calendar-header-divider-height)] self-center"
-            }
-          ),
+          /* @__PURE__ */ jsx(SDivider, { vertical: true, height: "var(--cmp-datepicker-calendar-header-divider-height)" }),
           /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-[var(--cmp-datepicker-calendar-gap)]", children: [
             /* @__PURE__ */ jsx(
               SGhostButton,