@rio-cloud/uikit-mcp 1.1.5 → 1.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (200) hide show
  1. package/dist/doc-metadata.json +129 -29
  2. package/dist/docs/components/accentBar.md +2 -2
  3. package/dist/docs/components/activity.md +2 -2
  4. package/dist/docs/components/animatedNumber.md +3 -3
  5. package/dist/docs/components/animatedTextReveal.md +7 -7
  6. package/dist/docs/components/animations.md +33 -33
  7. package/dist/docs/components/appHeader.md +8 -8
  8. package/dist/docs/components/appLayout.md +106 -89
  9. package/dist/docs/components/appNavigationBar.md +2 -2
  10. package/dist/docs/components/areaCharts.md +14 -14
  11. package/dist/docs/components/aspectRatioPlaceholder.md +2 -2
  12. package/dist/docs/components/assetTree.md +209 -404
  13. package/dist/docs/components/autosuggests.md +2 -2
  14. package/dist/docs/components/avatar.md +2 -2
  15. package/dist/docs/components/banner.md +3 -3
  16. package/dist/docs/components/barCharts.md +24 -24
  17. package/dist/docs/components/barList.md +11 -11
  18. package/dist/docs/components/basicMap.md +2 -2
  19. package/dist/docs/components/bottomSheet.md +2 -2
  20. package/dist/docs/components/button.md +400 -32
  21. package/dist/docs/components/buttonToolbar.md +2 -2
  22. package/dist/docs/components/calendarStripe.md +96 -36
  23. package/dist/docs/components/card.md +2 -2
  24. package/dist/docs/components/carousel.md +2 -2
  25. package/dist/docs/components/chartColors.md +2 -2
  26. package/dist/docs/components/chartsGettingStarted.md +2 -2
  27. package/dist/docs/components/chat.md +3 -3
  28. package/dist/docs/components/checkbox.md +17 -20
  29. package/dist/docs/components/circularProgress.md +465 -0
  30. package/dist/docs/components/clearableInput.md +2 -2
  31. package/dist/docs/components/collapse.md +3 -3
  32. package/dist/docs/components/composedCharts.md +20 -20
  33. package/dist/docs/components/contentLoader.md +102 -102
  34. package/dist/docs/components/dataTabs.md +10 -10
  35. package/dist/docs/components/datepickers.md +31 -31
  36. package/dist/docs/components/dialogs.md +2 -2
  37. package/dist/docs/components/divider.md +2 -2
  38. package/dist/docs/components/dropdowns.md +4354 -4387
  39. package/dist/docs/components/editableContent.md +2 -2
  40. package/dist/docs/components/expander.md +2 -2
  41. package/dist/docs/components/fade.md +2 -2
  42. package/dist/docs/components/fadeExpander.md +3 -3
  43. package/dist/docs/components/fadeUp.md +3 -3
  44. package/dist/docs/components/feedback.md +2 -2
  45. package/dist/docs/components/filePickers.md +2 -2
  46. package/dist/docs/components/formLabel.md +5 -4
  47. package/dist/docs/components/groupedItemList.md +2 -2
  48. package/dist/docs/components/iconList.md +4 -4
  49. package/dist/docs/components/imagePreloader.md +2 -2
  50. package/dist/docs/components/labeledElement.md +2 -2
  51. package/dist/docs/components/licensePlate.md +2 -2
  52. package/dist/docs/components/lineCharts.md +11 -11
  53. package/dist/docs/components/listMenu.md +7 -7
  54. package/dist/docs/components/loadMore.md +2 -2
  55. package/dist/docs/components/mainNavigation.md +5 -5
  56. package/dist/docs/components/mapCircle.md +2 -2
  57. package/dist/docs/components/mapCluster.md +2 -2
  58. package/dist/docs/components/mapContext.md +2 -2
  59. package/dist/docs/components/mapDraggableMarker.md +2 -2
  60. package/dist/docs/components/mapGettingStarted.md +2 -2
  61. package/dist/docs/components/mapInfoBubble.md +2 -2
  62. package/dist/docs/components/mapLayerGroup.md +2 -2
  63. package/dist/docs/components/mapMarker.md +2 -2
  64. package/dist/docs/components/mapPolygon.md +2 -2
  65. package/dist/docs/components/mapRoute.md +2 -2
  66. package/dist/docs/components/mapRouteGenerator.md +2 -2
  67. package/dist/docs/components/mapSettings.md +9 -9
  68. package/dist/docs/components/mapUtils.md +2 -2
  69. package/dist/docs/components/multiselects.md +2 -2
  70. package/dist/docs/components/noData.md +2 -2
  71. package/dist/docs/components/notifications.md +2 -2
  72. package/dist/docs/components/numbercontrol.md +5 -4
  73. package/dist/docs/components/onboarding.md +2 -2
  74. package/dist/docs/components/page.md +2 -2
  75. package/dist/docs/components/pager.md +2 -2
  76. package/dist/docs/components/pieCharts.md +89 -78
  77. package/dist/docs/components/popover.md +2 -2
  78. package/dist/docs/components/position.md +2 -2
  79. package/dist/docs/components/radialBarCharts.md +2054 -2012
  80. package/dist/docs/components/radioCardGroup.md +487 -0
  81. package/dist/docs/components/radiobutton.md +2 -2
  82. package/dist/docs/components/releaseNotes.md +2 -2
  83. package/dist/docs/components/resizer.md +2 -2
  84. package/dist/docs/components/responsiveColumnStripe.md +2 -2
  85. package/dist/docs/components/responsiveVideo.md +2 -2
  86. package/dist/docs/components/rioglyph.md +2 -2
  87. package/dist/docs/components/rules.md +2 -2
  88. package/dist/docs/components/saveableInput.md +20 -20
  89. package/dist/docs/components/selects.md +2 -2
  90. package/dist/docs/components/sidebar.md +2 -2
  91. package/dist/docs/components/sliders.md +2 -2
  92. package/dist/docs/components/smoothScrollbars.md +2 -2
  93. package/dist/docs/components/spinners.md +2 -2
  94. package/dist/docs/components/states.md +2 -2
  95. package/dist/docs/components/statsWidgets.md +2 -2
  96. package/dist/docs/components/statusBar.md +2 -2
  97. package/dist/docs/components/stepButton.md +2 -2
  98. package/dist/docs/components/steppedProgressBars.md +2 -2
  99. package/dist/docs/components/subNavigation.md +17 -17
  100. package/dist/docs/components/supportMarker.md +2 -2
  101. package/dist/docs/components/svgImage.md +38 -2
  102. package/dist/docs/components/switch.md +210 -83
  103. package/dist/docs/components/tables.md +2 -2
  104. package/dist/docs/components/tagManager.md +2 -2
  105. package/dist/docs/components/tags.md +2 -2
  106. package/dist/docs/components/teaser.md +2 -2
  107. package/dist/docs/components/textTruncateMiddle.md +151 -0
  108. package/dist/docs/components/timeline.md +2 -2
  109. package/dist/docs/components/timepicker.md +660 -64
  110. package/dist/docs/components/toggleButton.md +37 -9
  111. package/dist/docs/components/tooltip.md +5 -4
  112. package/dist/docs/components/tracker.md +631 -0
  113. package/dist/docs/components/virtualList.md +77 -77
  114. package/dist/docs/foundations.md +594 -222
  115. package/dist/docs/start/changelog.md +54 -2
  116. package/dist/docs/start/goodtoknow.md +2 -2
  117. package/dist/docs/start/guidelines/color-combinations.md +2 -2
  118. package/dist/docs/start/guidelines/custom-css.md +2 -2
  119. package/dist/docs/start/guidelines/custom-rioglyph.md +2 -2
  120. package/dist/docs/start/guidelines/formatting.md +2 -2
  121. package/dist/docs/start/guidelines/iframe.md +3 -3
  122. package/dist/docs/start/guidelines/obfuscate-data.md +2 -2
  123. package/dist/docs/start/guidelines/print-css.md +2 -2
  124. package/dist/docs/start/guidelines/spinner.md +82 -82
  125. package/dist/docs/start/guidelines/state-in-url.md +263 -0
  126. package/dist/docs/start/guidelines/supported-browsers.md +2 -2
  127. package/dist/docs/start/guidelines/writing.md +2 -2
  128. package/dist/docs/start/howto.md +10 -10
  129. package/dist/docs/start/intro.md +2 -2
  130. package/dist/docs/start/responsiveness.md +2 -2
  131. package/dist/docs/templates/common-table.md +15 -14
  132. package/dist/docs/templates/detail-views.md +3 -3
  133. package/dist/docs/templates/expandable-details.md +2 -2
  134. package/dist/docs/templates/feature-cards.md +56 -56
  135. package/dist/docs/templates/form-summary.md +23 -23
  136. package/dist/docs/templates/form-toggle.md +2 -2
  137. package/dist/docs/templates/list-blocks.md +204 -204
  138. package/dist/docs/templates/loading-progress.md +2 -2
  139. package/dist/docs/templates/options-panel.md +2 -2
  140. package/dist/docs/templates/panel-variants.md +2 -2
  141. package/dist/docs/templates/progress-cards.md +2 -2
  142. package/dist/docs/templates/progress-success.md +2 -2
  143. package/dist/docs/templates/settings-form.md +24 -24
  144. package/dist/docs/templates/stats-blocks.md +15 -15
  145. package/dist/docs/templates/table-panel.md +2 -2
  146. package/dist/docs/templates/table-row-animation.md +2 -2
  147. package/dist/docs/templates/usage-cards.md +2 -2
  148. package/dist/docs/utilities/classNames.md +191 -0
  149. package/dist/docs/utilities/deviceUtils.md +2 -2
  150. package/dist/docs/utilities/featureToggles.md +2 -2
  151. package/dist/docs/utilities/fuelTypeUtils.md +2 -2
  152. package/dist/docs/utilities/routeUtils.md +326 -90
  153. package/dist/docs/utilities/useAfterMount.md +2 -2
  154. package/dist/docs/utilities/useAutoAnimate.md +2 -2
  155. package/dist/docs/utilities/useAverage.md +2 -2
  156. package/dist/docs/utilities/useClickOutside.md +2 -2
  157. package/dist/docs/utilities/useClipboard.md +3 -3
  158. package/dist/docs/utilities/useCookies.md +188 -0
  159. package/dist/docs/utilities/useCount.md +2 -2
  160. package/dist/docs/utilities/useDarkMode.md +2 -2
  161. package/dist/docs/utilities/useDebugInfo.md +5 -5
  162. package/dist/docs/utilities/useEffectOnce.md +2 -2
  163. package/dist/docs/utilities/useElapsedTime.md +2 -2
  164. package/dist/docs/utilities/useElementSize.md +2 -2
  165. package/dist/docs/utilities/useEsc.md +2 -2
  166. package/dist/docs/utilities/useEvent.md +2 -2
  167. package/dist/docs/utilities/useFocusTrap.md +2 -2
  168. package/dist/docs/utilities/useFullscreen.md +2 -2
  169. package/dist/docs/utilities/useHover.md +2 -2
  170. package/dist/docs/utilities/useIncomingPostMessages.md +2 -2
  171. package/dist/docs/utilities/useInterval.md +2 -2
  172. package/dist/docs/utilities/useIsFocusWithin.md +2 -2
  173. package/dist/docs/utilities/useKey.md +2 -2
  174. package/dist/docs/utilities/useLocalStorage.md +2 -2
  175. package/dist/docs/utilities/useLocationSuggestions.md +2 -2
  176. package/dist/docs/utilities/useMax.md +2 -2
  177. package/dist/docs/utilities/useMin.md +2 -2
  178. package/dist/docs/utilities/useMutationObserver.md +2 -2
  179. package/dist/docs/utilities/useOnScreen.md +2 -2
  180. package/dist/docs/utilities/useOnlineStatus.md +2 -2
  181. package/dist/docs/utilities/usePostMessage.md +3 -3
  182. package/dist/docs/utilities/usePostMessageSender.md +2 -2
  183. package/dist/docs/utilities/usePrevious.md +2 -2
  184. package/dist/docs/utilities/useResizeObserver.md +2 -2
  185. package/dist/docs/utilities/useRioCookieConsent.md +90 -0
  186. package/dist/docs/utilities/useScrollPosition.md +2 -2
  187. package/dist/docs/utilities/useSearch.md +2 -2
  188. package/dist/docs/utilities/useSearchHighlight.md +815 -0
  189. package/dist/docs/utilities/useSorting.md +2 -2
  190. package/dist/docs/utilities/useStateWithValidation.md +2 -2
  191. package/dist/docs/utilities/useSum.md +2 -2
  192. package/dist/docs/utilities/useTableExport.md +52 -52
  193. package/dist/docs/utilities/useTableSelection.md +90 -90
  194. package/dist/docs/utilities/useTimeout.md +2 -2
  195. package/dist/docs/utilities/useToggle.md +3 -3
  196. package/dist/docs/utilities/useUrlState.md +418 -0
  197. package/dist/docs/utilities/useWindowResize.md +2 -2
  198. package/dist/index.mjs +1 -1
  199. package/dist/version.json +2 -2
  200. package/package.json +9 -9
