@rio-cloud/uikit-mcp 1.1.1 → 1.1.3

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 (191) hide show
  1. package/dist/doc-metadata.json +40 -50
  2. package/dist/docs/components/accentBar.md +1 -1
  3. package/dist/docs/components/activity.md +1 -1
  4. package/dist/docs/components/animatedNumber.md +3 -3
  5. package/dist/docs/components/animatedTextReveal.md +6 -6
  6. package/dist/docs/components/animations.md +31 -31
  7. package/dist/docs/components/appHeader.md +1 -1
  8. package/dist/docs/components/appLayout.md +143 -34
  9. package/dist/docs/components/appNavigationBar.md +1 -1
  10. package/dist/docs/components/areaCharts.md +6 -6
  11. package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
  12. package/dist/docs/components/assetTree.md +282 -176
  13. package/dist/docs/components/autosuggests.md +1 -1
  14. package/dist/docs/components/avatar.md +1 -1
  15. package/dist/docs/components/banner.md +2 -2
  16. package/dist/docs/components/barCharts.md +70 -70
  17. package/dist/docs/components/barList.md +11 -11
  18. package/dist/docs/components/basicMap.md +7 -7
  19. package/dist/docs/components/bottomSheet.md +1 -1
  20. package/dist/docs/components/button.md +1 -1
  21. package/dist/docs/components/buttonToolbar.md +1 -1
  22. package/dist/docs/components/calendarStripe.md +107 -131
  23. package/dist/docs/components/card.md +1 -1
  24. package/dist/docs/components/carousel.md +1 -1
  25. package/dist/docs/components/chartColors.md +1 -1
  26. package/dist/docs/components/chartsGettingStarted.md +1 -1
  27. package/dist/docs/components/chat.md +2 -2
  28. package/dist/docs/components/checkbox.md +1 -1
  29. package/dist/docs/components/clearableInput.md +1 -1
  30. package/dist/docs/components/collapse.md +2 -2
  31. package/dist/docs/components/composedCharts.md +48 -48
  32. package/dist/docs/components/contentLoader.md +101 -101
  33. package/dist/docs/components/dataTabs.md +8 -8
  34. package/dist/docs/components/datepickers.md +724 -724
  35. package/dist/docs/components/dialogs.md +1 -1
  36. package/dist/docs/components/divider.md +1 -1
  37. package/dist/docs/components/dropdowns.md +4359 -4356
  38. package/dist/docs/components/editableContent.md +1 -1
  39. package/dist/docs/components/expander.md +1 -1
  40. package/dist/docs/components/fade.md +1 -1
  41. package/dist/docs/components/fadeExpander.md +1 -1
  42. package/dist/docs/components/fadeUp.md +2 -2
  43. package/dist/docs/components/feedback.md +1 -1
  44. package/dist/docs/components/filePickers.md +1 -1
  45. package/dist/docs/components/formLabel.md +1 -1
  46. package/dist/docs/components/groupedItemList.md +1 -1
  47. package/dist/docs/components/iconList.md +4 -4
  48. package/dist/docs/components/imagePreloader.md +1 -1
  49. package/dist/docs/components/labeledElement.md +1 -1
  50. package/dist/docs/components/licensePlate.md +1 -1
  51. package/dist/docs/components/lineCharts.md +3 -3
  52. package/dist/docs/components/listMenu.md +1 -1
  53. package/dist/docs/components/loadMore.md +1 -1
  54. package/dist/docs/components/mainNavigation.md +1 -1
  55. package/dist/docs/components/mapCircle.md +3 -3
  56. package/dist/docs/components/mapCluster.md +5 -5
  57. package/dist/docs/components/mapContext.md +3 -3
  58. package/dist/docs/components/mapDraggableMarker.md +3 -3
  59. package/dist/docs/components/mapGettingStarted.md +1 -1
  60. package/dist/docs/components/mapInfoBubble.md +3 -3
  61. package/dist/docs/components/mapLayerGroup.md +3 -3
  62. package/dist/docs/components/mapMarker.md +3 -3
  63. package/dist/docs/components/mapPolygon.md +5 -5
  64. package/dist/docs/components/mapRoute.md +13 -13
  65. package/dist/docs/components/mapRouteGenerator.md +1 -1
  66. package/dist/docs/components/mapSettings.md +11 -11
  67. package/dist/docs/components/mapUtils.md +1 -1
  68. package/dist/docs/components/multiselects.md +1 -1
  69. package/dist/docs/components/noData.md +1 -1
  70. package/dist/docs/components/notifications.md +1 -1
  71. package/dist/docs/components/numbercontrol.md +1 -1
  72. package/dist/docs/components/onboarding.md +1 -1
  73. package/dist/docs/components/page.md +1 -1
  74. package/dist/docs/components/pager.md +1 -1
  75. package/dist/docs/components/pieCharts.md +36 -36
  76. package/dist/docs/components/popover.md +1 -1
  77. package/dist/docs/components/position.md +1 -1
  78. package/dist/docs/components/radialBarCharts.md +25 -25
  79. package/dist/docs/components/radiobutton.md +1 -1
  80. package/dist/docs/components/releaseNotes.md +1 -1
  81. package/dist/docs/components/resizer.md +1 -1
  82. package/dist/docs/components/responsiveColumnStripe.md +1 -1
  83. package/dist/docs/components/responsiveVideo.md +1 -1
  84. package/dist/docs/components/rioglyph.md +1 -1
  85. package/dist/docs/components/rules.md +1 -1
  86. package/dist/docs/components/saveableInput.md +277 -277
  87. package/dist/docs/components/selects.md +1 -1
  88. package/dist/docs/components/sidebar.md +1 -1
  89. package/dist/docs/components/sliders.md +1 -1
  90. package/dist/docs/components/smoothScrollbars.md +1 -1
  91. package/dist/docs/components/spinners.md +1 -1
  92. package/dist/docs/components/states.md +1 -1
  93. package/dist/docs/components/statsWidgets.md +1 -1
  94. package/dist/docs/components/statusBar.md +1 -1
  95. package/dist/docs/components/stepButton.md +1 -1
  96. package/dist/docs/components/steppedProgressBars.md +1 -1
  97. package/dist/docs/components/subNavigation.md +1 -1
  98. package/dist/docs/components/supportMarker.md +1 -1
  99. package/dist/docs/components/svgImage.md +1 -1
  100. package/dist/docs/components/switch.md +1 -1
  101. package/dist/docs/components/tables.md +1 -1
  102. package/dist/docs/components/tagManager.md +1 -1
  103. package/dist/docs/components/tags.md +1 -1
  104. package/dist/docs/components/teaser.md +1 -1
  105. package/dist/docs/components/timeline.md +1 -1
  106. package/dist/docs/components/timepicker.md +1 -1
  107. package/dist/docs/components/toggleButton.md +1 -1
  108. package/dist/docs/components/tooltip.md +1 -1
  109. package/dist/docs/components/virtualList.md +72 -72
  110. package/dist/docs/foundations.md +169 -169
  111. package/dist/docs/start/changelog.md +7 -1
  112. package/dist/docs/start/goodtoknow.md +1 -1
  113. package/dist/docs/start/guidelines/color-combinations.md +1 -1
  114. package/dist/docs/start/guidelines/custom-css.md +1 -1
  115. package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
  116. package/dist/docs/start/guidelines/formatting.md +1 -1
  117. package/dist/docs/start/guidelines/iframe.md +1 -1
  118. package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
  119. package/dist/docs/start/guidelines/print-css.md +1 -1
  120. package/dist/docs/start/guidelines/spinner.md +81 -81
  121. package/dist/docs/start/guidelines/supported-browsers.md +1 -1
  122. package/dist/docs/start/guidelines/writing.md +1 -1
  123. package/dist/docs/start/howto.md +9 -9
  124. package/dist/docs/start/intro.md +1 -1
  125. package/dist/docs/start/responsiveness.md +1 -1
  126. package/dist/docs/templates/common-table.md +11 -11
  127. package/dist/docs/templates/detail-views.md +2 -2
  128. package/dist/docs/templates/expandable-details.md +1 -1
  129. package/dist/docs/templates/feature-cards.md +55 -55
  130. package/dist/docs/templates/form-summary.md +22 -22
  131. package/dist/docs/templates/form-toggle.md +1 -1
  132. package/dist/docs/templates/list-blocks.md +200 -200
  133. package/dist/docs/templates/loading-progress.md +1 -1
  134. package/dist/docs/templates/options-panel.md +1 -1
  135. package/dist/docs/templates/panel-variants.md +1 -1
  136. package/dist/docs/templates/progress-cards.md +1 -1
  137. package/dist/docs/templates/progress-success.md +1 -1
  138. package/dist/docs/templates/settings-form.md +23 -23
  139. package/dist/docs/templates/stats-blocks.md +16 -16
  140. package/dist/docs/templates/table-panel.md +1 -1
  141. package/dist/docs/templates/table-row-animation.md +1 -1
  142. package/dist/docs/templates/usage-cards.md +1 -1
  143. package/dist/docs/utilities/deviceUtils.md +1 -1
  144. package/dist/docs/utilities/featureToggles.md +1 -1
  145. package/dist/docs/utilities/fuelTypeUtils.md +1 -1
  146. package/dist/docs/utilities/routeUtils.md +1 -1
  147. package/dist/docs/utilities/useAfterMount.md +1 -1
  148. package/dist/docs/utilities/useAutoAnimate.md +1 -1
  149. package/dist/docs/utilities/useAverage.md +1 -1
  150. package/dist/docs/utilities/useClickOutside.md +1 -1
  151. package/dist/docs/utilities/useClipboard.md +2 -2
  152. package/dist/docs/utilities/useCount.md +1 -1
  153. package/dist/docs/utilities/useDarkMode.md +1 -1
  154. package/dist/docs/utilities/useDebugInfo.md +4 -4
  155. package/dist/docs/utilities/useEffectOnce.md +1 -1
  156. package/dist/docs/utilities/useElapsedTime.md +1 -1
  157. package/dist/docs/utilities/useElementSize.md +1 -1
  158. package/dist/docs/utilities/useEsc.md +1 -1
  159. package/dist/docs/utilities/useEvent.md +1 -1
  160. package/dist/docs/utilities/useFocusTrap.md +1 -1
  161. package/dist/docs/utilities/useFullscreen.md +1 -1
  162. package/dist/docs/utilities/useHover.md +1 -1
  163. package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
  164. package/dist/docs/utilities/useInterval.md +1 -1
  165. package/dist/docs/utilities/useIsFocusWithin.md +1 -1
  166. package/dist/docs/utilities/useKey.md +1 -1
  167. package/dist/docs/utilities/useLocalStorage.md +1 -1
  168. package/dist/docs/utilities/useLocationSuggestions.md +1 -1
  169. package/dist/docs/utilities/useMax.md +1 -1
  170. package/dist/docs/utilities/useMin.md +1 -1
  171. package/dist/docs/utilities/useMutationObserver.md +1 -1
  172. package/dist/docs/utilities/useOnScreen.md +1 -1
  173. package/dist/docs/utilities/useOnlineStatus.md +1 -1
  174. package/dist/docs/utilities/usePostMessage.md +1 -57
  175. package/dist/docs/utilities/usePostMessageSender.md +1 -1
  176. package/dist/docs/utilities/usePrevious.md +1 -1
  177. package/dist/docs/utilities/useResizeObserver.md +1 -1
  178. package/dist/docs/utilities/useScrollPosition.md +1 -1
  179. package/dist/docs/utilities/useSearch.md +1 -1
  180. package/dist/docs/utilities/useSorting.md +1 -1
  181. package/dist/docs/utilities/useStateWithValidation.md +1 -1
  182. package/dist/docs/utilities/useSum.md +1 -1
  183. package/dist/docs/utilities/useTableExport.md +51 -51
  184. package/dist/docs/utilities/useTableSelection.md +87 -87
  185. package/dist/docs/utilities/useTimeout.md +1 -1
  186. package/dist/docs/utilities/useToggle.md +1 -1
  187. package/dist/docs/utilities/useWindowResize.md +1 -1
  188. package/dist/index.mjs +8 -2
  189. package/dist/version.json +2 -2
  190. package/package.json +8 -8
  191. package/dist/docs/components/fullscreenMap.md +0 -10
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Selection
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/selects
6
- *Captured:* 2025-12-12T14:20:30.597Z
6
+ *Captured:* 2026-01-07T12:11:27.918Z
7
7
 
