index.d.ts 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947
  1. import { ComponentPropsWithRef } from 'react';
  2. import { ComponentType } from 'react';
  3. import { Key } from 'react';
  4. import { default as React_2 } from 'react';
  5. import * as React_3 from 'react';
  6. import { ReactElement } from 'react';
  7. import { ReactNode } from 'react';
  8. import { Ref } from 'react';
  9. /**
  10. * Customize the Virtuoso rendering by passing a set of custom components.
  11. */
  12. export declare interface Components<Context = unknown> {
  13. /**
  14. * Set to render a component at the top of the list.
  15. *
  16. * The header remains above the top items and does not remain sticky.
  17. */
  18. Header?: ComponentType<{
  19. context?: Context;
  20. }>;
  21. /**
  22. * Set to render a component at the bottom of the list.
  23. */
  24. Footer?: ComponentType<{
  25. context?: Context;
  26. }>;
  27. /**
  28. * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
  29. */
  30. Item?: ComponentType<ItemProps & {
  31. context?: Context;
  32. }>;
  33. /**
  34. * Set to customize the group item wrapping element. Use only if you would like to render list from elements different than a `div`.
  35. */
  36. Group?: ComponentType<GroupProps & {
  37. context?: Context;
  38. }>;
  39. /**
  40. * Set to customize the top list item wrapping element. Use if you would like to render list from elements different than a `div`
  41. * or you want to set a custom z-index for the sticky position.
  42. */
  43. TopItemList?: ComponentType<TopItemListProps & {
  44. context?: Context;
  45. }>;
  46. /**
  47. * Set to customize the outermost scrollable element. This should not be necessary in general,
  48. * as the component passes its HTML attribute props to it.
  49. */
  50. Scroller?: ComponentType<ScrollerProps & {
  51. context?: Context;
  52. }>;
  53. /**
  54. * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
  55. */
  56. List?: ComponentType<ListProps & {
  57. context?: Context;
  58. }>;
  59. /**
  60. * Set to render a custom UI when the list is empty.
  61. */
  62. EmptyPlaceholder?: ComponentType<{
  63. context?: Context;
  64. }>;
  65. /**
  66. * Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
  67. */
  68. ScrollSeekPlaceholder?: ComponentType<ScrollSeekPlaceholderProps & {
  69. context?: Context;
  70. }>;
  71. }
  72. export declare interface ComputeItemKey<D, C> {
  73. (index: number, item: D, context: C): Key;
  74. }
  75. /**
  76. * Passed to the Components.FillerRow custom component
  77. */
  78. export declare interface FillerRowProps {
  79. height: number;
  80. }
  81. export declare type FixedFooterContent = (() => React_2.ReactNode) | null;
  82. export declare type FixedHeaderContent = (() => React_2.ReactNode) | null;
  83. export declare interface FlatIndexLocationWithAlign extends LocationOptions {
  84. /**
  85. * The index of the item to scroll to.
  86. */
  87. index: number | 'LAST';
  88. }
  89. export declare interface FlatScrollIntoViewLocation extends ScrollIntoViewLocationOptions {
  90. index: number;
  91. }
  92. export declare type FollowOutput = FollowOutputCallback | FollowOutputScalarType;
  93. export declare type FollowOutputCallback = (isAtBottom: boolean) => FollowOutputScalarType;
  94. export declare type FollowOutputScalarType = boolean | 'smooth' | 'auto';
  95. export declare interface GridComponents<Context = any> {
  96. /**
  97. * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
  98. */
  99. Item?: ComponentType<GridItem & {
  100. context?: Context;
  101. }>;
  102. /**
  103. * Set to customize the outermost scrollable element. This should not be necessary in general,
  104. * as the component passes its HTML attribute props to it.
  105. */
  106. Scroller?: ComponentType<ScrollerProps & {
  107. context?: Context;
  108. }>;
  109. /**
  110. * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
  111. */
  112. List?: ComponentType<GridListProps & {
  113. context?: Context;
  114. }>;
  115. /**
  116. * Set to render an item placeholder when the user scrolls fast.
  117. * See the `scrollSeekConfiguration` property for more details.
  118. */
  119. ScrollSeekPlaceholder?: ComponentType<GridScrollSeekPlaceholderProps & {
  120. context?: Context;
  121. }>;
  122. }
  123. export declare interface GridComputeItemKey {
  124. (index: number): Key;
  125. }
  126. export declare interface GridItem {
  127. 'data-index': number;
  128. className?: string;
  129. }
  130. export declare interface GridItemContent<C> {
  131. (index: number, context: C): ReactNode;
  132. }
  133. /**
  134. * Passed to the Components.List custom component
  135. */
  136. export declare type GridListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref' | 'className'>;
  137. export declare type GridRootProps = Omit<React_2.HTMLProps<'div'>, 'ref' | 'data'>;
  138. /**
  139. * Passed to the GridComponents.ScrollSeekPlaceholder custom component
  140. */
  141. export declare interface GridScrollSeekPlaceholderProps {
  142. index: number;
  143. height: number;
  144. width: number;
  145. }
  146. export declare interface GroupContent {
  147. (index: number): ReactNode;
  148. }
  149. export declare interface GroupedScrollIntoViewLocation extends ScrollIntoViewLocationOptions {
  150. groupIndex: number;
  151. }
  152. export declare const GroupedVirtuoso: <ItemData = any, Context = any>(props: GroupedVirtuosoProps<ItemData, Context> & {
  153. ref?: Ref<GroupedVirtuosoHandle> | undefined;
  154. }) => ReactElement;
  155. export declare interface GroupedVirtuosoHandle {
  156. scrollToIndex(location: number | IndexLocationWithAlign): void;
  157. scrollIntoView(location: number | ScrollIntoViewLocation): void;
  158. scrollTo(location: ScrollToOptions): void;
  159. scrollBy(location: ScrollToOptions): void;
  160. autoscrollToBottom(): void;
  161. }
  162. export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'totalCount' | 'itemContent'> {
  163. /**
  164. * Specifies the amount of items in each group (and, actually, how many groups are there).
  165. * For example, passing [20, 30] will display 2 groups with 20 and 30 items each.
  166. */
  167. groupCounts?: number[];
  168. /**
  169. * Specifies how each each group header gets rendered. The callback receives the zero-based index of the group.
  170. */
  171. groupContent?: GroupContent;
  172. /**
  173. * Specifies how each each item gets rendered.
  174. */
  175. itemContent?: GroupItemContent<D, C>;
  176. }
  177. export declare interface GroupIndexLocationWithAlign extends LocationOptions {
  178. /**
  179. * The group index of the item to scroll to.
  180. */
  181. groupIndex: number;
  182. }
  183. export declare interface GroupItem<D> extends Item<D> {
  184. type: 'group';
  185. originalIndex?: number;
  186. }
  187. export declare interface GroupItemContent<D, C> {
  188. (index: number, groupIndex: number, data: D, context: C): ReactNode;
  189. }
  190. export declare type GroupProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children'> & {
  191. 'data-index': number;
  192. 'data-item-index': number;
  193. 'data-known-size': number;
  194. };
  195. export declare type IndexLocationWithAlign = FlatIndexLocationWithAlign | GroupIndexLocationWithAlign;
  196. export declare interface Item<D> {
  197. index: number;
  198. offset: number;
  199. size: number;
  200. data?: D;
  201. }
  202. export declare interface ItemContent<D, C> {
  203. (index: number, data: D, context: C): ReactNode;
  204. }
  205. export declare type ItemProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children'> & {
  206. 'data-index': number;
  207. 'data-item-index': number;
  208. 'data-item-group-index'?: number;
  209. 'data-known-size': number;
  210. };
  211. export declare type ListItem<D> = RecordItem<D> | GroupItem<D>;
  212. /**
  213. * Passed to the Components.List custom component
  214. */
  215. export declare type ListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref'> & {
  216. 'data-test-id': string;
  217. };
  218. export declare interface ListRange {
  219. startIndex: number;
  220. endIndex: number;
  221. }
  222. export declare type ListRootProps = Omit<React_2.HTMLProps<'div'>, 'ref' | 'data'>;
  223. export declare interface LocationOptions {
  224. /**
  225. * How to position the item in the viewport.
  226. */
  227. align?: 'start' | 'center' | 'end';
  228. /**
  229. * Set 'smooth' to have an animated transition to the specified location.
  230. */
  231. behavior?: 'smooth' | 'auto';
  232. /**
  233. * The offset to scroll.
  234. */
  235. offset?: number;
  236. }
  237. export declare enum LogLevel {
  238. DEBUG = 0,
  239. INFO = 1,
  240. WARN = 2,
  241. ERROR = 3
  242. }
  243. export declare interface RecordItem<D> extends Item<D> {
  244. type?: undefined;
  245. groupIndex?: number;
  246. originalIndex?: number;
  247. data?: D;
  248. }
  249. export declare interface ScrollContainerState {
  250. scrollHeight: number;
  251. scrollTop: number;
  252. viewportHeight: number;
  253. }
  254. /**
  255. * Passed to the Components.Scroller custom component
  256. */
  257. export declare type ScrollerProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'tabIndex' | 'ref'> & {
  258. 'data-test-id'?: string;
  259. 'data-virtuoso-scroller'?: boolean;
  260. };
  261. export declare type ScrollIntoViewLocation = FlatScrollIntoViewLocation | GroupedScrollIntoViewLocation;
  262. export declare interface ScrollIntoViewLocationOptions {
  263. align?: 'start' | 'center' | 'end';
  264. behavior?: 'auto' | 'smooth';
  265. done?: () => void;
  266. }
  267. export declare interface ScrollSeekConfiguration {
  268. /**
  269. * Callback to determine if the list should enter "scroll seek" mode.
  270. */
  271. enter: ScrollSeekToggle;
  272. /**
  273. * called during scrolling in scroll seek mode - use to display a hint where the list is.
  274. */
  275. change?: (velocity: number, range: ListRange) => void;
  276. /**
  277. * Callback to determine if the list should enter "scroll seek" mode.
  278. */
  279. exit: ScrollSeekToggle;
  280. }
  281. /**
  282. * Passed to the Components.ScrollSeekPlaceholder custom component
  283. */
  284. export declare interface ScrollSeekPlaceholderProps {
  285. index: number;
  286. height: number;
  287. groupIndex?: number;
  288. type: 'group' | 'item';
  289. }
  290. export declare interface ScrollSeekToggle {
  291. (velocity: number, range: ListRange): boolean;
  292. }
  293. /** Calculates the height of `el`, which will be the `Item` element in the DOM. */
  294. export declare type SizeFunction = (el: HTMLElement, field: 'offsetHeight' | 'offsetWidth') => number;
  295. /**
  296. * Passed to the Components.TableBody custom component
  297. */
  298. export declare type TableBodyProps = Pick<ComponentPropsWithRef<'tbody'>, 'style' | 'children' | 'ref' | 'className'> & {
  299. 'data-test-id': string;
  300. };
  301. /**
  302. * Customize the TableVirtuoso rendering by passing a set of custom components.
  303. */
  304. export declare interface TableComponents<Context = unknown> {
  305. /**
  306. * Set to customize the wrapping `table` element.
  307. *
  308. */
  309. Table?: ComponentType<TableProps & {
  310. context?: Context;
  311. }>;
  312. /**
  313. * Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderHeight]] to set the contents
  314. *
  315. */
  316. TableHead?: ComponentType<Pick<ComponentPropsWithRef<'thead'>, 'style' | 'ref'> & {
  317. context?: Context;
  318. }>;
  319. /**
  320. * Set to render a fixed footer at the bottom of the table (`tfoot`). use [[fixedFooterContent]] to set the contents
  321. */
  322. TableFoot?: ComponentType<Pick<ComponentPropsWithRef<'tfoot'>, 'style' | 'ref'> & {
  323. context?: Context;
  324. }>;
  325. /**
  326. * Set to customize the item wrapping element. Default is `tr`.
  327. */
  328. TableRow?: ComponentType<ItemProps & {
  329. context?: Context;
  330. }>;
  331. /**
  332. * Set to customize the outermost scrollable element. This should not be necessary in general,
  333. * as the component passes its HTML attribute props to it.
  334. */
  335. Scroller?: ComponentType<ScrollerProps & {
  336. context?: Context;
  337. }>;
  338. /**
  339. * Set to customize the items wrapper. Default is `tbody`.
  340. */
  341. TableBody?: ComponentType<TableBodyProps & {
  342. context?: Context;
  343. }>;
  344. /**
  345. * Set to render a custom UI when the list is empty.
  346. */
  347. EmptyPlaceholder?: ComponentType<{
  348. context?: Context;
  349. }>;
  350. /**
  351. * Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
  352. */
  353. ScrollSeekPlaceholder?: ComponentType<ScrollSeekPlaceholderProps & {
  354. context?: Context;
  355. }>;
  356. /**
  357. * Set to render an empty item placeholder.
  358. */
  359. FillerRow?: ComponentType<FillerRowProps & {
  360. context?: Context;
  361. }>;
  362. }
  363. export declare type TableProps = Pick<ComponentPropsWithRef<'table'>, 'style' | 'children'>;
  364. export declare type TableRootProps = Omit<React_2.HTMLProps<'table'>, 'ref' | 'data'>;
  365. export declare const TableVirtuoso: <ItemData = any, Context = any>(props: TableVirtuosoProps<ItemData, Context> & {
  366. ref?: Ref<TableVirtuosoHandle> | undefined;
  367. }) => ReactElement;
  368. export declare interface TableVirtuosoHandle {
  369. scrollIntoView(location: number | FlatScrollIntoViewLocation): void;
  370. scrollToIndex(location: number | FlatIndexLocationWithAlign): void;
  371. scrollTo(location: ScrollToOptions): void;
  372. scrollBy(location: ScrollToOptions): void;
  373. }
  374. export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'components' | 'headerFooterTag' | 'topItemCount'> {
  375. /**
  376. * Use the `components` property for advanced customization of the elements rendered by the table.
  377. */
  378. components?: TableComponents<C>;
  379. /**
  380. * Set the contents of the table header.
  381. */
  382. fixedHeaderContent?: FixedHeaderContent;
  383. /**
  384. * Set the contents of the table footer.
  385. */
  386. fixedFooterContent?: FixedFooterContent;
  387. /**
  388. * The total amount of items to be rendered.
  389. */
  390. totalCount?: number;
  391. /**
  392. * The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
  393. */
  394. data?: readonly D[];
  395. /**
  396. * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
  397. * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
  398. * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
  399. * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in `react-window`).
  400. */
  401. overscan?: number | {
  402. main: number;
  403. reverse: number;
  404. };
  405. /**
  406. * Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
  407. * The property causes the component to render more items than the necessary, but can help with slow loading content.
  408. * Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
  409. */
  410. increaseViewportBy?: number | {
  411. top: number;
  412. bottom: number;
  413. };
  414. /**
  415. * Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
  416. */
  417. initialTopMostItemIndex?: number;
  418. /**
  419. * Set this value to offset the initial location of the list.
  420. * Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
  421. * If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
  422. */
  423. initialScrollTop?: number;
  424. /**
  425. * Use for server-side rendering - if set, the list will render the specified amount of items
  426. * regardless of the container / item size.
  427. */
  428. initialItemCount?: number;
  429. /**
  430. * Set the callback to specify the contents of the item.
  431. */
  432. itemContent?: ItemContent<D, C>;
  433. /**
  434. * If specified, the component will use the function to generate the `key` property for each list item.
  435. */
  436. computeItemKey?: ComputeItemKey<D, C>;
  437. /**
  438. * By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
  439. *
  440. * If the first item turns out to be an outlier (very short or tall), the rest of the rendering will be slower,
  441. * as multiple passes of rendering should happen for the list to fill the viewport.
  442. *
  443. * Setting `defaultItemHeight` causes the component to skip the "probe" rendering and use the property
  444. * value as default height instead.
  445. */
  446. defaultItemHeight?: number;
  447. /**
  448. * Allows customizing the height/width calculation of `Item` elements.
  449. *
  450. * The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
  451. */
  452. itemSize?: SizeFunction;
  453. /**
  454. * Can be used to improve performance if the rendered items are of known size.
  455. * Setting it causes the component to skip item measurements.
  456. */
  457. fixedItemHeight?: number;
  458. /**
  459. * Use to display placeholders if the user scrolls fast through the list.
  460. *
  461. * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
  462. */
  463. scrollSeekConfiguration?: ScrollSeekConfiguration | false;
  464. /**
  465. * If set to `true`, the list automatically scrolls to bottom if the total count is changed.
  466. * Set to `"smooth"` for an animated scrolling.
  467. *
  468. * By default, `followOutput` scrolls down only if the list is already at the bottom.
  469. * To implement an arbitrary logic behind that, pass a function:
  470. *
  471. * ```tsx
  472. * <Virtuoso
  473. * followOutput={(isAtBottom: boolean) => {
  474. * if (expression) {
  475. * return 'smooth' // can be 'auto' or false to avoid scrolling
  476. * } else {
  477. * return false
  478. * }
  479. * }} />
  480. * ```
  481. */
  482. followOutput?: FollowOutput;
  483. /**
  484. * Use when implementing inverse infinite scrolling - decrease the value this property
  485. * in combination with `data` or `totalCount` to prepend items to the top of the list.
  486. *
  487. * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
  488. */
  489. firstItemIndex?: number;
  490. /**
  491. * Called when the list starts/stops scrolling.
  492. */
  493. isScrolling?: (isScrolling: boolean) => void;
  494. /**
  495. * Gets called when the user scrolls to the end of the list.
  496. * Receives the last item index as an argument. Can be used to implement endless scrolling.
  497. */
  498. endReached?: (index: number) => void;
  499. /**
  500. * Called when the user scrolls to the start of the list.
  501. */
  502. startReached?: (index: number) => void;
  503. /**
  504. * Called with the new set of items each time the list items are rendered due to scrolling.
  505. */
  506. rangeChanged?: (range: ListRange) => void;
  507. /**
  508. * Called with true / false when the list has reached the bottom / gets scrolled up.
  509. * Can be used to load newer items, like `tail -f`.
  510. */
  511. atBottomStateChange?: (atBottom: boolean) => void;
  512. /**
  513. * Called with `true` / `false` when the list has reached the top / gets scrolled down.
  514. */
  515. atTopStateChange?: (atTop: boolean) => void;
  516. /**
  517. * Called when the total list height is changed due to new items or viewport resize.
  518. */
  519. totalListHeightChanged?: (height: number) => void;
  520. /**
  521. * Called with the new set of items each time the list items are rendered due to scrolling.
  522. */
  523. itemsRendered?: (items: ListItem<D>[]) => void;
  524. /**
  525. * Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
  526. * Use `followOutput` property to keep the list aligned when new items are appended.
  527. */
  528. alignToBottom?: boolean;
  529. /**
  530. * Uses the document scroller rather than wrapping the list in its own.
  531. */
  532. useWindowScroll?: boolean;
  533. /**
  534. * Pass a reference to a scrollable parent element, so that the table won't wrap in its own.
  535. */
  536. customScrollParent?: HTMLElement;
  537. /**
  538. * Provides access to the root DOM element
  539. */
  540. scrollerRef?: (ref: HTMLElement | Window | null) => any;
  541. /**
  542. * 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.
  543. */
  544. atTopThreshold?: number;
  545. /**
  546. * 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.
  547. */
  548. atBottomThreshold?: number;
  549. /**
  550. * No longer necessary after 2.10.2. component should work out of the box.
  551. */
  552. react18ConcurrentRendering?: boolean;
  553. }
  554. export declare type TopItemListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children'>;
  555. export declare const Virtuoso: <ItemData = any, Context = any>(props: VirtuosoProps<ItemData, Context> & {
  556. ref?: Ref<VirtuosoHandle> | undefined;
  557. }) => ReactElement;
  558. export declare const VirtuosoGrid: <Context = any>(props: VirtuosoGridProps<Context> & {
  559. ref?: Ref<VirtuosoGridHandle> | undefined;
  560. }) => ReactElement;
  561. export declare interface VirtuosoGridHandle {
  562. scrollToIndex(location: number | IndexLocationWithAlign): void;
  563. scrollTo(location: ScrollToOptions): void;
  564. scrollBy(location: ScrollToOptions): void;
  565. }
  566. export declare interface VirtuosoGridProps<C = unknown> extends GridRootProps {
  567. /**
  568. * The total amount of items to be rendered.
  569. */
  570. totalCount: number;
  571. /**
  572. * Use for server-side rendering - if set, the list will render the specified amount of items
  573. * regardless of the container / item size.
  574. */
  575. initialItemCount?: number;
  576. /**
  577. * Set the callback to specify the contents of the item.
  578. */
  579. itemContent?: GridItemContent<C>;
  580. /**
  581. * Use the `components` property for advanced customization of the elements rendered by the list.
  582. */
  583. components?: GridComponents<C>;
  584. /**
  585. * Use the `components` property for advanced customization of the elements rendered by the list.
  586. */
  587. context?: C;
  588. /**
  589. * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
  590. * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
  591. * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
  592. */
  593. overscan?: number | {
  594. main: number;
  595. reverse: number;
  596. };
  597. /**
  598. * If specified, the component will use the function to generate the `key` property for each list item.
  599. */
  600. computeItemKey?: GridComputeItemKey;
  601. /**
  602. * Use to display placeholders if the user scrolls fast through the list.
  603. *
  604. * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
  605. */
  606. scrollSeekConfiguration?: ScrollSeekConfiguration | false;
  607. /**
  608. * Called when the list starts/stops scrolling.
  609. */
  610. isScrolling?: (isScrolling: boolean) => void;
  611. /**
  612. * Gets called when the user scrolls to the end of the list.
  613. * Receives the last item index as an argument. Can be used to implement endless scrolling.
  614. */
  615. endReached?: (index: number) => void;
  616. /**
  617. * Called when the user scrolls to the start of the list.
  618. */
  619. startReached?: (index: number) => void;
  620. /**
  621. * Called with the new set of items each time the list items are rendered due to scrolling.
  622. */
  623. rangeChanged?: (range: ListRange) => void;
  624. /**
  625. * Called with true / false when the list has reached the bottom / gets scrolled up.
  626. * Can be used to load newer items, like `tail -f`.
  627. */
  628. atBottomStateChange?: (atBottom: boolean) => void;
  629. /**
  630. * Called with `true` / `false` when the list has reached the top / gets scrolled down.
  631. */
  632. atTopStateChange?: (atTop: boolean) => void;
  633. /**
  634. * Provides access to the root DOM element
  635. */
  636. scrollerRef?: (ref: HTMLElement | null) => any;
  637. /**
  638. * Sets the className for the list DOM element
  639. */
  640. listClassName?: string;
  641. /**
  642. * Sets the grid items' className
  643. */
  644. itemClassName?: string;
  645. /**
  646. * Uses the document scroller rather than wrapping the grid in its own.
  647. */
  648. useWindowScroll?: boolean;
  649. /**
  650. * Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.
  651. */
  652. customScrollParent?: HTMLElement;
  653. }
  654. export declare interface VirtuosoHandle {
  655. /**
  656. * Scrolls the component to the specified item index. See {@link IndexLocationWithAlign} for more options.
  657. */
  658. scrollToIndex(location: number | FlatIndexLocationWithAlign): void;
  659. /**
  660. * Scrolls the item into view if necessary. See [the website example](http://virtuoso.dev/keyboard-navigation/) for an implementation.
  661. */
  662. scrollIntoView(location: FlatScrollIntoViewLocation): void;
  663. /**
  664. * Scrolls the component to the specified location. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
  665. */
  666. scrollTo(location: ScrollToOptions): void;
  667. /**
  668. * Scrolls the component with the specified amount. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
  669. */
  670. scrollBy(location: ScrollToOptions): void;
  671. /**
  672. * Use this with combination with follow output if you have images loading in the list. Listen to the image loading and call the method.
  673. */
  674. autoscrollToBottom(): void;
  675. }
  676. export declare const VirtuosoMockContext: React_3.Context<VirtuosoMockContextValue | undefined>;
  677. export declare interface VirtuosoMockContextValue {
  678. viewportHeight: number;
  679. itemHeight: number;
  680. }
  681. export declare interface VirtuosoProps<D, C> extends ListRootProps {
  682. /**
  683. * The total amount of items to be rendered.
  684. */
  685. totalCount?: number;
  686. /**
  687. * The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
  688. */
  689. data?: readonly D[];
  690. /**
  691. * Additional context available in the custom components and content callbacks
  692. */
  693. context?: C;
  694. /**
  695. * *The property accepts pixel values.*
  696. *
  697. * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
  698. * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
  699. * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
  700. * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
  701. *
  702. */
  703. overscan?: number | {
  704. main: number;
  705. reverse: number;
  706. };
  707. /**
  708. *
  709. * *The property accepts pixel values.*
  710. *
  711. * Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
  712. * The property causes the component to render more items than the necessary, but can help with slow loading content.
  713. * Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
  714. *
  715. */
  716. increaseViewportBy?: number | {
  717. top: number;
  718. bottom: number;
  719. };
  720. /**
  721. * Set the amount of items to remain fixed at the top of the list.
  722. *
  723. * For a header that scrolls away when scrolling, check the `components.Header` property.
  724. */
  725. topItemCount?: number;
  726. /**
  727. * Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
  728. * Pass in an object to achieve additional effects similar to `scrollToIndex`.
  729. */
  730. initialTopMostItemIndex?: number | IndexLocationWithAlign;
  731. /**
  732. * Set this value to offset the initial location of the list.
  733. * Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
  734. * If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
  735. */
  736. initialScrollTop?: number;
  737. /**
  738. * Use for server-side rendering - if set, the list will render the specified amount of items
  739. * regardless of the container / item size.
  740. */
  741. initialItemCount?: number;
  742. /**
  743. * Use the `components` property for advanced customization of the elements rendered by the list.
  744. */
  745. components?: Components<C>;
  746. /**
  747. * Set the callback to specify the contents of the item.
  748. */
  749. itemContent?: ItemContent<D, C>;
  750. /**
  751. * If specified, the component will use the function to generate the `key` property for each list item.
  752. */
  753. computeItemKey?: ComputeItemKey<D, C>;
  754. /**
  755. * By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
  756. *
  757. * If the first item turns out to be an outlier (very short or tall), the rest of the rendering will be slower,
  758. * as multiple passes of rendering should happen for the list to fill the viewport.
  759. *
  760. * Setting `defaultItemHeight` causes the component to skip the "probe" rendering and use the property
  761. * value as default height instead.
  762. */
  763. defaultItemHeight?: number;
  764. /**
  765. * Allows customizing the height/width calculation of `Item` elements.
  766. *
  767. * The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
  768. */
  769. itemSize?: SizeFunction;
  770. /**
  771. * Can be used to improve performance if the rendered items are of known size.
  772. * Setting it causes the component to skip item measurements.
  773. */
  774. fixedItemHeight?: number;
  775. /**
  776. * Use to display placeholders if the user scrolls fast through the list.
  777. *
  778. * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
  779. */
  780. scrollSeekConfiguration?: ScrollSeekConfiguration | false;
  781. /**
  782. * If set to `true`, the list automatically scrolls to bottom if the total count is changed.
  783. * Set to `"smooth"` for an animated scrolling.
  784. *
  785. * By default, `followOutput` scrolls down only if the list is already at the bottom.
  786. * To implement an arbitrary logic behind that, pass a function:
  787. *
  788. * ```tsx
  789. * <Virtuoso
  790. * followOutput={(isAtBottom: boolean) => {
  791. * if (expression) {
  792. * return 'smooth' // can be 'auto' or false to avoid scrolling
  793. * } else {
  794. * return false
  795. * }
  796. * }} />
  797. * ```
  798. */
  799. followOutput?: FollowOutput;
  800. /**
  801. * Set to customize the wrapper tag for the header and footer components (default is `div`).
  802. */
  803. headerFooterTag?: string;
  804. /**
  805. * Use when implementing inverse infinite scrolling - decrease the value this property
  806. * in combination with `data` or `totalCount` to prepend items to the top of the list.
  807. *
  808. * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
  809. */
  810. firstItemIndex?: number;
  811. /**
  812. * Called when the list starts/stops scrolling.
  813. */
  814. isScrolling?: (isScrolling: boolean) => void;
  815. /**
  816. * Gets called when the user scrolls to the end of the list.
  817. * Receives the last item index as an argument. Can be used to implement endless scrolling.
  818. */
  819. endReached?: (index: number) => void;
  820. /**
  821. * Called when the user scrolls to the start of the list.
  822. */
  823. startReached?: (index: number) => void;
  824. /**
  825. * Called with the new set of items each time the list items are rendered due to scrolling.
  826. */
  827. rangeChanged?: (range: ListRange) => void;
  828. /**
  829. * Called with true / false when the list has reached the bottom / gets scrolled up.
  830. * Can be used to load newer items, like `tail -f`.
  831. */
  832. atBottomStateChange?: (atBottom: boolean) => void;
  833. /**
  834. * Called with `true` / `false` when the list has reached the top / gets scrolled down.
  835. */
  836. atTopStateChange?: (atTop: boolean) => void;
  837. /**
  838. * Called when the total list height is changed due to new items or viewport resize.
  839. */
  840. totalListHeightChanged?: (height: number) => void;
  841. /**
  842. * Called with the new set of items each time the list items are rendered due to scrolling.
  843. */
  844. itemsRendered?: (items: ListItem<D>[]) => void;
  845. /**
  846. * Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
  847. * Use `followOutput` property to keep the list aligned when new items are appended.
  848. */
  849. alignToBottom?: boolean;
  850. /**
  851. * Uses the document scroller rather than wrapping the list in its own.
  852. */
  853. useWindowScroll?: boolean;
  854. /**
  855. * Pass a reference to a scrollable parent element, so that the list won't wrap in its own.
  856. */
  857. customScrollParent?: HTMLElement;
  858. /**
  859. * Provides access to the root DOM element
  860. */
  861. scrollerRef?: (ref: HTMLElement | Window | null) => any;
  862. /**
  863. * *The property accepts pixel values.*
  864. *
  865. * 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.
  866. */
  867. atTopThreshold?: number;
  868. /**
  869. * *The property accepts pixel values.*
  870. *
  871. * 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.
  872. */
  873. atBottomThreshold?: number;
  874. /**
  875. * No longer necessary after 2.10.2. component should work out of the box.
  876. */
  877. react18ConcurrentRendering?: boolean;
  878. }
  879. export declare interface WindowViewportInfo {
  880. offsetTop: number;
  881. visibleHeight: number;
  882. visibleWidth: number;
  883. }
  884. export { }