@rio-cloud/uikit-mcp 1.1.7 → 1.1.9

package/dist/docs/components/virtualList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/virtualList
-*Captured:* 2026-02-23T15:48:52.056Z
+*Captured:* 2026-03-06T10:40:52.691Z
 
 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.
 
@@ -13,69 +13,35 @@ It allows a specified number of items outside the viewport for smoother scrollin
 
 ### Example: Example 1
 
-Virtual list with 100 itemsItem 1
-Ut semper. sem. in condimentum orci, ligula massa ac adipiscing
+Virtual list with 100 items Item 1
+Eget et et scelerisque ante ipsum in dolor amet,
 
 Item 2
-Ac aliquam Integer sit Fusce
+Posuere faucibus. ipsum Sed elementum vel dui elit. ac Fusce
 
 Item 3
-Metus faucibus. primis lorem finibus efficitur
+Tortor quis, consectetur in finibus ut quis, Fusce orci, pretium semper elit. ac Sed elementum
 
 Item 4
-Semper purus efficitur Duis eget elementum viverra et posuere ac
+Elit. bibendum, quis, pharetra vitae nec malesuada condimentum ante hendrerit tortor Interdum massa,
 
 Item 5
-Fames elit. Interdum hendrerit felis.
+In Duis condimentum efficitur ut ante consectetur Duis semper. In
 
 Item 6
-Tincidunt. neque. Ut in in tortor
-Lorem volutpat condimentum elit. quis,
+Felis. condimentum malesuada orci, semper. ante ante bibendum,
 
 Item 7
-Eget ut Vivamus efficitur scelerisque dui semper consectetur et metus quis, In metus
+Semper. Duis malesuada fames sagittis ac In nec eget ante velit. adipiscing
 
 Item 8
-In fringilla ut vel orci, hendrerit elit. tincidunt.
+Molestie nunc semper. Ut velit. condimentum pharetra
 
 Item 9
-Ante consectetur aliquam velit. ut pretium semper hendrerit sit efficitur ac et primis ac
+Adipiscing purus ante Integer elementum dolor nec primis semper consectetur in nec semper. ac
 
 Item 10
-Ipsum In in, fames sagittis velit.
-
-#### Summary
-
-Virtual list with 100 itemsItem 1
-Ut semper. sem. in condimentum orci, ligula massa ac adipiscing
-
-Item 2
-Ac aliquam Integer sit Fusce
-
-Item 3
-Metus faucibus. primis lorem finibus efficitur
-
-Item 4
-Semper purus efficitur Duis eget elementum viverra et posuere ac
-
-Item 5
-Fames elit. Interdum hendrerit felis.
-
-Item 6
-Tincidunt. neque. Ut in in tortor
-Lorem volutpat condimentum elit. quis,
-
-Item 7
-Eget ut Vivamus efficitur scelerisque dui semper consectetur et metus quis, In metus
-
-Item 8
-In fringilla ut vel orci, hendrerit elit. tincidunt.
-
-Item 9
-Ante consectetur aliquam velit. ut pretium semper hendrerit sit efficitur ac et primis ac
-
-Item 10
-Ipsum In in, fames sagittis velit.
+Hendrerit vitae ante ligula tincidunt. sagittis ante sit consectetur sagittis in ac malesuada dolor
 
 #### React (tsx)
 