8
8
  The Select and Multiselect components are form controls and are intended to be used within forms. They are designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Application
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/sidebar
6
- *Captured:* 2025-12-12T14:20:08.707Z
6
+ *Captured:* 2026-01-07T12:11:05.927Z
7
7
 
8
8
  There are 2 kinds of Sidebars. The default fluid and the fly variant.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Interaction
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/sliders
6
- *Captured:* 2025-12-12T14:20:21.114Z
6
+ *Captured:* 2026-01-07T12:11:18.085Z
7
7
 
8
8
  ## Slider
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/smoothScrollbars
6
- *Captured:* 2025-12-12T14:21:04.049Z
6
+ *Captured:* 2026-01-07T12:12:01.369Z
7
7
 
8
8
  ## SmoothScrollbars
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/spinners
6
- *Captured:* 2025-12-12T14:21:03.882Z
6
+ *Captured:* 2026-01-07T12:12:00.634Z
7
7
 
8
8
  ## Spinner
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/states
6
- *Captured:* 2025-12-12T14:20:53.901Z
6
+ *Captured:* 2026-01-07T12:11:51.466Z
7
7
 
8
8
  A simple component to show an error to the user.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/statsWidgets
6
- *Captured:* 2025-12-12T14:20:48.300Z
6
+ *Captured:* 2026-01-07T12:11:45.730Z
7
7
 
