sellmate-design-system-react 9.0.0-beta.25 → 9.0.0-beta.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,8 +11,7 @@
11
11
  | `fields?` | `SChipFilterGroup[]` | — | 필터 정의 목록. 묶을 것이 없어도 한 그룹으로 감싸 넘긴다 — `[{ fields: [...] }]`. 그룹은 rule로 함께 검증하거나 divider로 갈라 놓을 때 나눈다. |
12
12
  | `value?` | `SChipFilterValueMap` | — | 필터 값 맵 |
13
13
  | `activeKeys?` | `string[]` | — | 노출 필터 key 목록. 지정하면 제어 컴포넌트로 동작 — "필터 추가"로 고른 필드를 이 배열에 직접 넣어줘야 칩이 나타난다(onActiveKeysChange에서 받은 keys로 갱신). 지정하지 않으면 fixed·required 필드만 노출된 상태로 시작해 컴포넌트가 내부 상태로 관리하는 비제어 방식으로 동작한다. fixed·required 필드는 이 배열에 없어도 항상 노출된다 |
14
- | `label?` | `string` | `'검색 필터'` | 좌측 태그 텍스트 |
15
- | `showLabel?` | `boolean` | `false` | 좌측 태그(label)·구분선 표시 여부 |
14
+ | `label?` | `string` | | 좌측 태그 텍스트. 지정하면 태그와 그 뒤 구분선이 함께 노출되고, 지정하지 않으면(undefined) 둘 다 생략된다 |
16
15
  | `showReset?` | `boolean` | `true` | 검색 초기화 링크 표시 여부 |
17
16
  | `disabled?` | `boolean` | `false` | 바 비활성 상태 |
18
17
  | `className?` | `string` | — | |
@@ -24,7 +23,7 @@
24
23
  |-------|------|-------------|
25
24
  | `onValueChange` | `(value: SChipFilterValueMap) => void` | 전체 값 변경 — 편집 중인 값이 바뀔 때마다(선택할 때마다) 호출된다. 실제 검색 실행은 onSearch를 쓴다 |
26
25
  | `onFilterChange` | `(detail: SChipFilterChangeDetail) => void` | 개별 필터 값 변경 |
27
- | `onSearch` | `(value: SChipFilterValueMap) => void` | 실제 검색을 실행할 시점 — 편집 팝오버의 "검색" 버튼을 누르거나 팝오버가 닫힐 때(바깥 클릭·Esc·다른 칩으로 전환 포함) 그 시점의 전체 값 맵과 함께 호출된다. 팝오버가 없는 필드(인라인 date 프리셋·custom, clearable ×, 검색 초기화)는 값이 바뀌는 즉시 호출된다. keyword 필터에서 Enter 로 키워드를 추가할 때도 그 즉시 호출된다 — 팝오버는 열린 채라 키워드를 이어서 더 넣을 수 있고, 넣을 때마다 조회가 갱신된다. dirty 체크가 기본 적용되어 있어 — 마지막으로 실제 검색이 실행된 값 맵과 비교해 하나라도 달라진 게 없으면(예: 팝오버를 열었다 아무것도 안 바꾸고 닫는 경우) 호출되지 않는다. fields를 그룹으로 넘겼다면 rule을 만족하지 못한 그룹이 있는 동안엔 onSearch가 호출되지 않는다 — 해당 그룹의 경고 툴팁은 이 시점과 무관하게 값이 비어 있는 동안 항상 실시간으로 떠 있다(별도로 validate()를 호출할 필요 없음) |
26
+ | `onSearch` | `(value: SChipFilterValueMap) => void` | 실제 검색을 실행할 시점 — 편집 팝오버의 "검색" 버튼을 누르거나 팝오버가 닫힐 때(바깥 클릭·Esc·다른 칩으로 전환 포함) 그 시점의 전체 값 맵과 함께 호출된다. 팝오버가 없는 필드(인라인 date 프리셋·custom, clearable ×, 검색 초기화)는 값이 바뀌는 즉시 호출된다. keyword 필터에서 Enter 로 키워드를 추가할 때도 그 즉시 호출된다 — 팝오버는 열린 채라 키워드를 이어서 더 넣을 수 있고, 넣을 때마다 조회가 갱신된다. dirty 체크가 기본 적용되어 있어 — 마지막으로 실제 검색이 실행된 값 맵과 비교해 하나라도 달라진 게 없으면(예: 팝오버를 열었다 아무것도 안 바꾸고 닫는 경우) 호출되지 않는다. fields를 그룹으로 넘겼다면 rule을 만족하지 못한 그룹이 있는 동안엔 onSearch가 호출되지 않는다 — 해당 그룹의 경고 툴팁은 이 시점과 무관하게 값이 비어 있는 동안 항상 실시간으로 떠 있다(별도로 validate()를 호출할 필요 없음). required 필드가 비어 있는 동안에도 마찬가지로 호출되지 않는다 — 정상 설정(내장 기본값 또는 defaultValue)이라면 원래 비워지지 않지만, defaultValue 없는 select-multi·keyword·custom에 required만 준 오설정에서는 "검색 초기화"·clearable이 값을 null로 비울 수 있어 이때의 안전장치다 |
28
27
  | `onActiveKeysChange` | `(keys: string[]) => void` | 노출 필터 key 변경(칩 추가·제거) — 비제어 방식에서도 참고용으로 호출된다. activeKeys를 직접 제어할 때는 이 값을 그대로 activeKeys에 반영해야 한다 |
