react-virtuoso 4.17.0 → 4.18.1
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.
- package/README.md +264 -4
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +819 -50
- package/dist/index.mjs +257 -257
- package/package.json +24 -31
package/dist/index.d.ts
CHANGED
|
@@ -3,17 +3,35 @@ import { default as default_2 } from 'react';
|
|
|
3
3
|
declare interface BaseTableVirtuosoHandle {
|
|
4
4
|
/**
|
|
5
5
|
* Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
|
|
6
|
+
* @param stateCb - Callback that receives the state snapshot
|
|
6
7
|
*/
|
|
7
8
|
getState(stateCb: StateCallback): void;
|
|
9
|
+
/**
|
|
10
|
+
* Scrolls the component by the specified amount.
|
|
11
|
+
* @param location - The scroll offset options
|
|
12
|
+
*/
|
|
8
13
|
scrollBy(location: ScrollToOptions): void;
|
|
14
|
+
/**
|
|
15
|
+
* Scrolls the component to the specified position.
|
|
16
|
+
* @param location - The scroll position options
|
|
17
|
+
*/
|
|
9
18
|
scrollTo(location: ScrollToOptions): void;
|
|
10
19
|
}
|
|
11
20
|
|
|
21
|
+
/**
|
|
22
|
+
* @group Common
|
|
23
|
+
*/
|
|
12
24
|
export declare type CalculateViewLocation = (params: CalculateViewLocationParams) => IndexLocationWithAlign | null | number;
|
|
13
25
|
|
|
26
|
+
/**
|
|
27
|
+
* @group Common
|
|
28
|
+
*/
|
|
14
29
|
export declare interface CalculateViewLocationParams {
|
|
30
|
+
/** The bottom edge position of the item in pixels */
|
|
15
31
|
itemBottom: number;
|
|
32
|
+
/** The top edge position of the item in pixels */
|
|
16
33
|
itemTop: number;
|
|
34
|
+
/** The scroll location parameters including alignment and behavior options */
|
|
17
35
|
locationParams: {
|
|
18
36
|
align?: 'center' | 'end' | 'start';
|
|
19
37
|
behavior?: 'auto' | 'smooth';
|
|
@@ -22,12 +40,30 @@ export declare interface CalculateViewLocationParams {
|
|
|
22
40
|
} | {
|
|
23
41
|
index: number;
|
|
24
42
|
});
|
|
43
|
+
/** The bottom edge position of the viewport in pixels */
|
|
25
44
|
viewportBottom: number;
|
|
45
|
+
/** The top edge position of the viewport in pixels */
|
|
26
46
|
viewportTop: number;
|
|
27
47
|
}
|
|
28
48
|
|
|
29
49
|
/**
|
|
30
50
|
* Customize the Virtuoso rendering by passing a set of custom components.
|
|
51
|
+
*
|
|
52
|
+
* @typeParam Data - The type of data items in the list
|
|
53
|
+
* @typeParam Context - The type of additional context passed to components
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```tsx
|
|
57
|
+
* const components: Components<User, AppContext> = {
|
|
58
|
+
* Item: ({ children, context }) => <div className="item">{children}</div>,
|
|
59
|
+
* Header: ({ context }) => <div>Header</div>,
|
|
60
|
+
* Footer: ({ context }) => <div>Footer</div>,
|
|
61
|
+
* }
|
|
62
|
+
* <Virtuoso components={components} />
|
|
63
|
+
* ```
|
|
64
|
+
*
|
|
65
|
+
* @see {@link VirtuosoProps.components} for usage in Virtuoso
|
|
66
|
+
* @group Virtuoso
|
|
31
67
|
*/
|
|
32
68
|
export declare interface Components<Data = unknown, Context = unknown> {
|
|
33
69
|
/**
|
|
@@ -72,28 +108,83 @@ export declare interface Components<Data = unknown, Context = unknown> {
|
|
|
72
108
|
TopItemList?: default_2.ComponentType<TopItemListProps & ContextProp<Context>>;
|
|
73
109
|
}
|
|
74
110
|
|
|
75
|
-
|
|
111
|
+
/**
|
|
112
|
+
* Callback type for computing unique keys for list items.
|
|
113
|
+
*
|
|
114
|
+
* @typeParam Data - The type of the data item
|
|
115
|
+
* @typeParam Context - The type of context passed from the component
|
|
116
|
+
*
|
|
117
|
+
* @see {@link VirtuosoProps.computeItemKey} for usage in Virtuoso
|
|
118
|
+
* @group Common
|
|
119
|
+
*/
|
|
120
|
+
export declare type ComputeItemKey<Data, Context> = (index: number, item: Data, context: Context) => default_2.Key;
|
|
76
121
|
|
|
77
|
-
|
|
78
|
-
|
|
122
|
+
/**
|
|
123
|
+
* @group Common
|
|
124
|
+
*/
|
|
125
|
+
export declare interface ContextProp<Context> {
|
|
126
|
+
/** The context value passed from the parent component */
|
|
127
|
+
context: Context;
|
|
79
128
|
}
|
|
80
129
|
|
|
130
|
+
/**
|
|
131
|
+
* Dimensions of an element in pixels.
|
|
132
|
+
*
|
|
133
|
+
* @group VirtuosoGrid
|
|
134
|
+
*/
|
|
81
135
|
export declare interface ElementDimensions {
|
|
136
|
+
/** Height in pixels */
|
|
82
137
|
height: number;
|
|
138
|
+
/** Width in pixels */
|
|
83
139
|
width: number;
|
|
84
140
|
}
|
|
85
141
|
|
|
86
142
|
/**
|
|
87
143
|
* Passed to the Components.FillerRow custom component
|
|
144
|
+
* @group TableVirtuoso
|
|
88
145
|
*/
|
|
89
146
|
export declare interface FillerRowProps {
|
|
147
|
+
/** The height of the filler row in pixels */
|
|
90
148
|
height: number;
|
|
91
149
|
}
|
|
92
150
|
|
|
151
|
+
/**
|
|
152
|
+
* Callback type for rendering fixed footer content in a table.
|
|
153
|
+
* The footer remains visible at the bottom of the viewport.
|
|
154
|
+
*
|
|
155
|
+
* @example
|
|
156
|
+
* ```tsx
|
|
157
|
+
* const fixedFooterContent: FixedFooterContent = () => (
|
|
158
|
+
* <tr><td>Total: 100 items</td></tr>
|
|
159
|
+
* )
|
|
160
|
+
* <TableVirtuoso fixedFooterContent={fixedFooterContent} />
|
|
161
|
+
* ```
|
|
162
|
+
*
|
|
163
|
+
* @see {@link TableVirtuosoProps.fixedFooterContent} for usage
|
|
164
|
+
* @group TableVirtuoso
|
|
165
|
+
*/
|
|
93
166
|
export declare type FixedFooterContent = (() => default_2.ReactNode) | null;
|
|
94
167
|
|
|
168
|
+
/**
|
|
169
|
+
* Callback type for rendering fixed header content in a table.
|
|
170
|
+
* The header remains visible at the top of the viewport.
|
|
171
|
+
*
|
|
172
|
+
* @example
|
|
173
|
+
* ```tsx
|
|
174
|
+
* const fixedHeaderContent: FixedHeaderContent = () => (
|
|
175
|
+
* <tr><th>Name</th><th>Email</th></tr>
|
|
176
|
+
* )
|
|
177
|
+
* <TableVirtuoso fixedHeaderContent={fixedHeaderContent} />
|
|
178
|
+
* ```
|
|
179
|
+
*
|
|
180
|
+
* @see {@link TableVirtuosoProps.fixedHeaderContent} for usage
|
|
181
|
+
* @group TableVirtuoso
|
|
182
|
+
*/
|
|
95
183
|
export declare type FixedHeaderContent = (() => default_2.ReactNode) | null;
|
|
96
184
|
|
|
185
|
+
/**
|
|
186
|
+
* @group Common
|
|
187
|
+
*/
|
|
97
188
|
export declare interface FlatIndexLocationWithAlign extends LocationOptions {
|
|
98
189
|
/**
|
|
99
190
|
* The index of the item to scroll to.
|
|
@@ -101,21 +192,58 @@ export declare interface FlatIndexLocationWithAlign extends LocationOptions {
|
|
|
101
192
|
index: 'LAST' | number;
|
|
102
193
|
}
|
|
103
194
|
|
|
195
|
+
/**
|
|
196
|
+
* @group Common
|
|
197
|
+
*/
|
|
104
198
|
export declare interface FlatScrollIntoViewLocation extends ScrollIntoViewLocationOptions {
|
|
199
|
+
/** The index of the item to scroll into view */
|
|
105
200
|
index: number;
|
|
106
201
|
}
|
|
107
202
|
|
|
203
|
+
/**
|
|
204
|
+
* @group Common
|
|
205
|
+
*/
|
|
108
206
|
export declare type FollowOutput = FollowOutputCallback | FollowOutputScalarType;
|
|
109
207
|
|
|
208
|
+
/**
|
|
209
|
+
* @group Common
|
|
210
|
+
*/
|
|
110
211
|
export declare type FollowOutputCallback = (isAtBottom: boolean) => FollowOutputScalarType;
|
|
111
212
|
|
|
213
|
+
/**
|
|
214
|
+
* @group Common
|
|
215
|
+
*/
|
|
112
216
|
export declare type FollowOutputScalarType = 'auto' | 'smooth' | boolean;
|
|
113
217
|
|
|
218
|
+
/**
|
|
219
|
+
* Gap between grid items in pixels.
|
|
220
|
+
*
|
|
221
|
+
* @group VirtuosoGrid
|
|
222
|
+
*/
|
|
114
223
|
export declare interface Gap {
|
|
224
|
+
/** Horizontal gap between columns */
|
|
115
225
|
column: number;
|
|
226
|
+
/** Vertical gap between rows */
|
|
116
227
|
row: number;
|
|
117
228
|
}
|
|
118
229
|
|
|
230
|
+
/**
|
|
231
|
+
* Customize the VirtuosoGrid rendering by passing a set of custom components.
|
|
232
|
+
*
|
|
233
|
+
* @typeParam Context - The type of additional context passed to components
|
|
234
|
+
*
|
|
235
|
+
* @example
|
|
236
|
+
* ```tsx
|
|
237
|
+
* const components: GridComponents<AppContext> = {
|
|
238
|
+
* Item: ({ children, className }) => <div className={className}>{children}</div>,
|
|
239
|
+
* Header: ({ context }) => <div>Header</div>,
|
|
240
|
+
* }
|
|
241
|
+
* <VirtuosoGrid components={components} />
|
|
242
|
+
* ```
|
|
243
|
+
*
|
|
244
|
+
* @see {@link VirtuosoGridProps.components} for usage in VirtuosoGrid
|
|
245
|
+
* @group VirtuosoGrid
|
|
246
|
+
*/
|
|
119
247
|
export declare interface GridComponents<Context = any> {
|
|
120
248
|
/**
|
|
121
249
|
* Set to render a component at the bottom of the list.
|
|
@@ -147,65 +275,197 @@ export declare interface GridComponents<Context = any> {
|
|
|
147
275
|
ScrollSeekPlaceholder?: default_2.ComponentType<GridScrollSeekPlaceholderProps & ContextProp<Context>>;
|
|
148
276
|
}
|
|
149
277
|
|
|
150
|
-
|
|
278
|
+
/**
|
|
279
|
+
* Callback type for computing unique keys for grid items.
|
|
280
|
+
*
|
|
281
|
+
* @typeParam Data - The type of the data item
|
|
282
|
+
* @typeParam Context - The type of context passed from the component
|
|
283
|
+
*
|
|
284
|
+
* @see {@link VirtuosoGridProps.computeItemKey} for usage
|
|
285
|
+
* @group VirtuosoGrid
|
|
286
|
+
*/
|
|
287
|
+
export declare type GridComputeItemKey<Data, Context> = (index: number, item: Data, context: Context) => default_2.Key;
|
|
151
288
|
|
|
289
|
+
/**
|
|
290
|
+
* @group VirtuosoGrid
|
|
291
|
+
*/
|
|
152
292
|
export declare type GridIndexLocation = FlatIndexLocationWithAlign | number;
|
|
153
293
|
|
|
154
|
-
|
|
155
|
-
|
|
294
|
+
/**
|
|
295
|
+
* @group VirtuosoGrid
|
|
296
|
+
*/
|
|
297
|
+
export declare interface GridItem<Data> {
|
|
298
|
+
/** The data associated with this grid item */
|
|
299
|
+
data?: Data;
|
|
300
|
+
/** The index of the item in the grid */
|
|
156
301
|
index: number;
|
|
157
302
|
}
|
|
158
303
|
|
|
159
|
-
|
|
304
|
+
/**
|
|
305
|
+
* Callback type for rendering item content in a VirtuosoGrid.
|
|
306
|
+
*
|
|
307
|
+
* @typeParam Data - The type of the data item
|
|
308
|
+
* @typeParam Context - The type of context passed from the component
|
|
309
|
+
*
|
|
310
|
+
* @example
|
|
311
|
+
* ```tsx
|
|
312
|
+
* const itemContent: GridItemContent<Product, AppContext> = (index, product, context) => (
|
|
313
|
+
* <div className="grid-item">{product.name}</div>
|
|
314
|
+
* )
|
|
315
|
+
* <VirtuosoGrid itemContent={itemContent} data={products} />
|
|
316
|
+
* ```
|
|
317
|
+
*
|
|
318
|
+
* @see {@link VirtuosoGridProps.itemContent} for usage
|
|
319
|
+
* @group VirtuosoGrid
|
|
320
|
+
*/
|
|
321
|
+
export declare type GridItemContent<Data, Context> = (index: number, data: Data, context: Context) => default_2.ReactNode;
|
|
160
322
|
|
|
161
323
|
/**
|
|
162
|
-
* Passed to the
|
|
324
|
+
* Passed to the GridComponents.Item custom component
|
|
325
|
+
* @group VirtuosoGrid
|
|
163
326
|
*/
|
|
164
327
|
export declare type GridItemProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
|
|
165
328
|
'data-index': number;
|
|
166
329
|
};
|
|
167
330
|
|
|
168
331
|
/**
|
|
169
|
-
* Passed to the
|
|
332
|
+
* Passed to the GridComponents.List custom component
|
|
333
|
+
* @group VirtuosoGrid
|
|
170
334
|
*/
|
|
171
335
|
export declare type GridListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
|
|
172
336
|
'data-testid': string;
|
|
173
337
|
};
|
|
174
338
|
|
|
339
|
+
/**
|
|
340
|
+
* @group VirtuosoGrid
|
|
341
|
+
*/
|
|
175
342
|
export declare type GridRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'data' | 'ref'>;
|
|
176
343
|
|
|
177
344
|
/**
|
|
178
345
|
* Passed to the GridComponents.ScrollSeekPlaceholder custom component
|
|
346
|
+
* @group VirtuosoGrid
|
|
179
347
|
*/
|
|
180
348
|
export declare interface GridScrollSeekPlaceholderProps {
|
|
349
|
+
/** The height of the placeholder in pixels */
|
|
181
350
|
height: number;
|
|
351
|
+
/** The index of the item being replaced by the placeholder */
|
|
182
352
|
index: number;
|
|
353
|
+
/** The width of the placeholder in pixels */
|
|
183
354
|
width: number;
|
|
184
355
|
}
|
|
185
356
|
|
|
357
|
+
/**
|
|
358
|
+
* A snapshot of the VirtuosoGrid state that can be saved and restored.
|
|
359
|
+
* Use this to persist scroll position and layout across page reloads.
|
|
360
|
+
*
|
|
361
|
+
* @see {@link VirtuosoGridProps.restoreStateFrom} for restoring state
|
|
362
|
+
* @see {@link VirtuosoGridProps.stateChanged} for capturing state
|
|
363
|
+
* @group VirtuosoGrid
|
|
364
|
+
*/
|
|
186
365
|
export declare interface GridStateSnapshot {
|
|
366
|
+
/** Gap between items */
|
|
187
367
|
gap: Gap;
|
|
368
|
+
/** Item dimensions */
|
|
188
369
|
item: ElementDimensions;
|
|
370
|
+
/** Scroll position in pixels */
|
|
189
371
|
scrollTop: number;
|
|
372
|
+
/** Viewport dimensions */
|
|
190
373
|
viewport: ElementDimensions;
|
|
191
374
|
}
|
|
192
375
|
|
|
193
|
-
|
|
376
|
+
/**
|
|
377
|
+
* Callback type for rendering group header content in GroupedVirtuoso.
|
|
378
|
+
*
|
|
379
|
+
* @typeParam Context - The type of context passed from the component
|
|
380
|
+
*
|
|
381
|
+
* @example
|
|
382
|
+
* ```tsx
|
|
383
|
+
* const groupContent: GroupContent<AppContext> = (index, context) => (
|
|
384
|
+
* <div className="group-header">Group {index}</div>
|
|
385
|
+
* )
|
|
386
|
+
* <GroupedVirtuoso groupContent={groupContent} />
|
|
387
|
+
* ```
|
|
388
|
+
*
|
|
389
|
+
* @see {@link GroupedVirtuosoProps.groupContent} for usage
|
|
390
|
+
* @group GroupedVirtuoso
|
|
391
|
+
*/
|
|
392
|
+
export declare type GroupContent<Context> = (index: number, context: Context) => default_2.ReactNode;
|
|
194
393
|
|
|
394
|
+
/**
|
|
395
|
+
* @group GroupedVirtuoso
|
|
396
|
+
*/
|
|
195
397
|
export declare interface GroupedScrollIntoViewLocation extends ScrollIntoViewLocationOptions {
|
|
398
|
+
/** The index of the group to scroll into view */
|
|
196
399
|
groupIndex: number;
|
|
197
400
|
}
|
|
198
401
|
|
|
402
|
+
/**
|
|
403
|
+
* A virtualized table component for rendering grouped tabular data with sticky group headers.
|
|
404
|
+
* Combines TableVirtuoso functionality with group support for hierarchical data.
|
|
405
|
+
*
|
|
406
|
+
* @typeParam ItemData - The type of data items in the table
|
|
407
|
+
* @typeParam Context - The type of additional context passed to callbacks
|
|
408
|
+
*
|
|
409
|
+
* @param props - {@link GroupedTableVirtuosoProps}
|
|
410
|
+
*
|
|
411
|
+
* @function
|
|
412
|
+
* @group GroupedTableVirtuoso
|
|
413
|
+
*
|
|
414
|
+
* @example
|
|
415
|
+
* ```tsx
|
|
416
|
+
* <GroupedTableVirtuoso
|
|
417
|
+
* groupCounts={[10, 20, 15]}
|
|
418
|
+
* groupContent={(index) => (
|
|
419
|
+
* <td colSpan={2}>Group {index}</td>
|
|
420
|
+
* )}
|
|
421
|
+
* itemContent={(index, groupIndex) => (
|
|
422
|
+
* <>
|
|
423
|
+
* <td>Item {index}</td>
|
|
424
|
+
* <td>Group {groupIndex}</td>
|
|
425
|
+
* </>
|
|
426
|
+
* )}
|
|
427
|
+
* />
|
|
428
|
+
* ```
|
|
429
|
+
*
|
|
430
|
+
* @see {@link GroupedTableVirtuosoProps} for available props
|
|
431
|
+
* @see {@link GroupedTableVirtuosoHandle} for imperative methods
|
|
432
|
+
*/
|
|
199
433
|
export declare const GroupedTableVirtuoso: <ItemData = any, Context = any>(props: GroupedTableVirtuosoProps<ItemData, Context> & {
|
|
200
434
|
ref?: default_2.Ref<GroupedTableVirtuosoHandle>;
|
|
201
435
|
}) => default_2.ReactElement;
|
|
202
436
|
|
|
437
|
+
/**
|
|
438
|
+
* Exposes the GroupedTableVirtuoso component methods for imperative control.
|
|
439
|
+
* Access via ref on the GroupedTableVirtuoso component.
|
|
440
|
+
*
|
|
441
|
+
* @see {@link GroupedTableVirtuoso} for the component
|
|
442
|
+
* @see {@link GroupedTableVirtuosoProps} for available props
|
|
443
|
+
* @group GroupedTableVirtuoso
|
|
444
|
+
*/
|
|
203
445
|
export declare interface GroupedTableVirtuosoHandle extends BaseTableVirtuosoHandle {
|
|
446
|
+
/**
|
|
447
|
+
* Scrolls the specified item into view if it's not already visible.
|
|
448
|
+
* @param location - The scroll into view location options
|
|
449
|
+
*/
|
|
204
450
|
scrollIntoView(location: ScrollIntoViewLocationOptions): void;
|
|
451
|
+
/**
|
|
452
|
+
* Scrolls the component to the specified item index.
|
|
453
|
+
* @param location - The item index or location with alignment options
|
|
454
|
+
*/
|
|
205
455
|
scrollToIndex(location: IndexLocationWithAlign | number): void;
|
|
206
456
|
}
|
|
207
457
|
|
|
208
|
-
|
|
458
|
+
/**
|
|
459
|
+
* The props for the GroupedTableVirtuoso component.
|
|
460
|
+
*
|
|
461
|
+
* @typeParam Data - The type of data items in the table
|
|
462
|
+
* @typeParam Context - The type of additional context passed to callbacks
|
|
463
|
+
*
|
|
464
|
+
* @see {@link GroupedTableVirtuoso} for the component
|
|
465
|
+
* @see {@link GroupedTableVirtuosoHandle} for imperative methods
|
|
466
|
+
* @group GroupedTableVirtuoso
|
|
467
|
+
*/
|
|
468
|
+
export declare interface GroupedTableVirtuosoProps<Data, Context> extends Omit<TableVirtuosoProps<Data, Context>, 'itemContent' | 'totalCount'> {
|
|
209
469
|
/**
|
|
210
470
|
* Use when implementing inverse infinite scrolling, decrease the value this property
|
|
211
471
|
* in combination with a change in `groupCounts` to prepend groups items to the top of the list.
|
|
@@ -223,7 +483,7 @@ export declare interface GroupedTableVirtuosoProps<D, C> extends Omit<TableVirtu
|
|
|
223
483
|
/**
|
|
224
484
|
* Specifies how each each group header gets rendered. The callback receives the zero-based index of the group.
|
|
225
485
|
*/
|
|
226
|
-
groupContent?: GroupContent<
|
|
486
|
+
groupContent?: GroupContent<Context>;
|
|
227
487
|
/**
|
|
228
488
|
* Specifies the amount of items in each group (and, actually, how many groups are there).
|
|
229
489
|
* For example, passing [20, 30] will display 2 groups with 20 and 30 items each.
|
|
@@ -232,26 +492,88 @@ export declare interface GroupedTableVirtuosoProps<D, C> extends Omit<TableVirtu
|
|
|
232
492
|
/**
|
|
233
493
|
* Specifies how each each item gets rendered.
|
|
234
494
|
*/
|
|
235
|
-
itemContent?: GroupItemContent<
|
|
495
|
+
itemContent?: GroupItemContent<Data, Context>;
|
|
236
496
|
}
|
|
237
497
|
|
|
498
|
+
/**
|
|
499
|
+
* A virtualized list component for rendering grouped data with sticky group headers.
|
|
500
|
+
* Extends Virtuoso with support for collapsible groups and group-level navigation.
|
|
501
|
+
*
|
|
502
|
+
* @typeParam ItemData - The type of data items in the list
|
|
503
|
+
* @typeParam Context - The type of additional context passed to callbacks
|
|
504
|
+
*
|
|
505
|
+
* @param props - {@link GroupedVirtuosoProps}
|
|
506
|
+
*
|
|
507
|
+
* @function
|
|
508
|
+
* @group GroupedVirtuoso
|
|
509
|
+
*
|
|
510
|
+
* @example
|
|
511
|
+
* ```tsx
|
|
512
|
+
* <GroupedVirtuoso
|
|
513
|
+
* groupCounts={[10, 20, 15]}
|
|
514
|
+
* groupContent={(index) => <div>Group {index}</div>}
|
|
515
|
+
* itemContent={(index, groupIndex) => <div>Item {index} in group {groupIndex}</div>}
|
|
516
|
+
* />
|
|
517
|
+
* ```
|
|
518
|
+
*
|
|
519
|
+
* @see {@link GroupedVirtuosoProps} for available props
|
|
520
|
+
* @see {@link GroupedVirtuosoHandle} for imperative methods
|
|
521
|
+
*/
|
|
238
522
|
export declare const GroupedVirtuoso: <ItemData = any, Context = any>(props: GroupedVirtuosoProps<ItemData, Context> & {
|
|
239
523
|
ref?: default_2.Ref<GroupedVirtuosoHandle>;
|
|
240
524
|
}) => default_2.ReactElement;
|
|
241
525
|
|
|
526
|
+
/**
|
|
527
|
+
* Exposes the GroupedVirtuoso component methods for imperative control.
|
|
528
|
+
* Access via ref on the GroupedVirtuoso component.
|
|
529
|
+
*
|
|
530
|
+
* @see {@link GroupedVirtuoso} for the component
|
|
531
|
+
* @see {@link GroupedVirtuosoProps} for available props
|
|
532
|
+
* @group GroupedVirtuoso
|
|
533
|
+
*/
|
|
242
534
|
export declare interface GroupedVirtuosoHandle {
|
|
535
|
+
/**
|
|
536
|
+
* Scrolls to the bottom of the list if follow output is active. Useful when images load in the list.
|
|
537
|
+
*/
|
|
243
538
|
autoscrollToBottom(): void;
|
|
244
539
|
/**
|
|
245
540
|
* Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
|
|
541
|
+
* @param stateCb - Callback that receives the state snapshot
|
|
246
542
|
*/
|
|
247
543
|
getState(stateCb: StateCallback): void;
|
|
544
|
+
/**
|
|
545
|
+
* Scrolls the component by the specified amount.
|
|
546
|
+
* @param location - The scroll offset options
|
|
547
|
+
*/
|
|
248
548
|
scrollBy(location: ScrollToOptions): void;
|
|
549
|
+
/**
|
|
550
|
+
* Scrolls the specified item into view if it's not already visible.
|
|
551
|
+
* @param location - The item index or scroll location options
|
|
552
|
+
*/
|
|
249
553
|
scrollIntoView(location: number | ScrollIntoViewLocation): void;
|
|
554
|
+
/**
|
|
555
|
+
* Scrolls the component to the specified position.
|
|
556
|
+
* @param location - The scroll position options
|
|
557
|
+
*/
|
|
250
558
|
scrollTo(location: ScrollToOptions): void;
|
|
559
|
+
/**
|
|
560
|
+
* Scrolls the component to the specified item index.
|
|
561
|
+
* @param location - The item index or location with alignment options
|
|
562
|
+
*/
|
|
251
563
|
scrollToIndex(location: IndexLocationWithAlign | number): void;
|
|
252
564
|
}
|
|
253
565
|
|
|
254
|
-
|
|
566
|
+
/**
|
|
567
|
+
* The props for the GroupedVirtuoso component.
|
|
568
|
+
*
|
|
569
|
+
* @typeParam Data - The type of data items in the list
|
|
570
|
+
* @typeParam Context - The type of additional context passed to callbacks
|
|
571
|
+
*
|
|
572
|
+
* @see {@link GroupedVirtuoso} for the component
|
|
573
|
+
* @see {@link GroupedVirtuosoHandle} for imperative methods
|
|
574
|
+
* @group GroupedVirtuoso
|
|
575
|
+
*/
|
|
576
|
+
export declare interface GroupedVirtuosoProps<Data, Context> extends Omit<VirtuosoProps<Data, Context>, 'itemContent' | 'totalCount'> {
|
|
255
577
|
/**
|
|
256
578
|
* Use when implementing inverse infinite scrolling, decrease the value this property
|
|
257
579
|
* in combination with a change in `groupCounts` to prepend groups items to the top of the list.
|
|
@@ -269,7 +591,7 @@ export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D
|
|
|
269
591
|
/**
|
|
270
592
|
* Specifies how each each group header gets rendered. The callback receives the zero-based index of the group.
|
|
271
593
|
*/
|
|
272
|
-
groupContent?: GroupContent<
|
|
594
|
+
groupContent?: GroupContent<Context>;
|
|
273
595
|
/**
|
|
274
596
|
* Specifies the amount of items in each group (and, actually, how many groups are there).
|
|
275
597
|
* For example, passing [20, 30] will display 2 groups with 20 and 30 items each.
|
|
@@ -278,9 +600,12 @@ export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D
|
|
|
278
600
|
/**
|
|
279
601
|
* Specifies how each each item gets rendered.
|
|
280
602
|
*/
|
|
281
|
-
itemContent?: GroupItemContent<
|
|
603
|
+
itemContent?: GroupItemContent<Data, Context>;
|
|
282
604
|
}
|
|
283
605
|
|
|
606
|
+
/**
|
|
607
|
+
* @group GroupedVirtuoso
|
|
608
|
+
*/
|
|
284
609
|
export declare interface GroupIndexLocationWithAlign extends LocationOptions {
|
|
285
610
|
/**
|
|
286
611
|
* The group index of the item to scroll to.
|
|
@@ -288,54 +613,143 @@ export declare interface GroupIndexLocationWithAlign extends LocationOptions {
|
|
|
288
613
|
groupIndex: number;
|
|
289
614
|
}
|
|
290
615
|
|
|
291
|
-
|
|
616
|
+
/**
|
|
617
|
+
* @group GroupedVirtuoso
|
|
618
|
+
*/
|
|
619
|
+
export declare interface GroupItem<Data> extends Item<Data> {
|
|
620
|
+
/** The original index before any transformations were applied */
|
|
292
621
|
originalIndex?: number;
|
|
622
|
+
/** Identifies this as a group header item */
|
|
293
623
|
type: 'group';
|
|
294
624
|
}
|
|
295
625
|
|
|
296
|
-
|
|
626
|
+
/**
|
|
627
|
+
* Callback type for rendering item content in a GroupedVirtuoso list.
|
|
628
|
+
* Similar to ItemContent but includes the group index.
|
|
629
|
+
*
|
|
630
|
+
* @typeParam Data - The type of the data item
|
|
631
|
+
* @typeParam Context - The type of context passed from the component
|
|
632
|
+
*
|
|
633
|
+
* @example
|
|
634
|
+
* ```tsx
|
|
635
|
+
* const itemContent: GroupItemContent<User, AppContext> = (index, groupIndex, user, context) => (
|
|
636
|
+
* <div>{user.name} (Group {groupIndex})</div>
|
|
637
|
+
* )
|
|
638
|
+
* <GroupedVirtuoso itemContent={itemContent} />
|
|
639
|
+
* ```
|
|
640
|
+
*
|
|
641
|
+
* @see {@link GroupedVirtuosoProps.itemContent} for usage
|
|
642
|
+
* @see {@link ItemContent} for non-grouped list variant
|
|
643
|
+
* @group GroupedVirtuoso
|
|
644
|
+
*/
|
|
645
|
+
export declare type GroupItemContent<Data, Context> = (index: number, groupIndex: number, data: Data, context: Context) => default_2.ReactNode;
|
|
297
646
|
|
|
647
|
+
/**
|
|
648
|
+
* Passed to the Components.Group custom component
|
|
649
|
+
* @group GroupedVirtuoso
|
|
650
|
+
*/
|
|
298
651
|
export declare type GroupProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & {
|
|
652
|
+
/** The index of the group */
|
|
299
653
|
'data-index': number;
|
|
654
|
+
/** The item index within the flattened list */
|
|
300
655
|
'data-item-index': number;
|
|
656
|
+
/** The measured size of the group header in pixels */
|
|
301
657
|
'data-known-size': number;
|
|
302
658
|
};
|
|
303
659
|
|
|
660
|
+
/**
|
|
661
|
+
* @group Common
|
|
662
|
+
*/
|
|
304
663
|
export declare type IndexLocationWithAlign = FlatIndexLocationWithAlign | GroupIndexLocationWithAlign;
|
|
305
664
|
|
|
306
|
-
|
|
307
|
-
|
|
665
|
+
/**
|
|
666
|
+
* Base interface for list items with position and size information.
|
|
667
|
+
* @group Common
|
|
668
|
+
*/
|
|
669
|
+
export declare interface Item<Data> {
|
|
670
|
+
/** The data associated with this item */
|
|
671
|
+
data?: Data;
|
|
672
|
+
/** The index of the item in the list */
|
|
308
673
|
index: number;
|
|
674
|
+
/** The offset position of the item from the start of the list in pixels */
|
|
309
675
|
offset: number;
|
|
676
|
+
/** The measured size of the item in pixels */
|
|
310
677
|
size: number;
|
|
311
678
|
}
|
|
312
679
|
|
|
313
|
-
|
|
680
|
+
/**
|
|
681
|
+
* Callback type for rendering item content in a Virtuoso list.
|
|
682
|
+
*
|
|
683
|
+
* @typeParam Data - The type of the data item
|
|
684
|
+
* @typeParam Context - The type of context passed from the component
|
|
685
|
+
*
|
|
686
|
+
* @example
|
|
687
|
+
* ```tsx
|
|
688
|
+
* const itemContent: ItemContent<User, AppContext> = (index, user, context) => (
|
|
689
|
+
* <div>{user.name}</div>
|
|
690
|
+
* )
|
|
691
|
+
* <Virtuoso itemContent={itemContent} data={users} />
|
|
692
|
+
* ```
|
|
693
|
+
*
|
|
694
|
+
* @see {@link VirtuosoProps.itemContent} for usage in Virtuoso
|
|
695
|
+
* @see {@link GroupItemContent} for grouped list variant
|
|
696
|
+
* @group Virtuoso
|
|
697
|
+
*/
|
|
698
|
+
export declare type ItemContent<Data, Context> = (index: number, data: Data, context: Context) => default_2.ReactNode;
|
|
314
699
|
|
|
315
|
-
|
|
700
|
+
/**
|
|
701
|
+
* Passed to the Components.Item custom component
|
|
702
|
+
* @group Virtuoso
|
|
703
|
+
*/
|
|
704
|
+
export declare type ItemProps<Data> = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & {
|
|
316
705
|
'data-index': number;
|
|
317
706
|
'data-item-group-index'?: number;
|
|
318
707
|
'data-item-index': number;
|
|
319
708
|
'data-known-size': number;
|
|
320
|
-
item:
|
|
709
|
+
item: Data;
|
|
321
710
|
};
|
|
322
711
|
|
|
323
|
-
|
|
712
|
+
/**
|
|
713
|
+
* Union type representing either a regular item or a group header item in the list.
|
|
714
|
+
*
|
|
715
|
+
* @typeParam Data - The type of the data item
|
|
716
|
+
*
|
|
717
|
+
* @see {@link RecordItem} for regular items
|
|
718
|
+
* @see {@link GroupItem} for group header items
|
|
719
|
+
* @group Common
|
|
720
|
+
*/
|
|
721
|
+
export declare type ListItem<Data> = GroupItem<Data> | RecordItem<Data>;
|
|
324
722
|
|
|
325
723
|
/**
|
|
326
724
|
* Passed to the Components.List custom component
|
|
725
|
+
* @group Virtuoso
|
|
327
726
|
*/
|
|
328
727
|
export declare type ListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
|
|
329
728
|
'data-testid': string;
|
|
330
729
|
};
|
|
331
730
|
|
|
731
|
+
/**
|
|
732
|
+
* Represents a range of items in the list by their indices.
|
|
733
|
+
* Used to track which items are currently visible in the viewport.
|
|
734
|
+
*
|
|
735
|
+
* @see {@link VirtuosoProps.rangeChanged} for visibility change events
|
|
736
|
+
* @group Common
|
|
737
|
+
*/
|
|
332
738
|
export declare interface ListRange {
|
|
739
|
+
/** The index of the last visible item */
|
|
333
740
|
endIndex: number;
|
|
741
|
+
/** The index of the first visible item */
|
|
334
742
|
startIndex: number;
|
|
335
743
|
}
|
|
336
744
|
|
|
745
|
+
/**
|
|
746
|
+
* @group Virtuoso
|
|
747
|
+
*/
|
|
337
748
|
export declare type ListRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'data' | 'ref'>;
|
|
338
749
|
|
|
750
|
+
/**
|
|
751
|
+
* @group Common
|
|
752
|
+
*/
|
|
339
753
|
export declare interface LocationOptions {
|
|
340
754
|
/**
|
|
341
755
|
* How to position the item in the viewport.
|
|
@@ -351,38 +765,84 @@ export declare interface LocationOptions {
|
|
|
351
765
|
offset?: number;
|
|
352
766
|
}
|
|
353
767
|
|
|
768
|
+
/**
|
|
769
|
+
* Log levels for controlling virtuoso diagnostic output.
|
|
770
|
+
* Use with the `logLevel` prop to enable debugging information.
|
|
771
|
+
*
|
|
772
|
+
* @example
|
|
773
|
+
* ```tsx
|
|
774
|
+
* import { Virtuoso, LogLevel } from 'react-virtuoso'
|
|
775
|
+
*
|
|
776
|
+
* <Virtuoso
|
|
777
|
+
* totalCount={1000}
|
|
778
|
+
* logLevel={LogLevel.DEBUG}
|
|
779
|
+
* itemContent={(index) => <div>Item {index}</div>}
|
|
780
|
+
* />
|
|
781
|
+
* ```
|
|
782
|
+
*
|
|
783
|
+
* @group Common
|
|
784
|
+
*/
|
|
354
785
|
export declare enum LogLevel {
|
|
786
|
+
/** Detailed debugging information including item measurements */
|
|
355
787
|
DEBUG = 0,
|
|
788
|
+
/** General informational messages */
|
|
356
789
|
INFO = 1,
|
|
790
|
+
/** Warning messages for potential issues */
|
|
357
791
|
WARN = 2,
|
|
792
|
+
/** Error messages for failures (default level) */
|
|
358
793
|
ERROR = 3
|
|
359
794
|
}
|
|
360
795
|
|
|
361
|
-
|
|
362
|
-
|
|
796
|
+
/**
|
|
797
|
+
* Represents a regular data item (not a group header) in the list.
|
|
798
|
+
* @group Common
|
|
799
|
+
*/
|
|
800
|
+
export declare interface RecordItem<Data> extends Item<Data> {
|
|
801
|
+
/** The data associated with this item */
|
|
802
|
+
data?: Data;
|
|
803
|
+
/** The index of the group this item belongs to (if in a grouped list) */
|
|
363
804
|
groupIndex?: number;
|
|
805
|
+
/** The original index before any transformations were applied */
|
|
364
806
|
originalIndex?: number;
|
|
807
|
+
/** Undefined for regular items (used to distinguish from group items) */
|
|
365
808
|
type?: undefined;
|
|
366
809
|
}
|
|
367
810
|
|
|
811
|
+
/**
|
|
812
|
+
* Represents the current scroll state of the container.
|
|
813
|
+
* @group Common
|
|
814
|
+
*/
|
|
368
815
|
export declare interface ScrollContainerState {
|
|
816
|
+
/** The total scrollable height of the content in pixels */
|
|
369
817
|
scrollHeight: number;
|
|
818
|
+
/** The current scroll position from the top in pixels */
|
|
370
819
|
scrollTop: number;
|
|
820
|
+
/** The visible height of the viewport in pixels */
|
|
371
821
|
viewportHeight: number;
|
|
372
822
|
}
|
|
373
823
|
|
|
374
824
|
/**
|
|
375
825
|
* Passed to the Components.Scroller custom component
|
|
826
|
+
* @group Common
|
|
376
827
|
*/
|
|
377
828
|
export declare type ScrollerProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style' | 'tabIndex'> & default_2.RefAttributes<HTMLDivElement> & {
|
|
378
829
|
'data-testid'?: string;
|
|
379
830
|
'data-virtuoso-scroller'?: boolean;
|
|
380
831
|
};
|
|
381
832
|
|
|
833
|
+
/**
|
|
834
|
+
* @group Common
|
|
835
|
+
*/
|
|
382
836
|
export declare type ScrollIntoViewLocation = FlatScrollIntoViewLocation | GroupedScrollIntoViewLocation;
|
|
383
837
|
|
|
838
|
+
/**
|
|
839
|
+
* Options for scrolling an item into view.
|
|
840
|
+
* @group Common
|
|
841
|
+
*/
|
|
384
842
|
export declare interface ScrollIntoViewLocationOptions {
|
|
843
|
+
/** How to align the item within the viewport */
|
|
385
844
|
align?: 'center' | 'end' | 'start';
|
|
845
|
+
/** The scroll behavior - 'smooth' for animated scrolling, 'auto' for instant */
|
|
386
846
|
behavior?: 'auto' | 'smooth';
|
|
387
847
|
/**
|
|
388
848
|
* Use this function to fine-tune the scrollIntoView behavior.
|
|
@@ -414,9 +874,27 @@ export declare interface ScrollIntoViewLocationOptions {
|
|
|
414
874
|
done?: () => void;
|
|
415
875
|
}
|
|
416
876
|
|
|
877
|
+
/**
|
|
878
|
+
* Configuration for scroll seek mode, which renders placeholders during fast scrolling.
|
|
879
|
+
* This improves performance when users scroll rapidly through large lists.
|
|
880
|
+
*
|
|
881
|
+
* @example
|
|
882
|
+
* ```tsx
|
|
883
|
+
* const scrollSeekConfiguration: ScrollSeekConfiguration = {
|
|
884
|
+
* enter: (velocity) => Math.abs(velocity) > 200,
|
|
885
|
+
* exit: (velocity) => Math.abs(velocity) < 30,
|
|
886
|
+
* change: (velocity, range) => console.log('Scrolling', range),
|
|
887
|
+
* }
|
|
888
|
+
* <Virtuoso scrollSeekConfiguration={scrollSeekConfiguration} />
|
|
889
|
+
* ```
|
|
890
|
+
*
|
|
891
|
+
* @see {@link VirtuosoProps.scrollSeekConfiguration} for usage
|
|
892
|
+
* @see {@link Components.ScrollSeekPlaceholder} for custom placeholder rendering
|
|
893
|
+
* @group Common
|
|
894
|
+
*/
|
|
417
895
|
export declare interface ScrollSeekConfiguration {
|
|
418
896
|
/**
|
|
419
|
-
*
|
|
897
|
+
* Called during scrolling in scroll seek mode - use to display a hint where the list is.
|
|
420
898
|
*/
|
|
421
899
|
change?: (velocity: number, range: ListRange) => void;
|
|
422
900
|
/**
|
|
@@ -431,34 +909,73 @@ export declare interface ScrollSeekConfiguration {
|
|
|
431
909
|
|
|
432
910
|
/**
|
|
433
911
|
* Passed to the Components.ScrollSeekPlaceholder custom component
|
|
912
|
+
* @group Virtuoso
|
|
434
913
|
*/
|
|
435
914
|
export declare interface ScrollSeekPlaceholderProps {
|
|
915
|
+
/** The group index if this placeholder represents a group header */
|
|
436
916
|
groupIndex?: number;
|
|
917
|
+
/** The height of the placeholder in pixels */
|
|
437
918
|
height: number;
|
|
919
|
+
/** The index of the item being replaced by the placeholder */
|
|
438
920
|
index: number;
|
|
921
|
+
/** Whether this placeholder represents a group header or a regular item */
|
|
439
922
|
type: 'group' | 'item';
|
|
440
923
|
}
|
|
441
924
|
|
|
925
|
+
/**
|
|
926
|
+
* @group Common
|
|
927
|
+
*/
|
|
442
928
|
export declare type ScrollSeekToggle = (velocity: number, range: ListRange) => boolean;
|
|
443
929
|
|
|
444
|
-
/**
|
|
930
|
+
/**
|
|
931
|
+
* Custom function for calculating item sizes.
|
|
932
|
+
* Override to account for margins, padding, or other layout considerations.
|
|
933
|
+
*
|
|
934
|
+
* @see {@link VirtuosoProps.itemSize} for usage
|
|
935
|
+
* @group Common
|
|
936
|
+
*/
|
|
445
937
|
export declare type SizeFunction = (el: HTMLElement, field: 'offsetHeight' | 'offsetWidth') => number;
|
|
446
938
|
|
|
939
|
+
/**
|
|
940
|
+
* Represents a range of items that share the same size.
|
|
941
|
+
* @group Common
|
|
942
|
+
*/
|
|
447
943
|
export declare interface SizeRange {
|
|
944
|
+
/** The ending index of items in this size range (inclusive) */
|
|
448
945
|
endIndex: number;
|
|
946
|
+
/** The size in pixels shared by items in this range */
|
|
449
947
|
size: number;
|
|
948
|
+
/** The starting index of items in this size range */
|
|
450
949
|
startIndex: number;
|
|
451
950
|
}
|
|
452
951
|
|
|
952
|
+
/**
|
|
953
|
+
* Callback type for receiving state snapshots for persistence.
|
|
954
|
+
*
|
|
955
|
+
* @see {@link VirtuosoProps.getState} for usage
|
|
956
|
+
* @see {@link StateSnapshot} for the snapshot structure
|
|
957
|
+
* @group Common
|
|
958
|
+
*/
|
|
453
959
|
export declare type StateCallback = (state: StateSnapshot) => void;
|
|
454
960
|
|
|
961
|
+
/**
|
|
962
|
+
* A snapshot of the virtuoso state that can be saved and restored.
|
|
963
|
+
* Use this to persist scroll position and item sizes across page reloads.
|
|
964
|
+
*
|
|
965
|
+
* @see {@link VirtuosoProps.restoreStateFrom} for restoring state
|
|
966
|
+
* @see {@link VirtuosoHandle.getState} for capturing state
|
|
967
|
+
* @group Common
|
|
968
|
+
*/
|
|
455
969
|
export declare interface StateSnapshot {
|
|
970
|
+
/** The measured size ranges of items */
|
|
456
971
|
ranges: SizeRange[];
|
|
972
|
+
/** The scroll position in pixels */
|
|
457
973
|
scrollTop: number;
|
|
458
974
|
}
|
|
459
975
|
|
|
460
976
|
/**
|
|
461
|
-
* Passed to the
|
|
977
|
+
* Passed to the TableComponents.TableBody custom component
|
|
978
|
+
* @group TableVirtuoso
|
|
462
979
|
*/
|
|
463
980
|
export declare type TableBodyProps = Pick<default_2.ComponentProps<'tbody'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLTableSectionElement> & {
|
|
464
981
|
'data-testid': string;
|
|
@@ -466,6 +983,21 @@ export declare type TableBodyProps = Pick<default_2.ComponentProps<'tbody'>, 'ch
|
|
|
466
983
|
|
|
467
984
|
/**
|
|
468
985
|
* Customize the TableVirtuoso rendering by passing a set of custom components.
|
|
986
|
+
*
|
|
987
|
+
* @typeParam Data - The type of data items in the table
|
|
988
|
+
* @typeParam Context - The type of additional context passed to components
|
|
989
|
+
*
|
|
990
|
+
* @example
|
|
991
|
+
* ```tsx
|
|
992
|
+
* const components: TableComponents<User, AppContext> = {
|
|
993
|
+
* Table: ({ children, style }) => <table style={style}>{children}</table>,
|
|
994
|
+
* TableRow: ({ children, item }) => <tr>{children}</tr>,
|
|
995
|
+
* }
|
|
996
|
+
* <TableVirtuoso components={components} />
|
|
997
|
+
* ```
|
|
998
|
+
*
|
|
999
|
+
* @see {@link TableVirtuosoProps.components} for usage in TableVirtuoso
|
|
1000
|
+
* @group TableVirtuoso
|
|
469
1001
|
*/
|
|
470
1002
|
export declare interface TableComponents<Data = unknown, Context = unknown> {
|
|
471
1003
|
/**
|
|
@@ -513,20 +1045,88 @@ export declare interface TableComponents<Data = unknown, Context = unknown> {
|
|
|
513
1045
|
TableRow?: default_2.ComponentType<ItemProps<Data> & ContextProp<Context>>;
|
|
514
1046
|
}
|
|
515
1047
|
|
|
1048
|
+
/**
|
|
1049
|
+
* @group TableVirtuoso
|
|
1050
|
+
*/
|
|
516
1051
|
export declare type TableProps = Pick<default_2.ComponentProps<'table'>, 'children' | 'style'>;
|
|
517
1052
|
|
|
1053
|
+
/**
|
|
1054
|
+
* @group TableVirtuoso
|
|
1055
|
+
*/
|
|
518
1056
|
export declare type TableRootProps = Omit<default_2.HTMLProps<HTMLTableElement>, 'data' | 'ref'>;
|
|
519
1057
|
|
|
1058
|
+
/**
|
|
1059
|
+
* A virtualized table component for efficiently rendering large tabular datasets.
|
|
1060
|
+
* Renders semantic HTML table markup with support for fixed headers and footers.
|
|
1061
|
+
*
|
|
1062
|
+
* @typeParam ItemData - The type of data items in the table
|
|
1063
|
+
* @typeParam Context - The type of additional context passed to callbacks
|
|
1064
|
+
*
|
|
1065
|
+
* @param props - {@link TableVirtuosoProps}
|
|
1066
|
+
*
|
|
1067
|
+
* @function
|
|
1068
|
+
* @group TableVirtuoso
|
|
1069
|
+
*
|
|
1070
|
+
* @example
|
|
1071
|
+
* ```tsx
|
|
1072
|
+
* <TableVirtuoso
|
|
1073
|
+
* totalCount={1000}
|
|
1074
|
+
* fixedHeaderContent={() => (
|
|
1075
|
+
* <tr>
|
|
1076
|
+
* <th>Name</th>
|
|
1077
|
+
* <th>Description</th>
|
|
1078
|
+
* </tr>
|
|
1079
|
+
* )}
|
|
1080
|
+
* itemContent={(index) => (
|
|
1081
|
+
* <>
|
|
1082
|
+
* <td>Item {index}</td>
|
|
1083
|
+
* <td>Description {index}</td>
|
|
1084
|
+
* </>
|
|
1085
|
+
* )}
|
|
1086
|
+
* />
|
|
1087
|
+
* ```
|
|
1088
|
+
*
|
|
1089
|
+
* @see {@link TableVirtuosoProps} for available props
|
|
1090
|
+
* @see {@link TableVirtuosoHandle} for imperative methods
|
|
1091
|
+
* @see {@link TableComponents} for customizing table elements
|
|
1092
|
+
*/
|
|
520
1093
|
export declare const TableVirtuoso: <ItemData = any, Context = any>(props: TableVirtuosoProps<ItemData, Context> & {
|
|
521
1094
|
ref?: default_2.Ref<TableVirtuosoHandle>;
|
|
522
1095
|
}) => default_2.ReactElement;
|
|
523
1096
|
|
|
1097
|
+
/**
|
|
1098
|
+
* Exposes the TableVirtuoso component methods for imperative control.
|
|
1099
|
+
* Access via ref on the TableVirtuoso component.
|
|
1100
|
+
*
|
|
1101
|
+
* @see {@link TableVirtuoso} for the component
|
|
1102
|
+
* @see {@link TableVirtuosoProps} for available props
|
|
1103
|
+
* @group TableVirtuoso
|
|
1104
|
+
*/
|
|
524
1105
|
export declare interface TableVirtuosoHandle extends BaseTableVirtuosoHandle {
|
|
1106
|
+
/**
|
|
1107
|
+
* Scrolls the specified item into view if it's not already visible.
|
|
1108
|
+
* @param location - The item index or scroll into view location options
|
|
1109
|
+
*/
|
|
525
1110
|
scrollIntoView(location: FlatScrollIntoViewLocation | number): void;
|
|
1111
|
+
/**
|
|
1112
|
+
* Scrolls the component to the specified item index.
|
|
1113
|
+
* @param location - The item index or location with alignment options
|
|
1114
|
+
*/
|
|
526
1115
|
scrollToIndex(location: FlatIndexLocationWithAlign | number): void;
|
|
527
1116
|
}
|
|
528
1117
|
|
|
529
|
-
|
|
1118
|
+
/**
|
|
1119
|
+
* The props for the TableVirtuoso component.
|
|
1120
|
+
*
|
|
1121
|
+
* @typeParam Data - The type of data items in the table
|
|
1122
|
+
* @typeParam Context - The type of additional context passed to callbacks
|
|
1123
|
+
*
|
|
1124
|
+
* @see {@link TableVirtuoso} for the component
|
|
1125
|
+
* @see {@link TableVirtuosoHandle} for imperative methods
|
|
1126
|
+
* @see {@link TableComponents} for customizing table elements
|
|
1127
|
+
* @group TableVirtuoso
|
|
1128
|
+
*/
|
|
1129
|
+
export declare interface TableVirtuosoProps<Data, Context> extends Omit<VirtuosoProps<Data, Context>, 'components' | 'headerFooterTag'> {
|
|
530
1130
|
/**
|
|
531
1131
|
* Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
|
|
532
1132
|
* Use `followOutput` property to keep the list aligned when new items are appended.
|
|
@@ -552,11 +1152,11 @@ export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D,
|
|
|
552
1152
|
/**
|
|
553
1153
|
* Use the `components` property for advanced customization of the elements rendered by the table.
|
|
554
1154
|
*/
|
|
555
|
-
components?: TableComponents<
|
|
1155
|
+
components?: TableComponents<Data, Context>;
|
|
556
1156
|
/**
|
|
557
1157
|
* If specified, the component will use the function to generate the `key` property for each list item.
|
|
558
1158
|
*/
|
|
559
|
-
computeItemKey?: ComputeItemKey<
|
|
1159
|
+
computeItemKey?: ComputeItemKey<Data, Context>;
|
|
560
1160
|
/**
|
|
561
1161
|
* Pass a reference to a scrollable parent element, so that the table won't wrap in its own.
|
|
562
1162
|
*/
|
|
@@ -564,7 +1164,7 @@ export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D,
|
|
|
564
1164
|
/**
|
|
565
1165
|
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
|
|
566
1166
|
*/
|
|
567
|
-
data?: readonly
|
|
1167
|
+
data?: readonly Data[];
|
|
568
1168
|
/**
|
|
569
1169
|
* By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
|
|
570
1170
|
*
|
|
@@ -661,7 +1261,7 @@ export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D,
|
|
|
661
1261
|
/**
|
|
662
1262
|
* Set the callback to specify the contents of the item.
|
|
663
1263
|
*/
|
|
664
|
-
itemContent?: ItemContent<
|
|
1264
|
+
itemContent?: ItemContent<Data, Context>;
|
|
665
1265
|
/**
|
|
666
1266
|
* Allows customizing the height/width calculation of `Item` elements.
|
|
667
1267
|
*
|
|
@@ -671,7 +1271,7 @@ export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D,
|
|
|
671
1271
|
/**
|
|
672
1272
|
* Called with the new set of items each time the list items are rendered due to scrolling.
|
|
673
1273
|
*/
|
|
674
|
-
itemsRendered?: (items: ListItem<
|
|
1274
|
+
itemsRendered?: (items: ListItem<Data>[]) => void;
|
|
675
1275
|
/**
|
|
676
1276
|
* Set the overscan property to make the component "chunk" the rendering of new items on scroll.
|
|
677
1277
|
* The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
|
|
@@ -724,32 +1324,140 @@ export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D,
|
|
|
724
1324
|
useWindowScroll?: boolean;
|
|
725
1325
|
}
|
|
726
1326
|
|
|
1327
|
+
/**
|
|
1328
|
+
* @group Virtuoso
|
|
1329
|
+
*/
|
|
727
1330
|
export declare type TopItemListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'>;
|
|
728
1331
|
|
|
1332
|
+
/**
|
|
1333
|
+
* A virtualized list component for efficiently rendering large datasets.
|
|
1334
|
+
* Automatically measures and handles variable-sized items without configuration.
|
|
1335
|
+
*
|
|
1336
|
+
* @typeParam ItemData - The type of data items in the list
|
|
1337
|
+
* @typeParam Context - The type of additional context passed to callbacks
|
|
1338
|
+
*
|
|
1339
|
+
* @param props - {@link VirtuosoProps}
|
|
1340
|
+
*
|
|
1341
|
+
* @function
|
|
1342
|
+
* @group Virtuoso
|
|
1343
|
+
*
|
|
1344
|
+
* @example
|
|
1345
|
+
* ```tsx
|
|
1346
|
+
* <Virtuoso
|
|
1347
|
+
* totalCount={1000}
|
|
1348
|
+
* itemContent={(index) => <div>Item {index}</div>}
|
|
1349
|
+
* />
|
|
1350
|
+
* ```
|
|
1351
|
+
*
|
|
1352
|
+
* @see {@link VirtuosoProps} for available props
|
|
1353
|
+
* @see {@link VirtuosoHandle} for imperative methods
|
|
1354
|
+
*/
|
|
729
1355
|
export declare const Virtuoso: <ItemData = any, Context = any>(props: VirtuosoProps<ItemData, Context> & {
|
|
730
1356
|
ref?: default_2.Ref<VirtuosoHandle>;
|
|
731
1357
|
}) => default_2.ReactElement;
|
|
732
1358
|
|
|
1359
|
+
/**
|
|
1360
|
+
* A virtualized grid component for efficiently rendering large datasets in a grid/masonry layout.
|
|
1361
|
+
* Automatically calculates visible items based on container and item dimensions.
|
|
1362
|
+
*
|
|
1363
|
+
* @typeParam ItemData - The type of data items in the grid
|
|
1364
|
+
* @typeParam Context - The type of additional context passed to callbacks
|
|
1365
|
+
*
|
|
1366
|
+
* @param props - {@link VirtuosoGridProps}
|
|
1367
|
+
*
|
|
1368
|
+
* @function
|
|
1369
|
+
* @group VirtuosoGrid
|
|
1370
|
+
*
|
|
1371
|
+
* @example
|
|
1372
|
+
* ```tsx
|
|
1373
|
+
* <VirtuosoGrid
|
|
1374
|
+
* totalCount={1000}
|
|
1375
|
+
* itemContent={(index) => <div className="grid-item">Item {index}</div>}
|
|
1376
|
+
* listClassName="grid-container"
|
|
1377
|
+
* />
|
|
1378
|
+
* ```
|
|
1379
|
+
*
|
|
1380
|
+
* @see {@link VirtuosoGridProps} for available props
|
|
1381
|
+
* @see {@link VirtuosoGridHandle} for imperative methods
|
|
1382
|
+
* @see {@link GridComponents} for customizing grid elements
|
|
1383
|
+
*/
|
|
733
1384
|
export declare const VirtuosoGrid: <ItemData = any, Context = any>(props: VirtuosoGridProps<ItemData, Context> & {
|
|
734
1385
|
ref?: default_2.Ref<VirtuosoGridHandle>;
|
|
735
1386
|
}) => default_2.ReactElement;
|
|
736
1387
|
|
|
1388
|
+
/**
|
|
1389
|
+
* Exposes the VirtuosoGrid component methods for imperative control.
|
|
1390
|
+
* Access via ref on the VirtuosoGrid component.
|
|
1391
|
+
*
|
|
1392
|
+
* @see {@link VirtuosoGrid} for the component
|
|
1393
|
+
* @see {@link VirtuosoGridProps} for available props
|
|
1394
|
+
* @group VirtuosoGrid
|
|
1395
|
+
*/
|
|
737
1396
|
export declare interface VirtuosoGridHandle {
|
|
1397
|
+
/**
|
|
1398
|
+
* Scrolls the component by the specified amount.
|
|
1399
|
+
* @param location - The scroll offset options
|
|
1400
|
+
*/
|
|
738
1401
|
scrollBy(location: ScrollToOptions): void;
|
|
1402
|
+
/**
|
|
1403
|
+
* Scrolls the component to the specified position.
|
|
1404
|
+
* @param location - The scroll position options
|
|
1405
|
+
*/
|
|
739
1406
|
scrollTo(location: ScrollToOptions): void;
|
|
1407
|
+
/**
|
|
1408
|
+
* Scrolls the component to the specified item index.
|
|
1409
|
+
* @param location - The item index or location with alignment options
|
|
1410
|
+
*/
|
|
740
1411
|
scrollToIndex(location: GridIndexLocation): void;
|
|
741
1412
|
}
|
|
742
1413
|
|
|
1414
|
+
/**
|
|
1415
|
+
* React context for mocking VirtuosoGrid component measurements in tests.
|
|
1416
|
+
* Wrap your VirtuosoGrid component with this provider to bypass DOM measurements.
|
|
1417
|
+
*
|
|
1418
|
+
* @example
|
|
1419
|
+
* ```tsx
|
|
1420
|
+
* import { VirtuosoGridMockContext } from 'react-virtuoso'
|
|
1421
|
+
*
|
|
1422
|
+
* <VirtuosoGridMockContext.Provider
|
|
1423
|
+
* value={{ viewportHeight: 300, viewportWidth: 400, itemHeight: 100, itemWidth: 100 }}
|
|
1424
|
+
* >
|
|
1425
|
+
* <VirtuosoGrid totalCount={100} />
|
|
1426
|
+
* </VirtuosoGridMockContext.Provider>
|
|
1427
|
+
* ```
|
|
1428
|
+
*
|
|
1429
|
+
* @group VirtuosoGrid
|
|
1430
|
+
*/
|
|
743
1431
|
export declare const VirtuosoGridMockContext: default_2.Context<VirtuosoGridMockContextValue | undefined>;
|
|
744
1432
|
|
|
1433
|
+
/**
|
|
1434
|
+
* Mock context value for testing VirtuosoGrid components.
|
|
1435
|
+
* Provides fixed dimensions to bypass DOM measurements.
|
|
1436
|
+
*
|
|
1437
|
+
* @group VirtuosoGrid
|
|
1438
|
+
*/
|
|
745
1439
|
export declare interface VirtuosoGridMockContextValue {
|
|
1440
|
+
/** Fixed height for each grid item in pixels */
|
|
746
1441
|
itemHeight: number;
|
|
1442
|
+
/** Fixed width for each grid item in pixels */
|
|
747
1443
|
itemWidth: number;
|
|
1444
|
+
/** Fixed viewport height in pixels */
|
|
748
1445
|
viewportHeight: number;
|
|
1446
|
+
/** Fixed viewport width in pixels */
|
|
749
1447
|
viewportWidth: number;
|
|
750
1448
|
}
|
|
751
1449
|
|
|
752
|
-
|
|
1450
|
+
/**
|
|
1451
|
+
* The props for the VirtuosoGrid component.
|
|
1452
|
+
*
|
|
1453
|
+
* @typeParam Data - The type of data items in the grid
|
|
1454
|
+
* @typeParam Context - The type of additional context passed to callbacks
|
|
1455
|
+
*
|
|
1456
|
+
* @see {@link VirtuosoGrid} for the component
|
|
1457
|
+
* @see {@link VirtuosoGridHandle} for imperative methods
|
|
1458
|
+
* @group VirtuosoGrid
|
|
1459
|
+
*/
|
|
1460
|
+
export declare interface VirtuosoGridProps<Data, Context = unknown> extends GridRootProps {
|
|
753
1461
|
/**
|
|
754
1462
|
* Called with true / false when the list has reached the bottom / gets scrolled up.
|
|
755
1463
|
* Can be used to load newer items, like `tail -f`.
|
|
@@ -762,15 +1470,15 @@ export declare interface VirtuosoGridProps<D, C = unknown> extends GridRootProps
|
|
|
762
1470
|
/**
|
|
763
1471
|
* Use the `components` property for advanced customization of the elements rendered by the list.
|
|
764
1472
|
*/
|
|
765
|
-
components?: GridComponents<
|
|
1473
|
+
components?: GridComponents<Context>;
|
|
766
1474
|
/**
|
|
767
1475
|
* If specified, the component will use the function to generate the `key` property for each list item.
|
|
768
1476
|
*/
|
|
769
|
-
computeItemKey?: GridComputeItemKey<
|
|
1477
|
+
computeItemKey?: GridComputeItemKey<Data, Context>;
|
|
770
1478
|
/**
|
|
771
1479
|
* Additional context available in the custom components and content callbacks
|
|
772
1480
|
*/
|
|
773
|
-
context?:
|
|
1481
|
+
context?: Context;
|
|
774
1482
|
/**
|
|
775
1483
|
* Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.
|
|
776
1484
|
*/
|
|
@@ -778,7 +1486,7 @@ export declare interface VirtuosoGridProps<D, C = unknown> extends GridRootProps
|
|
|
778
1486
|
/**
|
|
779
1487
|
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
|
|
780
1488
|
*/
|
|
781
|
-
data?: readonly
|
|
1489
|
+
data?: readonly Data[];
|
|
782
1490
|
/**
|
|
783
1491
|
* Gets called when the user scrolls to the end of the list.
|
|
784
1492
|
* Receives the last item index as an argument. Can be used to implement endless scrolling.
|
|
@@ -802,6 +1510,10 @@ export declare interface VirtuosoGridProps<D, C = unknown> extends GridRootProps
|
|
|
802
1510
|
* regardless of the container / item size.
|
|
803
1511
|
*/
|
|
804
1512
|
initialItemCount?: number;
|
|
1513
|
+
/**
|
|
1514
|
+
* Set to a value between 0 and totalCount - 1 to make the grid start scrolled to that item.
|
|
1515
|
+
* Pass in an object to achieve additional effects similar to `scrollToIndex`.
|
|
1516
|
+
*/
|
|
805
1517
|
initialTopMostItemIndex?: GridIndexLocation;
|
|
806
1518
|
/**
|
|
807
1519
|
* Called when the list starts/stops scrolling.
|
|
@@ -814,7 +1526,7 @@ export declare interface VirtuosoGridProps<D, C = unknown> extends GridRootProps
|
|
|
814
1526
|
/**
|
|
815
1527
|
* Set the callback to specify the contents of the item.
|
|
816
1528
|
*/
|
|
817
|
-
itemContent?: GridItemContent<
|
|
1529
|
+
itemContent?: GridItemContent<Data, Context>;
|
|
818
1530
|
/**
|
|
819
1531
|
* Sets the className for the list DOM element
|
|
820
1532
|
*/
|
|
@@ -843,6 +1555,10 @@ export declare interface VirtuosoGridProps<D, C = unknown> extends GridRootProps
|
|
|
843
1555
|
* invoked with true after the grid has done the initial render and the items have been measured.
|
|
844
1556
|
*/
|
|
845
1557
|
readyStateChanged?: (ready: boolean) => void;
|
|
1558
|
+
/**
|
|
1559
|
+
* Pass a state obtained from the `stateChanged` callback to restore the grid state.
|
|
1560
|
+
* This includes scroll position and item measurements.
|
|
1561
|
+
*/
|
|
846
1562
|
restoreStateFrom?: GridStateSnapshot | null | undefined;
|
|
847
1563
|
/**
|
|
848
1564
|
* Provides access to the root DOM element
|
|
@@ -872,6 +1588,14 @@ export declare interface VirtuosoGridProps<D, C = unknown> extends GridRootProps
|
|
|
872
1588
|
useWindowScroll?: boolean;
|
|
873
1589
|
}
|
|
874
1590
|
|
|
1591
|
+
/**
|
|
1592
|
+
* Exposes the Virtuoso component methods for imperative control.
|
|
1593
|
+
* Access via ref on the Virtuoso component.
|
|
1594
|
+
*
|
|
1595
|
+
* @see {@link Virtuoso} for the component
|
|
1596
|
+
* @see {@link VirtuosoProps} for available props
|
|
1597
|
+
* @group Virtuoso
|
|
1598
|
+
*/
|
|
875
1599
|
export declare interface VirtuosoHandle {
|
|
876
1600
|
/**
|
|
877
1601
|
* Use this with combination with follow output if you have images loading in the list. Listen to the image loading and call the method.
|
|
@@ -879,34 +1603,72 @@ export declare interface VirtuosoHandle {
|
|
|
879
1603
|
autoscrollToBottom(): void;
|
|
880
1604
|
/**
|
|
881
1605
|
* Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
|
|
1606
|
+
* @param stateCb - Callback that receives the state snapshot
|
|
882
1607
|
*/
|
|
883
1608
|
getState(stateCb: StateCallback): void;
|
|
884
1609
|
/**
|
|
885
1610
|
* Scrolls the component with the specified amount. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
|
|
1611
|
+
* @param location - The scroll offset options
|
|
886
1612
|
*/
|
|
887
1613
|
scrollBy(location: ScrollToOptions): void;
|
|
888
1614
|
/**
|
|
889
1615
|
* Scrolls the item into view if necessary. See [the website example](http://virtuoso.dev/keyboard-navigation/) for an implementation.
|
|
1616
|
+
* @param location - The scroll into view location options
|
|
890
1617
|
*/
|
|
891
1618
|
scrollIntoView(location: FlatScrollIntoViewLocation): void;
|
|
892
1619
|
/**
|
|
893
1620
|
* Scrolls the component to the specified location. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
|
|
1621
|
+
* @param location - The scroll position options
|
|
894
1622
|
*/
|
|
895
1623
|
scrollTo(location: ScrollToOptions): void;
|
|
896
1624
|
/**
|
|
897
1625
|
* Scrolls the component to the specified item index. See {@link IndexLocationWithAlign} for more options.
|
|
1626
|
+
* @param location - The item index or location with alignment options
|
|
898
1627
|
*/
|
|
899
1628
|
scrollToIndex(location: FlatIndexLocationWithAlign | number): void;
|
|
900
1629
|
}
|
|
901
1630
|
|
|
1631
|
+
/**
|
|
1632
|
+
* React context for mocking Virtuoso component measurements in tests.
|
|
1633
|
+
* Wrap your Virtuoso component with this provider to bypass DOM measurements.
|
|
1634
|
+
*
|
|
1635
|
+
* @example
|
|
1636
|
+
* ```tsx
|
|
1637
|
+
* import { VirtuosoMockContext } from 'react-virtuoso'
|
|
1638
|
+
*
|
|
1639
|
+
* <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 30 }}>
|
|
1640
|
+
* <Virtuoso totalCount={100} />
|
|
1641
|
+
* </VirtuosoMockContext.Provider>
|
|
1642
|
+
* ```
|
|
1643
|
+
*
|
|
1644
|
+
* @group Virtuoso
|
|
1645
|
+
*/
|
|
902
1646
|
export declare const VirtuosoMockContext: default_2.Context<VirtuosoMockContextValue | undefined>;
|
|
903
1647
|
|
|
1648
|
+
/**
|
|
1649
|
+
* Mock context value for testing Virtuoso components.
|
|
1650
|
+
* Provides fixed dimensions to bypass DOM measurements.
|
|
1651
|
+
*
|
|
1652
|
+
* @group Virtuoso
|
|
1653
|
+
*/
|
|
904
1654
|
export declare interface VirtuosoMockContextValue {
|
|
1655
|
+
/** Fixed height for each item in pixels */
|
|
905
1656
|
itemHeight: number;
|
|
1657
|
+
/** Fixed viewport height in pixels */
|
|
906
1658
|
viewportHeight: number;
|
|
907
1659
|
}
|
|
908
1660
|
|
|
909
|
-
|
|
1661
|
+
/**
|
|
1662
|
+
* The props for the Virtuoso component.
|
|
1663
|
+
*
|
|
1664
|
+
* @typeParam Data - The type of data items in the list
|
|
1665
|
+
* @typeParam Context - The type of additional context passed to callbacks
|
|
1666
|
+
*
|
|
1667
|
+
* @see {@link Virtuoso} for the component
|
|
1668
|
+
* @see {@link VirtuosoHandle} for imperative methods
|
|
1669
|
+
* @group Virtuoso
|
|
1670
|
+
*/
|
|
1671
|
+
export declare interface VirtuosoProps<Data, Context> extends ListRootProps {
|
|
910
1672
|
/**
|
|
911
1673
|
* Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
|
|
912
1674
|
* Use `followOutput` property to keep the list aligned when new items are appended.
|
|
@@ -936,15 +1698,15 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
|
|
|
936
1698
|
/**
|
|
937
1699
|
* Use the `components` property for advanced customization of the elements rendered by the list.
|
|
938
1700
|
*/
|
|
939
|
-
components?: Components<
|
|
1701
|
+
components?: Components<Data, Context>;
|
|
940
1702
|
/**
|
|
941
1703
|
* If specified, the component will use the function to generate the `key` property for each list item.
|
|
942
1704
|
*/
|
|
943
|
-
computeItemKey?: ComputeItemKey<
|
|
1705
|
+
computeItemKey?: ComputeItemKey<Data, Context>;
|
|
944
1706
|
/**
|
|
945
1707
|
* Additional context available in the custom components and content callbacks
|
|
946
1708
|
*/
|
|
947
|
-
context?:
|
|
1709
|
+
context?: Context;
|
|
948
1710
|
/**
|
|
949
1711
|
* Pass a reference to a scrollable parent element, so that the list won't wrap in its own.
|
|
950
1712
|
*/
|
|
@@ -952,7 +1714,7 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
|
|
|
952
1714
|
/**
|
|
953
1715
|
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
|
|
954
1716
|
*/
|
|
955
|
-
data?: readonly
|
|
1717
|
+
data?: readonly Data[];
|
|
956
1718
|
/**
|
|
957
1719
|
* By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
|
|
958
1720
|
*
|
|
@@ -1030,10 +1792,10 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
|
|
|
1030
1792
|
* Use the context contents if you need to implement custom logic based on the current state of the list.
|
|
1031
1793
|
*/
|
|
1032
1794
|
scrollIntoViewOnChange?: (params: {
|
|
1033
|
-
context:
|
|
1795
|
+
context: Context;
|
|
1034
1796
|
totalCount: number;
|
|
1035
1797
|
scrollingInProgress: boolean;
|
|
1036
|
-
}) => ScrollIntoViewLocation | null | undefined | false
|
|
1798
|
+
}) => ScrollIntoViewLocation | null | undefined | false;
|
|
1037
1799
|
/**
|
|
1038
1800
|
* Set to customize the wrapper tag for the header and footer components (default is `div`).
|
|
1039
1801
|
*/
|
|
@@ -1088,7 +1850,7 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
|
|
|
1088
1850
|
/**
|
|
1089
1851
|
* Set the callback to specify the contents of the item.
|
|
1090
1852
|
*/
|
|
1091
|
-
itemContent?: ItemContent<
|
|
1853
|
+
itemContent?: ItemContent<Data, Context>;
|
|
1092
1854
|
/**
|
|
1093
1855
|
* Allows customizing the height/width calculation of `Item` elements.
|
|
1094
1856
|
*
|
|
@@ -1098,7 +1860,7 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
|
|
|
1098
1860
|
/**
|
|
1099
1861
|
* Called with the new set of items each time the list items are rendered due to scrolling.
|
|
1100
1862
|
*/
|
|
1101
|
-
itemsRendered?: (items: ListItem<
|
|
1863
|
+
itemsRendered?: (items: ListItem<Data>[]) => void;
|
|
1102
1864
|
/**
|
|
1103
1865
|
* set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.
|
|
1104
1866
|
*
|
|
@@ -1168,9 +1930,16 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
|
|
|
1168
1930
|
useWindowScroll?: boolean;
|
|
1169
1931
|
}
|
|
1170
1932
|
|
|
1933
|
+
/**
|
|
1934
|
+
* Information about the window viewport when using window scrolling mode.
|
|
1935
|
+
* @group Common
|
|
1936
|
+
*/
|
|
1171
1937
|
export declare interface WindowViewportInfo {
|
|
1938
|
+
/** The offset from the top of the document to the list container in pixels */
|
|
1172
1939
|
offsetTop: number;
|
|
1940
|
+
/** The visible height of the window viewport in pixels */
|
|
1173
1941
|
visibleHeight: number;
|
|
1942
|
+
/** The visible width of the window viewport in pixels */
|
|
1174
1943
|
visibleWidth: number;
|
|
1175
1944
|
}
|
|
1176
1945
|
|