sellmate-design-system-react 0.1.10 → 0.2.0

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

@@ -18,19 +18,40 @@ export interface SKeyValueField {
     /** 셀 커스텀 렌더 (React 확장) */
     render?: ReactNode;
 }
-export interface SKeyValueChangeDetail {
-    name: string;
-    value: unknown;
+/**
+ * field type별 `onChange`로 올라오는 값 타입.
+ * - `string`: input · textarea · select · radio · date-picker
+ * - `number`: number-input
+ * - `boolean`: checkbox
+ * - `string[]`: date-range-picker
+ */
+export type SKeyValueFieldValue = string | number | boolean | string[];
+/**
+ * `onChange` 콜백 detail.
+ * 제네릭 `V`에 폼 값 형태(`{ [name]: value }`)를 넘기면 `name`/`value`/`values`가 정밀하게 타이핑됩니다.
+ * 미지정 시 `value`는 {@link SKeyValueFieldValue} 유니온으로 잡힙니다.
+ */
+export interface SKeyValueChangeDetail<V extends Record<string, SKeyValueFieldValue> = Record<string, SKeyValueFieldValue>> {
+    /** 변경된 field의 name */
+    name: Extract<keyof V, string>;
+    /** 변경된 field의 새 값 */
+    value: V[Extract<keyof V, string>];
+    /** 변경이 반영된 전체 값 객체 (`{ [name]: value }`). controlled 패턴에서 그대로 상태에 반영하면 됩니다. */
+    values: V;
 }
 export interface SKeyValueTableProps {
     /** 2차원 배열. row → [th|td] 필드들 */
     fields?: SKeyValueField[][];
+    /**
+     * field name을 key로 하는 값 객체 (`{ [name]: value }`).
+     * 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다.
+     * `onChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
+     */
+    values?: Record<string, unknown>;
     /** 우측 검색 패널 */
     search?: boolean;
     /** border-radius 제어 */
     radius?: 'default' | 'useTop' | 'full';
-    /** 셀 높이 축소 (기본 44px → 32px) */
-    dense?: boolean;
     /** 값 변경 (sdChange) */
     onChange?: (detail: SKeyValueChangeDetail) => void;
     /** 검색 클릭 (sdSearch) */
@@ -39,4 +60,4 @@ export interface SKeyValueTableProps {
     style?: CSSProperties;
 }
 /** SKeyValueTable — sd-key-value-table 포팅. th/td 폼 레이아웃 + 필드 렌더러. */
-export declare function SKeyValueTable({ fields, search, radius, dense, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
+export declare function SKeyValueTable({ fields, values, search, radius, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;