sellmate-design-system-react 0.7.0 → 0.8.1

package/dist/components/STable/STable.d.ts

@@ -23,6 +23,8 @@ export interface STableColumn {
     iconColor?: SColor;
     /** 셀 커스텀 렌더 (React 확장) */
     render?: (row: SRow, value: any) => ReactNode;
+    /** 헤더 셀 커스텀 렌더 (React 확장) */
+    renderHeader?: (column: STableColumn, index: number) => ReactNode;
     tdClass?: string;
     /** 헤더 셀 커스텀 클래스/스타일 (sd-table thClass/thStyle) */
     thClass?: string;

package/dist/components/STable/STable.js

@@ -3635,6 +3635,7 @@ var SField = forwardRef(function SField2({
   const resolvedSuccess = status === "pass";
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
+  const hug = cssLen(width) !== void 0;
   const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
   const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
   const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
@@ -3643,7 +3644,13 @@ var SField = forwardRef(function SField2({
     {
       ref: rootRef,
       "data-name": name || void 0,
-      className: cn("inline-flex h-fit w-full flex-col", className),
+      className: cn(
+        "h-fit flex-col",
+        // hug 시 inline-flex 를 유지하면 기존에 세로로 쌓여 있던 필드들이 한 줄에 붙어버리므로
+        // 블록 레벨(flex)로 두어 쌓임은 그대로 유지한다. 나란히 놓으려면 부모를 flex 로.
+        hug ? "flex w-fit max-w-full" : "inline-flex w-full",
+        className
+      ),
       style,
       onMouseEnter,
       onMouseLeave,
@@ -3681,55 +3688,60 @@ var SField = forwardRef(function SField2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
-                interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
-                disabled && "cursor-not-allowed"
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex min-w-0 flex-col", !hug && "flex-1"),
+            style: { width: cssLen(width), minWidth: cssLen(minWidth) },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
+                    interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
+                    disabled && "cursor-not-allowed"
+                  ),
+                  style: {
+                    // @ts-expect-error CSS 변수
+                    "--field-bc": borderColor,
+                    // focused/hovered prop이 명시된 경우 강조를 즉시 반영
+                    ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
+                    ...multiline ? { minHeight: s.height } : { height: s.height },
+                    "borderRadius": s.radius,
+                    "background": bgColor,
+                    "color": textColor
+                  },
+                  "data-focused": focused || void 0,
+                  "data-hovered": hovered || void 0,
+                  children: [
+                    effectiveAddonLabel !== "" && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r border-solid px-(--cmp-field-addonLabel-paddingX) text-12 font-medium leading-20",
+                        style: {
+                          // 원본 sd-field: labelWidth가 addon 폭(--sd-field-addon-width)에도 적용됨
+                          width: cssLen(labelWidth),
+                          justifyContent: ALIGN[addonAlign],
+                          background: "var(--cmp-field-addonLabel-bg)",
+                          borderRightColor: disabled ? "var(--cmp-field-addonLabel-border-disabled)" : "var(--cmp-field-addonLabel-border-default)",
+                          borderTopLeftRadius: s.radius - 1,
+                          borderBottomLeftRadius: s.radius - 1
+                        },
+                        children: [
+                          icon && !label && /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
+                          effectiveAddonLabel
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1", children })
+                  ]
+                }
               ),
-              style: {
-                // @ts-expect-error CSS 변수
-                "--field-bc": borderColor,
-                // focused/hovered prop이 명시된 경우 강조를 즉시 반영
-                ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
-                ...multiline ? { minHeight: s.height } : { height: s.height },
-                "minWidth": cssLen(minWidth),
-                "width": cssLen(width),
-                "borderRadius": s.radius,
-                "background": bgColor,
-                "color": textColor
-              },
-              "data-focused": focused || void 0,
-              "data-hovered": hovered || void 0,
-              children: [
-                effectiveAddonLabel !== "" && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r border-solid px-(--cmp-field-addonLabel-paddingX) text-12 font-medium leading-20",
-                    style: {
-                      // 원본 sd-field: labelWidth가 addon 폭(--sd-field-addon-width)에도 적용됨
-                      width: cssLen(labelWidth),
-                      justifyContent: ALIGN[addonAlign],
-                      background: "var(--cmp-field-addonLabel-bg)",
-                      borderRightColor: disabled ? "var(--cmp-field-addonLabel-border-disabled)" : "var(--cmp-field-addonLabel-border-default)",
-                      borderTopLeftRadius: s.radius - 1,
-                      borderBottomLeftRadius: s.radius - 1
-                    },
-                    children: [
-                      icon && !label && /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
-                      effectiveAddonLabel
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1", children })
-              ]
-            }
-          ),
-          showError ? /* @__PURE__ */ jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-hint-color)", children: hint }) : null
-        ] })
+              showError ? /* @__PURE__ */ jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-hint-color)", children: hint }) : null
+            ]
+          }
+        )
       ] })
     }
   );