29
28
  | `onReset` | `() => void` | "검색 초기화" 클릭 — 모든 필드가 기본값(또는 null)으로 리셋된 뒤 호출된다 |
30
29
  | `onAddFilter` | `(key: string) => void` | "필터 추가" 목록에서 항목을 골랐을 때 — activeKeys를 직접 제어 중이면 이 콜백에서 (또는 onActiveKeysChange에서) key를 activeKeys에 추가해줘야 칩이 실제로 나타난다. activeKeys를 넘기지 않았다면(비제어) 별도 처리 없이도 컴포넌트가 알아서 칩을 노출한다 |
@@ -35,7 +34,7 @@
35
34
  |--------|------|-------------|
36
35
  | `open` | `(key: string) => void` | 특정 필터 편집 팝오버를 엽니다. |
37
36
  | `reset` | `() => void` | 모든 필터 값을 초기화합니다. |
38
- | `validate` | `() => boolean` | 현재 값 기준으로 각 그룹의 rule을 만족하는지 반환합니다. rule을 준 그룹이 없으면 항상 true. 경고 툴팁은 이 호출과 무관하게 rule 위반 상태인 동안 항상 실시간으로 떠 있으므로, 이 메서드는 그 상태를 그대로 읽어오는 용도다(예: 검색 버튼을 눌러도 되는지 사전 확인) |
37
+ | `validate` | `() => boolean` | 현재 값 기준으로 각 그룹의 rule을 만족하는지, 그리고 required 필드가 모두 비어 있지 않은지 반환합니다. rule을 준 그룹이 없고 required 필드도 모두 값이 있으면 항상 true. 경고 툴팁은 이 호출과 무관하게 rule 위반 상태인 동안 항상 실시간으로 떠 있으므로, 이 메서드는 그 상태를 그대로 읽어오는 용도다(예: 검색 버튼을 눌러도 되는지 사전 확인) |
39
38
 
40
39
  ## Types
41
40
 
@@ -52,7 +51,8 @@ export interface SChipFilterGroup {
52
51
  /** rule을 만족하지 않을 때 그룹 중앙에 띄울 툴팁 메시지. 지정 안 하면 rule 종류에 따른 기본 문구를 쓴다 */
53
52
  tooltipMessage?: string;
54
53
  /** 이 그룹 앞에 구분선을 넣을지. 검증(rule)과 구분선은 별개라 — 묶어서 검증만 하고 싶으면
55
- * 주지 않는다. 첫 그룹에는 앞에 가를 것이 없으므로 무시된다(showLabel의 구분선이 이미 있다) */
54
+ * 주지 않는다. 첫 그룹에는 앞에 가를 것이 없으므로 무시된다(label을 지정했다면 구분선이
55
+ * 이미 있다) */
56
56
  divider?: boolean;
57
57
  }
