@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/virtualList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/virtualList
-*Captured:* 2026-01-07T12:11:47.861Z
+*Captured:* 2026-02-03T14:04:54.271Z
 
 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
-Sed ac in vel et in ac
+Consectetur primis adipiscing ac pharetra
 
 Item 2
-Velit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,
+Fusce Ut sagittis ac sit ut in, efficitur finibus pretium Vivamus pretium amet, amet, orci,
 
 Item 3
-Ac
-Lorem orci, nec primis lorem
+Ac Sed Mauris amet, molestie sem.
 
 Item 4
-Efficitur massa, iaculis. ligula nunc
+Consectetur tortor efficitur rutrum vitae in vel efficitur sem. scelerisque efficitur Fusce velit.
 
 Item 5
-Ac nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc
+Ut ac Integer rutrum nunc sem. efficitur ante Duis finibus ac ut purus
 
 Item 6
-Pretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper
+Elit. ante felis. finibus in
 
 Item 7
-Integer dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed
+Metus rutrum ante ac consectetur aliquam
 
 Item 8
-Bibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,
+Malesuada ac Vivamus purus massa, efficitur Vivamus hendrerit
 
 Item 9
-Et massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat
+Nunc libero
+Lorem in elementum
 
 Item 10
-Ut ligula
-Lorem lorem tortor primis libero
+Fringilla massa, quis, sit orci scelerisque ante elit. ut fringilla faucibus. Vivamus
 
 #### Summary
 
 Virtual list with 100 itemsItem 1
-Sed ac in vel et in ac
+Consectetur primis adipiscing ac pharetra
 
 Item 2
-Velit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,
+Fusce Ut sagittis ac sit ut in, efficitur finibus pretium Vivamus pretium amet, amet, orci,
 
 Item 3
-Ac
-Lorem orci, nec primis lorem
+Ac Sed Mauris amet, molestie sem.
 
 Item 4
-Efficitur massa, iaculis. ligula nunc
+Consectetur tortor efficitur rutrum vitae in vel efficitur sem. scelerisque efficitur Fusce velit.
 
 Item 5
-Ac nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc
+Ut ac Integer rutrum nunc sem. efficitur ante Duis finibus ac ut purus
 
 Item 6
-Pretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper
+Elit. ante felis. finibus in
 
 Item 7
-Integer dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed
+Metus rutrum ante ac consectetur aliquam
 
 Item 8
-Bibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,
+Malesuada ac Vivamus purus massa, efficitur Vivamus hendrerit
 
 Item 9
-Et massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat
+Nunc libero
+Lorem in elementum
 
 Item 10
-Ut ligula
-Lorem lorem tortor primis libero
+Fringilla massa, quis, sit orci scelerisque ante elit. ut fringilla faucibus. Vivamus
 
 #### React (tsx)
 