package/dist/docs/components/virtualList.md CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  *Category:* Components
4
4
  *Section:* Content
5
- *Source:* https://uikit.developers.rio.cloud/#components/virtualList
6
- *Captured:* 2026-02-03T14:04:54.271Z
5
+ *Source:* https://uikit.developers.rio.cloud/#/components/virtualList
6
+ *Captured:* 2026-02-23T15:48:52.056Z
7
7
 
8
8
  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.
9
9
 
@@ -14,68 +14,68 @@ It allows a specified number of items outside the viewport for smoother scrollin
14
14
  ### Example: Example 1
15
15
 
16
16
  Virtual list with 100 itemsItem 1
17
- Consectetur primis adipiscing ac pharetra
17
+ Ut semper. sem. in condimentum orci, ligula massa ac adipiscing
18
18
 
19
19
  Item 2
20
- Fusce Ut sagittis ac sit ut in, efficitur finibus pretium Vivamus pretium amet, amet, orci,
20
+ Ac aliquam Integer sit Fusce
21
21
 
22
22
  Item 3
23
- Ac Sed Mauris amet, molestie sem.
23
+ Metus faucibus. primis lorem finibus efficitur
24
24
 
25
25
  Item 4
26
- Consectetur tortor efficitur rutrum vitae in vel efficitur sem. scelerisque efficitur Fusce velit.
26
+ Semper purus efficitur Duis eget elementum viverra et posuere ac
27
27
 