8
8
  ## StatsWidgets
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Progress
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/statusBar
6
- *Captured:* 2025-12-12T14:20:35.412Z
6
+ *Captured:* 2026-01-07T12:11:32.519Z
7
7
 
8
8
  Flexible component to showcase various states based on progress bars.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Interaction
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/stepButton
6
- *Captured:* 2025-12-12T14:20:18.984Z
6
+ *Captured:* 2026-01-07T12:11:15.961Z
7
7
 
8
8
  The StepButton is a convenient component designed to simplify usage and alignment of buttons with chevrons.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Progress
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/steppedProgressBars
6
- *Captured:* 2025-12-12T14:20:38.496Z
6
+ *Captured:* 2026-01-07T12:11:35.451Z
7
7
 
8
8
  ## SteppedProgressBar - Circle
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Navigation
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/subNavigation
6
- *Captured:* 2025-12-12T14:20:11.100Z
6
+ *Captured:* 2026-01-07T12:11:08.350Z
7
7
 
8
8
  ## SubNavigation
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/supportMarker
6
- *Captured:* 2025-12-12T14:21:01.179Z
6
+ *Captured:* 2026-01-07T12:11:58.348Z
7
7
 
8
8
  You can add the support-marker class along with the data-support attribute to any HTML element - even divs wrapping around iframes, for example!
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/svgImage
6
- *Captured:* 2025-12-12T14:21:02.548Z
6
+ *Captured:* 2026-01-07T12:11:59.734Z
7
7
 