@@ -3750,6 +3762,7 @@ function SPortal({
   viewportPadding = 0,
   onOpenAutoFocus,
   onCloseAutoFocus,
+  onPointerDownOutside,
   children,
   className,
   style,
@@ -3778,7 +3791,9 @@ function SPortal({
             onPointerDownOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {
                 e.preventDefault();
+                return;
               }
+              onPointerDownOutside?.(e);
             },
             onFocusOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {
@@ -3883,6 +3898,7 @@ var SSelect = forwardRef(function SSelect2({
   const triggerRef = useRef(null);
   const searchInputRef = useRef(null);
   const listRef = useRef(null);
+  const dismissedByPointerRef = useRef(false);
   const flat = useMemo(() => flattenOptions(options), [options]);
   const selectable = useMemo(() => selectableOptions(flat), [flat]);
   const hasLeaf = useMemo(() => flat.some((o) => !o.isGroup), [flat]);
@@ -3912,7 +3928,9 @@ var SSelect = forwardRef(function SSelect2({
   const commitOpen = (next) => {
     setOpen(next);
     onOpenChange?.(next);
-    if (!next) {
+    if (next) {
+      dismissedByPointerRef.current = false;
+    } else {
       setPendingOpen(false);
       setSearch("");
       if (rules && rules.length > 0) {
@@ -4136,8 +4154,12 @@ var SSelect = forwardRef(function SSelect2({
               event.preventDefault();
               requestAnimationFrame(() => searchInputRef.current?.focus());
             },
+            onPointerDownOutside: () => {
+              dismissedByPointerRef.current = true;
+            },
             onCloseAutoFocus: (event) => {
               event.preventDefault();
+              if (dismissedByPointerRef.current) return;
               triggerRef.current?.focus();
             },
             className: "rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
@@ -4643,7 +4665,7 @@ var STable = forwardRef(function STable2({
       position: "sticky",
       left: isLeft ? "var(--sticky-left-offset)" : void 0,
       right: isRight ? "var(--sticky-right-offset)" : void 0,
-      zIndex: 3
+      zIndex: 6
     };
   };
   const stickyShadowClass = (i) => {
@@ -4700,7 +4722,7 @@ var STable = forwardRef(function STable2({
                             {
                               className: cn(
                                 // 원본 .th--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                "sticky left-0 z-[4] border-b border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--cmp-table-header-bg)] text-center align-middle",
+                                "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",
                                 stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
                               ),
                               style: {
@@ -4725,13 +4747,13 @@ var STable = forwardRef(function STable2({
                             {
                               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)]",
-                                stickyInfo(i).isSticky && "z-[4]",
+                                stickyInfo(i).isSticky && "z-[6]",
                                 stickyShadowClass(i),
                                 col.thClass
                               ),
                               style: { textAlign: col.align ?? "left", ...cellStyle(i), ...col.thStyle },
                               children: [
-                                /* @__PURE__ */ jsxs(
+                                /* @__PURE__ */ jsx(
                                   "span",
                                   {
                                     className: cn(
@@ -4740,10 +4762,10 @@ var STable = forwardRef(function STable2({
                                       col.align === "center" && "justify-center",
                                       col.align === "right" && "justify-end"
                                     ),
-                                    children: [
+                                    children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxs(Fragment, { children: [
                                       col.icon && /* @__PURE__ */ jsx(SIcon, { name: col.icon, size: 16, color: col.iconColor }),
                                       /* @__PURE__ */ jsx("span", { className: "truncate", children: col.label })
-                                    ]
+                                    ] })
                                   }
                                 ),
                                 resizable && !col.autoWidth && i < visibleCols.length - 1 && // 원본 th__resizer: 셀 우측 경계 안쪽 4px 그립(좌우 1px #CCCCCC 라인, 세로 16px).