@@ -130,63 +128,62 @@ export default () => {
                 <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">Sed ac in vel et in ac</div>
+                        <div class="word-break" data-test-ignore="text">Consectetur primis adipiscing ac pharetra</div>
                     </div>
                 </div>
                 <div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(70px); 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">Velit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,</div>
+                        <div class="word-break" data-test-ignore="text">Fusce Ut sagittis ac sit ut in, efficitur finibus pretium Vivamus pretium amet, amet, orci,</div>
                     </div>
                 </div>
                 <div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(140px); 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">Ac
-                            Lorem orci, nec primis lorem</div>
+                        <div class="word-break" data-test-ignore="text">Ac Sed Mauris amet, molestie sem.</div>
                     </div>
                 </div>
                 <div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(210px); 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">Efficitur massa, iaculis. ligula nunc</div>
+                        <div class="word-break" data-test-ignore="text">Consectetur tortor efficitur rutrum vitae in vel efficitur sem. scelerisque efficitur Fusce velit.</div>
                     </div>
                 </div>
                 <div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(280px); 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">Ac nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc</div>
+                        <div class="word-break" data-test-ignore="text">Ut ac Integer rutrum nunc sem. efficitur ante Duis finibus ac ut purus</div>
                     </div>
                 </div>
                 <div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(350px); 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">Pretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper</div>
+                        <div class="word-break" data-test-ignore="text">Elit. ante felis. finibus in</div>
                     </div>
                 </div>
                 <div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(420px); 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">Integer dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed</div>
+                        <div class="word-break" data-test-ignore="text">Metus rutrum ante ac consectetur aliquam</div>
                     </div>
                 </div>
                 <div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(490px); 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">Bibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,</div>
+                        <div class="word-break" data-test-ignore="text">Malesuada ac Vivamus purus massa, efficitur Vivamus hendrerit</div>
                     </div>
                 </div>
                 <div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(560px); 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">Et massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat</div>
+                        <div class="word-break" data-test-ignore="text">Nunc libero
+                            Lorem in elementum</div>
                     </div>
                 </div>
                 <div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(630px); 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">Ut ligula
-                            Lorem lorem tortor primis libero</div>
+                        <div class="word-break" data-test-ignore="text">Fringilla massa, quis, sit orci scelerisque ante elit. ut fringilla faucibus. Vivamus</div>
                     </div>
                 </div>
             </div>
@@ -206,73 +203,75 @@ export default () => {
 | 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. |
+| className | string | — | Additional classNames for the outer list container |
 
 ### Example: Example 2
 
 Virtual list with 5000 items
 Vehicle 1
-Vel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac
+Fringilla semper. faucibus. lorem ac Ut condimentum semper.
 
 Vehicle 2
-Fringilla Fusce eget pharetra Vivamus
+Finibus aliquam in Vivamus consectetur sit ante
 
 Vehicle 3
-In felis. dui metus malesuada fames
+Primis orci purus elementum libero tortor sit
 
 Vehicle 4
-Aliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.
+Sed aliquam semper ipsum orci et metus Mauris ligula Ut consectetur nec elementum
 
 Vehicle 5
-Ante Sed ligula dolor molestie
+Efficitur Integer malesuada adipiscing vel malesuada elit. pharetra elit. fringilla pretium orci, elit.
 
 Vehicle 6
-Volutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante
+Orci, Fusce et condimentum scelerisque dolor metus fringilla consectetur consectetur primis nunc
 
 Vehicle 7
-Duis et Fusce vitae elit. est sit ac
+Felis. ipsum condimentum efficitur tortor iaculis. amet, hendrerit dolor dolor massa molestie ut ac
+Lorem
 
 Vehicle 8
-Ut sagittis elementum adipiscing iaculis. iaculis.
+Fringilla ac ipsum Mauris ac ac et semper. semper Fusce ut
 
 Vehicle 9
-Libero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante
+Scelerisque ante orci, in nec elementum rutrum adipiscing hendrerit molestie in, fames orci,
 
 Vehicle 10
-Duis viverra massa, scelerisque Vivamus in elit. tortor in, et Vivamus
+Nunc nec bibendum, velit. Mauris
 
 #### Summary
 
 Virtual list with 5000 items
 Vehicle 1
-Vel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac
+Fringilla semper. faucibus. lorem ac Ut condimentum semper.
 
 Vehicle 2
-Fringilla Fusce eget pharetra Vivamus
+Finibus aliquam in Vivamus consectetur sit ante
 
 Vehicle 3
-In felis. dui metus malesuada fames
+Primis orci purus elementum libero tortor sit
 
 Vehicle 4
-Aliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.
+Sed aliquam semper ipsum orci et metus Mauris ligula Ut consectetur nec elementum
 
 Vehicle 5
-Ante Sed ligula dolor molestie
+Efficitur Integer malesuada adipiscing vel malesuada elit. pharetra elit. fringilla pretium orci, elit.
 
 Vehicle 6
-Volutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante
+Orci, Fusce et condimentum scelerisque dolor metus fringilla consectetur consectetur primis nunc
 
 Vehicle 7
-Duis et Fusce vitae elit. est sit ac
+Felis. ipsum condimentum efficitur tortor iaculis. amet, hendrerit dolor dolor massa molestie ut ac
+Lorem
 
 Vehicle 8
-Ut sagittis elementum adipiscing iaculis. iaculis.
+Fringilla ac ipsum Mauris ac ac et semper. semper Fusce ut
 
 Vehicle 9
-Libero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante
+Scelerisque ante orci, in nec elementum rutrum adipiscing hendrerit molestie in, fames orci,
 
 Vehicle 10
-Duis viverra massa, scelerisque Vivamus in elit. tortor in, et Vivamus
+Nunc nec bibendum, velit. Mauris
 
 #### React (tsx)
 
@@ -342,7 +341,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: 370000px; position: relative; overflow: visible;">
+        <div class="VirtualList overflow-y-auto border rounded" style="height: 390000px; 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;">
@@ -353,7 +352,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 1</div>
-                                <div class="word-break" data-test-ignore="text">Vel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac</div>
+                                <div class="word-break" data-test-ignore="text">Fringilla semper. faucibus. lorem ac Ut condimentum semper.</div>
                             </div>
                         </div>
                     </div>
@@ -365,7 +364,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 2</div>
-                                <div class="word-break" data-test-ignore="text">Fringilla Fusce eget pharetra Vivamus</div>
+                                <div class="word-break" data-test-ignore="text">Finibus aliquam in Vivamus consectetur sit ante</div>
                             </div>
                         </div>
                     </div>
@@ -377,7 +376,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 3</div>
-                                <div class="word-break" data-test-ignore="text">In felis. dui metus malesuada fames</div>
+                                <div class="word-break" data-test-ignore="text">Primis orci purus elementum libero tortor sit</div>
                             </div>
                         </div>
                     </div>
@@ -389,11 +388,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 4</div>
-                                <div class="word-break" data-test-ignore="text">Aliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.</div>
+                                <div class="word-break" data-test-ignore="text">Sed aliquam semper ipsum orci et metus Mauris ligula Ut consectetur nec elementum</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="4" style="position: absolute; transform: translateY(299px); width: 100%; will-change: transform;">
+                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="4" style="position: absolute; transform: translateY(279px); 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 ">
@@ -401,7 +400,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 5</div>
-                                <div class="word-break" data-test-ignore="text">Ante Sed ligula dolor molestie</div>
+                                <div class="word-break" data-test-ignore="text">Efficitur Integer malesuada adipiscing vel malesuada elit. pharetra elit. fringilla pretium orci, elit.</div>
                             </div>
                         </div>
                     </div>
@@ -413,11 +412,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 6</div>
-                                <div class="word-break" data-test-ignore="text">Volutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante</div>
+                                <div class="word-break" data-test-ignore="text">Orci, Fusce et condimentum scelerisque dolor metus fringilla consectetur consectetur primis nunc</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="6" style="position: absolute; transform: translateY(439px); width: 100%; will-change: transform;">
+                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="6" style="position: absolute; transform: translateY(459px); 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 ">
@@ -425,11 +424,12 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 7</div>
-                                <div class="word-break" data-test-ignore="text">Duis et Fusce vitae elit. est sit ac</div>
+                                <div class="word-break" data-test-ignore="text">Felis. ipsum condimentum efficitur tortor iaculis. amet, hendrerit dolor dolor massa molestie ut ac
+                                    Lorem</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="7" style="position: absolute; transform: translateY(509px); width: 100%; will-change: transform;">
+                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="7" style="position: absolute; transform: translateY(549px); 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 ">
@@ -437,11 +437,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 8</div>
-                                <div class="word-break" data-test-ignore="text">Ut sagittis elementum adipiscing iaculis. iaculis.</div>
+                                <div class="word-break" data-test-ignore="text">Fringilla ac ipsum Mauris ac ac et semper. semper Fusce ut</div>
                             </div>
                         </div>
                     </div>
-                    <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="VirtualListItemWrapper list-group-item padding-y-15" data-index="8" style="position: absolute; transform: translateY(619px); 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 ">
@@ -449,11 +449,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 9</div>
-                                <div class="word-break" data-test-ignore="text">Libero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante</div>
+                                <div class="word-break" data-test-ignore="text">Scelerisque ante orci, in nec elementum rutrum adipiscing hendrerit molestie in, fames orci,</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(709px); 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 ">
@@ -461,7 +461,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 10</div>
-                                <div class="word-break" data-test-ignore="text">Duis viverra massa, scelerisque Vivamus in elit. tortor in, et Vivamus</div>
+                                <div class="word-break" data-test-ignore="text">Nunc nec bibendum, velit. Mauris</div>
                             </div>
                         </div>
                     </div>
@@ -483,4 +483,4 @@ export default () => {
 | 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. |
+| className | string | — | Additional classNames for the outer list container |