8
8
  This component helps to render SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes. It uses the defined UIKIT CSS variables to automatically adapt to dark mode. When customizing colors, make sure to use existing CSS color variable names.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Interaction
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/switch
6
- *Captured:* 2025-12-12T14:20:21.100Z
6
+ *Captured:* 2026-01-07T12:11:18.138Z
7
7
 
8
8
  ## Switch
9
9
 
@@ -3,6 +3,6 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/tables
6
- *Captured:* 2025-12-12T14:20:47.474Z
6
+ *Captured:* 2026-01-07T12:11:44.823Z
7
7
 
8
8
  The toolbar and its content has to be implemented by each team itself. Please use the following sample as a reference and adapt it accordingly.
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/tagManager
6
- *Captured:* 2025-12-12T14:21:04.277Z
6
+ *Captured:* 2026-01-07T12:12:01.801Z
7
7
 
8
8
  The TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/tags
6
- *Captured:* 2025-12-12T14:21:03.916Z
6
+ *Captured:* 2026-01-07T12:12:01.118Z
7
7
 
8
8
  ## Tag
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/teaser
6
- *Captured:* 2025-12-12T14:20:48.903Z
6
+ *Captured:* 2026-01-07T12:11:46.308Z
7
7
 
8
8
  The teaser component was built to create all kinds of landing and/or single pages. for example, be used in dialogs or sidebars.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* CSS Only
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/timeline
6
- *Captured:* 2025-12-12T14:21:05.446Z
6
+ *Captured:* 2026-01-07T12:12:03.009Z
7
7
 
8
8
  The timeline component is a pure CSS component.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Pickers
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/timepicker
6
- *Captured:* 2025-12-12T14:20:35.064Z
6
+ *Captured:* 2026-01-07T12:11:32.462Z
7
7
 
8
8
  ## TimePicker
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Interaction
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/toggleButton
6
- *Captured:* 2025-12-12T14:20:23.194Z
6
+ *Captured:* 2026-01-07T12:11:20.239Z
7
7
 
8
8
  This toggle button is based on the button component that can be used directly.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/tooltip
6
- *Captured:* 2025-12-12T14:21:06.097Z
6
+ *Captured:* 2026-01-07T12:12:02.752Z
7
7
 
8
8
  In order to use a Tooltip on an element, wrap it with the OverlayTrigger component or use the SimpleTooltip component.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/virtualList
6
- *Captured:* 2025-12-12T14:20:50.395Z
6
+ *Captured:* 2026-01-07T12:11:47.861Z
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,70 @@ 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
- In ante Sed nunc finibus ante massa, tortor ac In Mauris amet, Vivamus
17
+ Sed ac in vel et in ac
18
18
 
19
19
  Item 2
20
- Efficitur Integer in Mauris Ut ac pretium tincidunt. ipsum elementum enim
20
+ Velit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,
21
21
 
22
22
  Item 3
23
- Ligula ut bibendum, Fusce nunc
23
+ Ac
24
+ Lorem orci, nec primis lorem
24
25
 
25
26
  Item 4
26
- Nec ac iaculis. In iaculis. massa ante fames Fusce massa, sem. elit. primis ipsum
27
+ Efficitur massa, iaculis. ligula nunc
27
28
 
