@rio-cloud/uikit-mcp 1.1.4 → 1.1.6

package/dist/docs/components/virtualList.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#components/virtualList
-*Captured:* 2026-01-14T09:07:38.387Z
+*Source:* https://uikit.developers.rio.cloud/#/components/virtualList
+*Captured:* 2026-02-23T13:42:19.279Z
 
 The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.
 
@@ -14,70 +14,68 @@ It allows a specified number of items outside the viewport for smoother scrollin
 ### Example: Example 1
 
 Virtual list with 100 itemsItem 1
-Aliquam in massa, Integer lorem neque.
+Libero iaculis. Duis ipsum libero Ut rutrum orci, sagittis volutpat posuere hendrerit pharetra Ut enim
 
 Item 2
-Nunc Duis consectetur purus primis sit metus Sed ipsum consectetur adipiscing vel
+Primis dolor vel enim condimentum et nunc Ut et massa eget libero
 
 Item 3
-Efficitur ac Sed felis. tincidunt. elementum bibendum, finibus ac pharetra sit scelerisque
+
+Lorem hendrerit orci, efficitur vitae eget in malesuada malesuada elit. malesuada vel vitae
 
 Item 4
-Elementum consectetur tortor dui volutpat
+Mauris sagittis in Vivamus ante
 
 Item 5
-Hendrerit ipsum ante
-Lorem massa neque. orci pretium est Ut faucibus. ac primis quis,
+Ligula aliquam aliquam Integer pretium sit efficitur viverra eget in in
 
 Item 6
-Semper. semper malesuada ligula Fusce in,
+Elementum lorem amet, efficitur Mauris libero ipsum ante amet, elit. iaculis.
 
 Item 7
-Enim iaculis. ac et pretium ante
+Duis sit Sed libero vitae semper.
 
 Item 8
-In,
-Lorem molestie ligula ante primis
+Interdum eget finibus viverra efficitur felis.
 
 Item 9
-Vivamus hendrerit fames Integer enim in tincidunt. ante Duis in ac ante ante ut Fusce
+In sagittis tincidunt. lorem fringilla
 
 Item 10
-Enim tortor finibus in, posuere dolor efficitur
+Ac eget elit. elementum in, ante ac in faucibus. massa
 
 #### Summary
 
 Virtual list with 100 itemsItem 1
-Aliquam in massa, Integer lorem neque.
+Libero iaculis. Duis ipsum libero Ut rutrum orci, sagittis volutpat posuere hendrerit pharetra Ut enim
 
 Item 2
-Nunc Duis consectetur purus primis sit metus Sed ipsum consectetur adipiscing vel
+Primis dolor vel enim condimentum et nunc Ut et massa eget libero
 
 Item 3
-Efficitur ac Sed felis. tincidunt. elementum bibendum, finibus ac pharetra sit scelerisque
+
+Lorem hendrerit orci, efficitur vitae eget in malesuada malesuada elit. malesuada vel vitae
 
 Item 4
-Elementum consectetur tortor dui volutpat
+Mauris sagittis in Vivamus ante
 
 Item 5
-Hendrerit ipsum ante
-Lorem massa neque. orci pretium est Ut faucibus. ac primis quis,
+Ligula aliquam aliquam Integer pretium sit efficitur viverra eget in in
 
 Item 6
-Semper. semper malesuada ligula Fusce in,
+Elementum lorem amet, efficitur Mauris libero ipsum ante amet, elit. iaculis.
 
 Item 7
-Enim iaculis. ac et pretium ante
+Duis sit Sed libero vitae semper.
 
 Item 8
-In,
-Lorem molestie ligula ante primis
+Interdum eget finibus viverra efficitur felis.
 
 Item 9
-Vivamus hendrerit fames Integer enim in tincidunt. ante Duis in ac ante ante ut Fusce
+In sagittis tincidunt. lorem fringilla
 
 Item 10
-Enim tortor finibus in, posuere dolor efficitur
+Ac eget elit. elementum in, ante ac in faucibus. massa
 
 #### React (tsx)
 