28
28
  Item 5
29
- Ut ac Integer rutrum nunc sem. efficitur ante Duis finibus ac ut purus
29
+ Fames elit. Interdum hendrerit felis.
30
30
 
31
31
  Item 6
32
- Elit. ante felis. finibus in
32
+ Tincidunt. neque. Ut in in tortor
33
+ Lorem volutpat condimentum elit. quis,
33
34
 
34
35
  Item 7
35
- Metus rutrum ante ac consectetur aliquam
36
+ Eget ut Vivamus efficitur scelerisque dui semper consectetur et metus quis, In metus
36
37
 
37
38
  Item 8
38
- Malesuada ac Vivamus purus massa, efficitur Vivamus hendrerit
39
+ In fringilla ut vel orci, hendrerit elit. tincidunt.
39
40
 
40
41
  Item 9
41
- Nunc libero
42
- Lorem in elementum
42
+ Ante consectetur aliquam velit. ut pretium semper hendrerit sit efficitur ac et primis ac
43
43
 
44
44
  Item 10
45
- Fringilla massa, quis, sit orci scelerisque ante elit. ut fringilla faucibus. Vivamus
45
+ Ipsum In in, fames sagittis velit.
46
46
 
47
47
  #### Summary
48
48
 
49
49
  Virtual list with 100 itemsItem 1