28
29
  Item 5
29
- Elit. volutpat sit eget et hendrerit adipiscing nec vel et ut amet, nec
30
+ Ac nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc
30
31
 
31
32
  Item 6
32
- Pretium elit. elit. sagittis dui semper amet, hendrerit ipsum
33
+ Pretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper
33
34
 
34
35
  Item 7
35
- Est eget efficitur sem. ante semper Integer neque. enim condimentum in sit ligula elit.
36
+ Integer dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed
36
37
 
37
38
  Item 8
38
- Scelerisque Ut ante et aliquam Mauris pharetra finibus semper. vitae libero efficitur In
39
+ Bibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,
39
40
 
40
41
  Item 9
41
- Est in ante enim metus Mauris elit. Ut
42
- Lorem elit. vitae hendrerit scelerisque amet,
42
+ Et massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat
43
43
 
44
44
  Item 10
45
- Posuere dui orci libero et massa, finibus
45
+ Ut ligula
46
+ Lorem lorem tortor primis libero
46
47
 
47
48
  #### Summary
48
49
 
49
50
  Virtual list with 100 itemsItem 1
50
- In ante Sed nunc finibus ante massa, tortor ac In Mauris amet, Vivamus
51
+ Sed ac in vel et in ac
51
52
 
52
53
  Item 2
53
- Efficitur Integer in Mauris Ut ac pretium tincidunt. ipsum elementum enim
54
+ Velit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,
54
55
 
55
56
  Item 3
56
- Ligula ut bibendum, Fusce nunc
57
+ Ac
58
+ Lorem orci, nec primis lorem
57
59
 
58
60
  Item 4
59
- Nec ac iaculis. In iaculis. massa ante fames Fusce massa, sem. elit. primis ipsum
61
+ Efficitur massa, iaculis. ligula nunc
60
62
 
61
63
  Item 5
62
- Elit. volutpat sit eget et hendrerit adipiscing nec vel et ut amet, nec
64
+ Ac nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc
63
65
 
64
66
  Item 6
65
- Pretium elit. elit. sagittis dui semper amet, hendrerit ipsum
67
+ Pretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper
66
68
 
67
69
  Item 7
68
- Est eget efficitur sem. ante semper Integer neque. enim condimentum in sit ligula elit.
70
+ Integer dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed
69
71
 
70
72
  Item 8
71
- Scelerisque Ut ante et aliquam Mauris pharetra finibus semper. vitae libero efficitur In
73
+ Bibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,
72
74
 
73
75
  Item 9
74
- Est in ante enim metus Mauris elit. Ut
75
- Lorem elit. vitae hendrerit scelerisque amet,
76
+ Et massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat
76
77
 
77
78
  Item 10
78
- Posuere dui orci libero et massa, finibus
79
+ Ut ligula
80
+ Lorem lorem tortor primis libero
79
81
 
80
82
  #### React (tsx)
81
83
 