58
58
  ```
@@ -172,7 +172,8 @@ export interface SChipFilterGroup {
172
172
  /** rule을 만족하지 않을 때 그룹 중앙에 띄울 툴팁 메시지. 지정 안 하면 rule 종류에 따른 기본 문구를 쓴다 */
173
173
  tooltipMessage?: string;
174
174
  /** 이 그룹 앞에 구분선을 넣을지. 검증(rule)과 구분선은 별개라 — 묶어서 검증만 하고 싶으면
175
- * 주지 않는다. 첫 그룹에는 앞에 가를 것이 없으므로 무시된다(showLabel의 구분선이 이미 있다) */
175
+ * 주지 않는다. 첫 그룹에는 앞에 가를 것이 없으므로 무시된다(label을 지정했다면 구분선이
176
+ * 이미 있다) */
176
177
  divider?: boolean;
177
178
  }
178
179
  export interface SChipFilterHandle {
@@ -180,7 +181,8 @@ export interface SChipFilterHandle {
180
181
  open: (key: string) => void;
181
182
  /** 모든 필터 값을 초기화합니다. */
182
183
  reset: () => void;
183
- /** 현재 값 기준으로 각 그룹의 rule을 만족하는지 반환합니다. rule을 그룹이 없으면 항상 true.
184
+ /** 현재 값 기준으로 각 그룹의 rule을 만족하는지, 그리고 required 필드가 모두 비어 있지 않은지
185
+ * 반환합니다. rule을 준 그룹이 없고 required 필드도 모두 값이 있으면 항상 true.
184
186
  * 경고 툴팁은 이 호출과 무관하게 rule 위반 상태인 동안 항상 실시간으로 떠 있으므로,
185
187
  * 이 메서드는 그 상태를 그대로 읽어오는 용도다(예: 검색 버튼을 눌러도 되는지 사전 확인) */
186
188
  validate: () => boolean;
@@ -202,7 +204,10 @@ export interface SChipFilterProps {
202
204
  * 실제 검색이 실행된 값 맵과 비교해 하나라도 달라진 게 없으면(예: 팝오버를 열었다 아무것도 안 바꾸고
203
205
  * 닫는 경우) 호출되지 않는다. fields를 그룹으로 넘겼다면 rule을 만족하지 못한 그룹이 있는 동안엔
204
206
  * onSearch가 호출되지 않는다 — 해당 그룹의 경고 툴팁은 이 시점과 무관하게 값이 비어 있는 동안 항상
205
- * 실시간으로 떠 있다(별도로 validate()를 호출할 필요 없음) */
207
+ * 실시간으로 떠 있다(별도로 validate()를 호출할 필요 없음). required 필드가 비어 있는 동안에도
208
+ * 마찬가지로 호출되지 않는다 — 정상 설정(내장 기본값 또는 defaultValue)이라면 원래 비워지지
209
+ * 않지만, defaultValue 없는 select-multi·keyword·custom에 required만 준 오설정에서는 "검색
210
+ * 초기화"·clearable이 값을 null로 비울 수 있어 이때의 안전장치다 */
206
211
  onSearch?: (value: SChipFilterValueMap) => void;
207
212
  /** 노출 필터 key 목록. 지정하면 제어 컴포넌트로 동작 — "필터 추가"로 고른 필드를 이 배열에 직접
208
213
  * 넣어줘야 칩이 나타난다(onActiveKeysChange에서 받은 keys로 갱신). 지정하지 않으면
@@ -218,10 +223,9 @@ export interface SChipFilterProps {
218
223
  * (또는 onActiveKeysChange에서) key를 activeKeys에 추가해줘야 칩이 실제로 나타난다.
219
224
  * activeKeys를 넘기지 않았다면(비제어) 별도 처리 없이도 컴포넌트가 알아서 칩을 노출한다 */
220
225
  onAddFilter?: (key: string) => void;
221
- /** 좌측 태그 텍스트 */
226
+ /** 좌측 태그 텍스트. 지정하면 태그와 그 뒤 구분선이 함께 노출되고, 지정하지 않으면(undefined)
227
+ * 둘 다 생략된다 */
222
228
  label?: string;
223
- /** 좌측 태그(label)·구분선 표시 여부 */
224
- showLabel?: boolean;
225
229
  /** 검색 초기화 링크 표시 여부 */
226
230
  showReset?: boolean;
227
231
  /** 바 비활성 상태 */
@@ -9,6 +9,7 @@
9
9
  | Prop | Type | Default | Description |
10
10
  |------|------|---------|-------------|
11
11
  | `columns?` | `STableColumn[]` | `[]` | |
12
+ | `headerGroups?` | `STableHeaderGroup[]` | — | 상위 그룹 헤더. 지정하면 기존 컬럼 헤더가 두 번째 행에 렌더링된다. |
12
13
  | `rows?` | `SRow[]` | `[]` | |
13
14
  | `rowKey?` | `string` | `'id'` | 행 식별 필드 |
14
15
  | `selectable?` | `boolean` | `false` | 행 선택 체크박스 |
@@ -78,6 +79,21 @@ export type STableColumn = STableColumnBase &
78
79
  );
79
80
  ```
