react-virtuoso 4.12.3 → 4.12.4

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/dist/index.d.ts CHANGED
@@ -1,20 +1,20 @@
1
1
  import { default as default_2 } from 'react';
2
2
 
3
- export declare type CalculateViewLocation = (params: CalculateViewLocationParams) => IndexLocationWithAlign | number | null;
3
+ export declare type CalculateViewLocation = (params: CalculateViewLocationParams) => IndexLocationWithAlign | null | number;
4
4
 
5
5
  export declare interface CalculateViewLocationParams {
6
- itemTop: number;
7
6
  itemBottom: number;
8
- viewportTop: number;
9
- viewportBottom: number;
7
+ itemTop: number;
10
8
  locationParams: {
11
- align?: 'start' | 'center' | 'end';
9
+ align?: 'center' | 'end' | 'start';
12
10
  behavior?: 'auto' | 'smooth';
13
11
  } & ({
14
- index: number;
15
- } | {
16
12
  groupIndex: number;
13
+ } | {
14
+ index: number;
17
15
  });
16
+ viewportBottom: number;
17
+ viewportTop: number;
18
18
  }
19
19
 
20
20
  /**
@@ -22,72 +22,56 @@ export declare interface CalculateViewLocationParams {
22
22
  */
23
23
  export declare interface Components<Data = unknown, Context = unknown> {
24
24
  /**
25
- * Set to render a component at the top of the list.
26
- *
27
- * The header remains above the top items and does not remain sticky.
25
+ * Set to render a custom UI when the list is empty.
28
26
  */
29
- Header?: default_2.ComponentType<{
30
- context?: Context;
31
- }>;
27
+ EmptyPlaceholder?: default_2.ComponentType<ContextProp<Context>>;
32
28
  /**
33
29
  * Set to render a component at the bottom of the list.
34
30
  */
35
- Footer?: default_2.ComponentType<{
36
- context?: Context;
37
- }>;
38
- /**
39
- * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
40
- */
41
- Item?: default_2.ComponentType<ItemProps<Data> & {
42
- context?: Context;
43
- }>;
31
+ Footer?: default_2.ComponentType<ContextProp<Context>>;
44
32
  /**
45
33
  * Set to customize the group item wrapping element. Use only if you would like to render list from elements different than a `div`.
46
34
  */
47
- Group?: default_2.ComponentType<GroupProps & {
48
- context?: Context;
49
- }>;
35
+ Group?: default_2.ComponentType<GroupProps & ContextProp<Context>>;
50
36
  /**
51
- * Set to customize the top list item wrapping element. Use if you would like to render list from elements different than a `div`
52
- * or you want to set a custom z-index for the sticky position.
37
+ * Set to render a component at the top of the list.
38
+ *
39
+ * The header remains above the top items and does not remain sticky.
53
40
  */
54
- TopItemList?: default_2.ComponentType<TopItemListProps & {
55
- context?: Context;
56
- }>;
41
+ Header?: default_2.ComponentType<ContextProp<Context>>;
57
42
  /**
58
- * Set to customize the outermost scrollable element. This should not be necessary in general,
59
- * as the component passes its HTML attribute props to it.
43
+ * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
60
44
  */
61
- Scroller?: default_2.ComponentType<ScrollerProps & {
62
- context?: Context;
63
- }>;
45
+ Item?: default_2.ComponentType<ItemProps<Data> & ContextProp<Context>>;
64
46
  /**
65
47
  * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
66
48
  */
67
- List?: default_2.ComponentType<ListProps & {
68
- context?: Context;
69
- }>;
49
+ List?: default_2.ComponentType<ListProps & ContextProp<Context>>;
70
50
  /**
71
- * Set to render a custom UI when the list is empty.
51
+ * Set to customize the outermost scrollable element. This should not be necessary in general,
52
+ * as the component passes its HTML attribute props to it.
72
53
  */
73
- EmptyPlaceholder?: default_2.ComponentType<{
74
- context?: Context;
75
- }>;
54
+ Scroller?: default_2.ComponentType<ScrollerProps & ContextProp<Context>>;
76
55
  /**
77
56
  * Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
78
57
  */
79
- ScrollSeekPlaceholder?: default_2.ComponentType<ScrollSeekPlaceholderProps & {
80
- context?: Context;
81
- }>;
58
+ ScrollSeekPlaceholder?: default_2.ComponentType<ScrollSeekPlaceholderProps & ContextProp<Context>>;
59
+ /**
60
+ * Set to customize the top list item wrapping element. Use if you would like to render list from elements different than a `div`
61
+ * or you want to set a custom z-index for the sticky position.
62
+ */
63
+ TopItemList?: default_2.ComponentType<TopItemListProps & ContextProp<Context>>;
82
64
  }
83
65
 
84
- export declare interface ComputeItemKey<D, C> {
85
- (index: number, item: D, context: C): default_2.Key;
66
+ export declare type ComputeItemKey<D, C> = (index: number, item: D, context: C) => default_2.Key;
67
+
68
+ export declare interface ContextProp<C> {
69
+ context: C;
86
70
  }
87
71
 
88
72
  export declare interface ElementDimensions {
89
- width: number;
90
73
  height: number;
74
+ width: number;
91
75
  }
92
76
 
93
77
  /**
@@ -105,7 +89,7 @@ export declare interface FlatIndexLocationWithAlign extends LocationOptions {
105
89
  /**
106
90
  * The index of the item to scroll to.
107
91
  */
108
- index: number | 'LAST';
92
+ index: 'LAST' | number;
109
93
  }
110
94
 
111
95
  export declare interface FlatScrollIntoViewLocation extends ScrollIntoViewLocationOptions {
@@ -116,141 +100,110 @@ export declare type FollowOutput = FollowOutputCallback | FollowOutputScalarType
116
100
 
117
101
  export declare type FollowOutputCallback = (isAtBottom: boolean) => FollowOutputScalarType;
118
102
 
119
- export declare type FollowOutputScalarType = boolean | 'smooth' | 'auto';
103
+ export declare type FollowOutputScalarType = 'auto' | 'smooth' | boolean;
120
104
 
121
105
  export declare interface Gap {
122
- row: number;
123
106
  column: number;
107
+ row: number;
124
108
  }
125
109
 
126
110
  export declare interface GridComponents<Context = any> {
127
111
  /**
128
- * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
112
+ * Set to render a component at the bottom of the list.
129
113
  */
130
- Item?: default_2.ComponentType<GridItemProps & {
131
- context?: Context;
132
- }>;
114
+ Footer?: default_2.ComponentType<ContextProp<Context>>;
133
115
  /**
134
- * Set to customize the outermost scrollable element. This should not be necessary in general,
135
- * as the component passes its HTML attribute props to it.
116
+ * Set to render a component at the top of the list.
117
+ *
118
+ * The header remains above the top items and does not remain sticky.
136
119
  */
137
- Scroller?: default_2.ComponentType<ScrollerProps & {
138
- context?: Context;
139
- }>;
120
+ Header?: default_2.ComponentType<ContextProp<Context>>;
140
121
  /**
141
- * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
122
+ * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
142
123
  */
143
- List?: default_2.ComponentType<GridListProps & {
144
- context?: Context;
145
- }>;
124
+ Item?: default_2.ComponentType<GridItemProps & ContextProp<Context>>;
146
125
  /**
147
- * Set to render a component at the top of the list.
148
- *
149
- * The header remains above the top items and does not remain sticky.
126
+ * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
150
127
  */
151
- Header?: default_2.ComponentType<{
152
- context?: Context;
153
- }>;
128
+ List?: default_2.ComponentType<GridListProps & ContextProp<Context>>;
154
129
  /**
155
- * Set to render a component at the bottom of the list.
130
+ * Set to customize the outermost scrollable element. This should not be necessary in general,
131
+ * as the component passes its HTML attribute props to it.
156
132
  */
157
- Footer?: default_2.ComponentType<{
158
- context?: Context;
159
- }>;
133
+ Scroller?: default_2.ComponentType<ScrollerProps & ContextProp<Context>>;
160
134
  /**
161
135
  * Set to render an item placeholder when the user scrolls fast.
162
136
  * See the `scrollSeekConfiguration` property for more details.
163
137
  */
164
- ScrollSeekPlaceholder?: default_2.ComponentType<GridScrollSeekPlaceholderProps & {
165
- context?: Context;
166
- }>;
138
+ ScrollSeekPlaceholder?: default_2.ComponentType<GridScrollSeekPlaceholderProps & ContextProp<Context>>;
167
139
  }
168
140
 
169
- export declare interface GridComputeItemKey<D, C> {
170
- (index: number, item: D, context: C): default_2.Key;
171
- }
141
+ export declare type GridComputeItemKey<D, C> = (index: number, item: D, context: C) => default_2.Key;
172
142
 
173
143
  export declare type GridIndexLocation = FlatIndexLocationWithAlign | number;
174
144
 
175
145
  export declare interface GridItem<D> {
176
- index: number;
177
146
  data?: D;
147
+ index: number;
178
148
  }
179
149
 
180
- export declare interface GridItemContent<D, C> {
181
- (index: number, data: D, context: C): default_2.ReactNode;
182
- }
150
+ export declare type GridItemContent<D, C> = (index: number, data: D, context: C) => default_2.ReactNode;
183
151
 
184
152
  /**
185
153
  * Passed to the Components.Item custom component
186
154
  */
187
- export declare type GridItemProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children' | 'className'> & {
155
+ export declare type GridItemProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
188
156
  'data-index': number;
189
- } & default_2.RefAttributes<HTMLDivElement>;
157
+ };
190
158
 
