@rio-cloud/uikit-mcp 1.1.11 → 1.1.12

package/dist/docs/components/virtualList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/virtualList
-*Captured:* 2026-04-27T14:58:08.977Z
+*Captured:* 2026-05-06T12:14:10.293Z
 
 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,35 @@ It allows a specified number of items outside the viewport for smoother scrollin
 ### Example: Example 1
 
 Virtual list with 100 items Item 1
-In, In pharetra ante elementum ac nunc in Duis
+Sem. et consectetur ligula condimentum tincidunt.
 
 Item 2
-Efficitur efficitur elit. molestie faucibus. in, tortor volutpat Duis tincidunt. ante purus
+Massa ante in orci in efficitur et pretium
 
 Item 3
-Libero fringilla ut ligula dolor ligula sit Vivamus semper posuere est quis, viverra in,
+Eget fringilla pretium tincidunt. eget semper. ac ipsum primis et ipsum semper.
 
 Item 4
-Consectetur pharetra nunc efficitur volutpat
+Duis ac elementum malesuada vel faucibus. et Fusce
 
 Item 5
-In nec dui aliquam adipiscing metus
+Volutpat dui vel in aliquam
 
 Item 6
-Elit. eget ac quis, semper. sem.
+Ac volutpat faucibus. lorem ante Mauris vitae condimentum fringilla semper
 
 Item 7
-Ut finibus hendrerit aliquam amet, consectetur
+Vel dui metus ut elit. massa, vitae velit. efficitur in tortor ac ac
+Lorem
 
 Item 8
-Primis ac et scelerisque aliquam Sed pharetra fames consectetur lorem in
-Lorem velit. nunc
+Sem. sem. Mauris Vivamus libero sem. neque. semper sagittis felis. ante ac Interdum dui
 
 Item 9
-Duis pretium orci, consectetur condimentum sit ante in posuere vel purus ante primis sem. nunc
+Integer eget Vivamus in ligula et elit. massa sit velit. ante semper. et vitae
 
 Item 10
-Efficitur purus pharetra faucibus. primis purus
+Orci finibus efficitur felis. consectetur consectetur Sed Ut Vivamus Duis ante
 
 #### React (tsx)
 
@@ -90,67 +90,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: 7200px;">
+        <div class="position-relative" style="height: 7000px;">
             <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">In, In pharetra ante elementum ac nunc in Duis</div>
+                        <div class="word-break" data-test-ignore="text">Sem. et consectetur ligula condimentum tincidunt.</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">Efficitur efficitur elit. molestie faucibus. in, tortor volutpat Duis tincidunt. ante purus</div>
+                        <div class="word-break" data-test-ignore="text">Massa ante in orci in efficitur et pretium</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">Libero fringilla ut ligula dolor ligula sit Vivamus semper posuere est quis, viverra in,</div>
+                        <div class="word-break" data-test-ignore="text">Eget fringilla pretium tincidunt. eget semper. ac ipsum primis et ipsum semper.</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">Consectetur pharetra nunc efficitur volutpat</div>
+                        <div class="word-break" data-test-ignore="text">Duis ac elementum malesuada vel faucibus. et Fusce</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">In nec dui aliquam adipiscing metus</div>
+                        <div class="word-break" data-test-ignore="text">Volutpat dui vel in aliquam</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">Elit. eget ac quis, semper. sem.</div>
+                        <div class="word-break" data-test-ignore="text">Ac volutpat faucibus. lorem ante Mauris vitae condimentum fringilla semper</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">Ut finibus hendrerit aliquam amet, consectetur</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>
                 </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">Primis ac et scelerisque aliquam Sed pharetra fames consectetur lorem in
-                            Lorem velit. nunc</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>
                 </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">Duis pretium orci, consectetur condimentum sit ante in posuere vel purus ante primis sem. nunc</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>
                 </div>
-                <div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(650px); width: 100%; will-change: transform;">
+                <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">Efficitur purus pharetra faucibus. primis purus</div>
+                        <div class="word-break" data-test-ignore="text">Orci finibus efficitur felis. consectetur consectetur Sed Ut Vivamus Duis ante</div>
                     </div>
                 </div>
             </div>
