@rio-cloud/uikit-mcp 1.1.12 → 1.1.13

package/dist/docs/components/virtualList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/virtualList
-*Captured:* 2026-05-06T12:14:10.293Z
+*Captured:* 2026-06-11T10:01:30.551Z
 
 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,35 +14,38 @@ It allows a specified number of items outside the viewport for smoother scrollin
 ### Example: Example 1
 
 Virtual list with 100 items Item 1
-Sem. et consectetur ligula condimentum tincidunt.
+Ut vitae massa dolor ut
 
 Item 2
-Massa ante in orci in efficitur et pretium
+Quis, quis, efficitur ante Integer in Interdum ut In elit.
 
 Item 3
-Eget fringilla pretium tincidunt. eget semper. ac ipsum primis et ipsum semper.
+Consectetur sit Interdum tincidunt. Duis eget Duis ac sagittis et posuere
+Lorem in finibus Ut
 
 Item 4
-Duis ac elementum malesuada vel faucibus. et Fusce
+Iaculis. vitae eget scelerisque orci libero iaculis. elit. enim felis. malesuada elit. purus et
 
 Item 5
-Volutpat dui vel in aliquam
+Massa ligula efficitur elit. condimentum quis, dui dui purus massa malesuada vel metus elit.
 
 Item 6
-Ac volutpat faucibus. lorem ante Mauris vitae condimentum fringilla semper
+Iaculis.
+Lorem ante felis. massa dolor
 
 Item 7
-Vel dui metus ut elit. massa, vitae velit. efficitur in tortor ac ac
-Lorem
+Elementum
+Lorem Sed pretium in consectetur condimentum nec bibendum, elementum ipsum ipsum orci, et massa
 
 Item 8
-Sem. sem. Mauris Vivamus libero sem. neque. semper sagittis felis. ante ac Interdum dui
+Amet, faucibus. orci elit. finibus pharetra Duis felis. nec aliquam efficitur velit. elementum scelerisque
 
 Item 9
-Integer eget Vivamus in ligula et elit. massa sit velit. ante semper. et vitae
+Et vel adipiscing malesuada fringilla massa,
+Lorem Sed bibendum, ac
 
 Item 10
-Orci finibus efficitur felis. consectetur consectetur Sed Ut Vivamus Duis ante
+Ut Sed felis. Sed bibendum, primis ante enim in in, amet, Sed orci,
 
 #### React (tsx)
 
@@ -90,67 +93,70 @@ 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: 7400px;">
             <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">Sem. et consectetur ligula condimentum tincidunt.</div>
+                        <div class="word-break" data-test-ignore="text">Ut vitae massa dolor ut</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">Massa ante in orci in efficitur et pretium</div>
+                        <div class="word-break" data-test-ignore="text">Quis, quis, efficitur ante Integer in Interdum ut In elit.</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">Eget fringilla pretium tincidunt. eget semper. ac ipsum primis et ipsum semper.</div>
+                        <div class="word-break" data-test-ignore="text">Consectetur sit Interdum tincidunt. Duis eget Duis ac sagittis et posuere
+                            Lorem in finibus Ut</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">Duis ac elementum malesuada vel faucibus. et Fusce</div>
+                        <div class="word-break" data-test-ignore="text">Iaculis. vitae eget scelerisque orci libero iaculis. elit. enim felis. malesuada elit. purus et</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">Volutpat dui vel in aliquam</div>
+                        <div class="word-break" data-test-ignore="text">Massa ligula efficitur elit. condimentum quis, dui dui purus massa malesuada vel metus elit.</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">Ac volutpat faucibus. lorem ante Mauris vitae condimentum fringilla semper</div>
+                        <div class="word-break" data-test-ignore="text">Iaculis.
+                            Lorem ante felis. massa dolor</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">Vel dui metus ut elit. massa, vitae velit. efficitur in tortor ac ac
-                            Lorem</div>
+                        <div class="word-break" data-test-ignore="text">Elementum
+                            Lorem Sed pretium in consectetur condimentum nec bibendum, elementum ipsum ipsum orci, et massa</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">Sem. sem. Mauris Vivamus libero sem. neque. semper sagittis felis. ante ac Interdum dui</div>
+                        <div class="word-break" data-test-ignore="text">Amet, faucibus. orci elit. finibus pharetra Duis felis. nec aliquam efficitur velit. elementum scelerisque</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(600px); 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">Integer eget Vivamus in ligula et elit. massa sit velit. ante semper. et vitae</div>
+                        <div class="word-break" data-test-ignore="text">Et vel adipiscing malesuada fringilla massa,
+                            Lorem Sed bibendum, ac</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(670px); 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">Orci finibus efficitur felis. consectetur consectetur Sed Ut Vivamus Duis ante</div>
+                        <div class="word-break" data-test-ignore="text">Ut Sed felis. Sed bibendum, primis ante enim in in, amet, Sed orci,</div>
                     </div>
                 </div>
             </div>
