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/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
- export declare type ComputeItemKey<D, C> = (index: number, item: D, context: C) => default_2.Key;
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
- export declare interface ContextProp<C> {
78
- context: C;
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
- export declare type GridComputeItemKey<D, C> = (index: number, item: D, context: C) => default_2.Key;
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
- export declare interface GridItem<D> {
155
- data?: D;
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
- export declare type GridItemContent<D, C> = (index: number, data: D, context: C) => default_2.ReactNode;
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 Components.Item custom component
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 Components.List custom component
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
- export declare type GroupContent<C> = (index: number, context: C) => default_2.ReactNode;
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
- export declare interface GroupedTableVirtuosoProps<D, C> extends Omit<TableVirtuosoProps<D, C>, 'itemContent' | 'totalCount'> {
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<C>;
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<D, C>;
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
- export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'itemContent' | 'totalCount'> {
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<C>;
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<D, C>;
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
- export declare interface GroupItem<D> extends Item<D> {
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
- export declare type GroupItemContent<D, C> = (index: number, groupIndex: number, data: D, context: C) => default_2.ReactNode;
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
- export declare interface Item<D> {
307
- data?: D;
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
- export declare type ItemContent<D, C> = (index: number, data: D, context: C) => default_2.ReactNode;
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
- export declare type ItemProps<D> = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & {
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: D;
709
+ item: Data;
321
710
  };
322
711
 
323
- export declare type ListItem<D> = GroupItem<D> | RecordItem<D>;
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
- export declare interface RecordItem<D> extends Item<D> {
362
- data?: D;
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
- * called during scrolling in scroll seek mode - use to display a hint where the list is.
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
- /** Calculates the height of `el`, which will be the `Item` element in the DOM. */
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 Components.TableBody custom component
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
- export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'components' | 'headerFooterTag'> {
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<D, C>;
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<D, C>;
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 D[];
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<D, C>;
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<D>[]) => void;
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
- export declare interface VirtuosoGridProps<D, C = unknown> extends GridRootProps {
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<C>;
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<D, C>;
1477
+ computeItemKey?: GridComputeItemKey<Data, Context>;
770
1478
  /**
771
1479
  * Additional context available in the custom components and content callbacks
772
1480
  */
773
- context?: C;
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 D[];
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<D, C>;
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
- export declare interface VirtuosoProps<D, C> extends ListRootProps {
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<D, C>;
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<D, C>;
1705
+ computeItemKey?: ComputeItemKey<Data, Context>;
944
1706
  /**
945
1707
  * Additional context available in the custom components and content callbacks
946
1708
  */
947
- context?: C;
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 D[];
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: C;
1795
+ context: Context;
1034
1796
  totalCount: number;
1035
1797
  scrollingInProgress: boolean;
1036
- }) => ScrollIntoViewLocation | null | undefined | false | void;
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<D, C>;
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<D>[]) => void;
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