@@ -123,67 +89,66 @@ 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">Ut semper. sem. in condimentum orci, ligula massa ac adipiscing</div>
+                        <div class="word-break" data-test-ignore="text">Eget et et scelerisque ante ipsum in dolor amet,</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">Ac aliquam Integer sit Fusce</div>
+                        <div class="word-break" data-test-ignore="text">Posuere faucibus. ipsum Sed elementum vel dui elit. ac Fusce</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">Metus faucibus. primis lorem finibus efficitur</div>
+                        <div class="word-break" data-test-ignore="text">Tortor quis, consectetur in finibus ut quis, Fusce orci, pretium semper elit. ac Sed elementum</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">Semper purus efficitur Duis eget elementum viverra et posuere ac</div>
+                        <div class="word-break" data-test-ignore="text">Elit. bibendum, quis, pharetra vitae nec malesuada condimentum ante hendrerit tortor Interdum massa,</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">Fames elit. Interdum hendrerit felis.</div>
+                        <div class="word-break" data-test-ignore="text">In Duis condimentum efficitur ut ante consectetur Duis semper. 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">Tincidunt. neque. Ut in in tortor
-                            Lorem volutpat condimentum elit. quis,</div>
+                        <div class="word-break" data-test-ignore="text">Felis. condimentum malesuada orci, semper. ante ante bibendum,</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">Eget ut Vivamus efficitur scelerisque dui semper consectetur et metus quis, In metus</div>
+                        <div class="word-break" data-test-ignore="text">Semper. Duis malesuada fames sagittis ac In nec eget ante velit. adipiscing</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 fringilla ut vel orci, hendrerit elit. tincidunt.</div>
+                        <div class="word-break" data-test-ignore="text">Molestie nunc semper. Ut velit. condimentum pharetra</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">Ante consectetur aliquam velit. ut pretium semper hendrerit sit efficitur ac et primis ac</div>
+                        <div class="word-break" data-test-ignore="text">Adipiscing purus ante Integer elementum dolor nec primis semper consectetur in nec semper. 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">Ipsum In in, fames sagittis velit.</div>
+                        <div class="word-break" data-test-ignore="text">Hendrerit vitae ante ligula tincidunt. sagittis ante sit consectetur sagittis in ac malesuada dolor</div>
                     </div>
                 </div>
             </div>