@@ -176,35 +182,35 @@ export default () => {
 
 Virtual list with 5000 items
 Vehicle 1
-Ut condimentum in volutpat molestie
+Libero Duis volutpat consectetur sit ac Vivamus posuere consectetur ipsum posuere dui volutpat vitae
 
 Vehicle 2
-Consectetur fames neque. Mauris amet,
+Ut elit. amet, elit. sagittis molestie elementum sem. aliquam
 
 Vehicle 3
-Sem. efficitur ipsum elementum Duis finibus pretium est tortor elit. adipiscing ante metus efficitur ante
+Molestie eget semper. ante ipsum semper. quis,
 
 Vehicle 4
-Ut iaculis. eget rutrum Integer Duis massa quis, ut lorem massa libero pretium
+Est pretium ac nunc ac tortor ipsum massa, et ipsum eget ac
 
 Vehicle 5
-Interdum velit. massa, in enim fames in, ut nec pretium
-Lorem Interdum scelerisque ut malesuada
+Elit. malesuada vel sem. eget quis, Mauris iaculis.
 
 Vehicle 6
-Ac massa, et Mauris neque. nunc nec efficitur dolor in, et Ut nunc vitae enim
+Quis, orci enim libero purus in, In vel massa, aliquam Ut Duis ut
 
 Vehicle 7
-Est ac dolor efficitur ac hendrerit elementum felis. nec
+In est in orci pretium Integer pharetra tortor ut
 
 Vehicle 8
-Ipsum ante dui nunc consectetur elementum in ac
+Quis, elit. pretium eget metus vel finibus nec ac in,
 
 Vehicle 9
-Quis, ut Vivamus semper. Fusce ut ut quis, semper posuere dolor
+In, condimentum ipsum pharetra ipsum orci elit. vitae sit in Mauris molestie pretium
 
 Vehicle 10
-Tincidunt. amet, in aliquam orci, viverra finibus consectetur ante malesuada est libero et ac dui
+Scelerisque
+Lorem Duis ante posuere metus tortor efficitur
 
 #### React (tsx)
 
@@ -274,7 +280,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;">
@@ -285,11 +291,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 1</div>
-                                <div class="word-break" data-test-ignore="text">Ut condimentum in volutpat molestie</div>
+                                <div class="word-break" data-test-ignore="text">Libero Duis volutpat consectetur sit ac Vivamus posuere consectetur ipsum posuere dui volutpat vitae</div>
                             </div>
                         </div>
                     </div>
-                    <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="VirtualListItemWrapper list-group-item padding-y-15" data-index="1" style="position: absolute; transform: translateY(89px); 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 ">
@@ -297,11 +303,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 2</div>
-                                <div class="word-break" data-test-ignore="text">Consectetur fames neque. Mauris amet,</div>
+                                <div class="word-break" data-test-ignore="text">Ut elit. amet, elit. sagittis molestie elementum sem. aliquam</div>
                             </div>
                         </div>
                     </div>
-                    <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="VirtualListItemWrapper list-group-item padding-y-15" data-index="2" style="position: absolute; transform: translateY(159px); 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 ">
@@ -309,7 +315,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 3</div>
-                                <div class="word-break" data-test-ignore="text">Sem. efficitur ipsum elementum Duis finibus pretium est tortor elit. adipiscing ante metus efficitur ante</div>
+                                <div class="word-break" data-test-ignore="text">Molestie eget semper. ante ipsum semper. quis,</div>
                             </div>
                         </div>
                     </div>
@@ -321,7 +327,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 4</div>
-                                <div class="word-break" data-test-ignore="text">Ut iaculis. eget rutrum Integer Duis massa quis, ut lorem massa libero pretium</div>
+                                <div class="word-break" data-test-ignore="text">Est pretium ac nunc ac tortor ipsum massa, et ipsum eget ac</div>
                             </div>
                         </div>
                     </div>
@@ -333,12 +339,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 5</div>
-                                <div class="word-break" data-test-ignore="text">Interdum velit. massa, in enim fames in, ut nec pretium
-                                    Lorem Interdum scelerisque ut malesuada</div>
+                                <div class="word-break" data-test-ignore="text">Elit. malesuada vel sem. eget quis, Mauris iaculis.</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="5" style="position: absolute; transform: translateY(389px); width: 100%; will-change: transform;">
+                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="5" style="position: absolute; transform: translateY(369px); 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 ">
@@ -346,11 +351,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 6</div>
-                                <div class="word-break" data-test-ignore="text">Ac massa, et Mauris neque. nunc nec efficitur dolor in, et Ut nunc vitae enim</div>
+                                <div class="word-break" data-test-ignore="text">Quis, orci enim libero purus in, In vel massa, aliquam Ut Duis ut</div>
                             </div>
                         </div>
                     </div>
-                    <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="VirtualListItemWrapper list-group-item padding-y-15" data-index="6" style="position: absolute; transform: translateY(439px); 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 ">
@@ -358,11 +363,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 7</div>
-                                <div class="word-break" data-test-ignore="text">Est ac dolor efficitur ac hendrerit elementum felis. nec</div>
+                                <div class="word-break" data-test-ignore="text">In est in orci pretium Integer pharetra tortor ut</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="7" style="position: absolute; transform: translateY(529px); width: 100%; will-change: transform;">
+                    <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="display-flex gap-15 align-items-center">
                             <div class="Avatar bg-lightest" style="height: 40px;">
                                 <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -370,11 +375,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 8</div>
-                                <div class="word-break" data-test-ignore="text">Ipsum ante dui nunc consectetur elementum in ac</div>
+                                <div class="word-break" data-test-ignore="text">Quis, elit. pretium eget metus vel finibus nec ac 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 ">
@@ -382,11 +387,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 9</div>
-                                <div class="word-break" data-test-ignore="text">Quis, ut Vivamus semper. Fusce ut ut quis, semper posuere dolor</div>
+                                <div class="word-break" data-test-ignore="text">In, condimentum ipsum pharetra ipsum orci elit. vitae sit in Mauris molestie pretium</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 ">
@@ -394,7 +399,8 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 10</div>
-                                <div class="word-break" data-test-ignore="text">Tincidunt. amet, in aliquam orci, viverra finibus consectetur ante malesuada est libero et ac dui</div>
+                                <div class="word-break" data-test-ignore="text">Scelerisque
+                                    Lorem Duis ante posuere metus tortor efficitur</div>
                             </div>
                         </div>
                     </div>