@@ -176,34 +176,35 @@ export default () => {
 
 Virtual list with 5000 items
 Vehicle 1
-Felis. dolor et libero Vivamus massa, efficitur consectetur consectetur efficitur ligula elit. Interdum
+Ut condimentum in volutpat molestie
 
 Vehicle 2
-Primis eget amet, est ante ante lorem bibendum, semper sem. elementum
+Consectetur fames neque. Mauris amet,
 
 Vehicle 3
-Adipiscing tincidunt. est Vivamus eget nec
+Sem. efficitur ipsum elementum Duis finibus pretium est tortor elit. adipiscing ante metus efficitur ante
 
 Vehicle 4
-Et neque. metus ac efficitur hendrerit
+Ut iaculis. eget rutrum Integer Duis massa quis, ut lorem massa libero pretium
 
 Vehicle 5
-Neque. Mauris malesuada tincidunt. Mauris condimentum
+Interdum velit. massa, in enim fames in, ut nec pretium
+Lorem Interdum scelerisque ut malesuada
 
 Vehicle 6
-Ut massa ante ante nunc ipsum et
+Ac massa, et Mauris neque. nunc nec efficitur dolor in, et Ut nunc vitae enim
 
 Vehicle 7
-Sed primis eget ligula in, purus vitae in orci pharetra
+Est ac dolor efficitur ac hendrerit elementum felis. nec
 
 Vehicle 8
-Adipiscing et rutrum neque. fringilla
+Ipsum ante dui nunc consectetur elementum in ac
 
 Vehicle 9
-Condimentum efficitur Mauris in dui faucibus. rutrum
+Quis, ut Vivamus semper. Fusce ut ut quis, semper posuere dolor
 
 Vehicle 10
-Viverra massa, ante felis. Sed ut ligula volutpat
+Tincidunt. amet, in aliquam orci, viverra finibus consectetur ante malesuada est libero et ac dui
 
 #### React (tsx)
 
@@ -273,7 +274,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: 360000px; position: relative; overflow: visible;">
+        <div class="VirtualList overflow-y-auto border rounded" style="height: 380000px; 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;">
@@ -284,11 +285,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 1</div>
-                                <div class="word-break" data-test-ignore="text">Felis. dolor et libero Vivamus massa, efficitur consectetur consectetur efficitur ligula elit. Interdum</div>
+                                <div class="word-break" data-test-ignore="text">Ut condimentum in volutpat molestie</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 ">
@@ -296,11 +297,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 2</div>
-                                <div class="word-break" data-test-ignore="text">Primis eget amet, est ante ante lorem bibendum, semper sem. elementum</div>
+                                <div class="word-break" data-test-ignore="text">Consectetur fames neque. Mauris amet,</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 ">
@@ -308,7 +309,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 3</div>
-                                <div class="word-break" data-test-ignore="text">Adipiscing tincidunt. est Vivamus eget nec</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>
                         </div>
                     </div>
@@ -320,7 +321,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 4</div>
-                                <div class="word-break" data-test-ignore="text">Et neque. metus ac efficitur hendrerit</div>
+                                <div class="word-break" data-test-ignore="text">Ut iaculis. eget rutrum Integer Duis massa quis, ut lorem massa libero pretium</div>
                             </div>
                         </div>
                     </div>
@@ -332,11 +333,12 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 5</div>
-                                <div class="word-break" data-test-ignore="text">Neque. Mauris malesuada tincidunt. Mauris condimentum</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>
                         </div>
                     </div>
-                    <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="VirtualListItemWrapper list-group-item padding-y-15" data-index="5" style="position: absolute; transform: translateY(389px); 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 ">
@@ -344,11 +346,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 6</div>
-                                <div class="word-break" data-test-ignore="text">Ut massa ante ante nunc ipsum et</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>
                         </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 ">
@@ -356,11 +358,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 7</div>
-                                <div class="word-break" data-test-ignore="text">Sed primis eget ligula in, purus vitae in orci pharetra</div>
+                                <div class="word-break" data-test-ignore="text">Est ac dolor efficitur ac hendrerit elementum felis. nec</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(529px); 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 ">
@@ -368,11 +370,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 8</div>
-                                <div class="word-break" data-test-ignore="text">Adipiscing et rutrum neque. fringilla</div>
+                                <div class="word-break" data-test-ignore="text">Ipsum ante dui nunc consectetur elementum in ac</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(599px); 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 ">
@@ -380,11 +382,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 9</div>
-                                <div class="word-break" data-test-ignore="text">Condimentum efficitur Mauris in dui faucibus. rutrum</div>
+                                <div class="word-break" data-test-ignore="text">Quis, ut Vivamus semper. Fusce ut ut quis, semper posuere dolor</div>
                             </div>
                         </div>
                     </div>
-                    <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="VirtualListItemWrapper list-group-item padding-y-15" data-index="9" style="position: absolute; transform: translateY(669px); 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 ">
@@ -392,7 +394,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 10</div>
-                                <div class="word-break" data-test-ignore="text">Viverra massa, ante felis. Sed ut ligula volutpat</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>
                         </div>
                     </div>