191
159
  /**
192
160
  * Passed to the Components.List custom component
193
161
  */
194
- export declare type GridListProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children' | 'className'> & {
162
+ export declare type GridListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
195
163
  'data-testid': string;
196
- } & default_2.RefAttributes<HTMLDivElement>;
164
+ };
197
165
 
198
- export declare type GridRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'ref' | 'data'>;
166
+ export declare type GridRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'data' | 'ref'>;
199
167
 
200
168
  /**
201
169
  * Passed to the GridComponents.ScrollSeekPlaceholder custom component
202
170
  */
203
171
  export declare interface GridScrollSeekPlaceholderProps {
204
- index: number;
205
172
  height: number;
173
+ index: number;
206
174
  width: number;
207
175
  }
208
176
 
209
177
  export declare interface GridStateSnapshot {
210
- viewport: ElementDimensions;
211
- item: ElementDimensions;
212
178
  gap: Gap;
179
+ item: ElementDimensions;
213
180
  scrollTop: number;
181
+ viewport: ElementDimensions;
214
182
  }
215
183
 
216
- export declare interface GroupContent<C> {
217
- (index: number, context: C): default_2.ReactNode;
218
- }
184
+ export declare type GroupContent<C> = (index: number, context: C) => default_2.ReactNode;
219
185
 
220
186
  export declare interface GroupedScrollIntoViewLocation extends ScrollIntoViewLocationOptions {
221
187
  groupIndex: number;
222
188
  }
223
189
 
224
190
  export declare const GroupedVirtuoso: <ItemData = any, Context = any>(props: GroupedVirtuosoProps<ItemData, Context> & {
225
- ref?: default_2.Ref<GroupedVirtuosoHandle> | undefined;
191
+ ref?: default_2.Ref<GroupedVirtuosoHandle>;
226
192
  }) => default_2.ReactElement;
227
193
 
228
194
  export declare interface GroupedVirtuosoHandle {
229
- scrollToIndex(location: number | IndexLocationWithAlign): void;
230
- scrollIntoView(location: number | ScrollIntoViewLocation): void;
231
- scrollTo(location: ScrollToOptions): void;
232
- scrollBy(location: ScrollToOptions): void;
233
195
  autoscrollToBottom(): void;
234
196
  /**
235
197
  * Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
236
198
  */
237
199
  getState(stateCb: StateCallback): void;
200
+ scrollBy(location: ScrollToOptions): void;
201
+ scrollIntoView(location: number | ScrollIntoViewLocation): void;
202
+ scrollTo(location: ScrollToOptions): void;
203
+ scrollToIndex(location: IndexLocationWithAlign | number): void;
238
204
  }
239
205
 