@@ -209,69 +174,35 @@ export default () => {
 
 Virtual list with 5000 items
 Vehicle 1
-Tortor elit. consectetur neque. efficitur scelerisque elementum sit tortor pretium massa, fames
-
-Vehicle 2
-Dolor massa, rutrum Sed ut finibus eget ante nec vel aliquam
-
-Vehicle 3
-Sed pharetra rutrum elit. dui libero semper amet, felis. metus Mauris
-
-Vehicle 4
-Dui In semper. quis, ac amet,
-
-Vehicle 5
-Ut semper viverra et adipiscing tortor tincidunt. semper enim in efficitur Duis ipsum
-
-Vehicle 6
-Vel adipiscing dui et ac elit. massa, pretium tincidunt. enim dolor
-
-Vehicle 7
-Vel In ac orci, tincidunt. efficitur finibus
-
-Vehicle 8
-Elit. in neque. in pretium vel sem. pretium finibus
-
-Vehicle 9
-Ante aliquam amet, velit. condimentum ac faucibus. aliquam
-
-Vehicle 10
-
-Lorem elit. adipiscing Fusce ipsum lorem rutrum ut et nunc Integer dolor
-
-#### Summary
-
-Virtual list with 5000 items
-Vehicle 1
-Tortor elit. consectetur neque. efficitur scelerisque elementum sit tortor pretium massa, fames
+Eget aliquam ut ipsum est metus vitae amet, ac finibus viverra primis ligula felis. ac
 
 Vehicle 2
-Dolor massa, rutrum Sed ut finibus eget ante nec vel aliquam
+Massa, elementum scelerisque pretium
+Lorem fringilla consectetur faucibus.
 
 Vehicle 3
-Sed pharetra rutrum elit. dui libero semper amet, felis. metus Mauris
+Rutrum libero primis efficitur malesuada in ante in libero
 
 Vehicle 4
-Dui In semper. quis, ac amet,
+Felis. fringilla eget condimentum sit vel quis, dolor elit. et nunc tincidunt. sem. efficitur
 
 Vehicle 5
-Ut semper viverra et adipiscing tortor tincidunt. semper enim in efficitur Duis ipsum
+Consectetur metus nec ante ac metus sit
 
 Vehicle 6
-Vel adipiscing dui et ac elit. massa, pretium tincidunt. enim dolor
+Sit orci, elit. Mauris elementum viverra lorem aliquam consectetur
 
 Vehicle 7
-Vel In ac orci, tincidunt. efficitur finibus
+Posuere ac massa, adipiscing pretium neque. tincidunt. Mauris ac nec dui Sed
 
 Vehicle 8
-Elit. in neque. in pretium vel sem. pretium finibus
+In primis Ut vel ipsum in massa ipsum malesuada tincidunt. Integer ac efficitur
 
 Vehicle 9
-Ante aliquam amet, velit. condimentum ac faucibus. aliquam
+Et ipsum hendrerit sem. neque. velit. sem. ipsum
 
 Vehicle 10
-
-Lorem elit. adipiscing Fusce ipsum lorem rutrum ut et nunc Integer dolor
+Dolor sem. quis, dui eget
 
 #### React (tsx)
 
@@ -341,7 +272,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: 350000px; 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;">
@@ -352,11 +283,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 1</div>
-                                <div class="word-break" data-test-ignore="text">Tortor elit. consectetur neque. efficitur scelerisque elementum sit tortor pretium massa, fames</div>
+                                <div class="word-break" data-test-ignore="text">Eget aliquam ut ipsum est metus vitae amet, ac finibus viverra primis ligula felis. ac</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 ">
@@ -364,11 +295,12 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 2</div>
-                                <div class="word-break" data-test-ignore="text">Dolor massa, rutrum Sed ut finibus eget ante nec vel aliquam</div>
+                                <div class="word-break" data-test-ignore="text">Massa, elementum scelerisque pretium
+                                    Lorem fringilla consectetur faucibus.</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 ">
@@ -376,11 +308,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 3</div>
-                                <div class="word-break" data-test-ignore="text">Sed pharetra rutrum elit. dui libero semper amet, felis. metus Mauris</div>
+                                <div class="word-break" data-test-ignore="text">Rutrum libero primis efficitur malesuada in ante in libero</div>
                             </div>
                         </div>
                     </div>
-                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="3" style="position: absolute; transform: translateY(229px); width: 100%; will-change: transform;">
+                    <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="3" style="position: absolute; transform: translateY(209px); 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 ">
@@ -388,11 +320,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 4</div>
-                                <div class="word-break" data-test-ignore="text">Dui In semper. quis, ac amet,</div>
+                                <div class="word-break" data-test-ignore="text">Felis. fringilla eget condimentum sit vel quis, dolor elit. et nunc tincidunt. sem. efficitur</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 ">
@@ -400,11 +332,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 5</div>
-                                <div class="word-break" data-test-ignore="text">Ut semper viverra et adipiscing tortor tincidunt. semper enim in efficitur Duis ipsum</div>
+                                <div class="word-break" data-test-ignore="text">Consectetur metus nec ante ac metus sit</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(349px); 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 ">
@@ -412,11 +344,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 6</div>
-                                <div class="word-break" data-test-ignore="text">Vel adipiscing dui et ac elit. massa, pretium tincidunt. enim dolor</div>
+                                <div class="word-break" data-test-ignore="text">Sit orci, elit. Mauris elementum viverra lorem aliquam consectetur</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(419px); 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 ">
@@ -424,11 +356,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 7</div>
-                                <div class="word-break" data-test-ignore="text">Vel In ac orci, tincidunt. efficitur finibus</div>
+                                <div class="word-break" data-test-ignore="text">Posuere ac massa, adipiscing pretium neque. tincidunt. Mauris ac nec dui Sed</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(489px); 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 +368,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 8</div>
-                                <div class="word-break" data-test-ignore="text">Elit. in neque. in pretium vel sem. pretium finibus</div>
+                                <div class="word-break" data-test-ignore="text">In primis Ut vel ipsum in massa ipsum malesuada tincidunt. Integer ac efficitur</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(559px); 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,11 +380,11 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 9</div>
-                                <div class="word-break" data-test-ignore="text">Ante aliquam amet, velit. condimentum ac faucibus. aliquam</div>
+                                <div class="word-break" data-test-ignore="text">Et ipsum hendrerit sem. neque. velit. sem. ipsum</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(629px); 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 ">
@@ -460,8 +392,7 @@ export default () => {
                             </div>
                             <div>
                                 <div class="text-medium" data-test-ignore="text">Vehicle 10</div>
-                                <div class="word-break" data-test-ignore="text">
-                                    Lorem elit. adipiscing Fusce ipsum lorem rutrum ut et nunc Integer dolor</div>
+                                <div class="word-break" data-test-ignore="text">Dolor sem. quis, dui eget</div>
                             </div>
                         </div>
                     </div>