@@ -125,68 +123,67 @@ export default () => {
 <div class="max-width-600 padding-y-20">
     <label class="padding-left-10">Virtual list with 100 items</label>
     <div class="VirtualList overflow-y-auto max-height-400 padding-x-10" style="height: 100%; position: relative; overflow: auto;">
-        <div class="position-relative" style="height: 7000px;">
+        <div class="position-relative" style="height: 7200px;">
             <div class="VirtualListItemContainer ">
                 <div class="VirtualListItemWrapper " data-index="0" style="position: absolute; transform: translateY(0px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 1</div>
-                        <div class="word-break" data-test-ignore="text">Aliquam in massa, Integer lorem neque.</div>
+                        <div class="word-break" data-test-ignore="text">Libero iaculis. Duis ipsum libero Ut rutrum orci, sagittis volutpat posuere hendrerit pharetra Ut enim</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(70px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(90px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 2</div>
-                        <div class="word-break" data-test-ignore="text">Nunc Duis consectetur purus primis sit metus Sed ipsum consectetur adipiscing vel</div>
+                        <div class="word-break" data-test-ignore="text">Primis dolor vel enim condimentum et nunc Ut et massa eget libero</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(140px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(160px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 3</div>
-                        <div class="word-break" data-test-ignore="text">Efficitur ac Sed felis. tincidunt. elementum bibendum, finibus ac pharetra sit scelerisque</div>
+                        <div class="word-break" data-test-ignore="text">
+                            Lorem hendrerit orci, efficitur vitae eget in malesuada malesuada elit. malesuada vel vitae</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(210px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(230px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 4</div>
-                        <div class="word-break" data-test-ignore="text">Elementum consectetur tortor dui volutpat</div>
+                        <div class="word-break" data-test-ignore="text">Mauris sagittis in Vivamus ante</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(280px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(300px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 5</div>
-                        <div class="word-break" data-test-ignore="text">Hendrerit ipsum ante
-                            Lorem massa neque. orci pretium est Ut faucibus. ac primis quis,</div>
+                        <div class="word-break" data-test-ignore="text">Ligula aliquam aliquam Integer pretium sit efficitur viverra eget in in</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(350px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(370px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 6</div>
-                        <div class="word-break" data-test-ignore="text">Semper. semper malesuada ligula Fusce in,</div>
+                        <div class="word-break" data-test-ignore="text">Elementum lorem amet, efficitur Mauris libero ipsum ante amet, elit. iaculis.</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(420px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(440px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 7</div>
-                        <div class="word-break" data-test-ignore="text">Enim iaculis. ac et pretium ante</div>
+                        <div class="word-break" data-test-ignore="text">Duis sit Sed libero vitae semper.</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(490px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(510px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 8</div>
-                        <div class="word-break" data-test-ignore="text">In,
-                            Lorem molestie ligula ante primis</div>
+                        <div class="word-break" data-test-ignore="text">Interdum eget finibus viverra efficitur felis.</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(560px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(580px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 9</div>
-                        <div class="word-break" data-test-ignore="text">Vivamus hendrerit fames Integer enim in tincidunt. ante Duis in ac ante ante ut Fusce</div>
+                        <div class="word-break" data-test-ignore="text">In sagittis tincidunt. lorem fringilla</div>
                     </div>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(630px); width: 100%; will-change: transform;">
+                <div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(650px); width: 100%; will-change: transform;">
                     <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
                         <div class="text-medium" data-test-ignore="text">Item 10</div>
-                        <div class="word-break" data-test-ignore="text">Enim tortor finibus in, posuere dolor efficitur</div>
+                        <div class="word-break" data-test-ignore="text">Ac eget elit. elementum in, ante ac in faucibus. massa</div>
                     </div>
                 </div>
             </div>
@@ -195,71 +192,84 @@ export default () => {
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| items | T[] | — | The array of items to be rendered in the list. |
+| renderItem | (item: T, index: number) => React.ReactElement | — | A function that renders an item given its data and index. |
+| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |
+| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |
+| scrollContainerRef | React.RefObject<HTMLElement> | — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |
+| containerClassName | string | — | Additional classNames for the container of the list items. |
+| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |
+| className | string | — | Additional classNames for the outer list container |
+
 ### Example: Example 2
 
 Virtual list with 5000 items
 Vehicle 1
-Faucibus. fringilla massa vel ut neque. ante in ipsum metus consectetur Mauris Mauris efficitur
+In pharetra sagittis neque. orci, consectetur massa, Mauris et ac iaculis.
 
 Vehicle 2
-Tincidunt. ante ipsum aliquam eget hendrerit pharetra et ante Interdum
+Iaculis. ac quis, ac hendrerit finibus vitae orci est amet, massa,
 
 Vehicle 3
-Vivamus vel ipsum consectetur ut sit purus
+Massa, Integer ut elit. ante Integer ut vitae amet, ante condimentum amet, aliquam in lorem
 
 Vehicle 4
-Iaculis. ut fringilla adipiscing posuere ligula ac ligula
+Duis tortor sagittis fringilla molestie in ac scelerisque sem.
 
 Vehicle 5
-Fames dolor purus consectetur neque. Sed semper. sit eget in, orci,
+Iaculis. In ac semper nec lorem est consectetur Mauris hendrerit
 
 Vehicle 6
-Eget eget in efficitur fames vitae ante
+Dui eget Interdum Duis quis, tincidunt. massa, metus
 
 Vehicle 7
-Sagittis finibus Duis in, condimentum malesuada
+Fusce Vivamus in ante semper. viverra
 
 Vehicle 8
-Semper felis. consectetur libero nec tincidunt. Ut rutrum adipiscing tincidunt. molestie nunc sagittis finibus
+Vivamus bibendum, ac semper. in
 
 Vehicle 9
-Tortor ipsum eget orci, ipsum
+Ante molestie condimentum in neque.
 
 Vehicle 10
-Ut tincidunt. vel fames volutpat posuere est In pharetra consectetur consectetur sagittis Mauris
+Ut bibendum, ut elit. volutpat ante
 
 #### Summary
 
 Virtual list with 5000 items
 Vehicle 1
-Faucibus. fringilla massa vel ut neque. ante in ipsum metus consectetur Mauris Mauris efficitur
+In pharetra sagittis neque. orci, consectetur massa, Mauris et ac iaculis.
 
 Vehicle 2
-Tincidunt. ante ipsum aliquam eget hendrerit pharetra et ante Interdum
+Iaculis. ac quis, ac hendrerit finibus vitae orci est amet, massa,
 
 Vehicle 3
-Vivamus vel ipsum consectetur ut sit purus
+Massa, Integer ut elit. ante Integer ut vitae amet, ante condimentum amet, aliquam in lorem
 
 Vehicle 4
-Iaculis. ut fringilla adipiscing posuere ligula ac ligula
+Duis tortor sagittis fringilla molestie in ac scelerisque sem.
 
 Vehicle 5
-Fames dolor purus consectetur neque. Sed semper. sit eget in, orci,
+Iaculis. In ac semper nec lorem est consectetur Mauris hendrerit
 
 Vehicle 6
-Eget eget in efficitur fames vitae ante
+Dui eget Interdum Duis quis, tincidunt. massa, metus
 
 Vehicle 7
-Sagittis finibus Duis in, condimentum malesuada
+Fusce Vivamus in ante semper. viverra
 
 Vehicle 8
-Semper felis. consectetur libero nec tincidunt. Ut rutrum adipiscing tincidunt. molestie nunc sagittis finibus
+Vivamus bibendum, ac semper. in
 
 Vehicle 9
-Tortor ipsum eget orci, ipsum
+Ante molestie condimentum in neque.
 
 Vehicle 10
-Ut tincidunt. vel fames volutpat posuere est In pharetra consectetur consectetur sagittis Mauris
+Ut bibendum, ut elit. volutpat ante
 
 #### React (tsx)
 
@@ -329,7 +339,7 @@ export default () => {
 <div class="padding-20">
     <label>Virtual list with 5000 items</label>
     <div class="max-width-600 max-height-400 overflow-y-auto">
-        <div class="VirtualList overflow-y-auto border rounded" style="height: 380000px; position: relative; overflow: visible;">
+        <div class="VirtualList overflow-y-auto border rounded" style="height: 360000px; position: relative; overflow: visible;">
             <div class="position-relative" style="height: auto;">
                 <div class="VirtualListItemContainer list-group">
                     <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="0" style="position: absolute; transform: translateY(0px); width: 100%; will-change: transform;">
@@ -340,11 +350,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 1</div>
-                                <div class="word-break" data-test-ignore="text">Faucibus. fringilla massa vel ut neque. ante in ipsum metus consectetur Mauris Mauris efficitur</div>
+                                <div class="word-break" data-test-ignore="text">In pharetra sagittis neque. orci, consectetur massa, Mauris et ac iaculis.</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="1" style="position: absolute; transform: translateY(89px); width: 100%; will-change: transform;">
+                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="1" style="position: absolute; transform: translateY(69px); width: 100%; will-change: transform;">
                         <div class="display-flex gap-15 align-items-center">
                             <div class="Avatar bg-lightest" style="height: 40px;">
                                 <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -352,11 +362,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 2</div>
-                                <div class="word-break" data-test-ignore="text">Tincidunt. ante ipsum aliquam eget hendrerit pharetra et ante Interdum</div>
+                                <div class="word-break" data-test-ignore="text">Iaculis. ac quis, ac hendrerit finibus vitae orci est amet, massa,</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="2" style="position: absolute; transform: translateY(159px); width: 100%; will-change: transform;">
+                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="2" style="position: absolute; transform: translateY(139px); width: 100%; will-change: transform;">
                         <div class="display-flex gap-15 align-items-center">
                             <div class="Avatar bg-lightest" style="height: 40px;">
                                 <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -364,7 +374,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 3</div>
-                                <div class="word-break" data-test-ignore="text">Vivamus vel ipsum consectetur ut sit purus</div>
+                                <div class="word-break" data-test-ignore="text">Massa, Integer ut elit. ante Integer ut vitae amet, ante condimentum amet, aliquam in lorem</div>
                             </div>
                         </div>
                     </div>
@@ -376,7 +386,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 4</div>
-                                <div class="word-break" data-test-ignore="text">Iaculis. ut fringilla adipiscing posuere ligula ac ligula</div>
+                                <div class="word-break" data-test-ignore="text">Duis tortor sagittis fringilla molestie in ac scelerisque sem.</div>
                             </div>
                         </div>
                     </div>
@@ -388,7 +398,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 5</div>
-                                <div class="word-break" data-test-ignore="text">Fames dolor purus consectetur neque. Sed semper. sit eget in, orci,</div>
+                                <div class="word-break" data-test-ignore="text">Iaculis. In ac semper nec lorem est consectetur Mauris hendrerit</div>
                             </div>
                         </div>
                     </div>
@@ -400,7 +410,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 6</div>
-                                <div class="word-break" data-test-ignore="text">Eget eget in efficitur fames vitae ante</div>
+                                <div class="word-break" data-test-ignore="text">Dui eget Interdum Duis quis, tincidunt. massa, metus</div>
                             </div>
                         </div>
                     </div>
@@ -412,7 +422,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 7</div>
-                                <div class="word-break" data-test-ignore="text">Sagittis finibus Duis in, condimentum malesuada</div>
+                                <div class="word-break" data-test-ignore="text">Fusce Vivamus in ante semper. viverra</div>
                             </div>
                         </div>
                     </div>
@@ -424,11 +434,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 8</div>
-                                <div class="word-break" data-test-ignore="text">Semper felis. consectetur libero nec tincidunt. Ut rutrum adipiscing tincidunt. molestie nunc sagittis finibus</div>
+                                <div class="word-break" data-test-ignore="text">Vivamus bibendum, ac semper. in</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="8" style="position: absolute; transform: translateY(599px); width: 100%; will-change: transform;">
+                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="8" style="position: absolute; transform: translateY(579px); width: 100%; will-change: transform;">
                         <div class="display-flex gap-15 align-items-center">
                             <div class="Avatar bg-lightest" style="height: 40px;">
                                 <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -436,11 +446,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 9</div>
-                                <div class="word-break" data-test-ignore="text">Tortor ipsum eget orci, ipsum</div>
+                                <div class="word-break" data-test-ignore="text">Ante molestie condimentum in neque.</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="9" style="position: absolute; transform: translateY(669px); width: 100%; will-change: transform;">
+                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="9" style="position: absolute; transform: translateY(649px); width: 100%; will-change: transform;">
                         <div class="display-flex gap-15 align-items-center">
                             <div class="Avatar bg-lightest" style="height: 40px;">
                                 <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -448,7 +458,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 10</div>
-                                <div class="word-break" data-test-ignore="text">Ut tincidunt. vel fames volutpat posuere est In pharetra consectetur consectetur sagittis Mauris</div>
+                                <div class="word-break" data-test-ignore="text">Ut bibendum, ut elit. volutpat ante</div>
                             </div>
                         </div>
                     </div>
@@ -457,4 +467,17 @@ export default () => {
         </div>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| items | T[] | — | The array of items to be rendered in the list. |
+| renderItem | (item: T, index: number) => React.ReactElement | — | A function that renders an item given its data and index. |
+| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |
+| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |
+| scrollContainerRef | React.RefObject<HTMLElement> | — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |
+| containerClassName | string | — | Additional classNames for the container of the list items. |
+| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |
+| className | string | — | Additional classNames for the outer list container |