240
- export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'totalCount' | 'itemContent'> {
241
- /**
242
- * Specifies the amount of items in each group (and, actually, how many groups are there).
243
- * For example, passing [20, 30] will display 2 groups with 20 and 30 items each.
244
- */
245
- groupCounts?: number[];
246
- /**
247
- * Specifies how each each group header gets rendered. The callback receives the zero-based index of the group.
248
- */
249
- groupContent?: GroupContent<C>;
250
- /**
251
- * Specifies how each each item gets rendered.
252
- */
253
- itemContent?: GroupItemContent<D, C>;
206
+ export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'itemContent' | 'totalCount'> {
254
207
  /**
255
208
  * Use when implementing inverse infinite scrolling, decrease the value this property
256
209
  * in combination with a change in `groupCounts` to prepend groups items to the top of the list.
@@ -265,6 +218,19 @@ export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D
265
218
  * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
266
219
  */
267
220
  firstItemIndex?: number;
221
+ /**
222
+ * Specifies how each each group header gets rendered. The callback receives the zero-based index of the group.
223
+ */
224
+ groupContent?: GroupContent<C>;
225
+ /**
226
+ * Specifies the amount of items in each group (and, actually, how many groups are there).
227
+ * For example, passing [20, 30] will display 2 groups with 20 and 30 items each.
228
+ */
229
+ groupCounts?: number[];
230
+ /**
231
+ * Specifies how each each item gets rendered.
232
+ */
233
+ itemContent?: GroupItemContent<D, C>;
268
234
  }
269
235
 
270
236
  export declare interface GroupIndexLocationWithAlign extends LocationOptions {
@@ -275,15 +241,13 @@ export declare interface GroupIndexLocationWithAlign extends LocationOptions {
275
241
  }
276
242
 
277
243
  export declare interface GroupItem<D> extends Item<D> {
278
- type: 'group';
279
244
  originalIndex?: number;
245
+ type: 'group';
280
246
  }
281
247
 
282
- export declare interface GroupItemContent<D, C> {
283
- (index: number, groupIndex: number, data: D, context: C): default_2.ReactNode;
284
- }
248
+ export declare type GroupItemContent<D, C> = (index: number, groupIndex: number, data: D, context: C) => default_2.ReactNode;
285
249
 
286
- export declare type GroupProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children'> & {
250
+ export declare type GroupProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & {
287
251
  'data-index': number;
288
252
  'data-item-index': number;
289
253
  'data-known-size': number;
@@ -292,49 +256,47 @@ export declare type GroupProps = Pick<default_2.ComponentProps<'div'>, 'style' |
292
256
  export declare type IndexLocationWithAlign = FlatIndexLocationWithAlign | GroupIndexLocationWithAlign;
293
257
 
294
258
  export declare interface Item<D> {
259
+ data?: D;
295
260
  index: number;
296
261
  offset: number;
297
262
  size: number;
298
- data?: D;
299
263
  }
300
264
 
301
- export declare interface ItemContent<D, C> {
302
- (index: number, data: D, context: C): default_2.ReactNode;
303
- }
265
+ export declare type ItemContent<D, C> = (index: number, data: D, context: C) => default_2.ReactNode;
304
266
 
305
- export declare type ItemProps<D> = Pick<default_2.ComponentProps<'div'>, 'style' | 'children'> & {
267
+ export declare type ItemProps<D> = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & {
306
268
  'data-index': number;
307
- 'data-item-index': number;
308
269
  'data-item-group-index'?: number;
270
+ 'data-item-index': number;
309
271
  'data-known-size': number;
310
272
  item: D;
311
273
  };
312
274
 
313
- export declare type ListItem<D> = RecordItem<D> | GroupItem<D>;
275
+ export declare type ListItem<D> = GroupItem<D> | RecordItem<D>;
314
276
 
315
277
  /**
316
278
  * Passed to the Components.List custom component
317
279
  */
318
- export declare type ListProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children'> & {
280
+ export declare type ListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
319
281
  'data-testid': string;
320
- } & default_2.RefAttributes<HTMLDivElement>;
282
+ };
321
283
 
322
284
  export declare interface ListRange {
323
- startIndex: number;
324
285
  endIndex: number;
286
+ startIndex: number;
325
287
  }
326
288
 
327
- export declare type ListRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'ref' | 'data'>;
289
+ export declare type ListRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'data' | 'ref'>;
328
290
 
329
291
  export declare interface LocationOptions {
330
292
  /**
331
293
  * How to position the item in the viewport.
332
294
  */
333
- align?: 'start' | 'center' | 'end';
295
+ align?: 'center' | 'end' | 'start';
334
296
  /**
335
297
  * Set 'smooth' to have an animated transition to the specified location.
336
298
  */
337
- behavior?: 'smooth' | 'auto';
299
+ behavior?: 'auto' | 'smooth';
338
300
  /**
339
301
  * The offset to scroll.
340
302
  */
@@ -349,10 +311,10 @@ export declare enum LogLevel {
349
311
  }
350
312
 
351
313
  export declare interface RecordItem<D> extends Item<D> {
352
- type?: undefined;
314
+ data?: D;
353
315
  groupIndex?: number;
354
316
  originalIndex?: number;
355
- data?: D;
317
+ type?: undefined;
356
318
  }
357
319
 
358
320
  export declare interface ScrollContainerState {
@@ -364,20 +326,16 @@ export declare interface ScrollContainerState {
364
326
  /**
365
327
  * Passed to the Components.Scroller custom component
366
328
  */
367
- export declare type ScrollerProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children' | 'tabIndex'> & {
329
+ export declare type ScrollerProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style' | 'tabIndex'> & default_2.RefAttributes<HTMLDivElement> & {
368
330
  'data-testid'?: string;
369
331
  'data-virtuoso-scroller'?: boolean;
370
- } & default_2.RefAttributes<HTMLDivElement>;
332
+ };
371
333
 
372
334
  export declare type ScrollIntoViewLocation = FlatScrollIntoViewLocation | GroupedScrollIntoViewLocation;
373
335
 
374
336
  export declare interface ScrollIntoViewLocationOptions {
375
- align?: 'start' | 'center' | 'end';
337
+ align?: 'center' | 'end' | 'start';
376
338
  behavior?: 'auto' | 'smooth';
377
- /**
378
- * Will be called when the scroll is done, or immediately if no scroll is needed.
379
- */
380
- done?: () => void;
381
339
  /**
382
340
  * Use this function to fine-tune the scrollIntoView behavior.
383
341
  * The function receives the item's top and bottom position in the viewport, and the viewport top/bottom.
@@ -402,17 +360,21 @@ export declare interface ScrollIntoViewLocationOptions {
402
360
  *```
403
361
  */
404
362
  calculateViewLocation?: CalculateViewLocation;
363
+ /**
364
+ * Will be called when the scroll is done, or immediately if no scroll is needed.
365
+ */
366
+ done?: () => void;
405
367
  }
406
368
 
407
369
  export declare interface ScrollSeekConfiguration {
408
- /**
409
- * Callback to determine if the list should enter "scroll seek" mode.
410
- */
411
- enter: ScrollSeekToggle;
412
370
  /**
413
371
  * called during scrolling in scroll seek mode - use to display a hint where the list is.
414
372
  */
415
373
  change?: (velocity: number, range: ListRange) => void;
374
+ /**
375
+ * Callback to determine if the list should enter "scroll seek" mode.
376
+ */
377
+ enter: ScrollSeekToggle;
416
378
  /**
417
379
  * Callback to determine if the list should exit "scroll seek" mode.
418
380
  */
@@ -423,23 +385,21 @@ export declare interface ScrollSeekConfiguration {
423
385
  * Passed to the Components.ScrollSeekPlaceholder custom component
424
386
  */
425
387
  export declare interface ScrollSeekPlaceholderProps {
426
- index: number;
427
- height: number;
428
388
  groupIndex?: number;
389
+ height: number;
390
+ index: number;
429
391
  type: 'group' | 'item';
430
392
  }
431
393
 
432
- export declare interface ScrollSeekToggle {
433
- (velocity: number, range: ListRange): boolean;
434
- }
394
+ export declare type ScrollSeekToggle = (velocity: number, range: ListRange) => boolean;
435
395
 
436
396
  /** Calculates the height of `el`, which will be the `Item` element in the DOM. */
437
397
  export declare type SizeFunction = (el: HTMLElement, field: 'offsetHeight' | 'offsetWidth') => number;
438
398
 
439
399
  export declare interface SizeRange {
440
- startIndex: number;
441
400
  endIndex: number;
442
401
  size: number;
402
+ startIndex: number;
443
403
  }
444
404
 
445
405
  export declare type StateCallback = (state: StateSnapshot) => void;
@@ -452,160 +412,113 @@ export declare interface StateSnapshot {
452
412
  /**
453
413
  * Passed to the Components.TableBody custom component
454
414
  */
455
- export declare type TableBodyProps = Pick<default_2.ComponentProps<'tbody'>, 'style' | 'children' | 'className'> & {
415
+ export declare type TableBodyProps = Pick<default_2.ComponentProps<'tbody'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLTableSectionElement> & {
456
416
  'data-testid': string;
457
- } & default_2.RefAttributes<HTMLTableSectionElement>;
417
+ };
458
418
 
459
419
  /**
460
420
  * Customize the TableVirtuoso rendering by passing a set of custom components.
461
421
  */
462
422
  export declare interface TableComponents<Data = unknown, Context = unknown> {
463
423
  /**
464
- * Set to customize the wrapping `table` element.
465
- *
424
+ * Set to render a custom UI when the list is empty.
466
425
  */
467
- Table?: default_2.ComponentType<TableProps & {
468
- context?: Context;
469
- }>;
426
+ EmptyPlaceholder?: default_2.ComponentType<ContextProp<Context>>;
470
427
  /**
471
- * Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderContent]] to set the contents
472
- *
428
+ * Set to render an empty item placeholder.
473
429
  */
474
- TableHead?: default_2.ComponentType<Pick<default_2.ComponentProps<'thead'>, 'style' | 'children'> & {
475
- context?: Context;
476
- } & default_2.RefAttributes<HTMLTableSectionElement>>;
430
+ FillerRow?: default_2.ComponentType<FillerRowProps & ContextProp<Context>>;
477
431
  /**
478
- * Set to render a fixed footer at the bottom of the table (`tfoot`). use [[fixedFooterContent]] to set the contents
432
+ * Set to customize the outermost scrollable element. This should not be necessary in general,
433
+ * as the component passes its HTML attribute props to it.
479
434
  */
480
- TableFoot?: default_2.ComponentType<Pick<default_2.ComponentProps<'tfoot'>, 'style' | 'children'> & {
481
- context?: Context;
482
- } & default_2.RefAttributes<HTMLTableSectionElement>>;
435
+ Scroller?: default_2.ComponentType<ScrollerProps & ContextProp<Context>>;
483
436
  /**
484
- * Set to customize the item wrapping element. Default is `tr`.
437
+ * Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
485
438
  */
486
- TableRow?: default_2.ComponentType<ItemProps<Data> & {
487
- context?: Context;
488
- }>;
439
+ ScrollSeekPlaceholder?: default_2.ComponentType<ScrollSeekPlaceholderProps & ContextProp<Context>>;
489
440
  /**
490
- * Set to customize the outermost scrollable element. This should not be necessary in general,
491
- * as the component passes its HTML attribute props to it.
441
+ * Set to customize the wrapping `table` element.
442
+ *
492
443
  */
493
- Scroller?: default_2.ComponentType<ScrollerProps & {
494
- context?: Context;
495
- }>;
444
+ Table?: default_2.ComponentType<TableProps & ContextProp<Context>>;
496
445
  /**
497
446
  * Set to customize the items wrapper. Default is `tbody`.
498
447
  */
499
- TableBody?: default_2.ComponentType<TableBodyProps & {
500
- context?: Context;
501
- }>;
448
+ TableBody?: default_2.ComponentType<TableBodyProps & ContextProp<Context>>;
502
449
  /**
503
- * Set to render a custom UI when the list is empty.
450
+ * Set to render a fixed footer at the bottom of the table (`tfoot`). use [[fixedFooterContent]] to set the contents
504
451
  */
505
- EmptyPlaceholder?: default_2.ComponentType<{
506
- context?: Context;
507
- }>;
452
+ TableFoot?: default_2.ComponentType<Pick<default_2.ComponentProps<'tfoot'>, 'children' | 'style'> & default_2.RefAttributes<HTMLTableSectionElement> & ContextProp<Context>>;
508
453
  /**
509
- * Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
454
+ * Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderContent]] to set the contents
455
+ *
510
456
  */
511
- ScrollSeekPlaceholder?: default_2.ComponentType<ScrollSeekPlaceholderProps & {
512
- context?: Context;
513
- }>;
457
+ TableHead?: default_2.ComponentType<Pick<default_2.ComponentProps<'thead'>, 'children' | 'style'> & default_2.RefAttributes<HTMLTableSectionElement> & ContextProp<Context>>;
514
458
  /**
515
- * Set to render an empty item placeholder.
459
+ * Set to customize the item wrapping element. Default is `tr`.
516
460
  */
517
- FillerRow?: default_2.ComponentType<FillerRowProps & {
518
- context?: Context;
519
- }>;
461
+ TableRow?: default_2.ComponentType<ItemProps<Data> & ContextProp<Context>>;
520
462
  }
521
463
 
522
- export declare type TableProps = Pick<default_2.ComponentProps<'table'>, 'style' | 'children'>;
464
+ export declare type TableProps = Pick<default_2.ComponentProps<'table'>, 'children' | 'style'>;
523
465
 
524
- export declare type TableRootProps = Omit<default_2.HTMLProps<HTMLTableElement>, 'ref' | 'data'>;
466
+ export declare type TableRootProps = Omit<default_2.HTMLProps<HTMLTableElement>, 'data' | 'ref'>;
525
467
 
526
468
  export declare const TableVirtuoso: <ItemData = any, Context = any>(props: TableVirtuosoProps<ItemData, Context> & {
527
- ref?: default_2.Ref<TableVirtuosoHandle> | undefined;
469
+ ref?: default_2.Ref<TableVirtuosoHandle>;
528
470
  }) => default_2.ReactElement;
529
471
 
530
472
  export declare interface TableVirtuosoHandle {
531
- scrollIntoView(location: number | FlatScrollIntoViewLocation): void;
532
- scrollToIndex(location: number | FlatIndexLocationWithAlign): void;
533
- scrollTo(location: ScrollToOptions): void;
534
- scrollBy(location: ScrollToOptions): void;
535
473
  /**
536
474
  * Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
537
475
  */
538
476
  getState(stateCb: StateCallback): void;
477
+ scrollBy(location: ScrollToOptions): void;
478
+ scrollIntoView(location: FlatScrollIntoViewLocation | number): void;
479
+ scrollTo(location: ScrollToOptions): void;
480
+ scrollToIndex(location: FlatIndexLocationWithAlign | number): void;
539
481
  }
540
482
 
541
483
  export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'components' | 'headerFooterTag'> {
542
484
  /**
543
- * Use the `components` property for advanced customization of the elements rendered by the table.
544
- */
545
- components?: TableComponents<D, C>;
546
- /**
547
- * Set the contents of the table header.
548
- */
549
- fixedHeaderContent?: FixedHeaderContent;
550
- /**
551
- * Set the contents of the table footer.
552
- */
553
- fixedFooterContent?: FixedFooterContent;
554
- /**
555
- * Set the amount of items to remain fixed at the top of the table.
556
- */
557
- topItemCount?: number;
558
- /**
559
- * The total amount of items to be rendered.
485
+ * Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
486
+ * Use `followOutput` property to keep the list aligned when new items are appended.
560
487
  */
561
- totalCount?: number;
488
+ alignToBottom?: boolean;
562
489
  /**
563
- * The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
490
+ * Called with true / false when the list has reached the bottom / gets scrolled up.
491
+ * Can be used to load newer items, like `tail -f`.
564
492
  */
565
- data?: readonly D[];
493
+ atBottomStateChange?: (atBottom: boolean) => void;
566
494
  /**
567
- * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
568
- * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
569
- * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
570
- * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in `react-window`).
495
+ * By default `4`. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom.
571
496
  */
572
- overscan?: number | {
573
- main: number;
574
- reverse: number;
575
- };
497
+ atBottomThreshold?: number;
576
498
  /**
577
- * Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
578
- * The property causes the component to render more items than the necessary, but can help with slow loading content.
579
- * Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
499
+ * Called with `true` / `false` when the list has reached the top / gets scrolled down.
580
500
  */
581
- increaseViewportBy?: number | {
582
- top: number;
583
- bottom: number;
584
- };
501
+ atTopStateChange?: (atTop: boolean) => void;
585
502
  /**
586
- * Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
587
- * Pass in an object to achieve additional effects similar to `scrollToIndex`.
503
+ * By default `0`. Redefine to change how much away from the top the scroller can be before the list is not considered not at top.
588
504
  */
589
- initialTopMostItemIndex?: number | IndexLocationWithAlign;
505
+ atTopThreshold?: number;
590
506
  /**
591
- * Set this value to offset the initial location of the list.
592
- * Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
593
- * If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
507
+ * Use the `components` property for advanced customization of the elements rendered by the table.
594
508
  */
595
- initialScrollTop?: number;
509
+ components?: TableComponents<D, C>;
596
510
  /**
597
- * Use for server-side rendering - if set, the list will render the specified amount of items
598
- * regardless of the container / item size.
511
+ * If specified, the component will use the function to generate the `key` property for each list item.
599
512
  */
600
- initialItemCount?: number;
513
+ computeItemKey?: ComputeItemKey<D, C>;
601
514
  /**
602
- * Set the callback to specify the contents of the item.
515
+ * Pass a reference to a scrollable parent element, so that the table won't wrap in its own.
603
516
  */
604
- itemContent?: ItemContent<D, C>;
517
+ customScrollParent?: HTMLElement;
605
518
  /**
606
- * If specified, the component will use the function to generate the `key` property for each list item.
519
+ * The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
607
520
  */
608
- computeItemKey?: ComputeItemKey<D, C>;
521
+ data?: readonly D[];
609
522
  /**
610
523
  * By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
611
524
  *
@@ -617,25 +530,33 @@ export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D,
617
530
  */
618
531
  defaultItemHeight?: number;
619
532
  /**
620
- * Allows customizing the height/width calculation of `Item` elements.
533
+ * Gets called when the user scrolls to the end of the list.
534
+ * Receives the last item index as an argument. Can be used to implement endless scrolling.
535
+ */
536
+ endReached?: (index: number) => void;
537
+ /**
538
+ * Use when implementing inverse infinite scrolling - decrease the value this property
539
+ * in combination with `data` or `totalCount` to prepend items to the top of the list.
621
540
  *
622
- * The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
541
+ * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
623
542
  */
624
- itemSize?: SizeFunction;
543
+ firstItemIndex?: number;
544
+ /**
545
+ * Set the contents of the table footer.
546
+ */
547
+ fixedFooterContent?: FixedFooterContent;
548
+ /**
549
+ * Set the contents of the table header.
550
+ */
551
+ fixedHeaderContent?: FixedHeaderContent;
625
552
  /**
626
553
  * Can be used to improve performance if the rendered items are of known size.
627
554
  * Setting it causes the component to skip item measurements.
628
555
  */
629
556
  fixedItemHeight?: number;
630
557
  /**
631
- * Use to display placeholders if the user scrolls fast through the list.
632
- *
633
- * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
634
- */
635
- scrollSeekConfiguration?: ScrollSeekConfiguration | false;
636
- /**
637
- * If set to `true`, the list automatically scrolls to bottom if the total count is changed.
638
- * Set to `"smooth"` for an animated scrolling.
558
+ * If set to `true`, the list automatically scrolls to bottom if the total count is changed.
559
+ * Set to `"smooth"` for an animated scrolling.
639
560
  *
640
561
  * By default, `followOutput` scrolls down only if the list is already at the bottom.
641
562
  * To implement an arbitrary logic behind that, pass a function:
@@ -653,140 +574,160 @@ export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D,
653
574
  */
654
575
  followOutput?: FollowOutput;
655
576
  /**
656
- * Use when implementing inverse infinite scrolling - decrease the value this property
657
- * in combination with `data` or `totalCount` to prepend items to the top of the list.
658
- *
659
- * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
660
- */
661
- firstItemIndex?: number;
662
- /**
663
- * Called when the list starts/stops scrolling.
577
+ * Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
578
+ * The property causes the component to render more items than the necessary, but can help with slow loading content.
579
+ * Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
664
580
  */
665
- isScrolling?: (isScrolling: boolean) => void;
581
+ increaseViewportBy?: number | {
582
+ bottom: number;
583
+ top: number;
584
+ };
666
585
  /**
667
- * Gets called when the user scrolls to the end of the list.
668
- * Receives the last item index as an argument. Can be used to implement endless scrolling.
586
+ * Use for server-side rendering - if set, the list will render the specified amount of items
587
+ * regardless of the container / item size.
669
588
  */
670
- endReached?: (index: number) => void;
589
+ initialItemCount?: number;
671
590
  /**
672
- * Called when the user scrolls to the start of the list.
591
+ * Set this value to offset the initial location of the list.
592
+ * Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
593
+ * If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
673
594
  */
674
- startReached?: (index: number) => void;
595
+ initialScrollTop?: number;
675
596
  /**
676
- * Called with the new set of items each time the list items are rendered due to scrolling.
597
+ * Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
598
+ * Pass in an object to achieve additional effects similar to `scrollToIndex`.
677
599
  */
678
- rangeChanged?: (range: ListRange) => void;
600
+ initialTopMostItemIndex?: IndexLocationWithAlign | number;
679
601
  /**
680
- * Called with true / false when the list has reached the bottom / gets scrolled up.
681
- * Can be used to load newer items, like `tail -f`.
602
+ * Called when the list starts/stops scrolling.
682
603
  */
683
- atBottomStateChange?: (atBottom: boolean) => void;
604
+ isScrolling?: (isScrolling: boolean) => void;
684
605
  /**
685
- * Called with `true` / `false` when the list has reached the top / gets scrolled down.
606
+ * Set the callback to specify the contents of the item.
686
607
  */
687
- atTopStateChange?: (atTop: boolean) => void;
608
+ itemContent?: ItemContent<D, C>;
688
609
  /**
689
- * Called when the total list height is changed due to new items or viewport resize.
610
+ * Allows customizing the height/width calculation of `Item` elements.
611
+ *
612
+ * The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
690
613
  */
691
- totalListHeightChanged?: (height: number) => void;
614
+ itemSize?: SizeFunction;
692
615
  /**
693
616
  * Called with the new set of items each time the list items are rendered due to scrolling.
694
617
  */
695
618
  itemsRendered?: (items: ListItem<D>[]) => void;
696
619
  /**
697
- * Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
698
- * Use `followOutput` property to keep the list aligned when new items are appended.
620
+ * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
621
+ * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
622
+ * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
623
+ * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in `react-window`).
699
624
  */
700
- alignToBottom?: boolean;
625
+ overscan?: number | {
626
+ main: number;
627
+ reverse: number;
628
+ };
701
629
  /**
702
- * Uses the document scroller rather than wrapping the list in its own.
630
+ * Called with the new set of items each time the list items are rendered due to scrolling.
703
631
  */
704
- useWindowScroll?: boolean;
632
+ rangeChanged?: (range: ListRange) => void;
705
633
  /**
706
- * Pass a reference to a scrollable parent element, so that the table won't wrap in its own.
634
+ * pass a state obtained from the getState() method to restore the list state - this includes the previously measured item sizes and the scroll location.
635
+ * Notice that you should still pass the same data and totalCount properties as before, so that the list can match the data with the stored measurements.
636
+ * This is useful when you want to keep the list state when the component is unmounted and remounted, for example when navigating to a different page.
707
637
  */
708
- customScrollParent?: HTMLElement;
638
+ restoreStateFrom?: StateSnapshot;
709
639
  /**
710
640
  * Provides access to the root DOM element
711
641
  */
712
- scrollerRef?: (ref: HTMLElement | Window | null) => any;
642
+ scrollerRef?: (ref: HTMLElement | null | Window) => any;
713
643
  /**
714
- * By default `0`. Redefine to change how much away from the top the scroller can be before the list is not considered not at top.
644
+ * Use to display placeholders if the user scrolls fast through the list.
645
+ *
646
+ * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
715
647
  */
716
- atTopThreshold?: number;
648
+ scrollSeekConfiguration?: false | ScrollSeekConfiguration;
717
649
  /**
718
- * By default `4`. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom.
650
+ * Called when the user scrolls to the start of the list.
719
651
  */
720
- atBottomThreshold?: number;
652
+ startReached?: (index: number) => void;
721
653
  /**
722
- * pass a state obtained from the getState() method to restore the list state - this includes the previously measured item sizes and the scroll location.
723
- * Notice that you should still pass the same data and totalCount properties as before, so that the list can match the data with the stored measurements.
724
- * This is useful when you want to keep the list state when the component is unmounted and remounted, for example when navigating to a different page.
654
+ * Set the amount of items to remain fixed at the top of the table.
725
655
  */
726
- restoreStateFrom?: StateSnapshot;
656
+ topItemCount?: number;
657
+ /**
658
+ * The total amount of items to be rendered.
659
+ */
660
+ totalCount?: number;
661
+ /**
662
+ * Called when the total list height is changed due to new items or viewport resize.
663
+ */
664
+ totalListHeightChanged?: (height: number) => void;
665
+ /**
666
+ * Uses the document scroller rather than wrapping the list in its own.
667
+ */
668
+ useWindowScroll?: boolean;
727
669
  }
728
670
 
729
- export declare type TopItemListProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children'>;
671
+ export declare type TopItemListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'>;
730
672
 
731
673
  export declare const Virtuoso: <ItemData = any, Context = any>(props: VirtuosoProps<ItemData, Context> & {
732
- ref?: default_2.Ref<VirtuosoHandle> | undefined;
674
+ ref?: default_2.Ref<VirtuosoHandle>;
733
675
  }) => default_2.ReactElement;
734
676
 
735
677
  export declare const VirtuosoGrid: <ItemData = any, Context = any>(props: VirtuosoGridProps<ItemData, Context> & {
736
- ref?: default_2.Ref<VirtuosoGridHandle> | undefined;
678
+ ref?: default_2.Ref<VirtuosoGridHandle>;
737
679
  }) => default_2.ReactElement;
738
680
 
739
681
  export declare interface VirtuosoGridHandle {
740
- scrollToIndex(location: GridIndexLocation): void;
741
- scrollTo(location: ScrollToOptions): void;
742
682
  scrollBy(location: ScrollToOptions): void;
683
+ scrollTo(location: ScrollToOptions): void;
684
+ scrollToIndex(location: GridIndexLocation): void;
743
685
  }
744
686
 
745
687
  export declare const VirtuosoGridMockContext: default_2.Context<VirtuosoGridMockContextValue | undefined>;
746
688
 
747
689
  export declare interface VirtuosoGridMockContextValue {
748
- viewportHeight: number;
749
- viewportWidth: number;
750
690
  itemHeight: number;
751
691
  itemWidth: number;
692
+ viewportHeight: number;
693
+ viewportWidth: number;
752
694
  }
753
695
 
754
696
  export declare interface VirtuosoGridProps<D, C = unknown> extends GridRootProps {
755
697
  /**
756
- * The total amount of items to be rendered.
698
+ * Called with true / false when the list has reached the bottom / gets scrolled up.
699
+ * Can be used to load newer items, like `tail -f`.
757
700
  */
758
- totalCount?: number;
701
+ atBottomStateChange?: (atBottom: boolean) => void;
759
702
  /**
760
- * The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
703
+ * Called with `true` / `false` when the list has reached the top / gets scrolled down.
761
704
  */
762
- data?: readonly D[];
705
+ atTopStateChange?: (atTop: boolean) => void;
763
706
  /**
764
- * Additional context available in the custom components and content callbacks
707
+ * Use the `components` property for advanced customization of the elements rendered by the list.
765
708
  */
766
- context?: C;
709
+ components?: GridComponents<C>;
767
710
  /**
768
- * Use for server-side rendering - if set, the list will render the specified amount of items
769
- * regardless of the container / item size.
711
+ * If specified, the component will use the function to generate the `key` property for each list item.
770
712
  */
771
- initialItemCount?: number;
713
+ computeItemKey?: GridComputeItemKey<D, C>;
772
714
  /**
773
- * Set the callback to specify the contents of the item.
715
+ * Additional context available in the custom components and content callbacks
774
716
  */
775
- itemContent?: GridItemContent<D, C>;
717
+ context?: C;
776
718
  /**
777
- * Use the `components` property for advanced customization of the elements rendered by the list.
719
+ * Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.
778
720
  */
779
- components?: GridComponents<C>;
721
+ customScrollParent?: HTMLElement;
780
722
  /**
781
- * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
782
- * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
783
- * Setting `{ main: number, reverse: number }` lets you extend the grid in both the main and the reverse scrollable directions.
784
- * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
723
+ * The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
785
724
  */
786
- overscan?: number | {
787
- main: number;
788
- reverse: number;
789
- };
725
+ data?: readonly D[];
726
+ /**
727
+ * Gets called when the user scrolls to the end of the list.
728
+ * Receives the last item index as an argument. Can be used to implement endless scrolling.
729
+ */
730
+ endReached?: (index: number) => void;
790
731
  /**
791
732
  *
792
733
  * *The property accepts pixel values.*
@@ -797,190 +738,165 @@ export declare interface VirtuosoGridProps<D, C = unknown> extends GridRootProps
797
738
  *
798
739
  */
799
740
  increaseViewportBy?: number | {
800
- top: number;
801
741
  bottom: number;
742
+ top: number;
802
743
  };
803
744
  /**
804
- * If specified, the component will use the function to generate the `key` property for each list item.
805
- */
806
- computeItemKey?: GridComputeItemKey<D, C>;
807
- /**
808
- * Use to display placeholders if the user scrolls fast through the list.
809
- *
810
- * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
745
+ * Use for server-side rendering - if set, the list will render the specified amount of items
746
+ * regardless of the container / item size.
811
747
  */
812
- scrollSeekConfiguration?: ScrollSeekConfiguration | false;
748
+ initialItemCount?: number;
749
+ initialTopMostItemIndex?: GridIndexLocation;
813
750
  /**
814
751
  * Called when the list starts/stops scrolling.
815
752
  */
816
753
  isScrolling?: (isScrolling: boolean) => void;
817
754
  /**
818
- * Gets called when the user scrolls to the end of the list.
819
- * Receives the last item index as an argument. Can be used to implement endless scrolling.
755
+ * Sets the grid items' className
820
756
  */
821
- endReached?: (index: number) => void;
757
+ itemClassName?: string;
822
758
  /**
823
- * Called when the user scrolls to the start of the list.
759
+ * Set the callback to specify the contents of the item.
824
760
  */
825
- startReached?: (index: number) => void;
761
+ itemContent?: GridItemContent<D, C>;
826
762
  /**
827
- * Called with the new set of items each time the list items are rendered due to scrolling.
763
+ * Sets the className for the list DOM element
828
764
  */
829
- rangeChanged?: (range: ListRange) => void;
765
+ listClassName?: string;
830
766
  /**
831
- * reports when the grid state changes. The reported value can be stored and passed back to `restoreStateFrom` to restore the grid to the same state.
767
+ * set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.
768
+ *
769
+ * Ensure that you have "all levels" enabled in the browser console too see the messages.
832
770
  */
833
- stateChanged?: (state: GridStateSnapshot) => void;
834
- restoreStateFrom?: GridStateSnapshot | undefined | null;
771
+ logLevel?: LogLevel;
835
772
  /**
836
- * Called with true / false when the list has reached the bottom / gets scrolled up.
837
- * Can be used to load newer items, like `tail -f`.
773
+ * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
774
+ * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
775
+ * Setting `{ main: number, reverse: number }` lets you extend the grid in both the main and the reverse scrollable directions.
776
+ * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
838
777
  */
839
- atBottomStateChange?: (atBottom: boolean) => void;
778
+ overscan?: number | {
779
+ main: number;
780
+ reverse: number;
781
+ };
840
782
  /**
841
- * Called with `true` / `false` when the list has reached the top / gets scrolled down.
783
+ * Called with the new set of items each time the list items are rendered due to scrolling.
842
784
  */
843
- atTopStateChange?: (atTop: boolean) => void;
785
+ rangeChanged?: (range: ListRange) => void;
844
786
  /**
845
- * Provides access to the root DOM element
787
+ * invoked with true after the grid has done the initial render and the items have been measured.
846
788
  */
847
- scrollerRef?: (ref: HTMLElement | null) => any;
789
+ readyStateChanged?: (ready: boolean) => void;
790
+ restoreStateFrom?: GridStateSnapshot | null | undefined;
848
791
  /**
849
- * Sets the className for the list DOM element
792
+ * Provides access to the root DOM element
850
793
  */
851
- listClassName?: string;
794
+ scrollerRef?: (ref: HTMLElement | null) => any;
852
795
  /**
853
- * Sets the grid items' className
796
+ * Use to display placeholders if the user scrolls fast through the list.
797
+ *
798
+ * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
854
799
  */
855
- itemClassName?: string;
800
+ scrollSeekConfiguration?: false | ScrollSeekConfiguration;
856
801
  /**
857
- * Uses the document scroller rather than wrapping the grid in its own.
802
+ * Called when the user scrolls to the start of the list.
858
803
  */
859
- useWindowScroll?: boolean;
804
+ startReached?: (index: number) => void;
860
805
  /**
861
- * Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.
806
+ * reports when the grid state changes. The reported value can be stored and passed back to `restoreStateFrom` to restore the grid to the same state.
862
807
  */
863
- customScrollParent?: HTMLElement;
808
+ stateChanged?: (state: GridStateSnapshot) => void;
864
809
  /**
865
- * set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.
866
- *
867
- * Ensure that you have "all levels" enabled in the browser console too see the messages.
810
+ * The total amount of items to be rendered.
868
811
  */
869
- logLevel?: LogLevel;
870
- initialTopMostItemIndex?: GridIndexLocation;
812
+ totalCount?: number;
871
813
  /**
872
- * invoked with true after the grid has done the initial render and the items have been measured.
814
+ * Uses the document scroller rather than wrapping the grid in its own.
873
815
  */
874
- readyStateChanged?: (ready: boolean) => void;
816
+ useWindowScroll?: boolean;
875
817
  }
876
818
 
877
819
  export declare interface VirtuosoHandle {
878
820
  /**
879
- * Scrolls the component to the specified item index. See {@link IndexLocationWithAlign} for more options.
880
- */
881
- scrollToIndex(location: number | FlatIndexLocationWithAlign): void;
882
- /**
883
- * Scrolls the item into view if necessary. See [the website example](http://virtuoso.dev/keyboard-navigation/) for an implementation.
821
+ * Use this with combination with follow output if you have images loading in the list. Listen to the image loading and call the method.
884
822
  */
885
- scrollIntoView(location: FlatScrollIntoViewLocation): void;
823
+ autoscrollToBottom(): void;
886
824
  /**
887
- * Scrolls the component to the specified location. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
825
+ * Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
888
826
  */
889
- scrollTo(location: ScrollToOptions): void;
827
+ getState(stateCb: StateCallback): void;
890
828
  /**
891
829
  * Scrolls the component with the specified amount. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
892
830
  */
893
831
  scrollBy(location: ScrollToOptions): void;
894
832
  /**
895
- * Use this with combination with follow output if you have images loading in the list. Listen to the image loading and call the method.
833
+ * Scrolls the item into view if necessary. See [the website example](http://virtuoso.dev/keyboard-navigation/) for an implementation.
896
834
  */
897
- autoscrollToBottom(): void;
835
+ scrollIntoView(location: FlatScrollIntoViewLocation): void;
898
836
  /**
899
- * Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
837
+ * Scrolls the component to the specified location. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
900
838
  */
901
- getState(stateCb: StateCallback): void;
839
+ scrollTo(location: ScrollToOptions): void;
840
+ /**
841
+ * Scrolls the component to the specified item index. See {@link IndexLocationWithAlign} for more options.
842
+ */
843
+ scrollToIndex(location: FlatIndexLocationWithAlign | number): void;
902
844
  }
903
845
 
904
846
  export declare const VirtuosoMockContext: default_2.Context<VirtuosoMockContextValue | undefined>;
905
847
 
906
848
  export declare interface VirtuosoMockContextValue {
907
- viewportHeight: number;
908
849
  itemHeight: number;
850
+ viewportHeight: number;
909
851
  }
910
852
 
911
853
  export declare interface VirtuosoProps<D, C> extends ListRootProps {
912
854
  /**
913
- * The total amount of items to be rendered.
914
- */
915
- totalCount?: number;
916
- /**
917
- * The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
855
+ * Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
856
+ * Use `followOutput` property to keep the list aligned when new items are appended.
918
857
  */
919
- data?: readonly D[];
858
+ alignToBottom?: boolean;
920
859
  /**
921
- * Additional context available in the custom components and content callbacks
860
+ * Called with true / false when the list has reached the bottom / gets scrolled up.
861
+ * Can be used to load newer items, like `tail -f`.
922
862
  */
923
- context?: C;
863
+ atBottomStateChange?: (atBottom: boolean) => void;
924
864
  /**
925
865
  * *The property accepts pixel values.*
926
866
  *
927
- * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
928
- * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
929
- * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
930
- * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
931
- *
867
+ * By default `4`. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom.
932
868
  */
933
- overscan?: number | {
934
- main: number;
935
- reverse: number;
936
- };
869
+ atBottomThreshold?: number;
937
870
  /**
938
- *
939
- * *The property accepts pixel values.*
940
- *
941
- * Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
942
- * The property causes the component to render more items than the necessary, but can help with slow loading content.
943
- * Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
944
- *
871
+ * Called with `true` / `false` when the list has reached the top / gets scrolled down.
945
872
  */
946
- increaseViewportBy?: number | {
947
- top: number;
948
- bottom: number;
949
- };
873
+ atTopStateChange?: (atTop: boolean) => void;
950
874
  /**
951
- * Set the amount of items to remain fixed at the top of the list.
875
+ * *The property accepts pixel values.*
952
876
  *
953
- * For a header that scrolls away when scrolling, check the `components.Header` property.
954
- */
955
- topItemCount?: number;
956
- /**
957
- * Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
958
- * Pass in an object to achieve additional effects similar to `scrollToIndex`.
877
+ * By default `0`. Redefine to change how much away from the top the scroller can be before the list is not considered not at top.
959
878
  */
960
- initialTopMostItemIndex?: number | IndexLocationWithAlign;
879
+ atTopThreshold?: number;
961
880
  /**
962
- * Set this value to offset the initial location of the list.
963
- * Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
964
- * If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
881
+ * Use the `components` property for advanced customization of the elements rendered by the list.
965
882
  */
966
- initialScrollTop?: number;
883
+ components?: Components<D, C>;
967
884
  /**
968
- * Use for server-side rendering - if set, the list will render the specified amount of items
969
- * regardless of the container / item size.
885
+ * If specified, the component will use the function to generate the `key` property for each list item.
970
886
  */
971
- initialItemCount?: number;
887
+ computeItemKey?: ComputeItemKey<D, C>;
972
888
  /**
973
- * Use the `components` property for advanced customization of the elements rendered by the list.
889
+ * Additional context available in the custom components and content callbacks
974
890
  */
975
- components?: Components<D, C>;
891
+ context?: C;
976
892
  /**
977
- * Set the callback to specify the contents of the item.
893
+ * Pass a reference to a scrollable parent element, so that the list won't wrap in its own.
978
894
  */
979
- itemContent?: ItemContent<D, C>;
895
+ customScrollParent?: HTMLElement;
980
896
  /**
981
- * If specified, the component will use the function to generate the `key` property for each list item.
897
+ * The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
982
898
  */
983
- computeItemKey?: ComputeItemKey<D, C>;
899
+ data?: readonly D[];
984
900
  /**
985
901
  * By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
986
902
  *
@@ -992,22 +908,22 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
992
908
  */
993
909
  defaultItemHeight?: number;
994
910
  /**
995
- * Allows customizing the height/width calculation of `Item` elements.
911
+ * Gets called when the user scrolls to the end of the list.
912
+ * Receives the last item index as an argument. Can be used to implement endless scrolling.
913
+ */
914
+ endReached?: (index: number) => void;
915
+ /**
916
+ * Use when implementing inverse infinite scrolling - decrease the value this property
917
+ * in combination with `data` or `totalCount` to prepend items to the top of the list.
996
918
  *
997
- * The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
919
+ * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
998
920
  */
999
- itemSize?: SizeFunction;
921
+ firstItemIndex?: number;
1000
922
  /**
1001
923
  * Can be used to improve performance if the rendered items are of known size.
1002
924
  * Setting it causes the component to skip item measurements.
1003
925
  */
1004
926
  fixedItemHeight?: number;
1005
- /**
1006
- * Use to display placeholders if the user scrolls fast through the list.
1007
- *
1008
- * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
1009
- */
1010
- scrollSeekConfiguration?: ScrollSeekConfiguration | false;
1011
927
  /**
1012
928
  * If set to `true`, the list automatically scrolls to bottom if the total count is changed.
1013
929
  * Set to `"smooth"` for an animated scrolling.
@@ -1032,81 +948,79 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
1032
948
  */
1033
949
  headerFooterTag?: string;
1034
950
  /**
1035
- * Use when implementing inverse infinite scrolling - decrease the value this property
1036
- * in combination with `data` or `totalCount` to prepend items to the top of the list.
1037
- *
1038
- * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
951
+ * When set, turns the scroller into a horizontal list. The items are positioned with `inline-block`.
1039
952
  */
1040
- firstItemIndex?: number;
953
+ horizontalDirection?: boolean;
1041
954
  /**
1042
- * Called when the list starts/stops scrolling.
955
+ *
956
+ * *The property accepts pixel values.*
957
+ *
958
+ * Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
959
+ * The property causes the component to render more items than the necessary, but can help with slow loading content.
960
+ * Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
961
+ *
1043
962
  */
1044
- isScrolling?: (isScrolling: boolean) => void;
963
+ increaseViewportBy?: number | {
964
+ bottom: number;
965
+ top: number;
966
+ };
1045
967
  /**
1046
- * Gets called when the user scrolls to the end of the list.
1047
- * Receives the last item index as an argument. Can be used to implement endless scrolling.
968
+ * Use for server-side rendering - if set, the list will render the specified amount of items
969
+ * regardless of the container / item size.
1048
970
  */
1049
- endReached?: (index: number) => void;
971
+ initialItemCount?: number;
1050
972
  /**
1051
- * Called when the user scrolls to the start of the list.
973
+ * Set this value to offset the initial location of the list.
974
+ * Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
975
+ * If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
1052
976
  */
1053
- startReached?: (index: number) => void;
977
+ initialScrollTop?: number;
1054
978
  /**
1055
- * Called with the new set of items each time the list items are rendered due to scrolling.
979
+ * Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
980
+ * Pass in an object to achieve additional effects similar to `scrollToIndex`.
1056
981
  */
1057
- rangeChanged?: (range: ListRange) => void;
982
+ initialTopMostItemIndex?: IndexLocationWithAlign | number;
1058
983
  /**
1059
- * Called with true / false when the list has reached the bottom / gets scrolled up.
1060
- * Can be used to load newer items, like `tail -f`.
984
+ * Called when the list starts/stops scrolling.
1061
985
  */
1062
- atBottomStateChange?: (atBottom: boolean) => void;
986
+ isScrolling?: (isScrolling: boolean) => void;
1063
987
  /**
1064
- * Called with `true` / `false` when the list has reached the top / gets scrolled down.
988
+ * Set the callback to specify the contents of the item.
1065
989
  */
1066
- atTopStateChange?: (atTop: boolean) => void;
990
+ itemContent?: ItemContent<D, C>;
1067
991
  /**
1068
- * Called when the total list height is changed due to new items or viewport resize.
992
+ * Allows customizing the height/width calculation of `Item` elements.
993
+ *
994
+ * The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
1069
995
  */
1070
- totalListHeightChanged?: (height: number) => void;
996
+ itemSize?: SizeFunction;
1071
997
  /**
1072
998
  * Called with the new set of items each time the list items are rendered due to scrolling.
1073
999
  */
1074
1000
  itemsRendered?: (items: ListItem<D>[]) => void;
1075
1001
  /**
1076
- * Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
1077
- * Use `followOutput` property to keep the list aligned when new items are appended.
1078
- */
1079
- alignToBottom?: boolean;
1080
- /**
1081
- * Uses the document scroller rather than wrapping the list in its own.
1082
- */
1083
- useWindowScroll?: boolean;
1084
- /**
1085
- * Pass a reference to a scrollable parent element, so that the list won't wrap in its own.
1086
- */
1087
- customScrollParent?: HTMLElement;
1088
- /**
1089
- * Provides access to the root DOM element
1090
- */
1091
- scrollerRef?: (ref: HTMLElement | Window | null) => any;
1092
- /**
1093
- * *The property accepts pixel values.*
1002
+ * set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.
1094
1003
  *
1095
- * By default `0`. Redefine to change how much away from the top the scroller can be before the list is not considered not at top.
1004
+ * Ensure that you have "all levels" enabled in the browser console too see the messages.
1096
1005
  */
1097
- atTopThreshold?: number;
1006
+ logLevel?: LogLevel;
1098
1007
  /**
1099
1008
  * *The property accepts pixel values.*
1100
1009
  *
1101
- * By default `4`. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom.
1010
+ * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
1011
+ * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
1012
+ * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
1013
+ * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
1014
+ *
1102
1015
  */
1103
- atBottomThreshold?: number;
1016
+ overscan?: number | {
1017
+ main: number;
1018
+ reverse: number;
1019
+ };
1104
1020
  /**
1105
- * set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.
1106
- *
1107
- * Ensure that you have "all levels" enabled in the browser console too see the messages.
1021
+ * Called with the new set of items each time the list items are rendered due to scrolling.
1108
1022
  */
1109
- logLevel?: LogLevel;
1023
+ rangeChanged?: (range: ListRange) => void;
1110
1024
  /**
1111
1025
  * pass a state obtained from the getState() method to restore the list state - this includes the previously measured item sizes and the scroll location.
1112
1026
  * Notice that you should still pass the same data and totalCount properties as before, so that the list can match the data with the stored measurements.
@@ -1114,15 +1028,43 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
1114
1028
  */
1115
1029
  restoreStateFrom?: StateSnapshot;
1116
1030
  /**
1117
- * When set, turns the scroller into a horizontal list. The items are positioned with `inline-block`.
1031
+ * Provides access to the root DOM element
1118
1032
  */
1119
- horizontalDirection?: boolean;
1033
+ scrollerRef?: (ref: HTMLElement | null | Window) => any;
1034
+ /**
1035
+ * Use to display placeholders if the user scrolls fast through the list.
1036
+ *
1037
+ * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
1038
+ */
1039
+ scrollSeekConfiguration?: false | ScrollSeekConfiguration;
1120
1040
  /**
1121
1041
  * When set, the resize observer used to measure the items will not use `requestAnimationFrame` to report the size changes.
1122
1042
  * Setting this to true will improve performance and reduce flickering, but will cause benign errors to be reported in the console if the size of the items changes while they are being measured.
1123
1043
  * See https://github.com/petyosi/react-virtuoso/issues/1049 for more information.
1124
1044
  */
1125
1045
  skipAnimationFrameInResizeObserver?: boolean;
1046
+ /**
1047
+ * Called when the user scrolls to the start of the list.
1048
+ */
1049
+ startReached?: (index: number) => void;
1050
+ /**
1051
+ * Set the amount of items to remain fixed at the top of the list.
1052
+ *
1053
+ * For a header that scrolls away when scrolling, check the `components.Header` property.
1054
+ */
1055
+ topItemCount?: number;
1056
+ /**
1057
+ * The total amount of items to be rendered.
1058
+ */
1059
+ totalCount?: number;
1060
+ /**
1061
+ * Called when the total list height is changed due to new items or viewport resize.
1062
+ */
1063
+ totalListHeightChanged?: (height: number) => void;
1064
+ /**
1065
+ * Uses the document scroller rather than wrapping the list in its own.
1066
+ */
1067
+ useWindowScroll?: boolean;
1126
1068
  }
1127
1069
 
1128
1070
  export declare interface WindowViewportInfo {
@@ -1132,3 +1074,7 @@ export declare interface WindowViewportInfo {
1132
1074
  }
1133
1075
 
1134
1076
  export { }
1077
+
1078
+ declare namespace _default {
1079
+ let stories: string[];
1080
+ }