sellmate-design-system-react 2.1.0 → 2.1.2

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

@@ -1,10 +1,18 @@
 import { type CSSProperties, type ReactNode } from 'react';
+import { type SInputProps } from '../SInput';
+import { type STextareaProps } from '../STextarea';
+import { type SNumberInputProps } from '../SNumberInput';
+import { type SSelectProps } from '../SSelect';
+import { type SRadioGroupProps } from '../SRadio';
+import { type SCheckboxProps } from '../SCheckbox';
+import { type SDatePickerProps } from '../SDatePicker';
+import { type SDateRangePickerProps } from '../SDateRangePicker';
+import { type SFilePickerProps } from '../SFilePicker';
 export type SKeyValueFieldType = 'text' | 'input' | 'textarea' | 'number-input' | 'select' | 'radio' | 'checkbox' | 'date-picker' | 'date-range-picker' | 'file-picker';
-export interface SKeyValueField {
+/** field type과 무관한 공통 속성 (레이아웃·레이블·스팬 등) */
+export interface SKeyValueFieldBase {
     name: string;
     label?: string;
-    type?: SKeyValueFieldType;
-    options?: Record<string, any>;
     required?: boolean;
     helpText?: string[];
     hideTh?: boolean;
@@ -15,9 +23,53 @@ export interface SKeyValueField {
     thWidth?: number | string;
     thClass?: string;
     tdClass?: string;
-    /** 셀 커스텀 렌더 (React 확장) */
+    /** 셀 커스텀 렌더 (React 확장). 지정 시 type/options는 무시되고 이 노드가 그대로 렌더됩니다. */
     render?: ReactNode;
 }
+/**
+ * `options`에서 제외되는 키.
+ * - `onValueChange`: 테이블이 `onChange`로 승격시키므로 field 단위로 지정할 수 없습니다.
+ * - `value`: 지정은 가능하나 `values` prop이 같은 name을 가지면 그쪽이 우선합니다. (타입은 유지)
+ */
+type FieldOptions<P> = Omit<P, 'onValueChange'>;
+/**
+ * `type`에 따라 `options`가 해당 컴포넌트의 props로 좁혀지는 discriminated union.
+ * `type` 생략 시 `text`로 동작합니다.
+ */
+export type SKeyValueFieldByType = {
+    type?: 'text';
+    options?: {
+        value?: ReactNode;
+    };
+} | {
+    type: 'input';
+    options?: FieldOptions<SInputProps>;
+} | {
+    type: 'textarea';
+    options?: FieldOptions<STextareaProps>;
+} | {
+    type: 'number-input';
+    options?: FieldOptions<SNumberInputProps>;
+} | {
+    type: 'select';
+    options?: FieldOptions<SSelectProps>;
+} | {
+    type: 'radio';
+    options?: FieldOptions<SRadioGroupProps>;
+} | {
+    type: 'checkbox';
+    options?: FieldOptions<SCheckboxProps>;
+} | {
+    type: 'date-picker';
+    options?: FieldOptions<SDatePickerProps>;
+} | {
+    type: 'date-range-picker';
+    options?: FieldOptions<SDateRangePickerProps>;
+} | {
+    type: 'file-picker';
+    options?: FieldOptions<SFilePickerProps>;
+};
+export type SKeyValueField = SKeyValueFieldBase & SKeyValueFieldByType;
 /**
  * field type별 `onChange`로 올라오는 값 타입.
  * - `string`: input · textarea · select · radio · date-picker
@@ -61,3 +113,4 @@ export interface SKeyValueTableProps {
 }
 /** SKeyValueTable — sd-key-value-table 포팅. th/td 폼 레이아웃 + 필드 렌더러. */
 export declare function SKeyValueTable({ fields, values, search, radius, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
+export {};

package/dist/components/SKeyValueTable/SKeyValueTable.js

@@ -4428,7 +4428,7 @@ var SSelect = forwardRef(function SSelect2({
     );
     onValueChange(multi ? mapped : mapped[0] ?? (emitValue ? "" : null));
   };
-  const commitOpen = (next) => {
+  const commitOpen = (next, valueForRules) => {
     setOpen(next);
     onOpenChange?.(next);
     if (next) {
@@ -4437,7 +4437,8 @@ var SSelect = forwardRef(function SSelect2({
       setPendingOpen(false);
       setSearch("");
       if (rules && rules.length > 0) {
-        setRuleError(runRules(multi ? selectedRef.current : selectedRef.current[0] ?? "", rules));
+        const current = valueForRules ?? selectedRef.current;
+        setRuleError(runRules(multi ? current : current[0] ?? "", rules));
       }
     }
   };
@@ -4521,7 +4522,7 @@ var SSelect = forwardRef(function SSelect2({
       return;
     }
     emit([nextValue]);
-    commitOpen(false);
+    commitOpen(false, [nextValue]);
   };
   const handleSelectAll = () => {
     emit(allSelected ? [] : allValues);
@@ -4761,7 +4762,7 @@ var SSelect = forwardRef(function SSelect2({
                         if (index >= 0) setFocusedIndex(index);
                       }
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                  ) : /* @__PURE__ */ jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
                 ]
               }
             )
@@ -4789,10 +4790,10 @@ function ItemList({
   const selectedSet = useMemo(() => new Set(selected), [selected]);
   const itemBase = cn(
     "group/select-item flex w-full cursor-pointer select-none items-center gap-[8px] border-none bg-transparent text-left text-[12px] leading-[20px] outline-none",
-    "text-[color:var(--cmp-listItem-content-default)]",
-    "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listItem-content-disabled)]"
+    "text-[color:var(--cmp-listBoxItem-content-default)]",
+    "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listBoxItem-content-disabled)]"
   );
-  const activeClass = "hover:bg-[var(--cmp-listItem-bg-hover)] hover:text-[color:var(--cmp-listItem-content-hover)] focus-visible:bg-[var(--cmp-listItem-bg-hover)] focus-visible:text-[color:var(--cmp-listItem-content-hover)]";
+  const activeClass = "hover:bg-[var(--cmp-listBoxItem-bg-hover)] hover:text-[color:var(--cmp-listBoxItem-content-hover)] focus-visible:bg-[var(--cmp-listBoxItem-bg-hover)] focus-visible:text-[color:var(--cmp-listBoxItem-content-hover)]";
   return /* @__PURE__ */ jsxs("div", { role: "listbox", "aria-multiselectable": multi || void 0, children: [
     showSelectAll && /* @__PURE__ */ jsxs(
       "button",
@@ -4802,7 +4803,7 @@ function ItemList({
         "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
         className: cn(
           itemBase,
-          focusedValue === "__select_all__" && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]"
+          focusedValue === "__select_all__" && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
         ),
         style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: 12 },
         onMouseEnter: () => onHoverValue("__select_all__"),
@@ -4819,7 +4820,7 @@ function ItemList({
       const rowKey = `${o.value}-${idx}`;
       if (o.isGroup) {
         const isDepth1 = o.depth === 1;
-        const groupTone = isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium";
+        const groupTone = isDepth1 ? "border-t border-solid border-[color:var(--cmp-listBoxItem-depth1-border-color)] bg-[var(--cmp-listBoxItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listBoxItem-depth2-middle-bg)] font-medium";
         if (multi) {
           const leafValues = groupLeafValues.get(idx) ?? [];
           const total = leafValues.length;
@@ -4837,12 +4838,12 @@ function ItemList({
               "data-select-focused": groupFocused ? "true" : void 0,
               "data-select-active": groupFocused ? "true" : void 0,
               className: cn(
-                "flex w-full select-none items-center gap-[8px] border-none py-[4px] pr-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
+                "flex w-full select-none items-center gap-[8px] border-none py-[4px] pr-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-default)]",
                 groupTone,
-                groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]" : "cursor-pointer",
-                groupDisabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]",
+                groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]" : "cursor-pointer",
+                groupDisabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]",
                 // 포커스 하이라이트는 depth 배경보다 뒤에 둬 tailwind-merge 로 이기게 한다.
-                groupFocused && !groupDisabled && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]"
+                groupFocused && !groupDisabled && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
               ),
               style: { paddingLeft: padLeft },
               onMouseEnter: () => onHoverValue(`__group_${idx}__`),
@@ -4862,7 +4863,7 @@ function ItemList({
                   {
                     className: cn(
                       "shrink-0 font-medium",
-                      groupFocused ? "text-white" : "text-[color:var(--cmp-listItem-content-disabled)]"
+                      groupFocused ? "text-white" : "text-[color:var(--cmp-listBoxItem-content-disabled)]"
                     ),
                     children: [
                       "(",
@@ -4882,12 +4883,12 @@ function ItemList({
           "div",
           {
             className: cn(
-              "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
+              "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-default)]",
               groupTone,
               // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
               // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
-              o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
-              o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
+              o.disabled && "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]",
+              o.disabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]"
             ),
             style: { paddingLeft: padLeft },
             children: o.label
@@ -4907,8 +4908,8 @@ function ItemList({
           "data-select-active": focusedValue === o.value ? "true" : void 0,
           className: cn(
             itemBase,
-            isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
-            focusedValue === o.value && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]",
+            isSelected && !multi && "font-bold text-[color:var(--cmp-listBoxItem-content-selected)]",
+            focusedValue === o.value && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]",
             // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
             // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
             !o.disabled && activeClass