sellmate-design-system-react 0.8.1 → 0.8.3

package/dist/components/SKeyValueTable/SKeyValueTable.d.ts

@@ -6,7 +6,7 @@ export interface SKeyValueField {
     type?: SKeyValueFieldType;
     options?: Record<string, any>;
     required?: boolean;
-    helpText?: string;
+    helpText?: string[];
     hideTh?: boolean;
     thRowSpan?: number;
     thColSpan?: number;

package/dist/components/SKeyValueTable/SKeyValueTable.js

@@ -4780,8 +4780,9 @@ function ItemList({
         ]
       }
     ),
-    items.map((o) => {
+    items.map((o, idx) => {
       const padLeft = o.depth === 1 ? 12 : o.depth === 2 ? 20 : 28;
+      const rowKey = `${o.value}-${idx}`;
       if (o.isGroup) {
         const isDepth1 = o.depth === 1;
         return /* @__PURE__ */ jsx(
@@ -4798,7 +4799,7 @@ function ItemList({
             style: { paddingLeft: padLeft },
             children: o.label
           },
-          o.value
+          rowKey
         );
       }
       const isSelected = selected.includes(o.value);
@@ -4855,7 +4856,7 @@ function ItemList({
             ) : /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: o.label })
           ]
         },
-        o.value
+        rowKey
       );
     })
   ] });
@@ -5047,7 +5048,7 @@ function SCheckbox({
           }
         ),
         label && // 고스트(500) 텍스트로 너비를 고정 → 두께 400↔500 전환 시 레이아웃이 밀리지 않음
-        /* @__PURE__ */ jsxs("span", { className: "grid text-[12px] leading-[20px]", style: { color: labelColor }, children: [
+        /* @__PURE__ */ jsxs("span", { className: "grid text-nowrap text-[12px] leading-[20px]", style: { color: labelColor }, children: [
           /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "invisible font-medium", style: { gridArea: "1 / 1" }, children: label }),
           /* @__PURE__ */ jsx("span", { style: { gridArea: "1 / 1", fontWeight: isChecked ? 500 : 400 }, children: label })
         ] })
@@ -6395,14 +6396,14 @@ function SKeyValueTable({
                       /* @__PURE__ */ jsx("span", { className: "text-[12px] font-bold leading-[20px] text-[color:var(--sys-color-fg-primary)]", children: f.label }),
                       f.required && /* @__PURE__ */ jsx(SIcon, { name: "star", size: 12, color: "var(--sys-color-fg-accent)" })
                     ] }),
-                    f.helpText && /* @__PURE__ */ jsx(
+                    f.helpText && f.helpText.length > 0 && /* @__PURE__ */ jsx(
                       STooltip,
                       {
                         trigger: "hover",
                         icon: "helpOutline",
                         iconSize: 16,
                         color: "var(--sys-color-fg-success)",
-                        message: [f.helpText]
+                        message: f.helpText
                       }
                     )
                   ] })