@topgrid/grid-features 0.3.0

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.
@@ -0,0 +1,655 @@
1
+ export { DragThProps, DropIndicator, SortBadge, SortBadgeProps, SortClearButton, SortClearButtonProps, UseColumnDragProps, UseColumnDragReturn, UseColumnOrderPersistProps, useColumnDrag, useColumnOrderPersist } from '@topgrid/grid-core';
2
+ import * as React from 'react';
3
+ import { Column, Table, FilterFn } from '@tanstack/react-table';
4
+
5
+ /**
6
+ * Multi-sort feature types.
7
+ * @package @topgrid/grid-features
8
+ *
9
+ * Note: `SortClearButtonProps` moved to `@topgrid/grid-core` per ADR-009 (옵션 A).
10
+ * Note: `SortBadgeProps` moved to `@topgrid/grid-core` per ADR-010.
11
+ * Both are re-exported from `@topgrid/grid-core` as deprecation aliases (see grid-features/src/index.ts).
12
+ */
13
+ /**
14
+ * `useMultiSort` 훅 옵션 (비-wrapper 소비자용).
15
+ *
16
+ * @remarks
17
+ * `<Grid enableMultiSort />` wrapper 사용자는 이 훅 불필요 — Grid.tsx가 직접 처리. (D6)
18
+ */
19
+ interface UseMultiSortOptions {
20
+ /** 다중 정렬 활성 여부 (default false). */
21
+ enableMultiSort?: boolean;
22
+ /** TanStack maxMultiSortColCount에 직접 전달 (AC-001). 미설정 시 무제한. */
23
+ maxMultiSortColCount?: number;
24
+ }
25
+ /**
26
+ * `useMultiSort` 반환값.
27
+ * useReactTable 옵션에 spread하여 사용.
28
+ *
29
+ * @example
30
+ * const opts = useMultiSort({ enableMultiSort: true });
31
+ * const table = useReactTable({ ...opts, ... });
32
+ */
33
+ interface UseMultiSortResult {
34
+ /** TanStack TableOptions.enableMultiSort에 전달. */
35
+ enableMultiSort: boolean;
36
+ /**
37
+ * TanStack TableOptions.isMultiSortEvent에 전달.
38
+ * (e) => e.shiftKey — TanStack 내장 기본값과 동일.
39
+ * 명시적으로 설정하여 문서화 목적 달성.
40
+ */
41
+ isMultiSortEvent: (e: unknown) => boolean;
42
+ /** C-29: 미설정 시 undefined — spread 시 TanStack에 전달 안 됨 (무제한). */
43
+ maxMultiSortColCount?: number;
44
+ }
45
+
46
+ /**
47
+ * useReactTable 직접 사용자가 다중 정렬 옵션을 구성할 때 사용하는 헬퍼.
48
+ *
49
+ * @remarks
50
+ * `<Grid enableMultiSort />` wrapper 사용자는 이 훅 불필요 — Grid.tsx 내부에서
51
+ * `buildTableOptions.ts`가 props.enableMultiSort를 직접 처리. (D6)
52
+ *
53
+ * C-31 wiring audit: Grid.tsx는 이 훅을 import하지 않음. 외부 소비자용 유틸.
54
+ *
55
+ * @example
56
+ * const { enableMultiSort, isMultiSortEvent } = useMultiSort({ enableMultiSort: true });
57
+ * const table = useReactTable({
58
+ * data,
59
+ * columns,
60
+ * getCoreRowModel: getCoreRowModel(),
61
+ * getSortedRowModel: getSortedRowModel(),
62
+ * enableMultiSort,
63
+ * isMultiSortEvent,
64
+ * });
65
+ */
66
+ declare function useMultiSort(opts?: UseMultiSortOptions): UseMultiSortResult;
67
+
68
+ /**
69
+ * @topgrid/grid-features — filter-ui 타입 정의.
70
+ *
71
+ * MOD-GRID-09 G-001: TextFilter, FilterPopover, FilterIndicator 공유 타입.
72
+ *
73
+ * 모든 Props 인터페이스는 index.ts export + Section 9 re-export 계획에 따라
74
+ * 이 단일 파일에 통합. (C-4: no any, C-29: optional prop 명시)
75
+ *
76
+ * @remarks
77
+ * `verbatimModuleSyntax: true` 환경 — import type 필수.
78
+ * `exactOptionalPropertyTypes: true` 환경 — optional prop 전달 시
79
+ * C-29 spread-skip 패턴 사용 (Section 4.6).
80
+ */
81
+
82
+ /** 텍스트 필터 연산자. contains/equals/startsWith/endsWith 4종. */
83
+ type TextFilterOperator = 'contains' | 'equals' | 'startsWith' | 'endsWith';
84
+ /**
85
+ * TanStack columnFilters에 저장되는 TextFilter 값.
86
+ * `column.setFilterValue(v: TextFilterValue | undefined)` 로 설정.
87
+ * undefined = 필터 해제.
88
+ */
89
+ interface TextFilterValue {
90
+ operator: TextFilterOperator;
91
+ value: string;
92
+ }
93
+ /**
94
+ * FilterPopover 컴포넌트 Props.
95
+ *
96
+ * 네이티브 div position:absolute 기반 팝오버 (D2: @radix-ui 없음).
97
+ * 외부클릭(mousedown) / Escape 해제 / 포커스 관리 포함 (D4).
98
+ */
99
+ interface FilterPopoverProps {
100
+ /** 팝오버 트리거 요소 렌더 함수 */
101
+ trigger: React.ReactNode;
102
+ /** 팝오버 내용 */
103
+ children: React.ReactNode;
104
+ /**
105
+ * 정렬 방향 — 기본 'left'.
106
+ * C-29: optional prop — 하위 전달 시 spread-skip 패턴 사용 (Section 4.6).
107
+ */
108
+ align?: 'left' | 'right';
109
+ }
110
+ /**
111
+ * FilterIndicator 컴포넌트 Props.
112
+ * `column.getIsFiltered()` 결과값을 그대로 전달.
113
+ */
114
+ interface FilterIndicatorProps {
115
+ /** column.getIsFiltered() 결과값 */
116
+ isFiltered: boolean;
117
+ }
118
+ /**
119
+ * TextFilter 컴포넌트 Props.
120
+ *
121
+ * @template TData - TanStack Row data 타입.
122
+ *
123
+ * C-4: Column<TData, unknown> — unknown cellValue로 any 방지.
124
+ * C-29: optional prop (defaultOperator, popoverAlign) — spread-skip 패턴 사용처.
125
+ */
126
+ interface TextFilterProps<TData> {
127
+ /** TanStack Column 인스턴스. Column<TData, unknown> — cell value 타입 unknown (C-4). */
128
+ column: Column<TData, unknown>;
129
+ /**
130
+ * 기본 연산자 — 기본 'contains'.
131
+ * C-29: optional prop.
132
+ */
133
+ defaultOperator?: TextFilterOperator;
134
+ /**
135
+ * 팝오버 정렬 — 기본 'left'.
136
+ * C-29: optional prop — FilterPopover align으로 spread-skip 전달.
137
+ */
138
+ popoverAlign?: 'left' | 'right';
139
+ }
140
+ /** 숫자 필터 연산자. 7종. */
141
+ type NumberFilterOperator = '=' | '!=' | '>' | '<' | '>=' | '<=' | 'between';
142
+ /**
143
+ * TanStack columnFilters에 저장되는 NumberFilter 값.
144
+ * `column.setFilterValue(v: NumberFilterValue | undefined)` 로 설정.
145
+ * - 단항 연산자: `value` 사용, `min`/`max` undefined.
146
+ * - `between`: `min`/`max` 사용, `value` undefined.
147
+ * - undefined = 필터 해제.
148
+ */
149
+ interface NumberFilterValue {
150
+ operator: NumberFilterOperator;
151
+ /** 단항 연산자용 값 (=, !=, >, <, >=, <=). between 시 미사용. */
152
+ value?: number;
153
+ /** between 하한값 (min <= cell). */
154
+ min?: number;
155
+ /** between 상한값 (cell <= max). */
156
+ max?: number;
157
+ }
158
+ /**
159
+ * NumberFilter 컴포넌트 Props.
160
+ *
161
+ * @template TData - TanStack Row data 타입.
162
+ * C-4: Column<TData, unknown> — cell value 타입 unknown (any 방지).
163
+ * C-29: optional prop spread-skip 패턴 적용 (defaultOperator, popoverAlign).
164
+ */
165
+ interface NumberFilterProps<TData> {
166
+ /** TanStack Column 인스턴스. Column<TData, unknown>. */
167
+ column: Column<TData, unknown>;
168
+ /**
169
+ * 기본 연산자 — 기본 '='.
170
+ * C-29: optional prop.
171
+ */
172
+ defaultOperator?: NumberFilterOperator;
173
+ /**
174
+ * 팝오버 정렬 — 기본 'left'.
175
+ * C-29: optional prop — FilterPopover align으로 spread-skip 전달.
176
+ */
177
+ popoverAlign?: 'left' | 'right';
178
+ }
179
+ /**
180
+ * TanStack columnFilters에 저장되는 DateFilter 값.
181
+ * `column.setFilterValue(v: DateFilterValue | undefined)` 로 설정.
182
+ * - from?: 범위 시작일 (inclusive, startOfDay 정규화)
183
+ * - to?: 범위 종료일 (inclusive, endOfDay 정규화)
184
+ * - 양쪽 모두 undefined = 필터 해제 (autoRemove)
185
+ */
186
+ interface DateFilterValue {
187
+ from?: Date;
188
+ to?: Date;
189
+ }
190
+ /**
191
+ * DateFilter 컴포넌트 Props.
192
+ *
193
+ * @template TData - TanStack Row data 타입.
194
+ * C-4: Column<TData, unknown> — cell value 타입 unknown (any 방지).
195
+ * C-29: optional prop spread-skip 패턴 적용 (popoverAlign).
196
+ */
197
+ interface DateFilterProps<TData> {
198
+ /** TanStack Column 인스턴스. Column<TData, unknown>. */
199
+ column: Column<TData, unknown>;
200
+ /**
201
+ * 팝오버 정렬 — 기본 'left'.
202
+ * C-29: optional prop — FilterPopover align으로 spread-skip 전달.
203
+ */
204
+ popoverAlign?: 'left' | 'right';
205
+ }
206
+ /**
207
+ * SelectFilter 컴포넌트 Props.
208
+ *
209
+ * @template TData - TanStack Row data 타입.
210
+ * C-4: Column<TData, unknown> — cell value 타입 unknown (any 방지).
211
+ * C-29: optional prop (searchThreshold, popoverAlign) — spread-skip 패턴 적용.
212
+ *
213
+ * 주의: consumer useReactTable options에
214
+ * `getFacetedRowModel: getFacetedRowModel()` 와
215
+ * `getFacetedUniqueValues: getFacetedUniqueValues()` 등록 필수 (D3).
216
+ */
217
+ interface SelectFilterProps<TData> {
218
+ /** TanStack Column 인스턴스. Column<TData, unknown>. */
219
+ column: Column<TData, unknown>;
220
+ /**
221
+ * 내부 검색 표시 임계값 — 기본 50.
222
+ * 옵션 수 >= searchThreshold 시 검색 input 자동 노출.
223
+ * C-29: optional prop.
224
+ */
225
+ searchThreshold?: number;
226
+ /**
227
+ * 팝오버 정렬 — 기본 'left'.
228
+ * C-29: optional prop — FilterPopover align으로 spread-skip 전달.
229
+ */
230
+ popoverAlign?: 'left' | 'right';
231
+ }
232
+ /**
233
+ * GlobalSearchInput 컴포넌트 Props.
234
+ *
235
+ * @template TData - TanStack Row data 타입.
236
+ * C-4: Table<TData> — table 인스턴스 직접 수신.
237
+ * C-29: optional prop (debounceMs, placeholder) — spread-skip 패턴 적용.
238
+ *
239
+ * 주의: consumer useReactTable options에 globalFilter state 등록 필요.
240
+ */
241
+ interface GlobalSearchInputProps<TData> {
242
+ /** TanStack Table 인스턴스. */
243
+ table: Table<TData>;
244
+ /**
245
+ * 디바운스 ms — 기본 300.
246
+ * C-29: optional prop.
247
+ */
248
+ debounceMs?: number;
249
+ /**
250
+ * 입력 placeholder — 기본 'Search all columns…'.
251
+ * C-29: optional prop.
252
+ */
253
+ placeholder?: string;
254
+ }
255
+ /**
256
+ * FilterResetButton 컴포넌트 Props.
257
+ *
258
+ * @template TData - TanStack Row data 타입.
259
+ * C-4: Table<TData>.
260
+ * C-29: children optional.
261
+ */
262
+ interface FilterResetButtonProps<TData> {
263
+ /** TanStack Table 인스턴스. */
264
+ table: Table<TData>;
265
+ /**
266
+ * 버튼 레이블 — 기본 'Reset Filters'.
267
+ * C-29: optional prop.
268
+ */
269
+ children?: React.ReactNode;
270
+ }
271
+
272
+ /**
273
+ * @topgrid/grid-features — TextFilter 메인 컴포넌트.
274
+ *
275
+ * MOD-GRID-09 G-001:
276
+ * 컬럼 헤더 Popover + contains/equals/startsWith/endsWith 연산자 + 필터 인디케이터.
277
+ *
278
+ * AC-001: TextFilterValue 타입 + column.setFilterValue / getFilterValue 사용
279
+ * AC-002: filterFn 등록 패턴 문서화 (Section 12 예시)
280
+ * AC-003: FilterPopover 사용 (네이티브 div, D2)
281
+ * AC-004: FilterIndicator (파란 dot, column.getIsFiltered())
282
+ * AC-005: clear 버튼 → column.setFilterValue(undefined)
283
+ * AC-006: tsc 0 error (C-29 spread-skip 패턴 적용)
284
+ *
285
+ * @remarks
286
+ * `verbatimModuleSyntax: true` — import type 분리.
287
+ * `exactOptionalPropertyTypes: true` — popoverAlign → FilterPopover align 전달 시
288
+ * C-29 spread-skip 패턴 (Section 4.6).
289
+ * `noUnusedLocals/noUnusedParameters: true` — 모든 변수 사용.
290
+ * Tailwind className 전용 (C-5).
291
+ */
292
+
293
+ /**
294
+ * 텍스트 필터 UI — 연산자 select + 값 input + clear 버튼.
295
+ *
296
+ * `FilterPopover` + `FilterIndicator`를 조합한 메인 컴포넌트.
297
+ * `column.setFilterValue`로 TanStack columnFilters에 연결.
298
+ * 디바운스 300ms (D6, Section 4.5).
299
+ *
300
+ * @template TData - TanStack Row data 타입.
301
+ *
302
+ * @example
303
+ * ```tsx
304
+ * // columnDef header에 렌더:
305
+ * header: ({ column }) => (
306
+ * <div className="flex items-center gap-1">
307
+ * <span>이름</span>
308
+ * <TextFilter column={column} defaultOperator="contains" />
309
+ * </div>
310
+ * ),
311
+ * filterFn: textFilterFn,
312
+ * ```
313
+ */
314
+ declare function TextFilter<TData>({ column, defaultOperator, popoverAlign, }: TextFilterProps<TData>): JSX.Element;
315
+
316
+ /**
317
+ * @topgrid/grid-features — FilterPopover 컴포넌트.
318
+ *
319
+ * MOD-GRID-09 G-001 AC-003:
320
+ * 네이티브 div position:absolute 팝오버 구현 (@radix-ui 없음, D2).
321
+ *
322
+ * 필수 동작 (D4):
323
+ * 1. 외부 클릭 해제 (mousedown on document)
324
+ * 2. Escape 키 해제 + trigger 포커스 복귀
325
+ * 3. open 시 첫 번째 input 포커스
326
+ * 4. close 시 trigger 버튼 포커스 복귀
327
+ * 5. z-index z-[50] — sticky header(z-[10], MOD-GRID-02)보다 높음 (D7)
328
+ *
329
+ * @remarks
330
+ * `verbatimModuleSyntax: true` — import type 분리.
331
+ * `exactOptionalPropertyTypes: true` — FilterPopoverProps align prop 전달 시
332
+ * spread-skip 패턴 사용 (C-29, Section 4.6).
333
+ * Tailwind className 전용 (C-5). style={{}} 없음.
334
+ */
335
+
336
+ /**
337
+ * 텍스트 필터용 Popover 컨테이너.
338
+ *
339
+ * trigger prop으로 트리거 요소를 받고, children으로 팝오버 내용을 렌더.
340
+ * open/close 상태를 내부적으로 관리 (외부 제어 불필요).
341
+ *
342
+ * @param props.trigger - 팝오버를 열/닫는 트리거 요소 (아이콘 버튼 등)
343
+ * @param props.children - 팝오버 내부 콘텐츠 (TextFilter 내용)
344
+ * @param props.align - 팝오버 정렬 방향. 'left'(기본) | 'right'
345
+ */
346
+ declare function FilterPopover({ trigger, children, align }: FilterPopoverProps): JSX.Element;
347
+
348
+ /**
349
+ * @topgrid/grid-features — FilterIndicator 컴포넌트.
350
+ *
351
+ * MOD-GRID-09 G-001 AC-004:
352
+ * 활성 필터 상태를 헤더에 표시하는 파란 dot 인디케이터.
353
+ * `column.getIsFiltered() === true` 일 때만 렌더.
354
+ *
355
+ * Section 5.2 truth table:
356
+ * - isFiltered=true → 파란 dot (w-2 h-2 rounded-full bg-blue-500)
357
+ * - isFiltered=false → null (렌더 없음)
358
+ *
359
+ * @remarks
360
+ * Tailwind className 전용 (C-5). style={{}} 없음.
361
+ * `jsx: "react-jsx"` 환경 — `import React` 불필요.
362
+ */
363
+
364
+ /**
365
+ * 활성 필터 인디케이터 — 파란 dot.
366
+ *
367
+ * `column.getIsFiltered()` 결과값을 isFiltered prop으로 전달.
368
+ * 필터 비활성 시 null 반환 (DOM 요소 없음).
369
+ *
370
+ * @example
371
+ * ```tsx
372
+ * <FilterIndicator isFiltered={column.getIsFiltered()} />
373
+ * ```
374
+ */
375
+ declare function FilterIndicator({ isFiltered }: FilterIndicatorProps): JSX.Element | null;
376
+
377
+ /**
378
+ * @topgrid/grid-features — TextFilter 커스텀 filterFn.
379
+ *
380
+ * MOD-GRID-09 G-001 AC-002: TanStack FilterFn<unknown> 구현.
381
+ *
382
+ * 동작 정의 (Section 4.4, D5):
383
+ * - 대소문자 무시 (case-insensitive toLowerCase 변환)
384
+ * - 공백 trim (filterValue.value.trim())
385
+ * - empty value → autoRemove 트리거 → 필터 자동 해제
386
+ * - null/undefined cellValue → false (null-safe)
387
+ *
388
+ * @remarks
389
+ * `verbatimModuleSyntax: true` — import type 필수.
390
+ * `noUnusedParameters: true` — row.getValue(columnId) 로 columnId 사용.
391
+ */
392
+
393
+ /**
394
+ * TanStack 커스텀 filterFn — 4가지 텍스트 연산자 지원.
395
+ *
396
+ * columnDef에 `filterFn: textFilterFn` 으로 직접 참조 방식 등록.
397
+ * (타입 안전 + tree-shaking 친화적 — Section 4.3)
398
+ *
399
+ * `autoRemove`: filterValue.value.trim() === '' 일 때 TanStack이 필터를 자동 제거.
400
+ *
401
+ * @example
402
+ * ```typescript
403
+ * columnHelper.accessor('name', {
404
+ * filterFn: textFilterFn,
405
+ * header: ({ column }) => <TextFilter column={column} />,
406
+ * });
407
+ * ```
408
+ */
409
+ declare const textFilterFn: FilterFn<unknown>;
410
+ /**
411
+ * TanStack 커스텀 filterFn — 7가지 숫자 연산자 지원.
412
+ *
413
+ * 연산자: = / != / > / < / >= / <= / between
414
+ * - between: min <= cell <= max (양끝 inclusive, inNumberRange semantics — D2)
415
+ * - null-safe: rawCell == null → false
416
+ * - NaN-safe: Number(rawCell) isNaN → false
417
+ *
418
+ * `autoRemove`:
419
+ * - 단항 연산자: value === undefined 또는 isNaN(value)
420
+ * - between: (min === undefined || isNaN(min)) && (max === undefined || isNaN(max))
421
+ *
422
+ * columnDef에 `filterFn: numberFilterFn` 으로 직접 참조 방식 등록.
423
+ *
424
+ * @example
425
+ * ```typescript
426
+ * columnHelper.accessor('price', {
427
+ * filterFn: numberFilterFn,
428
+ * header: ({ column }) => <NumberFilter column={column} />,
429
+ * });
430
+ * ```
431
+ */
432
+ declare const numberFilterFn: FilterFn<unknown>;
433
+ /**
434
+ * TanStack 커스텀 filterFn — 날짜 범위(from/to) 필터.
435
+ *
436
+ * - cell value: Date instance | ISO string | number(epoch ms) — `new Date(cell)` 변환
437
+ * - startOfDay(from) / endOfDay(to) 자정 정규화 (D6 로컬 타임존 기준)
438
+ * - 단일 bound 지원: from-only → cell ≥ startOfDay(from), to-only → cell ≤ endOfDay(to)
439
+ * - isWithinInterval RangeError (from > to) → try-catch → false (E1)
440
+ * - null-safe / NaN-safe / empty-string-safe (T1~T4, E4)
441
+ *
442
+ * `autoRemove`: from과 to 모두 undefined 일 때 TanStack이 필터를 자동 제거.
443
+ *
444
+ * @example
445
+ * ```typescript
446
+ * columnHelper.accessor('orderDate', {
447
+ * filterFn: dateRangeFilterFn,
448
+ * header: ({ column }) => <DateFilter column={column} />,
449
+ * });
450
+ * ```
451
+ */
452
+ declare const dateRangeFilterFn: FilterFn<unknown>;
453
+ /**
454
+ * TanStack 커스텀 filterFn — 다중선택 배열 포함 필터.
455
+ *
456
+ * `filterFns.arrIncludes` re-export: cell value가 filterValue 배열의
457
+ * 임의 요소와 일치하면 true.
458
+ *
459
+ * `autoRemove`: filterValue?.length === 0 시 TanStack이 자동 필터 해제.
460
+ *
461
+ * columnDef에 `filterFn: selectFilterFn` 으로 직접 참조 방식 등록.
462
+ *
463
+ * 주의: consumer useReactTable options에
464
+ * `getFacetedRowModel: getFacetedRowModel()` 과
465
+ * `getFacetedUniqueValues: getFacetedUniqueValues()` 등록 필수 (D3).
466
+ *
467
+ * @example
468
+ * ```typescript
469
+ * columnHelper.accessor('category', {
470
+ * filterFn: selectFilterFn,
471
+ * header: ({ column }) => <SelectFilter column={column} />,
472
+ * });
473
+ * ```
474
+ */
475
+ declare const selectFilterFn: FilterFn<any>;
476
+
477
+ /**
478
+ * @topgrid/grid-features — NumberFilter 메인 컴포넌트.
479
+ *
480
+ * MOD-GRID-09 G-002:
481
+ * 컬럼 헤더 Popover + 7가지 숫자 연산자(=, !=, >, <, >=, <=, between) + 필터 인디케이터.
482
+ *
483
+ * AC-001: NumberFilterValue 타입 + column.setFilterValue / getFilterValue 사용
484
+ * AC-002: numberFilterFn 등록 패턴 문서화 (Section 12 예시)
485
+ * AC-003: 단항 연산자 → 단일 value input; between → min/max 두 input (조건부 렌더)
486
+ * AC-004: G-001 FilterPopover 재사용 (DRY, D7)
487
+ * AC-005: G-001 FilterIndicator 재사용 (column.getIsFiltered() 기반, D7)
488
+ * AC-006: tsc 0 error (C-29 spread-skip 패턴 적용)
489
+ *
490
+ * @remarks
491
+ * `verbatimModuleSyntax: true` — import type 분리.
492
+ * `exactOptionalPropertyTypes: true` — popoverAlign → FilterPopover align 전달 시
493
+ * C-29 spread-skip 패턴 (Section 4.7).
494
+ * `noUnusedLocals/noUnusedParameters: true` — 모든 변수 사용.
495
+ * Tailwind className 전용 (C-5). style={{}} 없음.
496
+ */
497
+
498
+ /**
499
+ * 숫자 필터 UI — 7가지 연산자 select + 조건부 input + clear 버튼.
500
+ *
501
+ * `FilterPopover` + `FilterIndicator`를 조합한 메인 컴포넌트 (G-001 재사용).
502
+ * `column.setFilterValue`로 TanStack columnFilters에 연결.
503
+ * 디바운스 300ms (D10, Section 4.6).
504
+ * between 연산자: min/max 두 input 조건부 렌더 (AC-003, D9, Section 5.3).
505
+ *
506
+ * @template TData - TanStack Row data 타입.
507
+ *
508
+ * @example
509
+ * ```tsx
510
+ * // columnDef header에 렌더:
511
+ * header: ({ column }) => (
512
+ * <div className="flex items-center gap-1">
513
+ * <span>가격</span>
514
+ * <NumberFilter column={column} defaultOperator="=" />
515
+ * </div>
516
+ * ),
517
+ * filterFn: numberFilterFn,
518
+ * ```
519
+ */
520
+ declare function NumberFilter<TData>({ column, defaultOperator, popoverAlign, }: NumberFilterProps<TData>): JSX.Element;
521
+
522
+ /**
523
+ * @topgrid/grid-features — DateFilter 컴포넌트.
524
+ *
525
+ * MOD-GRID-09 G-003:
526
+ * react-datepicker 기반 날짜 범위(from/to) 선택 필터.
527
+ * FilterPopover + FilterIndicator 재사용 (G-001).
528
+ *
529
+ * 핵심 동작:
530
+ * - from/to DatePicker (한국어 locale, locale="ko")
531
+ * - maxDate/minDate 역전 방지 (E1)
532
+ * - 초기화 버튼: column.setFilterValue(undefined)
533
+ * - C-29: popoverAlign → FilterPopover align spread-skip 패턴
534
+ * - D4: CSS import 없음 — 소비자가 react-datepicker/dist/react-datepicker.css import
535
+ *
536
+ * @remarks
537
+ * `verbatimModuleSyntax: true` — import type 필수.
538
+ * `exactOptionalPropertyTypes: true` — optional prop 전달 시 C-29 spread-skip 패턴.
539
+ * Tailwind className 전용 (C-5). 내부 CSS import 없음 (D4).
540
+ */
541
+
542
+ /**
543
+ * 날짜 범위 필터 컴포넌트.
544
+ *
545
+ * FilterPopover + FilterIndicator를 재사용하여 from/to DatePicker를 렌더.
546
+ * `column.setFilterValue` 로 TanStack Table 필터링을 트리거.
547
+ *
548
+ * @template TData - TanStack Row data 타입.
549
+ *
550
+ * @example
551
+ * ```tsx
552
+ * columnHelper.accessor('orderDate', {
553
+ * filterFn: dateRangeFilterFn,
554
+ * header: ({ column }) => (
555
+ * <div>
556
+ * 주문일
557
+ * <DateFilter column={column} />
558
+ * </div>
559
+ * ),
560
+ * });
561
+ * ```
562
+ */
563
+ declare function DateFilter<TData>({ column, popoverAlign }: DateFilterProps<TData>): JSX.Element;
564
+
565
+ /**
566
+ * @topgrid/grid-features — SelectFilter 컴포넌트.
567
+ *
568
+ * MOD-GRID-09 G-004 AC-001:
569
+ * column.getFacetedUniqueValues() Map 읽어 체크박스 옵션 렌더.
570
+ * 선택 시 column.setFilterValue(string[] | undefined) 호출.
571
+ *
572
+ * AC-003: 옵션 수 >= searchThreshold(기본 50) 시 내부 검색 input 자동 노출.
573
+ * String.includes 대소문자 무시 — 신규 dep 없음 (D4).
574
+ *
575
+ * C-29: popoverAlign optional prop → FilterPopover align에 spread-skip 전달.
576
+ * C-4: no any — Column<TData, unknown>.
577
+ * C-5: Tailwind className만.
578
+ * NFR-5: 체크박스 <input type="checkbox"> 네이티브, label 연결 필수.
579
+ *
580
+ * @remarks
581
+ * consumer useReactTable options에 반드시 등록 필요 (D3):
582
+ * getFacetedRowModel: getFacetedRowModel(),
583
+ * getFacetedUniqueValues: getFacetedUniqueValues(),
584
+ */
585
+
586
+ /**
587
+ * Excel-style 다중선택 체크박스 필터 컴포넌트.
588
+ *
589
+ * @template TData - TanStack Row data 타입.
590
+ * @param props.column - TanStack Column 인스턴스.
591
+ * @param props.searchThreshold - 내부 검색 노출 임계값 (기본 50).
592
+ * @param props.popoverAlign - 팝오버 정렬 방향 (기본 'left').
593
+ */
594
+ declare function SelectFilter<TData>({ column, searchThreshold, popoverAlign, }: SelectFilterProps<TData>): JSX.Element;
595
+
596
+ /**
597
+ * @topgrid/grid-features — GlobalSearchInput 컴포넌트.
598
+ *
599
+ * MOD-GRID-09 G-004 AC-004:
600
+ * 입력값 변경 후 300ms debounce → table.setGlobalFilter(value) 호출.
601
+ *
602
+ * Truth Table 5.3:
603
+ * - "" (빈 문자열) → setGlobalFilter(undefined) (autoRemove)
604
+ * - " " (공백만) → trim 후 빈 문자열 → setGlobalFilter(undefined)
605
+ * - "abc" → setGlobalFilter("abc")
606
+ *
607
+ * D5: useEffect + setTimeout 기반 debounce — 신규 dep 없음.
608
+ * C-4: no any — Table<TData>.
609
+ * C-5: Tailwind className만.
610
+ *
611
+ * @remarks
612
+ * consumer useReactTable options에 globalFilter state 등록 필요:
613
+ * state: { ..., globalFilter },
614
+ * onGlobalFilterChange: setGlobalFilter,
615
+ */
616
+
617
+ /**
618
+ * 전체 행 검색 입력 컴포넌트 (debounce 300ms).
619
+ *
620
+ * @template TData - TanStack Row data 타입.
621
+ * @param props.table - TanStack Table 인스턴스.
622
+ * @param props.debounceMs - 디바운스 ms (기본 300).
623
+ * @param props.placeholder - 입력 placeholder (기본 'Search all columns…').
624
+ */
625
+ declare function GlobalSearchInput<TData>({ table, debounceMs, placeholder, }: GlobalSearchInputProps<TData>): JSX.Element;
626
+
627
+ /**
628
+ * @topgrid/grid-features — FilterResetButton 컴포넌트.
629
+ *
630
+ * MOD-GRID-09 G-004 AC-005:
631
+ * table.resetColumnFilters() + table.setGlobalFilter(undefined) 호출.
632
+ * columnFilters.length === 0 && !globalFilter 시 disabled.
633
+ *
634
+ * D6: disabled 조건 — Truth Table 5.2:
635
+ * - columnFilters=[], globalFilter=undefined → disabled=true
636
+ * - 그 외 → disabled=false
637
+ *
638
+ * C-4: no any — Table<TData>.
639
+ * C-5: Tailwind className만.
640
+ *
641
+ * @remarks
642
+ * children prop은 버튼 레이블 오버라이드 용도.
643
+ * 기본 레이블: 'Reset Filters'.
644
+ */
645
+
646
+ /**
647
+ * 필터 전체 초기화 버튼 컴포넌트.
648
+ *
649
+ * @template TData - TanStack Row data 타입.
650
+ * @param props.table - TanStack Table 인스턴스.
651
+ * @param props.children - 버튼 레이블 (기본 'Reset Filters').
652
+ */
653
+ declare function FilterResetButton<TData>({ table, children, }: FilterResetButtonProps<TData>): JSX.Element;
654
+
655
+ export { DateFilter, type DateFilterProps, type DateFilterValue, FilterIndicator, type FilterIndicatorProps, FilterPopover, type FilterPopoverProps, FilterResetButton, type FilterResetButtonProps, GlobalSearchInput, type GlobalSearchInputProps, NumberFilter, type NumberFilterOperator, type NumberFilterProps, type NumberFilterValue, SelectFilter, type SelectFilterProps, TextFilter, type TextFilterOperator, type TextFilterProps, type TextFilterValue, type UseMultiSortOptions, type UseMultiSortResult, dateRangeFilterFn, numberFilterFn, selectFilterFn, textFilterFn, useMultiSort };