50
- Consectetur primis adipiscing ac pharetra
50
+ Ut semper. sem. in condimentum orci, ligula massa ac adipiscing
51
51
 
52
52
  Item 2
53
- Fusce Ut sagittis ac sit ut in, efficitur finibus pretium Vivamus pretium amet, amet, orci,
53
+ Ac aliquam Integer sit Fusce
54
54
 
55
55
  Item 3
56
- Ac Sed Mauris amet, molestie sem.
56
+ Metus faucibus. primis lorem finibus efficitur
57
57
 
58
58
  Item 4
59
- Consectetur tortor efficitur rutrum vitae in vel efficitur sem. scelerisque efficitur Fusce velit.
59
+ Semper purus efficitur Duis eget elementum viverra et posuere ac
60
60
 
61
61
  Item 5
62
- Ut ac Integer rutrum nunc sem. efficitur ante Duis finibus ac ut purus
62
+ Fames elit. Interdum hendrerit felis.
63
63
 
64
64
  Item 6
65
- Elit. ante felis. finibus in
65
+ Tincidunt. neque. Ut in in tortor
66
+ Lorem volutpat condimentum elit. quis,
66
67
 
67
68
  Item 7
68
- Metus rutrum ante ac consectetur aliquam
69
+ Eget ut Vivamus efficitur scelerisque dui semper consectetur et metus quis, In metus
69
70
 
70
71
  Item 8
71
- Malesuada ac Vivamus purus massa, efficitur Vivamus hendrerit
72
+ In fringilla ut vel orci, hendrerit elit. tincidunt.
72
73
 
73
74
  Item 9
74
- Nunc libero
75
- Lorem in elementum
75
+ Ante consectetur aliquam velit. ut pretium semper hendrerit sit efficitur ac et primis ac
76
76
 
77
77
  Item 10
78
- Fringilla massa, quis, sit orci scelerisque ante elit. ut fringilla faucibus. Vivamus
78
+ Ipsum In in, fames sagittis velit.
79
79
 
80
80
  #### React (tsx)
81
81
 