80
81
 
82
+ ### STableHeaderGroup
83
+
84
+ ```ts
85
+ /** 2단 헤더의 상위 셀. columnNames는 visible 컬럼 기준으로 연속되어야 한다. */
86
+ export interface STableHeaderGroup {
87
+ label?: ReactNode;
88
+ columnNames: string[];
89
+ rowSpan?: 1 | 2;
90
+ align?: 'left' | 'center' | 'right';
91
+ className?: string;
92
+ style?: CSSProperties;
93
+ render?: () => ReactNode;
94
+ }
95
+ ```
96
+
81
97
  ### SRow
82
98
 
83
99
  ```ts
@@ -147,6 +147,16 @@ export interface STableSort {
147
147
  name: string;
148
148
  dir: 'asc' | 'desc';
149
149
  }
150
+ /** 2단 헤더의 상위 셀. columnNames는 visible 컬럼 기준으로 연속되어야 한다. */
151
+ export interface STableHeaderGroup {
152
+ label?: ReactNode;
153
+ columnNames: string[];
154
+ rowSpan?: 1 | 2;
155
+ align?: 'left' | 'center' | 'right';
156
+ className?: string;
157
+ style?: CSSProperties;
158
+ render?: () => ReactNode;
159
+ }
150
160
  /** STable ref 명령형 API (sd-table @Method 대응) */
151
161
  export interface STableHandle {
152
162
  /** 행 선택 여부 */
@@ -171,6 +181,8 @@ export interface STableHandle {
171
181
  }
172
182
  export interface STableProps {
173
183
  columns?: STableColumn[];
184
+ /** 상위 그룹 헤더. 지정하면 기존 컬럼 헤더가 두 번째 행에 렌더링된다. */
185
+ headerGroups?: STableHeaderGroup[];
174
186
  rows?: SRow[];
175
187
  /** 행 식별 필드 */
176
188
  rowKey?: string;
@@ -1 +1 @@
1
- export { STable, type STableProps, type STableColumn, type STableColumnField, type STableSort, type STableCellContext, type STablePagination, type STableStickyColumn, type STableHandle, type SRow, } from './STable';
1
+ export { STable, type STableProps, type STableColumn, type STableColumnField, type STableSort, type STableHeaderGroup, type STableCellContext, type STablePagination, type STableStickyColumn, type STableHandle, type SRow, } from './STable';