@@ -128,62 +130,63 @@ export default () => {
128
130
  <div class="VirtualListItemWrapper " data-index="0" style="position: absolute; transform: translateY(0px); width: 100%; will-change: transform;">
129
131
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
130
132
  <div class="text-medium" data-test-ignore="text">Item 1</div>
131
- <div class="word-break" data-test-ignore="text">In ante Sed nunc finibus ante massa, tortor ac In Mauris amet, Vivamus</div>
133
+ <div class="word-break" data-test-ignore="text">Sed ac in vel et in ac</div>
132
134
  </div>
133
135
  </div>
134
136
  <div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(70px); width: 100%; will-change: transform;">
135
137
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
136
138
  <div class="text-medium" data-test-ignore="text">Item 2</div>
137
- <div class="word-break" data-test-ignore="text">Efficitur Integer in Mauris Ut ac pretium tincidunt. ipsum elementum enim</div>
139
+ <div class="word-break" data-test-ignore="text">Velit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,</div>
138
140
  </div>
139
141
  </div>
140
142
  <div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(140px); width: 100%; will-change: transform;">
141
143
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
142
144
  <div class="text-medium" data-test-ignore="text">Item 3</div>
143
- <div class="word-break" data-test-ignore="text">Ligula ut bibendum, Fusce nunc</div>
145
+ <div class="word-break" data-test-ignore="text">Ac
146
+ Lorem orci, nec primis lorem</div>
144
147
  </div>
145
148
  </div>
146
149
  <div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(210px); width: 100%; will-change: transform;">
147
150
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
148
151
  <div class="text-medium" data-test-ignore="text">Item 4</div>
149
- <div class="word-break" data-test-ignore="text">Nec ac iaculis. In iaculis. massa ante fames Fusce massa, sem. elit. primis ipsum</div>
152
+ <div class="word-break" data-test-ignore="text">Efficitur massa, iaculis. ligula nunc</div>
150
153
  </div>
151
154
  </div>
152
155
  <div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(280px); width: 100%; will-change: transform;">
153
156
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
154
157
  <div class="text-medium" data-test-ignore="text">Item 5</div>
155
- <div class="word-break" data-test-ignore="text">Elit. volutpat sit eget et hendrerit adipiscing nec vel et ut amet, nec</div>
158
+ <div class="word-break" data-test-ignore="text">Ac nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc</div>
156
159
  </div>
157
160
  </div>
158
161
  <div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(350px); width: 100%; will-change: transform;">
159
162
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
160
163
  <div class="text-medium" data-test-ignore="text">Item 6</div>
161
- <div class="word-break" data-test-ignore="text">Pretium elit. elit. sagittis dui semper amet, hendrerit ipsum</div>
164
+ <div class="word-break" data-test-ignore="text">Pretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper</div>
162
165
  </div>
163
166
  </div>
164
167
  <div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(420px); width: 100%; will-change: transform;">
165
168
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
166
169
  <div class="text-medium" data-test-ignore="text">Item 7</div>
167
- <div class="word-break" data-test-ignore="text">Est eget efficitur sem. ante semper Integer neque. enim condimentum in sit ligula elit.</div>
170
+ <div class="word-break" data-test-ignore="text">Integer dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed</div>
168
171
  </div>
169
172
  </div>
170
173
  <div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(490px); width: 100%; will-change: transform;">
171
174
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
172
175
  <div class="text-medium" data-test-ignore="text">Item 8</div>
173
- <div class="word-break" data-test-ignore="text">Scelerisque Ut ante et aliquam Mauris pharetra finibus semper. vitae libero efficitur In</div>
176
+ <div class="word-break" data-test-ignore="text">Bibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,</div>
174
177
  </div>
175
178
  </div>
176
179
  <div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(560px); width: 100%; will-change: transform;">
177
180
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
178
181
  <div class="text-medium" data-test-ignore="text">Item 9</div>
179
- <div class="word-break" data-test-ignore="text">Est in ante enim metus Mauris elit. Ut
180
- Lorem elit. vitae hendrerit scelerisque amet,</div>
182
+ <div class="word-break" data-test-ignore="text">Et massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat</div>
181
183
  </div>
182
184
  </div>
183
185
  <div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(630px); width: 100%; will-change: transform;">
184
186
  <div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
185
187
  <div class="text-medium" data-test-ignore="text">Item 10</div>
186
- <div class="word-break" data-test-ignore="text">Posuere dui orci libero et massa, finibus</div>
188
+ <div class="word-break" data-test-ignore="text">Ut ligula
189
+ Lorem lorem tortor primis libero</div>
187
190
  </div>
188
191
  </div>
189
192
  </div>
@@ -209,69 +212,67 @@ export default () => {
209
212
 
210
213
  Virtual list with 5000 items
211
214
  Vehicle 1
212
- Rutrum quis, ipsum sit tincidunt. semper. libero ac ut tincidunt.
215
+ Vel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac
213
216
 
214
217
  Vehicle 2
215
- Ligula Ut tortor in aliquam
218
+ Fringilla Fusce eget pharetra Vivamus
216
219
 
217
220
  Vehicle 3
218
- Mauris ut vitae Fusce et et Fusce orci, primis lorem neque. sem. orci In ut
221
+ In felis. dui metus malesuada fames
219
222
 
220
223
  Vehicle 4
221
- Pretium est orci ante aliquam
224
+ Aliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.
222
225
 
223
226
  Vehicle 5
224
- Nec condimentum enim sagittis quis, quis, fames dolor
227
+ Ante Sed ligula dolor molestie
225
228
 
226
229
  Vehicle 6
227
- Interdum eget orci velit. elit. sagittis bibendum, elit. massa ac pretium iaculis.
230
+ Volutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante
228
231
 
229
232
  Vehicle 7
230
- Ante Duis Interdum ut dolor aliquam
231
- Lorem dolor tincidunt. volutpat primis iaculis. iaculis.
233
+ Duis et Fusce vitae elit. est sit ac
232
234
 
233
235
  Vehicle 8
234
- Nec iaculis. et lorem condimentum ac semper. neque. Interdum
236
+ Ut sagittis elementum adipiscing iaculis. iaculis.
235
237
 
236
238
  Vehicle 9
237
- Metus adipiscing fames orci, consectetur Duis efficitur Integer eget ipsum elit.
239
+ Libero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante
238
240
 
239
241
  Vehicle 10
240
- Interdum vitae Fusce adipiscing tincidunt. hendrerit ac condimentum In in semper
242
+ Duis viverra massa, scelerisque Vivamus in elit. tortor in, et Vivamus
241
243
 
242
244
  #### Summary
243
245
 
244
246
  Virtual list with 5000 items
245
247
  Vehicle 1
246
- Rutrum quis, ipsum sit tincidunt. semper. libero ac ut tincidunt.
248
+ Vel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac
247
249
 
248
250
  Vehicle 2
249
- Ligula Ut tortor in aliquam
251
+ Fringilla Fusce eget pharetra Vivamus
250
252
 
251
253
  Vehicle 3
252
- Mauris ut vitae Fusce et et Fusce orci, primis lorem neque. sem. orci In ut
254
+ In felis. dui metus malesuada fames
253
255
 
254
256
  Vehicle 4
255
- Pretium est orci ante aliquam
257
+ Aliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.
256
258
 
257
259
  Vehicle 5
258
- Nec condimentum enim sagittis quis, quis, fames dolor
260
+ Ante Sed ligula dolor molestie
259
261
 
260
262
  Vehicle 6
261
- Interdum eget orci velit. elit. sagittis bibendum, elit. massa ac pretium iaculis.
263
+ Volutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante
262
264
 
263
265
  Vehicle 7
264
- Ante Duis Interdum ut dolor aliquam
265
- Lorem dolor tincidunt. volutpat primis iaculis. iaculis.
266
+ Duis et Fusce vitae elit. est sit ac
266
267
 
267
268
  Vehicle 8
268
- Nec iaculis. et lorem condimentum ac semper. neque. Interdum
269
+ Ut sagittis elementum adipiscing iaculis. iaculis.
269
270
 
270
271
  Vehicle 9
271
- Metus adipiscing fames orci, consectetur Duis efficitur Integer eget ipsum elit.
272
+ Libero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante
272
273
 
273
274
  Vehicle 10
274
- Interdum vitae Fusce adipiscing tincidunt. hendrerit ac condimentum In in semper
275
+ Duis viverra massa, scelerisque Vivamus in elit. tortor in, et Vivamus
275
276
 
276
277
  #### React (tsx)
277
278
 
@@ -341,7 +342,7 @@ export default () => {
341
342
  <div class="padding-20">
342
343
  <label>Virtual list with 5000 items</label>
343
344
  <div class="max-width-600 max-height-400 overflow-y-auto">
344
- <div class="VirtualList overflow-y-auto border rounded" style="height: 360000px; position: relative; overflow: visible;">
345
+ <div class="VirtualList overflow-y-auto border rounded" style="height: 370000px; position: relative; overflow: visible;">
345
346
  <div class="position-relative" style="height: auto;">
346
347
  <div class="VirtualListItemContainer list-group">
347
348
  <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="0" style="position: absolute; transform: translateY(0px); width: 100%; will-change: transform;">
@@ -352,7 +353,7 @@ export default () => {
352
353
  </div>
353
354
  <div>
354
355
  <div class="text-medium" data-test-ignore="text">Vehicle 1</div>
355
- <div class="word-break" data-test-ignore="text">Rutrum quis, ipsum sit tincidunt. semper. libero ac ut tincidunt.</div>
356
+ <div class="word-break" data-test-ignore="text">Vel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac</div>
356
357
  </div>
357
358
  </div>
358
359
  </div>
@@ -364,7 +365,7 @@ export default () => {
364
365
  </div>
365
366
  <div>
366
367
  <div class="text-medium" data-test-ignore="text">Vehicle 2</div>
367
- <div class="word-break" data-test-ignore="text">Ligula Ut tortor in aliquam</div>
368
+ <div class="word-break" data-test-ignore="text">Fringilla Fusce eget pharetra Vivamus</div>
368
369
  </div>
369
370
  </div>
370
371
  </div>
@@ -376,7 +377,7 @@ export default () => {
376
377
  </div>
377
378
  <div>
378
379
  <div class="text-medium" data-test-ignore="text">Vehicle 3</div>
379
- <div class="word-break" data-test-ignore="text">Mauris ut vitae Fusce et et Fusce orci, primis lorem neque. sem. orci In ut</div>
380
+ <div class="word-break" data-test-ignore="text">In felis. dui metus malesuada fames</div>
380
381
  </div>
381
382
  </div>
382
383
  </div>
@@ -388,11 +389,11 @@ export default () => {
388
389
  </div>
389
390
  <div>
390
391
  <div class="text-medium" data-test-ignore="text">Vehicle 4</div>
391
- <div class="word-break" data-test-ignore="text">Pretium est orci ante aliquam</div>
392
+ <div class="word-break" data-test-ignore="text">Aliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.</div>
392
393
  </div>
393
394
  </div>
394
395
  </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;">
396
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="4" style="position: absolute; transform: translateY(299px); width: 100%; will-change: transform;">
396
397
  <div class="display-flex gap-15 align-items-center">
397
398
  <div class="Avatar bg-lightest" style="height: 40px;">
398
399
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -400,11 +401,11 @@ export default () => {
400
401
  </div>
401
402
  <div>
402
403
  <div class="text-medium" data-test-ignore="text">Vehicle 5</div>
403
- <div class="word-break" data-test-ignore="text">Nec condimentum enim sagittis quis, quis, fames dolor</div>
404
+ <div class="word-break" data-test-ignore="text">Ante Sed ligula dolor molestie</div>
404
405
  </div>
405
406
  </div>
406
407
  </div>
407
- <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="5" style="position: absolute; transform: translateY(349px); width: 100%; will-change: transform;">
408
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="5" style="position: absolute; transform: translateY(369px); width: 100%; will-change: transform;">
408
409
  <div class="display-flex gap-15 align-items-center">
409
410
  <div class="Avatar bg-lightest" style="height: 40px;">
410
411
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -412,11 +413,11 @@ export default () => {
412
413
  </div>
413
414
  <div>
414
415
  <div class="text-medium" data-test-ignore="text">Vehicle 6</div>
415
- <div class="word-break" data-test-ignore="text">Interdum eget orci velit. elit. sagittis bibendum, elit. massa ac pretium iaculis.</div>
416
+ <div class="word-break" data-test-ignore="text">Volutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante</div>
416
417
  </div>
417
418
  </div>
418
419
  </div>
419
- <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="6" style="position: absolute; transform: translateY(419px); width: 100%; will-change: transform;">
420
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="6" style="position: absolute; transform: translateY(439px); width: 100%; will-change: transform;">
420
421
  <div class="display-flex gap-15 align-items-center">
421
422
  <div class="Avatar bg-lightest" style="height: 40px;">
422
423
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -424,8 +425,7 @@ export default () => {
424
425
  </div>
425
426
  <div>
426
427
  <div class="text-medium" data-test-ignore="text">Vehicle 7</div>
427
- <div class="word-break" data-test-ignore="text">Ante Duis Interdum ut dolor aliquam
428
- Lorem dolor tincidunt. volutpat primis iaculis. iaculis.</div>
428
+ <div class="word-break" data-test-ignore="text">Duis et Fusce vitae elit. est sit ac</div>
429
429
  </div>
430
430
  </div>
431
431
  </div>
@@ -437,7 +437,7 @@ export default () => {
437
437
  </div>
438
438
  <div>
439
439
  <div class="text-medium" data-test-ignore="text">Vehicle 8</div>
440
- <div class="word-break" data-test-ignore="text">Nec iaculis. et lorem condimentum ac semper. neque. Interdum</div>
440
+ <div class="word-break" data-test-ignore="text">Ut sagittis elementum adipiscing iaculis. iaculis.</div>
441
441
  </div>
442
442
  </div>
443
443
  </div>
@@ -449,11 +449,11 @@ export default () => {
449
449
  </div>
450
450
  <div>
451
451
  <div class="text-medium" data-test-ignore="text">Vehicle 9</div>
452
- <div class="word-break" data-test-ignore="text">Metus adipiscing fames orci, consectetur Duis efficitur Integer eget ipsum elit.</div>
452
+ <div class="word-break" data-test-ignore="text">Libero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante</div>
453
453
  </div>
454
454
  </div>
455
455
  </div>
456
- <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="9" style="position: absolute; transform: translateY(649px); width: 100%; will-change: transform;">
456
+ <div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="9" style="position: absolute; transform: translateY(669px); width: 100%; will-change: transform;">
457
457
  <div class="display-flex gap-15 align-items-center">
458
458
  <div class="Avatar bg-lightest" style="height: 40px;">
459
459
  <span class="Avatar-icon rioglyph rioglyph-truck ">
@@ -461,7 +461,7 @@ export default () => {
461
461
  </div>
462
462
  <div>
463
463
  <div class="text-medium" data-test-ignore="text">Vehicle 10</div>
464
- <div class="word-break" data-test-ignore="text">Interdum vitae Fusce adipiscing tincidunt. hendrerit ac condimentum In in semper</div>
464
+ <div class="word-break" data-test-ignore="text">Duis viverra massa, scelerisque Vivamus in elit. tortor in, et Vivamus</div>
465
465
  </div>
466
466
  </div>
467
467
  </div>