@@ -128,62 +128,62 @@ export default () => {
128
128
  <div class="VirtualListItemWrapper " data-index="0" style="position: absolute; transform: translateY(0px); width: 100%; will-change: transform;">
129
129
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
130
130
  <div class="text-medium" data-test-ignore="text">Item 1</div>
131
- <div class="word-break" data-test-ignore="text">Consectetur primis adipiscing ac pharetra</div>
131
+ <div class="word-break" data-test-ignore="text">Ut semper. sem. in condimentum orci, ligula massa ac adipiscing</div>
132
132
  </div>
133
133
  </div>
134
134
  <div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(70px); width: 100%; will-change: transform;">
135
135
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
136
136
  <div class="text-medium" data-test-ignore="text">Item 2</div>
137
- <div class="word-break" data-test-ignore="text">Fusce Ut sagittis ac sit ut in, efficitur finibus pretium Vivamus pretium amet, amet, orci,</div>
137
+ <div class="word-break" data-test-ignore="text">Ac aliquam Integer sit Fusce</div>
138
138
  </div>
139
139
  </div>
140
140
  <div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(140px); width: 100%; will-change: transform;">
141
141
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
142
142
  <div class="text-medium" data-test-ignore="text">Item 3</div>
143
- <div class="word-break" data-test-ignore="text">Ac Sed Mauris amet, molestie sem.</div>
143
+ <div class="word-break" data-test-ignore="text">Metus faucibus. primis lorem finibus efficitur</div>
144
144
  </div>
145
145
  </div>
146
146
  <div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(210px); width: 100%; will-change: transform;">
147
147
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
148
148
  <div class="text-medium" data-test-ignore="text">Item 4</div>
149
- <div class="word-break" data-test-ignore="text">Consectetur tortor efficitur rutrum vitae in vel efficitur sem. scelerisque efficitur Fusce velit.</div>
149
+ <div class="word-break" data-test-ignore="text">Semper purus efficitur Duis eget elementum viverra et posuere ac</div>
150
150
  </div>
151
151
  </div>
152
152
  <div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(280px); width: 100%; will-change: transform;">
153
153
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
154
154
  <div class="text-medium" data-test-ignore="text">Item 5</div>
155
- <div class="word-break" data-test-ignore="text">Ut ac Integer rutrum nunc sem. efficitur ante Duis finibus ac ut purus</div>
155
+ <div class="word-break" data-test-ignore="text">Fames elit. Interdum hendrerit felis.</div>
156
156
  </div>
157
157
  </div>
158
158
  <div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(350px); width: 100%; will-change: transform;">
159
159
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
160
160
  <div class="text-medium" data-test-ignore="text">Item 6</div>
161
- <div class="word-break" data-test-ignore="text">Elit. ante felis. finibus in</div>
161
+ <div class="word-break" data-test-ignore="text">Tincidunt. neque. Ut in in tortor
162
+ Lorem volutpat condimentum elit. quis,</div>
162
163
  </div>
163
164
  </div>
164
165
  <div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(420px); width: 100%; will-change: transform;">
165
166
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
166
167
  <div class="text-medium" data-test-ignore="text">Item 7</div>
167
- <div class="word-break" data-test-ignore="text">Metus rutrum ante ac consectetur aliquam</div>
168
+ <div class="word-break" data-test-ignore="text">Eget ut Vivamus efficitur scelerisque dui semper consectetur et metus quis, In metus</div>
168
169
  </div>
169
170
  </div>
170
171
  <div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(490px); width: 100%; will-change: transform;">
171
172
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
172
173
  <div class="text-medium" data-test-ignore="text">Item 8</div>
173
- <div class="word-break" data-test-ignore="text">Malesuada ac Vivamus purus massa, efficitur Vivamus hendrerit</div>
174
+ <div class="word-break" data-test-ignore="text">In fringilla ut vel orci, hendrerit elit. tincidunt.</div>
174
175
  </div>
175
176
  </div>
176
177
  <div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(560px); width: 100%; will-change: transform;">
177
178
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
178
179
  <div class="text-medium" data-test-ignore="text">Item 9</div>
179
- <div class="word-break" data-test-ignore="text">Nunc libero
180
- Lorem in elementum</div>
180
+ <div class="word-break" data-test-ignore="text">Ante consectetur aliquam velit. ut pretium semper hendrerit sit efficitur ac et primis ac</div>
181
181
  </div>
182
182
  </div>
183
183
  <div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(630px); width: 100%; will-change: transform;">
184
184
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
185
185
  <div class="text-medium" data-test-ignore="text">Item 10</div>
186
- <div class="word-break" data-test-ignore="text">Fringilla massa, quis, sit orci scelerisque ante elit. ut fringilla faucibus. Vivamus</div>
186
+ <div class="word-break" data-test-ignore="text">Ipsum In in, fames sagittis velit.</div>
187
187
  </div>
188
188
  </div>
189
189
  </div>
@@ -209,69 +209,69 @@ export default () => {
209
209
 
210
210
  Virtual list with 5000 items
211
211
  Vehicle 1
212
- Fringilla semper. faucibus. lorem ac Ut condimentum semper.
212
+ Tortor elit. consectetur neque. efficitur scelerisque elementum sit tortor pretium massa, fames
213
213
 
214
214
  Vehicle 2
215
- Finibus aliquam in Vivamus consectetur sit ante
215
+ Dolor massa, rutrum Sed ut finibus eget ante nec vel aliquam
216
216
 
217
217
  Vehicle 3
218
- Primis orci purus elementum libero tortor sit
218
+ Sed pharetra rutrum elit. dui libero semper amet, felis. metus Mauris
219
219
 
220
220
  Vehicle 4
221
- Sed aliquam semper ipsum orci et metus Mauris ligula Ut consectetur nec elementum
221
+ Dui In semper. quis, ac amet,
222
222
 
223
223
  Vehicle 5
224
- Efficitur Integer malesuada adipiscing vel malesuada elit. pharetra elit. fringilla pretium orci, elit.
224
+ Ut semper viverra et adipiscing tortor tincidunt. semper enim in efficitur Duis ipsum
225
225
 
226
226
  Vehicle 6
227
- Orci, Fusce et condimentum scelerisque dolor metus fringilla consectetur consectetur primis nunc
227
+ Vel adipiscing dui et ac elit. massa, pretium tincidunt. enim dolor
228
228
 
229
229
  Vehicle 7
230
- Felis. ipsum condimentum efficitur tortor iaculis. amet, hendrerit dolor dolor massa molestie ut ac
231
- Lorem
230
+ Vel In ac orci, tincidunt. efficitur finibus
232
231
 
233
232
  Vehicle 8
234
- Fringilla ac ipsum Mauris ac ac et semper. semper Fusce ut
233
+ Elit. in neque. in pretium vel sem. pretium finibus
235
234
 
236
235
  Vehicle 9
237
- Scelerisque ante orci, in nec elementum rutrum adipiscing hendrerit molestie in, fames orci,
236
+ Ante aliquam amet, velit. condimentum ac faucibus. aliquam
238
237
 
239
238
  Vehicle 10
240
- Nunc nec bibendum, velit. Mauris
239
+
240
+ Lorem elit. adipiscing Fusce ipsum lorem rutrum ut et nunc Integer dolor
241
241
 
242
242
  #### Summary
243
243
 
244
244
  Virtual list with 5000 items
245
245
  Vehicle 1
246
- Fringilla semper. faucibus. lorem ac Ut condimentum semper.
246
+ Tortor elit. consectetur neque. efficitur scelerisque elementum sit tortor pretium massa, fames
247
247
 
248
248
  Vehicle 2
249
- Finibus aliquam in Vivamus consectetur sit ante
249
+ Dolor massa, rutrum Sed ut finibus eget ante nec vel aliquam
250
250
 
251
251
  Vehicle 3
252
- Primis orci purus elementum libero tortor sit
252
+ Sed pharetra rutrum elit. dui libero semper amet, felis. metus Mauris
253
253
 
254
254
  Vehicle 4
255
- Sed aliquam semper ipsum orci et metus Mauris ligula Ut consectetur nec elementum
255
+ Dui In semper. quis, ac amet,
256
256
 
257
257
  Vehicle 5
258
- Efficitur Integer malesuada adipiscing vel malesuada elit. pharetra elit. fringilla pretium orci, elit.
258
+ Ut semper viverra et adipiscing tortor tincidunt. semper enim in efficitur Duis ipsum
259
259
 
260
260
  Vehicle 6
261
- Orci, Fusce et condimentum scelerisque dolor metus fringilla consectetur consectetur primis nunc
261
+ Vel adipiscing dui et ac elit. massa, pretium tincidunt. enim dolor
262
262
 
263
263
  Vehicle 7
264
- Felis. ipsum condimentum efficitur tortor iaculis. amet, hendrerit dolor dolor massa molestie ut ac
265
- Lorem
264
+ Vel In ac orci, tincidunt. efficitur finibus
266
265
 
267
266
  Vehicle 8
268
- Fringilla ac ipsum Mauris ac ac et semper. semper Fusce ut
267
+ Elit. in neque. in pretium vel sem. pretium finibus
269
268
 
270
269
  Vehicle 9
271
- Scelerisque ante orci, in nec elementum rutrum adipiscing hendrerit molestie in, fames orci,
270
+ Ante aliquam amet, velit. condimentum ac faucibus. aliquam
272
271
 
273
272
  Vehicle 10
274
- Nunc nec bibendum, velit. Mauris
273
+
274
+ Lorem elit. adipiscing Fusce ipsum lorem rutrum ut et nunc Integer dolor
275
275
 
276
276
  #### React (tsx)
277
277
 
@@ -341,7 +341,7 @@ export default () => {
341
341
  <div class="padding-20">
342
342
  <label>Virtual list with 5000 items</label>
343
343
  <div class="max-width-600 max-height-400 overflow-y-auto">
344
- <div class="VirtualList overflow-y-auto border rounded" style="height: 390000px; position: relative; overflow: visible;">
344
+ <div class="VirtualList overflow-y-auto border rounded" style="height: 360000px; position: relative; overflow: visible;">
345
345
  <div class="position-relative" style="height: auto;">
346
346
  <div class="VirtualListItemContainer list-group">
347
347
  <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 +352,11 @@ export default () => {
352
352
  </div>
353
353
  <div>
354
354
  <div class="text-medium" data-test-ignore="text">Vehicle 1</div>
355
- <div class="word-break" data-test-ignore="text">Fringilla semper. faucibus. lorem ac Ut condimentum semper.</div>
355
+ <div class="word-break" data-test-ignore="text">Tortor elit. consectetur neque. efficitur scelerisque elementum sit tortor pretium massa, fames</div>
356
356
  </div>
357
357
  </div>
358
358
  </div>
359
- <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="1" style="position: absolute; transform: translateY(69px); width: 100%; will-change: transform;">
359
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="1" style="position: absolute; transform: translateY(89px); width: 100%; will-change: transform;">
360
360
  <div class="display-flex gap-15 align-items-center">
361
361
  <div class="Avatar bg-lightest" style="height: 40px;">
362
362
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -364,11 +364,11 @@ export default () => {
364
364
  </div>
365
365
  <div>
366
366
  <div class="text-medium" data-test-ignore="text">Vehicle 2</div>
367
- <div class="word-break" data-test-ignore="text">Finibus aliquam in Vivamus consectetur sit ante</div>
367
+ <div class="word-break" data-test-ignore="text">Dolor massa, rutrum Sed ut finibus eget ante nec vel aliquam</div>
368
368
  </div>
369
369
  </div>
370
370
  </div>
371
- <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="2" style="position: absolute; transform: translateY(139px); width: 100%; will-change: transform;">
371
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="2" style="position: absolute; transform: translateY(159px); width: 100%; will-change: transform;">
372
372
  <div class="display-flex gap-15 align-items-center">
373
373
  <div class="Avatar bg-lightest" style="height: 40px;">
374
374
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -376,11 +376,11 @@ export default () => {
376
376
  </div>
377
377
  <div>
378
378
  <div class="text-medium" data-test-ignore="text">Vehicle 3</div>
379
- <div class="word-break" data-test-ignore="text">Primis orci purus elementum libero tortor sit</div>
379
+ <div class="word-break" data-test-ignore="text">Sed pharetra rutrum elit. dui libero semper amet, felis. metus Mauris</div>
380
380
  </div>
381
381
  </div>
382
382
  </div>
383
- <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="3" style="position: absolute; transform: translateY(209px); width: 100%; will-change: transform;">
383
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="3" style="position: absolute; transform: translateY(229px); width: 100%; will-change: transform;">
384
384
  <div class="display-flex gap-15 align-items-center">
385
385
  <div class="Avatar bg-lightest" style="height: 40px;">
386
386
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -388,11 +388,11 @@ export default () => {
388
388
  </div>
389
389
  <div>
390
390
  <div class="text-medium" data-test-ignore="text">Vehicle 4</div>
391
- <div class="word-break" data-test-ignore="text">Sed aliquam semper ipsum orci et metus Mauris ligula Ut consectetur nec elementum</div>
391
+ <div class="word-break" data-test-ignore="text">Dui In semper. quis, ac amet,</div>
392
392
  </div>
393
393
  </div>
394
394
  </div>
395
- <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="4" style="position: absolute; transform: translateY(279px); width: 100%; will-change: transform;">
395
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="4" style="position: absolute; transform: translateY(299px); width: 100%; will-change: transform;">
396
396
  <div class="display-flex gap-15 align-items-center">
397
397
  <div class="Avatar bg-lightest" style="height: 40px;">
398
398
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -400,7 +400,7 @@ export default () => {
400
400
  </div>
401
401
  <div>
402
402
  <div class="text-medium" data-test-ignore="text">Vehicle 5</div>
403
- <div class="word-break" data-test-ignore="text">Efficitur Integer malesuada adipiscing vel malesuada elit. pharetra elit. fringilla pretium orci, elit.</div>
403
+ <div class="word-break" data-test-ignore="text">Ut semper viverra et adipiscing tortor tincidunt. semper enim in efficitur Duis ipsum</div>
404
404
  </div>
405
405
  </div>
406
406
  </div>
@@ -412,11 +412,11 @@ export default () => {
412
412
  </div>
413
413
  <div>
414
414
  <div class="text-medium" data-test-ignore="text">Vehicle 6</div>
415
- <div class="word-break" data-test-ignore="text">Orci, Fusce et condimentum scelerisque dolor metus fringilla consectetur consectetur primis nunc</div>
415
+ <div class="word-break" data-test-ignore="text">Vel adipiscing dui et ac elit. massa, pretium tincidunt. enim dolor</div>
416
416
  </div>
417
417
  </div>
418
418
  </div>
419
- <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="6" style="position: absolute; transform: translateY(459px); width: 100%; will-change: transform;">
419
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="6" style="position: absolute; transform: translateY(439px); width: 100%; will-change: transform;">
420
420
  <div class="display-flex gap-15 align-items-center">
421
421
  <div class="Avatar bg-lightest" style="height: 40px;">
422
422
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -424,12 +424,11 @@ export default () => {
424
424
  </div>
425
425
  <div>
426
426
  <div class="text-medium" data-test-ignore="text">Vehicle 7</div>
427
- <div class="word-break" data-test-ignore="text">Felis. ipsum condimentum efficitur tortor iaculis. amet, hendrerit dolor dolor massa molestie ut ac
428
- Lorem</div>
427
+ <div class="word-break" data-test-ignore="text">Vel In ac orci, tincidunt. efficitur finibus</div>
429
428
  </div>
430
429
  </div>
431
430
  </div>
432
- <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="7" style="position: absolute; transform: translateY(549px); width: 100%; will-change: transform;">
431
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="7" style="position: absolute; transform: translateY(509px); width: 100%; will-change: transform;">
433
432
  <div class="display-flex gap-15 align-items-center">
434
433
  <div class="Avatar bg-lightest" style="height: 40px;">
435
434
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -437,11 +436,11 @@ export default () => {
437
436
  </div>
438
437
  <div>
439
438
  <div class="text-medium" data-test-ignore="text">Vehicle 8</div>
440
- <div class="word-break" data-test-ignore="text">Fringilla ac ipsum Mauris ac ac et semper. semper Fusce ut</div>
439
+ <div class="word-break" data-test-ignore="text">Elit. in neque. in pretium vel sem. pretium finibus</div>
441
440
  </div>
442
441
  </div>
443
442
  </div>
444
- <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="8" style="position: absolute; transform: translateY(619px); width: 100%; will-change: transform;">
443
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="8" style="position: absolute; transform: translateY(579px); width: 100%; will-change: transform;">
445
444
  <div class="display-flex gap-15 align-items-center">
446
445
  <div class="Avatar bg-lightest" style="height: 40px;">
447
446
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -449,11 +448,11 @@ export default () => {
449
448
  </div>
450
449
  <div>
451
450
  <div class="text-medium" data-test-ignore="text">Vehicle 9</div>
452
- <div class="word-break" data-test-ignore="text">Scelerisque ante orci, in nec elementum rutrum adipiscing hendrerit molestie in, fames orci,</div>
451
+ <div class="word-break" data-test-ignore="text">Ante aliquam amet, velit. condimentum ac faucibus. aliquam</div>
453
452
  </div>
454
453
  </div>
455
454
  </div>
456
- <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="9" style="position: absolute; transform: translateY(709px); width: 100%; will-change: transform;">
455
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="9" style="position: absolute; transform: translateY(649px); width: 100%; will-change: transform;">
457
456
  <div class="display-flex gap-15 align-items-center">
458
457
  <div class="Avatar bg-lightest" style="height: 40px;">
459
458
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -461,7 +460,8 @@ export default () => {
461
460
  </div>
462
461
  <div>
463
462
  <div class="text-medium" data-test-ignore="text">Vehicle 10</div>
464
- <div class="word-break" data-test-ignore="text">Nunc nec bibendum, velit. Mauris</div>
463
+ <div class="word-break" data-test-ignore="text">
464
+ Lorem elit. adipiscing Fusce ipsum lorem rutrum ut et nunc Integer dolor</div>
465
465
  </div>
466
466
  </div>
467
467
  </div>